分区壁纸生成器 (Partitioned Wallpaper Generator)

一个基于Web的、用于创建自定义分区桌面壁纸的工具。它专为希望通过视觉化分区来组织桌面图标、文件和窗口的用户而设计，旨在将混乱的桌面转变为一个有序、高效且美观的工作空间。

本项目的核心思想源于“少即是多”的极简主义，并融入了细腻的微交互设计，以提供流畅、直观且富有生命力的用户体验。

核心特性

• 动态网格系统: 基于所选分辨率和垂直密度，自动计算并生成对齐网格，确保布局的精确性与和谐感。
• 交互式画布:
  • 创建与删除: 动态添加或移除分区。
  • 实时编辑: 通过点击选中分区，即可在侧边栏面板中实时修改其名称、背景色和文字颜色。
  • 精准缩放: 拖拽分区边缘，其尺寸会以网格为单位进行吸附，实现像素级完美对齐。
  • 自由移动: 通过双击激活移动模式，可将分区拖拽至画布任意位置，再次单击即可固定。
• 高度可定制化:
  • 分辨率预设: 内置多种主流屏幕分辨率，并支持自定义。
  • 个性化背景: 支持纯色背景或上传自定义图片作为壁纸背景。
• 高质量输出: 一键将您的设计导出为高分辨率的 PNG 图像文件。
• 零依赖: 使用原生 HTML5, CSS3 和 JavaScript 构建，无任何外部框架依赖，确保了极致的性能和轻量化。

技术栈

• 前端: HTML5, CSS3 (CSS Variables for Theming), JavaScript (ES6+)
• 图形渲染: HTML5 Canvas 2D API
• 核心原则: Vanilla JS, State-Driven UI

使用指南

1. 在现代浏览器中打开 index.html 文件。
2. 全局设置:
   • 从下拉菜单中选择您的目标屏幕分辨率。
   • 拖动网格密度滑块，调整画布的垂直网格数量，水平网格将根据分辨率比例自动计算。
3. 背景设置:
   • 使用颜色选择器定义纯色背景。
   • 或点击 "选择文件" 上传一张图片作为背景。
4. 管理分区:
   • 点击 创建新区域 按钮以添加一个新的分区。
   • 单击画布中的任意分区以将其选中。被选中的分区将以高亮边框显示，同时侧边栏的 "编辑区域" 面板会被激活。
   • 移动鼠标至选中分区的边缘，当光标变为缩放箭头时，按住并拖动即可调整其大小。
   • 双击一个分区以进入移动模式，此时可将其拖拽到新位置。在目标位置再次单击以确认放置。
   • 在 "编辑区域" 面板中，修改分区的名称、区域颜色和文字颜色。所有更改将实时反映在画布上。
   • 点击 删除此区域 按钮可移除当前选中的分区。
5. 导出:
   • 完成设计后，点击 下载壁纸 按钮，浏览器将自动下载生成的PNG文件。

架构思想与第一性原则

1. 状态驱动的UI (State-Driven UI) 整个应用由一个单一的、集中的 state 对象驱动。任何用户的交互（如更改分辨率、拖动分区）都只负责修改这个 state 对象。修改完成后，统一调用 render() 函数。render() 函数则完全基于当前的 state 来重绘整个Canvas。这种模式确保了：

   • 单一数据源: 杜绝了数据不一致的可能性。
   • 可预测性: 任何UI的展现都只是 state 的一个纯函数映射，使得调试和追踪变得极为简单。
   • 逻辑解耦: 交互逻辑（"做什么"）与渲染逻辑（"怎么画"）完全分离。

2. 比例坐标系 (Proportional Coordinates) 这是实现可扩展性的核心。所有分区的位置和尺寸都不以绝对像素值存储，而是以相对于画布总宽度和高度的比例（0.0 到 1.0）存储在 proportionalCoords 对象中。

   • 分辨率无关性: 当用户切换分辨率时，我们无需重新计算每个分区的像素坐标。渲染引擎仅需将相同的比例值应用于新的画布尺寸即可，布局被完美保留。
   • 弹性布局: 为未来可能支持的“响应式布局”或“流式布局”打下了坚实基础。

3. 无状态渲染 (Stateless Rendering) render() 函数及其所有子函数（drawBackground, drawZones 等）都是无状态的。它们不持有任何内部状态，其唯一的职责就是接收当前的 state 和 Canvas context，然后忠实地将其绘制出来。每次渲染都是一次从空白画布开始的完整重绘，这避免了复杂的局部更新和状态残留问题，以现代硬件的性能换取了代码的极度健壮性与简洁性。

