im0o/cover-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
31 Commits 1 Branch 0 Tags
ae18af1bf30a5cb5af84e1e2175b5893391254a6
Commit Graph
30 Commits
Author SHA1 Message Date
im0o ae18af1bf3 t11-topbar: 工具组居中，画布尺寸收进下拉 
- TopBar 重排为「左留空 / 中工具组 / 右历史+导出」
- 新增画布编辑下拉（CanvasMenu）：预设/分辨率/比例，逻辑照搬旧中间组
- 形状/背景按钮改成本体+角标组合，本体切工具、角标开下拉
- 形状按钮图标跟随当前形状（shapeMeta）
- 文字工具光标：往 body 写 dataset.tool，样式规则留给 style.css
 2026-09-05 18:08:29 +08:00
im0o 19c8c604cb chore: 本轮改造的共享契约与占位——ToolId/ShapeKind/LayerKind 扩充、Dropdown 壳、形状表、三个菜单与两个 composable 的桩 2026-09-05 17:56:10 +08:00
im0o 3a3798e37b feat: 接入 iconify 图标库，右栏改成 Figma 式收起分组 
图标统一走 unplugin-icons + hugeicons，构建期内联，出口收在 src/ui/icons.ts。
顺带修掉 TopBar 那个 undo 图标缺弧命令的 path。

右栏下半四组默认全收，收起态只有一行 32px；顶栏导出按钮改成先展开
「导出与模板」再滚，否则滚到底只看得到一行标题。

属性区去掉分组标题，改成 Figma 那种「字母/图标 + 无边框输入框」两列密排，
新增 W/H 宽高比锁（比例在开锁那一刻定格，不每次编辑现算）。

删掉 Sidebar.vue 和 panels/CanvasPanel.vue：上一轮改 Figma 布局之后
它们已无人 import，--sidebar-w 同批遗留。
 2026-09-05 17:51:43 +08:00
im0o ee303bcd44 Merge branch 't9-menus' into integration2 2026-09-05 02:40:31 +08:00
im0o a1015283f5 feat: 右键菜单与选中浮动编辑条（T9） 2026-09-05 02:40:09 +08:00
Jz0ojiang a61eeb590d fix: 选中变化也要发 revision 信号 
syncSelection 只更新 activeObject，不 bump revision。于是在画布上点选
另一个对象时，所有从 revision 推导选中态的视图会停在旧值——图层面板的
高亮首当其冲。T6 在自己文件里绕过去了，根因在内核。
 2026-09-05 02:39:25 +08:00
im0o 7ab4f48702 Merge branch 't6-layers' into integration2 2026-09-05 02:38:55 +08:00
im0o eab82102b7 feat: 左侧图层面板——选中/多选、重命名、显隐/锁定、行内删除、拖拽排序带插入线 
- 数据与操作全部走 useLayers，面板只渲染不另存状态
- 高亮集合由画布 getActiveObjects() 实时派生：selection:* 事件不 bump
  revision，吃 layers[].selected 会在画布纯点选后保持陈旧
- 拖拽把被拖行收起、其余行顶上，插入线与跟手浮层指示目标缝隙，
  slot 语义经 Node 脚本对 moveLayerToRow→fabric moveObjectTo 全组合断言
 2026-09-05 02:38:41 +08:00
im0o ef24354d2a Merge branch 't8-inspector' into integration2 2026-09-05 02:36:28 +08:00
im0o ceae8eee24 实现右侧属性检查器 Inspector（位置/尺寸、变换、外观） 2026-09-05 02:36:12 +08:00
im0o 87f9d5b1f8 Merge branch 't10-panels' into integration2 2026-09-05 02:34:48 +08:00
im0o c9803827fd T10: 工具面板收进右栏折叠分组，拖放图片改为新增图层 
- ToolPanels：背景/滤镜/文字/导出与模板四组可折叠分组，选中图片/文字自动展开相关组
- SourcePanel：拖放与文件选择默认作为新图层加入（addImage toBack:false 并选中），
  「作为背景铺满」改为面板里的显式勾选项，不再是一切的默认行为；多张可一次全加
- 上传 object URL 改为会话内保留、卸载时统一释放（撤销与模板重载要按 src 重新取图）
- 预设几何与 Unsplash 保持原「铺背景」语义，不受勾选项影响
- 新增 pickImageFiles 纯函数与 src/sources/selfcheck.ts Node 侧自检
 2026-09-05 02:34:22 +08:00
