most-box 0.0.1 → 0.0.2

package/public/app.jsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react'
 import {
   Upload, Sun, Moon, Image as ImageIcon, Trash2, Folder,
-  FolderPlus, Film, Music, ChevronRight, FileText,
+  Film, Music, ChevronRight, FileText,
   X, Check, Copy, Download, ArrowUpDown, Star, Files, HardDrive, Search, Info,
-  FolderOpen, Power
+  FolderOpen, Power, Edit2, Menu, Eye, Loader
 } from 'lucide-react'
 
-// === API ===
+// === 接口 ===
 const API = {
   async fetch(url, options = {}) {
     const res = await fetch(url, options)
@@ -64,7 +64,7 @@ const API = {
   })
 }
 
-// === Helpers ===
+// === 工具函数 ===
 function formatSize(bytes) {
   if (!bytes || bytes <= 0) return '0 B'
   if (bytes < 1024) return `${bytes} B`
@@ -119,41 +119,135 @@ function getFileSubtype(fileName) {
   const imgExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'tiff', 'heic', 'heif']
   const vidExts = ['mp4', 'webm', 'mov', 'avi', 'mkv', 'flv', 'wmv', 'm4v', 'mpeg', '3gp']
   const audExts = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma', 'opus']
+  const txtExts = ['txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'css', 'scss', 'less', 'json', 'xml', 'html', 'htm', 'yaml', 'yml', 'toml', 'ini', 'cfg', 'conf', 'log', 'sh', 'bash', 'py', 'rb', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'hpp', 'cs', 'php', 'sql', 'graphql', 'env', 'gitignore', 'dockerfile', 'readme']
   if (imgExts.includes(ext)) return 'image'
   if (vidExts.includes(ext)) return 'video'
   if (audExts.includes(ext)) return 'audio'
+  if (txtExts.includes(ext)) return 'text'
   return 'file'
 }
 
-// === Welcome Guide ===
-function WelcomeGuide({ onClose }) {
+// === 引导页 ===
+function WelcomeGuide({ onClose, onShutdown }) {
   const [step, setStep] = useState(0)
+  const [customPath, setCustomPath] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [defaultPath, setDefaultPath] = useState('')
+
+  useEffect(() => {
+    API.getDataPath().then(config => {
+      setDefaultPath(config.dataPath || '')
+    }).catch(() => { })
+  }, [])
+
   const steps = [
     { title: '欢迎使用', content: '拖拽文件到上传区，或点击选择文件。上传后复制链接发给朋友即可。' },
-    { title: '下载文件', content: '点击「下载文件」，粘贴分享链接即可从 P2P 网络下载文件。' }
+    { title: '下载文件', content: '点击「下载文件」，粘贴分享链接即可从 P2P 网络下载文件。' },
+    { title: '设置存储位置', content: '选择文件存储的文件夹位置（可选，默认使用系统盘）', isOptional: true }
   ]
   const current = steps[step]
 
+  const handleSavePath = async () => {
+    if (!customPath.trim()) return
+    setSaving(true)
+    try {
+      await API.saveConfig({ dataPath: customPath.trim() })
+    } catch (err) {
+      console.error('Save path error:', err)
+      setSaving(false)
+      return
+    }
+    setSaving(false)
+    setSaved(true)
+  }
+
+  const isLastStep = step === steps.length - 1
+  const isPathStep = step === 2
+
   return (
-    <ModalOverlay onClose={onClose}>
-      <div style={{ width: 360, padding: 28, borderRadius: 16, background: '#fff', textAlign: 'center' }} onClick={e => e.stopPropagation()}>
-        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 12 }}>{current.title}</h2>
-        <p style={{ fontSize: 13, color: '#64748b', lineHeight: 1.6, marginBottom: 20 }}>{current.content}</p>
-        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginBottom: 20 }}>
-          {steps.map((_, i) => (
-            <div key={i} style={{ width: 6, height: 6, borderRadius: '50%', background: i === step ? '#3b82f6' : '#e2e8f0' }} />
-          ))}
-        </div>
-        <button onClick={step === steps.length - 1 ? onClose : () => setStep(step + 1)} style={{ padding: '10px 32px', borderRadius: 10, border: 'none', background: '#3b82f6', color: '#fff', cursor: 'pointer', fontSize: 14 }}>
-          {step === steps.length - 1 ? '开始使用' : '下一步'}
-        </button>
+    <ModalOverlay onClose={onClose} closeOnOverlayClick={false}>
+      <div className="welcome-modal" onClick={e => e.stopPropagation()}>
+        {saved ? (
+          <>
+            <div className="welcome-success-icon">
+              <Check size={24} color="#22c55e" />
+            </div>
+            <h2>设置已保存</h2>
+            <p>存储位置已更改，需要重启应用生效。</p>
+            <button
+              onClick={onShutdown}
+              className="btn primary"
+            >
+              好的
+            </button>
+          </>
+        ) : (
+          <>
+            <h2>{current.title}</h2>
+            <p>{current.content}</p>
+
+            {isPathStep && (
+              <div className="welcome-path-section">
+                <div>
+                  <div className="path-label">当前存储位置</div>
+                  <div className="path-value">{defaultPath || '未设置'}</div>
+                </div>
+                <div>
+                  <div className="path-label">自定义位置</div>
+                  <input
+                    type="text"
+                    value={customPath}
+                    onChange={(e) => setCustomPath(e.target.value)}
+                    placeholder="如 D:\"
+                    className="path-input"
+                  />
+                  <div className="path-hint">不填则使用当前位置，修改后需重启应用</div>
+                </div>
+              </div>
+            )}
+
+            <div className="welcome-steps">
+              {steps.map((_, i) => (
+                <div key={i} className={`welcome-step-dot ${i === step ? 'active' : ''}`} />
+              ))}
+            </div>
+
+            <div className="welcome-actions">
+              {isPathStep && (
+                <button
+                  onClick={onClose}
+                  className="btn secondary"
+                >
+                  跳过
+                </button>
+              )}
+              <button
+                onClick={() => {
+                  if (isPathStep && customPath) {
+                    handleSavePath()
+                  } else if (isLastStep) {
+                    onClose()
+                  } else {
+                    setStep(step + 1)
+                  }
+                }}
+                disabled={isPathStep && saving}
+                className="btn primary"
+                style={{ opacity: isPathStep && saving ? 0.6 : 1, cursor: isPathStep && saving ? 'not-allowed' : 'pointer' }}
+              >
+                {isPathStep ? (saving ? '保存中...' : '保存并完成') : (isLastStep ? '开始使用' : '下一步')}
+              </button>
+            </div>
+          </>
+        )}
       </div>
     </ModalOverlay>
   )
 }
 
