收敛外观设置页工作台样式

app/admin/_components/AppearanceSettingsPanel.tsx

@@ -251,11 +251,10 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
       activeNav === key ? styles.navItemStyles.active : styles.navItemStyles.hover
     )
 
-  // 更精致的光晕效果 - 使用更相近的颜色，减少数量
   if (!sessionUser || sessionUser.role !== 'ADMIN') {
     return (
       <div className={cn(
-        'rounded-2xl border px-6 py-4 text-sm',
+        'rounded-lg border px-6 py-4 text-sm',
         theme === 'dark'
           ? 'border-red-800 bg-red-900/30 text-red-400'
           : 'border-red-200 bg-red-50/60 text-red-600'
@@ -268,7 +267,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
   if (loading) {
     return (
       <div className={cn(styles.cardStyles.base, 'flex flex-col items-center gap-4')}>
-        <div className="h-12 w-12 rounded-full border-4 border-slate-200 border-t-indigo-500 animate-spin" />
+        <div className="h-12 w-12 rounded-full border-4 border-slate-200 border-t-slate-600 animate-spin" />
         <p className={cn('text-sm', theme === 'dark' ? 'text-slate-400' : 'text-slate-500')}>正在加载外观设置...</p>
       </div>
     )
@@ -278,7 +277,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
     <div className="space-y-8">
       <section
         className={cn(
-          'rounded-2xl border p-5',
+          'rounded-lg border p-5',
           theme === 'dark'
             ? 'border-slate-700 bg-slate-900 text-white'
             : 'border-slate-200 bg-white text-slate-900',
@@ -368,7 +367,9 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                     {section.label}
                     <svg
                       className={`w-4 h-4 text-slate-400 transition-colors duration-300 ${
-                        activeNav === section.key ? 'text-indigo-500' : 'group-hover:text-indigo-500'
+                        activeNav === section.key
+                          ? 'text-slate-700 dark:text-slate-200'
+                          : 'group-hover:text-slate-600 dark:group-hover:text-slate-300'
                       }`}
                       fill="none"
                       stroke="currentColor"
@@ -395,7 +396,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
               <p className={cn('text-base font-semibold mt-1', theme === 'dark' ? 'text-white' : 'text-slate-900')}>当前主题色</p>
             </div>
             <div className={cn(
-              'w-full h-24 rounded-xl border shadow-inner',
+              'w-full h-24 rounded-lg border',
               theme === 'dark' ? 'border-slate-700' : 'border-slate-200'
             )} style={{ backgroundColor: headerBgColor }}>
               <div className="flex items-center justify-between h-full px-4 text-white/90">
@@ -404,7 +405,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                   <p className="text-xs opacity-80 font-mono">{headerBgColor}</p>
                 </div>
                 <span className={cn(
-                  'text-xs font-semibold px-3 py-1 rounded-full',
+                  'text-xs font-semibold px-3 py-1 rounded-md',
                   theme === 'dark' ? 'bg-white/15 text-white/80' : 'bg-white/25 text-white/90'
                 )}>导航示例</span>
               </div>
@@ -449,8 +450,8 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                 <div className="flex items-center gap-3">
                   <label
                     className={cn(
-                      'relative w-16 h-16 border rounded-xl shadow-inner cursor-pointer',
-                      theme === 'dark' ? 'border-slate-600 shadow-black/60' : 'border-slate-200 shadow-black/10'
+                      'relative w-16 h-16 border rounded-lg cursor-pointer',
+                      theme === 'dark' ? 'border-slate-600' : 'border-slate-200'
                     )}
                     style={{ backgroundColor: headerBgColor }}
                   >
@@ -527,7 +528,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                   </div>
                   <div
                     className={cn(
-                      'w-full aspect-square max-w-[220px] rounded-2xl border-2 border-dashed flex items-center justify-center overflow-hidden',
+                      'w-full aspect-square max-w-[220px] rounded-lg border border-dashed flex items-center justify-center overflow-hidden',
                       theme === 'dark' ? 'border-slate-700' : 'border-slate-200'
                     )}
                     style={{ backgroundColor: item.background }}
@@ -634,7 +635,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                 },
               ].map((item) => (
                 <div key={item.title} className={cn(
-                  'flex items-center justify-between gap-4 rounded-2xl border px-4 py-3',
+                  'flex items-center justify-between gap-4 rounded-lg border px-4 py-3',
                   theme === 'dark' ? 'border-slate-700' : 'border-slate-200',
                   item.disabled && 'opacity-60'
                 )}>
@@ -654,20 +655,20 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                       disabled={item.disabled}
                     />
                     <div className={cn(
-                      'w-11 h-6 peer-focus:outline-none peer-focus:ring-4 rounded-full peer peer-checked:after:translate-x-full after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:rounded-full after:h-5 after:w-5 after:transition-all',
+                      'w-11 h-6 peer-focus:outline-none peer-focus:ring-2 rounded-full peer peer-checked:after:translate-x-full after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:rounded-full after:h-5 after:w-5 after:transition-transform',
                       item.disabled
                         ? 'peer-checked:bg-slate-400 dark:peer-checked:bg-slate-600 bg-slate-300 dark:bg-slate-700'
-                        : 'peer-checked:bg-indigo-600',
+                        : 'peer-checked:bg-slate-700 dark:peer-checked:bg-slate-500',
                       theme === 'dark'
-                        ? !item.disabled && 'bg-slate-700 peer-focus:ring-indigo-800'
-                        : !item.disabled && 'bg-slate-200 peer-focus:ring-indigo-200'
+                        ? !item.disabled && 'bg-slate-700 peer-focus:ring-slate-600'
+                        : !item.disabled && 'bg-slate-200 peer-focus:ring-slate-300'
                     )}></div>
                   </label>
                 </div>
               ))}
               <div
                 className={cn(
-                  'rounded-2xl border px-4 py-2.5 flex items-center justify-between gap-4',
+                  'rounded-lg border px-4 py-2.5 flex items-center justify-between gap-4',
                   theme === 'dark' ? 'border-slate-700/80 bg-slate-800/60' : 'border-slate-200/80 bg-slate-50/80'
                 )}
               >
@@ -689,7 +690,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                         }}
                         disabled={!sessionUser?.isSuperAdmin}
                         className={cn(
-                          '!w-16 text-center font-semibold text-sm px-2 py-1 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-800 outline-none transition-all',
+                          '!w-16 text-center font-semibold text-sm px-2 py-1 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:border-slate-500 dark:focus:border-slate-300 focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 outline-none transition-colors',
                           '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
                           !sessionUser?.isSuperAdmin && 'opacity-60 cursor-not-allowed'
                         )}
@@ -708,7 +709,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
 
               {/* 付费功能开关 - 使用 RestrictedToggle */}
               <div className={cn(
-                'rounded-2xl border px-4',
+                'rounded-lg border px-4',
                 theme === 'dark' ? 'border-slate-700' : 'border-slate-200'
               )}>
                 <RestrictedToggle
@@ -743,7 +744,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                   type="button"
                   onClick={() => setShowStorageConfirmModal(true)}
                   className={cn(
-                    'px-4 py-2 rounded-xl text-sm font-medium transition-all',
+                    'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
                     'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400',
                     'hover:bg-amber-200 dark:hover:bg-amber-900/50',
                     'border border-amber-200 dark:border-amber-800'
@@ -757,7 +758,7 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
                   type="button"
                   onClick={() => setStorageEditEnabled(false)}
                   className={cn(
-                    'px-4 py-2 rounded-xl text-sm font-medium transition-all',
+                    'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
                     'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300',
                     'hover:bg-slate-200 dark:hover:bg-slate-600'
                   )}
@@ -770,13 +771,13 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
             {/* 锁定状态提示 */}
             {!storageEditEnabled && (
               <div className={cn(
-                'rounded-2xl border p-4',
+                'rounded-lg border p-4',
                 theme === 'dark'
                   ? 'border-amber-900/60 bg-amber-900/20'
                   : 'border-amber-100 bg-amber-50/80'
               )}>
                 <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center flex-shrink-0">
+                  <div className="w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center flex-shrink-0">
                     <svg className="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                     </svg>
@@ -864,13 +865,13 @@ export default function AppearanceSettingsPanel({ sessionUser, variant = 'embedd
               </div>
             </div>
             <div className={cn(
-              'rounded-2xl border p-4',
+              'rounded-lg border p-4',
               theme === 'dark'
-                ? 'border-indigo-900/60 bg-indigo-900/20'
-                : 'border-indigo-100 bg-indigo-50/80'
+                ? 'border-slate-700 bg-slate-800/60'
+                : 'border-slate-200 bg-slate-50'
             )}>
-              <p className={cn('text-sm font-semibold', theme === 'dark' ? 'text-indigo-300' : 'text-indigo-700')}>配置提示</p>
-              <ul className={cn('text-xs list-disc list-inside space-y-1 mt-2', theme === 'dark' ? 'text-indigo-200/90' : 'text-indigo-600/90')}>
+              <p className={cn('text-sm font-semibold', theme === 'dark' ? 'text-slate-100' : 'text-slate-800')}>配置提示</p>
+              <ul className={cn('text-xs list-disc list-inside space-y-1 mt-2', theme === 'dark' ? 'text-slate-300' : 'text-slate-600')}>
                 <li>S3 端点通常为对象存储服务器地址</li>
                 <li>Access/Secret Key 需保证与存储桶权限一致</li>
                 <li>如使用 CDN，请将加速域名填入公网 URL</li>

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

@@ -967,6 +967,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 - `components/Header.tsx`：顶部导航和首页收缩态搜索区已移除毛玻璃、重阴影、下拉动画和按压缩放，改成实色背景、普通边框、轻阴影和中性按钮。
 - `components/DanmakuWidget.tsx`：弹幕浮窗已从蓝紫渐变、重阴影、圆形悬浮按钮和 hover 放大收为普通边框消息面板、矩形头像块和中性浮动按钮。
 - `components/AIChatWidget.tsx`：聊天助手浮窗已移除蓝紫渐变头部、光圈空状态、毛玻璃处理层、消息气泡重阴影和图片 hover 放大，改成普通工具面板和中性消息气泡。
+- `app/admin/_components/AppearanceSettingsPanel.tsx`：外观设置页已完成第一轮收口，当前代码里已无旧记录中的动态径向背景、浮动光球和 `Appearance Studio` 英文标题；本轮继续移除大圆角、内阴影、紫蓝焦点光圈和对象存储提示的彩色展示块。
 - `app/globals.css:37`：已完成第一轮收口，旧按钮、输入框、卡片工具类现在改为中性后台控件，不再 hover 放大或使用 Apple 式重阴影。
 - `app/globals.css:138`：已完成第一轮收口，旧弹窗动画已改为轻量淡入，不再使用模糊、缩放和反弹动效。
 - 浏览器验证：已在 `http://localhost:3004/admin` 验证用户管理、模板管理、架构管理三个后台页面，接口正常、控制台无新增错误，未观察到明显重叠。
@@ -976,7 +977,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 
 建议动作：
 
-- 继续检查直接写在组件里的渐变、大圆角和悬浮动画，下一批优先处理首页素材卡片、外观设置页和个人主页素材卡片。
+- 继续检查直接写在组件里的渐变、大圆角和悬浮动画，下一批优先处理个人主页素材卡片、编辑素材弹窗和模板管理内层组件。
 - 管理后台单独建立更克制的 admin 样式：纯色背景、弱边框、少阴影，主色只用于选中态和主按钮。
 - 后续前端修复应保持当前项目自己的风格，不复制旧参考源码，也不继续堆“模板化 SaaS 展示页”视觉。
 
@@ -995,9 +996,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 - `app/admin/_components/UsersTab.tsx:473`：用户页显示英文小标题 `User Management`。
 - `app/admin/_components/MonitorTab.tsx`：监控页头部已从大 Hero 卡片收敛为普通后台工具区，英文眉标已删除。
 - `app/admin/_components/CategoriesTab.tsx`：分类管理页头部已从展示页式大卡片收敛为普通后台工具区，英文眉标已删除。
-- `app/admin/_components/AppearanceSettingsPanel.tsx:333`：外观设置页使用动态径向渐变背景。
-- `app/admin/_components/AppearanceSettingsPanel.tsx:357`：外观设置页使用浮动光球。
-- `app/admin/_components/AppearanceSettingsPanel.tsx:415`：显示 `Appearance Studio` 和渐变文字标题。
+- `app/admin/_components/AppearanceSettingsPanel.tsx`：旧记录中的动态径向渐变背景、浮动光球和 `Appearance Studio` 已不存在；本轮已把外观设置页头部、主题预览、LOGO 预览、开关行、对象存储提示从大圆角和偏展示的彩色块收敛为普通后台设置区。
 
 建议动作：
 
@@ -1008,6 +1007,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 - 已推进：`app/admin/_components/UsersTab.tsx` 的用户管理头部已从大 Hero 卡片收敛为普通后台工具区；最高权限 / 管理员标识已从紫粉渐变胶囊改为中性徽章。
 - 已推进：`app/admin/_components/MonitorTab.tsx` 的监控页头部已从展示页式大卡片收敛为普通后台工具区；指标卡改为中性竖线标识，不再使用 emoji 圆形图标和发光阴影。
 - 已推进：`app/admin/_components/CategoriesTab.tsx` 的分类管理页头部、左侧列表、字段启用编辑态和可添加字段列表已完成第一轮工作台化收口。
+- 已推进：`app/admin/_components/AppearanceSettingsPanel.tsx` 的外观设置页已完成第一轮工作台化收口，文档中过期的 `Appearance Studio`、浮动光球和动态背景证据已修正。
 
 ### P2-07 管理后台列表和组织树装饰过重