refactor(web): router-based navigation, light theme, form config

- Replace Zustand activeView with React Router (NavLink + Routes)
- White/light modern theme with indigo accents
- Sidebar with Chinese labels under icons
- ConfigForm with individual form fields (no JSON textareas)
- Account switching with context injection into chat
- Fix duplicate conversation creation with useRef guard
- Asset gallery: smaller 6-column grid with date labels
- All components updated to light color scheme

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/client/src/components/assets/AssetGallery.tsx

@@ -26,11 +26,11 @@ export function AssetGallery() {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-800">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-200 bg-white">
         <select
           value={accountFilter}
           onChange={(e) => setAccountFilter(e.target.value)}
-          className="h-8 rounded-md border border-zinc-800 bg-zinc-900 px-2 text-xs"
+          className="h-8 rounded-md border border-zinc-200 bg-zinc-50 px-2 text-xs"
         >
           <option value="">全部账号</option>
           {accounts.map((a) => (
@@ -40,12 +40,13 @@ export function AssetGallery() {
         <select
           value={typeFilter}
           onChange={(e) => setTypeFilter(e.target.value)}
-          className="h-8 rounded-md border border-zinc-800 bg-zinc-900 px-2 text-xs"
+          className="h-8 rounded-md border border-zinc-200 bg-zinc-50 px-2 text-xs"
         >
           <option value="">全部类型</option>
           <option value="image">图片</option>
           <option value="video">视频</option>
         </select>
+        <div className="flex-1" />
         <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleScan}>
           <RefreshCw size={12} className="mr-1" />
           扫描
@@ -54,15 +55,18 @@ export function AssetGallery() {
 
       <div className="flex-1 overflow-auto p-4">
         {loading ? (
-          <p className="text-zinc-500 text-sm text-center mt-8">加载中...</p>
+          <p className="text-zinc-400 text-sm text-center mt-8">加载中...</p>
         ) : assets.length === 0 ? (
-          <p className="text-zinc-600 text-sm text-center mt-8">暂无资产，点击"扫描"导入</p>
+          <div className="flex flex-col items-center justify-center mt-16 text-zinc-400">
+            <p className="text-sm">暂无资产</p>
+            <p className="text-xs mt-1">点击"扫描"从 output 目录导入</p>
+          </div>
         ) : (
-          <div className="grid grid-cols-4 gap-3">
+          <div className="grid grid-cols-6 gap-2">
             {assets.map((asset) => (
               <div
                 key={asset.id}
-                className="group relative aspect-[9/16] bg-zinc-900 rounded-lg overflow-hidden cursor-pointer border border-zinc-800 hover:border-zinc-600 transition-colors"
+                className="group relative aspect-square bg-zinc-100 rounded-lg overflow-hidden cursor-pointer border border-zinc-200 hover:border-indigo-300 hover:shadow-sm transition-all"
                 onClick={() => setPreviewAsset(asset)}
               >
                 {asset.type === 'image' ? (
@@ -81,10 +85,20 @@ export function AssetGallery() {
                 )}
                 <button
                   onClick={(e) => { e.stopPropagation(); remove(asset.id); }}
-                  className="absolute top-1 right-1 p-1 rounded bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity"
+                  className="absolute top-1 right-1 p-1 rounded bg-white/80 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
                 >
-                  <Trash2 size={12} className="text-red-400" />
+                  <Trash2 size={12} className="text-red-500" />
                 </button>
+                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/40 to-transparent p-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[9px] text-white font-medium">
+                      {asset.type === 'image' ? '🖼' : '🎬'} #{asset.shot_index || '?'}
+                    </span>
+                    <span className="text-[8px] text-white/70">
+                      {asset.created_at ? new Date(asset.created_at).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }) : ''}
+                    </span>
+                  </div>
+                </div>
               </div>
             ))}
           </div>