# UI设计器 **Repository Path**: cecilz/ui-designer ## Basic Information - **Project Name**: UI设计器 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-11 - **Last Updated**: 2025-12-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # UI 设计器 基于 Wails + Vue 3 + Go 的桌面 UI 设计工具。 ## 主要功能 ### 🎨 控件设计 - 可视化拖拽设计界面 - 支持多种控件类型（按钮、文本、输入框、复选框、下拉框等） - 控件层级树管理 - 属性面板实时编辑 - 右键上下文菜单快速操作 ### 📏 标尺和辅助线系统 - **画布标尺**：水平和垂直标尺，显示精确的坐标刻度 - **鼠标位置指示**：实时显示鼠标在画布上的逻辑坐标 - **辅助线创建**：从标尺拖拽创建垂直或水平辅助线 - **辅助线管理**： - 拖拽移动辅助线位置 - 双击删除辅助线 - 自动检测重复位置（防止创建重复辅助线） - 预览模式：创建时显示蓝色预览线，无效位置显示红色 - **智能对齐**：辅助线与标尺刻度精确对齐，支持画布缩放和平移 ### 📐 智能对齐系统 - **智能贴靠**：拖动控件时自动贴靠到其他控件的边缘或中心（5像素阈值） - **网格贴靠**：可选的网格对齐功能，支持自定义步长 - **对齐工具栏**：提供丰富的对齐和布局工具 - **控件对齐**：左对齐、右对齐、顶对齐、底对齐、水平居中、垂直居中 - **尺寸统一**：等宽、等高、等尺寸 - **画布对齐**：对齐到画布左/右/上/下边缘、水平/垂直中心、画布中心 - **布局工具**：网格布局、水平排列、垂直排列、水平分布、垂直分布 ### 📋 剪贴板操作 - 复制/粘贴控件（支持完整层级结构） - 智能命名：复制的根控件自动添加 `_copy` 后缀，子控件保持原名 - 智能定位：复制的根控件自动偏移，子控件保持相对位置 ### ✏️ 批量编辑 - **批量移动**：同时移动多个选中控件 - **批量调整尺寸**：统一设置多个控件的宽度或高度 - **批量设置文本**：同时修改多个控件的文本内容 - **批量设置图片**：同时为多个控件设置图片资源 ### 🎬 动画系统 - 为控件添加动画效果 - 动画预览和编辑 - 动画复制和删除 ### 📦 资源管理 - 图片资源导入和管理 - 拖拽应用到控件 - 支持 BLP 和 TGA 格式 ### 🔌 插件系统 - Lua 插件支持 - 插件模板热重载（开发模式下自动检测 `.lua` 文件变化） - 自定义导出插件 ### 🎛️ 画布控制 - **画布缩放**：鼠标滚轮 + Ctrl 键缩放画布（0.2x - 3x） - **画布平移**：Space 键 + 鼠标拖拽平移画布 - **UI 缩放**：Ctrl + +/- 调整整个界面缩放比例 - **网格显示**：G 键切换网格显示模式（关闭/显示/仅显示） ### ⌨️ 快捷键 - **编辑操作** - `Ctrl+C` / `Ctrl+V` - 复制/粘贴 - `Delete` - 删除选中控件 - `F2` - 重命名控件 - `Ctrl+Z` / `Ctrl+Y` - 撤销/重做 - **画布操作** - `Space` - 画布平移模式（按住 Space 键拖拽） - `G` - 切换网格显示模式（关闭/显示/仅显示） - `Ctrl + 滚轮` - 缩放画布 - **项目管理** - `Ctrl+N` - 新建项目 - `Ctrl+O` - 打开项目 - `Ctrl+S` / `Ctrl+Shift+S` - 保存/另存为项目 - `Ctrl+W` - 关闭项目 - **界面控制** - `Ctrl++` / `Ctrl+-` - 调整 UI 缩放 - `Ctrl+R` - 刷新页面（重新加载前端） - **其他** - `F4` - 导出代码 - `ESC` - 取消辅助线创建（拖拽创建辅助线时） ## 项目结构 ``` ui-designer/ ├── frontend/ # 前端代码目录 │ ├── src/ # Vue 3 源码目录 │ │ ├── main.js # 应用入口文件，初始化 Vue 应用和 Wails 桥接 │ │ ├── App.vue # 根组件，包含主界面布局和状态管理 │ │ ├── bridge.js # Wails 桥接模块，封装 Go 后端 API 调用 │ │ ├── composables/ # Vue Composables 模块（可复用逻辑） │ │ │ ├── useSnap.js # 智能贴靠系统，处理控件对齐和网格贴靠 │ │ │ ├── useAlignment.js # 对齐和布局功能，提供各种对齐和排列工具 │ │ │ ├── useCanvasInteraction.js # 画布交互逻辑，处理拖拽、选择、调整大小 │ │ │ ├── useCanvas.js # 画布管理，缩放、平移、样式计算 │ │ │ ├── useRuler.js # 标尺系统，标尺渲染、辅助线创建和管理 │ │ │ ├── useGuides.js # 辅助线管理，辅助线的增删改查 │ │ │ ├── useClipboard.js # 剪贴板操作，处理复制粘贴（支持层级结构） │ │ │ ├── useHistory.js # 撤销/重做历史管理 │ │ │ ├── useWidgets.js # 控件管理，CRUD 操作 │ │ │ ├── useGrid.js # 网格系统，网格显示和贴靠配置 │ │ │ ├── useSettings.js # 设置管理，持久化应用配置 │ │ │ ├── useResources.js # 资源管理，图片资源导入和显示 │ │ │ ├── useAnimations.js # 动画系统，控件动画管理 │ │ │ ├── useExport.js # 导出功能，生成 Lua 代码 │ │ │ ├── useHierarchyTree.js # 层级树管理，控件父子关系 │ │ │ ├── useBatchEdit.js # 批量编辑功能，批量移动、调整尺寸等 │ │ │ ├── useContextMenu.js # 上下文菜单管理 │ │ │ ├── useRecentProjects.js # 最近项目列表管理 │ │ │ ├── useUiZoom.js # UI 缩放管理 │ │ │ ├── useKeyboard.js # 快捷键处理 │ │ │ └── ... # 其他功能模块 │ │ ├── components/ # Vue 组件目录 │ │ │ ├── AlignmentToolbar.vue # 对齐工具栏组件 │ │ │ ├── TopMenuBar.vue # 顶部菜单栏 │ │ │ ├── ControlPanel.vue # 左侧控件面板 │ │ │ ├── PropertiesPanel.vue # 右侧属性面板 │ │ │ ├── BottomPanel.vue # 底部面板（资源浏览器+终端） │ │ │ ├── SettingsDialog.vue # 设置对话框 │ │ │ ├── ExportPanel.vue # 导出面板 │ │ │ └── ... # 其他 UI 组件 │ │ ├── config/ # 配置文件 │ │ │ └── constants.js # 应用常量定义 │ │ ├── utils/ # 工具函数 │ │ │ ├── blpDecoder.js # BLP 图片格式解码器 │ │ │ ├── tgaDecoder.js # TGA 图片格式解码器 │ │ │ └── messageHelper.js # 消息提示辅助函数 │ │ └── styles/ # 样式文件 │ │ └── app.css # 全局样式 │ ├── dist/ # 构建输出目录（生产环境） │ ├── wailsjs/ # Wails 自动生成的 Go 绑定代码 │ │ ├── go/ # Go 类型和函数绑定 │ │ └── runtime/ # Wails 运行时 │ ├── index.html # HTML 入口模板 │ ├── package.json # 前端依赖配置（npm） │ └── vite.config.mts # Vite 构建工具配置 ├── app.go # 应用主逻辑，包含文件对话框、文件操作、插件管理等 Go 后端 API ├── lua.go # Lua 插件执行器，负责执行 Lua 脚本并返回结果 ├── watcher.go # 文件监控模块，监听 templates 目录变化实现热重载 ├── types.go # Go 类型定义，定义前后端交互的数据结构 ├── templates.go # Lua 模板嵌入，使用 go:embed 嵌入 templates 目录 ├── main.go # 程序入口，初始化 Wails 应用和窗口 ├── go.mod # Go 模块依赖配置 ├── go.sum # Go 依赖校验和 ├── wails.json # Wails 项目配置文件 ├── templates/ # Lua 模板文件目录 │ ├── example_plugin.lua # 示例导出插件 │ ├── meta.lua # 元数据模板 │ └── new_plugin.lua # 新插件模板 └── README.md # 项目说明文档 ``` ## 开发环境要求 - Go 1.22+ - Node.js 18+ - Wails CLI (`go install github.com/wailsapp/wails/v2/cmd/wails@latest`) ## 常用命令 ```bash # 开发模式（热重载） wails dev # 构建生产版本 wails build # 仅构建前端 cd frontend && npm run build # 安装前端依赖 cd frontend && npm install ``` ## Go 后端 API ### 文件对话框 - `OpenFileDialog(title, filtersJSON, defaultPath)` - 打开文件选择对话框 - `SaveFileDialog(title, filtersJSON, defaultPath)` - 打开文件保存对话框 ### 文件操作 - `ReadTextFile(filePath)` - 读取文本文件 - `WriteTextFile(filePath, content)` - 写入文本文件 ### Lua 插件 - `ExecuteLuaPlugin(pluginPath, widgetsJSON, optionsJSON)` - 执行 Lua 插件 - `GetPluginDirectory()` - 获取插件目录 - `ScanPlugins()` - 扫描插件列表 - `CreatePluginTemplate()` - 创建插件模板 ### 系统操作 - `OpenFileWithDefaultEditor(filePath)` - 用默认编辑器打开文件 - `OpenDirectory(dirPath)` - 打开目录 ## 使用指南 ### 智能贴靠 拖动控件时，系统会自动检测附近的其他控件和网格线： - **控件贴靠**：当控件边缘或中心接近其他控件时（5像素内），会自动对齐 - **网格贴靠**：可通过菜单栏的"视图" → "网格吸附"开关控制 - **视觉反馈**：贴靠成功时会显示蓝色提示线 ### 对齐工具栏 工具栏位于顶部菜单栏下方，包含以下功能组： 1. **对齐组**：选中多个控件后，以第一个控件为基准对齐 2. **尺寸组**：统一选中控件的宽度、高度或整体尺寸 3. **画布组**：将选中控件对齐到画布的边缘或中心（支持单选） 4. **布局组**：自动排列和分布多个控件 ### 控件操作 - **添加控件**：从左侧控件面板拖拽，或右键菜单添加 - **选择控件**：点击控件选择，`Ctrl+点击`多选，拖拽框选 - **移动控件**：拖动控件移动位置（支持智能贴靠） - **调整大小**：拖动控件四角的调整手柄 - **复制粘贴**：`Ctrl+C` 复制，`Ctrl+V` 粘贴（保持层级结构） - **删除控件**：选中后按 `Delete` 键 ### 项目管理 - **新建项目**：文件 → 新建项目 - **打开项目**：文件 → 打开项目 - **保存项目**：文件 → 保存项目 / 另存为 - **导出代码**：文件 → 导出，选择导出插件生成 Lua 代码 ## 前端桥接 通过 `frontend/src/bridge.js` 调用 Go 后端： ```javascript import { openFileDialog, readTextFile } from './bridge.js' const filePath = await openFileDialog('选择文件', [ { name: 'JSON 文件', extensions: ['json'] } ]) const content = await readTextFile(filePath) ``` ## 技术架构 ### 前端技术栈 - **Vue 3** - 响应式框架（Composition API） - **Vite** - 构建工具 - **Composables** - 模块化逻辑组织 - `useSnap.js` - 智能贴靠系统 - `useAlignment.js` - 对齐和布局功能 - `useCanvasInteraction.js` - 画布交互 - `useCanvas.js` - 画布管理（缩放、平移） - `useRuler.js` - 标尺系统 - `useGuides.js` - 辅助线管理 - `useClipboard.js` - 剪贴板操作 - `useHistory.js` - 撤销/重做历史 - `useBatchEdit.js` - 批量编辑 - `useKeyboard.js` - 快捷键处理 ### 后端技术栈 - **Go** - 后端语言 - **Wails** - 桌面应用框架 - **fsnotify** - 文件系统监控（用于模板热重载） ## 开发说明 ### 模板热重载 开发模式下，修改 `templates/` 目录下的 `.lua` 文件会自动触发： 1. 文件监控系统检测到变化 2. 更新 `templates.go` 的时间戳 3. Wails 自动重新编译 Go 后端 4. 应用自动重启 ### 代码组织 前端采用 Composables 模式组织代码： - 每个功能模块独立封装 - 通过参数注入依赖 - 返回可复用的函数和状态 ## 更新日志 ### 最新更新 - ✨ 新增画布标尺系统，支持水平和垂直标尺显示 - ✨ 新增辅助线功能，支持从标尺拖拽创建、移动和删除辅助线 - ✨ 新增鼠标位置指示，实时显示鼠标在画布上的逻辑坐标 - ✨ 新增批量编辑功能，支持批量移动、调整尺寸、设置文本和图片 - ✨ 新增最近项目列表，方便快速打开最近使用的项目 - ✨ 新增 UI 缩放功能，支持调整整个界面的缩放比例 - 🐛 修复辅助线位置计算问题，确保与标尺刻度精确对齐 - 🐛 修复辅助线在画布缩放和平移时的显示问题 - 🔧 优化标尺和辅助线的渲染性能 - 🔧 优化坐标转换逻辑，支持 UI 缩放