企业官网建设流程全解析

1. 为什么做artcraft：手工艺创作的三大痛点

先说结论：artcraft 不是又一个"笔记工具"，也不是那种只能记流水账的待办清单，它是我为手工艺创作场景专门搭建的一套全流程管理方案。如果你和我一样，玩木工、做皮具、缝合织物，或者搞模型涂装、黏土雕塑，甚至只是偶尔捣鼓点手工蜡烛和植物染布，那你大概率被下面这三个问题折磨过。

第一个痛点是灵感碎片散落各处。我翻相册的时候经常发现有几十张"当时觉得有用"的参考图，截图时间跨越好几个月，有的来自社交平台，有的是自己拍的实物细节，还有几张是从视频教程里截的步骤图。真正要开工的时候，想找某一张"金属配件组合参考"得翻半天，还经常翻不到，因为当时根本没分类，也没归档。artcraft 专门处理了这个环节，把灵感采集的入口做得非常轻，轻到我在地下室干活的时候，一只手沾着胶水，另一只手拿手机点两下就能完成记录。

第二个痛点是材料库存全凭脑子记。玩手工的人都有这种经历——你想做一批植鞣革手机壳，结果做到一半发现手头的 1.5mm 厚度皮革只够裁三片，而快递要两天才能到。更麻烦的是五金配件：铜扣、铆钉、磁吸扣、气眼，价格不高但品类极杂，囤多了占地方，囤少了又总是缺货。artcraft 里我做了很轻量的"按项目绑定材料"模型，每开一个新项目，先把可能用到的材料挂上去，开工之后一边消耗一边记录，库存剩余量会自动扣减。这样就算哪天心血来潮想再做一批同款，打开项目看一眼就知道还差哪些件，不用再翻箱倒柜。

第三个痛点是进度追不上变化。我见过很多手工艺人的做法是同时做三四个项目，木工做到一半因为等胶水干，插空去缝皮具，皮具缝到一半又去调色。项目一多，就很容易出现某件半成品在角落里放了一个月，收尾时完全忘了当初设计的收线方式是什么，更别说某些步骤当时是否预处理过。这类信息如果只靠记忆，几乎必然出错。artcraft 的核心想法，就是让每个创作项目自带"进度快照"——不需要写长篇日志，只要每次收工时花一分钟记录当前状态，下次拿起半成品就能无缝衔接。

这个项目最适合两类人：一是刚刚从"兴趣尝试"跨到"定期创作"的手工爱好者，他们正处于作品变多、材料变杂、流程变长的阶段，最需要一套轻量管理方法；二是已经有一定产出量、但受不了传统项目管理软件那种重流程的独立创作者，artcraft 的定位是"像发朋友圈一样记录创作过程"，而不是在表格里堆砌任务依赖关系。

2. 产品架构与技术选型思路

2.1 功能模块的取舍逻辑

一开始我参考了市面上好几类工具，包括通用型的项目看板、笔记软件、图片管理应用，甚至还有某些电商后台的库存管理模块。但它们的问题都很明显：看板类工具太重，做一张手工卡片要建五六个列表、拖来拖去，记录成本比实际干活还高；笔记类工具虽然灵活，却完全没有"材料库存递减"这种创作场景特有的数据关系；图片管理工具只解决了收藏和分类，没法把一张参考图和一个具体项目的进度关联起来。

所以 artcraft 的设计原则定为三条：灵感入口要快、项目状态要一目了然、材料数据要准确可追溯。整个系统只保留了五个核心导航入口：灵感箱、项目看板、材料仓库、作品集、复盘日志。任何一次打开的停留时间都被刻意压缩，比如记录灵感默认不需要输入标题，拍照或者选图就完成一条记录；创建项目也只要填一个名字和选一个类型模板，其余字段都可以后续再补。

这套取舍逻辑想清楚之后，我决定不做成重型的多人协作系统，而是先专注单人和轻量团队场景。手工艺创作的管理，本质上是一个人面对一堆实物的自我协调，工具的价值是减少决策负担，而不是增加流程节点。

2.2 技术栈选择与背后理由

技术选型上，我选择了足够成熟、资料多、踩坑成本低的组合，没有追新。后端是 Node.js 加 Express，配合 SQLite 作为默认数据库；前端是 Vue 3 加 Vite，样式部分用 Tailwind CSS 快速搭界面，移动端适配优先，因为很多使用场景是在工作台旁边掏出手机顺手记录。文件存储先用本地磁盘目录，图片统一走压缩与缩略图双轨制。