im0o 89dd7d8181 feat: 顶部工具栏与底部缩放胶囊 
- TopBar: 左工具组(选择/文字/矩形/图片,切换走命令表,键位 tooltip)、
  中画布尺寸(预设/比例锁/自定义宽高,逻辑从 CanvasPanel 搬来)、
  右撤销重做(禁用态随 canUndo/canRedo)+ 导出入口(滚到右栏导出区)
- BottomDock: 悬浮缩放胶囊,±/百分比菜单(50/100/200、适应、缩放到选中)
  与适应画布按钮;有命令的一律走命令表,任意数值档走 zoomAt 锚点缩放
- 图标全部内联 SVG,不引依赖
 2026-09-05 02:33:49 +08:00
Jz0ojiang 0c0cc86fa8 refactor: 右栏拆成属性区与工具面板两层 
改成 Figma 布局后旧的四个面板没有挂载点，功能在界面上不可达。
右栏上半给选中对象的属性，下半给背景/滤镜/文字/导出，
两条开发线各占一个文件，互不重叠。
 2026-09-05 02:19:40 +08:00
Jz0ojiang 8934f374bb feat: Figma 式外壳与编辑器内核 
布局改成 顶部工具栏 / 左图层 / 中画布 / 右属性 / 底部悬浮胶囊。

新内核：
- 图层模型：fabric 对象是唯一真源，LayerInfo 是只读投影；
  id/名字/锁定挂在 customProperties 上，随 toJSON 持久化
- 视口：zoom/pan 走 viewportTransform，只影响显示；
  导出改为按视口裁剪（artboardExportOptions），旧的「multiplier 恒为 1」
  在画布铺满工作区之后不再成立
- 历史：快照式撤销重做，30 步上限，带重入保护
- 命令表：快捷键 / 右键菜单 / 工具栏三个入口共用一份注册表
  键位取自 Penpot 快捷键表
- 画板用 backgroundImage 画（跟随视口且不进 getObjects）

两个 fabric 陷阱已在注释里记下：
- Rect 默认原点是中心，left:0/top:0 不写 originX/originY 会画错位置
- canvas.clipPath 不吃 viewportTransform，不能用来裁画板
 2026-09-05 02:18:20 +08:00
im0o 4833de7b68 Merge branch 't2-fonts' into integration 2026-09-04 16:48:50 +08:00
im0o 8b986de5b3 修复字体加载：name 表解析真实字族名、先本机后 webfont、加载失败可见提示 2026-09-04 16:48:08 +08:00
im0o 57538d597c Merge branch 't5-io' into integration 2026-09-04 16:40:48 +08:00
im0o 637635802e Merge branch 't4-sources' into integration 2026-09-04 16:40:47 +08:00
im0o 085b3a56d7 Merge branch 't3-filters' into integration 2026-09-04 16:40:47 +08:00
im0o 6491eaef2e Merge branch 'main' into t2-fonts 2026-09-04 16:39:27 +08:00
im0o 2f87a77992 修复滤镜两处问题：type 匹配不再靠 id 拼写、统一边缘格行为 
- filters/index.ts 从 build() 实例读出真实 fabric type，导出 FILTER_TYPES 供面板使用
- FilterPanel.vue 改用 FILTER_TYPES[def.id]，与注册表 id 命名解耦
- crystallize.ts applyTo2d 不再跳过越界格，越界种子参与取最近并 clamp 采样，与 WebGL 路径一致
 2026-09-04 16:39:05 +08:00
Jz0ojiangandim0o 9a60754401 contract: FontEntry 加 subfamily，family 改用 name 表的排版族名 
注册表值名不是字体身份。实测阿里巴巴普惠体 H：
  注册表「阿里巴巴普惠体-H」、nameID 1「阿里巴巴普惠体 H」— 浏览器都解析不到
  nameID 16「阿里巴巴普惠体」+ nameID 17「Heavy」— 能解析

subfamily 退回 nameID 2 是有损的：该族五个字重的 nameID 2 全是 Regular。

(cherry picked from commit 44b98102741af90620871156d60edf54326df78d)
 2026-09-04 16:38:56 +08:00
Jz0ojiangandim0o 5b46e84a44 fix: 背景图沉到最底层，否则盖住先加的文字 
addImage 用 canvas.add() 追加，图片落在最上层。浏览器验收时发现
先加文本框再装背景，文字被整块盖住。

(cherry picked from commit 822fd79e1ca2df76c49c1dff33fa5cc0fa01cc93)
 2026-09-04 16:38:56 +08:00
