参赛作品 · 生活娱乐赛道 · 个人画廊
提交赛道：生活娱乐
Demo 名称：个人画廊（Personal Gallery）
作品类型：本地桌面应用（JavaFX 21）
开发工具：TRAE IDE
1. Demo 简介
1.1 是什么
个人画廊是一款本地优先（Local‑First）的桌面端内容管理应用，专门用来记录和回顾"我看过什么、我读过什么"——用类似私人博物馆的卡片画廊形式，帮助用户沉淀长期的精神消费轨迹。产品形态为跨平台桌面客户端（Windows / macOS），同时附带一个交互式 HTML 演示页，方便评审在浏览器中直接体验核心交互。
1.2 面向谁
| 用户群 | 典型场景 |
|---|---|
| 重度影视/小说消费者 | 看完一部电影或读完一本小说后想立刻归档、加标签、写下观后感 |
| 隐私敏感的知识工作者 | 不希望个人观影/阅读记录上云，希望数据完全在自己硬盘上 |
| 追求美感的年轻用户 | 想要一个界面"好看、像样、能拿得出手"的个人内容空间，而不是单调的表格 |
| 内容创作者 / 博主 | 需要快速翻查"我过去推荐过哪些好作品"，作为选题库使用 |
1.3 主要功能（2–3 个核心）
配图为产品截图，详见第 4 节"关键步骤截图"。
-
画廊式卡片网格 + 详情/编辑一体化面板
- 顶部导航 / 统计栏 / 标签&时间&排序筛选栏；中间 4 列自适应卡片墙；右侧 348px 固定宽度的可编辑详情面板（点开即编辑，无 view/edit 模式切换），与 Apple 备忘录、Things 3 的交互范式保持一致。
-
多空间 + JSON 文件持久化 + ZIP 一键导入导出
- 每个"空间"是一个独立目录（包含
gallery.json+covers/），可在应用内同时管理多份独立数据；条目用 UUID 标识，封面对应独立图片文件，不嵌入 base64；数据可整包 ZIP 导出/导入，方便跨设备同步和备份。
- 每个"空间"是一个独立目录（包含
-
Apple 风格设计系统 + 亮/暗主题
- 8 / 12 / 20 px 三档圆角、规范化阴影、DM Sans 字体、
#ff9500橙色评分星级、统一的对话框样式（含中文按钮）。主题切换通过light.css/dark.css双套 token 实现，偏好持久化到config.json。
x
- 8 / 12 / 20 px 三档圆角、规范化阴影、DM Sans 字体、
2. Demo 创作思路
2.1 灵感来源
作为重度内容消费者，我经常被两个问题困扰：
- “我看过的这部片叫什么来着？” —— 散落在豆瓣、Netflix、浏览器书签里的记录彼此不通气，半年后基本找不回。
- “为什么我最近总是看不下去新片？” —— 没有形成可视化的"消费轨迹"，无法回看自己过去一段时间的精神口味变化。
现有工具要么太重（Notion 需要大量手动配置），要么太轻（浏览器书签夹只能存链接，没有封面、评分、观后感维度），没有一款真正"以个人内容画廊"为核心的产品。
我希望有一个像"私人博物馆"一样的应用，让"看过的内容"不再是流水的算法推荐，而是可被自己珍藏和回望的展品。
2.2 想解决的问题
- 分散性：豆瓣/微博/浏览器/视频 App 各管一摊，没有统一记录入口。
- 可回忆性：文字列表单调，没有封面+评分+观后感的立体展示，半年后翻不起来。
- 数据主权：云端笔记服务的隐私风险 + 平台倒闭/限流/封号带来的"数字失忆"焦虑。
- 可迁移性：我希望数据可读、可携带、可备份，不被任何厂商锁定。
2.3 为什么做这个方向
| 备选方向 | 评估 | 是否采用 |
|---|---|---|
| 通用 Notion 替代品 | 市场已饱和（Notion / Obsidian / Logseq） | ✗ |
| 影视评分社区 | 已有豆瓣/IMDb，缺差异化 | ✗ |
| 个人内容画廊（本地、卡片、可迁移） | 细分赛道、痛点真实、与隐私/美学趋势契合 | ✓ |
在落地形态上，我最终选择了 JavaFX + 纯 Java 的单进程架构（备选方案 Electron + SpringBoot 反而带来双进程、500MB 内存、上百兆安装包的负担，对单机本地应用是"杀鸡用牛刀"）。技术选型的详细对比见仓库内 技术选型.md。
3. Demo 体验地址（三选一）
桌面应用exe（jpackage 产物）
查看个人画廊.zip, 解压后点击个人画廊.exe启动
4. TRAE 实践过程
4.1 完整开发流程
整个项目从 0 到 1 完全在 TRAE IDE 内完成，贯穿了"需求 → 架构 → 编码 → 重构 → 规格化 → 归档"的完整链路：
[1] 需求 & 选型阶段
└─ 在 TRAE 中讨论：本地优先 vs 云端、Electron+SpringBoot vs JavaFX+纯Java
└─ 输出：报名帖.md、技术选型.md（方案 A vs 方案 B 详细对比）
[2] 架构 & 编码阶段
└─ 一次性初始化：Maven 工程、模块声明、JavaFX 21 LTS、Java 21
└─ 围绕 Model / Service / Repository / Controller 分层落地
└─ 关键文件（均由 TRAE 协助生成/重构）：
· personal-gallery/backend/src/main/java/com/gallery/GalleryApp.java
· personal-gallery/backend/src/main/java/com/gallery/controller/GalleryController.java
· personal-gallery/backend/src/main/java/com/gallery/service/*.java
· personal-gallery/backend/src/main/resources/fxml/gallery.fxml
· personal-gallery/backend/src/main/resources/css/light.css / dark.css
[3] 重构 & 决策阶段（典型示例）
└─ 数据持久化：SQLite → JSON 文件
原因：JSON 目录化结构天然适合"一个空间一个目录"模型，
导入/导出可直接走 ZIP（gallery.json + covers/），无需序列化二进制
└─ 详情面板：view / edit 双模式 → 进入即编辑
原因：用户最常用动作是修改，单击直接进入编辑态可少一次点击
└─ 评分星级：Unicode 字符 → SVG path + linear-gradient
原因：矢量绘制跨分辨率一致、hover 缩放阴影表现更细腻
[4] 规格化 & 归档阶段
└─ 引入 OpenSpec 工作流（TRAE 内运行 openspec-archive-change 等技能）
└─ 已归档 4 个 change：
· 2026-06-26-redesign-gallery-ui
· 2026-06-27-json-gallery-spaces
· 2026-06-27-migrate-to-javafx
· 2026-06-30-inline-edit-detail-panel
└─ 主 specs 已同步（apple-design-system / cover-upload / dark-mode /
detail-panel / search-and-sort / stats-overview）
4.2 关键步骤截图（≥ 3 张）
| # | 截图内容 |
|---|---|
| 1 | 主界面 + 详情/编辑一体化面板（Apple 风格，348px 固定宽） |
| 2 | 空间切换菜单 + 创建/打开新空间 |
| 3 | 亮色 / 暗色主题对比（同一份数据） |
| 4 | 评分星级：SVG 五角星 + 渐变填充 + hover 缩放阴影 |
| 5 | OpenSpec 工作流：proposal/design/specs/tasks 目录结构 |
|  |
|  |
|  |
|  |
|  |
4.3 关键任务对话 Session ID（≥ 3 个，用于证明由 TRAE 完成）
以下为本项目开发过程中在 TRAE 内产生的真实 session 示例，供评审溯源：
1572768086520724:928e7515fd6a68b90b6d33ca9cce01a7_6a3e9311a7bcb60c1bd3db20.6a429381fbb2544e26ee1a9f.6a429381fbb2544e26ee1a9d:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/29 23:47:13)
1572768086520724:d052ef1ce7f40fa02b3e6509f73c5d29_6a3e9311a7bcb60c1bd3db20.6a4294e4fbb2544e26ee1b00.6a4294e4fbb2544e26ee1afe:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/29 23:53:08)
1572768086520724:b0b6f9c3742f3359adbb198823796b3f_6a3e9311a7bcb60c1bd3db20.6a3ea29ba7bcb60c1bd3dba3.6a3ea29ba7bcb60c1bd3dba1:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/27 00:02:35)
1572768086520724:438b6620f94388107f79d8bafe2a8a12_6a3e9311a7bcb60c1bd3db20.6a3e9651a7bcb60c1bd3db98.6a3e9651a7bcb60c1bd3db96:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/26 23:10:09)
5. 附：已通过的社区报名帖
报名帖路径： 【生活娱乐赛道】个人画廊
报名赛道：生活娱乐
报名时间：2026年6月19日
报名帖社区链接： 【生活娱乐赛道】个人画廊
核心数据约定（约束摘要）：
- 数据：JSON 文件 +
covers/子目录，UUID 标识，ISO 8601 时间戳 - 主题：双套 CSS token（light / dark），偏好持久化到
config.json - 详情面板：固定宽 348px，竖向滚动，进入即编辑
- 评分：
#ff9500橙色填充 + SVG 五角星，hover 缩放阴影 - 导入/导出：ZIP 格式（
gallery.json+covers/） - 规格：OpenSpec 驱动，所有 UI 改进走 proposal → design → specs → tasks → archive
通过网盘分享的文件：个人画廊 初赛demo.zip
链接: 百度网盘 请输入提取码 提取码: sv5f