From 56585a16a75d580aefe0ba566b0a233114c1e56c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Wed, 14 May 2025 10:27:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=B8=BA=20Home.vue=20=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E6=9C=80=E6=96=B0=E7=9F=A5=E8=AF=86=E5=BA=93=E5=92=8C=E6=99=BA?=
 =?UTF-8?q?=E8=83=BD=E4=BD=93=E9=83=A8=E5=88=86=E6=B7=BB=E5=8A=A0=E7=A9=BA?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8D=A0=E4=BD=8D=E7=AC=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在没有数据的情况下显示 el-empty 组件
- 为 dataset 和 agent 添加 v-if 指令，仅在数据存在时显示内容
-
---
 src/views/app/Home.vue | 149 +++++++++++++++++++++++------------------
 1 file changed, 84 insertions(+), 65 deletions(-)

diff --git a/src/views/app/Home.vue b/src/views/app/Home.vue
index 965ba24..ccb9782 100644
--- a/src/views/app/Home.vue
+++ b/src/views/app/Home.vue
@@ -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>