-// === About Modal ===
-function SettingsModal({ onClose, addToast }) {
+// === 设置弹窗 ===
+function SettingsModal({ onClose, addToast, isDarkMode, handleShutdown }) {
   const [dataPath, setStoragePath] = useState('')
   const [originalPath, setOriginalPath] = useState('')
   const [isDefault, setIsDefault] = useState(false)
@@ -201,93 +295,78 @@ function SettingsModal({ onClose, addToast }) {
 
   return (
     <ModalOverlay onClose={onClose}>
-      <div style={{ width: 420, padding: 28, borderRadius: 16, background: '#fff' }} onClick={e => e.stopPropagation()}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
-          <h2 style={{ fontSize: 18, fontWeight: 600 }}>设置</h2>
-          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#94a3b8' }}><X size={18} /></button>
+      <div className="settings-modal" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="settings-title">设置</h2>
+          <button onClick={onClose} className="modal-close-btn"><X size={18} /></button>
         </div>
 
         <div style={{ marginBottom: 20 }}>
-          <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 8, color: '#374151' }}>存储位置</label>
-          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <label className="settings-label">存储位置</label>
+          <div className="settings-row">
             <input
               type="text"
               value={dataPath}
               onChange={(e) => setStoragePath(e.target.value)}
-              placeholder="输入完整路径，如 D:\most-data"
+              placeholder="如 D:\most-data"
               disabled={loading}
-              style={{ flex: 1, padding: '10px 12px', borderRadius: 8, border: '1.5px solid #e5e7eb', fontSize: 13, outline: 'none' }}
+              className="settings-input"
             />
-            <button onClick={handleSavePath} disabled={saving || loading || !isPathChanged} style={{ padding: '10px 16px', borderRadius: 8, border: 'none', background: '#3b82f6', color: '#fff', cursor: saving || loading || !isPathChanged ? 'not-allowed' : 'pointer', fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', opacity: saving || loading || !isPathChanged ? 0.5 : 1 }}>
+            <button onClick={handleSavePath} disabled={saving || loading || !isPathChanged} className="btn primary" style={{ whiteSpace: 'nowrap', opacity: saving || loading || !isPathChanged ? 0.5 : 1 }}>
               {saving ? '保存中...' : '保存'}
             </button>
             {!isDefault && (
-              <button onClick={handleResetPath} disabled={saving || loading} style={{ padding: '10px 12px', borderRadius: 8, border: '1px solid #e5e7eb', background: '#fff', color: '#6b7280', cursor: saving || loading ? 'not-allowed' : 'pointer', fontSize: 13, whiteSpace: 'nowrap', opacity: saving || loading ? 0.5 : 1 }}>
+              <button onClick={handleResetPath} disabled={saving || loading} className="btn secondary" style={{ whiteSpace: 'nowrap', opacity: saving || loading ? 0.5 : 1 }}>
                 恢复默认
               </button>
             )}
           </div>
-          <p style={{ fontSize: 11, color: '#9ca3af', marginTop: 8 }}>重启后生效</p>
+          <p className="settings-hint">修改后需重启应用</p>
         </div>
 
-        <div style={{ borderTop: '1px solid #e5e7eb', paddingTop: 16 }}>
-          <div style={{ textAlign: 'center', marginBottom: 16 }}>
-            <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>MostBox</h3>
-            <p style={{ fontSize: 12, color: '#9ca3af' }}>版本 0.0.1</p>
+        <div className="settings-divider">
+          <div className="settings-about">
+            <h3>MostBox</h3>
+            <p>版本 0.0.1</p>
           </div>
-          <p style={{ fontSize: 12, color: '#6b7280', textAlign: 'center' }}>Hyperswarm · Hyperdrive · IPFS</p>
+          <p style={{ fontSize: 12, textAlign: 'center', color: 'var(--text-secondary)' }}>Hyperswarm · Hyperdrive · IPFS</p>
         </div>
 
-        <button onClick={onClose} style={{ width: '100%', marginTop: 20, padding: 10, borderRadius: 10, border: 'none', background: '#3b82f6', color: '#fff', cursor: 'pointer', fontSize: 14 }}>
-          关闭
+        <button onClick={() => { onClose(); handleShutdown(); }} className="btn danger full" style={{ marginTop: 20 }}>
+          <Power size={16} /> 关闭服务
         </button>
       </div>
     </ModalOverlay>
   )
 }
 
-// === Toast ===
-const TOAST_COLORS = { success: '#22c55e', error: '#ef4444', warning: '#f59e0b', info: '#3b82f6' }
-
 function Toast({ message, type, onDone, index }) {
   useEffect(() => {
     const t = setTimeout(onDone, 3000)
     return () => clearTimeout(t)
   }, [])
   return (
-    <div style={{
-      position: 'fixed', bottom: 24 + index * 60, right: 24, zIndex: 9999,
-      background: TOAST_COLORS[type] || TOAST_COLORS.info, color: '#fff',
-      padding: '12px 20px', borderRadius: 12, fontSize: 13, fontWeight: 500,
-      boxShadow: '0 4px 16px rgba(0,0,0,0.2)',
-      animation: 'toastSlideIn 0.2s ease'
-    }}>
+    <div className={`toast ${type}`} style={{ bottom: 24 + index * 60 }}>
       {message}
     </div>
   )
 }
 
-// === Modal Overlay ===
-function ModalOverlay({ children, onClose }) {
+// === 遮罩层 ===
+function ModalOverlay({ children, onClose, closeOnOverlayClick = false }) {
+  const handleOverlayClick = (e) => {
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose?.()
+    }
+  }
   return (
-    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={onClose}>
+    <div className="modal-overlay" onClick={handleOverlayClick}>
       {children}
     </div>
   )
 }
 
-// === Shared Styles ===
-const iconContainerStyle = {
-  width: 56, height: 56, borderRadius: 12, marginBottom: 10,
-  display: 'flex', alignItems: 'center', justifyContent: 'center'
-}
-
-const textEllipsisStyle = {
-  fontSize: 12, fontWeight: 500, textAlign: 'center', maxWidth: '100%',
-  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
-}
-
-// === Breadcrumb Generator ===
+// === 面包屑生成器 ===
 function generateBreadcrumbs(currentPath) {
   if (!currentPath) return []
   return [
@@ -299,18 +378,14 @@ function generateBreadcrumbs(currentPath) {
   ]
 }
 
-// === Refresh Handler Factory ===
+// === 刷新处理器工厂 ===
 const createRefreshHandler = (setter, apiMethod) => async () => {
   try { setter(await apiMethod()) }
   catch (err) { console.error(err) }
 }
 
-// === File Card ===
+// === 文件卡片 ===
 function FileCard({ file, isSelected, isDarkMode, onSelect, onPreview }) {
-  const bgSecondary = isDarkMode ? '#1e293b' : '#ffffff'
-  const accentBlue = isDarkMode ? '#60a5fa' : '#3b82f6'
-  const borderColor = isDarkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'
-  const textColor = isDarkMode ? '#e5e7eb' : '#111827'
   const subtype = getFileSubtype(file.fileName)
 
   return (
@@ -318,179 +393,161 @@ function FileCard({ file, isSelected, isDarkMode, onSelect, onPreview }) {
       data-id={file.cid}
       onClick={() => onSelect(file.cid)}
       onDoubleClick={() => onPreview(file)}
-      style={{
-        display: 'flex', flexDirection: 'column', alignItems: 'center',
-        padding: 16, borderRadius: 12, cursor: 'pointer',
-        background: isSelected ? accentBlue + '15' : bgSecondary,
-        border: `1px solid ${isSelected ? accentBlue : borderColor}`,
-        transition: 'all 0.15s'
-      }}
+      className={`card ${isSelected ? 'selected' : ''}`}
     >
-      <div style={{
-        ...iconContainerStyle,
-        background: file.starred ? 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)' : 'linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%)'
-      }}>
+      <div className={`card-icon ${file.starred ? 'starred' : 'file'}`}>
         {subtype === 'image' && <ImageIcon size={24} color="#fff" />}
         {subtype === 'video' && <Film size={24} color="#fff" />}
         {subtype === 'audio' && <Music size={24} color="#fff" />}
         {subtype === 'file' && <FileText size={24} color="#fff" />}
       </div>
-      <p style={{ ...textEllipsisStyle, color: textColor }}>
+      <p className="card-name">
         {parseName(file.fileName).name}
       </p>
     </div>
   )
 }
 
-// === Folder Card ===
+// === 文件夹卡片 ===
 function FolderCard({ folder, isDarkMode, onClick }) {
-  const bgSecondary = isDarkMode ? '#1e293b' : '#ffffff'
-  const borderColor = isDarkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'
-  const textColor = isDarkMode ? '#e5e7eb' : '#111827'
-
   return (
     <div
       onClick={onClick}
-      style={{
-        display: 'flex', flexDirection: 'column', alignItems: 'center',
-        padding: 16, borderRadius: 12, cursor: 'pointer',
-        background: bgSecondary,
-        border: `1px solid ${borderColor}`,
-        transition: 'all 0.15s'
-      }}
+      className="card"
     >
-      <div style={{ ...iconContainerStyle, background: 'linear-gradient(135deg, #818cf8 0%, #6366f1 100%)' }}>
+      <div className="card-icon folder">
         <Folder size={28} color="#fff" />
       </div>
-      <p style={{ ...textEllipsisStyle, color: textColor }}>
+      <p className="card-name">
         {folder.name}
       </p>
     </div>
   )
 }
 
-// === Confirm Modal ===
-function ConfirmModal({ title, message, confirmText, onConfirm, onClose, danger }) {
-  const isDarkMode = false
-  const bgSecondary = '#ffffff'
-  const bgTertiary = '#f1f5f9'
-  const textPrimary = '#0f172a'
-  const textSecondary = '#64748b'
-  const borderColor = 'rgba(0,0,0,0.06)'
+// === 确认弹窗 ===
+function ConfirmModal({ title, message, confirmText, onConfirm, onClose, danger, isDarkMode, closeOnOverlayClick }) {
   return (
-    <ModalOverlay onClose={onClose}>
-      <div style={{ width: 360, padding: 24, borderRadius: 16, background: bgSecondary, border: `1px solid ${borderColor}` }} onClick={e => e.stopPropagation()}>
-        <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 12 }}>{title}</h3>
-        <p style={{ fontSize: 13, color: textSecondary, marginBottom: 20 }}>{message}</p>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button onClick={onClose} style={{ flex: 1, padding: 10, borderRadius: 8, border: `1px solid ${borderColor}`, background: 'transparent', cursor: 'pointer', fontSize: 13 }}>取消</button>
-          <button onClick={onConfirm} style={{ flex: 1, padding: 10, borderRadius: 8, border: 'none', background: danger ? '#ef4444' : '#3b82f6', color: '#fff', cursor: 'pointer', fontSize: 13, fontWeight: 500 }}>{confirmText}</button>
+    <ModalOverlay onClose={onClose} closeOnOverlayClick={closeOnOverlayClick}>
+      <div className="confirm-modal" onClick={e => e.stopPropagation()}>
+        <h3>{title}</h3>
+        <p>{message}</p>
+        <div className="modal-actions">
+          <button onClick={onClose} className="btn secondary">取消</button>
+          <button onClick={onConfirm} className={`btn ${danger ? 'danger' : 'primary'}`}>{confirmText}</button>
         </div>
       </div>
     </ModalOverlay>
   )
 }
 
-// === Input Modal ===
-function InputModal({ title, placeholder, defaultValue, confirmText, onConfirm, onClose }) {
+// === 输入弹窗 ===
+function InputModal({ title, placeholder, defaultValue, confirmText, onConfirm, onClose, isDarkMode, isLoading, loadingText }) {
   const [value, setValue] = useState(defaultValue || '')
-  const bgSecondary = '#ffffff'
-  const bgTertiary = '#f1f5f9'
-  const textPrimary = '#0f172a'
-  const textSecondary = '#64748b'
-  const borderColor = 'rgba(0,0,0,0.06)'
   return (
     <ModalOverlay onClose={onClose}>
-      <div style={{ width: 360, padding: 24, borderRadius: 16, background: bgSecondary, border: `1px solid ${borderColor}` }} onClick={e => e.stopPropagation()}>
-        <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 16 }}>{title}</h3>
+      <div className="input-modal" onClick={e => e.stopPropagation()}>
+        <h3>{title}</h3>
         <input
           type="text"
           value={value}
           onChange={(e) => setValue(e.target.value)}
           placeholder={placeholder}
           autoFocus
-          onKeyDown={(e) => { if (e.key === 'Enter' && value.trim()) onConfirm(value.trim()) }}
-          style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: `1.5px solid ${borderColor}`, fontSize: 13, outline: 'none', background: bgTertiary, color: textPrimary, marginBottom: 16 }}
+          onKeyDown={(e) => { if (e.key === 'Enter' && value.trim() && !isLoading) onConfirm(value.trim()) }}
+          className="modal-input"
         />
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button onClick={onClose} style={{ flex: 1, padding: 10, borderRadius: 8, border: `1px solid ${borderColor}`, background: 'transparent', cursor: 'pointer', fontSize: 13 }}>取消</button>
-          <button onClick={() => value.trim() && onConfirm(value.trim())} disabled={!value.trim()} style={{ flex: 1, padding: 10, borderRadius: 8, border: 'none', background: value.trim() ? '#3b82f6' : bgTertiary, color: value.trim() ? '#fff' : textSecondary, cursor: value.trim() ? 'pointer' : 'not-allowed', fontSize: 13, fontWeight: 500 }}>{confirmText}</button>
+        <div className="modal-actions">
+          <button onClick={onClose} disabled={isLoading} className="btn secondary">取消</button>
+          <button onClick={() => value.trim() && onConfirm(value.trim())} disabled={!value.trim() || isLoading} className="btn primary" style={{ opacity: isLoading ? 0.7 : 1 }}>{isLoading ? (loadingText || '处理中...') : confirmText}</button>
         </div>
       </div>
     </ModalOverlay>
   )
 }
 