为什么不用 NoSQL？因为创作记录和材料库存的数据关系其实非常规整。一个项目关联多条灵感记录、多个材料消耗记录、多个进度节点，这些用关系模型表达最自然，查询和统计也最省事。我后来确实遇到了需要联表统计"某个项目的材料成本"这种需求，SQLite 一条带 JOIN 和 GROUP BY 的查询就解决了。Node.js 的选择也不复杂，前端后端口径一致，热重载调试效率高，再加上 Express 中间件生态成熟，单人开发非常合适。

前端没有做成 SPA 的大型应用，而是按页面维度拆了几个独立视图，用 Vue Router 做页面切换。首版甚至没有引入 Pinia 做全局状态管理，只用了组件内状态和简单的provide/inject，因为实际业务场景大多是"列表跳到详情、详情跳回列表"，跨页面共享的全局状态非常少。等到材料仓库看板需要实时反映最新库存时，我再补上了轻量的事件总线。这套思路比较朴素，但对一个小体量项目来说，节省的时间非常可观。

2.3 数据模型的关键设计

模型设计是整个项目里最值得展开的部分，因为它直接决定了后续所有功能的开发成本。核心有四张表：项目表（projects）、灵感记录表（inspirations）、材料库存表（materials）、项目材料消耗记录表（project_material_logs）。

项目表里我特意加了一个 status 枚举，有"筹备中/制作中/搁置/已完成/已封档"五种状态。之所以加"搁置"和"已封档"，是因为手工艺项目的生命周期和软件开发完全不同——回坑率极高。一个木工项目可能因为季节原因（木蜡油干得太慢）被搁置两个月，但它不等于废弃，后续打开时还需要恢复全部上下文。封档则是彻底做完的状态，此时可以单独生成作品集页面，但项目里的历史记录不会消失。

材料库存表的关键字段是总量和单位，以及"安全阈值"。安全阈值是我在实际使用中慢慢体会到重要性的设计，比如黄铜螺丝，我设定当存量低于30颗时，项目列表和材料明细里会出现一条低库存提醒，这样就不用每次开工前人工点数。

项目材料消耗记录表则关联项目、材料和数量，每一条消耗记录都会实时回写材料库存表的剩余量。为了保证准确性，我在应用层做了事务处理，避免高并发下库存被扣成负数（具体怎么排查这个问题，后面常见问题章节会细说）。

3. 实操落地：从零搭建核心功能

3.1 项目的生命周期管理

创建项目时，所有字段都有默认值，但我会强烈建议填三样东西：项目类型、目标尺寸或规格、参考预算。项目类型用的是内置枚举，比如木工、皮具、织物、陶瓷、涂装、综合材料。这样做的好处是后续统计作品集时，可以按类型生成产出分布图，而不需要手动打标签。

项目创建完成后会进入"筹备中"状态。此时主要操作是往项目里添加材料和灵感。材料关联是纯选择操作，从已有库存里选，选完可填"计划用量"，方便后续对比实际消耗和预估偏差。灵感关联则有两种方式，一种是直接添加已有灵感记录，另一种是调起相机拍照，新拍的图会自动存入灵感库并绑定到当前项目——这是开发中使用频率最高的操作。

进入"制作中"状态时，项目详情页会展示一个竖向时间轴，每次记录进度实际上是在时间轴上追加一条动态，内容可以是一段文字、一组图片，也可以批量标记若干材料消耗。时间轴的设计参考了社交应用的信息流展示逻辑，每条动态只显示最近三条文字预览，需要查看细节时点开。这么做是为了让"记录"本身的视觉负担足够小。

"已完成"状态需要满足两个条件：手动切换状态，以及至少有一条带图片的进度动态。第二个条件是我故意加的软约束，目的是确保作品集页面不会出现没有配图的空项目。如果做完了却连一张照片都没拍，系统会提示"这个项目该补一张收尾图"，这个设计后来被好几个使用者说是最"戳心"的功能。

3.2 材料库存的双层追踪

