Logo Studio | Michaell Alavedra

Web 环境中视觉标识的管理和准备需要多次迭代：从适配矢量 Logotype，到为渐进式 Web 应用 (PWA) 生成清单、不同分辨率的图标以及社交卡片 (OpenGraph)。核心问题在于传统图形设计工具带来的阻力——它们与 Web 开发环境相脱节，而在线工具则需要服务端处理，使资产暴露于网络延迟和隐私风险中。

我实现的解决方案是一个将处理负担完全转移到客户端浏览器 (client-side) 的工具。这允许导入可缩放矢量图形 (SVG)，对其进行结构化分析以提取元数据（尺寸、调色板），并在将生成的资产打包为多种格式之前应用实时几何与色彩变换。

主要业务工作流

导入与规范化： 用户加载 SVG 文件。系统使用 DOMParser 对其进行解析，提取内在尺寸 (viewBox) 并构建色彩属性树。
实时变换： 画布中的工作空间允许应用缩放、平移和动态色彩替换。
上下文预览： 配置元数据（边框半径、背景、主题颜色）被注入到模拟原生环境（Web、移动端、OpenGraph、PWA 清单）的 React 组件中。
打包与导出： 通过 <canvas> 元素中的程序化栅格化，修改后的矢量被转换为 PNG 或重写为修改后的 SVG。系统动态生成 JSON 配置（manifest.json、app.json），并将其合并到一个异步压缩文件中供下载。

软件架构

应用遵循职责分离原则，作为一个 Monorepo 运行，划分了静态路由、响应式状态管理和本地持久化。我选择了混合的 Local-First 架构。

结构模型

我将由静态和路由引擎 (Astro) 管理的页面结构加载与由响应式组件 (React) 承担的高保真交互流进行了解耦。这最小化了主线程的阻塞并加快了 Time-to-Interactive 指标。

graph TD
    Client["客户端 / 浏览器"] --> AstroRouter["Astro: 路由器与静态 Shell"]
    AstroRouter --> ReactApp["React: 响应式复杂性"]

    subgraph Client-Side Rendering
        ReactApp --> EditorState["状态与事件管理"]
        ReactApp --> GeneratorLibs["生成器库: SVG, PWA, OG"]
    end

    subgraph Local Persistence
        EditorState <--> DexieDB["(IndexedDB / Dexie.js)"]
        DexieDB --> SyncEngine["Live Queries"]
    end

    GeneratorLibs --> CanvasAPI["Canvas 栅格化"]
    CanvasAPI --> Export["生成 .zip / .png"]

状态与事件管理

交互核心通过 React 管理，其状态派生自活动持久化 (Live Queries)。用户动作（拖放、颜色输入）触发直接改变本地数据库的事件。界面组件订阅了这些更改，确保单一事实来源 (Source of Truth) 始终是数据层，而不是 React 内存中的短暂状态。

数据建模 (IndexedDB)

持久化通过 Dexie.js 管理，在 IndexedDB 之上提供异步 Schema。主要模型 Project 是一个聚合实体，合并了原始资产 (SVG) 和输出配置参数。

erDiagram
    Project {
        number id PK
        string name
        string svgContent "原始/规范化的矢量载荷"
        object colors "重新着色的键值映射"
        number borderRadius
        string backgroundColor
        number logoScale
        number logoX
        number logoY
        string displayMode "PWA: standalone, fullscreen 等"
        string themeColor "PWA Manifest"
        string appBackgroundColor "PWA Manifest"
        array selectedSizes "导出尺寸"
        array selectedExtraAssets "额外资产: favicon, og, manifest"
        date createdAt
        date updatedAt
    }

这种平铺且去规范化的结构针对每个工作会话的单个文档的原子读写进行了优化，非常适合浏览器中面向文档的架构。

4. 技术栈

工具选型回应了客户端最大效率和与现代网络标准兼容性的标准。

层级 / 领域	技术	技术考量
Shell 框架	Astro (v5.2.5)	快速初始渲染、SEO、按文件夹管理路由、原生 i18n 支持 (`[lang]`)。
交互层	React (v19)	复杂界面管理 (UI Editor)、Canvas 生命周期、拖放组件。
本地持久化	Dexie.js (v4.3)	IndexedDB 的抽象。允许异步和响应式查询 (`useLiveQuery`) 而不阻塞 UI。
样式与 CSS	Tailwind CSS (v4)	纯实用程序设计系统，方便本地变量和暗色模式的原生支持。
SVG/PNG 操作	Canvas API & JSZip	矢量到位图的客户端转换。内存中的导出合并。
OpenGraph 生成	Satori	JSX 到 SVG 引擎，用于构建社交元图像，配置为使用本地 WOFF2 字体。
Linting 与格式化	Biome.js	统一的静态分析工具，替代 ESLint 和 Prettier，显著缩短了执行时间。
测试	Vitest / Playwright	工具函数的单元测试与用户交互流的端到端测试。

总结

该系统的实现表明，将完整的图形处理工作流转移到客户端减轻了对专用后端基础设施的依赖，消除了传输成本、云端持久化以及操作时间的延迟。IndexedDB 的使用确保了会话间的结构韧性，而 Astro 与 React 的混合组合确保了高效的静态分发，且不牺牲客户端状态的复杂性。