-// === Move Modal ===
+// === 移动弹窗 ===
 function MoveModal({ items, allFolders, currentPath, isDarkMode, onMove, onClose }) {
   const [targetPath, setTargetPath] = useState('')
-  const bgSecondary = isDarkMode ? '#1e293b' : '#ffffff'
-  const bgTertiary = isDarkMode ? '#334155' : '#f1f5f9'
-  const textPrimary = isDarkMode ? '#f8fafc' : '#0f172a'
-  const textSecondary = isDarkMode ? '#94a3b8' : '#64748b'
-  const borderColor = isDarkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'
-  const accentBlue = isDarkMode ? '#60a5fa' : '#3b82f6'
+  const [customPath, setCustomPath] = useState(currentPath)
 
   const breadcrumbParts = generateBreadcrumbs(targetPath)
 
+  const handleConfirm = () => {
+    const finalPath = targetPath || customPath.trim()
+    onMove(finalPath)
+  }
+
   return (
     <ModalOverlay onClose={onClose}>
-      <div style={{ width: 400, padding: 24, borderRadius: 16, background: bgSecondary, border: `1px solid ${borderColor}` }} onClick={e => e.stopPropagation()}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-          <h3 style={{ fontSize: 16, fontWeight: 600 }}>移动到</h3>
-          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: textSecondary }}><X size={18} /></button>
+      <div className="move-modal" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>移动到</h3>
+          <button onClick={onClose} className="modal-close-btn"><X size={18} /></button>
         </div>
