老实说，

光绘记的拍摄规划：项目管理与场景教程

写在前面

大家好。我是一名写了十多年 Web 前端的老兵。从 jQuery 时代一路走到 React/Vue，CSS3 动画、requestAnimationFrameWeb Animation API 这些都算是看家本领。去年开始转战鸿蒙环境，用 ArkTS 开发 App。这一路踩了不少坑，也积累了不少心得。

很多人觉得“前端转鸿蒙”应该很容易——都是写 UI 啊。组件化、状态管理、生命周期，概念都差不多。但真正上手之后你会发现，相似的地方让你觉得亲切。不同的地方让你抓狂。话说回来，

• 数据管理Web 的 localStorage 在鸿蒙里变成了 @ohos.data.preferences从同步 API 变成了异步 API。而且需要手动调用 flush 才能真正写入磁盘。
• 列表渲染React 的 map 在 ArkTS 里变成了 性能调整策略完全不同。
• 路由导航React Router 的 useNavigate 在鸿蒙里变成了 router.pushUrl

接下来这篇文章。我会用“光绘记”的实际开发经历，带你看看光绘项目的管理、场景教程的实现，还有数据统计功能。

这篇文章聊什么

"光绘记" 拍摄规划功能需要解决三个主要痛点：

1. 项目管理痛点：如何快速创建、编辑并追踪每个光绘项目的进度？避免信息散落在多个笔记本或聊天记录中。
2. 场景选择痛点：新手常不知道哪些地点适合光绘，也缺少现场安全与灯光建议。
3. 数据统计痛点：缺乏作品数量、使用工具频次等可视化数据，让创作成长轨迹模糊不清。

说到第一步先。项目管理

interface LightProject {
id这方面，string;name: string;description: string;status: string;// planning/ready/shooting/completed
再看scene，string;// 拍摄场景
从tools来看，string;// 使用的光源工具
techniques: string;// 使用的技法
presetId: string;// 相机参数预设
notes的观点是，string;createdAt: number;updatedAt: number;按理说，}
// 场景定义
const SCENES =;// 技法定义
const TECHNIQUES =;

项目管理页面示例：

@Entry @Component struct ProjectManagePage {
@State projects : LightProject =
@State filterStatus : string = "all"
async aboutToAppear {
await this.loadProjects
}
async loadProjects {
const store = await preferences.getPreferences。"guanghuiji_data")
const stored = await store.get as string
this.projects = JSON.parse
}
get filteredProjects: LightProject {
if return this.projects
return this.projects.filter
}
build {
Column {
// 状态筛选
Row {
ForEach=> {
Text)
.fontSize
.padding
.borderRadius
.backgroundColor
.fontColor
.onClick=>{ this.filterStatus=status })
})
}
.width
.justifyContent
.margin
// 项目列表
List {
ForEach=> {
ListItem {
Column {
Row {
Text.fontSize.fontWeight.layoutWeight
Text)
.fontSize
.padding
.borderRadius
.backgroundColor)
.fontColor
}
Text.fontSize.fontColor.margin
Flex {
ForEach=> {
Text
.fontSize
.padding
.margin
.borderRadius
.backgroundColor
.fontColor
})
}.margin
}
.width
.padding
.backgroundColor
.borderRadius
}
})
}.layoutWeight
// 新建项目按钮
Button
.onClick=>{ router.pushUrl })
.width
.backgroundColor
.margin
}
.width
.height
.padding
.backgroundColor
}
private getStatusLabel:string{
const map:{:string}={
all的观点是，"全部",planning:"规划中",ready:"准备就绪",shooting:"拍摄中",completed:"已完成"
};return map||status;}
private getStatusColor:string{
const colors:{:string}={
planning:"#3B82F6"。ready:"#10B981",shooting:"#F59E0B",completed:"#6B7280"
};
return colors||"#555";}
}

使用者常见痛点 — 项目列表混乱、状态难以追踪？

The above implementation solves pain point by providing a unified list with filter tabs,color‑coded status badges and persistent storage.

接下来的观点是。数据统计

@Entry @Component struct StatsPage {
@State totalProjects:number =0
@State totalPaintings:number =0
@State toolDistribution:{:number}={}
@State techniqueDistribution:{:number}={}
@State sceneDistribution:{:number}={}
async aboutToAppear{ await this.loadStats }
async loadStats{
const store=await preferences.getPreferences,"guanghuiji_data");const projStr=await store.get as string;const projects=JSON.parse as LightProject;this.totalProjects=projects.length;const paintStr=await store.get as string;const paintings=JSON.parse as any;this.totalPaintings=paintings.length;// 工具分布统计
this.toolDistribution={};projects.forEach+1 }) });// 技法分布统计
this.techniqueDistribution={};projects.forEach+1 }) });怎么说呢，// 场景分布统计
this.sceneDistribution={};projects.forEach(p=>{
const s=p.scene||"unknown";不过，this.sceneDistribution=+1;})，说起来，}
build{
Column{
// 概览卡片
Row{
Column{
Text.fontSize.fontWeight.fontColor;Text.fontSize.fontColor;}.layoutWeight;Column{
Text.fontSize.fontWeight.fontColor;Text.fontSize.fontColor;}.layoutWeight;}.width.padding.backgroundColor.borderRadius;// 常用工具排行
Text.fontSize.fontWeight.margin;List{
ForEach.sort=>b-a),=>{
ListItem{
Row{
Text.fontSize.layoutWeight;Text.fontSize.fontColor;}.width.padding.backgroundColor.borderRadius;}
})
}.layoutWeight;}
.width.height.padding.backgroundColor;}
}

使用者常见痛点 — 看不到自己用了哪些工具/技法？

The statistics page aggregates all project data into clear visual cards and ranked lists,giving creators a concrete view of ir growth.

：成就程序

const ACHIEVEMENTS =;

使用者常见痛点 — 缺少反馈机制导致动力不足？

The achievement system turns statistical milestones into gamified rewards。directly addressing motivation gap.

• # 项目管理：统一入口、状态流转，并提供筛选与持久化，让信息不再碎片化。
• # 场景教程：八大精选拍摄地点 + 实地安全/灯光提示，为新人提供“一站式”选址参考。
• # 数据统计：实时展示项目数、作品数、工具/技法使用分布，让创作者看到自己的成长曲线。
• # 成就程序：通过可视化勋章激励持续创作，帮助使用者突破“动力不足”的瓶颈。