# utools-wallpaper-diy

**Repository Path**: fancy171101034/utools-wallpaper-diy

## Basic Information

- **Project Name**: utools-wallpaper-diy
- **Description**: utools插件，已在应用市场中【壁纸DIY】；
让你轻松创建个性化的桌面壁纸。支持添加表格、文字卡片、涂鸦、图片卡片等丰富元素，自由拖拽排版，一键导出壁纸。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-09
- **Last Updated**: 2026-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 壁纸 DIY 工具 ✨

一个基于 Vue 3 的可视化壁纸制作工具，让你轻松创建个性化的桌面壁纸。支持添加表格、文字卡片、涂鸦、图片卡片等丰富元素，自由拖拽排版，一键导出壁纸。

## 🌟 功能特性

### 📊 表格元素
- 自定义行列数
- 表头样式定制（背景色、文字色）
- 交替行颜色支持
- 可调整字体、字号、边框
- 圆角裁剪效果

### 📝 文字卡片
- 支持标题和内容编辑
- 背景色 + 毛玻璃模糊效果
- 自定义边框样式
- 丰富的字体选项
- 阴影效果预设
- 标题分隔线

### ✏️ 涂鸦画板
- **全屏涂鸦模式**：涂鸦范围覆盖整个画布
- 自定义画笔颜色和粗细
- 常用颜色快速选择面板
- 橡皮擦功能（可调整大小）
- **撤销/重做** (Ctrl+Z / Ctrl+Y)
- 圆形/方形笔刷样式
- 画布背景色和圆角设置
- 笔迹数据持久化保存

### 🖼️ 图片卡片
- 点击或拖拽上传图片
- 双击快速替换图片
- 多种填充方式：铺满 / 包含 / 拉伸 / 原始
- **丰富滤镜效果**：
  - 亮度调节
  - 对比度调节
  - 饱和度调节
  - 模糊效果
  - 灰度滤镜
  - 褐色滤镜
  - 色相旋转
- 一键重置所有滤镜
- 自定义卡片样式

## 🎨 通用功能

### 画布属性
- 自适应设备分辨率
- 缩放控制（+ - 适应窗口）
- 元素透明度调节
- 元素旋转角度

### 图层管理
- 元素层级调整（置顶 / 置底）
- 元素复制
- 元素删除
- 左侧图层列表切换

### 背景设置
- 纯色背景
- 线性/径向渐变背景
- 图片背景（支持拖拽上传）
- 图片填充方式选择

### 💾 导出功能
- 导出为 PNG 图片
- 直接设置为桌面壁纸（需要 uTools 环境）
- 所有元素完整渲染

## 🚀 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm 或 yarn

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run dev
```
浏览器访问即可预览效果。

### 构建生产版本
```bash
npm run build
```

## 📖 使用说明

### 添加元素
点击顶部工具栏的对应按钮添加元素：
- **⊞ 表格**：插入可编辑的表格
- **▭ 文字卡片**：插入带标题的文字卡片
- **✏️ 涂鸦笔**：插入全屏涂鸦画板
- **🖼 图片卡片**：插入可拖放的图片卡片

### 编辑操作
1. **选中元素**：点击画布上的任意元素
2. **移动元素**：拖拽选中的元素
3. **调整大小**：拖拽元素边角的手柄
4. **编辑属性**：在右侧属性面板进行详细配置

### 快捷键

| 快捷键 | 功能 | 适用场景 |
|--------|------|---------|
| `Ctrl + Z` | 撤销 | 涂鸦板 |
| `Ctrl + Y` | 重做 | 涂鸦板 |
| 双击图片 | 替换图片 | 图片卡片 |
| 拖拽上传 | 添加背景或图片 | 全局 |

## 🏗️ 项目结构

```
src/
├── components/                # 组件目录
│   ├── panels/               # 属性面板组件
│   │   ├── BackgroundPanel.vue    # 背景设置面板
│   │   ├── CardPanel.vue          # 文字卡片面板
│   │   ├── DrawingPanel.vue       # 涂鸦板面板
│   │   ├── ImageCardPanel.vue     # 图片卡片面板
│   │   └── TablePanel.vue         # 表格面板
│   ├── CanvasBoard.vue       # 画布主体（负责渲染）
│   ├── CardElement.vue       # 文字卡片元素
│   ├── DrawingElement.vue    # 涂鸦板元素
│   ├── ImageCardElement.vue  # 图片卡片元素
│   ├── TableElement.vue      # 表格元素
│   └── WallpaperEditor.vue   # 编辑器主界面（工具栏+侧边栏）
├── stores/                   # 状态管理
│   └── editor.js             # 编辑器全局状态
├── utils/                    # 工具函数
│   └── export.js             # 画布导出工具
├── App.vue                   # 根组件
└── main.js                   # 入口文件
```

## 🔧 核心技术

| 技术 | 说明 |
|------|------|
| Vue 3 | 响应式框架，使用 Composition API |
| Vite | 下一代前端构建工具 |
| Canvas API | 图片导出和涂鸦绘制 |
| Element Plus Icons | 图标库 |

## 📝 开发指南

### 添加新的元素类型

1. **在 `stores/editor.js` 中**：
   - 添加元素数据结构
   - 添加创建元素的函数
   - 在 `addXxx` 函数中设置默认属性

2. **创建元素组件**：
   - 新建 `components/XxxElement.vue`
   - 实现渲染、拖拽、编辑交互

3. **创建属性面板**：
   - 新建 `components/panels/XxxPanel.vue`
   - 实现属性编辑表单

4. **在 `WallpaperEditor.vue` 中注册**：
   - 添加工具栏按钮
   - 在右侧面板添加条件渲染

5. **在 `utils/export.js` 中添加导出支持**：
   - 添加 `drawXxx` 函数
   - 在元素循环中添加类型判断

### 样式规范

项目采用深色主题设计：
- 主色调：`#409eff`（蓝色）
- 背景色：`#141414` / `#1a1a1a`
- 边框色：`rgba(255,255,255,0.12)`
- 文字色：`rgba(255,255,255,0.85)`

所有组件使用 scoped style，避免样式污染。

## 🔍 常见问题

### Q: 导出的图片中为什么没有涂鸦/图片卡片？
A: 请确保使用最新版本，导出逻辑已在 `utils/export.js` 中实现了所有元素类型的绘制。

### Q: 拖拽图片到图片卡片，为什么还会显示背景提示？
A: 已修复此问题，现在拖拽到图片卡片上时，背景提示会自动隐藏，由卡片自己处理。

### Q: 涂鸦工具栏显示不全？
A: 现在涂鸦工具栏位于元素左上角，z-index 足够高，不会被其他元素覆盖。

### Q: 如何在 uTools 中使用？
A: 将项目构建后，在 uTools 插件开发中配置入口为 `dist/index.html`，即可作为插件运行。

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支：`git checkout -b feature/xxx`
3. 提交更改：`git commit -m 'Add xxx'`
4. 推送到分支：`git push origin feature/xxx`
5. 提交 Pull Request

## 📄 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件

## 💬 联系方式

如有问题或建议，欢迎提交 Issue！

---

**Made with ❤️ and Vue 3**