refactor(NoteList): 重构笔记列表卡片样式

- 增加了笔记列表项的样式层次，添加了文件图标和元信息
- 调整了卡片的样式，包括颜色、阴影和圆角等
- 优化了暗黑主题下的样式
-改进了鼠标悬停效果

biji-qianduan/src/components/home/NoteList.vue

@@ -7,10 +7,15 @@
         class="file-item"
         :class="{ 'private-note': file.isPrivate === 1 }"
     >
-      <div @click="$emit('preview', file)" class="file-title">
+      <div @click="$emit('preview', file)" class="file-content">
-        <span>{{ file.title }}</span>
+        <div class="file-title-wrapper">
-        <span class="file-group-name">{{ file.groupingName }}</span>
+          <el-icon class="file-icon"><Document /></el-icon>
-        <el-icon v-if="file.isPrivate === 1 && !isUserLoggedIn" class="lock-icon"><Lock /></el-icon>
+          <span class="file-title-text">{{ file.title }}</span>
+        </div>
+        <div class="file-meta">
+          <span class="file-group-name">{{ file.groupingName }}</span>
+          <el-icon v-if="file.isPrivate === 1 && !isUserLoggedIn" class="lock-icon"><Lock /></el-icon>
+        </div>
       </div>
     </el-card>
   </div>
@@ -18,7 +23,7 @@
 </template>
 
 <script setup>
-import { Lock } from '@element-plus/icons-vue';
+import { Lock, Document } from '@element-plus/icons-vue';
 
 const props = defineProps({
   files: {
@@ -43,38 +48,70 @@ defineEmits(['preview']);
 
 .file-item {
   cursor: pointer;
-  border-radius: var(--border-radius);
+  border-radius: 12px; /* Increased border radius */
-  border: 1px solid transparent;
+  border: 1px solid var(--border-color);
   transition: all var(--transition-duration) ease;
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: #ffffff; /* Explicitly set to white for light theme */
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  overflow: hidden; /* Ensure content respects border radius */
 }
 
 .dark-theme .file-item {
-  background-color: rgba(30, 30, 47, 0.8);
+  background-color: #161b22; /* A darker card color for dark theme */
+  border-color: var(--border-color-dark);
 }
 
 .file-item:hover {
-  transform: translateY(-4px);
+  transform: translateY(-5px);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-lifted);
   border-color: var(--primary-color);
 }
 
-.file-title {
+.file-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
+  padding: 1rem 1.2rem;
+  min-height: 80px; /* Give some consistent height */
+}
+
+.file-title-wrapper {
+  display: flex;
   align-items: center;
-  padding: 1rem;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.file-icon {
+  font-size: 1.2rem;
+  color: var(--text-color-secondary);
+}
+
+.file-title-text {
+  font-weight: 600;
+  color: var(--text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-meta {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .file-group-name {
   font-size: 0.75rem;
-  color: var(--text-color-secondary);
+  font-weight: 500;
-  background-color: var(--bg-color-secondary);
+  color: var(--primary-color);
-  padding: 0.2rem 0.5rem;
+  background-color: var(--primary-color-light);
-  border-radius: 4px;
+  padding: 0.25rem 0.6rem;
+  border-radius: var(--border-radius-full);
 }
 
 .lock-icon {
-  color: var(--text-color-secondary);
+  color: var(--el-color-warning);
 }
 </style>