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