From 22780854891aaafc87d554fdbc2e1a084712f6de Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Sun, 23 Nov 2025 16:16:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A3=8E=E5=A4=A7=E5=9B=9B=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/index.css                                 | 139 ++++++---
 .../theme_configurator/UI_OPTIMIZATION.md     | 272 ------------------
 2 files changed, 97 insertions(+), 314 deletions(-)
 delete mode 100644 plugins/addon/theme_configurator/UI_OPTIMIZATION.md

diff --git a/css/index.css b/css/index.css
index e7ef6bd..2b3c09e 100644
--- a/css/index.css
+++ b/css/index.css
@@ -482,21 +482,94 @@
   }
 }
 
-/* Banner下方快速入口卡片 - 统一深色玻璃态设计 */
+/* Banner下方快速入口卡片 - 独立毛玻璃卡片设计 */
 .banner .banner-s {
   margin-top: -80px;
   position: relative;
   z-index: 10;
+  padding: 30px 0;
+  /* 移除整体背景，让卡片独立显示 */
+  background: transparent;
+}
+
+.banner .banner-s .banner-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  padding: 0 20px;
+}
+
+/* 独立毛玻璃卡片样式 */
+.banner-s .banner-list .banner-item {
+  flex: 0 1 calc(25% - 20px);
+  min-width: 260px;
+  max-width: 320px;
+  cursor: pointer;
+  padding: 32px 28px;
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* 毛玻璃效果 */
+  background: rgba(15, 23, 42, 0.6);
   backdrop-filter: blur(20px);
-  /* 统一深色玻璃态，与上下背景融合 */
-  background:
-    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
-    rgba(15, 23, 42, 0.85);
+  -webkit-backdrop-filter: blur(20px);
+
+  /* 边框和圆角 */
   border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 16px;
+
+  /* 阴影效果 */
   box-shadow:
-    0 8px 32px rgba(15, 23, 42, 0.5),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  border-radius: 0;  /* 移除圆角 */
+    0 8px 32px rgba(15, 23, 42, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+  /* 内部发光 */
+  overflow: hidden;
+}
+
+/* 卡片光晕装饰 */
+.banner-s .banner-list .banner-item::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    circle at center,
+    rgba(56, 189, 248, 0.15) 0%,
+    transparent 50%
+  );
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+/* 悬浮效果 */
+.banner-s .banner-list .banner-item:hover {
+  transform: translateY(-12px);
+  border-color: rgba(56, 189, 248, 0.4);
+  background: rgba(15, 23, 42, 0.8);
+  box-shadow:
+    0 20px 60px rgba(56, 189, 248, 0.3),
+    0 0 40px rgba(56, 189, 248, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.banner-s .banner-list .banner-item:hover::before {
+  opacity: 1;
+}
+
+.banner-s .banner-list .banner-item:hover h5 {
+  color: #38BDF8;
+  text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
+  transform: translateX(5px);
+}
+
+/* 移除分隔线 */
+.banner-s .banner-list .banner-item::after {
+  display: none;
 }
 
 /* ============================================
@@ -674,49 +747,22 @@
   box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4);
 }
 
-.banner .banner-s .banner-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 !important;  /* 移除额外的 padding，使用 section-content 的统一边距 */
-}
-
-.banner-s .banner-list .banner-item {
-  flex: 1;
-  cursor: pointer;
-  width: 335px;
-  padding: 24px 50px;
-  position: relative;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 16px;
-}
-
-/* 分隔线效果 */
-.banner-s .banner-list .banner-item:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 20%;
-  height: 60%;
-  width: 1px;
-  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.2), transparent);
-}
-
-
-.banner-s .banner-list .banner-item h5 {
+.banner .banner-s .banner-list .banner-item h5 {
   color: #F9FAFB;
   font-size: 20px;
   font-weight: 600;
   transition: all 0.3s ease;
+  margin-bottom: 0;
 }
 
 /* banner-item 标题中的重点色 */
-.banner-s .banner-list .banner-item h5 .highlight {
+.banner .banner-s .banner-list .banner-item h5 .highlight {
   color: #38BDF8;
   font-weight: 700;
   text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
 }
 
-.banner-s .banner-list .banner-item .title-desc {
+.banner .banner-s .banner-list .banner-item .title-desc {
   color: rgba(203, 213, 225, 0.8);
   font-size: 13px;
   line-height: 1.6;
@@ -1728,8 +1774,14 @@ html {
   }
   */
 
+  .banner-s .banner-list {
+    gap: 16px;
+    padding: 0 16px;
+  }
+
   .banner-s .banner-list .banner-item {
-    padding: 30px 40px;
+    flex: 0 1 calc(50% - 16px);
+    padding: 28px 32px;
   }
 
   .section-title h2 {
@@ -1786,11 +1838,14 @@ html {
 
   .banner-s .banner-list {
     flex-direction: column;
+    gap: 12px;
   }
 
   .banner-s .banner-list .banner-item {
+    flex: 1 1 100%;
     width: 100%;
-    padding: 24px 30px;
+    max-width: 100%;
+    padding: 24px 28px;
   }
 
   .banner-s .banner-list .banner-item:not(:last-child)::after {
@@ -1927,7 +1982,7 @@ html {
   }
 
   .banner-s .banner-list .banner-item {
-    padding: 20px 24px;
+    padding: 22px 24px;
   }
 
   .banner-s .banner-list .banner-item h5 {
diff --git a/plugins/addon/theme_configurator/UI_OPTIMIZATION.md b/plugins/addon/theme_configurator/UI_OPTIMIZATION.md
deleted file mode 100644
index c939538..0000000
--- a/plugins/addon/theme_configurator/UI_OPTIMIZATION.md
+++ /dev/null
@@ -1,272 +0,0 @@
-# 主题配置插件 UI 优化报告
-
-## 🎨 设计师诊断与优化方案
-
-### 优化前的问题分析
-
-#### 1. **"新窗口打开"标签过长问题** ❌
-- 原标签文字："新窗口打开" (5个字)
-- 占用空间过大，破坏表单网格对齐
-- 视觉上显得冗余
-
-#### 2. **Switch 控件缺少视觉层次** ❌
-- 开关控件与标签缺少明确关联
-- 没有独立的视觉容器
-- 交互反馈不明显
-
-#### 3. **配置项卡片单调** ❌
-- 纯色背景缺少层次感
-- 没有悬浮效果
-- 视觉上较为平淡
-
-#### 4. **空状态提示不友好** ❌
-- 纯文字提示缺少引导性
-- 没有图标辅助
-- 不够吸引用户操作
-
-#### 5. **整体视觉风格老旧** ❌
-- 缺少现代化渐变效果
-- 间距和圆角不统一
-- 缺少微交互动画
-
----
-
-## ✨ 实施的优化方案
-
-### 1. **Switch 控件专用样式** ✅
-
-#### 优化前：
-```html
-<div class="form-item">
-  <label>新窗口打开</label>
-  <t-switch v-model="banner.blank"></t-switch>
-</div>
-```
-
-#### 优化后：
-```html
-<div class="form-item form-item--switch">
-  <label><span class="switch-label-icon">🔗</span>新窗口</label>
-  <t-switch v-model="banner.blank"></t-switch>
-</div>
-```
-
-#### 改进点：
-- ✅ 文字从"新窗口打开"精简为"新窗口" (节省40%空间)
-- ✅ 添加图标emoji增强识别度
-- ✅ 横向布局，标签和开关在同一行
-- ✅ 独立的背景容器，视觉层次更清晰
-- ✅ 添加悬浮效果，交互反馈更明显
-
-### 2. **卡片层次感优化** ✅
-
-```css
-.banner-item, .config-item {
-  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-/* 顶部装饰条 */
-.banner-item::before {
-  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.banner-item:hover::before {
-  opacity: 1;
-}
-```
-
-#### 改进点：
-- ✅ 渐变背景增加视觉深度
-- ✅ 顶部彩色装饰条（悬浮时显示）
-- ✅ 悬浮时卡片上浮效果
-- ✅ 更柔和的圆角和阴影
-
-### 3. **空状态提示优化** ✅
-
-```css
-.empty-tip::before {
-  content: '📋';
-  display: block;
-  font-size: 32px;
-  margin-bottom: 12px;
-  opacity: 0.6;
-}
-```
-
-#### 改进点：
-- ✅ 添加大尺寸表情图标
-- ✅ 居中对齐，更友好的视觉引导
-- ✅ 虚线边框 + 渐变背景
-- ✅ 悬浮时颜色变化
-
-### 4. **表单标签增强** ✅
-
-```css
-.form-item label::before {
-  content: '';
-  width: 3px;
-  height: 14px;
-  background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
-  border-radius: 2px;
-  margin-right: 8px;
-}
-```
-
-#### 改进点：
-- ✅ 左侧彩色装饰条
-- ✅ 更好的视觉节奏
-- ✅ 提升标签识别度
-
-### 5. **提示框现代化** ✅
-
-```css
-.theme-tip {
-  background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
-  border-left: 3px solid #3b82f6;
-  border-radius: 6px;
-}
-
-.theme-tip code {
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-}
-```
-
-#### 改进点：
-- ✅ 渐变背景更柔和
-- ✅ 代码标签高亮显示
-- ✅ 左侧彩色边框强调
-
-### 6. **操作栏固定优化** ✅
-
-```css
-.action-bar {
-  position: sticky;
-  bottom: 20px;
-  z-index: 100;
-  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-```
-
-#### 改进点：
-- ✅ 粘性定位，始终可见
-- ✅ 独立的视觉容器
-- ✅ 主按钮渐变色 + 发光效果
-- ✅ 悬浮时按钮上浮动画
-
-### 7. **JSON 编辑器暗色主题** ✅
-
-```css
-.theme-textarea textarea {
-  background: #1e293b;
-  color: #e2e8f0;
-  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
-}
-```
-
-#### 改进点：
-- ✅ 暗色背景护眼
-- ✅ 等宽字体提升代码可读性
-- ✅ 更大的行间距
-
-### 8. **滚动条美化** ✅
-
-```css
-::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
-  border-radius: 4px;
-}
-```
-
-#### 改进点：
-- ✅ 渐变色滚动条
-- ✅ 圆角设计
-- ✅ 悬浮时颜色加深
-
----
-
-## 📊 优化效果对比
-
-| 指标 | 优化前 | 优化后 | 提升 |
-|------|--------|--------|------|
-| **Switch 标签长度** | 5字符 | 3字符 | -40% |
-| **卡片视觉层次** | 1层 | 3层 | +200% |
-| **交互动画** | 无 | 7处 | +∞ |
-| **空状态友好度** | ⭐⭐ | ⭐⭐⭐⭐⭐ | +150% |
-| **整体现代感** | 6/10 | 9/10 | +50% |
-
----
-
-## 🎯 核心设计原则
-
-1. **清晰优先** - 简化文案，增强识别度
-2. **层次分明** - 使用渐变、阴影、边框营造深度
-3. **交互友好** - 悬浮效果、动画反馈
-4. **一致性** - 统一的颜色、圆角、间距系统
-5. **现代化** - 渐变色、微动画、流畅过渡
-
----
-
-## 🔧 技术实现亮点
-
-### 1. CSS 变量系统 (可扩展)
-```css
-:root {
-  --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-  --border-radius-base: 8px;
-  --border-radius-large: 12px;
-  --spacing-base: 16px;
-}
-```
-
-### 2. 响应式设计
-- ✅ 移动端单列布局
-- ✅ 按钮全宽显示
-- ✅ Switch 控件垂直排列
-
-### 3. 性能优化
-- ✅ 使用 transform 而非 position 做动画
-- ✅ will-change 优化动画性能
-- ✅ 过渡动画使用 ease 曲线
-
----
-
-## 📱 响应式适配
-
-| 屏幕宽度 | 网格列数 | 特殊适配 |
-|----------|----------|----------|
-| > 768px | 2-3列 | 标准布局 |
-| ≤ 768px | 1列 | Switch 垂直排列，按钮全宽 |
-
----
-
-## 🚀 后续优化建议
-
-1. **图标系统** - 引入 Icon Font 替换 emoji，更专业
-2. **拖拽排序** - 配置项支持拖拽调整顺序
-3. **实时预览** - 右侧显示配置效果预览
-4. **主题切换** - 支持亮色/暗色主题切换
-5. **快捷操作** - 批量导入/导出配置
-6. **表单验证** - 实时校验和错误提示
-
----
-
-## 💡 设计思路总结
-
-本次优化遵循**渐进式增强**原则：
-- 保持原有功能完整性
-- 提升视觉体验和交互流畅度
-- 采用现代化设计语言
-- 兼顾性能和美观
-
-**核心目标**：让配置插件不仅仅是"能用"，而是"好用"、"好看"、"好维护"。
-
----
-
-*优化完成时间：2025-01-23*
-*设计师：Claude (AI UI Designer)*