收敛聊天助手工作台样式

components/AIChatWidget.tsx

@@ -15,56 +15,16 @@
 import { useState, useEffect, useRef } from 'react'
 import { useSession } from 'next-auth/react'
 import Image from 'next/image'
-import { useThemeStyles, cn } from '@/lib/ui-styles'
-
-// 添加动画样式
-const shimmerStyle = `
-  @keyframes shimmer {
-    0% { background-position: -200% 0; }
-    100% { background-position: 200% 0; }
-  }
-  
-  @keyframes breathe {
-    0%, 100% { 
-      filter: blur(15px) brightness(0.7); 
-      transform: scale(1);
-    }
-    50% { 
-      filter: blur(12px) brightness(0.8); 
-      transform: scale(1.02);
-    }
-  }
-`
+import { cn } from '@/lib/ui-styles'
 
 // 图片加载占位符组件
 const ImageLoadingPlaceholder = () => {
   return (
-    <div className="relative w-full aspect-square rounded-2xl overflow-hidden bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800">
-      {/* 动态模糊背景 */}
-      <div className="absolute inset-0 animate-pulse">
-        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 dark:via-white/10 to-transparent animate-shimmer" 
-             style={{
-               backgroundSize: '200% 100%',
-               animation: 'shimmer 2s infinite'
-             }}
-        />
-      </div>
-      
-      {/* 中心图标 */}
+    <div className="relative w-full aspect-square rounded-lg overflow-hidden border border-dashed border-slate-300 bg-slate-50 dark:border-slate-700 dark:bg-slate-800">
       <div className="absolute inset-0 flex items-center justify-center">
         <div className="text-center">
-          <div className="relative">
-            {/* 旋转的光圈 */}
-            <div className="w-16 h-16 border-4 border-slate-300 dark:border-slate-600 border-t-blue-500 rounded-full animate-spin" />
-            {/* 中心图标 */}
-            <div className="absolute inset-0 flex items-center justify-center">
-              <svg className="w-8 h-8 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-            </div>
-          </div>
-          <p className="mt-4 text-sm font-medium text-slate-500 dark:text-slate-400">正在生成图片...</p>
-          <p className="mt-1 text-xs text-slate-400 dark:text-slate-500">AI正在为您创作中</p>
+          <div className="mx-auto h-6 w-6 rounded-full border-2 border-slate-300 border-t-slate-700 animate-spin dark:border-slate-600 dark:border-t-slate-200" />
+          <p className="mt-3 text-xs font-medium text-slate-500 dark:text-slate-400">图片处理中</p>
         </div>
       </div>
     </div>
@@ -83,7 +43,6 @@ interface Message {
 }
 
 export default function AIChatWidget() {
-  const styles = useThemeStyles()
   const { data: session } = useSession()
   const [isOpen, setIsOpen] = useState(false)
   const [messages, setMessages] = useState<Message[]>([])
@@ -405,41 +364,39 @@ export default function AIChatWidget() {
 
   return (
     <div ref={containerRef} className="fixed bottom-6 right-6 z-50">
-      {/* AI聊天窗口 - 苹果风格 */}
+      {/* AI聊天窗口 */}
       {isOpen && (
         <>
-          <style dangerouslySetInnerHTML={{ __html: shimmerStyle }} />
           <div 
-            className="fixed w-[420px] h-[680px] bg-white dark:bg-slate-900 rounded-2xl overflow-hidden flex flex-col"
+            className="fixed w-[420px] h-[680px] bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden flex flex-col"
             style={{
               left: position.x ? `${position.x}px` : 'auto',
               top: position.y ? `${position.y}px` : 'auto',
               right: position.x ? 'auto' : '24px',
               bottom: position.y ? 'auto' : '96px',
-              maxHeight: '80vh',
-              boxShadow: '0 20px 60px -15px rgba(0, 0, 0, 0.3), 0 10px 20px -10px rgba(0, 0, 0, 0.2)'
+              maxHeight: '80vh'
             }}
           >
-            {/* 头部 - 渐变风格 - 可拖拽 */}
+            {/* 头部 - 可拖拽 */}
             <div 
               ref={headerRef}
               onMouseDown={handleMouseDown}
-              className="px-6 py-4 bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-between cursor-move select-none"
+              className="px-5 py-3 border-b border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900 flex items-center justify-between cursor-move select-none"
             >
               <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center ring-2 ring-white/30">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="w-9 h-9 rounded-md bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-300">
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                   </svg>
                 </div>
                 <div>
-                  <h3 className="font-semibold text-white">AI助手</h3>
-                  <p className="text-xs text-white/80">智能对话 · 图片生成</p>
+                  <h3 className="font-semibold text-slate-900 dark:text-slate-100">助手</h3>
+                  <p className="text-xs text-slate-500 dark:text-slate-400">文字和图片处理</p>
                 </div>
               </div>
               <button
                 onClick={() => setIsOpen(false)}
-                className="text-white/80 hover:text-white hover:bg-white/20 backdrop-blur-sm rounded-full p-2 transition-all"
+                className="text-slate-500 hover:text-slate-700 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-800 rounded-md p-2 transition-colors"
                 aria-label="关闭"
               >
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
@@ -451,12 +408,10 @@ export default function AIChatWidget() {
           {/* 消息列表 */}
           <div 
             ref={dropZoneRef}
-            className="flex-1 overflow-y-auto p-4 space-y-4 bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-950 relative"
+            className="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-50 dark:bg-slate-950 relative"
             style={{ 
               scrollbarWidth: 'thin', 
-              scrollbarColor: '#cbd5e1 transparent',
-              backgroundImage: 'radial-gradient(circle at 1px 1px, rgb(209 213 219 / 0.3) 1px, transparent 0)',
-              backgroundSize: '20px 20px'
+              scrollbarColor: '#cbd5e1 transparent'
             }}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
@@ -464,28 +419,28 @@ export default function AIChatWidget() {
           >
             {/* 拖拽提示 */}
             {isDragging && (
-              <div className="absolute inset-0 bg-blue-500/20 dark:bg-blue-400/20 backdrop-blur-sm z-10 flex items-center justify-center border-2 border-dashed border-blue-500 dark:border-blue-400 m-2 rounded-lg">
+              <div className="absolute inset-0 bg-slate-100/90 dark:bg-slate-900/90 z-10 flex items-center justify-center border border-dashed border-slate-400 dark:border-slate-600 m-2 rounded-lg">
                 <div className="text-center">
-                  <svg className="w-16 h-16 mx-auto text-blue-500 dark:text-blue-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-10 h-10 mx-auto text-slate-500 dark:text-slate-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                   </svg>
-                  <p className="text-lg font-semibold text-blue-600 dark:text-blue-400">松开鼠标上传图片</p>
-                  <p className="text-sm text-blue-500 dark:text-blue-300 mt-1">支持多张图片（最多5张）</p>
+                  <p className="text-base font-semibold text-slate-700 dark:text-slate-200">松开鼠标上传图片</p>
+                  <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">最多 5 张</p>
                 </div>
               </div>
             )}
             
             {messages.length === 0 && !isDragging && (
               <div className="text-center mt-12">
-                <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-lg">
-                  <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="w-14 h-14 mx-auto mb-4 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-500 dark:text-slate-400">
+                  <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                   </svg>
                 </div>
-                <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">👋 你好！我是AI助手</h3>
-                <p className="text-sm text-slate-600 dark:text-slate-400 mb-1">可以发送文字或图片与我聊天</p>
-                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">支持图片编辑、内容生成等功能</p>
-                <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
+                <h3 className="text-base font-semibold text-slate-800 dark:text-slate-200 mb-2">助手</h3>
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-1">可以发送文字或图片</p>
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">支持图片处理和内容生成</p>
+                <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 rounded-md text-sm">
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
@@ -497,15 +452,15 @@ export default function AIChatWidget() {
             {messages.map((msg) => (
               <div
                 key={msg.id}
-                className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-2 duration-300`}
+                className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
               >
                 <div className={`max-w-[85%] ${
                   msg.role === 'user' 
-                    ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg' 
+                    ? 'bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900'
                     : msg.role === 'assistant'
-                    ? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-white border border-slate-200 dark:border-slate-700 shadow-md'
+                    ? 'bg-white dark:bg-slate-800 text-slate-900 dark:text-white border border-slate-200 dark:border-slate-700'
                     : 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800'
-                } rounded-2xl px-4 py-3`}>
+                } rounded-lg px-4 py-3`}>
                   {msg.content && <div className="whitespace-pre-wrap text-sm">{msg.content}</div>}
                   
                   {/* 显示图片加载占位符 */}
@@ -519,27 +474,20 @@ export default function AIChatWidget() {
                           'grid-cols-3'
                         }`}>
                           {msg.sourceImages.map((img, idx) => (
-                            <div key={idx} className="relative rounded-2xl overflow-hidden animate-pulse">
+                            <div key={idx} className="relative rounded-lg overflow-hidden">
                               <Image 
                                 src={img} 
                                 alt={`Processing ${idx + 1}`}
                                 width={200}
                                 height={200}
                                 unoptimized
-                                className="w-full max-w-[200px] h-auto object-contain rounded-2xl transition-all duration-1000"
-                                style={{ 
-                                  filter: 'blur(15px) brightness(0.7)', 
-                                  animation: 'breathe 2s ease-in-out infinite'
-                                }}
+                                className="w-full max-w-[200px] h-auto object-contain rounded-lg opacity-70"
                               />
-                              <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500/10 to-purple-500/10">
-                                <div className="bg-black/60 backdrop-blur-xl px-5 py-3 rounded-full shadow-2xl border border-white/10">
+                              <div className="absolute inset-0 flex items-center justify-center bg-slate-900/50">
+                                <div className="bg-slate-900 px-3 py-2 rounded-md">
                                   <div className="flex items-center gap-3 text-white text-sm">
-                                    <div className="relative">
-                                      <div className="w-5 h-5 border-3 border-white/20 border-t-white rounded-full animate-spin" />
-                                      <div className="absolute inset-0 w-5 h-5 border-3 border-transparent border-r-white/40 rounded-full animate-spin" style={{ animationDirection: 'reverse', animationDuration: '1.5s' }} />
-                                    </div>
-                                    <span className="font-medium">AI处理中...</span>
+                                    <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                    <span className="font-medium">处理中...</span>
                                   </div>
                                 </div>
                               </div>
@@ -563,7 +511,7 @@ export default function AIChatWidget() {
                   
                   {/* 显示实际图片 - 添加淡入动画 */}
                   {!msg.isGenerating && msg.images && msg.images.length > 0 && (
-                    <div className={`mt-2 grid gap-2 animate-in fade-in duration-500 ${
+                    <div className={`mt-2 grid gap-2 ${
                       msg.images.length === 1 ? 'grid-cols-1' : 
                       msg.images.length === 2 ? 'grid-cols-2' :
                       msg.images.length === 3 ? 'grid-cols-3' :
@@ -572,8 +520,7 @@ export default function AIChatWidget() {
                       {msg.images.map((img, idx) => (
                         <div 
                           key={idx} 
-                          className="relative group rounded-2xl overflow-hidden bg-slate-100 dark:bg-slate-700 animate-in fade-in slide-in-from-bottom-2"
-                          style={{ animationDelay: `${idx * 100}ms`, animationDuration: '400ms' }}
+                          className="relative group rounded-lg overflow-hidden bg-slate-100 dark:bg-slate-700"
                         >
                           <Image 
                             src={img} 
@@ -581,7 +528,7 @@ export default function AIChatWidget() {
                             width={400}
                             height={400}
                             unoptimized
-                            className={`w-full rounded-2xl cursor-pointer hover:opacity-90 transition-all hover:scale-[1.02] ${
+                            className={`w-full rounded-lg cursor-pointer hover:opacity-90 transition-opacity ${
                               msg.role === 'user' 
                                 ? 'max-w-[200px] h-auto object-contain'
                                 : 'aspect-square object-cover'
@@ -602,7 +549,7 @@ export default function AIChatWidget() {
                               link.download = `image-${Date.now()}-${idx + 1}.png`
                               link.click()
                             }}
-                            className="absolute top-2 right-2 bg-black/60 hover:bg-black/80 backdrop-blur-sm text-white p-2 rounded-xl opacity-0 group-hover:opacity-100 transition-all shadow-lg"
+                            className="absolute top-2 right-2 bg-slate-900/80 hover:bg-slate-900 text-white p-2 rounded-md opacity-0 group-hover:opacity-100 transition-opacity"
                             title="下载图片"
                           >
                             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
@@ -638,7 +585,7 @@ export default function AIChatWidget() {
                     />
                     <button
                       onClick={() => removeImage(idx)}
-                      className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs hover:bg-red-600"
+                      className="absolute -top-1 -right-1 bg-red-500 text-white rounded-md w-5 h-5 flex items-center justify-center text-xs hover:bg-red-600"
                       aria-label="删除图片"
                     >
                       ×
@@ -663,7 +610,7 @@ export default function AIChatWidget() {
               {/* 上传按钮 */}
               <button
                 onClick={() => fileInputRef.current?.click()}
-                className="p-2 text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
+                className="p-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
                 title="上传图片"
                 aria-label="上传图片"
               >
@@ -682,7 +629,7 @@ export default function AIChatWidget() {
                   }
                 }}
                 placeholder="输入消息..."
-                className="flex-1 px-3 py-2 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm resize-none placeholder:text-slate-400 dark:placeholder:text-slate-500"
+                className="flex-1 px-3 py-2 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 dark:text-white rounded-lg focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 focus:border-slate-900 dark:focus:border-slate-500 outline-none text-sm resize-none placeholder:text-slate-400 dark:placeholder:text-slate-500"
                 rows={2}
                 disabled={sending}
               />
@@ -690,7 +637,7 @@ export default function AIChatWidget() {
               <button
                 onClick={handleSend}
                 disabled={(!input.trim() && images.length === 0) || sending}
-                className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed font-medium text-sm h-[72px] flex items-center justify-center min-w-[70px]"
+                className="px-4 py-2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 rounded-lg hover:bg-slate-800 dark:hover:bg-white disabled:opacity-50 disabled:cursor-not-allowed font-medium text-sm h-[72px] flex items-center justify-center min-w-[70px] transition-colors"
               >
                 {sending ? (
                   <div className="flex items-center gap-2">
@@ -718,7 +665,7 @@ export default function AIChatWidget() {
       {/* 悬浮按钮 */}
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="w-14 h-14 rounded-full bg-blue-500 text-white shadow-lg hover:bg-blue-600 hover:shadow-xl transition-all flex items-center justify-center"
+        className="w-12 h-12 rounded-lg border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center justify-center"
         aria-label="AI助手"
       >
         {isOpen ? (

docs/商业化地基排查问题清单_20260524.md

@@ -966,6 +966,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 - `app/share/[id]/page.tsx`：公开分享页已移除 `AI改图（预留）` 未完成功能入口，卡片和标签从大圆角、重阴影、彩色胶囊收敛为普通圆角、轻阴影和中性标签。
 - `components/Header.tsx`：顶部导航和首页收缩态搜索区已移除毛玻璃、重阴影、下拉动画和按压缩放，改成实色背景、普通边框、轻阴影和中性按钮。
 - `components/DanmakuWidget.tsx`：弹幕浮窗已从蓝紫渐变、重阴影、圆形悬浮按钮和 hover 放大收为普通边框消息面板、矩形头像块和中性浮动按钮。
+- `components/AIChatWidget.tsx`：聊天助手浮窗已移除蓝紫渐变头部、光圈空状态、毛玻璃处理层、消息气泡重阴影和图片 hover 放大，改成普通工具面板和中性消息气泡。
 - `app/globals.css:37`：已完成第一轮收口，旧按钮、输入框、卡片工具类现在改为中性后台控件，不再 hover 放大或使用 Apple 式重阴影。
 - `app/globals.css:138`：已完成第一轮收口，旧弹窗动画已改为轻量淡入，不再使用模糊、缩放和反弹动效。
 - 浏览器验证：已在 `http://localhost:3004/admin` 验证用户管理、模板管理、架构管理三个后台页面，接口正常、控制台无新增错误，未观察到明显重叠。
@@ -975,7 +976,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 
 建议动作：
 
-- 继续检查直接写在组件里的渐变、大圆角和悬浮动画，下一批优先处理 AI 聊天、首页素材卡片和外观设置页。
+- 继续检查直接写在组件里的渐变、大圆角和悬浮动画，下一批优先处理首页素材卡片、外观设置页和个人主页素材卡片。
 - 管理后台单独建立更克制的 admin 样式：纯色背景、弱边框、少阴影，主色只用于选中态和主按钮。
 - 后续前端修复应保持当前项目自己的风格，不复制旧参考源码，也不继续堆“模板化 SaaS 展示页”视觉。