fix(biji-qianduan): 优化私密笔记和回收站的访问控制

- 移除 HomePage 中重复的私密笔记提示逻辑
- 在 markdown-preview 中通过条件渲染显示私密笔记提示- 为未登录用户提供回收站访问限制
- 新增私密笔记提示内容的单独文件

biji-qianduan/src/components/HomePage.vue

@@ -69,10 +69,7 @@
             </div>
           </el-header>
           <div v-if="!showEditor" :key="selectedFile.id" class="markdown-preview">
-            <div v-if="selectedFile.isPrivate === 1 && !userStore.isLoggedIn && !selectedFile.content" class="private-note-notice">
-              <el-icon><Lock /></el-icon>
-              <p>这是私密笔记，请登录后查看完整内容</p>
-            </div>
+            <!-- 私密笔记提示区域由JS渲染 -->
           </div>
           <!-- Vditor 编辑器 -->
           <div v-show="showEditor" id="vditor" class="vditor" />
@@ -312,6 +309,7 @@ import {
 import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled } from "@element-plus/icons-vue";
 import { useUserStore } from '../stores/user';
 import { useRouter } from 'vue-router';
+import { privateNoteContent } from '../utils/privateNoteContent.js';
 
 const userStore = useUserStore();
 const router = useRouter();
@@ -610,10 +608,8 @@ const previewFile = async (file) => {
     };
     showEditor.value = false; // 确保进入预览模式
     
-    // 如果是私密笔记且用户未登录，显示提示
-    if (file.isPrivate === 1 && !userStore.isLoggedIn) {
-      ElMessage.info('这是私密笔记，请登录后查看完整内容');
-    }
+    // 如果是私密笔记且用户未登录，内容会被后端置空，这里不需要额外提示
+    // 提示信息已经在模板中通过条件渲染显示
   } catch (error) {
     ElMessage.error('获取笔记内容失败: ' + error.message);
     selectedFile.value = null;
@@ -1054,13 +1050,26 @@ watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
     nextTick(() => {
       const previewElement = document.querySelector('.markdown-preview');
       if (previewElement) {
-        Vditor.preview(previewElement, newFile.content, {
-          mode: 'light',
-          hljs: {
-            enable: true,
-            style: 'github'
-          }
-        });
+        // 如果是私密笔记且用户未登录，显示提示内容
+        if (newFile.isPrivate === 1 && !userStore.isLoggedIn) {
+          // 渲染私密笔记提示内容
+          Vditor.preview(previewElement, privateNoteContent, {
+            mode: 'light',
+            hljs: {
+              enable: true,
+              style: 'github'
+            }
+          });
+        } else if (newFile.content) {
+          // 只有在有内容时才渲染 Markdown
+          Vditor.preview(previewElement, newFile.content, {
+            mode: 'light',
+            hljs: {
+              enable: true,
+              style: 'github'
+            }
+          });
+        }
       }
     });
   }

biji-qianduan/src/components/TrashPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container>
+  <el-container v-if="userStore.isLoggedIn">
     <el-header>
       <h1>回收站</h1>
       <el-button type="danger" @click="handleCleanTrash" :disabled="trashItems.length === 0">清空回收站</el-button>
@@ -26,6 +26,18 @@
       <el-empty v-if="trashItems.length === 0" description="回收站是空的"></el-empty>
     </el-main>
   </el-container>
+  <div v-else class="login-required">
+    <el-result
+      icon="warning"
+      title="需要登录"
+      sub-title="请先登录后再访问回收站"
+    >
+      <template #extra>
+        <el-button type="primary" @click="goToLogin">去登录</el-button>
+        <el-button @click="goBack">返回首页</el-button>
+      </template>
+    </el-result>
+  </div>
 </template>
 
 <script setup>
@@ -33,8 +45,10 @@ import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { getTrash, restoreTrashItem, permanentlyDeleteItem, cleanTrash } from '@/api/CommonApi.js';
+import { useUserStore } from '../stores/user';
 
 const router = useRouter();
+const userStore = useUserStore();
 const trashItems = ref([]);
 
 const fetchTrashItems = async () => {
@@ -86,12 +100,18 @@ const handleCleanTrash = async () => {
   }
 };
 
+const goToLogin = () => {
+  router.push('/login');
+};
+
 const goBack = () => {
   router.push('/home');
 };
 
 onMounted(() => {
-  fetchTrashItems();
+  if (userStore.isLoggedIn) {
+    fetchTrashItems();
+  }
 });
 </script>
 
@@ -101,4 +121,11 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
 }
+
+.login-required {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
 </style>

biji-qianduan/src/utils/privateNoteContent.js

@@ -0,0 +1,25 @@
+// 私密笔记提示内容
+export const privateNoteContent = `
+# 🔒 私密笔记
+
+这是私密笔记，只有登录用户才能查看完整内容。
+
+## 请先登录
+
+- 点击右上角的"登录"按钮
+- 输入您的用户名和密码
+- 登录后即可查看此笔记的完整内容
+
+## 什么是私密笔记？
+
+私密笔记是一种特殊的笔记类型，只有登录用户才能查看其内容。未登录用户只能看到笔记标题，无法查看正文。
+
+## 为什么使用私密笔记？
+
+- 保护个人隐私信息
+- 存储敏感或机密内容
+- 限制特定内容的访问权限
+
+---
+请登录后查看完整内容
+`;