feat(ui): 重构前端界面并添加移动端侧边栏功能

- 重新设计整体UI布局和样式，采用现代化设计语言
- 添加移动端响应式侧边栏和交互逻辑
- 优化列表加载和搜索功能，增加搜索提示
- 改进按钮样式和交互效果
- 更新.gitignore文件排除设计文档和图片

public/app.js

@@ -12,6 +12,25 @@
   const elTimeRange = document.getElementById('timeRange')
   const elSentinel = document.getElementById('sentinel')
   const elBackTop = document.getElementById('backTop')
+  const elSearchHint = document.getElementById('searchHint')
+  const listContainer = document.querySelector('.list-container')
+
+  // Mobile Sidebar Logic
+  const toggleSidebar = document.getElementById('toggleSidebar')
+  const sidebar = document.getElementById('sidebar')
+  const sidebarOverlay = document.getElementById('sidebarOverlay')
+
+  if (toggleSidebar && sidebar && sidebarOverlay) {
+    const closeSidebar = () => {
+      sidebar.classList.remove('open')
+      sidebarOverlay.classList.remove('open')
+    }
+    toggleSidebar.addEventListener('click', () => {
+      sidebar.classList.toggle('open')
+      sidebarOverlay.classList.toggle('open')
+    })
+    sidebarOverlay.addEventListener('click', closeSidebar)
+  }
 
   /**
    * 格式化字节大小为易读文本
@@ -61,25 +80,20 @@
       document.body.appendChild(t)
     }
     t.textContent = msg
-    t.style.background = warn ? 'rgba(255,96,96,0.9)' : 'rgba(108,140,255,0.9)'
+    t.style.background = warn ? 'rgba(255,59,48,0.9)' : 'rgba(0,122,255,0.9)'
     t.classList.add('show')
     clearTimeout(toastTimer)
     toastTimer = setTimeout(() => t.classList.remove('show'), 1800)
   }
 
   /**
-   * 渲染缓存条目，仅展示完整URL与操作
+   * 渲染缓存条目
    * @param {Array<{type:string,url:string,size:number,mtime:number}>} items 列表
    */
