feat:为 Home.vue 中的最新知识库和智能体部分添加空数据占位符

- 在没有数据的情况下显示 el-empty 组件
- 为 dataset 和 agent 添加 v-if 指令,仅在数据存在时显示内容
-
This commit is contained in:
陈昱达
2025-05-14 10:27:49 +08:00
parent 374dd8ad03
commit 56585a16a7

View File

@@ -39,85 +39,104 @@
<div class="latest-section flex align-items-c justify-content-b">
<div class="latest-knowledge">
<span class="section-title">最近使用知识库</span>
<div
class="section-content"
@click="jumpUrl(`/knowledge/detail?datasetId=${dataset.id}`)"
>
<div class="knowledge-item flex align-items-c">
<div class="knowledge-image">
<img :src="dataset.image" alt="Knowledge Image" />
</div>
<div class="knowledge-details">
<div class="knowledge-title">{{ dataset.name }}</div>
<div class="knowledge-description mt5">
{{ dataset.description }}
<div v-if="dataset.name">
<div
class="section-content"
@click="jumpUrl(`/knowledge/detail?datasetId=${dataset.id}`)"
>
<div class="knowledge-item flex align-items-c">
<div class="knowledge-image">
<img :src="dataset.image" alt="Knowledge Image" />
</div>
<div class="knowledge-created-by mt5">
创建人{{ dataset.createdUser }}
<div class="knowledge-details">
<div class="knowledge-title">{{ dataset.name }}</div>
<div class="knowledge-description mt5">
{{ dataset.description }}
</div>
<div class="knowledge-created-by mt5">
创建人{{ dataset.createdUser }}
</div>
</div>
</div>
</div>
</div>
<lineEcharts
:key="MatchId"
:options="options"
style="width: 100%;height: calc(100% - 120px);background: unset"
></lineEcharts>
<lineEcharts
v-if="dataset.name"
:key="MatchId"
:options="options"
style="width: 100%;height: calc(100% - 120px);background: unset"
></lineEcharts>
</div>
<div
style="height: 100%"
class="flex align-items-c justify-content-c"
v-else
>
<el-empty></el-empty>
</div>
</div>
<div class="latest-agent">
<span class="section-title">最近使用智能体</span>
<div class="section-content" @click="jumpAgent(agent)">
<div class="knowledge-item flex align-items-c">
<div class="knowledge-image">
<div
class="folder"
:style="
`background:${
agent.imageType === 'emoji'
? agent.backgroundColor
: agent.imageType === 'image'
? '#fff'
: ''
}`
"
>
<div v-if="agent.imageType === 'image'">
<img
:src="agent.image"
alt=""
style="width: 100%;height: 100%"
/>
</div>
<div v-else>
{{
agent.image
? agent.image
: agent.appName
? agent.appName[0]
: ''
}}
</div>
<div v-if="agent.appName">
<div class="section-content" @click="jumpAgent(agent)">
<div class="knowledge-item flex align-items-c">
<div class="knowledge-image">
<div
class="folder"
:style="
`background:${
agent.imageType === 'emoji'
? agent.backgroundColor
: agent.imageType === 'image'
? '#fff'
: ''
}`
"
>
<div v-if="agent.imageType === 'image'">
<img
:src="agent.image"
alt=""
style="width: 100%;height: 100%"
/>
</div>
<div v-else>
{{
agent.image
? agent.image
: agent.appName
? agent.appName[0]
: ''
}}
</div>
<!--listItem.name.获取字符串第一个-->
<!--listItem.name.获取字符串第一个-->
</div>
</div>
</div>
<div class="knowledge-details">
<div class="knowledge-title">{{ agent.appName }}</div>
<div class="knowledge-description mt5">
{{ agent.description }}
</div>
<div class="knowledge-created-by mt5">
创建人{{ agent.createdUser }}
<div class="knowledge-details">
<div class="knowledge-title">{{ agent.appName }}</div>
<div class="knowledge-description mt5">
{{ agent.description }}
</div>
<div class="knowledge-created-by mt5">
创建人{{ agent.createdUser }}
</div>
</div>
</div>
</div>
<lineEcharts
:key="MatchId"
:options="agentOptions"
style="width: 100%;height: calc(100% - 120px);background: unset"
></lineEcharts>
</div>
<div
style="height: 100%"
class="flex align-items-c justify-content-c"
v-else
>
<el-empty></el-empty>
</div>
<lineEcharts
:key="MatchId"
:options="agentOptions"
style="width: 100%;height: calc(100% - 120px);background: unset"
></lineEcharts>
</div>
</div>
</div>