product/iFlow-Settings-Editor-GUI
1
0
Fork 0
Code Issues 3 Pull Requests Projects Releases 2 Activity

架构 重构样式系统：采用 Windows 11 Fluent Design 规范

Browse Source
This commit is contained in:
袁涛
2026-04-18 18:55:06 +08:00
parent cf1070a279
commit 20b065af5b
15 changed files with 1031 additions and 701 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
AGENTS.md
View File

@@ -16,8 +16,10 @@ iFlow 设置编辑器是一个基于 Electron + Vue 3 的桌面应用程序，
| concurrently | ^8.2.2 | 并发执行工具 | | concurrently | ^8.2.2 | 并发执行工具 |
| electron-builder | ^24.13.3 | 应用打包工具 | | electron-builder | ^24.13.3 | 应用打包工具 |
| vitest | ^4.1.4 | 单元测试框架 | | vitest | ^4.1.4 | 单元测试框架 |
| @vue/test-utils | ^2.5.0 | Vue 组件测试工具 | | @vue/test-utils | ^2.4.6 | Vue 组件测试工具 |
| happy-dom | Latest | 浏览器环境模拟 | | happy-dom | ^20.9.0 | 浏览器环境模拟 |
| vue-i18n | ^9.14.5 | 国际化支持 |
| less | ^4.6.4 | CSS 预处理器 |
## 项目结构 ## 项目结构
@@ -28,10 +30,11 @@ iflow-settings-editor/
├── index.html # HTML 入口 ├── index.html # HTML 入口
├── package.json # 项目配置 ├── package.json # 项目配置
├── vite.config.js # Vite 配置 ├── vite.config.js # Vite 配置
├── vitest.config.js # Vitest 测试配置 ├── vitest.config.js # Vitest 测试配置
├── src/ ├── src/
│ ├── main.js # Vue 入口 │ ├── main.js # Vue 入口
│ ├── components/ # 可复用组件 │ ├── App.vue # 根组件
│ ├── components/ # 可复用组件
│ │ ├── ApiProfileDialog.vue │ │ ├── ApiProfileDialog.vue
│ │ ├── Footer.vue │ │ ├── Footer.vue
│ │ ├── InputDialog.vue │ │ ├── InputDialog.vue
@@ -39,12 +42,16 @@ iflow-settings-editor/
│ │ ├── ServerPanel.vue │ │ ├── ServerPanel.vue
│ │ ├── SideBar.vue │ │ ├── SideBar.vue
│ │ └── TitleBar.vue │ │ └── TitleBar.vue
│ ├── views/ # 页面视图组件 │ ├── views/ # 页面视图组件
│ │ ├── ApiConfig.vue │ │ ├── ApiConfig.vue
│ │ ├── GeneralSettings.vue │ │ ├── GeneralSettings.vue
│ │ └── McpServers.vue │ │ └── McpServers.vue
│ └── styles/ # 全局样式 │ ├── styles/ # 全局样式
│ └── global.less │ │ └── global.less
│ └── locales/ # 国际化资源
│ ├── index.js
│ ├── en-US.js
│ └── ja-JP.js
├── build/ # 构建资源 (图标等) ├── build/ # 构建资源 (图标等)
├── dist/ # Vite 构建输出 ├── dist/ # Vite 构建输出
├── release/ # 打包输出目录 ├── release/ # 打包输出目录
@@ -84,7 +91,10 @@ window.electronAPI = {
// 托盘事件监听 // 托盘事件监听
onApiProfileSwitched: (callback) => { onApiProfileSwitched: (callback) => {
ipcRenderer.on('api-profile-switched', (event, profileName) => callback(profileName)) ipcRenderer.on('api-profile-switched', (event, profileName) => callback(profileName))
} },
// 语言切换通知
notifyLanguageChanged: () => ipcRenderer.send('language-changed')
} }
``` ```
@@ -103,7 +113,7 @@ window.electronAPI = {
- 双击托盘图标显示主窗口 - 双击托盘图标显示主窗口
### API 配置切换 ### API 配置切换
- 支持多环境配置: 默认配置、开发环境、预发布环境、生产环境 - 支持多环境配置: 默认配置，开发环境、预发布环境、生产环境
- 配置文件管理: 支持创建、编辑、复制、删除、重命名 - 配置文件管理: 支持创建、编辑、复制、删除、重命名
- 单独保存每个环境的 API 配置到 `apiProfiles` 对象 - 单独保存每个环境的 API 配置到 `apiProfiles` 对象
- 切换配置时直接应用新配置，无需确认 - 切换配置时直接应用新配置，无需确认
@@ -125,17 +135,17 @@ npm run build:win32 # 构建 Windows x86 安装包
npm run build:win-portable # 构建可移植版本 npm run build:win-portable # 构建可移植版本
npm run build:win-installer # 构建 NSIS 安装包 npm run build:win-installer # 构建 NSIS 安装包
npm run dist # 完整构建和打包 npm run dist # 完整构建和打包
npm run test # 运行所有测试（监听模式） npm run test # 运行所有测试（监听模式）
npm run test:run # 运行测试一次 npm run test:run # 运行测试一次
npm run test:ui # 运行测试 UI 界面 npm run test:ui # 运行测试 UI 界面
npm run test:coverage # 生成测试覆盖率报告 npm run test:coverage # 生成测试覆盖率报告
``` ```
## 功能模块 ## 功能模块
### 1. 常规设置 (General) ### 1. 常规设置 (General)
- **语言**: zh-CN / en-US / ja-JP - **语言**: 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' - `currentApiProfile`: 'default'
- `mcpServers`: {} - `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 作为测试运行器 - 使用 Vitest 作为测试运行器
@@ -225,45 +287,23 @@ const API_FIELDS = ['selectedAuthType', 'apiKey', 'baseUrl', 'modelName', 'searc
``` ```
src/ src/
├── components/ ├── components/
│ ├── Footer.test.js # Footer 组件测试 (5 个测试) │ ├── Footer.test.js # Footer 组件测试
│ ├── SideBar.test.js # 侧边栏测试 (10 个测试) │ ├── SideBar.test.js # 侧边栏测试
│ └── TitleBar.test.js # 标题栏测试 (8 个测试) │ └── TitleBar.test.js # 标题栏测试
└── views/ └── views/
├── ApiConfig.test.js # API 配置测试 (15 个测试) ├── ApiConfig.test.js # API 配置测试
├── GeneralSettings.test.js # 常规设置测试 (8 个测试) ├── GeneralSettings.test.js # 常规设置测试
└── McpServers.test.js # MCP 服务器测试 (12 个测试) └── McpServers.test.js # MCP 服务器测试
``` ```
**测试覆盖范围**：
- **视图组件**：
- GeneralSettings - 常规设置页面
- ApiConfig - API 配置管理
- McpServers - MCP 服务器管理
- **UI 组件**：
- Footer - 状态栏
- TitleBar - 窗口标题栏
- SideBar - 侧边导航栏
**测试命令**： **测试命令**：
```bash ```bash
npm run test # 运行所有测试（监听模式） npm run test # 运行所有测试（监听模式）
npm run test:run # 运行测试一次 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 # 生成测试覆盖率报告 npm run test:coverage # 生成测试覆盖率报告
``` ```
**测试统计**：
- 总测试文件：6 个
- 总测试用例：58 个
- 测试执行时间：约 5-6 秒
- 覆盖率：可查看 HTML 报告
**测试策略**：
- 使用 mock 函数模拟外部 API（如 `window.electronAPI`）
- 测试组件渲染、事件触发、状态管理
- 验证用户交互流程
- 测试边界情况和错误处理
## 开发注意事项 ## 开发注意事项
1. **修改检测**: 通过 `watch(settings, () => { modified.value = true }, { deep: true })` 深度监听 1. **修改检测**: 通过 `watch(settings, () => { modified.value = true }, { deep: true })` 深度监听
@@ -275,6 +315,7 @@ npm run test:coverage # 生成测试覆盖率报告
7. **序列化问题**: IPC 通信使用 `JSON.parse(JSON.stringify())` 避免 Vue 响应式代理问题 7. **序列化问题**: IPC 通信使用 `JSON.parse(JSON.stringify())` 避免 Vue 响应式代理问题
8. **默认值处理**: 加载配置时检查 `undefined` 并应用默认值，防止界面显示异常 8. **默认值处理**: 加载配置时检查 `undefined` 并应用默认值，防止界面显示异常
9. **托盘切换事件**: 监听 `onApiProfileSwitched` 处理托盘发起的配置切换 9. **托盘切换事件**: 监听 `onApiProfileSwitched` 处理托盘发起的配置切换
10. **样式系统**: 使用 Windows UI Kit 设计系统，所有变量在 `global.less` 中定义
## 图标使用 ## 图标使用
@@ -311,19 +352,12 @@ import { Save, Config, Key, Server, Globe, Setting, Add, Edit, Delete, Exchange,
- MCP 服务器编辑使用侧边面板 (从右侧滑入) - MCP 服务器编辑使用侧边面板 (从右侧滑入)
- API 配置编辑使用模态对话框 - API 配置编辑使用模态对话框
### 主题变量 ## 版本历史
```css
:root { | 版本 | 日期 | 主要变更 |
--bg-primary: #f8fafc; |------|------|----------|
--bg-secondary: #ffffff; | 1.6.0 | 2026-04-18 | 架构：重构样式系统，采用 Windows 11 Fluent Design 规范 |
--bg-tertiary: #f1f5f9; | 1.5.1 | 2026-04-17 | 新增系统托盘功能，托盘快速切换 API 配置 |
--text-primary: #0f172a; | 1.5.0 | 2026-04-16 | 新增自定义消息对话框，API 配置重命名 |
--text-secondary: #475569; | 1.4.0 | 2026-04-14 | 新增多环境配置文件管理 |
--text-tertiary: #94a3b8; | 1.0.0 | 2026-04-14 | 项目初始化 |
--accent: #3b82f6;
--accent-hover: #2563eb;
--border: #e2e8f0;
--success: #10b981;
--danger: #ef4444;
}
```

14
CHANGELOG.md
View File

@@ -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 ## [1.5.1] - 2026-04-17
### 新增 ### 新增

22
README.md
View File

@@ -12,6 +12,8 @@
| @icon-park/vue-next | ^1.4.2 | 图标库 | | @icon-park/vue-next | ^1.4.2 | 图标库 |
| concurrently | ^8.2.2 | 并发执行工具 | | concurrently | ^8.2.2 | 并发执行工具 |
| electron-builder | ^24.13.3 | 应用打包工具 | | 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 - **语言**: 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 - `nodeIntegration: false` - 禁用 Node.js
- `webSecurity: false` - 仅开发环境解决 CSP 问题 - `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 平台 ### Windows 平台
@@ -191,3 +209,5 @@ npm run dist # 完整构建和打包
## 许可证 ## 许可证
MIT License MIT License
Copyright © 2026 上海潘哆呐科技有限公司

2
main.js
View File

@@ -199,7 +199,7 @@ function createWindow() {
height: 750, height: 750,
minWidth: 900, minWidth: 900,
minHeight: 600, minHeight: 600,
backgroundColor: '#f3f3f3', backgroundMaterial: 'acrylic', // on Windows 11
frame: false, frame: false,
show: false, show: false,
icon: path.join(__dirname, 'build', 'icon.ico'), icon: path.join(__dirname, 'build', 'icon.ico'),

4
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "iflow-settings-editor", "name": "iflow-settings-editor",
"version": "1.5.1", "version": "1.6.0",
"description": "一个用于编辑 iFlow CLI 配置文件的桌面应用程序。", "description": "一个用于编辑 iFlow CLI 配置文件的桌面应用程序。",
"main": "main.js", "main": "main.js",
"author": "上海潘哆呐科技有限公司", "author": "上海潘哆呐科技有限公司",
@@ -29,7 +29,7 @@
"build": { "build": {
"appId": "com.iflow.settings-editor", "appId": "com.iflow.settings-editor",
"productName": "iFlow Settings Editor", "productName": "iFlow Settings Editor",
"copyright": "Copyright © 2025 上海潘哆呐科技有限公司", "copyright": "Copyright © 2026 上海潘哆呐科技有限公司",
"directories": { "directories": {
"output": "release", "output": "release",
"buildResources": "build" "buildResources": "build"

45
src/components/ApiProfileDialog.vue
View File

@@ -135,47 +135,56 @@ defineEmits([
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style API Edit Dialog - Fluent Design
.api-edit-dialog { .api-edit-dialog {
min-width: 480px; min-width: 480px;
max-width: 520px; max-width: 520px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
border-radius: var(--radius-xl);
} }
.api-edit-dialog .dialog-header { .api-edit-dialog .dialog-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px 24px; padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border-light);
background: var(--bg-tertiary); background: var(--control-fill);
} }
.api-edit-dialog .dialog-title { .api-edit-dialog .dialog-title {
font-size: 15px; font-size: var(--font-size-base);
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: var(--space-sm);
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 0; margin-bottom: 0;
.iconpark-icon {
color: var(--accent);
}
} }
.api-edit-dialog .dialog-title .iconpark-icon {
color: var(--accent);
}
.api-edit-dialog .dialog-body { .api-edit-dialog .dialog-body {
padding: 24px; padding: var(--space-xl);
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
.form-group {
margin-bottom: var(--space-lg);
&:last-child {
margin-bottom: 0;
}
}
} }
.api-edit-dialog .dialog-body .form-group {
margin-bottom: 18px;
}
.api-edit-dialog .dialog-body .form-group:last-child {
margin-bottom: 0;
}
.api-edit-dialog .dialog-actions { .api-edit-dialog .dialog-actions {
padding: 16px 24px; padding: var(--space-lg) var(--space-xl);
border-top: 1px solid var(--border); border-top: 1px solid var(--border-light);
background: var(--bg-tertiary); background: var(--control-fill);
margin-top: 0; margin-top: 0;
} }
</style> </style>

10
src/components/Footer.vue
View File

@@ -17,27 +17,31 @@ defineProps({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style Footer - Fluent Design
.footer { .footer {
height: 28px; height: 26px;
background: var(--bg-secondary); background: var(--bg-secondary);
border-top: 1px solid var(--border); border-top: 1px solid var(--border-light);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 16px; padding: 0 16px;
flex-shrink: 0; flex-shrink: 0;
} }
.footer-status { .footer-status {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 12px; font-size: 11px;
color: var(--text-tertiary); color: var(--text-tertiary);
} }
.footer-status-dot { .footer-status-dot {
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--success); background: var(--success);
box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
} }
</style> </style>

40
src/components/InputDialog.vue
View File

@@ -42,53 +42,61 @@ watch(() => props.dialog.show, (show) => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style Input Dialog - Fluent Design
.dialog-overlay { .dialog-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(15, 23, 42, 0.6); background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px); backdrop-filter: blur(2px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1300; z-index: 1300;
animation: fadeIn 0.15s ease; animation: fadeIn 0.15s ease;
} }
.dialog { .dialog {
background: var(--bg-secondary); background: var(--bg-elevated);
border-radius: var(--radius-lg); border-radius: var(--radius-xl);
padding: 24px; padding: var(--space-xl);
min-width: 360px; min-width: 360px;
max-width: 480px; max-width: 480px;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-xl);
animation: slideUp 0.2s ease; animation: scaleIn 0.2s ease;
} }
.dialog-title { .dialog-title {
font-size: 15px; font-size: var(--font-size-lg);
font-weight: 600; font-weight: 600;
margin-bottom: 18px; margin-bottom: var(--space-md);
color: var(--text-primary);
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.dialog-confirm-text { .dialog-confirm-text {
font-size: 14px; font-size: var(--font-size-sm);
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 8px; margin-bottom: var(--space-md);
line-height: 1.5; line-height: 1.5;
} }
.dialog-actions { .dialog-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: var(--space-sm);
margin-top: 22px; margin-top: var(--space-xl);
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; } from { opacity: 0; }
to { opacity: 1; } to { opacity: 1; }
} }
@keyframes slideUp {
from { opacity: 0; transform: translateY(10px); } @keyframes scaleIn {
to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
} }
</style> </style>

59
src/components/MessageDialog.vue
View File

@@ -42,72 +42,93 @@ defineEmits(['close'])
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style Message Dialog - Fluent Design
.dialog-overlay { .dialog-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(15, 23, 42, 0.6); background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px); backdrop-filter: blur(2px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1300; z-index: 1300;
animation: fadeIn 0.15s ease; animation: fadeIn 0.15s ease;
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; } from { opacity: 0; }
to { opacity: 1; } to { opacity: 1; }
} }
.message-dialog { .message-dialog {
position: relative; position: relative;
text-align: center; text-align: center;
padding: 32px 24px; padding: var(--space-2xl) var(--space-xl);
z-index: 1400; animation: scaleIn 0.2s ease;
} }
.message-dialog-icon { .message-dialog-icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin: 0 auto 16px; margin: 0 auto var(--space-md);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
svg {
width: 24px;
height: 24px;
}
} }
.message-dialog-icon svg {
width: 24px;
height: 24px;
}
.message-dialog-icon-info { .message-dialog-icon-info {
background: rgba(59, 130, 246, 0.1); background: var(--info-bg);
color: var(--accent); color: var(--info);
} }
.message-dialog-icon-success { .message-dialog-icon-success {
background: rgba(16, 185, 129, 0.1); background: var(--success-bg);
color: var(--success); color: var(--success);
} }
.message-dialog-icon-warning { .message-dialog-icon-warning {
background: rgba(245, 158, 11, 0.1); background: var(--warning-bg);
color: #f59e0b; color: var(--warning);
} }
.message-dialog-icon-error { .message-dialog-icon-error {
background: rgba(239, 68, 68, 0.1); background: var(--danger-bg);
color: var(--danger); color: var(--danger);
} }
.message-dialog-title { .message-dialog-title {
font-size: 16px; font-size: var(--font-size-lg);
font-weight: 600; font-weight: 600;
margin-bottom: 8px; margin-bottom: var(--space-xs);
color: var(--text-primary); color: var(--text-primary);
} }
.message-dialog-message { .message-dialog-message {
font-size: 14px; font-size: var(--font-size-sm);
color: var(--text-secondary); color: var(--text-secondary);
line-height: 1.5; line-height: 1.5;
} }
.message-dialog .dialog-actions { .message-dialog .dialog-actions {
justify-content: center; 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> </style>

103
src/components/ServerPanel.vue
View File

@@ -93,17 +93,19 @@ watch(() => props.data, (val) => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style Side Panel - Fluent Design
.side-panel-overlay { .side-panel-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(15, 23, 42, 0.5); background: rgba(0, 0, 0, 0.32);
backdrop-filter: blur(2px); backdrop-filter: blur(4px);
z-index: 1000; z-index: 1000;
animation: fadeIn 0.2s ease; animation: fadeIn 0.15s ease;
} }
.side-panel { .side-panel {
position: absolute; position: absolute;
right: 0; right: 0;
@@ -111,32 +113,36 @@ watch(() => props.data, (val) => {
bottom: 0; bottom: 0;
width: 420px; width: 420px;
max-width: 100%; max-width: 100%;
background: var(--bg-secondary); background: var(--bg-elevated);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); border-left: 1px solid var(--border);
box-shadow: var(--shadow-xl);
display: flex; display: flex;
flex-direction: column; 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 { .side-panel-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px 24px; padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border-light);
background: var(--bg-tertiary); background: var(--control-fill);
} }
.side-panel-title { .side-panel-title {
font-size: 15px; font-size: var(--font-size-base);
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: var(--space-sm);
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.01em;
} .iconpark-icon {
.side-panel-title .iconpark-icon { color: var(--accent);
color: var(--accent); }
} }
.side-panel-close { .side-panel-close {
width: 32px; width: 32px;
height: 32px; height: 32px;
@@ -147,53 +153,58 @@ watch(() => props.data, (val) => {
background: transparent; background: transparent;
color: var(--text-tertiary); color: var(--text-tertiary);
cursor: pointer; cursor: pointer;
border-radius: var(--radius); border-radius: var(--radius-sm);
transition: all 0.2s ease; transition: all var(--transition);
}
.side-panel-close:hover { &:hover {
background: var(--bg-hover); background: var(--control-fill-hover);
color: var(--text-primary); color: var(--text-primary);
} }
.side-panel-close svg {
width: 14px; svg {
height: 14px; width: 12px;
stroke: currentColor; height: 12px;
stroke-width: 1.5; stroke: currentColor;
fill: none; stroke-width: 1.5;
fill: none;
}
} }
.side-panel-body { .side-panel-body {
flex: 1; flex: 1;
padding: 24px; padding: var(--space-xl);
overflow-y: auto; overflow-y: auto;
.form-group {
margin-bottom: var(--space-lg);
&:last-child {
margin-bottom: 0;
}
}
} }
.side-panel-body .form-group {
margin-bottom: 20px;
}
.side-panel-body .form-group:last-child {
margin-bottom: 0;
}
.form-required {
color: var(--danger);
font-weight: 500;
}
.side-panel-footer { .side-panel-footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 16px 24px; padding: var(--space-lg) var(--space-xl);
border-top: 1px solid var(--border); border-top: 1px solid var(--border-light);
background: var(--bg-tertiary); background: var(--control-fill);
} }
.side-panel-footer-right { .side-panel-footer-right {
display: flex; display: flex;
gap: 10px; gap: var(--space-sm);
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; } from { opacity: 0; }
to { opacity: 1; } to { opacity: 1; }
} }
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; } @keyframes slideInFromRight {
to { transform: translateX(0); opacity: 1; } from { transform: translateX(100%); }
to { transform: translateX(0); }
} }
</style> </style>

64
src/components/SideBar.vue
View File

@@ -40,58 +40,76 @@ defineEmits(['navigate'])
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style Sidebar - Fluent Design
.sidebar { .sidebar {
width: 240px; width: 220px;
background: var(--bg-secondary); background: var(--bg-secondary);
border-right: 1px solid var(--border); border-right: 1px solid var(--border-light);
padding: 24px 20px; padding: 16px 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 28px; gap: 24px;
flex-shrink: 0; flex-shrink: 0;
overflow-y: auto; overflow-y: auto;
} }
.sidebar-section { .sidebar-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 2px;
} }
.sidebar-title { .sidebar-title {
font-size: 11px; font-size: 10px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.05em;
color: var(--text-tertiary); color: var(--text-tertiary);
padding: 0 14px; padding: 0 12px;
margin-bottom: 8px; margin-bottom: 6px;
} }
.nav-item { .nav-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 14px; padding: 10px 12px;
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.15s ease;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 400;
gap: 5px; gap: 10px;
&:hover {
background: var(--control-fill);
color: var(--text-primary);
}
&.active {
background: var(--accent-light);
color: var(--accent);
font-weight: 500;
.iconpark-icon {
color: var(--accent);
}
}
} }
.nav-item:hover {
background: var(--bg-hover); .nav-item-text {
color: var(--text-primary); flex: 1;
}
.nav-item.active {
background: var(--accent-light);
color: var(--accent);
} }
.nav-item-badge { .nav-item-badge {
margin-left: auto; margin-left: auto;
background: var(--bg-tertiary); background: var(--control-fill);
color: var(--text-tertiary); color: var(--text-tertiary);
padding: 2px 8px; padding: 1px 8px;
border-radius: 10px; border-radius: 10px;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 500;
min-width: 24px;
text-align: center;
} }
</style> </style>

62
src/components/TitleBar.vue
View File

@@ -27,37 +27,41 @@ const close = () => window.electronAPI.close()
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style Title Bar - Fluent Design
.titlebar { .titlebar {
height: 32px; height: 32px;
background: var(--bg-secondary); background: var(--bg-secondary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 8px; padding: 0 4px 0 12px;
-webkit-app-region: drag; -webkit-app-region: drag;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border-light);
flex-shrink: 0; flex-shrink: 0;
} }
.titlebar-left { .titlebar-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
} }
.titlebar-title { .titlebar-title {
font-size: 13px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.titlebar-controls { .titlebar-controls {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.titlebar-btn { .titlebar-btn {
width: 32px; width: 46px;
height: 24px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -65,22 +69,32 @@ const close = () => window.electronAPI.close()
background: transparent; background: transparent;
color: var(--text-secondary); color: var(--text-secondary);
cursor: pointer; cursor: pointer;
border-radius: 4px; transition: background 0.1s ease;
transition: all 0.15s ease;
} &:hover {
.titlebar-btn:hover { background: var(--control-fill-hover);
background: var(--bg-hover); color: var(--text-primary);
color: var(--text-primary); }
}
.titlebar-btn.close:hover { &:active {
background: var(--danger); background: var(--control-fill-pressed);
color: white; }
}
.titlebar-btn svg { &.close:hover {
width: 10px; background: #c42b1c;
height: 10px; color: #ffffff;
stroke: currentColor; }
stroke-width: 1.5;
fill: none; &.close:active {
background: #a72b1c;
}
svg {
width: 10px;
height: 10px;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
}
} }
</style> </style>

900
src/styles/global.less
View File

File diff suppressed because it is too large Load Diff

155
src/views/ApiConfig.vue
View File

@@ -100,116 +100,119 @@ const getProfileIconStyle = name => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style Profile List - Fluent Design
.profile-list { .profile-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 8px;
} }
.profile-item { .profile-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14px 16px; padding: 12px 14px;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-lg); border-radius: var(--radius);
cursor: pointer; 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; 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 { .profile-icon {
width: 40px; width: 36px;
height: 40px; height: 36px;
border-radius: 12px; border-radius: var(--radius);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; 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 { .profile-icon-text {
font-size: 16px; font-size: 14px;
font-weight: 700; font-weight: 600;
color: white; color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
} }
.profile-info { .profile-info {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
margin-left: 14px; margin-left: 12px;
} }
.profile-name { .profile-name {
font-size: 14px; font-size: 13px;
font-weight: 600; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.01em;
} }
.profile-url { .profile-url {
font-size: 12px; font-size: 11px;
color: var(--text-tertiary); color: var(--text-tertiary);
margin-top: 3px; margin-top: 2px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.profile-status { .profile-status {
margin-left: 12px; margin-left: 10px;
} }
.status-badge { .status-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 5px; gap: 4px;
padding: 5px 10px; padding: 3px 8px;
background: rgba(59, 130, 246, 0.1); background: var(--accent);
color: var(--accent); color: white;
border-radius: 16px; border-radius: var(--radius);
font-size: 12px; font-size: 11px;
font-weight: 500; font-weight: 500;
svg {
width: 10px;
height: 10px;
}
} }
.status-badge svg {
width: 12px;
height: 12px;
}
.profile-actions { .profile-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 2px;
margin-left: 12px; margin-left: 8px;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.15s ease;
}
.profile-item:hover .profile-actions, .profile-item:hover &,
.profile-item.active .profile-actions { .profile-item.active & {
opacity: 1; opacity: 1;
}
} }
.action-btn { .action-btn {
width: 32px; width: 28px;
height: 32px; height: 28px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -218,28 +221,32 @@ const getProfileIconStyle = name => {
color: var(--text-tertiary); color: var(--text-tertiary);
cursor: pointer; cursor: pointer;
border-radius: var(--radius); border-radius: var(--radius);
transition: all 0.2s ease; transition: all 0.1s ease;
}
.action-btn:hover { &:hover {
background: var(--bg-hover); background: var(--control-fill);
color: var(--text-primary); color: var(--text-primary);
} }
.action-btn.action-btn-danger:hover {
background: rgba(239, 68, 68, 0.1); &.action-btn-danger:hover {
color: var(--danger); background: rgba(239, 68, 68, 0.1);
color: var(--danger);
}
} }
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(8px); transform: translateY(6px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
.btn-sm { .btn-sm {
padding: 6px 12px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
align-self: flex-end; align-self: flex-end;
} }

96
src/views/McpServers.vue
View File

@@ -60,97 +60,109 @@ defineEmits(['add-server', 'select-server'])
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// Windows 11 Style Server List - Fluent Design
.server-list { .server-list {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-lg); border-radius: var(--radius);
overflow: hidden; overflow: hidden;
background: var(--bg-secondary); background: var(--bg-secondary);
} }
.server-item { .server-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14px 18px; padding: 12px 14px;
border-bottom: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
cursor: pointer; 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; 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; }
&: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: 2px solid var(--accent);
padding-left: 12px;
}
} }
.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 {
background: var(--accent-light);
border-left: 3px solid var(--accent);
padding-left: 15px;
}
.server-info { .server-info {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
.server-name { .server-name {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
letter-spacing: -0.01em; color: var(--text-primary);
} }
.server-desc { .server-desc {
font-size: 12px; font-size: 11px;
color: var(--text-tertiary); color: var(--text-tertiary);
margin-top: 3px; margin-top: 2px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.server-status { .server-status {
width: 8px; width: 6px;
height: 8px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--success); background: var(--success);
box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
animation: pulse 2s ease-in-out infinite;
} }
.empty-state { .empty-state {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 48px 24px; padding: 40px 24px;
text-align: center; text-align: center;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius);
} }
.empty-state-icon { .empty-state-icon {
font-size: 48px; font-size: 40px;
margin-bottom: 16px; margin-bottom: 12px;
opacity: 0.3; opacity: 0.4;
color: var(--text-tertiary); color: var(--text-tertiary);
} }
.empty-state-title { .empty-state-title {
font-size: 15px; font-size: 14px;
font-weight: 500; font-weight: 500;
margin-bottom: 6px; margin-bottom: 4px;
color: var(--text-secondary); color: var(--text-secondary);
} }
.empty-state-desc { .empty-state-desc {
font-size: 13px; font-size: 12px;
color: var(--text-tertiary); color: var(--text-tertiary);
margin-bottom: 20px; margin-bottom: 16px;
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); } from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
</style> </style>