材料这块我踩过很深的一个坑：最早版本里只有"材料名称+数量"两个字段，结果用了一周就出问题——同一款疯马皮油分成250ml罐装和500ml补充装两个条目，它们的实际使用频率并不相同；而在计算总成本时，又需要把它们归并到同一种材料。痛定思痛后我把材料拆成两层：一层是"材料品类"，比如植鞣革、黄铜条、亚克力板；另一层是"具体SKU"，比如"植鞣革 - 1.5mm - 原色"、"黄铜条 - 2mm x 100mm - 10根装"。

消耗记录挂在SKU级别上，每个SKU可单独设置安全阈值。品类层则只做统计聚合，比如查看"植鞣革"品类时，下面所有SKU的剩余量的单位需要统一换算才能加总，这阶段暂时支持"按最常用单位显示"。这层设计确实增加了一些开发量，但换来的是统计报表的可靠性——你可以轻松知道这个月到底用了多少 CCD 和多少克银黏土，而不只是看到一个扁平列表。

材料消耗录入还有一个捷径：在时间轴里发动态时，可以直接用"@材料名 x数量"的文本语法，比如"完成榫卯打磨 @榉木 300g @砂纸240目 2张"。后端的解析逻辑会把匹配到的材料名和数量自动登记为消耗记录。这个看起来不起眼的语法，实际上是整个系统里做得最值的一个功能，因为它把"记录"和"顺手记一笔"从操作层面合并了。

3.3 灵感记录的低摩擦设计

灵感采集的常见失败场景是：记录的时候分类分得太细，消耗了大量精力，结果一段时间后觉得分类体系不合理，整个灵感库变成一团乱麻。artcraft 的做法是反其道而行：无论什么来源的灵感，第一层只做"临时收藏"与"已归档到项目"两种状态。灵感记录本身不强制填标签、不强制选分类、不强制写描述。

也就是说，在刷网页或者逛社交平台时看到一个不错的装饰配件搭配，只需截图或者保存图片然后导入 artcraft，它就自动进入"临时收藏"。之后当你在创作某个项目时想参考它，可以从临时收藏列表里直接拖进当前项目，到了这一步，它才会要求选择"用途角色"（比如是参考造型、参考配色还是参考结构）。通过把分类延迟到"真正使用那一刻"来做，系统的前期使用阻力降到了最低。

批量操作上也下了功夫：支持多选后一键归档到项目，也支持从项目里移回临时收藏。为了让图片加载足够快，上传后的原始图会存在原图目录，同时生成宽度分别 400px 和 900px 的两份缩略图，列表和详情页都用缩略图，原图延迟到点击"查看大图"时才加载。这样即便一个项目里挂了上百张灵感图，浏览体验依然流畅。

3.4 作品的进度快照机制

进度快照是本项目区别于普通笔记工具的核心创新点。它解决的场景是：真实的创作过程中，很多关键信息是以非文字形式存在的，比如木工做狼椅时坐面的倾斜角度微调了多少、陶瓷烧制前后的收缩率差别、涂装时某个颜色盖在哪层的光油下面。这些信息光靠一两句文字描述很难留全，最好的方式是"拍一张照，再录一句话"。

所以我在每次进度记录里都设计了"图片+语音转文字"的复合结构。图片作为证据、语音转出的文字作为索引。语音转文字我用的是系统级语音识别接口，识别完成后会生成一段可编辑的文本，同时保留原始音频文件作为附件。使用者只需要做三件事：拍照、按住说话、松手。剩下的分类、归档、关联全部自动完成。

实际用下来，这个机制最厉害的地方在于"拾起重启"的效率明显提高。以前我从搁置项目里回坑，至少要在桌前坐半小时回想思路；现在打开项目看最近三五条进度快照，三分钟就能把状态接上。对于六七个项目并行的人来说，这个时间代价可以说是质变。

4. 部署上线与日常运维

4.1 单机Docker化部署

说实话，最开始我用的是本地直跑，后来发现工作台旁边那台老笔记本电脑经常关机，导致有时候人在客厅想翻一下材料库存，还得摸去地下室开机器。于是我把它包进了 Docker 镜像，部署到一台常年开机的家庭服务器上。Dockerfile 写得非常简单，Node.js 运行时加一层镜像、代码加一层、静态资源加一层，前两层变化频率不高，镜像层缓存利用率很高，每次构建都很轻量。

编排方式上我用了 docker-compose，只起了一个应用容器，没有刻意拆分数据库独立容器，SQLite 文件直接挂载到宿主机目录。相比 MySQL 容器方案，少一个容器就是少一个故障点，而且 SQLite 备份实在方便，副本文件即所得。nginx 放在宿主机上做反代，处理 TLS 和 HTTP/2，前端静态资源也由 nginx 直接服务，应用容器只收 API 请求。

