From 42758deeae84310e1281b48205ed4b0cf9ffbf32 Mon Sep 17 00:00:00 2001
From: DSQ <d1594965367@qq.com>
Date: Fri, 14 Nov 2025 22:34:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E5=88=9D=E6=AD=A5UI=E5=92=8C?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=88=9D=E6=AD=A5UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 elastic/templates/elastic/manage.html | 590 ++++++++++++++++++++++----
 main/templates/main/home.html         | 140 ++++--
 2 files changed, 622 insertions(+), 108 deletions(-)

diff --git a/elastic/templates/elastic/manage.html b/elastic/templates/elastic/manage.html
index b8f4a89..90b090e 100644
--- a/elastic/templates/elastic/manage.html
+++ b/elastic/templates/elastic/manage.html
@@ -4,27 +4,191 @@
   <meta charset="UTF-8" />
   <title>数据管理</title>
   <style>
-    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#fafafa; }
-    .container { max-width: 1100px; margin: 6vh auto; background:#fff; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); padding:20px; }
-    table { width:100%; border-collapse: collapse; }
-    th, td { border-bottom:1px solid #eee; padding:8px; text-align:left; vertical-align: top; }
-    img { max-width: 120px; border:1px solid #eee; border-radius:6px; }
-    .btn { padding:6px 10px; border:none; border-radius:6px; cursor:pointer; }
-    .btn-primary { background:#1677ff; color:#fff; }
-    .btn-danger { background:#ff4d4f; color:#fff; }
-    .btn-secondary { background:#f0f0f0; }
-    .muted { color:#666; font-size:12px; }
-    .modal { position: fixed; inset: 0; display: none; background: rgba(0,0,0,0.4); align-items: center; justify-content: center; }
-    .modal .dialog { width: 720px; max-width: 92vw; background:#fff; border-radius:10px; padding:16px; }
-    textarea { width:100%; min-height: 240px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; }
-    #kvForm { border:1px solid #eee; border-radius:6px; padding:8px; max-height:300px; overflow:auto; }
+    body {
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      background:#fafafa;
+      margin: 0;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      background:#fff;
+      border-radius:10px;
+      box-shadow:0 6px 18px rgba(0,0,0,0.06);
+      padding:20px;
+    }
+    table {
+      width:100%;
+      border-collapse: collapse;
+      margin-top: 20px;
+    }
+    th, td {
+      border-bottom:1px solid #eee;
+      padding:12px 8px;
+      text-align:left;
+      vertical-align: top;
+    }
+    th {
+      background-color: #f8f9fa;
+      font-weight: 600;
+    }
+    img {
+      max-width: 120px;
+      border:1px solid #eee;
+      border-radius:6px;
+    }
+    .btn {
+      padding:6px 10px;
+      border:none;
+      border-radius:6px;
+      cursor:pointer;
+      font-size: 14px;
+      margin: 2px;
+    }
+    .btn-primary {
+      background:#1677ff;
+      color:#fff;
+    }
+    .btn-danger {
+      background:#ff4d4f;
+      color:#fff;
+    }
+    .btn-secondary {
+      background:#f0f0f0;
+      color: #333;
+    }
+    .muted {
+      color:#666;
+      font-size:12px;
+    }
+    .modal {
+      position: fixed;
+      inset: 0;
+      display: none;
+      background: rgba(0,0,0,0.4);
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+    .modal .dialog {
+      width: 720px;
+      max-width: 92vw;
+      background:#fff;
+      border-radius:10px;
+      padding:20px;
+      max-height: 80vh;
+      overflow-y: auto;
+    }
+    textarea {
+      width:100%;
+      min-height: 240px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size:14px;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      resize: vertical;
+    }
+    #kvForm {
+      border:1px solid #eee;
+      border-radius:6px;
+      padding:8px;
+      max-height:300px;
+      overflow:auto;
+    }
+
+    /* 搜索区域样式 */
+    .search-container {
+      background: #f8f9fa;
+      padding: 15px;
+      border-radius: 8px;
+      margin-bottom: 20px;
+    }
+    .search-controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    .search-input {
+      flex: 1;
+      min-width: 200px;
+      padding: 8px 12px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    .search-result {
+      margin-top: 10px;
+      padding: 10px;
+      background: #e8f4ff;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    .search-result.empty {
+      background: #fff8e8;
+    }
+    .search-result.error {
+      background: #ffe8e8;
+    }
+
+    /* 加载动画 */
+    .loading {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border: 3px solid #f3f3f3;
+      border-top: 3px solid #1677ff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    /* 响应式调整 */
+    @media (max-width: 768px) {
+      .search-controls {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .search-input {
+        min-width: auto;
+      }
+      .btn {
+        width: 100%;
+        margin: 2px 0;
+      }
+    }
   </style>
 </head>
 <body>
 <div class="container">
   <h2>数据管理</h2>
   <p class="muted">仅管理员可见。可查看、编辑、删除所有记录。</p>
-  <table>
+
+  <!-- 搜索功能区域 -->
+  <div class="search-container">
+    <div class="search-controls">
+      <input type="text" id="searchQuery" class="search-input" placeholder="请输入搜索关键词...">
+      <button class="btn btn-primary" onclick="performSearch('exact')">关键词搜索</button>
+      <button class="btn btn-secondary" onclick="performSearch('fuzzy')">模糊搜索</button>
+      <button class="btn" onclick="loadAllData()">显示全部</button>
+      <button class="btn" onclick="clearSearch()">清空结果</button>
+    </div>
+
+    <div id="searchResult" class="search-result" style="display: none;">
+      <div id="searchStatus">正在搜索...</div>
+      <div id="searchCount" style="margin-top: 5px; font-weight: bold;"></div>
+    </div>
+  </div>
+
+  <!-- 数据表格 -->
+  <table id="dataTable">
     <thead>
       <tr>
         <th>ID</th>
@@ -34,32 +198,15 @@
         <th>操作</th>
       </tr>
     </thead>
-    <tbody>
-      {% for it in items %}
-      <tr data-id="{{ it.id }}" data-writer="{{ it.writer_id }}" data-image="{{ it.image }}">
-        <td style="max-width:140px; word-break:break-all;">{{ it.id }}</td>
-        <td>
-          {% if it.image %}
-          <img src="/media/{{ it.image }}" onerror="this.src='';" />
-          <div class="muted">/media/{{ it.image }}</div>
-          {% endif %}
-        </td>
-        <td>
-          <pre style="white-space:pre-wrap; word-wrap:break-word;">{{ it.data|safe }}</pre>
-        </td>
-        <td>{{ it.writer_id }}</td>
-        <td>
-          <button class="btn btn-primary" onclick="openEdit('{{ it.id }}')">编辑</button>
-          <button class="btn btn-danger" onclick="doDelete('{{ it.id }}')">删除</button>
-        </td>
-      </tr>
-      {% endfor %}
+    <tbody id="tableBody">
+      <!-- 数据将通过JavaScript动态加载 -->
     </tbody>
   </table>
 
-  <div id="modal" class="modal">
+  <!-- 编辑模态框 -->
+  <div id="editModal" class="modal">
     <div class="dialog">
-      <h3>编辑</h3>
+      <h3>编辑数据</h3>
       <div style="display:flex; gap:8px; align-items:center; margin-bottom:8px;">
         <button id="addFieldBtn" class="btn btn-secondary" type="button">添加字段</button>
         <button id="syncFromTextBtn" class="btn btn-secondary" type="button">从文本区刷新表单</button>
@@ -67,7 +214,7 @@
       </div>
       <div id="kvForm"></div>
       <div style="margin-top:8px;">
-        <textarea id="resultBox" placeholder="JSON"></textarea>
+        <textarea id="resultBox" placeholder="JSON数据"></textarea>
       </div>
       <div style="margin-top:12px; display:flex; gap:8px;">
         <button class="btn btn-primary" onclick="saveEdit()">保存</button>
@@ -79,34 +226,239 @@
 </div>
 
 <script>
+// 获取CSRF token的函数
 function getCookie(name) {
   const value = `; ${document.cookie}`;
   const parts = value.split(`; ${name}=`);
   if (parts.length === 2) return parts.pop().split(';').shift();
 }
 
-const modal = document.getElementById('modal');
+// DOM元素引用
+const searchQueryInput = document.getElementById('searchQuery');
+const searchResultDiv = document.getElementById('searchResult');
+const searchStatus = document.getElementById('searchStatus');
+const searchCount = document.getElementById('searchCount');
+const tableBody = document.getElementById('tableBody');
+const editModal = document.getElementById('editModal');
 const kvForm = document.getElementById('kvForm');
 const resultBox = document.getElementById('resultBox');
 const editMsg = document.getElementById('editMsg');
 const addFieldBtn = document.getElementById('addFieldBtn');
 const syncFromTextBtn = document.getElementById('syncFromTextBtn');
 
+// 全局变量
 let currentId = '';
 let currentWriter = '';
 let currentImage = '';
+let allDataCache = []; // 缓存所有数据，避免重复请求
 
+// 搜索功能
+async function performSearch(type) {
+  const query = searchQueryInput.value.trim();
+  if (!query) {
+    showSearchMessage('请输入搜索关键词', 'error');
+    return;
+  }
+
+  showSearchLoading();
+
+  try {
+    let url;
+    if (type === 'exact') {
+      url = `/elastic/search/?q=${encodeURIComponent(query)}`;
+    } else if (type === 'fuzzy') {
+      url = `/elastic/fuzzy-search/?keyword=${encodeURIComponent(query)}`;
+    }
+
+    const response = await fetch(url);
+    const data = await response.json();
+
+    if (data.status === 'success') {
+      displaySearchResults(data.data || []);
+    } else {
+      showSearchMessage(`搜索失败: ${data.message || '未知错误'}`, 'error');
+    }
+  } catch (error) {
+    console.error('搜索请求失败:', error);
+    showSearchMessage('搜索请求失败，请检查网络连接', 'error');
+  }
+}
+
+// 显示加载状态
+function showSearchLoading() {
+  searchResultDiv.style.display = 'block';
+  searchResultDiv.className = 'search-result';
+  searchStatus.innerHTML = '<span class="loading"></span> 正在搜索...';
+  searchCount.textContent = '';
+}
+
+// 显示搜索结果
+function displaySearchResults(results) {
+  if (results.length === 0) {
+    showSearchMessage('未找到匹配的结果', 'empty');
+    renderTable([]);
+    return;
+  }
+
+  searchResultDiv.style.display = 'block';
+  searchResultDiv.className = 'search-result';
+  searchStatus.textContent = `找到 ${results.length} 条匹配结果`;
+  searchCount.textContent = `显示 ${results.length} 条记录`;
+
+  renderTable(results);
+}
+
+// 显示搜索消息
+function showSearchMessage(message, type = '') {
+  searchResultDiv.style.display = 'block';
+  searchResultDiv.className = `search-result ${type}`;
+  searchStatus.textContent = message;
+  searchCount.textContent = '';
+}
+
+// 加载所有数据
+async function loadAllData() {
+  showSearchLoading();
+
+  try {
+    // 如果已有缓存，直接使用
+    if (allDataCache.length > 0) {
+      displayAllData(allDataCache);
+      return;
+    }
+
+    const response = await fetch('/elastic/all-data/');
+    const data = await response.json();
+
+    if (data.status === 'success') {
+      allDataCache = data.data || [];
+      displayAllData(allDataCache);
+    } else {
+      showSearchMessage(`加载数据失败: ${data.message || '未知错误'}`, 'error');
+    }
+  } catch (error) {
+    console.error('加载数据失败:', error);
+    showSearchMessage('加载数据失败，请检查网络连接', 'error');
+  }
+}
+
+// 显示所有数据
+function displayAllData(data) {
+  searchResultDiv.style.display = 'block';
+  searchResultDiv.className = 'search-result';
+  searchStatus.textContent = '显示全部数据';
+  searchCount.textContent = `共 ${data.length} 条记录`;
+
+  renderTable(data);
+}
+
+// 清空搜索结果
+function clearSearch() {
+  searchQueryInput.value = '';
+  searchResultDiv.style.display = 'none';
+
+  // 如果有缓存数据，显示全部
+  if (allDataCache.length > 0) {
+    renderTable(allDataCache);
+  } else {
+    // 否则重新加载
+    loadAllData();
+  }
+}
+
+// 渲染表格
+function renderTable(data) {
+  tableBody.innerHTML = '';
+
+  if (!data || data.length === 0) {
+    const row = document.createElement('tr');
+    row.innerHTML = '<td colspan="5" style="text-align: center; color: #999;">暂无数据</td>';
+    tableBody.appendChild(row);
+    return;
+  }
+
+  data.forEach(item => {
+    const row = document.createElement('tr');
+    row.setAttribute('data-id', item._id || item.id);
+    row.setAttribute('data-writer', item.writer_id);
+    row.setAttribute('data-image', item.image);
+
+    // 解析data字段，如果是JSON字符串则格式化显示
+    let displayData = item.data || '';
+    try {
+      const parsed = JSON.parse(item.data);
+      displayData = JSON.stringify(parsed, null, 2);
+    } catch (e) {
+      // 如果不是JSON，直接显示原字符串
+    }
+
+    row.innerHTML = `
+      <td style="max-width:140px; word-break:break-all; font-size: 12px;">${item._id || item.id || ''}</td>
+      <td>
+        ${item.image ? `<img src="/media/${item.image}" onerror="this.src=''; this.alt='图片加载失败'" />` : '无图片'}
+      </td>
+      <td>
+        <pre style="white-space:pre-wrap; word-wrap:break-word; max-height: 100px; overflow-y: auto; font-size: 12px; margin: 0;">${escapeHtml(displayData)}</pre>
+      </td>
+      <td style="font-size: 12px;">${item.writer_id || ''}</td>
+      <td>
+        <button class="btn btn-primary" onclick="openEdit('${item._id || item.id}')">编辑</button>
+        <button class="btn btn-danger" onclick="doDelete('${item._id || item.id}')">删除</button>
+      </td>
+    `;
+    tableBody.appendChild(row);
+  });
+}
+
+// 转义HTML以防止XSS
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+// 编辑功能相关
 function createRow(k = '', v = '') {
   const row = document.createElement('div');
   row.style.display = 'grid';
   row.style.gridTemplateColumns = '1fr 1fr auto';
   row.style.gap = '8px';
   row.style.marginBottom = '6px';
-  const kI = document.createElement('input'); kI.type='text'; kI.placeholder='字段名'; kI.value=k;
-  const vI = document.createElement('input'); vI.type='text'; vI.placeholder='字段值'; vI.value = typeof v==='object'? JSON.stringify(v): (v??'');
-  const del = document.createElement('button'); del.type='button'; del.className='btn'; del.textContent='删除'; del.onclick=()=>{ kvForm.removeChild(row); syncTextarea(); };
-  kI.oninput = syncTextarea; vI.oninput = syncTextarea;
-  row.appendChild(kI); row.appendChild(vI); row.appendChild(del);
+
+  const kI = document.createElement('input');
+  kI.type='text';
+  kI.placeholder='字段名';
+  kI.value=k;
+
+  const vI = document.createElement('input');
+  vI.type='text';
+  vI.placeholder='字段值';
+  vI.value = typeof v==='object'? JSON.stringify(v): (v??'');
+
+  const del = document.createElement('button');
+  del.type='button';
+  del.className='btn';
+  del.textContent='删除';
+  del.onclick=()=>{
+    if (kvForm.children.length > 1) { // 至少保留一行
+      kvForm.removeChild(row);
+      syncTextarea();
+    } else {
+      kI.value = '';
+      vI.value = '';
+      syncTextarea();
+    }
+  };
+
+  kI.oninput = syncTextarea;
+  vI.oninput = syncTextarea;
+
+  row.appendChild(kI);
+  row.appendChild(vI);
+  row.appendChild(del);
   return row;
 }
 
@@ -116,61 +468,155 @@ function renderForm(obj){
   if (!kvForm.children.length) kvForm.appendChild(createRow());
   syncTextarea();
 }
+
 function formToObject(){
   const o={};
   Array.from(kvForm.children).forEach(row=>{
     const [kI,vI] = row.querySelectorAll('input');
     const k=(kI.value||'').trim(); if(!k) return;
-    const raw=vI.value; try{ o[k]=JSON.parse(raw);}catch(_){ o[k]=raw; }
+    const raw=vI.value;
+    try{
+      o[k]=JSON.parse(raw);
+    }catch(_){
+      o[k]=raw;
+    }
   });
   return o;
 }
-function syncTextarea(){ resultBox.value = JSON.stringify(formToObject(), null, 2); }
 
-addFieldBtn.onclick = ()=>{ kvForm.appendChild(createRow()); syncTextarea(); };
-syncFromTextBtn.onclick = ()=>{ try{ renderForm(JSON.parse(resultBox.value||'{}')); }catch(e){ editMsg.textContent='JSON无效'; } };
+function syncTextarea(){
+  try {
+    resultBox.value = JSON.stringify(formToObject(), null, 2);
+  } catch (e) {
+    resultBox.value = '{}';
+  }
+}
+
+// 事件绑定
+addFieldBtn.onclick = ()=>{
+  kvForm.appendChild(createRow());
+  syncTextarea();
+};
+
+syncFromTextBtn.onclick = ()=>{
+  try{
+    const obj = JSON.parse(resultBox.value||'{}');
+    renderForm(obj);
+    editMsg.textContent = '已从文本区刷新表单';
+    setTimeout(() => editMsg.textContent = '', 2000);
+  }catch(e){
+    editMsg.textContent = 'JSON格式无效';
+  }
+};
 
 function openEdit(id){
   const tr = document.querySelector(`tr[data-id="${id}"]`);
   currentId = id;
   currentWriter = tr?.getAttribute('data-writer') || '';
   currentImage = tr?.getAttribute('data-image') || '';
+
   fetch(`/elastic/data/${id}/`, { credentials:'same-origin' })
     .then(r=>r.json()).then(d=>{
-      if(d.status!=='success') throw new Error('获取失败');
+      if(d.status!=='success') throw new Error(d.message || '获取失败');
       const rec=d.data||{};
       const dataStr = rec.data || '{}';
-      let obj={}; try{ obj = typeof dataStr==='string'? JSON.parse(dataStr): (dataStr||{});}catch(_){ obj={}; }
+      let obj={};
+      try{
+        obj = typeof dataStr==='string'? JSON.parse(dataStr): (dataStr||{});
+      }catch(_){
+        obj={};
+      }
       renderForm(obj);
-      modal.style.display='flex';
-    }).catch(e=>{ alert(e.message||'发生错误'); });
+      editModal.style.display='flex';
+    }).catch(e=>{
+      alert(e.message||'获取数据失败');
+    });
 }
-function closeModal(){ modal.style.display='none'; currentId=''; }
-function saveEdit(){
+
+function closeModal(){
+  editModal.style.display='none';
+  currentId='';
+}
+
+async function saveEdit(){
   const body = {
     writer_id: currentWriter,
-    data: JSON.stringify(formToObject()),
+    data: resultBox.value, // 直接使用textarea中的值
     image: currentImage,
   };
-  fetch(`/elastic/data/${currentId}/update/`, {
-    method:'PUT', credentials:'same-origin',
-    headers:{ 'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken')||'' },
-    body: JSON.stringify(body),
-  }).then(r=>r.json()).then(d=>{
-    if(d.status!=='success') throw new Error('保存失败');
-    location.reload();
-  }).catch(e=>{ editMsg.textContent = e.message||'发生错误'; });
+
+  try {
+    const response = await fetch(`/elastic/data/${currentId}/update/`, {
+      method:'PUT',
+      credentials:'same-origin',
+      headers:{
+        'Content-Type':'application/json',
+        'X-CSRFToken': getCookie('csrftoken')||''
+      },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+    if(data.status!=='success') throw new Error(data.message || '保存失败');
+
+    alert('保存成功');
+    closeModal();
+    // 重新加载数据以显示更新
+    if (searchResultDiv.style.display !== 'none') {
+      // 如果当前显示的是搜索结果，重新执行搜索
+      const query = searchQueryInput.value.trim();
+      if (query) {
+        const isFuzzy = document.querySelector('.search-result').textContent.includes('模糊');
+        performSearch(isFuzzy ? 'fuzzy' : 'exact');
+      } else {
+        loadAllData();
+      }
+    } else {
+      loadAllData();
+    }
+  } catch (e) {
+    editMsg.textContent = e.message||'保存失败';
+  }
 }
-function doDelete(id){
-  if(!confirm('确认删除该记录？')) return;
-  fetch(`/elastic/data/${id}/delete/`, {
-    method:'DELETE', credentials:'same-origin',
-    headers:{ 'X-CSRFToken': getCookie('csrftoken')||'' }
-  }).then(r=>r.json()).then(d=>{
-    if(d.status!=='success') throw new Error('删除失败');
-    location.reload();
-  }).catch(e=> alert(e.message||'发生错误'));
+
+async function doDelete(id){
+  if(!confirm('确认删除该记录？此操作不可撤销')) return;
+
+  try {
+    const response = await fetch(`/elastic/data/${id}/delete/`, {
+      method:'DELETE',
+      credentials:'same-origin',
+      headers:{ 'X-CSRFToken': getCookie('csrftoken')||'' }
+    });
+
+    const data = await response.json();
+    if(data.status!=='success') throw new Error(data.message || '删除失败');
+
+    alert('删除成功');
+    // 重新加载数据
+    if (searchResultDiv.style.display !== 'none') {
+      const query = searchQueryInput.value.trim();
+      if (query) {
+        const isFuzzy = document.querySelector('.search-result').textContent.includes('模糊');
+        performSearch(isFuzzy ? 'fuzzy' : 'exact');
+      } else {
+        loadAllData();
+      }
+    } else {
+      loadAllData();
+    }
+  } catch (e) {
+    alert(e.message||'删除失败');
+  }
 }
+
+// 页面加载时自动加载所有数据
+document.addEventListener('DOMContentLoaded', function() {
+  loadAllData();
+});
 </script>
 </body>
 </html>
+
+
+
diff --git a/main/templates/main/home.html b/main/templates/main/home.html
index 371a993..4c904f6 100644
--- a/main/templates/main/home.html
+++ b/main/templates/main/home.html
@@ -1,40 +1,110 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh">
 <head>
-    <meta charset="UTF-8">
-    <title>主页</title>
-    <style>
-        body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #fafafa; }
-        .container { max-width: 720px; margin: 8vh auto; padding: 24px; }
-        .card { background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: 24px; }
-    </style>
-    {% csrf_token %}
-    <!-- CSRF token to assist logout POST via cookie/header -->
+  <meta charset="UTF-8" />
+  <title>固定左侧栏目</title>
+  <style>
+    .sidebar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 180px;           /* 导航栏变窄 */
+      height: 100vh;
+      background: #1e1e2e;
+      color: white;
+      padding: 20px;
+      box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .user-id {
+      text-align: center;
+      margin-bottom: auto;   /* 用户ID保持在顶部 */
+    }
+
+    .sidebar h3 {
+      margin-top: 0;
+      font-size: 18px;
+      color: #ff79c6;
+      text-align: center;
+      margin-bottom: 20px;   /* 调整标题与下方内容的距离 */
+    }
+
+    .navigation-links {
+      width: 100%;
+      margin-top: 60px;       /* 空出一个正方形位置（约 60x60px） */
+    }
+
+    .sidebar a,
+    .sidebar button {
+      display: block;
+      color: #8be9fd;
+      text-decoration: none;
+      margin: 10px 0;         /* 减少上下间距 */
+      font-size: 16px;        /* 根据需要调整字体大小 */
+      padding: 15px;          /* 增加内边距以填充整个宽度 */
+      border-radius: 4px;     /* 减少圆角半径 */
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      width: calc(100% - 40px); /* 适应padding-left/right 20px */
+      text-align: left;
+      transition: all 0.2s ease;
+    }
+
+    .sidebar a:hover,
+    .sidebar button:hover {
+      color: #ff79c6;
+      background-color: rgba(139, 233, 253, 0.2);
+    }
+
+    .main-content {
+      margin-left: 200px;     /* 调整主内容区左外边距，与新侧边栏宽度匹配 */
+      padding: 20px;
+      color: #333;
+    }
+
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+    }
+
+    #logoutMsg {
+      color: #ff5555;
+      font-size: 14px;
+      margin-top: 10px;
+      text-align: center;
+    }
+  </style>
 </head>
 <body>
-<div class="container" style="display:flex; gap:16px;">
-    <aside style="width:220px; background:#fff; border-radius:10px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding:16px; height: fit-content;">
-        <h3 style="margin-top:0; font-size:16px;">导航</h3>
-        <nav>
-            <ul style="list-style:none; padding-left:0; line-height:1.9;">
-                <li><a href="/" style="text-decoration:none; color:#1677ff;">主页</a></li>
-                <li><a href="/elastic/upload-page/" style="text-decoration:none; color:#1677ff;">图片上传与识别</a></li>
-                <li><a href="/elastic/manage/" style="text-decoration:none; color:#1677ff;">数据管理（管理员）</a></li>
-            </ul>
-        </nav>
-        <hr/>
-        <button id="logoutBtn" style="padding:8px 12px; width:100%; background:#ff4d4f; color:#fff; border:none; border-radius:6px; cursor:pointer;">退出登录</button>
-        <div id="logoutMsg" class="muted" style="margin-top:8px;"></div>
-    </aside>
-
-    <div class="card" style="flex:1;">
-        <h2>主页（留白）</h2>
-        <p>用户ID：{{ user_id }}</p>
-        <p>这里留白即可，主页不由当前实现负责。</p>
-        <p class="muted">提示：已使用安全的会话 Cookie 管理登录状态。</p>
+  <!-- 左侧固定栏目 -->
+  <div class="sidebar">
+    <div class="user-id">
+      <h3>用户ID：{{ user_id }}</h3>
     </div>
-    
-    <script>
+    <div class="navigation-links">
+      <a href="/">主页</a>
+      <a href="{% url 'elastic:upload_page' %}">图片上传与识别</a>
+      <a href="{% url 'elastic:manage_page' %}">数据管理（管理员）</a>
+      <button id="logoutBtn">退出登录</button>
+      <div id="logoutMsg"></div>
+      {% csrf_token %}
+    </div>
+  </div>
+
+  <!-- 主内容区域 -->
+  <div class="main-content">
+    <h1>欢迎来到系统</h1>
+    <p>这里是一大堆内容……</p>
+    <p style="height: 200vh;">滚动试试看，左边菜单不会消失哦！✨</p>
+  </div>
+
+  <!-- 登出脚本（保持不变） -->
+  <script>
     function getCookie(name) {
         const value = `; ${document.cookie}`;
         const parts = value.split(`; ${name}=`);
@@ -65,8 +135,6 @@
             msg.textContent = e.message || '发生错误';
         }
     });
-    </script>
-
-</div>
+  </script>
 </body>
-</html>
+</html>
\ No newline at end of file