feat(web): 重构对话列表和资产页面，添加加载骨架屏和确认对话框

- 重构 MiddlePanel 对话列表，按时间分组并优化交互
- 为 AccountList 和 AssetGallery 添加加载骨架屏
- 用确认对话框替换原生 confirm，统一交互体验
- 优化聊天消息组件的视觉样式和细节
- 添加 Escape 键快速返回账户列表导航
- 更新构建资源文件

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

@@ -16,6 +16,22 @@ interface ManifestGroup {
 
 type TypeTab = 'all' | 'image' | 'video';
 
+function AssetGroupSkeleton() {
+  return (
+    <div className="mb-6">
+      <div className="flex items-center gap-3 mb-3">
+        <div className="skeleton h-4 w-28" />
+        <div className="skeleton h-3 w-20" />
+      </div>
+      <div className="flex gap-2.5">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="w-28 h-28 rounded-xl skeleton" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export function AssetGallery() {
   const [accountFilter, setAccountFilter] = useState('');
   const [typeTab, setTypeTab] = useState<TypeTab>('all');
@@ -31,13 +47,11 @@ export function AssetGallery() {
     fetch('/api/assets/manifests').then((r) => r.json()).then(setManifests).catch(() => {});
   }, []);
 
-  // Filter by type tab
   const filtered = useMemo(() => {
     if (typeTab === 'all') return assets;
     return assets.filter((a) => a.type === typeTab);
   }, [assets, typeTab]);
 
-  // Group filtered assets by manifest_path
   const grouped = useMemo(() => {
     const map = new Map<string, Asset[]>();
     for (const asset of filtered) {
@@ -73,7 +87,6 @@ export function AssetGallery() {
     return parts.join(' · ');
   };
 
-  // Filter manifests by account
   const filteredGroups = useMemo(() => {
     if (!accountFilter) return [...grouped.entries()];
     return [...grouped.entries()].filter(([key]) => {
@@ -92,21 +105,20 @@ export function AssetGallery() {
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-200 bg-white flex-shrink-0">
-        {/* Type tabs */}
-        <div className="flex rounded-lg border border-zinc-200 overflow-hidden">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-100 bg-white flex-shrink-0">
+        <div className="flex rounded-lg border border-zinc-100 overflow-hidden bg-zinc-50/50">
           {tabs.map(({ key, label, icon: Icon, count }) => (
             <button
               key={key}
               onClick={() => setTypeTab(key)}
-              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors
+              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-all duration-150
                 ${typeTab === key
-                  ? 'bg-indigo-50 text-indigo-700 border-r border-zinc-200 last:border-r-0'
-                  : 'bg-white text-zinc-500 hover:bg-zinc-50 border-r border-zinc-200 last:border-r-0'}`}
+                  ? 'bg-white text-indigo-600 shadow-sm'
+                  : 'text-zinc-400 hover:text-zinc-600'}`}
             >
               <Icon size={13} />
               {label}
-              <span className={`text-[10px] px-1 rounded-full ${typeTab === key ? 'bg-indigo-100 text-indigo-600' : 'bg-zinc-100 text-zinc-400'}`}>
+              <span className={`text-[10px] px-1.5 rounded-full ${typeTab === key ? 'bg-indigo-50 text-indigo-500' : 'bg-zinc-100 text-zinc-400'}`}>
                 {count}
               </span>
             </button>
@@ -116,7 +128,7 @@ export function AssetGallery() {
         <select
           value={accountFilter}
           onChange={(e) => setAccountFilter(e.target.value)}
-          className="h-8 rounded-md border border-zinc-200 bg-zinc-50 px-2 text-xs"
+          className="h-8 rounded-lg border border-zinc-100 bg-zinc-50/80 px-2 text-xs hover:border-zinc-200 transition-colors"
         >
           <option value="">全部账号</option>
           {accounts.map((a) => (
@@ -125,7 +137,7 @@ export function AssetGallery() {
         </select>
 
         <div className="flex-1" />
-        <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleScan}>
+        <Button size="sm" variant="outline" className="h-8 text-xs rounded-lg" onClick={handleScan}>
           <RefreshCw size={12} className="mr-1" />
           扫描
         </Button>
@@ -134,12 +146,16 @@ export function AssetGallery() {
       {/* Content */}
       <div className="flex-1 overflow-auto p-4">
         {loading ? (
-          <p className="text-zinc-400 text-sm text-center mt-8">加载中...</p>
+          <div>
+            {Array.from({ length: 3 }).map((_, i) => <AssetGroupSkeleton key={i} />)}
+          </div>
         ) : filteredGroups.length === 0 ? (
-          <div className="flex flex-col items-center justify-center mt-16 text-zinc-400">
-            <FolderOpen size={28} className="mb-2 opacity-40" />
-            <p className="text-sm">{typeTab === 'all' ? '暂无资产' : `暂无${typeTab === 'image' ? '图片' : '视频'}`}</p>
-            <p className="text-xs mt-1">点击"扫描"从 output 目录导入</p>
+          <div className="flex flex-col items-center justify-center mt-16 text-zinc-300">
+            <div className="w-16 h-16 rounded-2xl bg-zinc-50 flex items-center justify-center mb-4">
+              <FolderOpen size={24} strokeWidth={1.5} className="text-zinc-300" />
+            </div>
+            <p className="text-sm text-zinc-400">{typeTab === 'all' ? '暂无资产' : `暂无${typeTab === 'image' ? '图片' : '视频'}`}</p>
+            <p className="text-xs mt-1 text-zinc-300">点击「扫描」从 output 目录导入</p>
           </div>
         ) : (
           filteredGroups.map(([manifestPath, groupAssets]) => (