因为 artcraft 是单人为主的使用场景，我没有做复杂的用户注册体系和权限控制，只是暴露了三个基础账号：管理员、编辑、只读。编辑账号只能新增和编辑自己的内容，只读账号方便在手机上看库存和进度。这样即使临时让朋友帮忙看一眼某个项目进度，也只需要分享只读链接，没有安全焦虑。

4.2 备份策略的实操方案

手工艺人的数据资产不是代码仓库，而是那几千张灵感图片和上百条创作过程记录。图片一旦丢了基本不可能再找回，所以我吸取了一次惨痛教训。那次我把家目录下某个文件夹误杀，恢复的时候发现里面包含了三个月前一个皮具项目的所有过程照片，当场傻眼。从那以后我配置了两层备份：第一层是每晚增量备份到同一个局域网里的 NAS，用 rsync 同步数据库文件和原图目录；第二层是每周全量压缩后同步到对象存储的私有桶，并只保留最近四周版本。

备份恢复这事儿，我建议任何人玩这个工具都至少做一次演练，而不是等到哪天真的要从头恢复时才临时看文档。我在本地搭过一个临时目录，把备份的 SQLite 文件和解压的图片拉下来，改一下配置里的路径，启动后逐个项目检查缩略图是否都能显示。整个过程花了大概一小时，之后对备份方案的信心就完全不一样了。

对于网络同步问题，artcraft 暂不支持多人实时协同，刻意避开了 Live Sync 的复杂度。如果你需要用手机和家里电脑同时访问，推荐做法是家庭服务器做端口转发，然后在手机上用浏览器直接访问内网IP。如果条件允许，也可以套一层内网穿透服务，但这不是我当前部署的重点。

4.3 性能优化的几个实测节点

数据量上来之后，最明显的性能瓶颈出现在项目时间轴页，因为每页要拉取该项目的全部进度动态，每张图都要压缩、去重、排序。我做了三步优化：第一步是图片懒加载，先把首屏每条动态的缩略图占位，等滚动到可视区附近再真正请求图片；第二步是分页改为"按时间游标"的分页方式，每次只取20条，滚动到底部再加载更早的；第三步是在后端给"项目详情+最近动态"做成一次 API 接口返回，避免前端连续发多次请求拼接数据。

优化前，一个包含300多条进度动态的项目页加载时间在满是图片的情况下大约4到5秒，优化后首屏基本能压到1秒以内，滚动加载也几乎没有明显卡顿。如果后续项目数量再上一个量级，我可能会把 SQLite 换成 PostgreSQL，但就当前单人使用的规模来说，SQLite 完全够用。

5. 常见问题与排查技巧实录

5.1 项目启动够不够"轻"？

经常有人问，我想用 artcraft 管理创作，但是又担心一开始要填的数据太多。我的建议恰恰相反：只填必填三件套，其他都留空。项目名、类型、状态这三个字段就能把一个项目立起来，剩下的比如预算、目标规格、关联库存，等你真正开始动手时再补。工具的价值应当在创作过程中被感受到，而不是在开工前成为负担。

反例我也见过，有朋友一装上就开始按软件工程项目的方式做精细规划，建一堆任务清单、里程碑节点，结果项目本身只有两个周末就能做完。过度规划不但没带来掌控感，反而消磨了创作的冲劲。artcraft 的设计哲学是"记录服务于过程"，不需要为了填满字段而填满。

5.2 库存统计经常对不上，怎么办？

这个问题在系统上线前两周几乎每天困扰我。排查下来的原因有两类：一类是消耗录入时数量写错了，比如一次用了5张砂纸，结果时间轴输入法里敲成了"@砂纸 5张"，但实际售卖的包装是10张/包，存量计算始终按照实际消耗数量扣减，没有考虑单位换算；另一类是同一材料的多个SKU容易串，比如"蜂蜡"存在固体块和液体罐装，消耗记录时选了错误的SKU。

