增加空白列表的提示

src/components/ProjectList.vue

@@ -306,15 +306,36 @@ const bindShortcuts = (): void => {
   <div class="project-list-container" @contextmenu.prevent>
     <!-- 主要内容区域 -->
     <div class="main-content">
-      <VirtualList
+      <template v-if="data.length > 0">
-        :data="data"
+        <VirtualList
-        :frozen="listFrozen"
+          :data="data"
-        :disable-hover="showMenu || temporaryDisableHover"
+          :frozen="listFrozen"
-        @select="handleSelect"
+          :disable-hover="showMenu || temporaryDisableHover"
-        @click="handleClick"
+          @select="handleSelect"
-        @contextmenu="showContextMenu"
+          @click="handleClick"
-        @showToast="showToast"
+          @contextmenu="showContextMenu"
-      />
+          @showToast="showToast"
+        />
+      </template>
+      <div v-else class="empty-state">
+        <div class="empty-state-content">
+          <svg class="empty-state-icon" viewBox="0 0 24 24" width="48" height="48">
+            <path
+              fill="currentColor"
+              d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm2 7h-4v-2h4v2z"
+              opacity=".3"
+            />
+          </svg>
+          <h3 class="empty-state-title">暂无项目</h3>
+          <p class="empty-state-description">
+            当前列表为空，您可以添加新的项目或导入现有项目
+          </p>
+        </div>
+      </div>
     </div>
 
     <!-- 工具栏 -->
@@ -677,4 +698,44 @@ const bindShortcuts = (): void => {
   background-color: rgba(0, 0, 0, 0.08);
   color: rgba(0, 0, 0, 0.87);
 }
+
+/* 空状态容器 */
+.empty-state {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+/* 空状态内容区域 */
+.empty-state-content {
+  text-align: center;
+  padding: 32px;
+  max-width: 400px;
+}
+
+/* 空状态图标 */
+.empty-state-icon {
+  color: rgba(0, 0, 0, 0.38);
+  margin-bottom: 16px;
+}
+
+/* 空状态标题 */
+.empty-state-title {
+  font-size: 20px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+  margin: 0 0 8px;
+}
+
+/* 空状态描述文本 */
+.empty-state-description {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin: 0;
+  line-height: 1.5;
+}
 </style>