-
+
@@ -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);
+ }
}
}