mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-26 09:03:54 +08:00
update: 知识库页面间距优化
This commit is contained in:
@@ -687,7 +687,7 @@ export default {
|
|||||||
background: #deeafe;
|
background: #deeafe;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
gap: 7px;
|
gap: 7px;
|
||||||
color: #3d4566;
|
color: #3d4566;
|
||||||
|
|||||||
@@ -31,10 +31,10 @@
|
|||||||
<div class="doc-card-bottom">
|
<div class="doc-card-bottom">
|
||||||
<div class="doc-card-progress">
|
<div class="doc-card-progress">
|
||||||
<div class="progress-ring">
|
<div class="progress-ring">
|
||||||
<svg viewBox="0 0 44 44">
|
<svg viewBox="0 0 40 40">
|
||||||
<circle class="bg" cx="22" cy="22" r="17"/>
|
<circle class="bg" cx="20" cy="20" r="15"/>
|
||||||
<circle class="fg" :class="getProgressClass(doc)" cx="22" cy="22" r="17"
|
<circle class="fg" :class="getProgressClass(doc)" cx="20" cy="20" r="15"
|
||||||
stroke-dasharray="106.81"
|
stroke-dasharray="94.25"
|
||||||
:stroke-dashoffset="getProgressOffset(doc)"/>
|
:stroke-dashoffset="getProgressOffset(doc)"/>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="progress-ring-text" :style="{ color: getProgressTextColor(doc) }">{{ getProgressText(doc) }}</span>
|
<span class="progress-ring-text" :style="{ color: getProgressTextColor(doc) }">{{ getProgressText(doc) }}</span>
|
||||||
@@ -326,7 +326,7 @@ export default {
|
|||||||
|
|
||||||
getProgressOffset(doc) {
|
getProgressOffset(doc) {
|
||||||
const code = doc.parseStatusCode;
|
const code = doc.parseStatusCode;
|
||||||
const circumference = 106.81;
|
const circumference = 94.25;
|
||||||
if (code === 3) return 0;
|
if (code === 3) return 0;
|
||||||
if (code === 1) {
|
if (code === 1) {
|
||||||
const progress = doc.chunkNum && doc.totalChunkNum
|
const progress = doc.chunkNum && doc.totalChunkNum
|
||||||
@@ -403,13 +403,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.doc-section-title {
|
.doc-section-title {
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #1f2a44;
|
color: #1f2a44;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-section-count {
|
.doc-section-count {
|
||||||
font-size: 14px;
|
font-size: 18px;
|
||||||
color: #788ba8;
|
color: #788ba8;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -436,13 +436,14 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.doc-card {
|
.doc-card {
|
||||||
max-height: 120px;
|
max-height: 110px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.25s;
|
transition: all 0.25s;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -495,7 +496,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.doc-card-bottom {
|
.doc-card-bottom {
|
||||||
margin-top: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -509,13 +509,13 @@ export default {
|
|||||||
|
|
||||||
/* ========== Progress Ring ========== */
|
/* ========== Progress Ring ========== */
|
||||||
.progress-ring {
|
.progress-ring {
|
||||||
width: 44px;
|
width: 40px;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 44px;
|
width: 40px;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -548,7 +548,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.progress-container {
|
.progress-container {
|
||||||
height: 32px;
|
height: 36px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|||||||
@@ -27,11 +27,11 @@
|
|||||||
<div class="content-panel">
|
<div class="content-panel">
|
||||||
<div class="content-area" v-loading="loading" :element-loading-text="$t('knowledgeBaseManagement.loading')">
|
<div class="content-area" v-loading="loading" :element-loading-text="$t('knowledgeBaseManagement.loading')">
|
||||||
<!-- Knowledge Base Cards Section -->
|
<!-- Knowledge Base Cards Section -->
|
||||||
<div class="kb-section">
|
<div class="kb-section" :style="{ height: filteredKnowledgeBases.length > 0 ? 'fit-content' : '100%' }">
|
||||||
<div class="kb-section-header">
|
<div class="kb-section-header">
|
||||||
<div class="kb-section-title">{{ $t('knowledgeBaseManagement.switchKnowledgeBase') }}</div>
|
<div class="kb-section-title">{{ $t('knowledgeBaseManagement.switchKnowledgeBase') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="kb-cards-wrapper">
|
<div class="kb-cards-wrapper" :style="{ height: filteredKnowledgeBases.length > 0 ? 'fit-content' : '100%' }">
|
||||||
<div class="kb-arrow left" @click="scrollCards(-1)" v-if="filteredKnowledgeBases.length > 0">
|
<div class="kb-arrow left" @click="scrollCards(-1)" v-if="filteredKnowledgeBases.length > 0">
|
||||||
<i class="el-icon-arrow-left"></i>
|
<i class="el-icon-arrow-left"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -67,8 +67,8 @@
|
|||||||
v-model="kb.status"
|
v-model="kb.status"
|
||||||
:active-value="1"
|
:active-value="1"
|
||||||
:inactive-value="0"
|
:inactive-value="0"
|
||||||
active-color="#13ce66"
|
active-color="#5778ff"
|
||||||
inactive-color="#ff4949"
|
inactive-color="#DCDFE6"
|
||||||
@click.native.stop
|
@click.native.stop
|
||||||
@change="handleStatusChange(kb)"
|
@change="handleStatusChange(kb)"
|
||||||
></el-switch>
|
></el-switch>
|
||||||
@@ -79,7 +79,6 @@
|
|||||||
<div class="kb-card-desc">{{ kb.description || '-' }}</div>
|
<div class="kb-card-desc">{{ kb.description || '-' }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="filteredKnowledgeBases.length === 0 && !loading" class="kb-empty">
|
<div v-if="filteredKnowledgeBases.length === 0 && !loading" class="kb-empty">
|
||||||
<i class="el-icon-folder-opened"></i>
|
|
||||||
<p>{{ $t('knowledgeBaseManagement.noData') }}</p>
|
<p>{{ $t('knowledgeBaseManagement.noData') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -99,9 +98,6 @@
|
|||||||
@view-slices="handleViewSlices"
|
@view-slices="handleViewSlices"
|
||||||
@refresh="refreshDocuments"
|
@refresh="refreshDocuments"
|
||||||
/>
|
/>
|
||||||
<div v-else class="doc-empty-placeholder">
|
|
||||||
<el-empty :description="$t('knowledgeBaseManagement.noData')"></el-empty>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -810,7 +806,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.kb-section-title {
|
.kb-section-title {
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #1f2a44;
|
color: #1f2a44;
|
||||||
}
|
}
|
||||||
@@ -976,7 +972,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.kb-card-desc {
|
.kb-card-desc {
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #7888a8;
|
color: #7888a8;
|
||||||
|
|||||||
Reference in New Issue
Block a user