-        <p style={{ fontSize: 12, color: textSecondary, marginBottom: 12 }}>已选 {items.length} 个项目</p>
-        <div style={{ display: 'flex', gap: 6, marginBottom: 12, flexWrap: 'wrap' }}>
+        <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 12 }}>已选 {items.length} 个项目</p>
+        <div className="move-new-folder">
+          <input
+            type="text"
+            value={customPath}
+            onChange={(e) => setCustomPath(e.target.value)}
+            placeholder="输入路径创建嵌套文件夹"
+          />
+        </div>
+        <p style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 12 }}>如 图片/壁纸</p>
+        <div className="move-breadcrumb">
           {breadcrumbParts.map((part, i) => (
             <React.Fragment key={part.path}>
-              {i > 0 && <span style={{ color: textSecondary }}>/</span>}
+              {i > 0 && <span style={{ color: 'var(--text-secondary)' }}>/</span>}
               <button
                 key={part.path}
-                onClick={() => setTargetPath(part.path)}
-                style={{
-                  padding: '4px 8px', borderRadius: 6, border: 'none',
-                  background: targetPath === part.path ? accentBlue + '20' : bgTertiary,
-                  color: targetPath === part.path ? accentBlue : textSecondary,
-                  cursor: 'pointer', fontSize: 12
+                onClick={() => {
+                  setTargetPath(part.path)
+                  setCustomPath(part.path)
                 }}
+                className={`move-breadcrumb-btn ${targetPath === part.path && !customPath ? 'active' : ''}`}
               >
                 {part.name}
               </button>
             </React.Fragment>
           ))}
         </div>
-        <div style={{ maxHeight: 200, overflow: 'auto', marginBottom: 16 }}>
-          {allFolders.filter(f => f.path.startsWith(targetPath + (targetPath ? '/' : ''))).length === 0 && targetPath !== '' && (
-            <p style={{ fontSize: 12, color: textSecondary, textAlign: 'center', padding: 16 }}>该目录下没有子文件夹</p>
-          )}
-          {allFolders.filter(f => f.path.startsWith(targetPath + (targetPath ? '/' : ''))).map(folder => (
+        <div className="move-folder-list">
+          {allFolders.filter(f => {
+            if (targetPath === '') {
+              return !f.path.includes('/')
+            }
+            const prefix = targetPath + '/'
+            if (!f.path.startsWith(prefix)) return false
+            const relativePath = f.path.substring(prefix.length)
+            return !relativePath.includes('/')
+          }).length === 0 && (
+              <p style={{ fontSize: 12, color: 'var(--text-secondary)', textAlign: 'center', padding: 16 }}>该目录下没有子文件夹</p>
+            )}
+          {allFolders.filter(f => {
+            if (targetPath === '') {
+              return !f.path.includes('/')
+            }
+            const prefix = targetPath + '/'
+            if (!f.path.startsWith(prefix)) return false
+            const relativePath = f.path.substring(prefix.length)
+            return !relativePath.includes('/')
+          }).map(folder => (
             <button
               key={folder.path}
               onClick={() => setTargetPath(folder.path)}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '8px 12px',
-                borderRadius: 8, border: 'none', background: 'transparent',
-                cursor: 'pointer', color: textPrimary, fontSize: 13
-              }}
+              className={`move-folder-item ${targetPath === folder.path && !customPath ? 'selected' : ''}`}
             >
-              <Folder size={16} color="#6366f1" />
+              <Folder size={16} />
               <span>{folder.name}</span>
             </button>
           ))}
         </div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button onClick={onClose} style={{ flex: 1, padding: 10, borderRadius: 8, border: `1px solid ${borderColor}`, background: 'transparent', cursor: 'pointer', fontSize: 13 }}>取消</button>
+        <div className="modal-actions">
+          <button onClick={onClose} className="btn secondary">取消</button>
           <button
-            onClick={() => onMove(targetPath)}
-            disabled={targetPath === currentPath}
-            style={{
-              flex: 1, padding: 10, borderRadius: 8, border: 'none',
-              background: targetPath === currentPath ? bgTertiary : accentBlue,
-              color: targetPath === currentPath ? textSecondary : '#fff',
-              cursor: targetPath === currentPath ? 'not-allowed' : 'pointer',
-              fontSize: 13, fontWeight: 500
-            }}
+            onClick={handleConfirm}
+            className="btn primary"
           >
             移动
           </button>
@@ -500,7 +557,7 @@ function MoveModal({ items, allFolders, currentPath, isDarkMode, onMove, onClose
   )
 }
 
-// === Main App ===
+// === 主应用 ===
 export default function App() {
   const [items, setItems] = useState([])
   const [trashItems, setTrashItems] = useState([])
@@ -523,9 +580,54 @@ export default function App() {
   const [isMoveModalOpen, setIsMoveModalOpen] = useState(false)
   const [confirmModal, setConfirmModal] = useState(null)
   const [inputModal, setInputModal] = useState(null)
+  const [inputLoading, setInputLoading] = useState(false)
   const [renameTarget, setRenameTarget] = useState(null)
   const [showWelcome, setShowWelcome] = useState(() => !localStorage.getItem('mostbox_welcomed'))
   const [showSettings, setShowSettings] = useState(false)
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+  const [previewText, setPreviewText] = useState('')
+  const [previewLoading, setPreviewLoading] = useState(false)
+  const [previewMediaLoading, setPreviewMediaLoading] = useState(false)
+  const [previewLoaded, setPreviewLoaded] = useState(false)
+  const previewMediaRef = useRef(null)
+  const previewTextRef = useRef(null)
+
+  useEffect(() => {
+    if (previewItem && (previewItem.subtype === 'image' || previewItem.subtype === 'video')) {
+      setPreviewMediaLoading(true)
+      setPreviewLoaded(false)
+    }
+    if (previewItem && previewItem.subtype === 'text') {
+      setPreviewText('')
+      loadPreviewText(previewItem.cid)
+    }
+  }, [previewItem?.cid])
+
+  useEffect(() => {
+    const media = previewMediaRef.current
+    if (!media) return
+
+    const handleLoad = () => setPreviewMediaLoading(false)
+    const handleError = () => setPreviewMediaLoading(false)
+
+    if (previewItem?.subtype === 'image') {
+      if (media.complete) {
+        setPreviewMediaLoading(false)
+      } else {
+        media.addEventListener('load', handleLoad)
+        media.addEventListener('error', handleError)
+      }
+    } else if (previewItem?.subtype === 'video') {
+      media.addEventListener('canplay', handleLoad)
+      media.addEventListener('error', handleError)
+    }
+
+    return () => {
+      media.removeEventListener('load', handleLoad)
+      media.removeEventListener('error', handleError)
+      media.removeEventListener('canplay', handleLoad)
+    }
+  }, [previewItem])
 
   const currentPath = currentFolderId || ''
   const allFolders = getUniqueFolders(items)
@@ -654,6 +756,7 @@ export default function App() {
             if (isTrash) {
               await API.permanentDeleteTrashFile(id)
             } else {
+              // 跳过文件夹 ID（以 '__' 前缀标识），只删除文件
               if (!id.startsWith('__')) await API.deletePublishedFile(id)
             }
           }
@@ -694,19 +797,30 @@ export default function App() {
       defaultValue: currentName,
       confirmText: '重命名',
       onConfirm: async (newName) => {
-        setInputModal(null)
         if (newName === currentName) return
+        setInputLoading(true)
         try {
           if (isFolder) {
-            await API.renameFolder(target.path, newName)
+            const lastSlash = target.path.lastIndexOf('/')
+            const parentPath = lastSlash !== -1 ? target.path.substring(0, lastSlash) : ''
+            const newPath = parentPath ? `${parentPath}/${newName}` : newName
+            await API.renameFolder(target.path, newPath)
+            addToast('已重命名', 'success')
+            refreshFiles()
+            handleNavigate(newPath)
           } else {
             const { folder } = parseName(target.fileName)
             const newFileName = folder ? `${folder}/${newName}` : newName
             await API.moveFile(target.cid, newFileName)
+            addToast('已重命名', 'success')
+            refreshFiles()
           }
-          addToast('已重命名', 'success')
-          refreshFiles()
-        } catch { addToast('重命名失败', 'error') }
+          setInputModal(null)
+        } catch {
+          addToast('重命名失败', 'error')
+        } finally {
+          setInputLoading(false)
+        }
       }
     })
   }
@@ -718,7 +832,14 @@ export default function App() {
     for (const file of Array.from(files)) {
       const fileName = prefix + file.name
 
-      // Create transfer entry for progress tracking
+      // 检查完整路径是否已存在
+      const nameExists = items.some(item => item.fileName === fileName)
+      if (nameExists) {
+        addToast(`${file.name} 已存在`, 'warning')
+        continue
+      }
+
+      // 创建传输条目用于进度跟踪
       const transferId = `upload_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
       const transfer = {
         id: transferId,
@@ -730,7 +851,7 @@ export default function App() {
       newTransfers.push(transfer)
       setTransfers(prev => [...prev, transfer])
 
-      // Open transfer panel if there are new transfers
+      // 有新传输时打开传输面板
       if (newTransfers.length > 0) {
         setIsTransferPanelOpen(true)
       }
@@ -738,13 +859,13 @@ export default function App() {
       try {
         const result = await API.publishFile(file, fileName)
         if (result.alreadyExists) {
-          // Update transfer status
+          // 更新传输状态
           setTransfers(prev => prev.map(t =>
             t.id === transferId ? { ...t, status: 'completed' } : t
           ))
           addToast(`${file.name} 已存在`, 'warning')
         } else {
-          // Update transfer status
+          // 更新传输状态
           setTransfers(prev => prev.map(t =>
             t.id === transferId ? { ...t, progress: 100, status: 'completed' } : t
           ))
@@ -758,39 +879,28 @@ export default function App() {
       }
     }
 
-    // Remove completed transfers after a delay
+    // 延迟移除已完成的传输
     setTimeout(() => {
-      setTransfers(prev => prev.filter(t => t.status === 'uploading'))
+      setTransfers(prev => prev.filter(t => t.status !== 'completed' && t.status !== 'error' && t.status !== 'cancelled'))
     }, 3000)
 
     refreshFiles()
     refreshStorageStats()
   }
 
-  const createNewFolder = () => {
-    setInputModal({
-      title: '新建文件夹',
-      placeholder: '请输入文件夹名称',
-      confirmText: '创建',
-      onConfirm: async (folderPath) => {
-        setInputModal(null)
-        const exists = items.some(f =>
-          f.fileName === folderPath ||
-          f.fileName.startsWith(folderPath + '/')
-        )
-        if (exists) {
-          addToast('文件夹已存在', 'warning')
-          return
-        }
-        try {
-          const randomContent = Math.random().toString(36).substring(2, 10)
-          const content = new File([randomContent], 'hello.txt', { type: 'text/plain' })
-          await API.publishFile(content, `${folderPath}/hello.txt`)
-          addToast('文件夹已创建', 'success')
-          refreshFiles()
-        } catch { addToast('创建失败', 'error') }
-      }
-    })
+  const loadPreviewText = async (cid) => {
+    setPreviewLoading(true)
+    try {
+      const res = await fetch(`/api/files/${cid}/download`, {
+        headers: { 'Range': 'bytes=0-9999' }
+      })
+      if (!res.ok) throw new Error('加载失败')
+      const text = await res.text()
+      setPreviewText(text || '（文件为空）')
+    } catch {
+      setPreviewText('加载失败')
+    }
+    setPreviewLoading(false)
   }
 
   const handleCopyLink = () => {
@@ -813,7 +923,7 @@ export default function App() {
       const result = await API.downloadFile(downloadLink)
       setDownloadLink('')
       setIsDownloadModalOpen(false)
-      
+
       if (result.alreadyExists) {
         addToast(`${result.fileName} 已存在`, 'warning')
       } else {
@@ -822,7 +932,7 @@ export default function App() {
           fileName: '下载文件',
           progress: 0,
           type: 'download',
-          status: 'uploading'
+          status: 'downloading'
         }
         setTransfers(prev => [...prev, transfer])
         setIsTransferPanelOpen(true)
@@ -834,18 +944,49 @@ export default function App() {
       setIsDownloading(false)
     }
   }
-  
+
   const handleCancelTransfer = async (transfer) => {
-    if (transfer.type === 'download' && transfer.status === 'uploading') {
+    if (transfer.type === 'download' && transfer.status === 'downloading') {
       try {
         await API.cancelDownload(transfer.id)
-        // The WebSocket will handle the 'download:cancelled' event
+        // WebSocket 会处理 'download:cancelled' 事件
       } catch (err) {
         addToast('取消失败', 'error')
       }
     }
   }
 
+  const handleSaveAs = async (file) => {
+    try {
+      const res = await fetch(API.getFileDownloadUrl(file.cid))
+      if (!res.ok) throw new Error('获取文件失败')
+      const blob = await res.blob()
+      if (window.showSaveFilePicker) {
+        const handle = await window.showSaveFilePicker({
+          suggestedName: file.fileName
+        })
+        const writable = await handle.createWritable()
+        await writable.write(blob)
+        await writable.close()
+        addToast('文件已保存', 'success')
+      } else {
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = file.fileName
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        addToast('文件已下载', 'success')
+      }
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        addToast('保存失败: ' + err.message, 'error')
+      }
+    }
+  }
+
   const handleNavigate = (path) => {
     setCurrentFolderId(path || null)
     setSelectedIds([])
@@ -872,7 +1013,7 @@ export default function App() {
     })
   }
 
-  // WebSocket
+  // WebSocket 连接
   useEffect(() => {
     const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
     const ws = new WebSocket(`${protocol}//${location.host}/ws`)
@@ -892,17 +1033,17 @@ export default function App() {
             } else {
               addToast(`${data.fileName} 下载完成`, 'success')
             }
-            // Remove completed downloads after delay
+            // 延迟移除已完成的下载
             setTimeout(() => {
               setTransfers(prev => prev.filter(t => !(t.id === taskId && t.status === 'completed')))
             }, 3000)
           }
         }
-        // Handle publish/upload progress
+        // 处理发布/上传进度
         if (event === 'publish:progress') {
           setTransfers(prev => prev.map(t => {
             if (data.file && t.fileName === data.file && t.type === 'upload') {
-              // Calculate percent based on stage
+              // 根据阶段计算百分比
               let progress = 50
               if (data.stage === 'calculating-cid') progress = 25
               else if (data.stage === 'uploading') progress = 75
@@ -912,26 +1053,26 @@ export default function App() {
             return t
           }))
         }
-        // Handle download progress
+        // 处理下载进度
         if (event === 'download:progress') {
           setTransfers(prev => prev.map(t =>
             t.id === data.taskId ? { ...t, progress: data.percent || 0, loaded: data.loaded, total: data.total } : t
           ))
         }
-        // Handle download error
+        // 处理下载错误
         if (event === 'download:error') {
           setTransfers(prev => prev.map(t =>
             t.id === data.taskId ? { ...t, status: 'error' } : t
           ))
           addToast(`下载失败: ${data.error}`, 'error')
         }
-        // Handle download status (includes filename when known)
+        // 处理下载状态（包含文件名）
         if (event === 'download:status') {
           setTransfers(prev => prev.map(t =>
             t.id === data.taskId ? { ...t, fileName: data.file || t.fileName } : t
           ))
         }
-        // Handle download cancelled
+        // 处理下载取消
         if (event === 'download:cancelled') {
           setTransfers(prev => prev.map(t =>
             t.id === data.taskId ? { ...t, status: 'cancelled' } : t
@@ -943,7 +1084,7 @@ export default function App() {
     return () => ws.close()
   }, [])
 
-  // Init
+  // 初始化
   useEffect(() => {
     const saved = localStorage.getItem('theme')
     if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
@@ -955,182 +1096,171 @@ export default function App() {
     API.getStorageStats().then(s => setStorageStats(s)).catch(() => { })
   }, [])
 
-  // Theme colors
-  const bgPrimary = isDarkMode ? '#0f172a' : '#f8fafc'
-  const bgSecondary = isDarkMode ? '#1e293b' : '#ffffff'
-  const bgTertiary = isDarkMode ? '#334155' : '#f1f5f9'
-  const textPrimary = isDarkMode ? '#f8fafc' : '#0f172a'
-  const textSecondary = isDarkMode ? '#94a3b8' : '#64748b'
-  const textMuted = isDarkMode ? '#64748b' : '#94a3b8'
-  const borderColor = isDarkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'
-  const accentBlue = isDarkMode ? '#60a5fa' : '#3b82f6'
+  // 同步 data-theme 属性
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light')
+  }, [isDarkMode])
 
+  // 主题颜色
   const viewTitle = currentView === 'all' ? '全部内容' : currentView === 'starred' ? '收藏' : '回收站'
-  const displayFiles = currentView === 'all' ? filteredFiles : currentView === 'starred' ? items.filter(i => i.starred) : []
-  const displayFolders = currentView === 'starred' ? [] : folders
-
-  // Breadcrumb parts
+  const displayFiles = currentView === 'all'
+    ? filteredFiles
+    : currentView === 'starred'
+      ? items.filter(i => i.starred && parseName(i.fileName).name.toLowerCase().includes(searchQuery.toLowerCase()))
+      : trashItems.filter(i => parseName(i.fileName).name.toLowerCase().includes(searchQuery.toLowerCase()))
+  const displayFolders = currentView === 'starred'
+    ? []
+    : folders.filter(f => f.name.toLowerCase().includes(searchQuery.toLowerCase()))
+
+  // 面包屑部分
   const breadcrumbParts = generateBreadcrumbs(currentPath)
 
   return (
-    <div style={{ display: 'flex', minHeight: '100vh', background: bgPrimary, color: textPrimary }}>
-      <style>{`
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-thumb { background: ${textMuted}; border-radius: 4px; }
-        @keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-      `}</style>
-
-      {/* Sidebar */}
-      <div style={{ width: 200, background: bgTertiary, display: 'flex', flexDirection: 'column', borderRight: `1px solid ${borderColor}`, flexShrink: 0 }}>
-        <div style={{ padding: '20px 16px', borderBottom: `1px solid ${borderColor}` }}>
-          <h1 style={{ fontSize: 18, fontWeight: 700, color: accentBlue }}>Most.Box</h1>
+    <div className="app-layout">
+      {/* 侧边栏遮罩 */}
+      <div className={`sidebar-overlay ${isSidebarOpen ? 'visible' : ''}`} onClick={() => setIsSidebarOpen(false)} />
+
+      {/* 侧边栏 */}
+      <div className={`sidebar ${isSidebarOpen ? 'open' : ''}`}>
+        <div className="sidebar-header">
+          <h1>Most.Box</h1>
         </div>
-        <nav style={{ padding: '12px 8px', flex: 1 }}>
+        <nav className="sidebar-nav">
           {[{ id: 'all', icon: <Files size={18} />, label: '全部内容' }, { id: 'starred', icon: <Star size={18} />, label: '收藏' }, { id: 'trash', icon: <Trash2 size={18} />, label: '回收站' }].map(item => (
             <button
               key={item.id}
-              onClick={() => { setCurrentView(item.id); setCurrentFolderId(null); setSelectedIds([]); setSearchQuery('') }}
-              style={{
-                width: '100%', display: 'flex', alignItems: 'center', gap: 10,
-                padding: '10px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
-                marginBottom: 4, background: currentView === item.id ? accentBlue + '20' : 'transparent',
-                color: currentView === item.id ? accentBlue : textSecondary,
-                fontWeight: currentView === item.id ? 600 : 500, fontSize: 13
-              }}
+              onClick={() => { setCurrentView(item.id); setCurrentFolderId(null); setSelectedIds([]); setSearchQuery(''); setIsSidebarOpen(false) }}
+              className={`sidebar-nav-btn ${currentView === item.id ? 'active' : ''}`}
             >
               {item.icon}
               <span>{item.label}</span>
             </button>
           ))}
         </nav>
-        <div style={{ padding: '12px 16px', borderTop: `1px solid ${borderColor}` }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
-            <HardDrive size={14} color={textSecondary} />
-            <span style={{ fontSize: 11, color: textSecondary }}>存储空间</span>
+        <div className="sidebar-footer">
+          <div className="sidebar-footer-label">
+            <HardDrive size={14} />
+            <span>存储空间</span>
           </div>
-          <div style={{ height: 4, borderRadius: 2, background: bgSecondary, overflow: 'hidden' }}>
-            <div style={{ width: `${storageStats.total > 0 ? (storageStats.used / storageStats.total) * 100 : 0}%`, height: '100%', background: accentBlue, transition: 'width 0.3s' }} />
+          <div className="storage-bar">
+            <div className="storage-bar-fill" style={{ width: `${storageStats.total > 0 ? (storageStats.used / storageStats.total) * 100 : 0}%` }} />
           </div>
-          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: textSecondary, marginTop: 4 }}>
+          <div className="storage-info">
             <span>{formatSize(storageStats.used)}</span>
             <span>{storageStats.total > 0 ? formatSize(storageStats.total) : '-'}</span>
           </div>
         </div>
       </div>
 
-      {/* Main Content */}
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
-        {/* Header */}
-        <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 24px', borderBottom: `1px solid ${borderColor}`, background: bgSecondary, gap: 16 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <h2 style={{ fontSize: 16, fontWeight: 600 }}>{viewTitle}</h2>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 12, background: bgTertiary, fontSize: 11, color: textSecondary }}>
-              <div style={{ width: 6, height: 6, borderRadius: '50%', background: peerCount > 0 ? '#22c55e' : '#f59e0b' }} />
+      {/* 主内容区 */}
+      <div className="main-content">
+        {/* 头部 */}
+        <header className="app-header">
+          <div className="header-left">
+            <button onClick={() => setIsSidebarOpen(true)} className="icon-btn mobile-menu-btn">
+              <Menu size={18} />
+            </button>
+            <h2 className="header-title">{viewTitle}</h2>
+            <div className="header-badge">
+              <div className={`header-badge-dot ${peerCount > 0 ? 'connected' : ''}`} />
               {peerCount > 0 ? `${peerCount} 节点` : '等待连接'}
             </div>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            {currentView !== 'trash' && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 8, background: bgTertiary, border: `1px solid ${borderColor}` }}>
-                <Search size={14} color={textSecondary} />
-                <input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="搜索..." style={{ background: 'none', border: 'none', outline: 'none', fontSize: 12, color: textPrimary, width: 120 }} />
-                {searchQuery && <button onClick={() => setSearchQuery('')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: textSecondary, padding: 0 }}><X size={12} /></button>}
-              </div>
-            )}
+          <div className="header-right">
+            <div className="search-box">
+              <Search size={14} />
+              <input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="搜索..." />
+              {searchQuery && <button onClick={() => setSearchQuery('')}><X size={12} /></button>}
+            </div>
             {currentView === 'trash' && trashItems.length > 0 && (
-              <button onClick={handleEmptyTrash} style={{ padding: '6px 12px', borderRadius: 8, border: 'none', background: 'rgba(239,68,68,0.1)', color: '#ef4444', fontSize: 12, fontWeight: 500, cursor: 'pointer' }}>
+              <button onClick={handleEmptyTrash} className="btn small" style={{ background: 'rgba(239,68,68,0.1)', color: '#ef4444' }}>
                 清空回收站
               </button>
             )}
-            <button onClick={() => setIsTransferPanelOpen(true)} style={{ width: 32, height: 32, borderRadius: 8, border: 'none', background: bgTertiary, cursor: 'pointer', color: textSecondary, position: 'relative' }}>
+            <button onClick={() => setIsTransferPanelOpen(true)} className="icon-btn">
               <ArrowUpDown size={16} />
-              {transfers.length > 0 && <span style={{ position: 'absolute', top: -4, right: -4, width: 14, height: 14, borderRadius: '50%', background: '#ef4444', color: '#fff', fontSize: 9, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{transfers.length}</span>}
-            </button>
-            <button onClick={createNewFolder} style={{ width: 32, height: 32, borderRadius: 8, border: 'none', background: bgTertiary, cursor: 'pointer', color: accentBlue }}>
-              <FolderPlus size={16} />
+              {transfers.length > 0 && <span className="icon-btn-badge">{transfers.length}</span>}
             </button>
-            <button onClick={() => setIsDarkMode(!isDarkMode)} style={{ width: 32, height: 32, borderRadius: 8, border: 'none', background: bgTertiary, cursor: 'pointer', color: '#6366f1' }}>
+            <button onClick={() => setIsDarkMode(!isDarkMode)} className="icon-btn theme-toggle">
               {isDarkMode ? <Sun size={16} /> : <Moon size={16} />}
             </button>
-            <button onClick={handleShutdown} title="关闭服务" style={{ width: 32, height: 32, borderRadius: 8, border: 'none', background: bgTertiary, cursor: 'pointer', color: '#ef4444' }}>
-              <Power size={16} />
-            </button>
-            <button onClick={() => setShowSettings(true)} style={{ width: 32, height: 32, borderRadius: 8, border: 'none', background: bgTertiary, cursor: 'pointer', color: textSecondary }}>
+            <button onClick={() => setShowSettings(true)} className="icon-btn">
               <Info size={16} />
             </button>
           </div>
         </header>
 
-        {/* Upload/Download */}
+        {/* 上传/下载 */}
         {currentView === 'all' && (
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, padding: '16px 24px', position: 'relative' }}>
-            <div onDragOver={(e) => { e.preventDefault(); setIsDraggingOverUpload(true) }} onDragLeave={() => setIsDraggingOverUpload(false)} onDrop={(e) => { e.preventDefault(); setIsDraggingOverUpload(false); processFiles(e.dataTransfer.files) }} style={{ border: `2px dashed ${isDraggingOverUpload ? '#3b82f6' : 'rgba(59,130,246,0.2)'}`, borderRadius: 12, padding: 20, textAlign: 'center', cursor: 'pointer', background: isDraggingOverUpload ? 'rgba(59,130,246,0.05)' : 'transparent', position: 'relative' }}>
-              <input type="file" multiple onChange={(e) => processFiles(e.target.files)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, cursor: 'pointer', zIndex: 1 }} />
-              <Upload size={20} color={accentBlue} style={{ marginBottom: 8 }} />
-              <p style={{ fontSize: 12, color: accentBlue, fontWeight: 500 }}>上传文件</p>
+          <div className="action-grid">
+            <div className={`action-card upload ${isDraggingOverUpload ? 'drag-over' : ''}`} onDragOver={(e) => { e.preventDefault(); setIsDraggingOverUpload(true) }} onDragLeave={() => setIsDraggingOverUpload(false)} onDrop={(e) => { e.preventDefault(); setIsDraggingOverUpload(false); processFiles(e.dataTransfer.files) }}>
+              <input type="file" multiple onChange={(e) => processFiles(e.target.files)} className="action-card-input" />
+              <Upload size={20} style={{ marginBottom: 8 }} />
+              <p>上传文件</p>
             </div>
-            <div onClick={() => setIsDownloadModalOpen(true)} style={{ border: '2px dashed rgba(99,102,241,0.2)', borderRadius: 12, padding: 20, textAlign: 'center', cursor: 'pointer' }}>
-              <Download size={20} color="#6366f1" style={{ marginBottom: 8 }} />
-              <p style={{ fontSize: 12, color: '#6366f1', fontWeight: 500 }}>下载文件</p>
+            <div className="action-card action-card-download" onClick={() => setIsDownloadModalOpen(true)}>
+              <Download size={20} style={{ marginBottom: 8 }} />
+              <p>下载文件</p>
             </div>
           </div>
         )}
 