4. 模块化与可扩展的组件

   • 侧边栏的每个面板（全局设置、背景、编辑区域）在逻辑上是独立的。未来若要添加新的功能，如“边框样式”、“阴影效果”，只需创建一个新的面板及其对应的 state 属性，并在 render() 函数中增加一个绘制步骤即可，对现有代码的侵入性极小。
   • state.zones 是一个对象数组，这种结构使得批量操作（如全选、对齐）或添加更复杂的分区类型变得轻而易举。

未来的可能性 (Roadmap)

• [功能] 布局模板: 提供多种预设的经典分区布局（如二分、三分、田字格等）。
• [功能] 保存与加载: 支持将当前布局方案保存至本地文件或浏览器 localStorage，以便下次复用。
• [功能] 撤销与重做: 实现操作历史记录，提供 Ctrl+Z 和 Ctrl+Y 的支持。
• [扩展] 高级样式: 增加对渐变背景、边框样式、圆角、阴影等更多视觉元素的控制。
• [扩展] 文字工具: 提供更丰富的文字自定义选项，如字体选择、大小、对齐方式等。

作者说明

本项目完全由 AI 完成, 以下为原始 Prompt

````md
利用桌面分区/工作区的任务管理系统

管理的最小目标是文件, 但实际上更多管理的是"项目", 一个项目是: 一个有边界的工作任务, 会产生若干文件.

对于项目的管理, 它符合一个简单实用的流程, 类似于操作系统进程管理的多种状态.

总共分为5个区, 6个状态.

1.Quick Access: 存放通用但高频使用的、与具体项目无关的工具或资料。

2.Ready: 存放所有新想法、待启动任务、尚未分配时间的项目。

3.Running: 存放当前正在处理的、需要高频访问的项目文件或文件夹。

4.Blocked: 存放已部分完成，但需要等待他人反馈、批准或外部资源的项目。

5.Done: 存放近期已完成，但尚未正式归档到长期存储位置的项目。

最后, 当5保持一段时间, 会被删除快捷方式或存入文件管理系统.
桌面分区壁纸(6个区):

分辨率:2650x1600

比例: X轴: 0~9, Y轴: 0~21

(Top, Button, Left, Right)

1.Quick Access区: (0, 4, 0, 5)

2.Ready 区: (5, 9, 0, 5)

3.Running 区: (0, 9, 6, 14)

4.Done区: (7, 9, 15, 21)

5.Blocked区: (2, 6,15, 21)

6: 剩余区域不做划分, 保留为空

每个分区用不同的淡颜色表示, 并有淡色文字做区分.
````

需求:

1.一个"壁纸制作工具"(html), 允许可视化制作以上壁纸并提供下载(png)

2可手动拉动各区域边界(以网格边界为吸附和对齐条件)

3.可选择网格密度 (划分整个桌面的比例)

4.可选择分辨率 (默认为以上示例中的比例和分辨率). 不允许自定义分辨率x和y, 仅内置常用分辨率. 切换分辨率时, 应该自动缩放布局区域以适应新分辨率和比例. 多分辨率选项, 并且以合适顺序排序.

5.每个区域可手动编辑描述文本

6.可创建/删除区域

7.布局: 左侧栏是选型等操作区, 右侧是可视化区域

8.不应该存在"网格列数/行数" 的选择, 而是统一的比例, 因为都是正方形的格子. (将当前的分辨率的x轴和y轴以多少个像素划分为一个格子?).

9.美化整体UI, 使用统一的风格

10.注意可能的bug: 当两个区域重合时, 无法分离. 应该双击拖动允许平移区域(但被边界阻挡). 当重叠多个区域时, 双击拖动会拖动最顶层的区域

11.允许修改背景颜色, 或上传背景图片

12.不应该显示滚动条, 而是自动缩放内容的比例以适应用户窗口

13.不应该直接调整 "网格尺寸px", 而是调整"网格密度", 表示将当前y轴分为多少个网格. 由于网格是正方形, 因此可以计算出x和y的网格数量. 所以在右侧显示网格数量. 当调整"网格密度"时, 不应该改变绘图区域的比例, 因为修改网格密度与区域比例无关.
UI风格:微交互设计 (Microinteractions)特点:细微动画: 指产品中那些小型的、单一功能的动画或视觉反馈。提升体验: 比如点击按钮时的反馈、加载动画、滑动解锁等。增加趣味: 让用户感到产品更有“生命力”和人性化。引导操作: 提供视觉线索，帮助用户理解系统状态。极简主义 (Minimalism)特点:less is more: 强调“少即是多”，去除所有不必要的元素。留白充足: 大量使用空白空间，让内容更突出。焦点明确: 引导用户专注于核心内容和功能。配色克制: 常用黑白灰或低饱和度的颜色。字体艺术: 强调字体的美感和排版。

配色风格:

# C7DB95, # FFE497, # EF8767, # 131313

许可

该项目采用 GNU General Public License v3.0 授权。