优化变量描述

src/App.vue

@@ -8,8 +8,7 @@ const samplePic =
 const listData: ListItem[] = Array.from({ length: 1000 }, (_, i) => ({
   id: i,
   name: `project-${i + 1}`,
-  path: `/Users/lanyuanxiaoyao/Project/IdeaProjects/project-${i + 1}`,
+  description: `这是项目 ${i + 1} 的详细描述信息`,
-  // 随机选择一个图标
   icon: samplePic,
   tags: [
     ...(i % 2 === 0 ? [{ id: 1, name: 'Vue', color: '#42b883' }] : []),

src/components/ProjectList.vue

@@ -281,7 +281,7 @@ const onAfterLeave = (el: Element): void => {
                   <div class="selected-item-name">{{ selectedItem.name }}</div>
                 </div>
                 <div class="selected-item-content">
-                  <div class="selected-item-path">{{ selectedItem.path }}</div>
+                  <div class="selected-item-description">{{ selectedItem.description }}</div>
                   <div class="selected-item-tags" v-if="selectedItem.tags?.length">
                     <span 
                       v-for="tag in selectedItem.tags" 
@@ -498,11 +498,12 @@ const onAfterLeave = (el: Element): void => {
   gap: 8px;
 }
 
-/* 选中项路径 */
+/* 选中项描述 */
-.selected-item-path {
+.selected-item-description {
   font-size: 12px;
   color: rgba(0, 0, 0, 0.6);
-  word-break: break-all;
+  word-break: break-word;
+  overflow-wrap: break-word;
   line-height: 1.5;
 }
 

src/components/VirtualList.vue

@@ -193,7 +193,7 @@ const lastReachBoundaryTime = ref<{ top: number; bottom: number }>({
 })
 
 /**
- * 处理<EFBFBD><EFBFBD>盘事件
+ * 处理键盘事件
  * 实现键盘导航、边界循环和项目选择功能
  * @param e 键盘事件对象
  */
@@ -415,8 +415,8 @@ onBeforeUnmount(() => {
                   </div>
                 </div>
                 <!-- 路径信息 -->
-                <div class="item-info">
+                <div class="item-description">
-                  <div class="item-path">{{ item.path }}</div>
+                  <div class="item-description-text">{{ item.description }}</div>
                 </div>
               </div>
             </div>
@@ -526,13 +526,13 @@ onBeforeUnmount(() => {
 }
 
 /* 信息行布局 */
-.item-info {
+.item-description {
   display: flex;
   gap: 4px;
 }
 
-/* 路径文本样式 */
+/* 描述文本样式 */
-.item-path {
+.item-description-text {
   font-size: 12px;
   color: rgba(0, 0, 0, 0.6);
   white-space: nowrap;

src/types/index.ts

@@ -18,8 +18,8 @@ export interface ListItem {
   id: number
   /** 项目名称 */
   name: string
-  /** 项目路径 */
+  /** 项目描述 */
-  path: string
+  description: string
   /** 项目图标 URL */
   icon?: string
   /** 项目标签列表 */