-        {/* Breadcrumb */}
-        {currentView === 'all' && currentPath && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '0 24px 12px', fontSize: 12 }}>
-            <button onClick={() => handleNavigate('')} style={{ background: 'none', border: 'none', color: textMuted, cursor: 'pointer' }}>全部内容</button>
-            {breadcrumbParts.slice(1).map((part, i) => (
-              <React.Fragment key={part.path}>
-                <ChevronRight size={12} color={textMuted} />
-                <button onClick={() => handleNavigate(part.path)} style={{ background: 'none', border: 'none', color: i === breadcrumbParts.length - 2 ? textSecondary : textMuted, cursor: 'pointer' }}>{part.name}</button>
-              </React.Fragment>
-            ))}
+        {/* 面包屑 */}
+        {currentView === 'all' && (
+          <div className="breadcrumb">
+            {currentPath ? (
+              <>
+                <button onClick={() => handleNavigate('')}>全部内容</button>
+                {breadcrumbParts.slice(1).map((part, i) => (
+                  <React.Fragment key={part.path}>
+                    <ChevronRight size={12} />
+                    <button onClick={() => handleNavigate(part.path)} className={i === breadcrumbParts.length - 2 ? 'current' : ''}>{part.name}</button>
+                    {i === breadcrumbParts.length - 2 && (
+                      <button onClick={() => openRenameModal(part)} className="breadcrumb-edit-btn">
+                        <Edit2 size={12} />
+                      </button>
+                    )}
+                  </React.Fragment>
+                ))}
+              </>
+            ) : null}
           </div>
         )}
 
