283 lines
6.0 KiB
Markdown
283 lines
6.0 KiB
Markdown
# 设置功能快速参考
|
||
|
||
## API 端点
|
||
|
||
### 获取应用配置
|
||
```go
|
||
// Go 方法
|
||
func (a *App) GetAppConfig() (map[string]interface{}, error)
|
||
|
||
// 前端调用
|
||
const result = await window.go.main.App.GetAppConfig()
|
||
```
|
||
|
||
**响应格式：**
|
||
```json
|
||
{
|
||
"success": true,
|
||
"data": {
|
||
"tabs": [
|
||
{
|
||
"key": "db-cli",
|
||
"title": "数据库",
|
||
"visible": true,
|
||
"enabled": true
|
||
}
|
||
],
|
||
"visibleTabs": ["db-cli", "file-system", "device"],
|
||
"defaultTab": "db-cli"
|
||
}
|
||
}
|
||
```
|
||
|
||
### 保存应用配置
|
||
```go
|
||
// Go 方法
|
||
func (a *App) SaveAppConfig(req SaveAppConfigRequest) (map[string]interface{}, error)
|
||
|
||
// 前端调用
|
||
const result = await window.go.main.App.SaveAppConfig({
|
||
tabs: [
|
||
{ key: "db-cli", title: "数据库", visible: true, enabled: true }
|
||
],
|
||
visibleTabs: ["db-cli", "file-system"],
|
||
defaultTab: "db-cli"
|
||
})
|
||
```
|
||
|
||
**响应格式：**
|
||
```json
|
||
{
|
||
"success": true,
|
||
"message": "配置保存成功"
|
||
}
|
||
```
|
||
|
||
## 数据库表结构
|
||
|
||
### app_config 表
|
||
```sql
|
||
CREATE TABLE `app_config` (
|
||
`id` INTEGER PRIMARY KEY AUTOINCREMENT,
|
||
`key` VARCHAR(50) UNIQUE NOT NULL,
|
||
`value` TEXT NOT NULL,
|
||
`description` VARCHAR(200),
|
||
`created_at` DATETIME,
|
||
`updated_at` DATETIME
|
||
);
|
||
```
|
||
|
||
### 示例数据
|
||
```json
|
||
// key = "tab_config"
|
||
{
|
||
"available_tabs": [
|
||
{ "key": "db-cli", "title": "数据库", "enabled": true },
|
||
{ "key": "file-system", "title": "文件管理", "enabled": true },
|
||
{ "key": "device", "title": "设备调用测试", "enabled": true }
|
||
],
|
||
"visible_tabs": ["db-cli", "file-system", "device"],
|
||
"default_tab": "db-cli"
|
||
}
|
||
```
|
||
|
||
## 组件使用
|
||
|
||
### SettingsPanel 组件
|
||
|
||
```vue
|
||
<template>
|
||
<SettingsPanel
|
||
v-model="showSettings"
|
||
:config="appConfig"
|
||
@save="handleSaveConfig"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import SettingsPanel from './components/SettingsPanel.vue'
|
||
|
||
const showSettings = ref(false)
|
||
const appConfig = ref({
|
||
tabs: [],
|
||
visibleTabs: [],
|
||
defaultTab: 'db-cli'
|
||
})
|
||
|
||
const handleSaveConfig = async (config) => {
|
||
// config 包含:
|
||
// - tabs: Tab 定义数组
|
||
// - visibleTabs: 可见 Tab key 数组
|
||
// - defaultTab: 默认 Tab key
|
||
console.log('保存配置:', config)
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 拖拽实现
|
||
|
||
### HTML5 Drag & Drop API
|
||
|
||
```vue
|
||
<template>
|
||
<div
|
||
draggable="true"
|
||
@dragstart="handleDragStart"
|
||
@dragover.prevent="handleDragOver"
|
||
@drop="handleDrop"
|
||
@dragend="handleDragEnd"
|
||
>
|
||
拖拽元素
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const handleDragStart = (index, event) => {
|
||
event.dataTransfer.effectAllowed = 'move'
|
||
event.target.classList.add('dragging')
|
||
}
|
||
|
||
const handleDragOver = (event) => {
|
||
event.preventDefault()
|
||
event.dataTransfer.dropEffect = 'move'
|
||
}
|
||
|
||
const handleDrop = (index, event) => {
|
||
event.preventDefault()
|
||
// 处理排序逻辑
|
||
}
|
||
|
||
const handleDragEnd = (event) => {
|
||
event.target.classList.remove('dragging')
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 配置验证规则
|
||
|
||
### 前端验证
|
||
1. **至少保留一个可见 Tab**: `visibleTabs.length >= 1`
|
||
2. **默认 Tab 必须可见**: `visibleTabs.includes(defaultTab)`
|
||
3. **禁用 Tab 不可取消选中**: `!tab.enabled` 时禁用复选框
|
||
|
||
### 后端验证
|
||
1. **JSON 格式验证**: 使用 `json.Unmarshal` 验证
|
||
2. **业务规则验证**: 与前端相同
|
||
3. **数据库错误处理**: 捕获并返回友好错误信息
|
||
|
||
## 样式参考
|
||
|
||
### 拖拽元素样式
|
||
```css
|
||
.tab-sort-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
background: var(--color-fill-1);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 4px;
|
||
cursor: move;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.tab-sort-item.dragging {
|
||
opacity: 0.5;
|
||
background: var(--color-fill-2);
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.tab-sort-item:hover {
|
||
background: var(--color-fill-2);
|
||
border-color: var(--color-border-2);
|
||
}
|
||
```
|
||
|
||
## 常见问题
|
||
|
||
### Q: 如何添加新的 Tab？
|
||
A: 在 `defaultTabConfig` 中添加新的 `TabDefinition`，并确保在前端 `getComponent` 方法中添加对应的组件映射。
|
||
|
||
### Q: 如何禁用某个 Tab？
|
||
A: 将 `TabDefinition.Enabled` 设置为 `false`，前端会自动显示"不可用"标签并禁用复选框。
|
||
|
||
### Q: 配置存储在哪里？
|
||
A: 配置存储在 SQLite 数据库中，位置：`~/.u-desk/app.db`（Windows: `C:\Users\你的用户名\.u-desk\app.db`），表名：`app_config`。
|
||
|
||
### Q: 如何重置配置？
|
||
A: 删除数据库中的 `tab_config` 记录，系统会自动使用默认配置。
|
||
|
||
### Q: 拖拽功能不工作？
|
||
A: 确保元素设置了 `draggable="true"` 属性，并且正确实现了所有拖拽事件处理函数。
|
||
|
||
## 调试技巧
|
||
|
||
### 查看当前配置
|
||
```javascript
|
||
console.log('应用配置:', appConfig.value)
|
||
console.log('可见 Tabs:', visibleTabs.value)
|
||
console.log('当前激活 Tab:', activeTab.value)
|
||
```
|
||
|
||
### 查看数据库
|
||
```bash
|
||
# Windows
|
||
sqlite3 ~/.u-desk/app.db
|
||
|
||
# 查询配置
|
||
SELECT * FROM app_config WHERE key = 'tab_config';
|
||
```
|
||
|
||
### 重置配置
|
||
```sql
|
||
DELETE FROM app_config WHERE key = 'tab_config';
|
||
```
|
||
|
||
## 性能优化建议
|
||
|
||
1. **减少重新渲染**: 使用 `computed` 属性缓存计算结果
|
||
2. **防抖保存**: 对保存操作添加防抖，避免频繁保存
|
||
3. **懒加载组件**: 使用 `<KeepAlive>` 缓存组件状态
|
||
4. **批量更新**: 使用 `watch` 的 `deep` 选项时注意性能影响
|
||
|
||
## 扩展建议
|
||
|
||
### 1. 导出/导入配置
|
||
```javascript
|
||
// 导出
|
||
const exportConfig = () => {
|
||
const data = JSON.stringify(appConfig.value)
|
||
const blob = new Blob([data], { type: 'application/json' })
|
||
const url = URL.createObjectURL(blob)
|
||
// 下载文件
|
||
}
|
||
|
||
// 导入
|
||
const importConfig = (file) => {
|
||
const reader = new FileReader()
|
||
reader.onload = (e) => {
|
||
const config = JSON.parse(e.target.result)
|
||
// 保存配置
|
||
}
|
||
reader.readAsText(file)
|
||
}
|
||
```
|
||
|
||
### 2. 键盘辅助
|
||
```vue
|
||
<a-button @click="moveUp(index)">
|
||
<template #icon><icon-up /></template>
|
||
</a-button>
|
||
<a-button @click="moveDown(index)">
|
||
<template #icon><icon-down /></template>
|
||
</a-button>
|
||
```
|
||
|
||
### 3. 配置预览
|
||
```vue
|
||
<a-modal v-model:visible="showPreview" title="配置预览">
|
||
<div v-for="tab in visibleTabs" :key="tab.key">
|
||
{{ tab.title }}
|
||
</div>
|
||
</a-modal>
|
||
```
|