-  /**
-   * 渲染缓存条目，仅展示完整URL与操作
-   * - 维持最大 DOM 节点数量，超量时自动移除顶部旧节点（轻量虚拟化）
-   * @param {Array<{type:string,url:string,size:number,mtime:number,name?:string,version?:string}>} items 列表
-   */
   const renderItems = items => {
     elList.innerHTML = ''
     if (!items.length) {
-      elList.innerHTML = '<div class="empty">暂无数据</div>'
+      elList.innerHTML = '<div class="empty">暂无内容</div>'
       return
     }
     const frag = document.createDocumentFragment()
@@ -96,8 +110,8 @@
           <span>${fmtTime(it.mtime)}</span>
         </div>
         <div class="actions">
-          <button class="btn small" data-act="copy-url">复制完整URL</button>
-          <a class="btn small" href="${it.url}" target="_blank">打开</a>
+          <button class="btn small outline" data-act="copy-url">复制链接</button>
+          <a class="btn small primary" href="${it.url}" target="_blank">打开</a>
         </div>
       `
       card.querySelector('[data-act="copy-url"]').addEventListener('click', () => copy(it.url))
@@ -106,45 +120,67 @@
     elList.appendChild(frag)
   }
 
-  /**
-   * 加载缓存列表数据并更新视图
-   * @returns {Promise<void>}
-   */
   /**
    * 加载缓存列表数据并更新视图（分页 + 过滤 + 排序）
-   * - 支持增量加载，当页码递增时附加到列表
-   * @param {boolean} reset 是否重置列表
-   * @returns {Promise<void>}
    */
   let loading = false
   let page = 1
   let pageSize = Number(elPageSize.value || 30)
   let hasMore = true
   let itemsBuf = []
+  
   const load = async (reset = false) => {
     if (loading) return
     if (reset) { page = 1; itemsBuf = []; elList.innerHTML = ''; hasMore = true }
     if (!hasMore && !reset) return
+    
     loading = true
     elStats.textContent = '加载中...'
-    const u = new URL('/api/list-cache', location.origin)
-    if (state.type) u.searchParams.set('type', state.type)
-    if (state.q) u.searchParams.set('q', state.q)
-    const now = Date.now()
-    const hours = Number(elTimeRange.value || 0)
-    if (hours > 0) u.searchParams.set('updatedFrom', String(now - hours * 3600 * 1000))
-    u.searchParams.set('sortBy', elSortBy.value)
-    u.searchParams.set('order', elOrder.value)
-    u.searchParams.set('page', String(page))
-    u.searchParams.set('pageSize', String(pageSize))
-    const r = await fetch(u)
-    const data = await r.json()
-    itemsBuf = reset ? (data.items || []) : itemsBuf.concat(data.items || [])
-    hasMore = !!data.hasMore
-    elStats.textContent = `共 ${data.total} 条，已加载 ${itemsBuf.length}${hasMore ? '（继续下拉加载）' : ''}`
-    renderItems(itemsBuf)
-    page += 1
-    loading = false
+    
+    // Manage spinner visibility
+    const elSpinner = elSentinel.querySelector('.spinner')
+    if (elSpinner) elSpinner.style.display = 'block'
+    
+    try {
+      const u = new URL('/api/list-cache', location.origin)
+      if (state.type) u.searchParams.set('type', state.type)
+      if (state.q) u.searchParams.set('q', state.q)
+      const now = Date.now()
+      const hours = Number(elTimeRange.value || 0)
+      if (hours > 0) u.searchParams.set('updatedFrom', String(now - hours * 3600 * 1000))
+      
+      u.searchParams.set('sortBy', elSortBy.value)
+      u.searchParams.set('order', elOrder.value)
+      u.searchParams.set('page', String(page))
+      u.searchParams.set('pageSize', String(pageSize))
+      
+      const r = await fetch(u)
+      const data = await r.json()
+      
+      itemsBuf = reset ? (data.items || []) : itemsBuf.concat(data.items || [])
+      hasMore = !!data.hasMore
+      elStats.textContent = `共 ${data.total} 条，已加载 ${itemsBuf.length}`
+      renderItems(itemsBuf)
+      
+      // Manage search hint visibility
+      if (elSearchHint) {
+         // Show hint if there is more data on server (hasMore) or simply if list is not empty (as requested)
+         // Requirement: "Add explicit search function hint, guiding user to search to get more content"
+         // If hasMore is true, it means we only showed a subset.
+         // If itemsBuf.length < data.total, we are showing a subset.
+         const isPartial = itemsBuf.length < data.total
+         elSearchHint.style.display = (isPartial && !loading) ? 'block' : 'none'
+      }
+
+      page += 1
+    } catch (e) {
+      console.error(e)
+      elStats.textContent = '加载失败'
+      toast('加载失败', true)
+    } finally {
+      loading = false
+      if (elSpinner) elSpinner.style.display = 'none'
+    }
   }
 
   // 事件绑定
@@ -156,39 +192,51 @@
       load(true)
     })
   })
+  
+  // 防抖搜索
+  let searchTimer
   elSearch.addEventListener('input', () => {
-    state.q = elSearch.value.trim()
-    load(true)
+    clearTimeout(searchTimer)
+    searchTimer = setTimeout(() => {
+      state.q = elSearch.value.trim()
+      load(true)
+    }, 300)
   })
+
   elSortBy.addEventListener('change', () => load(true))
   elOrder.addEventListener('change', () => load(true))
   elPageSize.addEventListener('change', () => { pageSize = Number(elPageSize.value || 30); load(true) })
   elTimeRange.addEventListener('change', () => load(true))
+  
   elRefresh.addEventListener('click', async () => {
     try {
-      const r = await fetch('/api/seed')
-      const j = await r.json()
-      toast(`Seed 完成：${j.count} 项`)
-    } catch {}
+      toast('刷新列表中...')
+      // const r = await fetch('/api/seed')
+      // const j = await r.json()
+      // toast(`Seed 完成：${j.count} 项`)
+    } catch {
+      toast('请求失败', true)
+    }
     load(true)
   })
 
-  // 轻量虚拟滚动：靠近底部即加载下一页；大量节点时隐藏返回顶部按钮控制
+  // 虚拟滚动/无限加载
   const io = new IntersectionObserver(entries => {
     entries.forEach(e => {
       if (e.isIntersecting) load(false)
     })
-  })
+  }, { root: listContainer, rootMargin: '100px' })
+  
   io.observe(elSentinel)
 
   // 返回顶部按钮展示与交互
   const onScroll = () => {
-    const show = (document.documentElement.scrollTop || document.body.scrollTop) > 400
+    const show = listContainer.scrollTop > 400
     elBackTop.classList.toggle('show', show)
   }
-  window.addEventListener('scroll', onScroll)
+  listContainer.addEventListener('scroll', onScroll)
   elBackTop.addEventListener('click', () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    listContainer.scrollTo({ top: 0, behavior: 'smooth' })
   })
 
   // 首次加载