kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(DataBaseView): 调整标题和信息的布局样式

Browse Source 
优化标题的显示方式，从 flex 布局改为 block 布局，并添加文本溢出处理
确保信息区域的弹性布局和最小宽度设置
This commit is contained in:
Wenjie Zhang 2026-01-01 22:53:06 +08:00
parent 215ccd7388
commit c8b8c92644
1 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/views/DataBaseView.vue
View File

@ -238,7 +238,7 @@ import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useConfigStore } from '@/stores/config'; import { useConfigStore } from '@/stores/config';
import { useDatabaseStore } from '@/stores/database'; import { useDatabaseStore } from '@/stores/database';
import { Database, FileDigit, Waypoints, Building2 } from 'lucide-vue-next'; import { Database, FileDigit, Waypoints, Building2, DatabaseZap } from 'lucide-vue-next';
import { LockOutlined, InfoCircleOutlined, QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons-vue'; import { LockOutlined, InfoCircleOutlined, QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { typeApi } from '@/apis/knowledge_api'; import { typeApi } from '@/apis/knowledge_api';
import HeaderComponent from '@/components/HeaderComponent.vue'; import HeaderComponent from '@/components/HeaderComponent.vue';
@ -381,7 +381,7 @@ const getKbTypeIcon = (type) => {
const icons = { const icons = {
lightrag: Waypoints, lightrag: Waypoints,
chroma: FileDigit, chroma: FileDigit,
milvus: Building2 milvus: DatabaseZap
} }
return icons[type] || Database return icons[type] || Database
} }
@ -760,14 +760,7 @@ onMounted(() => {
.top { .top {
.info { .info {
h3 { h3 {
display: flex; display: block;
align-items: center;
gap: 8px;
flex-wrap: wrap;
.kb-type-tag {
margin-left: auto;
}
} }
} }
} }
@ -840,6 +833,9 @@ onMounted(() => {
} }
.info { .info {
flex: 1;
min-width: 0;
h3, p { h3, p {
margin: 0; margin: 0;
color: var(--gray-10000); color: var(--gray-10000);
@ -850,6 +846,9 @@ onMounted(() => {
font-weight: 600; font-weight: 600;
letter-spacing: -0.02em; letter-spacing: -0.02em;
line-height: 1.4; line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
p { p {
@ -863,7 +862,7 @@ onMounted(() => {
font-weight: 400; font-weight: 400;
.created-time-inline { .created-time-inline {
color: var(--gray-500); color: var(--gray-700);
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 400;
background: var(--gray-50); background: var(--gray-50);