You've already forked iFlow-Settings-Editor-GUI
架构 重构样式系统：采用 Windows 11 Fluent Design 规范
This commit is contained in:
140
AGENTS.md
140
AGENTS.md
@@ -16,8 +16,10 @@ iFlow 设置编辑器是一个基于 Electron + Vue 3 的桌面应用程序，
|
||||
| concurrently | ^8.2.2 | 并发执行工具 |
|
||||
| electron-builder | ^24.13.3 | 应用打包工具 |
|
||||
| vitest | ^4.1.4 | 单元测试框架 |
|
||||
| @vue/test-utils | ^2.5.0 | Vue 组件测试工具 |
|
||||
| happy-dom | Latest | 浏览器环境模拟 |
|
||||
| @vue/test-utils | ^2.4.6 | Vue 组件测试工具 |
|
||||
| happy-dom | ^20.9.0 | 浏览器环境模拟 |
|
||||
| vue-i18n | ^9.14.5 | 国际化支持 |
|
||||
| less | ^4.6.4 | CSS 预处理器 |
|
||||
|
||||
## 项目结构
|
||||
|
||||
@@ -31,6 +33,7 @@ iflow-settings-editor/
|
||||
├── vitest.config.js # Vitest 测试配置
|
||||
├── src/
|
||||
│ ├── main.js # Vue 入口
|
||||
│ ├── App.vue # 根组件
|
||||
│ ├── components/ # 可复用组件
|
||||
│ │ ├── ApiProfileDialog.vue
|
||||
│ │ ├── Footer.vue
|
||||
@@ -43,8 +46,12 @@ iflow-settings-editor/
|
||||
│ │ ├── ApiConfig.vue
|
||||
│ │ ├── GeneralSettings.vue
|
||||
│ │ └── McpServers.vue
|
||||
│ └── styles/ # 全局样式
|
||||
│ └── global.less
|
||||
│ ├── styles/ # 全局样式
|
||||
│ │ └── global.less
|
||||
│ └── locales/ # 国际化资源
|
||||
│ ├── index.js
|
||||
│ ├── en-US.js
|
||||
│ └── ja-JP.js
|
||||
├── build/ # 构建资源 (图标等)
|
||||
├── dist/ # Vite 构建输出
|
||||
├── release/ # 打包输出目录
|
||||
@@ -84,7 +91,10 @@ window.electronAPI = {
|
||||
// 托盘事件监听
|
||||
onApiProfileSwitched: (callback) => {
|
||||
ipcRenderer.on('api-profile-switched', (event, profileName) => callback(profileName))
|
||||
}
|
||||
},
|
||||
|
||||
// 语言切换通知
|
||||
notifyLanguageChanged: () => ipcRenderer.send('language-changed')
|
||||
}
|
||||
```
|
||||
|
||||
@@ -103,7 +113,7 @@ window.electronAPI = {
|
||||
- 双击托盘图标显示主窗口
|
||||
|
||||
### API 配置切换
|
||||
- 支持多环境配置: 默认配置、开发环境、预发布环境、生产环境
|
||||
- 支持多环境配置: 默认配置，开发环境、预发布环境、生产环境
|
||||
- 配置文件管理: 支持创建、编辑、复制、删除、重命名
|
||||
- 单独保存每个环境的 API 配置到 `apiProfiles` 对象
|
||||
- 切换配置时直接应用新配置，无需确认
|
||||
@@ -135,7 +145,7 @@ npm run test:coverage # 生成测试覆盖率报告
|
||||
|
||||
### 1. 常规设置 (General)
|
||||
- **语言**: zh-CN / en-US / ja-JP
|
||||
- **主题**: Xcode / Dark / Light / Solarized Dark
|
||||
- **主题**: Xcode / Dark / Solarized Dark
|
||||
- **启动动画**: 已显示 / 未显示
|
||||
- **检查点保存**: 启用 / 禁用
|
||||
|
||||
@@ -210,7 +220,59 @@ const API_FIELDS = ['selectedAuthType', 'apiKey', 'baseUrl', 'modelName', 'searc
|
||||
- `currentApiProfile`: 'default'
|
||||
- `mcpServers`: {}
|
||||
|
||||
### 8. 测试框架 (Vitest)
|
||||
## 设计系统
|
||||
|
||||
### Windows UI Kit - Fluent Design
|
||||
|
||||
本项目采用 Windows 11 Fluent Design 设计规范，实现统一的视觉效果。
|
||||
|
||||
#### 主题变量
|
||||
|
||||
**Light 模式：**
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: rgba(243, 243, 243, 0.85);
|
||||
--bg-secondary: rgba(255, 255, 255, 0.70);
|
||||
--bg-tertiary: #ebebeb;
|
||||
--bg-elevated: rgba(255, 255, 255, 0.95);
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #5d5d5d;
|
||||
--accent: #0078d4;
|
||||
--accent-hover: #106ebe;
|
||||
--border: #e0e0e0;
|
||||
--control-fill: rgba(249, 249, 249, 0.85);
|
||||
}
|
||||
```
|
||||
|
||||
**Dark 模式：**
|
||||
```css
|
||||
.dark {
|
||||
--bg-primary: #1f1f1f;
|
||||
--bg-secondary: #2d2d2d;
|
||||
--text-primary: #ffffff;
|
||||
--accent: #60cdff;
|
||||
--control-fill: #333333;
|
||||
}
|
||||
```
|
||||
|
||||
**Solarized Dark 模式：**
|
||||
```css
|
||||
.solarized-dark {
|
||||
--bg-primary: #002b36;
|
||||
--bg-secondary: #073642;
|
||||
--text-primary: #839496;
|
||||
--accent: #268bd2;
|
||||
}
|
||||
```
|
||||
|
||||
#### 设计原则
|
||||
- **Mica -inspired 层次感**: 使用半透明背景和分层深度
|
||||
- **圆角系统**: 4px / 6px / 8px / 12px 四级圆角
|
||||
- **阴影层次**: sm / md / lg / xl 四级阴影
|
||||
- **过渡动画**: 0.1s-0.2s 流畅曲线
|
||||
- **Segoe UI Variable 字体**: Windows 11 原生字体
|
||||
|
||||
## 测试框架 (Vitest)
|
||||
|
||||
**测试配置**：
|
||||
- 使用 Vitest 作为测试运行器
|
||||
@@ -225,45 +287,23 @@ const API_FIELDS = ['selectedAuthType', 'apiKey', 'baseUrl', 'modelName', 'searc
|
||||
```
|
||||
src/
|
||||
├── components/
|
||||
│ ├── Footer.test.js # Footer 组件测试 (5 个测试)
|
||||
│ ├── SideBar.test.js # 侧边栏测试 (10 个测试)
|
||||
│ └── TitleBar.test.js # 标题栏测试 (8 个测试)
|
||||
│ ├── Footer.test.js # Footer 组件测试
|
||||
│ ├── SideBar.test.js # 侧边栏测试
|
||||
│ └── TitleBar.test.js # 标题栏测试
|
||||
└── views/
|
||||
├── ApiConfig.test.js # API 配置测试 (15 个测试)
|
||||
├── GeneralSettings.test.js # 常规设置测试 (8 个测试)
|
||||
└── McpServers.test.js # MCP 服务器测试 (12 个测试)
|
||||
├── ApiConfig.test.js # API 配置测试
|
||||
├── GeneralSettings.test.js # 常规设置测试
|
||||
└── McpServers.test.js # MCP 服务器测试
|
||||
```
|
||||
|
||||
**测试覆盖范围**：
|
||||
- **视图组件**：
|
||||
- GeneralSettings - 常规设置页面
|
||||
- ApiConfig - API 配置管理
|
||||
- McpServers - MCP 服务器管理
|
||||
- **UI 组件**：
|
||||
- Footer - 状态栏
|
||||
- TitleBar - 窗口标题栏
|
||||
- SideBar - 侧边导航栏
|
||||
|
||||
**测试命令**：
|
||||
```bash
|
||||
npm run test # 运行所有测试（监听模式）
|
||||
npm run test:run # 运行测试一次
|
||||
npm run test:ui # 运行测试 UI 界面 (http://localhost:51204/__vitest__/)
|
||||
npm run test:ui # 运行测试 UI 界面 (http://localhost:5174/__vitest__/)
|
||||
npm run test:coverage # 生成测试覆盖率报告
|
||||
```
|
||||
|
||||
**测试统计**：
|
||||
- 总测试文件：6 个
|
||||
- 总测试用例：58 个
|
||||
- 测试执行时间：约 5-6 秒
|
||||
- 覆盖率：可查看 HTML 报告
|
||||
|
||||
**测试策略**：
|
||||
- 使用 mock 函数模拟外部 API（如 `window.electronAPI`）
|
||||
- 测试组件渲染、事件触发、状态管理
|
||||
- 验证用户交互流程
|
||||
- 测试边界情况和错误处理
|
||||
|
||||
## 开发注意事项
|
||||
|
||||
1. **修改检测**: 通过 `watch(settings, () => { modified.value = true }, { deep: true })` 深度监听
|
||||
@@ -275,6 +315,7 @@ npm run test:coverage # 生成测试覆盖率报告
|
||||
7. **序列化问题**: IPC 通信使用 `JSON.parse(JSON.stringify())` 避免 Vue 响应式代理问题
|
||||
8. **默认值处理**: 加载配置时检查 `undefined` 并应用默认值，防止界面显示异常
|
||||
9. **托盘切换事件**: 监听 `onApiProfileSwitched` 处理托盘发起的配置切换
|
||||
10. **样式系统**: 使用 Windows UI Kit 设计系统，所有变量在 `global.less` 中定义
|
||||
|
||||
## 图标使用
|
||||
|
||||
@@ -311,19 +352,12 @@ import { Save, Config, Key, Server, Globe, Setting, Add, Edit, Delete, Exchange,
|
||||
- MCP 服务器编辑使用侧边面板 (从右侧滑入)
|
||||
- API 配置编辑使用模态对话框
|
||||
|
||||
### 主题变量
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #f8fafc;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-tertiary: #94a3b8;
|
||||
--accent: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--border: #e2e8f0;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
}
|
||||
```
|
||||
## 版本历史
|
||||
|
||||
| 版本 | 日期 | 主要变更 |
|
||||
|------|------|----------|
|
||||
| 1.6.0 | 2026-04-18 | 架构：重构样式系统，采用 Windows 11 Fluent Design 规范 |
|
||||
| 1.5.1 | 2026-04-17 | 新增系统托盘功能，托盘快速切换 API 配置 |
|
||||
| 1.5.0 | 2026-04-16 | 新增自定义消息对话框，API 配置重命名 |
|
||||
| 1.4.0 | 2026-04-14 | 新增多环境配置文件管理 |
|
||||
| 1.0.0 | 2026-04-14 | 项目初始化 |
|
||||
|
||||
14
CHANGELOG.md
14
CHANGELOG.md
@@ -2,6 +2,20 @@
|
||||
|
||||
所有重要的版本更新都会记录在此文件中。
|
||||
|
||||
## [1.6.0] - 2026-04-18
|
||||
|
||||
### 架构
|
||||
- **重构样式系统：采用 Windows 11 Fluent Design 规范**
|
||||
- 完整实现 Windows UI Kit 设计系统
|
||||
- 三种主题支持：Xcode / Dark / Solarized Dark
|
||||
- Mica-inspired 半透明层次设计
|
||||
- Segoe UI Variable 字体系统
|
||||
- 四级圆角和阴影层次
|
||||
|
||||
### 新增
|
||||
- **vue-i18n 国际化支持**
|
||||
- **less CSS 预处理器**
|
||||
|
||||
## [1.5.1] - 2026-04-17
|
||||
|
||||
### 新增
|
||||
|
||||
22
README.md
22
README.md
@@ -12,6 +12,8 @@
|
||||
| @icon-park/vue-next | ^1.4.2 | 图标库 |
|
||||
| concurrently | ^8.2.2 | 并发执行工具 |
|
||||
| electron-builder | ^24.13.3 | 应用打包工具 |
|
||||
| vue-i18n | ^9.14.5 | 国际化支持 |
|
||||
| less | ^4.6.4 | CSS 预处理器 |
|
||||
|
||||
## 项目结构
|
||||
|
||||
@@ -88,7 +90,7 @@ npm run dist # 完整构建和打包
|
||||
配置应用程序的常规选项：
|
||||
|
||||
- **语言**: zh-CN / en-US / ja-JP
|
||||
- **主题**: Xcode / Dark / Light / Solarized Dark
|
||||
- **主题**: Xcode / Dark / Solarized Dark
|
||||
- **启动动画**: 已显示 / 未显示
|
||||
- **检查点保存**: 启用 / 禁用
|
||||
|
||||
@@ -151,6 +153,22 @@ npm run dist # 完整构建和打包
|
||||
- `nodeIntegration: false` - 禁用 Node.js
|
||||
- `webSecurity: false` - 仅开发环境解决 CSP 问题
|
||||
|
||||
## 设计系统
|
||||
|
||||
本项目采用 **Windows 11 Fluent Design** 设计规范，实现统一的视觉效果。
|
||||
|
||||
### 主题支持
|
||||
- **Xcode**: macOS 风格浅色主题
|
||||
- **Dark**: Windows 11 风格深色主题
|
||||
- **Solarized Dark**: Solarized 配色深色主题
|
||||
|
||||
### 设计特点
|
||||
- **Mica-inspired 层次感**: 使用半透明背景和分层深度
|
||||
- **圆角系统**: 4px / 6px / 8px / 12px 四级圆角
|
||||
- **阴影层次**: sm / md / lg / xl 四级阴影
|
||||
- **过渡动画**: 0.1s-0.2s 流畅曲线
|
||||
- **Segoe UI Variable 字体**: Windows 11 原生字体
|
||||
|
||||
## 打包配置
|
||||
|
||||
### Windows 平台
|
||||
@@ -191,3 +209,5 @@ npm run dist # 完整构建和打包
|
||||
## 许可证
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright © 2026 上海潘哆呐科技有限公司
|
||||
|
||||
2
main.js
2
main.js
@@ -199,7 +199,7 @@ function createWindow() {
|
||||
height: 750,
|
||||
minWidth: 900,
|
||||
minHeight: 600,
|
||||
backgroundColor: '#f3f3f3',
|
||||
backgroundMaterial: 'acrylic', // on Windows 11
|
||||
frame: false,
|
||||
show: false,
|
||||
icon: path.join(__dirname, 'build', 'icon.ico'),
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iflow-settings-editor",
|
||||
"version": "1.5.1",
|
||||
"version": "1.6.0",
|
||||
"description": "一个用于编辑 iFlow CLI 配置文件的桌面应用程序。",
|
||||
"main": "main.js",
|
||||
"author": "上海潘哆呐科技有限公司",
|
||||
@@ -29,7 +29,7 @@
|
||||
"build": {
|
||||
"appId": "com.iflow.settings-editor",
|
||||
"productName": "iFlow Settings Editor",
|
||||
"copyright": "Copyright © 2025 上海潘哆呐科技有限公司",
|
||||
"copyright": "Copyright © 2026 上海潘哆呐科技有限公司",
|
||||
"directories": {
|
||||
"output": "release",
|
||||
"buildResources": "build"
|
||||
|
||||
@@ -135,47 +135,56 @@ defineEmits([
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style API Edit Dialog - Fluent Design
|
||||
.api-edit-dialog {
|
||||
min-width: 480px;
|
||||
max-width: 520px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.api-edit-dialog .dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--control-fill);
|
||||
}
|
||||
|
||||
.api-edit-dialog .dialog-title {
|
||||
font-size: 15px;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: var(--space-sm);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.api-edit-dialog .dialog-title .iconpark-icon {
|
||||
|
||||
.iconpark-icon {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
.api-edit-dialog .dialog-body {
|
||||
padding: 24px;
|
||||
padding: var(--space-xl);
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.api-edit-dialog .dialog-body .form-group {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.api-edit-dialog .dialog-body .form-group:last-child {
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--space-lg);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-edit-dialog .dialog-actions {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
border-top: 1px solid var(--border-light);
|
||||
background: var(--control-fill);
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,27 +17,31 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style Footer - Fluent Design
|
||||
.footer {
|
||||
height: 28px;
|
||||
height: 26px;
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border);
|
||||
border-top: 1px solid var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.footer-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,53 +42,61 @@ watch(() => props.dialog.show, (show) => {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style Input Dialog - Fluent Design
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1300;
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
background: var(--bg-elevated);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-xl);
|
||||
min-width: 360px;
|
||||
max-width: 480px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: slideUp 0.2s ease;
|
||||
box-shadow: var(--shadow-xl);
|
||||
animation: scaleIn 0.2s ease;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 15px;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.dialog-confirm-text {
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--space-md);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 22px;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
|
||||
@keyframes scaleIn {
|
||||
from { opacity: 0; transform: scale(0.96); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,72 +42,93 @@ defineEmits(['close'])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style Message Dialog - Fluent Design
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1300;
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.message-dialog {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 32px 24px;
|
||||
z-index: 1400;
|
||||
padding: var(--space-2xl) var(--space-xl);
|
||||
animation: scaleIn 0.2s ease;
|
||||
}
|
||||
|
||||
.message-dialog-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 16px;
|
||||
margin: 0 auto var(--space-md);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.message-dialog-icon svg {
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-dialog-icon-info {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: var(--accent);
|
||||
background: var(--info-bg);
|
||||
color: var(--info);
|
||||
}
|
||||
|
||||
.message-dialog-icon-success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
background: var(--success-bg);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.message-dialog-icon-warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.message-dialog-icon-error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.message-dialog-title {
|
||||
font-size: 16px;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--space-xs);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.message-dialog-message {
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.message-dialog .dialog-actions {
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
margin-top: var(--space-xl);
|
||||
|
||||
.btn {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from { opacity: 0; transform: scale(0.96); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -93,17 +93,19 @@ watch(() => props.data, (val) => {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style Side Panel - Fluent Design
|
||||
.side-panel-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
backdrop-filter: blur(2px);
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.2s ease;
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -111,32 +113,36 @@ watch(() => props.data, (val) => {
|
||||
bottom: 0;
|
||||
width: 420px;
|
||||
max-width: 100%;
|
||||
background: var(--bg-secondary);
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
|
||||
background: var(--bg-elevated);
|
||||
border-left: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: slideInFromRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.side-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--control-fill);
|
||||
}
|
||||
|
||||
.side-panel-title {
|
||||
font-size: 15px;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: var(--space-sm);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.side-panel-title .iconpark-icon {
|
||||
|
||||
.iconpark-icon {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
.side-panel-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -147,53 +153,58 @@ watch(() => props.data, (val) => {
|
||||
background: transparent;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.side-panel-close:hover {
|
||||
background: var(--bg-hover);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition);
|
||||
|
||||
&:hover {
|
||||
background: var(--control-fill-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.side-panel-close svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.side-panel-body {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
padding: var(--space-xl);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.side-panel-body .form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.side-panel-body .form-group:last-child {
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--space-lg);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-required {
|
||||
color: var(--danger);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.side-panel-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
border-top: 1px solid var(--border-light);
|
||||
background: var(--control-fill);
|
||||
}
|
||||
|
||||
.side-panel-footer-right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,58 +40,76 @@ defineEmits(['navigate'])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style Sidebar - Fluent Design
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
width: 220px;
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 24px 20px;
|
||||
border-right: 1px solid var(--border-light);
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
gap: 24px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-tertiary);
|
||||
padding: 0 14px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.15s ease;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
gap: 5px;
|
||||
}
|
||||
.nav-item:hover {
|
||||
background: var(--bg-hover);
|
||||
font-weight: 400;
|
||||
gap: 10px;
|
||||
|
||||
&:hover {
|
||||
background: var(--control-fill);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.nav-item.active {
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--accent-light);
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
|
||||
.iconpark-icon {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-item-badge {
|
||||
margin-left: auto;
|
||||
background: var(--bg-tertiary);
|
||||
background: var(--control-fill);
|
||||
color: var(--text-tertiary);
|
||||
padding: 2px 8px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,37 +27,41 @@ const close = () => window.electronAPI.close()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style Title Bar - Fluent Design
|
||||
.titlebar {
|
||||
height: 32px;
|
||||
background: var(--bg-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
padding: 0 4px 0 12px;
|
||||
-webkit-app-region: drag;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.titlebar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.titlebar-title {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.titlebar-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.titlebar-btn {
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
width: 46px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -65,22 +69,32 @@ const close = () => window.electronAPI.close()
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.titlebar-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
transition: background 0.1s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--control-fill-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.titlebar-btn.close:hover {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
.titlebar-btn svg {
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--control-fill-pressed);
|
||||
}
|
||||
|
||||
&.close:hover {
|
||||
background: #c42b1c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.close:active {
|
||||
background: #a72b1c;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.5;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -100,116 +100,119 @@ const getProfileIconStyle = name => {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style Profile List - Fluent Design
|
||||
.profile-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profile-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
padding: 12px 14px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.15s ease;
|
||||
animation: fadeIn 0.3s ease backwards;
|
||||
|
||||
&:nth-child(1) { animation-delay: 0.02s; }
|
||||
&:nth-child(2) { animation-delay: 0.04s; }
|
||||
&:nth-child(3) { animation-delay: 0.06s; }
|
||||
&:nth-child(4) { animation-delay: 0.08s; }
|
||||
&:nth-child(5) { animation-delay: 0.1s; }
|
||||
|
||||
&:hover {
|
||||
background: var(--control-fill);
|
||||
border-color: var(--border);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--accent-light);
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
}
|
||||
.profile-item:nth-child(1) {
|
||||
animation-delay: 0.02s;
|
||||
}
|
||||
.profile-item:nth-child(2) {
|
||||
animation-delay: 0.04s;
|
||||
}
|
||||
.profile-item:nth-child(3) {
|
||||
animation-delay: 0.06s;
|
||||
}
|
||||
.profile-item:nth-child(4) {
|
||||
animation-delay: 0.08s;
|
||||
}
|
||||
.profile-item:nth-child(5) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.profile-item:hover {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--text-tertiary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.profile-item.active {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
|
||||
box-shadow:
|
||||
0 0 0 1px var(--accent),
|
||||
0 4px 12px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.profile-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.profile-icon-text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 14px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.profile-url {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 3px;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-status {
|
||||
margin-left: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: var(--accent);
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-radius: var(--radius);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
.status-badge svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 12px;
|
||||
gap: 2px;
|
||||
margin-left: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.profile-item:hover .profile-actions,
|
||||
.profile-item.active .profile-actions {
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
.profile-item:hover &,
|
||||
.profile-item.active & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -218,28 +221,32 @@ const getProfileIconStyle = name => {
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
transition: all 0.1s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--control-fill);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.action-btn.action-btn-danger:hover {
|
||||
}
|
||||
|
||||
&.action-btn-danger:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
@@ -60,97 +60,109 @@ defineEmits(['add-server', 'select-server'])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// Windows 11 Style Server List - Fluent Design
|
||||
.server-list {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.server-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 18px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.15s ease;
|
||||
animation: fadeIn 0.3s ease backwards;
|
||||
}
|
||||
.server-item:nth-child(1) { animation-delay: 0.02s; }
|
||||
.server-item:nth-child(2) { animation-delay: 0.04s; }
|
||||
.server-item:nth-child(3) { animation-delay: 0.06s; }
|
||||
.server-item:nth-child(4) { animation-delay: 0.08s; }
|
||||
.server-item:nth-child(5) { animation-delay: 0.1s; }
|
||||
.server-item:nth-child(6) { animation-delay: 0.12s; }
|
||||
.server-item:nth-child(7) { animation-delay: 0.14s; }
|
||||
.server-item:nth-child(8) { animation-delay: 0.16s; }
|
||||
.server-item:last-child { border-bottom: none; }
|
||||
.server-item:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.server-item.selected {
|
||||
|
||||
&:nth-child(1) { animation-delay: 0.02s; }
|
||||
&:nth-child(2) { animation-delay: 0.04s; }
|
||||
&:nth-child(3) { animation-delay: 0.06s; }
|
||||
&:nth-child(4) { animation-delay: 0.08s; }
|
||||
&:nth-child(5) { animation-delay: 0.1s; }
|
||||
&:nth-child(6) { animation-delay: 0.12s; }
|
||||
&:nth-child(7) { animation-delay: 0.14s; }
|
||||
&:nth-child(8) { animation-delay: 0.16s; }
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--control-fill);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--accent-light);
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 15px;
|
||||
border-left: 2px solid var(--accent);
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.server-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.server-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.server-desc {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
margin-top: 3px;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.server-status {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.3;
|
||||
font-size: 40px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.4;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 4px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state-desc {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user