feat(web): 重构组件样式并添加确认对话框组件

- 优化组件视觉风格: 使用渐变色、阴影和圆角增强现代感
- 添加 ConfirmDialog 组件和 useConfirm hook 用于确认操作
- 改进聊天界面: 添加滚动到底部按钮、斜杠命令自动弹出
- 统一组件间距和颜色方案，提升 UI 一致性

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

@@ -21,12 +21,12 @@ export function AssetProjectGroup({ title, subtitle, assets, onPreview, onDelete
         {subtitle && <span className="text-[10px] text-zinc-400">{subtitle}</span>}
         <div className="flex items-center gap-2 ml-auto text-[10px] text-zinc-400">
           {images.length > 0 && (
-            <span className="inline-flex items-center gap-0.5">
+            <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-blue-50/60 text-blue-500">
               <ImageIcon size={10} /> {images.length}
             </span>
           )}
           {videos.length > 0 && (
-            <span className="inline-flex items-center gap-0.5">
+            <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-violet-50/60 text-violet-500">
               <Film size={10} /> {videos.length}
             </span>
           )}
@@ -34,11 +34,11 @@ export function AssetProjectGroup({ title, subtitle, assets, onPreview, onDelete
       </div>
 
       {/* Asset strip */}
-      <div className="flex gap-2 overflow-x-auto pb-2">
+      <div className="flex gap-2.5 overflow-x-auto pb-2">
         {assets.map((asset) => (
           <div
             key={asset.id}
-            className="group relative flex-shrink-0 w-24 h-24 bg-zinc-100 rounded-lg overflow-hidden cursor-pointer border border-zinc-200 hover:border-indigo-300 hover:shadow-sm transition-all"
+            className="group relative flex-shrink-0 w-28 h-28 bg-zinc-100 rounded-xl overflow-hidden cursor-pointer border border-zinc-100 hover:shadow-lg hover:shadow-zinc-200/60 hover:-translate-y-0.5 transition-all duration-200"
             onClick={() => onPreview(asset)}
           >
             {asset.type === 'image' ? (
@@ -49,8 +49,8 @@ export function AssetProjectGroup({ title, subtitle, assets, onPreview, onDelete
                 loading="lazy"
               />
             ) : (
-              <div className="w-full h-full flex items-center justify-center bg-zinc-800">
-                <Film size={20} className="text-zinc-400" />
+              <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-zinc-800 to-zinc-900">
+                <Film size={20} className="text-zinc-500" />
                 <video
                   src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
                   className="absolute inset-0 w-full h-full object-cover"
@@ -61,12 +61,12 @@ export function AssetProjectGroup({ title, subtitle, assets, onPreview, onDelete
             )}
             <button
               onClick={(e) => { e.stopPropagation(); if (confirm('确定删除这个资产？')) onDelete(asset.id); }}
-              className="absolute top-1 right-1 p-0.5 rounded bg-white/80 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
+              className="absolute top-1.5 right-1.5 p-1 rounded-lg bg-white/90 opacity-0 group-hover:opacity-100 transition-all duration-200 shadow-sm hover:bg-red-50"
             >
               <Trash2 size={10} className="text-red-500" />
             </button>
-            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/40 to-transparent px-1 py-0.5">
-              <span className="text-[8px] text-white">
+            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent px-1.5 py-1">
+              <span className="text-[9px] text-white/80 font-medium">
                 {asset.type === 'image' ? 'IMG' : 'VID'} #{asset.shot_index ?? '?'}
               </span>
             </div>