lkddi/certd
1
0
Fork 0
mirror of https://github.com/certd/certd.git synced 2026-04-14 20:40:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化首页图标

Browse Source
This commit is contained in:
xiaojunnuo
2026-01-27 00:32:03 +08:00
parent ce6e515309
commit 998de0f9a0
4 changed files with 63 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ui/certd-client/src/style/common.less
View File

@@ -86,6 +86,11 @@ h6 {
align-items: baseline;
}
.flex-evenly {
display: flex;
justify-content: space-evenly;
}
.flex {
display: flex;
}
@@ -312,7 +317,11 @@ h6 {
}
.fs-16 {
font-size: 16px;
font-size: 16px !important;
}
.fs-28 {
font-size: 28px !important;
}
.w-50\% {

17
packages/ui/certd-client/src/views/framework/home/dashboard/index.vue
View File

@@ -67,7 +67,7 @@
<div class="statistic-data m-20">
<a-row :gutter="20" class="flex-wrap">
<a-col :md="6" :xs="24">
<statistic-card :title="t('certd.dashboard.pipelineCount')" :count="count.pipelineCount" :sub-counts="count.pipelineEnableCount">
<statistic-card icon="fluent-color:data-line-24" :title="t('certd.dashboard.pipelineCount')" :count="count.pipelineCount" :sub-counts="count.pipelineEnableCount">
<template v-if="count.pipelineCount === 0" #default>
<div class="flex-center flex-1 flex-col">
<div style="font-size: 18px; font-weight: 700">{{ t("certd.dashboard.noPipeline") }}</div>
@@ -85,7 +85,7 @@
</statistic-card>
</a-col> -->
<a-col :md="6" :xs="24">
<statistic-card :title="t('certd.dashboard.certCount')" :count="count.certCount" :sub-counts="count.certStatusCount">
<statistic-card icon="fluent-color:certificate-24" :title="t('certd.dashboard.certCount')" :count="count.certCount" :sub-counts="count.certStatusCount">
<template v-if="count.certCount === 0" #default>
<div class="flex-center flex-1 flex-col">
<div style="font-size: 18px; font-weight: 700">{{ t("certd.dashboard.noCert") }}</div>
@@ -97,12 +97,12 @@
</statistic-card>
</a-col>
<a-col :md="6" :xs="24">
<statistic-card :title="t('certd.dashboard.recentRun')" :footer="false">
<statistic-card icon="fluent-color:data-trending-24" :title="t('certd.dashboard.recentRun')" :footer="false">
<day-count v-if="count.historyCountPerDay" :data="count.historyCountPerDay" :title="t('certd.dashboard.runCount')"></day-count>
</statistic-card>
</a-col>
<a-col :md="6" :xs="24">
<statistic-card :title="t('certd.dashboard.expiringCerts')">
<statistic-card icon="fluent-color:alert-urgent-24" :title="t('certd.dashboard.expiringCerts')">
<expiring-list v-if="count.expiringList" :data="count.expiringList"></expiring-list>
</statistic-card>
</a-col>
@@ -112,8 +112,11 @@
<div v-if="pluginGroups" class="plugin-list">
<a-card>
<template #title>
{{ t("certd.dashboard.supportedTasks") }}
<a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
<div class="flex items-center">
<fs-icon icon="fluent-color:puzzle-piece-24" class="mr-5 fs-28" />
<div class="mr-5">{{ t("certd.dashboard.supportedTasks") }}</div>
<a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
</div>
</template>
<a-row :gutter="10">
<a-col v-for="item of pluginGroups.groups.all.plugins" :key="item.name" class="plugin-item-col" :xl="4" :md="6" :xs="24">
@@ -264,7 +267,7 @@ function transformStatusCount() {
const certCount = count.value.certCount;
count.value.certStatusCount = [
{ name: t("certd.dashboard.certExpiredCount"), value: certCount.expired, color: "red", checkIcon: "mingcute:warning-fill:#f44336" },
{ name: t("certd.dashboard.certExpiringCount"), value: certCount.expiring, color: "yellow", checkIcon: "mingcute:alert-fill:#ff9800" },
{ name: t("certd.dashboard.certExpiringCount"), value: certCount.expiring, color: "yellow", checkIcon: "mingcute:alert-fill:#ff9800", title: "到期不足15天" },
{ name: t("certd.dashboard.certNoExpireCount"), value: certCount.notExpired, color: "green" },
];
count.value.certCount = certCount.total;

56
packages/ui/certd-client/src/views/framework/home/dashboard/statistic-card.vue
View File

@@ -3,7 +3,10 @@
<a-card>
<div class="data-item">
<div class="header">
<div class="title">{{ title }}</div>
<div class="title">
<fs-icon :icon="icon" class="statistic-icon"></fs-icon>
{{ title }}
</div>
<div class="more"></div>
</div>
<div class="content">
@@ -11,11 +14,11 @@
<div v-if="count !== 0" class="value flex items-center w-full">
<div class="total flex-center flex-1 flex-col">
<span>{{ count }}</span>
<span class="title">{{ title }}</span>
<span class="sub-title">{{ title }}</span>
</div>
<a-divider type="vertical h-10"></a-divider>
<div class="sub flex-1 flex-col h-[80%] flex-between pl-4">
<div v-for="item in subCounts" :key="item.name" class="sub-item flex justify-center w-full">
<div class="sub flex-1 flex-col h-[80%] flex-evenly pl-4">
<div v-for="item in subCounts" :key="item.name" class="sub-item flex justify-center w-full" :title="item.title">
<div class="flex items-center w-[60%] ellipsis overflow-hidden">
<div class="status-indicator" :class="`bg-${item.color}`"></div>
{{ item.name }}：
@@ -43,6 +46,7 @@
<script setup lang="ts">
import { FsIcon } from "@fast-crud/fast-crud";
const props = defineProps<{
icon: string;
title: string;
count?: number;
subCounts?: {
@@ -50,6 +54,7 @@ const props = defineProps<{
value: number;
color: string;
checkIcon?: string;
title?: string;
}[];
}>();
const slots = defineSlots();
@@ -58,6 +63,9 @@ const slots = defineSlots();
.statistic-card {
margin-bottom: 10px;
.ant-card-body {
padding: 15px 24px;
}
.icon-text {
display: inline-flex;
justify-content: left;
@@ -72,13 +80,33 @@ const slots = defineSlots();
.data-item {
display: flex;
flex-direction: column;
height: 188px;
height: 200px;
.header {
display: flex;
justify-content: space-between;
//padding-bottom: 10px;
color: #8077a4;
margin-top: 6px;
margin-bottom: 6px;
color: #494949;
align-items: center;
.title {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 16px;
}
.more {
display: flex;
align-items: center;
}
.statistic-icon {
font-size: 28px;
margin-right: 5px;
}
}
.content {
@@ -96,13 +124,12 @@ const slots = defineSlots();
.value {
font-size: 50px;
font-weight: 700;
color: #323232;
.total {
.title {
font-size: 14px;
color: hsl(var(--primary));
.sub-title {
font-size: 12px;
font-weight: 400;
color: #8077a4;
color: #626262;
}
}
@@ -137,9 +164,6 @@ const slots = defineSlots();
}
}
}
x-vue-echarts {
}
}
.footer {
@@ -157,8 +181,6 @@ const slots = defineSlots();
> * {
cursor: pointer;
}
margin-bottom: -10px;
}
}
}

5
packages/ui/certd-client/vite.config.ts
View File

@@ -6,6 +6,9 @@ import { createHtmlPlugin } from "vite-plugin-html";
import { loadEnv } from "vite";
import * as path from "path";
import DefineOptions from "unplugin-vue-define-options/vite";
import { theme } from "ant-design-vue";
const { defaultAlgorithm, defaultSeed } = theme;
const mapToken = defaultAlgorithm(defaultSeed);
// import WindiCSS from "vite-plugin-windicss";
// import { generateModifyVars } from "./build/modify-vars";
// import { configThemePlugin } from "./build/theme-plugin";
@@ -76,7 +79,7 @@ export default ({ command, mode }) => {
// 修改默认主题颜色，配置less变量
// modifyVars: generateModifyVars(),
javascriptEnabled: true,
// modifyVars: mapToken
modifyVars: mapToken,
},
},
},