-        {/* Content Grid */}
-        <div style={{ flex: 1, padding: '0 24px 24px', overflow: 'auto' }}>
-          {/* Trash View */}
+        {/* 内容网格 */}
+        <div className="content-grid">
+          {/* 回收站视图 */}
           {currentView === 'trash' && (
-            trashItems.length === 0 ? (
-              <div style={{ textAlign: 'center', color: textMuted, padding: 48, fontSize: 13 }}>回收站是空的</div>
+            displayFiles.length === 0 ? (
+              <div className="empty-state">{searchQuery ? '未找到相关文件' : '回收站是空的'}</div>
             ) : (
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 16 }}>
-                {trashItems.map(f => (
+              <div className="file-grid">
+                {displayFiles.map(f => (
                   <div
                     key={f.cid}
                     onClick={() => setSelectedIds(prev => prev.includes(f.cid) ? prev.filter(id => id !== f.cid) : [...prev, f.cid])}
                     onDoubleClick={() => handleRestore(f.cid)}
-                    style={{
-                      display: 'flex', flexDirection: 'column', alignItems: 'center',
-                      padding: 16, borderRadius: 12,
-                      background: selectedIds.includes(f.cid) ? accentBlue + '15' : bgSecondary,
-                      border: `1px solid ${selectedIds.includes(f.cid) ? accentBlue : borderColor}`,
-                      transition: 'all 0.15s', cursor: 'pointer'
-                    }}
+                    className={`card ${selectedIds.includes(f.cid) ? 'selected' : ''}`}
                   >
-                    <div style={{ ...iconContainerStyle, background: 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)' }}>
+                    <div className="card-icon trash">
                       <FileText size={24} color="#fff" />
                     </div>
-                    <p style={textEllipsisStyle}>{parseName(f.fileName).name}</p>
-                    <p style={{ fontSize: 10, color: textMuted, marginTop: 2 }}>删除于 {formatDate(f.deletedAt)}</p>
+                    <p className="card-name">{parseName(f.fileName).name}</p>
+                    <p className="card-date">删除于 {formatDate(f.deletedAt)}</p>
                   </div>
                 ))}
               </div>
             )
           )}
 
-          {/* All/Starred View */}
+          {/* 全部/收藏视图 */}
           {currentView !== 'trash' && (
             displayFiles.length === 0 && displayFolders.length === 0 ? (
-              <div style={{ textAlign: 'center', color: textMuted, padding: 48, fontSize: 13 }}>
+              <div className="empty-state">
                 {searchQuery ? '未找到相关文件' : (currentView === 'starred' ? '暂无收藏' : '暂无文件')}
               </div>
             ) : (
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 16 }}>
+              <div className="file-grid">
                 {displayFolders.map(folder => (
                   <FolderCard key={folder.path} folder={folder} isDarkMode={isDarkMode} onClick={() => handleNavigate(folder.path)} />
                 ))}
@@ -1145,30 +1275,35 @@ export default function App() {
 
 
 
-      {/* Confirm Modal */}
+      {/* 确认弹窗 */}
       {confirmModal && (
         <ConfirmModal
           title={confirmModal.title}
           message={confirmModal.message}
           confirmText={confirmModal.confirmText}
           danger={confirmModal.danger}
+          isDarkMode={isDarkMode}
+          closeOnOverlayClick={confirmModal.danger}
           onConfirm={confirmModal.onConfirm}
           onClose={() => setConfirmModal(null)}
         />
       )}
 
-      {/* Input Modal */}
+      {/* 输入弹窗 */}
       {inputModal && (
         <InputModal
           title={inputModal.title}
           placeholder={inputModal.placeholder}
+          defaultValue={inputModal.defaultValue}
           confirmText={inputModal.confirmText}
+          isDarkMode={isDarkMode}
+          isLoading={inputLoading}
           onConfirm={inputModal.onConfirm}
           onClose={() => setInputModal(null)}
         />
       )}
 
-      {/* Move Modal */}
+      {/* 移动弹窗 */}
       {isMoveModalOpen && (
         <MoveModal
           items={selectedIds.map(id => items.find(i => i.cid === id)).filter(Boolean)}
@@ -1180,17 +1315,17 @@ export default function App() {
         />
       )}
 
-      {/* Share Modal */}
+      {/* 分享弹窗 */}
       {shareItem && (
         <ModalOverlay onClose={() => setShareItem(null)}>
-          <div style={{ width: 420, padding: 24, borderRadius: 16, background: bgSecondary, border: `1px solid ${borderColor}` }} onClick={e => e.stopPropagation()}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-              <h3 style={{ fontSize: 16, fontWeight: 600 }}>分享链接</h3>
-              <button onClick={() => setShareItem(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: textMuted }}><X size={18} /></button>
+          <div className="share-modal" onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>分享链接</h3>
+              <button onClick={() => setShareItem(null)} className="modal-close-btn"><X size={18} /></button>
             </div>
-            <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
-              <div style={{ flex: 1, padding: '12px 14px', borderRadius: 10, background: bgTertiary, fontSize: 13, fontFamily: 'monospace', color: textPrimary, wordBreak: 'break-all' }}>most://{shareItem.cid}</div>
-              <button onClick={handleCopyLink} style={{ width: 44, borderRadius: 10, border: 'none', background: copied ? '#22c55e' : accentBlue, color: '#fff', cursor: 'pointer' }}>
+            <div className="share-link-box">
+              <div className="share-link-text">most://{shareItem.cid}</div>
+              <button onClick={handleCopyLink} className={`share-copy-btn ${copied ? 'copied' : ''}`}>
                 {copied ? <Check size={18} /> : <Copy size={18} />}
               </button>
             </div>
@@ -1198,51 +1333,113 @@ export default function App() {
         </ModalOverlay>
       )}
 
-      {/* Download Modal */}
+      {/* 下载弹窗 */}
       {isDownloadModalOpen && (
         <ModalOverlay onClose={() => setIsDownloadModalOpen(false)}>
-          <div style={{ width: 400, padding: 24, borderRadius: 16, background: bgSecondary, border: `1px solid ${borderColor}` }} onClick={e => e.stopPropagation()}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-              <h3 style={{ fontSize: 16, fontWeight: 600 }}>下载文件</h3>
-              <button onClick={() => setIsDownloadModalOpen(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: textMuted }}><X size={18} /></button>
+          <div className="download-modal" onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>下载文件</h3>
+              <button onClick={() => setIsDownloadModalOpen(false)} className="modal-close-btn"><X size={18} /></button>
             </div>
-            <input type="text" value={downloadLink} onChange={(e) => setDownloadLink(e.target.value)} placeholder="most://..." onKeyDown={(e) => e.key === 'Enter' && handleDownloadSharedFile()} style={{ width: '100%', padding: '12px 14px', borderRadius: 10, border: `1.5px solid ${borderColor}`, fontSize: 13, fontFamily: 'monospace', outline: 'none', background: bgTertiary, color: textPrimary, marginBottom: 16 }} />
-            <button onClick={handleDownloadSharedFile} disabled={!downloadLink.trim() || isDownloading} style={{ width: '100%', padding: 12, borderRadius: 10, border: 'none', background: (downloadLink.trim() && !isDownloading) ? '#6366f1' : bgTertiary, color: (downloadLink.trim() && !isDownloading) ? '#fff' : textMuted, fontSize: 13, fontWeight: 600, cursor: (downloadLink.trim() && !isDownloading) ? 'pointer' : 'not-allowed' }}>
+            <input type="text" value={downloadLink} onChange={(e) => setDownloadLink(e.target.value)} placeholder="most://..." onKeyDown={(e) => e.key === 'Enter' && handleDownloadSharedFile()} className="download-input" />
+            <button onClick={handleDownloadSharedFile} disabled={!downloadLink.trim() || isDownloading} className="download-btn">
               {isDownloading ? '下载中...' : '开始下载'}
             </button>
           </div>
         </ModalOverlay>
       )}
 
-      {/* Preview Modal */}
+      {/* 预览弹窗 */}
       {previewItem && (
-        <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.9)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={() => setPreviewItem(null)}>
-          <button onClick={() => setPreviewItem(null)} style={{ position: 'absolute', top: 20, right: 20, width: 36, height: 36, borderRadius: 10, border: 'none', background: 'rgba(255,255,255,0.1)', cursor: 'pointer', color: '#fff' }}><X size={20} /></button>
+        <div className="preview-overlay" onClick={() => { setPreviewItem(null); setPreviewText(''); setPreviewMediaLoading(false) }}>
+          <button className="preview-close"><X size={20} /></button>
           <div onClick={e => e.stopPropagation()}>
-            {previewItem.subtype === 'image' && <img src={API.getFileDownloadUrl(previewItem.cid)} alt="" style={{ maxWidth: '100%', maxHeight: '80vh', borderRadius: 12 }} />}
-            {previewItem.subtype === 'video' && <video src={API.getFileDownloadUrl(previewItem.cid)} controls style={{ maxWidth: '100%', maxHeight: '80vh', borderRadius: 12 }} />}
-            {previewItem.subtype === 'audio' && <div style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 16, padding: 32 }}><Music size={48} color="#fff" style={{ marginBottom: 12 }} /><audio src={API.getFileDownloadUrl(previewItem.cid)} controls /></div>}
+            {previewItem.subtype === 'image' && (
+              <div className="preview-media-wrapper">
+                <img ref={previewMediaRef} src={API.getFileDownloadUrl(previewItem.cid)} alt="" />
+              </div>
+            )}
+            {previewItem.subtype === 'video' && (
+              <div className="preview-media-wrapper">
+                <video ref={previewMediaRef} src={API.getFileDownloadUrl(previewItem.cid)} controls />
+              </div>
+            )}
+            {previewItem.subtype === 'audio' && (
+              <div className="preview-audio">
+                <div className="preview-audio-icon">
+                  <Music size={36} color="var(--accent-blue)" />
+                </div>
+                <p className="preview-audio-filename">{previewItem.fileName}</p>
+                <audio className="preview-audio-player" src={API.getFileDownloadUrl(previewItem.cid)} controls />
+              </div>
+            )}
+            {previewItem.subtype === 'file' && (
+              <div className="preview-unsupported">
+                <FileText size={48} color="#fff" style={{ marginBottom: 12, opacity: 0.5 }} />
+                <p>{previewItem.fileName}</p>
+                <p style={{ fontSize: 12, marginTop: 8, opacity: 0.7 }}>无法预览</p>
+              </div>
+            )}
+            {previewItem.subtype === 'text' && (
+              <div className="preview-text-container">
+                <div className="preview-text-header">
+                  <span>{previewItem.fileName}</span>
+                </div>
+                {previewLoading ? (
+                  <div className="preview-text-loading">
+                    <Loader size={24} className="preview-text-spinner" />
+                    <p>正在加载文本预览...</p>
+                    <p className="preview-text-loading-hint">如果是首次预览，可能需要等待 P2P 网络同步</p>
+                  </div>
+                ) : (
+                  <pre className="preview-text">{previewText || '（文件为空）'}</pre>
+                )}
+              </div>
+            )}
           </div>
         </div>
       )}
 
-      {/* Batch Actions Bar */}
+      {/* 批量操作栏 */}
       {selectedIds.length > 0 && (
-        <div style={{ position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', display: 'flex', alignItems: 'center', gap: 8, padding: '10px 16px', borderRadius: 12, background: bgSecondary, boxShadow: '0 4px 20px rgba(0,0,0,0.15)', border: `1px solid ${borderColor}`, zIndex: 100 }}>
-          <span style={{ fontSize: 12, color: textSecondary }}>已选 {selectedIds.length} 项</span>
-          <button onClick={() => setSelectedIds([])} style={{ background: 'none', border: 'none', cursor: 'pointer', color: textMuted, padding: 4 }}><X size={16} /></button>
-          <div style={{ width: 1, height: 20, background: borderColor }} />
+        <div className="batch-bar">
+          <span className="batch-info">已选 {selectedIds.length} 项</span>
+          <button onClick={() => setSelectedIds([])} className="batch-dismiss"><X size={16} /></button>
+          <div className="batch-divider" />
           {currentView === 'trash' ? (
             <>
-              <button onClick={() => selectedIds.forEach(cid => handleRestore(cid))} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 8, border: 'none', fontSize: 12, cursor: 'pointer' }}>
+              <button onClick={async () => {
+                await Promise.all(selectedIds.map(cid => API.restoreTrashFile(cid)))
+                setSelectedIds([])
+                addToast('已恢复', 'success')
+                refreshFiles()
+                refreshTrash()
+                refreshStorageStats()
+              }} className="btn small">
                 恢复
               </button>
-              <button onClick={handleBatchDelete} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 8, border: 'none', background: '#ef4444', color: '#fff', fontSize: 12, cursor: 'pointer' }}>
+              <button onClick={handleBatchDelete} className="btn small danger">
                 永久删除
               </button>
             </>
           ) : (
             <>
+              {selectedIds.length === 1 && (() => {
+                const file = items.find(i => i.cid === selectedIds[0])
+                return file && getFileSubtype(file.fileName) !== 'file'
+              })() && (
+                <button onClick={() => {
+                  const file = items.find(i => i.cid === selectedIds[0])
+                  if (file) {
+                    const subtype = getFileSubtype(file.fileName)
+                    setPreviewItem({ ...file, subtype })
+                    setPreviewText('')
+                    if (subtype === 'text') loadPreviewText(file.cid)
+                  }
+                }} className="btn small">
+                  预览
+                </button>
+              )}
               <button onClick={() => {
                 const hasUnstarred = selectedIds.some(id => {
                   const item = items.find(i => i.cid === id)
@@ -1254,65 +1451,72 @@ export default function App() {
                     handleToggleStar(id)
                   }
                 })
-              }} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 8, border: 'none', background: '#f59e0b', color: '#fff', fontSize: 12, cursor: 'pointer' }}>
+              }} className="btn small" style={{ background: '#f59e0b', color: '#fff' }}>
                 收藏
               </button>
-              <button onClick={() => {
-                const firstSelected = items.find(i => i.cid === selectedIds[0])
-                if (firstSelected) openRenameModal(firstSelected)
-              }} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 8, border: 'none', background: bgTertiary, color: textPrimary, fontSize: 12, cursor: 'pointer' }}>
-                重命名
-              </button>
-              <button onClick={() => setIsMoveModalOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 8, border: 'none', background: accentBlue, color: '#fff', fontSize: 12, cursor: 'pointer' }}>
+              {selectedIds.length === 1 && (
+                <button onClick={() => {
+                  const firstSelected = items.find(i => i.cid === selectedIds[0])
+                  if (firstSelected) openRenameModal(firstSelected)
+                }} className="btn small">
+                  重命名
+                </button>
+              )}
+              <button onClick={() => setIsMoveModalOpen(true)} className="btn small" style={{ background: 'var(--accent-blue)', color: '#fff' }}>
                 移动
               </button>
