From ac09751620d12c1482c9f2e99f52c71beaa7f513 Mon Sep 17 00:00:00 2001 From: wangdan-fit2cloud Date: Fri, 3 Nov 2023 16:12:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/assets/icon_document.svg | 12 ++++++++++ ui/src/components/card-add/index.vue | 36 ++++++++++++++++++---------- ui/src/components/card-box/index.vue | 15 ++++++++---- ui/src/styles/app.scss | 10 ++++++++ ui/src/styles/element-plus.scss | 21 +++++----------- ui/src/styles/variables.scss | 9 +++++-- ui/src/utils/utils.ts | 8 +++++++ ui/src/views/dataset/index.vue | 36 ++++++++++++++++++---------- 8 files changed, 100 insertions(+), 47 deletions(-) create mode 100644 ui/src/assets/icon_document.svg create mode 100644 ui/src/utils/utils.ts diff --git a/ui/src/assets/icon_document.svg b/ui/src/assets/icon_document.svg new file mode 100644 index 000000000..34fe1b36f --- /dev/null +++ b/ui/src/assets/icon_document.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue index 678322484..159a4bd40 100644 --- a/ui/src/components/card-add/index.vue +++ b/ui/src/components/card-add/index.vue @@ -1,8 +1,8 @@ @@ -12,27 +12,37 @@ defineProps({ title: { type: String, default: '标题' - }, - icon: { - type: String, - default: 'CirclePlusFilled' } }) diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue index dc04f0651..7a53e97bc 100644 --- a/ui/src/components/card-box/index.vue +++ b/ui/src/components/card-box/index.vue @@ -3,14 +3,14 @@
- - + +

{{ title }}
-
+
{{ description }} @@ -48,7 +48,7 @@ function cardLeave() { .card-box { font-size: 14px; position: relative; - min-height: 150px; + min-height: var(--card-min-height); .description { display: -webkit-box; @@ -56,11 +56,16 @@ function cardLeave() { -webkit-line-clamp: 2; overflow: hidden; height: 40px; + color: var(--app-text-color-secondary); + line-height: 22px; + font-weight: 400; } .card-footer { position: absolute; - bottom: 0; + bottom: 8px; min-height: 30px; + color: var(--app-text-color-secondary); + font-weight: 400; } } diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss index 3111214a3..00f833a45 100644 --- a/ui/src/styles/app.scss +++ b/ui/src/styles/app.scss @@ -87,6 +87,10 @@ h4 { font-size: 16px; } +.bold { + font-weight: 600; +} + .w-full { width: 100%; } @@ -97,6 +101,9 @@ h4 { .mt-8 { margin-top: 8px; } +.mt-12 { + margin-top: 12px; +} .mt-16 { margin-top: 16px; } @@ -116,6 +123,9 @@ h4 { .mr-8 { margin-right: 8px; } +.mr-12 { + margin-right: 12px; +} .p-8 { padding: 8px; diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss index cf22a8628..e67c19db0 100644 --- a/ui/src/styles/element-plus.scss +++ b/ui/src/styles/element-plus.scss @@ -1,6 +1,5 @@ :root { --el-menu-item-height: 45px; - --el-text-color-primary: '#1F2329'; --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12); --el-border-color: rgba(31, 35, 41, 0.15); } @@ -11,11 +10,9 @@ .el-avatar { --el-avatar-bg-color: var(--el-color-primary); --el-avatar-size-small: 33px; + --el-avatar-border-radius: 8px; cursor: pointer; } -.el-popper { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} .el-form { --el-form-inline-content-width: 100%; @@ -35,7 +32,7 @@ padding-bottom: 24px; .app-confirm { .app-confirm-title { - color: var(--el-text-color-primary); + color: var(--app-text-color-primary); } .icon { font-size: 24px; @@ -49,7 +46,7 @@ .el-message-box__content { padding: 24px; - color: var(--el-text-color-primary); + color: var(--app-text-color-primary); } .el-message-box__btns { padding: 5px 24px 0; @@ -65,15 +62,8 @@ } } -@media only screen and (min-width: 1200px) { - .el-col-lg-5 { - display: block; - max-width: 25%; - flex: 0 0 25%; - } -} @media only screen and (min-width: 1400px) { - .el-col-lg-5 { + .el-col-lg-6 { display: block; max-width: 20.8333333333%; flex: 0 0 20.8333333333%; @@ -89,7 +79,8 @@ .el-card { --el-card-border-radius: 8px; - border: none !important; + --el-card-padding: 16px; + border: 1px solid #ffffff; } .el-dropdown { color: var(--app-text-color-primary); diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss index 25437dda6..b67edd226 100644 --- a/ui/src/styles/variables.scss +++ b/ui/src/styles/variables.scss @@ -1,8 +1,8 @@ :root { - --el-color-primary: rgba(51, 112, 255, 1); + --el-color-primary: #3370ff; --app-layout-bg-color: #f5f6f7; --app-text-color-primary: #1f2329; - --app-text-color-secondary: #646A73; + --app-text-color-secondary: #646a73; --app-view-padding: 24px; --app-view-bg-color: #ffffff; @@ -17,6 +17,11 @@ /** tag */ --tag-deflaut-bg: rgba(51, 112, 255, 0.2); --tag-deflaut-color: #2b5fd9; + /** card */ + --card-width: 330px; + --card-min-height: 160px; + --card-min-width: 220px; + /** team */ --team-manage-left-width: 280px; } diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts new file mode 100644 index 000000000..f32b4a84f --- /dev/null +++ b/ui/src/utils/utils.ts @@ -0,0 +1,8 @@ +function toThousands(num: any) { + return num.toString().replace(/\d+/, function (n: any) { + return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + }) +} +export function numberFormat(num: number) { + return num < 1000 ? toThousands(num) : toThousands((num / 1000).toFixed(1)) + 'k' +} diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue index 85f21ef61..115a81462 100644 --- a/ui/src/views/dataset/index.vue +++ b/ui/src/views/dataset/index.vue @@ -9,20 +9,20 @@ style="width: 300px" />
-
+
- + @@ -55,6 +59,7 @@ import datasetApi from '@/api/dataset' import type { datasetListRequest } from '@/api/type/dataset' import { MsgSuccess, MsgConfirm } from '@/utils/message' import { useRouter } from 'vue-router' +import { numberFormat } from '@/utils/utils'; const router = useRouter() const loading = ref(false) @@ -73,7 +78,7 @@ function deleteDateset(row: any) { MsgConfirm( { title: `是否删除数据集：${row.name}？`, - decription: '此数据集关联2个应用，删除后无法恢复，请谨慎操作。', + decription: `此数据集关联 ${row.char_length} 个应用，删除后无法恢复，请谨慎操作。`, confirmButtonText: '删除' }, { @@ -116,8 +121,15 @@ onMounted(() => { .dataset-list-container { .delete-button { position: absolute; - right: 10px; - top: 10px; + right: 12px; + top: 18px; + padding: 6px; + height: auto; + } + .footer-content { + .bold { + color: var(--app-text-color-primary); + } } }