改进方案有三个：第一，在材料SKU上增加"换算公式"字段，比如"1罐=500g"，录入消耗时如果检测到单位不同，会弹出换算提示；第二，在消耗录入文本框旁边加一个"最近使用材料"快捷列表，直接点选历史材料，大大降低串SKU的概率；第三，在库存明细页增加"手动盘点"按钮，每个月底实际点一次货，把差异量记成一条"盘盈/盘亏"动态，这样即便偶尔有统计疏漏，也不至于失真到影响下一次备料决策。

5.3 灵感记录字段太松散，归档时找不到东西？

这个问题的本质，是"收藏时零成本"与"使用时高精准"之间的天然矛盾。如果你在收藏阶段完全不分类，使用时在大堆未归档照片里翻找，同样痛苦。我的解法是用一个很轻的"自动标签引擎"：图片导入时会做一次 OCR 文字识别，把识别到的关键词（比如皮革、金属、木纹、绿色）自动附加到灵感记录上，不需要人工干预。如果识别不出关键词，就保持无标签，反正它还可以等到归档到项目时再补充用途角色。

此外我给灵感记录增加了"颜色占比"功能，导入时可以抽取图片的主色调，生成一个小色卡。这样即使你对图片内容一无所知，也可以通过"我想找一张偏棕色的配色参考"来快速筛选。这个功能虽然开发成本不高，但实际搜索体验提升非常明显。

5.4 多设备同步时出现冲突怎么办？

由于 artcraft 目前没有做实时协同，多设备同时编辑场景其实没那么常见。但我在路上用手机随手记了一条材料消耗，回家后又用电脑提交了一次旧的数据备份，导致重复扣减的情况确实遇到过一次。排查之后发现是手机端在离线状态下通过浏览器缓存延迟提交，而电脑端覆盖了同一条时间线快照。

为了避免这类问题，我在数据表里增加了一个 revision 版本号，每次写入都会带上版本号，如果提交时版本落后，后端会拒绝写入并返回“数据已更新，请刷新页面”。这个机制虽然简单，但解决了我担心的数据完整性大问题。同时，在移动端优先考虑"写入后立即本地重查"，确保刚录入的消耗能被及时感知。

5.5 图片等素材体积膨胀太厉害？

艺术创作过程图片往往高分辨率，单张可能10MB以上。要是一直往服务器里狂传原图，不仅磁盘空间吃紧，网络上传的时间也会让人不想用。推荐的做法是上传后立刻生成三种规格：缩略图（400px）、预览图（1000px）、原图（保留但压缩到80%质量）。预览图用于时间轴和详情页，原图仅当需要导出作品集高清文件时才流转压缩流程。

我在工作流里增加了一个后台任务队列，图片先传到临时目录，由队列异步处理后生成三种规格，然后才在界面上显示“图片处理完成”标识。这个异步流程的好处是，即便一次传20张图，使用者也不会感到卡顿，处理完成只是一个时间问题。

6. 一些后续可以继续扩展的方向

到这一步，artcraft 的核心闭环已经走通了：灵感入库、项目创建、材料关联、消耗记录、进度捕捉、作品集沉淀。但它还能继续生长的方向也很多。我个人比较看好的几个扩展点是：第一，生成月度或季度的"创作统计报告"，比如本月完成3件作品，消耗了多少材料，材料成本是多少，相比上月是增是减；第二，增加"图纸/模板库"，把常用尺寸的裁切版型存成PDF/矢量图，和项目绑定后可以一键打印；第三，对接一下社交平台的发布接口，作品集完成后可以直接排版后导出九宫格图，发到自己的主页，省去手工拼图的环节。

不过，我的原则是“够用就好”。手工艺创作管理的本质，是让创作的链条更顺畅，而不是让工具本身成为新的负担。根据我这两三个月的实际使用体验，artcraft 已经完全改变了我的工作台习惯——以前那些散落在相册、备忘录、购物车和脑子里的零散信息，终于被收拢到了一个真正自然的流程里。如果你也在玩手工、做设计或者做任何周期较长的实体创作，我真心建议你把"项目+材料+进度快照"这套框架试着套用到自己的流程里，哪怕不用我的工具，先按照这个思路整理一遍，也能感受到一种从未有过的从容感。

最后再分享一个小技巧：我每周五晚上会花五分钟快速浏览这一周录入的所有灵感碎片，只做一件事——把其中已经过时或者看腻的图片删除。这个看似无用的习惯，反而让灵感库一直保持高信噪比，下次创作时打开灵感箱的体验跟打开一个精心整理过的私人画廊一样舒服。删，有时候比存更值钱。