-              <button onClick={handleBatchDelete} style={{ padding: '6px 12px', borderRadius: 8, border: 'none', background: '#ef4444', color: '#fff', fontSize: 12, cursor: 'pointer' }}>删除</button>
-              <button onClick={() => setShareItem(items.find(i => i.cid === selectedIds[0]))} style={{ padding: '6px 12px', borderRadius: 8, border: 'none', background: bgTertiary, color: textPrimary, fontSize: 12, cursor: 'pointer' }}>分享</button>
+              <button onClick={handleBatchDelete} className="btn small danger">删除</button>
+              {selectedIds.length === 1 && (
+                <button onClick={() => setShareItem(items.find(i => i.cid === selectedIds[0]))} className="btn small">分享</button>
+              )}
+              {selectedIds.length === 1 && (
+                <button onClick={() => {
+                  const file = items.find(i => i.cid === selectedIds[0])
+                  if (file) handleSaveAs(file)
+                }} className="btn small">另存为</button>
+              )}
             </>
           )}
         </div>
       )}
 
-      {/* Transfer Panel */}
+      {/* 传输面板 */}
       {isTransferPanelOpen && (
-        <ModalOverlay onClose={() => setIsTransferPanelOpen(false)}>
-          <div style={{ width: 380, maxHeight: '70vh', padding: 24, borderRadius: 16, background: bgSecondary, border: `1px solid ${borderColor}`, overflow: 'auto' }} onClick={e => e.stopPropagation()}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-              <h3 style={{ fontSize: 16, fontWeight: 600 }}>传输</h3>
-              <button onClick={() => setIsTransferPanelOpen(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: textMuted }}><X size={18} /></button>
+        <ModalOverlay onClose={() => setIsTransferPanelOpen(false)} closeOnOverlayClick={true}>
+          <div className="transfer-modal" onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>传输</h3>
+              <button onClick={() => setIsTransferPanelOpen(false)} className="modal-close-btn"><X size={18} /></button>
             </div>
             {transfers.length === 0 ? (
-              <div style={{ textAlign: 'center', color: textMuted, padding: 24, fontSize: 13 }}>
+              <div style={{ textAlign: 'center', color: 'var(--text-muted)', padding: 24, fontSize: 13 }}>
                 暂无传输
               </div>
             ) : (
               transfers.map(t => (
-                <div key={t.id} style={{ padding: '10px 0', borderBottom: `1px solid ${borderColor}` }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-                    {t.type === 'upload' ? <Upload size={14} color={accentBlue} /> : <Download size={14} color="#6366f1" />}
-                    <span style={{ fontSize: 12, fontWeight: 500, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.fileName}</span>
-                    {t.status === 'uploading' && t.type === 'download' && (
-                      <button onClick={() => handleCancelTransfer(t)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#ef4444', padding: 2 }}>
+                <div key={t.id} className="transfer-item">
+                  <div className="transfer-item-header">
+                    {t.type === 'upload' ? <Upload size={14} /> : <Download size={14} />}
+                    <span className="transfer-item-name">{t.fileName}</span>
+                    {t.status === 'downloading' && t.type === 'download' && (
+                      <button onClick={() => handleCancelTransfer(t)} className="transfer-item-cancel">
                         <X size={14} />
                       </button>
                     )}
                   </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <div style={{ flex: 1, height: 4, borderRadius: 2, background: bgTertiary }}>
-                      <div style={{ 
-                        width: `${t.progress}%`, 
-                        height: '100%', 
-                        borderRadius: 2, 
-                        background: t.status === 'error' ? '#ef4444' : t.status === 'cancelled' ? '#f59e0b' : t.type === 'upload' ? accentBlue : '#6366f1',
-                        transition: 'width 0.2s'
-                      }} />
+                  <div className="transfer-progress-row">
+                    <div className="transfer-progress-bar">
+                      <div
+                        className={`transfer-progress-fill ${t.type === 'download' ? 'download' : ''} ${t.status === 'error' ? 'error' : ''} ${t.status === 'cancelled' ? 'cancelled' : ''}`}
+                        style={{ width: `${t.progress}%` }}
+                      />
                     </div>
-                    <span style={{ fontSize: 10, color: textMuted, minWidth: 32, textAlign: 'right' }}>
-                      {t.status === 'completed' ? '完成' : 
-                       t.status === 'error' ? '失败' : 
-                       t.status === 'cancelled' ? '已取消' : 
-                       t.loaded && t.total ? `${formatSize(t.loaded)}/${formatSize(t.total)}` : 
-                       `${t.progress}%`}
+                    <span className="transfer-progress-text">
+                      {t.status === 'completed' ? '完成' :
+                        t.status === 'error' ? '失败' :
+                          t.status === 'cancelled' ? '已取消' :
+                            t.loaded && t.total ? `${formatSize(t.loaded)}/${formatSize(t.total)}` :
+                              `${t.progress}%`}
                     </span>
                   </div>
                 </div>
@@ -1322,14 +1526,18 @@ export default function App() {
         </ModalOverlay>
       )}
 
-      {/* Toasts */}
+      {/* 通知列表 */}
       {toasts.map((t, i) => <Toast key={t.id} message={t.message} type={t.type} onDone={() => removeToast(t.id)} index={i} />)}
 
-      {/* Welcome Guide */}
-      {showWelcome && <WelcomeGuide onClose={handleCloseWelcome} />}
+      {/* 引导页 */}
+      {showWelcome && <WelcomeGuide onClose={handleCloseWelcome} onShutdown={() => {
+        fetch('/api/shutdown', { method: 'POST' })
+        addToast('服务已关闭，请重新启动应用', 'info')
+        handleCloseWelcome()
+      }} />}
 
-      {/* Settings Modal */}
-      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} addToast={addToast} />}
+      {/* 设置弹窗 */}
+      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} addToast={addToast} isDarkMode={isDarkMode} handleShutdown={handleShutdown} />}
     </div>
   )
 }