yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

风大四发
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-23 16:16:15 +08:00
parent fbeade7f57
commit 2278085489
2 changed files with 97 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
css/index.css
View File

@@ -482,21 +482,94 @@
} }
} }
/* Banner下方快速入口卡片 - 统一深色玻璃态设计 */ /* Banner下方快速入口卡片 - 独立毛玻璃卡片设计 */
.banner .banner-s { .banner .banner-s {
margin-top: -80px; margin-top: -80px;
position: relative; position: relative;
z-index: 10; 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); backdrop-filter: blur(20px);
/* 统一深色玻璃态，与上下背景融合 */ -webkit-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);
border: 1px solid rgba(148, 163, 184, 0.2); border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 16px;
/* 阴影效果 */
box-shadow: box-shadow:
0 8px 32px rgba(15, 23, 42, 0.5), 0 8px 32px rgba(15, 23, 42, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.05); inset 0 1px 0 rgba(255, 255, 255, 0.1);
border-radius: 0; /* 移除圆角 */
/* 内部发光 */
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); box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4);
} }
.banner .banner-s .banner-list { .banner .banner-s .banner-list .banner-item h5 {
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 {
color: #F9FAFB; color: #F9FAFB;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;
margin-bottom: 0;
} }
/* banner-item 标题中的重点色 */ /* banner-item 标题中的重点色 */
.banner-s .banner-list .banner-item h5 .highlight { .banner .banner-s .banner-list .banner-item h5 .highlight {
color: #38BDF8; color: #38BDF8;
font-weight: 700; font-weight: 700;
text-shadow: 0 0 20px rgba(56, 189, 248, 0.5); 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); color: rgba(203, 213, 225, 0.8);
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
@@ -1728,8 +1774,14 @@ html {
} }
*/ */
.banner-s .banner-list {
gap: 16px;
padding: 0 16px;
}
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
padding: 30px 40px; flex: 0 1 calc(50% - 16px);
padding: 28px 32px;
} }
.section-title h2 { .section-title h2 {
@@ -1786,11 +1838,14 @@ html {
.banner-s .banner-list { .banner-s .banner-list {
flex-direction: column; flex-direction: column;
gap: 12px;
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
flex: 1 1 100%;
width: 100%; width: 100%;
padding: 24px 30px; max-width: 100%;
padding: 24px 28px;
} }
.banner-s .banner-list .banner-item:not(:last-child)::after { .banner-s .banner-list .banner-item:not(:last-child)::after {
@@ -1927,7 +1982,7 @@ html {
} }
.banner-s .banner-list .banner-item { .banner-s .banner-list .banner-item {
padding: 20px 24px; padding: 22px 24px;
} }
.banner-s .banner-list .banner-item h5 { .banner-s .banner-list .banner-item h5 {

272
plugins/addon/theme_configurator/UI_OPTIMIZATION.md
View File

@@ -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)*