im0o 3e41c3fcf7 fix: 预设几何配色压暗降饱和，保证白字可读 
- 线性空间限亮度：底色对纯白 WCAG ≥ ~7:1，最亮的强调色也不低于 ~4.9:1，
  任意种子/色相都不会再产出浅亮底（之前空种子的草绿只有 2-3:1）
- 饱和度整体下压、偏中性，不再和白字抢注意力
- 空种子不再共用同一个色相：每种底纹有专属默认色相
  （条纹 215° 蓝 / 噪点 25° 琥珀 / 网格 265° 紫 / 同心弧 350° 玫红）
- 缩略图标签加半透明深色底衬，白字不再直接压在图案上
- 确定性机制、纯函数拆分、三个来源结构均未动
 2026-09-04 16:38:05 +08:00
im0o d072067b00 feat: 背景来源——本地上传 / 预设几何 / Unsplash 搜索 
SourcePanel 常驻在右栏「背景」一节，三个来源任选：

- 本地上传：文件选择 + 全窗口拖放，转 object URL 装进画布，
  换图与卸载时释放旧的 blob 地址
- 预设几何：四种底纹（斜向圆角条纹 / 噪点渐变 / 网格线 / 同心弧），
  用标题字符串作种子派生配色，同种子像素级确定——纯函数派生+渲染，
  DOM 只留在薄薄一层出口，Node 侧可直接验确定性；色相按前缀分桶，
  同系列标题自动落在相邻色区
- Unsplash 搜索：Access Key 读 VITE_UNSPLASH_KEY，未配置只显示提示、
  另两个来源照常可用；缩略图网格点选装 regular 尺寸；选定即触发
  download 统计（条款义务）；署名不画进图，面板上给复制按钮
 2026-09-04 16:10:37 +08:00
im0o a2c95a83b7 实现字体子系统：注册表枚举中间件、前端 FontFace 挂载与文字面板 2026-09-04 16:03:47 +08:00
im0o 9f2b14572d 实现滤镜子系统：六种滤镜注册、晶格化滤镜与滤镜面板 
- filters/index.ts 注册模糊/亮度/对比度/饱和度/像素化/晶格化六个滤镜
- crystallize.ts 实现抖动网格 Voronoi 晶格化，WebGL 与 Canvas2D 双路径
- FilterPanel.vue 按注册表自动渲染开关与滑杆，rAF 合帧节流 applyFilters
 2026-09-04 16:03:06 +08:00
im0o fa4a7e92f4 feat(io): 导出 WebP/PNG 下载，模板存 localStorage 可加载复用 
- export.ts：toBlob 参数纯函数 resolveExportRequest——multiplier 恒为 1，
  画布 backstore 本就是逻辑尺寸，不再乘预览缩放；WebP 带质量、PNG 无损不带
- templates.ts：模板 = canvas.toJSON() + 尺寸，存 localStorage（key 单键数组）；
  save/list/delete 可注入 store 便于 Node 侧自检；collectUsedFonts 扫文本对象
  fontFamily（instanceof FabricText + type 名兜底），missingFonts 查缺字
- ExportPanel.vue：格式/质量/文件名/下载；模板保存命名、列表、加载
  （loadFromJSON + setSize 恢复尺寸）、删除（二次确认）；加载时若字体列表
  已就绪且模板用了本机没有的字体则提示；字体列表为空（T2 未实现）跳过检查
- selfcheck.ts：bun 直接跑的 Node 断言，覆盖 multiplier、storage 往返、
  usedFonts 收集、缺字体与文件名清洗

浏览器下载、质量滑杆体积、刷新后加载恢复需主控用 Chrome 验
 2026-09-04 16:02:28 +08:00
Jz0ojiang 95eeb69ff8 feat: 骨架——Vite + Vue3 + Fabric v7，左工作区右侧栏 
共享外壳与类型契约，四条并行开发线在此之上各自填空：
- types.ts 是唯一的跨线接口，并行期间冻结
- editor/ 画布单例、选中态、尺寸预设与比例锁
- Sidebar 按选中对象切换面板，五个面板位已接好
- fonts/ filters/ sources/ io/ 留桩，各线只改自己目录

导出定 WebP：实测 540x287 PNG 134KB vs 1200x630 WebP 23KB。
字体接口挂在 Vite 中间件上，工具只在 dev 下完整可用。
 2026-09-04 15:42:27 +08:00