引言

当陶艺从传统手工艺进化为潮流生活方式，一场关于"侘寂陶土"与"手作温度"的视觉革命正在手作圈蔓延。CLAY LAB 手作陶艺坊正是这样一款概念应用——它将拉坯的专注、手捏的温度、釉料的绚烂、柴烧的惊喜、社区的分享，全部浓缩进一个 ArkTS 单文件之中。

不同于传统陶艺 App 的工具路线，CLAY LAB 选择了"潮流手作·陶艺课程·材料电商·社区分享"的定位：暖白底色上，陶土橙 #C67B4E 与鼠尾草绿 #9CAF88 对撞，亚麻米 #EFE3D0 铺底，深褐 #4A3C32 勾勒，如同陶艺工作室的温暖灯光。陶轮旋转、窑火呼吸、灰尘粒子漂浮、流光横扫——约 4 组属性动画让整个界面如同陶艺工坊的真实场景。

6 个 Tab 覆盖完整业务链路：首页查看本月主题展览与手作之星、课程浏览 12 节陶艺课程并预约、材料选购陶土釉料工具、工坊查看拉坯七步曲与窑炉预约、社区浏览泥友作品并发布、我的管理个人作品与手作等级。6 套弹框各具特色：预约课程（时段chips+人数stepper）、新增作品（器型Radio+釉色chips+温度Slider）、编辑作品（釉色chips+状态chips）、删除作品（红色警示）、预约窑炉（窑炉chips+曲线chips+时段chips）、报名展览（展位选择+作品数stepper）。

本文将从项目概述、色彩系统、架构设计、数据模型、六大 Tab、六大弹框、属性动画、首页与课程、材料与工坊、社区与我的、性能优化、陶艺文化、手作疗愈、开发环境搭建共十四个维度，对 CLAY LAB 手作陶艺坊进行深度解析，文末附完整 ArkTS 源码。

---

第一章 项目概述与设计理念

1.1 项目定位

CLAY LAB 手作陶艺坊是一款面向潮流手作·陶艺工作室的概念应用，核心定位是"课程+电商+社区"三位一体的得物 App 风格。目标用户是 20-40 岁的手作爱好者、陶艺初学者、生活美学追求者、Z 世代潮流消费者。应用场景包括：浏览陶艺课程、预约拉坯体验、选购陶土釉料工具、查看窑炉排期并预约、浏览泥友社区作品、发布个人作品、报名月度展览、管理手作等级与作品档案。

1.2 设计理念

侘寂陶土暖风美学：以日式侘寂（Wabi-Sabi）美学为视觉灵感来源，陶土橙 #C67B4E 作为主强调色贯穿按钮、Tab 激活、价格、热门标签，鼠尾草绿 #9CAF88 作为辅助强调色用于可约状态、确认按钮、材料分类、技能标签，深褐 #4A3C32 用于大师标签、标题、重要文字，亚麻米 #EFE3D0 铺底构建温暖感，暖白 #FAF6EF 作为卡片背景，如同陶艺工作室的温暖灯光与陶土质感。

得物 App 电商风：顶部搜索栏 + 消息铃铛角标、首页双列作品瀑布流、课程大卡列表、材料分类色卡、社区瀑布流，完全复现潮流电商的购物体验。预约课程弹框的时段chips+人数stepper+合计计算如同电商下单流程。

手作温度与不完美之美：大量使用不对称圆角（borderRadius 左上角大右上角小）、陶器弧形下缘（bottomLeft/bottomRight 60vp 大圆角）、灰尘粒子漂浮动画、陶轮旋转动画，营造手作的温度感和不完美之美。每件作品卡的圆角都不对称，如同手工拉坯的自然形态。

1.3 核心功能矩阵

模块	核心功能	数据量
首页	主题展览横幅、手作之星横滚、双列作品瀑布	12 作品 / 8 之星
课程	报名热度柱状图、课程大卡列表、预约入口	12 课程 / 6 热度
材料	分类色卡、釉料色卡横滚、材料列表	6 分类 / 14 材料 / 10 釉料
工坊	陶轮旋转动画、拉坯七步时间轴、温度曲线、窑炉预约	7 步骤 / 12 窑炉 / 8 温度点
社区	热门话题横排、器型分布条、双列瀑布流、发布入口	12 帖子 / 8 话题 / 5 器型
我的	手作等级进度环、数据统计、我的作品列表	12 作品 / 3 数据

1.4 技术亮点

• 单文件 ArkTS 零依赖：约 2900 行代码在一个 .ets 文件中，复制即运行
• 约 4 组属性动画：陶轮 360° 旋转（Normal 循环）、窑火呼吸（Alternate）、灰尘粒子漂浮（3 纯函数驱动）、流光横扫（Alternate）
• 9 纯函数业务逻辑：热门作品排序、按器型筛选、可用窑炉筛选、按类型筛选课程、总点赞统计、报名峰值、灰尘粒子 Y/X/Opacity
• 6 差异化弹框：预约课程式 / 新增作品式 / 编辑作品式 / 红色警示删除式 / 预约窑炉式 / 报名展览式
• 手作等级进度环：Progress Ring 组件展示匠人等级 760/1000
• 拉坯七步时间轴：横向流程展示揉泥→定中心→开孔→成型→修坯→上釉→烧制
• 柴烧温度阶梯曲线：8 点 Column 阶梯模拟温度变化，红→金→绿三色渐变
• 灰尘粒子漂浮特效：3 纯函数计算粒子位置和透明度，模拟工坊空气中的陶土灰尘

---

第二章 色彩系统与视觉风格

2.1 色彩体系

CLAY LAB 手作陶艺坊定义了 15 色完整调色板（CYColorPalette 接口），分为五个层级：

基础层（暖白与亚麻）：

• card #FAF6EF：卡片背景，暖白色
• linen #EFE3D0：亚麻米，铺底色、输入框背景、按钮背景
• white #FFFFFF：纯白，按钮文字

强调层（陶土橙 × 鼠尾草绿 × 深褐）：

• clay #C67B4E：陶土橙，主按钮、Tab 激活、价格、热门标签、进度环
• clayDeep #A85F38：深陶土橙，渐变终点、边框、选中态背景、价格文字
• clayLight #E0A87E：浅陶土橙，渐变终点、辅助色
• sage #9CAF88：鼠尾草绿，可约状态、确认按钮、材料分类、技能标签、保存按钮
• sageLight #D8E2CE：浅鼠尾草绿，分类背景、标签背景
• brown #4A3C32：深褐，大师标签、标题、重要文字、状态chips选中
• brownLight #6E5D4F：浅褐，辅助文字、不可约状态

功能层：

• danger #B5432E：危险红，删除按钮、警告、窑炉chips选中、点赞红心
• gold #C9A227：鎏金，温度曲线、窑炉呼吸灯、材料分类

文字层：

• textMain #3B2F27：主文字，深褐近黑
• textSub #8C7B6B：次要文字，中褐灰
• textHint #BFAE9D：提示文字，浅褐灰

2.2 色彩应用策略

陶土橙 #C67B4E 是应用的灵魂色，承担"行动召唤与手作标识"角色：底部 Tab 激活态文字和指示条、主操作按钮（确认预约/发布作品/提交报名）、价格显示、热门标签、进度环、作品卡价格。陶土橙在暖白背景上具有温暖的视觉穿透力，如同陶土在窑火中的颜色。

鼠尾草绿 #9CAF88 承担"可用与确认"角色：可约窑炉状态、保存修改按钮、材料分类、器型标签、加入购物车按钮、可约边框。鼠尾草绿与陶土橙形成冷暖对撞，在数据可视化中区分"可用/确认"与"行动/热门"。

深褐 #4A3C32 承担"尊贵与专业"角色：大师标签、课程类型标签（大师班）、标题、重要文字、状态chips选中（制作中）、报名展览提交按钮。深褐在陶土橙和鼠尾草绿中起到"第三极"稳重感作用，增加专业感和价值感。

2.3 侘寂渐变与陶器弧形

应用大量使用 linearGradient 构建视觉层次：

• 主题展览横幅：#A85F38 → #C67B4E → #E0A87E 160° 三色渐变，陶土暖色如同窑火
• 作品卡色块：c1 上半 + c2 下半双色拼接，模拟釉色渐变效果
• 社区帖子卡：c1 + c2 双色渐变，模拟作品釉色效果
• 陶轮：#EFE3D0 → #C67B4E 180° 渐变，模拟陶轮旋转时的陶土质感
• 温度曲线柱：#B5432E → #C9A227 → #9CAF88 180° 三色渐变，模拟温度从高到低

陶器弧形下缘是 CLAY LAB 的标志性设计：多个卡片使用 bottomLeft/bottomRight 60vp 大圆角，如同陶器的弧形底部。首页主题展览横幅、工坊实况卡、我的个人卡都采用这一设计，增加手作陶器的形态感。

不对称圆角贯穿全应用：几乎所有按钮和卡片都使用不对称圆角（左上角大右上角小，或反之），如同手工拉坯的自然不完美形态，增加手作温度感。

2.4 陶轮旋转与灰尘粒子

项目通过属性动画模拟陶艺工坊场景：

• 陶轮旋转：工坊 Tab 的陶轮 360° 旋转，4200ms Normal+Linear，如同拉坯时陶轮匀速转动
• 窑火呼吸：窑炉卡的温度指示灯 opacity 呼吸，1800ms Alternate，如同窑火闪烁
• 灰尘粒子漂浮：首页横幅的 4 个灰尘粒子，通过 cyDustY/cyDustX/cyDustO 三纯函数计算位置和透明度，5200ms Alternate，模拟工坊空气中漂浮的陶土灰尘
• 流光横扫：首页横幅的高光条 translate 横扫，6000ms Alternate，如同光线扫过陶器表面

这些动画共同营造陶艺工坊的真实场景感，让静态界面"活"起来。灰尘粒子漂浮是本应用的特色特效，3 纯函数驱动粒子位置和透明度变化，无需定时器即可实现自然漂浮效果。

---

第三章 项目架构与文件组织

3.1 单文件组件化架构

CLAY LAB 手作陶艺坊采用"单文件组件化"架构，所有代码在一个 Index.ets 文件中，通过 @Component 装饰器划分为约 14 个独立组件（6 Tab + 5 弹框 + 1 根入口 + 内联删除弹框）。代码量约 2900 行，处于单文件架构的合理范围。优势在于零配置运行、低理解成本、快速原型验证，适合概念展示和教学演示场景。

3.2 组件层次结构

CYClayLabApp (@Entry 根组件)
├── 顶部标题栏（泥字Logo + CLAY LAB + 搜索 + 铃铛角标）
├── 内容区 Stack
│   ├── 6 个 Tab 内容组件（6 选 1）
│   │   ├── CYHomeContent（首页）
│   │   ├── CYCourseContent（课程）
│   │   ├── CYMaterialContent（材料）
│   │   ├── CYStudioContent（工坊）
│   │   ├── CYCommunityContent（社区）
│   │   └── CYMineContent（我的）
│   └── 6 个弹框（按需显示，zIndex 999）
│       ├── CYCourseBookModal（预约课程）
│       ├── CYAddWorkModal（新增作品）
│       ├── CYEditWorkModal（编辑作品）
│       ├── 删除作品弹框（内联·红色警示）
│       ├── CYKilnBookModal（预约窑炉）
│       └── CYExhibitModal（报名展览）
└── 底部 Tab 导航栏（6 项）

根组件管理当前 Tab（activeTab）、6 个弹框显隐状态（showCourseBook/showAddWork/showEditWork/showDeleteWork/showKilnBook/showExhibit）、弹框间传递数据（bookingCourse/editingWorkName/deletingWorkName）。每个 Tab 组件负责自身 UI 和局部状态，通过回调函数（onBook/onAdd/onEdit/onDelete/onBookKiln/onExhibit）与根组件通信。

3.3 @Builder 自定义构建函数

项目使用约 8 个 @Builder 方法封装可复用 UI 片段：modalOverlay（弹框遮罩层）、courseBookModal/addWorkModal/editWorkModal/deleteWorkModal/kilnBookModal/exhibitModal（6 个弹框结构）、headerBar（顶部标题栏）。@Builder 减少重复代码，提高可读性，支持参数传递和条件渲染。

3.4 弹框架构设计

弹框采用"遮罩层 + 内容层"Stack 叠加模式，统一在根组件管理。6 套弹框各具特色：

1. 预约课程：课程名回显 + 时段chips（5 选 1）+ 人数stepper（1-6人）+ 合计动态计算
2. 新增作品：作品名输入 + 器型Radio（4 选 1）+ 釉色chips（7 选 1）+ 温度Slider（800-1320℃）
3. 编辑作品：作品图标回显 + 作品名输入 + 釉色chips（7 选 1）+ 状态chips（4 选 1）
4. 删除作品（红色警示）：⚠️图标 + 下架说明 + 作品名回显卡 + 再想想/确认下架
5. 预约窑炉：窑炉chips（5 选 1，红色系）+ 温度曲线chips（5 选 1，金色系）+ 时段chips（4 选 1，深褐系）
6. 报名展览：展览名回显 + 展位选择（4 展位卡，含价格/余位）+ 作品数stepper（1-10件）+ 展位费动态计算

---

第四章 数据模型与全局状态管理

4.1 接口定义体系

项目定义 16 个 TypeScript 接口描述数据模型：CYColorPalette（色彩）、CYTabItem（导航）、CYWork（首页作品）、CYStar（手作之星）、CYCourse（课程）、CYEnrollStat（报名统计）、CYMatCategory（材料分类）、CYMaterial（材料）、CYGlaze（釉料）、CYStep（拉坯步骤）、CYKiln（窑炉）、CYTempPoint（温度点）、CYPost（社区帖子）、CYShapeStat（器型统计）、CYTopic（话题）、CYMyWork（我的作品）、CYBooth（展位）。

4.2 全局数据常量

约 20 组全局 const 常量：核心业务数据（CY_HOME_WORKS 12 件 / CY_STARS 8 位 / CY_COURSES 12 节 / CY_ENROLL_STATS 6 项 / CY_MAT_CATEGORIES 6 类 / CY_MATERIALS 14 件 / CY_GLAZES 10 色 / CY_STEPS 7 步 / CY_KILNS 12 台 / CY_TEMP_CURVE 8 点 / CY_POSTS 12 帖 / CY_SHAPE_STATS 5 型 / CY_TOPICS 8 话题 / CY_MY_WORKS 12 件 / CY_BOOTHS 4 展位）、配置数据（CY_TABS 6 项 / CY_COURSE_SLOTS 5 时段 / CY_KILN_CHIPS 5 窑炉 / CY_KILN_CURVES 5 曲线 / CY_KILN_SLOTS 4 时段 / CY_GLAZE_CHIPS 7 釉色 / CY_SHAPE_RADIOS 4 器型 / CY_STATUS_CHIPS 4 状态）。

4.3 三级状态管理策略

• 第一级 全局常量（const）：业务数据和配置，任何组件可直接读取，运行时不可变
• 第二级 组件局部状态（@State）：组件内交互状态，如 selectedSlot/count（预约课程）、workName/shape/glaze/temp（新增作品）、editName/glaze/status（编辑作品）、kiln/curve/slot（预约窑炉）、booth/count（报名展览）、flowX/dustT（首页动画）、wheelAngle/kilnGlow（工坊动画）
• 第三级 根组件协调状态（@State）：跨组件状态，如 activeTab（当前 Tab）、6 个弹框显隐开关、弹框间传递数据（bookingCourse/editingWorkName/deletingWorkName）

4.4 全局纯函数

9 个全局纯函数处理数据转换和业务逻辑：

• cyHotWorks()：按点赞数降序排序首页作品，返回热门作品列表
• cyFilterWorksByShape(shape)：按器型筛选首页作品
• cyAvailableKilns()：筛选可用窑炉（available=true）
• cyCoursesByType(type)：按课程类型筛选（体验/进阶/大师）
• cyTotalMyLikes()：计算社区帖子总点赞数
• cyMaxEnroll()：返回课程报名峰值（142）
• cyDustY(t, seed)：灰尘粒子垂直位置，基于 (t+seed*37)%150 计算
• cyDustX(t, seed)：灰尘粒子水平位置，基于 (t0.5+seed53)%36 计算
• cyDustO(t, seed)：灰尘粒子透明度，基于 0.55-|p-75|/170 计算呼吸效果

纯函数相同输入永远产生相同输出，无副作用，易于测试和复用。灰尘粒子三纯函数是本应用的特色，通过数学公式模拟粒子自然漂浮，无需定时器即可实现动画效果。

---

第五章 六大 Tab 页面深度解析

5.1 首页 Tab（CYHomeContent）

首页是入口，承担"查看主题展览→了解手作之星→浏览作品→报名参展"路径。页面结构：

1. 本月主题展览横幅（陶土三色渐变 + 灰尘粒子漂浮 + 流光横扫 + 陶器弧形下缘）

   • 160° 三色渐变 #A85F38→#C67B4E→#E0A87E
   • 本月主题展览标签（深褐半透明背景）
   • 「侘寂之器 · 不完美之美」标题白色 19vp
   • 38 件会员作品 · 展期 8/01 - 8/31
   • 报名参展按钮（亚麻米背景深陶土橙文字）
   • 🏺 陶器 emoji 52vp
   • 4 个灰尘粒子漂浮（cyDustY/cyDustX/cyDustO 纯函数驱动，5200ms Alternate）
   • 流光高光条横扫（flowX，6000ms Alternate）
   • 陶器弧形下缘（bottomLeft/bottomRight 60vp）

2. 本周手作之星横滚（8 位）：52vp 圆头像（浅鼠尾草绿背景）+ emoji + 名称 + 头衔 + 作品数 + 徽章（大师深褐/匠人陶土橙/学徒鼠尾草绿）

3. 双列作品瀑布（12 件，按热度排序 cyHotWorks）

   • 每卡 48.5% 宽，Flex Wrap 自动换行
   • 双色渐变色块：c1+c2 135° 渐变，110vp 高，模拟釉色效果
   • 作品名 + 作者·器型 + ❤️点赞数 + ¥价格
   • 12 件覆盖：雨过天青胆瓶¥468/粗陶抹茶碗¥168/月白茶盏对杯¥298/铁锈花大盘¥388/冰裂纹花器¥528/手捏咖啡杯¥128/志野风小钵¥218/柴烧侧把壶¥688/釉下彩小碟¥98/绞胎笔洗¥348/急须侧把壶¥598/素坯香插¥68

三组特效动画是首页的核心视觉亮点：灰尘粒子漂浮模拟工坊空气中的陶土灰尘、流光横扫模拟光线扫过陶器表面、陶器弧形下缘增加手作陶器形态感。

5.2 课程 Tab（CYCourseContent）

课程是服务预约中心，承担"查看报名热度→浏览课程→预约"路径。页面结构：

1. 本月课程报名热度柱状图（6 课程）

   • 拉坯初体验142/手捏陶趣118/亲子陶艺128/乐烧之夜96/柴烧大师班38/茶器套组26
   • 柱子高度 count/cyMaxEnroll()*90 动态计算，cyMaxEnroll() 返回142
   • 每柱陶土橙→亚麻米 180° 渐变
   • 峰值拉坯初体验142人

2. 课程大卡列表（12 节）

   • 每卡：54vp 圆图标（亚麻米背景）+ emoji + 课程名 + 类型标签（体验陶土橙/进阶深陶土橙/大师深褐）+ 等级标签（鼠尾草绿描边）+ ⏱时长 + 已报名人数 + 剩余名额（≤3红色加粗）+ ¥价格 + 预约按钮（陶土橙）
   • 12 节覆盖：拉坯初体验¥199/手捏陶趣¥168/修坯精修课¥328/釉下彩绘¥388/柴烧大师班¥2680/乐烧之夜¥299/绞胎纹样¥428/茶器套组¥3280/亲子陶艺¥258/雕塑入门¥368/化妆土装饰¥348/坑烧体验¥358

课程大卡的剩余名额预警是特色交互，≤3 个名额时红色加粗显示，增加紧迫感。类型标签三色区分（体验/进阶/大师），帮助用户快速识别课程难度。

5.3 材料 Tab（CYMaterialContent）

材料是电商中心，承担"浏览分类→查看釉料→选购材料"路径。页面结构：

1. 三列分类色卡（6 类）：陶土🟤/釉料🎨/工具🔧/颜料🖌️/模具🧱/围裙🥋，每卡含图标+分类名+种类数，分类色背景+分类色边框

2. 釉料色卡横滚（10 色）

   • 每卡：64vp 纯色色块（c1+c2 160° 渐变）+ 色名 + 烧成温度
   • 10 色覆盖：雨过天青1280℃/柿红1240℃/米白化妆土1180℃/侘寂黑1260℃/蜜柑黄1220℃/陶土原色1200℃/鼠尾草绿1250℃/亚麻灰1230℃/铁锈花1270℃/月白1290℃
   • 不对称圆角（topLeft 32/topRight 10/bottomLeft 10/bottomRight 32）

3. 材料列表（14 件）

   • 每件：42vp 圆图标 + 材料名 + 分类标签（鼠尾草绿）+ 规格 + ¥价格 + 库存状态（现货充足绿/仅剩X份金/补货中红）+ 加入按钮（鼠尾草绿）

釉料色卡横滚是材料 Tab 的核心视觉，10 色釉料以渐变色块展示，烧成温度标注增加专业感。不对称圆角（左上角大圆角）模拟釉料流淌的自然形态。

5.4 工坊 Tab（CYStudioContent）

工坊是陶艺制作中心，承担"查看陶轮实况→了解拉坯步骤→查看温度曲线→预约窑炉"路径。页面结构：

1. 工坊实况卡（陶轮旋转动画 + 陶器弧形下缘）

   • 92vp 陶轮（亚麻米→陶土橙 180° 渐变 + 深褐3vp边框 + 多层同心圆 + 拉坯纹）
   • 陶轮 360° 旋转（wheelAngle，4200ms Normal+Linear）
   • 工坊实况标题 + 今日窑火不熄·6 台窑炉运转中 + 可约窑位 7 个·素坯待烧 34 件

2. 拉坯七步时间轴（横向流程）

   • 7 步：揉泥🤲/定中心🎯/开孔🕳️/成型🫖/修坯🔪/上釉🎨/烧制🔥
   • 每步：46vp 圆图标（陶土橙/鼠尾草绿交替）+ 步骤名 + 小贴士
   • 横向 Scroll + Row，步骤间用"—"连接

3. 柴烧温度阶梯曲线（8 点 Column 阶梯模拟）

   • 8 点：入窑12/脱水30/氧化58/升温82/高温100/保温88/降温52/出窑20（百分比值）
   • 柱子高度 value*0.9 动态计算，底部对齐
   • 每柱危险红→鎏金→鼠尾草绿 180° 三色渐变
   • 峰值 1300℃ 危险红标注

4. 窑炉预约列表（12 台）

   • 每台：44vp 圆图标（可用浅鼠尾草绿🔥/不可用灰🔒）+ 窑炉温度呼吸灯（可用金色脉动）+ 窑炉编号 + 温度曲线标签 + 容量 + 🕐时段 + 状态（可约绿/占用灰）+ 预约/不可约按钮

陶轮旋转动画是工坊 Tab 的核心视觉，4200ms Normal+Linear 实现无缝旋转，如同拉坯时陶轮匀速转动。窑炉温度呼吸灯增加窑火闪烁的真实感。

5.5 社区 Tab（CYCommunityContent）

社区是分享中心，承担"浏览热门话题→查看器型分布→浏览作品→发布"路径。页面结构：

1. 顶部发布入口：📷泥友社区标题 + +发布作品按钮（陶土橙）

2. 热门话题横排（8 话题）

   • #拉坯打卡100天（1286帖，热）/#我的第一只碗（964帖，热）/#釉料配方交换（735帖）/#柴烧开箱（622帖，热）/#修坯翻车现场（488帖）/#手捏萌物（431帖）/#窑炉拼窑（302帖）/#工作室日常（275帖）

3. 器型分布条（5 型，Row 宽度比例）

   • 杯86（陶土橙）/碗72（鼠尾草绿）/瓶45（鎏金）/盘38（深陶土橙）/壶24（深褐）
   • 横向比例条，clip 圆角裁剪

4. 双列瀑布流（12 帖，左右两列交替高度）

   • 每卡：双色渐变色块（tall 130vp/short 96vp 交替高度）+ 帖子名 + @作者·器型·釉色 + ❤️点赞数 + 💬评论数

双列瀑布流的交替高度（tall/short）是社区 Tab 的核心设计，模拟真实瀑布流布局，增加视觉多样性和浏览趣味。热门话题横排增加社区活跃度，器型分布条增加数据可视化。

5.6 我的 Tab（CYMineContent）

我的是个人中心，承担"查看手作等级→了解数据→管理作品"路径。页面结构：

1. 个人卡 + 手作等级进度环（陶器弧形下缘）

   • 96vp Progress Ring 进度环（strokeWidth 9，陶土橙，value 76/total 100）
   • 环内：匠人等级 + 760/1000 手作值
   • 右侧：👐捏泥人阿土 + CLAY LAB 驻场学员·加入 186 天
   • 等级路径：学徒—匠人—大师，还差 240 手作值

2. 数据统计条（3 数据）

   • 🏺12 作品数（陶土橙）/ ❤️4993 总点赞（危险红，cyTotalMyLikes() 纯函数计算）/ 🔥83% 烧成成功率（鼠尾草绿）

3. 我的作品列表（12 件）

   • 每件：46vp 圆图标 + 作品名（已售删除线）+ 器型标签（鼠尾草绿）+ 釉色 + 状态标签（制作中陶土橙/素坯褐灰/已烧成鼠尾草绿/已售危险红）+ 编辑按钮 + 下架按钮

手作等级进度环是我的 Tab 的核心设计，Progress Ring 组件展示手作等级进度，76% 完成度直观展示。等级路径（学徒→匠人→大师）增加成长感和目标感。我的作品列表的状态标签完整记录作品生命周期，已售作品删除线显示增加真实感。

---

第六章 六大弹框组件设计

弹框是 CLAY LAB 手作陶艺坊交互体系的核心组成部分。项目共设计了 6 套弹框组件，覆盖预约课程、新增作品、编辑作品、删除作品、预约窑炉、报名展览六大业务场景。

6.1 预约课程弹框（CYCourseBookModal）

定位：陶艺课程预约入口，时段chips+人数stepper设计。

核心功能：

1. 课程名回显：📅 + 课程名（@Prop 从根组件传入）
2. 选择时段：5 个时段 chips（周六上午/周六下午/周日上午/周日下午/工作日晚间），选中陶土橙背景白字
3. 预约人数：−/+ stepper（1-6人），陶土橙大号数字显示，单节¥199·合计¥(人数*199) 动态计算
4. 底部操作：再看看（亚麻米）+ 确认预约（陶土橙）

@Prop courseName 从根组件传入课程名，实现弹框数据回显。人数 stepper 的边界值自动限制（1-6人），合计金额动态计算增加透明度。

6.2 新增作品弹框（CYAddWorkModal）

定位：发布新作品入口，器型Radio+釉色chips+温度Slider设计。

核心功能：

1. 作品名称：文本输入
2. 器型：4 个 Radio（杯/碗/瓶/盘），group=‘cyShape’
3. 釉色：7 个 chips（雨过天青/柿红/米白/侘寂黑/蜜柑黄/鼠尾草绿/陶土原色），选中鼠尾草绿
4. 烧成温度：Slider（800-1320℃，步长10），陶土橙滑块
5. 底部操作：取消 + 发布作品（陶土橙）

温度 Slider 是本弹框的特色交互，800-1320℃ 覆盖素烧到高温釉烧全范围，步长10℃精确调节。器型 Radio 提供4种主流器型选择，釉色chips提供7种热门釉色。

6.3 编辑作品弹框（CYEditWorkModal）

定位：已有作品的修改入口，釉色chips+状态chips设计。

核心设计——回显：aboutToAppear 生命周期回显作品名，🏺 图标回显。

核心功能：

1. 作品名称：TextInput 回显可修改
2. 釉色：7 个 chips，选中深陶土橙
3. 当前状态：4 个 chips（制作中/素坯/已烧成/已售），选中深褐
4. 底部操作：放弃修改（亚麻米）+ 保存修改（鼠尾草绿）

状态chips的4个选项完整覆盖作品生命周期，深褐选中色增加稳重感。保存按钮使用鼠尾草绿（确认色），与新增作品的陶土橙（行动色）区分。

6.4 删除作品弹框（内联·红色警示）

定位：下架作品的二次确认，红色警示式设计。

核心设计——红色警示：⚠️ 图标 46vp + 确认下架标题 + 不可恢复说明（危险红）。

作品名回显卡（浅红背景+红边框）：🏺 + 作品名。

底部操作：再想想（亚麻米）+ 确认下架（危险红白字）。红色警示式设计与下架操作的"风险"属性匹配，不可恢复说明增加透明度。

6.5 预约窑炉弹框（CYKilnBookModal）

定位：窑炉预约入口，窑炉chips+曲线chips+时段chips设计。

核心功能——三组chips：

1. 选择窑炉：5 个 chips（K-01电窑/K-03气窑/K-05柴窑/K-06乐烧窑/K-09试验窑），选中危险红
2. 温度曲线：5 个 chips（氧化焰/还原焰/快烧/柴烧/乐烧），选中鎏金
3. 烧制时段：4 个 chips（周六09:00/周日08:00/周一09:00/周五19:00），选中深褐
4. 底部操作：暂不预约 + 确认窑位（危险红）

三组chips使用三种不同色系（窑炉红/曲线金/时段褐），快速区分三个选择维度。窑炉chips只显示可用窑炉，减少用户选择负担。危险红确认按钮与窑炉预约的"高温风险"属性匹配。

6.6 报名展览弹框（CYExhibitModal）

定位：月度展览报名入口，展位选择+作品数stepper设计。

核心功能：

1. 展览信息回显：「侘寂之器 · 不完美之美」+ 展期
2. 选择展位：4 个展位卡（A区主展台¥380余3/B区联排长桌¥220余8/C区灯光展柜¥300余5/D区户外摊位¥150余12），选中陶土橙边框+✓标记
3. 参展作品数：−/+ stepper（1-10件），展位费动态计算
4. 底部操作：取消报名 + 提交报名（深陶土橙）

展位选择卡是本弹框的特色设计，4 个展位按位置和价格分级，余位数显示增加紧迫感。展位费按件数动态计算（不同展位单价不同），增加透明度。

---

第七章 属性动画与交互体验

7.1 ArkTS 属性动画机制

ArkTS 通过 animateTo() 实现属性动画，基本用法：

this.getUIContext().animateTo({
  duration: 4200, iterations: -1,
  playMode: PlayMode.Normal, curve: Curve.Linear
}, () => { this.wheelAngle = 360 })

iterations: -1 表示无限循环。playMode 有两种关键模式：

• PlayMode.Normal：到达目标值后立即跳回初始值重新开始，配合 Curve.Linear 可实现无缝循环（如陶轮 360° 旋转）
• PlayMode.Alternate：到达目标值后反向执行回初始值，形成往返效果（如窑火呼吸、流光横扫、灰尘粒子漂浮）

7.2 约四组属性动画详解

动画	组件	属性	时长	模式	效果
陶轮旋转	工坊	wheelAngle(rotate)	4200ms	Normal+Linear	陶轮 0→360° 无缝旋转
窑火呼吸	工坊	kilnGlow(opacity)	1800ms	Alternate	温度灯 0.3↔0.9 脉动
灰尘粒子漂浮	首页	dustT(驱动3纯函数)	5200ms	Alternate	4粒子位置+透明度变化
流光横扫	首页	flowX(translate)	6000ms	Alternate	高光条 0↔300 横向滑动

陶轮 360° 旋转动画：工坊 Tab 的陶轮，rotate 从 0° 到 360°，4200ms 中等时长，Normal 循环+Linear 曲线。Normal 模式到达 360° 后立即跳回 0°，由于 0° 和 360° 视觉相同，配合 Linear 匀速曲线实现完全无缝的旋转效果，如同拉坯时陶轮匀速转动。这是全应用唯一使用 Normal 模式的动画。

窑火呼吸动画：工坊 Tab 窑炉卡的温度指示灯，opacity 通过 0.3+0.6*|sin(kilnGlow/100*π)| 计算，1800ms 较快时长，Alternate 模式。kilnGlow 从 0 到 100 往返，通过正弦函数计算透明度，形成自然的呼吸脉动效果，如同窑火闪烁。

灰尘粒子漂浮动画：首页主题展览横幅的 4 个灰尘粒子，通过 cyDustY/cyDustX/cyDustO 三纯函数计算粒子的垂直位置、水平位置和透明度，dustT 从 0 到 50 往返，5200ms 较长时长，Alternate 模式+Linear 曲线。每个粒子使用不同的 seed（1-4），产生不同的漂浮轨迹和呼吸节奏，模拟工坊空气中漂浮的陶土灰尘。三纯函数驱动是本动画的技术亮点。

流光横扫动画：首页主题展览横幅的高光条（46vp×150vp，白→透明→白 90° 渐变），translate X 从 0 到 300，6000ms 较长时长，Alternate 模式+EaseInOut 曲线。高光条在横幅上横向滑动，如同光线扫过陶器表面，增加陶器的光泽感和高级感。

7.3 无定时器循环动画的优势

传统循环动画使用 setInterval 逐帧更新，需手动管理定时器、频繁状态更新可能导致性能问题、组件销毁时需手动清除定时器否则内存泄漏。ArkTS 属性动画通过 iterations:-1 实现零定时器循环动画：框架底层自动调度动画帧、组件销毁时动画自动停止、多个动画可同时运行互不干扰。CLAY LAB 约 4 组动画全部采用此方式，灰尘粒子漂浮通过纯函数计算位置，进一步减少状态更新开销。

7.4 交互反馈设计

项目通过多种方式提供即时交互反馈：

• 按钮点击：立即触发状态变更，响应式机制自动更新 UI
• 选中态：明确视觉变化（颜色/背景/边框/●标记/✓标记）
• Tab 切换：图标透明度（1.0/0.45）+ 文字颜色（陶土橙/褐灰）+ 底部指示条三重反馈
• stepper：−/+ 点击后数字立即变化，边界值自动限制
• Radio：点击后立即切换选中态，group 保证单选
• Slider：拖动时温度值实时更新，步长10℃自动取整
• 剩余名额预警：≤3 个名额时红色加粗显示
• 展位费动态计算：展位切换+作品数变化后展位费立即更新
• 已售作品删除线：已售状态作品名显示删除线

这些即时反馈确保用户操作的"确定性"，提升交互流畅度和愉悦感。温度 Slider 的实时更新是本应用的特色交互，拖动滑块时温度值同步变化，增加操作的直观感。

---

第八章 首页与课程系统

8.1 首页作品数据模型

每件首页作品（CYWork）包含：ID、作品名（name）、作者（author）、器型（shape：瓶/碗/杯/盘/壶）、价格（price，元）、点赞数（likes）、emoji（图标）、主色 c1（hex）、副色 c2（hex）。

12 件作品覆盖多种器型：雨过天青胆瓶¥468/328赞/瓶、粗陶抹茶碗¥168/256赞/碗、月白茶盏对杯¥298/412赞/杯、铁锈花大盘¥388/195赞/盘、冰裂纹花器¥528/507赞/瓶、手捏咖啡杯¥128/341赞/杯、志野风小钵¥218/276赞/碗、柴烧侧把壶¥688/623赞/壶、釉下彩小碟¥98/187赞/盘、绞胎笔洗¥348/229赞/碗、急须侧把壶¥598/455赞/壶、素坯香插¥68/143赞/盘。

8.2 主题展览横幅

首页主题展览横幅是应用的视觉核心，包含：

• 160° 三色渐变 #A85F38→#C67B4E→#E0A87E，陶土暖色如同窑火
• 本月主题展览标签（深褐半透明背景）
• 「侘寂之器 · 不完美之美」标题白色 19vp
• 38 件会员作品 · 展期 8/01 - 8/31
• 报名参展按钮（亚麻米背景深陶土橙文字）
• 🏺 陶器 emoji 52vp
• 4 个灰尘粒子漂浮（cyDustY/cyDustX/cyDustO 纯函数驱动，5200ms Alternate）
• 流光高光条横扫（flowX，6000ms Alternate）
• 陶器弧形下缘（bottomLeft/bottomRight 60vp）

三组特效动画（灰尘粒子漂浮+流光横扫+陶器弧形下缘）共同营造陶艺工坊的真实场景感，陶土三色渐变如同窑火中的陶土，灰尘粒子模拟工坊空气中的陶土灰尘，流光横扫模拟光线扫过陶器表面。主题展览横幅是用户进入应用的第一视觉印象，三组特效确保"第一眼就被吸引"。

8.3 手作之星横滚

手作之星圆头像横滚展示 8 位本周之星：

• 每位：52vp 圆头像（浅鼠尾草绿背景）+ emoji + 名称（深褐加粗）+ 头衔（褐灰）+ 作品数（褐灰）+ 徽章（大师深褐/匠人陶土橙/学徒鼠尾草绿）
• 横滚 Scroll + Row，支持左右滑动
• 8 位覆盖：南山窑主（大师/柴烧十年/128件）、青禾手作（匠人/青釉研究者/96件）、陶言器物（匠人/日常食器/87件）、拾泥社（匠人/手捏派/76件）、老泥匠人（大师/拉坯老师傅/152件）、釉小彩（学徒/釉料调色师/64件）、窑火不熄（学徒/乐烧玩家/58件）、素坯姑娘（学徒/素坯雕刻/49件）

徽章三色区分（大师深褐/匠人陶土橙/学徒鼠尾草绿），增加等级感和成长激励。手作之星横滚增加"社区活跃"的真实感，圆头像+浅鼠尾草绿背景统一视觉风格。

8.4 双列作品瀑布

双列作品瀑布是首页的核心展示，12 件作品按热度排序（cyHotWorks 纯函数降序排列）：

• 每卡 48.5% 宽，Flex({wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween}) 自动换行
• 双色渐变色块：c1+c2 135° 渐变，110vp 高，模拟釉色效果
• 作品名（深褐加粗13vp）+ 作者·器型（褐灰10vp）+ ❤️点赞数（危险红10vp）+ ¥价格（深陶土橙13vp加粗）
• 不对称圆角（topLeft 18/topRight 8/bottomLeft 8/bottomRight 18）

cyHotWorks 纯函数使用 sort((a,b) => b.likes - a.likes) 按点赞数降序排列，确保热门作品优先展示。双色渐变色块模拟釉色效果，无需真实作品图片即可展示丰富的视觉效果。不对称圆角增加手作温度感。

8.5 课程数据模型

每节课程（CYCourse）包含：ID、课程名（name）、类型（type：体验/进阶/大师）、时长（duration）、价格（price，元）、剩余名额（seats）、等级（level：零基础/有基础/进阶者/亲子）、已报名人数（enrolled）、emoji（图标）。

12 节课程覆盖多种类型：拉坯初体验¥199/体验/90分钟/零基础/142人、手捏陶趣¥168/体验/120分钟/零基础/118人、修坯精修课¥328/进阶/150分钟/有基础/86人、釉下彩绘¥388/进阶/180分钟/有基础/74人、柴烧大师班¥2680/大师/2天/进阶者/38人、乐烧之夜¥299/体验/150分钟/零基础/96人、绞胎纹样¥428/进阶/180分钟/有基础/52人、茶器套组¥3280/大师/3天/进阶者/26人、亲子陶艺¥258/体验/90分钟/亲子/128人、雕塑入门¥368/进阶/200分钟/有基础/64人、化妆土装饰¥348/进阶/150分钟/有基础/47人、坑烧体验¥358/体验/半天/零基础/81人。

8.6 报名热度柱状图

本月课程报名热度柱状图展示 6 门热门课程的报名分布：

• 拉坯初体验142/手捏陶趣118/亲子陶艺128/乐烧之夜96/柴烧大师班38/茶器套组26
• 柱子高度 count/cyMaxEnroll()*90 动态计算，cyMaxEnroll() 返回142
• 每柱陶土橙→亚麻米 180° 渐变
• 峰值拉坯初体验142人

柱状图直观展示课程热度分布，拉坯初体验以142人居首成为最热门课程，亲子陶艺128人紧随其后。大师班（柴烧/茶器）报名人数较少但客单价高。用户可根据热度选择课程，也可选择小众课程获得更多指导。

8.7 课程大卡列表

课程大卡列表展示 12 节课程，每卡包含：

• 左侧：54vp 圆图标（亚麻米背景）+ emoji
• 中间：课程名（深褐加粗14vp）+ 类型标签（体验陶土橙/进阶深陶土橙/大师深褐）+ 等级标签（鼠尾草绿描边）+ ⏱时长 + 已报名人数 + 剩余名额（≤3红色加粗）
• 右侧：¥价格（深陶土橙17vp加粗）+ 预约按钮（陶土橙白字）

cyCoursesByType(type) 纯函数按类型筛选课程，标题栏显示"体验 X 节 · 进阶 Y 节"统计。剩余名额预警（≤3红色加粗）增加紧迫感，类型标签三色区分帮助用户快速识别难度。预约按钮直接触发预约课程弹框，减少操作步骤。

---

第九章 材料与工坊系统

9.1 材料分类数据模型

每类材料（CYMatCategory）包含：分类名（name）、图标（icon，emoji）、分类色（color，hex）、背景色（bg，hex）、种类数（count）。

6 类材料：陶土🟤（18种/#A85F38/#EFE3D0）、釉料🎨（32种/#9CAF88/#D8E2CE）、工具🔧（26种/#C67B4E/#F3E5D8）、颜料🖌️（15种/#C9A227/#F5EBD0）、模具🧱（12种/#6E5D4F/#E8E0D6）、围裙🥋（8种/#B5432E/#F2DCD6）。

9.2 三列分类色卡

三列分类色卡展示 6 类材料：

• 每卡 31% 宽，Flex Wrap 自动换行
• 分类色背景 + 分类色 1vp 边框
• 图标 24vp + 分类名（分类色12vp加粗）+ 种类数（褐灰9vp）
• 不对称圆角（topLeft 16/topRight 6/bottomLeft 6/bottomRight 16）

分类色卡是材料 Tab 的入口设计，6 类材料以分类色背景展示，点击可进入对应分类（演示项目中未实现实际筛选，架构已预留）。种类数显示增加信息密度，不对称圆角增加手作温度感。

9.3 釉料色卡横滚

釉料色卡横滚展示 10 色釉料：

• 每卡：64vp 纯色色块（c1+c2 160° 渐变）+ 色名（深褐加粗11vp）+ 烧成温度（褐灰9vp）
• 不对称圆角（topLeft 32/topRight 10/bottomLeft 10/bottomRight 32）
• 横滚 Scroll + Row，支持左右滑动
• 10 色覆盖：雨过天青1280℃/柿红1240℃/米白化妆土1180℃/侘寂黑1260℃/蜜柑黄1220℃/陶土原色1200℃/鼠尾草绿1250℃/亚麻灰1230℃/铁锈花1270℃/月白1290℃

釉料色卡横滚是材料 Tab 的核心视觉，10 色釉料以渐变色块展示，烧成温度标注增加专业感。不对称圆角（左上角大圆角）模拟釉料流淌的自然形态。釉料是陶艺的核心材料，32 种釉料（常量中展示10色）提供丰富的色彩选择。

9.4 材料列表

材料列表展示 14 件精选材料，每件包含：

• 左侧：42vp 圆图标（亚麻米背景）+ emoji
• 中间：材料名（深褐加粗13vp）+ 分类标签（鼠尾草绿背景）+ 规格（褐灰10vp）
• 右侧：¥价格（深陶土橙14vp加粗）+ 库存状态（现货充足鼠尾草绿/仅剩X份鎏金/补货中危险红，描边标签）+ 加入按钮（鼠尾草绿白字）

库存状态三色区分（现货充足鼠尾草绿/仅剩X份鎏金/补货中危险红），增加库存紧迫感和购买引导。分类标签（鼠尾草绿背景）快速识别材料类别。加入按钮使用鼠尾草绿（确认色），与购物场景匹配。

9.5 拉坯七步时间轴

拉坯七步时间轴是工坊 Tab 的核心流程展示：

• 7 步横向排列：揉泥🤲（排出气泡）/定中心🎯（稳如泰山）/开孔🕳️（拇指下行）/成型🫖（提拉塑形）/修坯🔪（削出曲线）/上釉🎨（浸淋喷绘）/烧制🔥（窑火淬炼）
• 每步：46vp 圆图标（陶土橙/鼠尾草绿交替）+ 步骤名（深褐加粗11vp）+ 小贴士（褐灰9vp）
• 横向 Scroll + Row，步骤间用"—"陶土橙连接
• 步骤图标交替配色（奇数陶土橙/偶数鼠尾草绿），增加视觉节奏

拉坯七步时间轴完整展示从泥到器的制作流程，每步的小贴士增加教学价值。横向滚动适配7步的宽度需求，步骤间的连接线增加流程的连续感。交替配色增加视觉节奏，避免单调。

9.6 柴烧温度阶梯曲线

柴烧温度阶梯曲线展示柴烧过程的8个温度节点：

• 8 点：入窑12℃/脱水30℃/氧化58℃/升温82℃/高温100℃/保温88℃/降温52℃/出窑20℃（百分比值，对应实际温度约120-1300℃）
• 柱子高度 value*0.9 动态计算，底部对齐
• 每柱危险红→鎏金→鼠尾草绿 180° 三色渐变，模拟温度从高到低
• 峰值 1300℃ 危险红标注
• 底部标签：入窑/脱水/氧化/升温/高温/保温/降温/出窑

温度阶梯曲线是工坊 Tab 的数据可视化核心，8 个节点完整展示柴烧温度曲线（升温→保温→降温），三色渐变柱模拟温度从高到低的颜色变化（红热→金暖→绿冷）。峰值1300℃是柴烧的典型最高温度，危险红标注突出高温阶段。

9.7 窑炉预约列表

窑炉预约列表展示 12 台窑炉，每台包含：

• 左侧：44vp 圆图标（可用浅鼠尾草绿🔥/不可用灰🔒）+ 窑炉温度呼吸灯（可用金色脉动/不可用浅褐静态）
• 中间：窑炉编号（深褐加粗13vp）+ 温度曲线标签（陶土橙背景）+ 容量 + 🕐时段
• 右侧：状态标签（可约鼠尾草绿/占用褐灰，描边）+ 预约/不可约按钮
• cyAvailableKilns() 纯函数筛选可用窑炉，标题栏显示"可约 7/12"

12 台窑炉覆盖多种类型：K-01电窑（氧化焰/0.12m³）、K-02电窑（还原焰）、K-03气窑（快烧/0.3m³）、K-04气窑（还原焰）、K-05柴窑（柴烧72h/0.8m³）、K-06乐烧窑（乐烧30min/0.05m³）、K-07素烧窑（素烧800℃/0.2m³）、K-08素烧窑、K-09试验窑（自定义曲线/0.02m³）、K-10试验窑、K-11电窑、K-12气窑。

窑炉温度呼吸灯（kilnGlow，1800ms Alternate）是工坊 Tab 的特色动画，可用窑炉金色脉动如同窑火闪烁，不可约窑炉浅褐静态。窑炉类型多样（电窑/气窑/柴窑/乐烧窑/素烧窑/试验窑），满足不同烧制需求。

---

第十章 社区与我的系统

10.1 社区帖子数据模型

每条社区帖子（CYPost）包含：ID、帖子名（name）、作者（author）、器型（shape）、釉色（glaze）、点赞数（likes）、评论数（comments）、emoji（图标）、主色 c1（hex）、副色 c2（hex）、是否高卡（tall：true/false，控制瀑布流高度）。

12 条帖子覆盖多种主题：第一只拉坯碗诞生记（@泥巴新手小柯/碗/柿红/328赞/46评论/高卡）、柴烧开箱·火痕之美（@窑火不熄/壶/无釉柴烧/651赞/88评论/矮卡）、青釉终于不裂了（@釉小彩/杯/雨过天青/429赞/62评论/高卡）、手捏猫咪香插（@素坯姑娘/盘/米白/512赞/75评论/矮卡）、修坯翻车实录（@粗陶青年/瓶/陶土原色/233赞/51评论/高卡）、绞胎大理石纹（@老泥匠人/碗/透明釉/486赞/39评论/矮卡）、给妈妈的茶杯套组（@拾泥社/杯/蜜柑黄/702赞/96评论/高卡）、坑烧的烟火气（@南山窑主/瓶/坑烧熏黑/377赞/44评论/矮卡）、乐烧之夜开窑瞬间（@窑火不熄/碗/乐烧虹彩/588赞/71评论/高卡）、青花小碟练习（@釉小彩/盘/青花/264赞/33评论/矮卡）、急须壶的一百次尝试（@陶言器物/壶/侘寂黑/445赞/58评论/高卡）、素坯也很有味道（@泥巴新手小柯/碗/素坯无釉/198赞/27评论/矮卡）。

10.2 热门话题横排

热门话题横排展示 8 个社区话题：

• #拉坯打卡100天（1286帖，热）/#我的第一只碗（964帖，热）/#釉料配方交换（735帖）/#柴烧开箱（622帖，热）/#修坯翻车现场（488帖）/#手捏萌物（431帖）/#窑炉拼窑（302帖）/#工作室日常（275帖）
• 热门话题红色"热"标签（危险红背景白字）
• 横滚 Scroll + Row，支持左右滑动
• 每话题：热标签（如有）+ 话题名（深褐11vp）+ 帖数（褐灰8vp）

热门话题横排增加社区活跃度和话题引导，红色"热"标签突出热门话题。#拉坯打卡100天以1286帖居首成为最热门话题，#我的第一只碗964帖紧随其后。用户可通过话题快速找到感兴趣的内容。

10.3 器型分布条

器型分布条展示社区作品的器型分布：

• 5 型：杯86（陶土橙）/碗72（鼠尾草绿）/瓶45（鎏金）/盘38（深陶土橙）/壶24（深褐）
• 横向比例条：每型宽度 count/265*100%，对应器型色
• clip 圆角裁剪，整体圆角
• 底部图例：每型色点+器型名+数量

器型分布条是社区 Tab 的数据可视化，杯以86件居首成为最常见器型，碗72件紧随其后。横向比例条直观展示各器型占比，底部图例增加可读性。器型分布数据帮助用户了解社区创作趋势。

10.4 双列瀑布流

双列瀑布流是社区 Tab 的核心展示，12 条帖子左右两列交替高度：

• 左列：帖子1（高）、3（高）、5（高）、7（高）、9（高）、11（高）
• 右列：帖子2（矮）、4（矮）、6（矮）、8（矮）、10（矮）、12（矮）
• 每卡：双色渐变色块（tall 130vp/short 96vp 交替高度）+ 帖子名（深褐加粗12vp，2行省略）+ @作者·器型·釉色（褐灰9vp，1行省略）+ ❤️点赞数（危险红10vp）+ 💬评论数（褐灰10vp）
• 不对称圆角（topLeft 14/topRight 6/bottomLeft 6/bottomRight 14）

交替高度（tall/short）是社区瀑布流的核心设计，模拟真实瀑布流布局，增加视觉多样性和浏览趣味。双色渐变色块模拟作品釉色效果，无需真实作品图片。@作者·器型·釉色增加作品信息密度，点赞和评论数增加社交互动感。

10.5 我的作品数据模型

每件我的作品（CYMyWork）包含：ID、作品名（name）、器型（shape）、釉色（glaze）、状态（status：制作中/素坯/已烧成/已售）、状态色（statusColor，hex）、emoji（图标）。

12 件作品覆盖完整生命周期：抹茶绿茶碗·壹（碗/鼠尾草绿/已烧成绿）、抹茶绿茶碗·贰（碗/鼠尾草绿/已售红，删除线）、手捏马克杯（杯/陶土原色/素坯褐灰）、细颈小花瓶（瓶/雨过天青/制作中陶土橙）、葵口盘（盘/蜜柑黄/已烧成绿）、小兔摆件（雕塑/米白/素坯褐灰）、侧把急须（壶/侘寂黑/制作中陶土橙）、茶叶罐（罐/柿红/已烧成绿）、对杯·月白（杯/月白/已售红，删除线）、笔洗（碗/铁锈花/素坯褐灰）、香炉（炉/亚麻灰/制作中陶土橙）、小碟四件套（盘/青花/已烧成绿）。

10.6 手作等级进度环

手作等级进度环是我的 Tab 的核心设计：

• 96vp Progress Ring 进度环（strokeWidth 9，陶土橙，value 76/total 100）
• 环内：匠人等级（深陶土橙15vp加粗）+ 760/1000 手作值（褐灰9vp）+ 手作值（褐灰8vp）
• 右侧：👐捏泥人阿土（深褐17vp加粗）+ CLAY LAB 驻场学员·加入 186 天（褐灰10vp）
• 等级路径：学徒—匠人—大师，还差 240 手作值（危险红8vp）
• 陶器弧形下缘（bottomLeft/bottomRight 50vp）

Progress Ring 组件展示手作等级进度，76% 完成度直观展示。等级路径（学徒→匠人→大师）增加成长感和目标感，还差240手作值提示明确升级目标。陶器弧形下缘增加手作陶器形态感。手作值可通过发布作品、参与课程、社区互动等方式获得（演示项目中为硬编码数据）。

10.7 数据统计条

数据统计条展示 3 项核心数据：

• 🏺12 作品数（陶土橙18vp加粗）
• ❤️4993 总点赞（危险红18vp加粗，cyTotalMyLikes() 纯函数计算）
• 🔥83% 烧成成功率（鼠尾草绿18vp加粗）
• 竖线分隔，亚麻米背景

cyTotalMyLikes() 纯函数遍历 CY_POSTS 累加点赞数，返回总点赞4993。烧成成功率83%是陶艺爱好者的典型水平（专业窑口可达90%+）。三项数据从不同维度展示用户活跃度和创作水平。

10.8 我的作品列表

我的作品列表展示 12 件作品，每件包含：

• 左侧：46vp 圆图标（亚麻米背景）+ emoji
• 中间：作品名（深褐加粗13vp，已售显示删除线）+ 器型标签（鼠尾草绿背景）+ 釉色（褐灰9vp）
• 右侧：状态标签（制作中陶土橙/素坯褐灰/已烧成鼠尾草绿/已售危险红，描边）+ 编辑按钮（亚麻米背景深陶土橙字）+ 下架按钮（危险红描边）
• 编辑触发 onEdit 回调，下架触发 onDelete 回调

状态标签四色区分（制作中陶土橙/素坯褐灰/已烧成鼠尾草绿/已售危险红），完整记录作品生命周期。已售作品删除线显示增加真实感。编辑和下架双操作满足用户管理需求。下架按钮触发红色警示删除弹框，增加操作谨慎性。

---

第十一章 性能优化与扩展方向

11.1 性能优化策略

1. 合理使用 @State：只有需触发 UI 更新的状态用 @State，静态数据用 const，减少响应式开销。项目中约 25 个 @State 变量，均为必要的交互状态和动画属性。
2. 列表渲染优化：使用 ForEach 框架自动 diff 复用，列表项固定尺寸避免布局抖动。12 首页作品/12 课程/14 材料/12 窑炉/12 社区帖子/12 我的作品等列表均使用 ForEach。
3. 动画性能：使用属性动画而非逐帧动画，动画属性限制在 opacity/rotate/translate 等合成层属性避免重排，无限循环用 iterations:-1 零定时器。约 4 组动画全部采用此方式。陶轮旋转使用 Normal+Linear 实现无缝循环，其他使用 Alternate 实现往返呼吸/漂浮/流光。
4. 减少重渲染：弹框条件渲染未显示不渲染，避免 build() 中复杂计算。6 个弹框均通过 if 条件渲染。
5. 资源优化：使用 emoji 作图标无需图片，渐变背景用 linearGradient 无需图片，双色渐变色块模拟作品釉色效果无需真实作品图片，减少网络请求和内存占用。
6. 纯函数封装：9 个纯函数处理数据转换和业务逻辑，无副作用易测试，相同输入永远产生相同输出，可被编译器优化。灰尘粒子三纯函数（cyDustY/cyDustX/cyDustO）通过数学公式计算粒子位置，避免复杂的粒子系统开销。

11.2 代码规范

命名规范：组件名大驼峰（CYHomeContent）、变量函数小驼峰（activeTab）、常量大写下划线（CY_COLORS）、接口大驼峰（CYWork）、统一 CY 前缀。文件结构：接口→全局常量→纯函数→弹框组件→Tab 组件→根入口。代码风格：2 空格缩进、语句末尾不加分号、对象字面量每行一属性。

11.3 可维护性与可扩展性

组件化拆分约 14 个独立组件职责单一。数据与视图分离（数据在 const 常量，UI 只读渲染）。逻辑与视图分离（业务逻辑封装在 9 个纯函数中）。配置化设计（Tab/分类/釉色/窑炉/步骤/话题/器型/状态均通过配置数据驱动）。新增作品/课程/材料/窑炉/帖子只需在对应常量数组中添加数据，无需修改 UI 代码。

11.4 功能扩展方向

首页深化：实时展览导览、作品360°展示、展览预约、艺术家介绍、展览评论、VR 看展。
课程深化：课程详情页、课程评价、课程回放视频、课程材料包、课程证书、课程日历、课程提醒。
材料深化：材料商品详情页、用户评价、材料对比、购物车、订单管理、材料配方、材料试用装、材料订阅。
工坊深化：窑炉实时状态监控、烧制过程直播、作品烧制追踪、窑炉拼窑匹配、烧制结果记录、故障排查。
社区深化：帖子发布（图片/视频上传）、评论回复、关注/粉丝、话题标签、热门推荐、内容审核、作品集、私信。
我的深化：手作等级详细规则、作品生命周期管理、消费历史、课程历史、收藏夹、优惠券、消息通知、个人资料编辑、陶艺成就徽章。

11.5 技术演进方向

短期（1-3 月）：对接后端 API 替换硬编码、引入状态管理库、增加本地存储、完善错误处理、真机性能测试、支付 SDK 集成。
中期（3-6 月）：引入路由管理、推送通知课程提醒、接入支付 SDK 实现在线支付和材料购买、性能优化懒加载、适配平板折叠屏、多语言国际化、图片上传 CDN。
长期（6-12 月）：AI 釉色推荐（基于器型和风格）、AR 试摆（在真实环境中预览陶器摆放效果）、智能窑炉控制（IoT 连接窑炉实时控温）、社区内容生态、直播功能、跨设备协同（手机记录/平板看教程/智慧屏看展）、云存档同步。

11.6 鸿蒙生态融合

原子化服务：将预约课程/查看窑炉/浏览作品封装为原子化服务，无需安装即用。万能卡片：提供今日课程/窑炉状态/手作等级/社区热门卡片，桌面实时查看。多设备协同：手机预约课程/平板看教程/手表到店提醒/智慧屏看展览直播。小艺语音：语音查询课程/预约窑炉/提醒到店。健康数据：与华为运动健康 App 数据互通，陶艺创作的手部活动数据自动同步。

---

第十二章 陶艺文化与安全提示

12.1 陶艺文化

陶艺是人类最古老的手工艺之一，起源可追溯到旧石器时代晚期（约 20000 年前），先民发现火可以使泥土变硬，从而发明了陶器。中国是陶艺的重要发源地，仰韶文化彩陶（约 7000 年前）、龙山文化黑陶（约 4500 年前）、唐三彩（唐代）、宋代五大名窑（汝/官/哥/钧/定）、元青花、明清粉彩，构成了完整的中国陶艺发展史。

日本陶艺受中国影响深远，发展出独特的侘寂（Wabi-Sabi）美学，强调不完美、无常、不完整之美。乐烧（Raku）是日本独特的烧制技法，16 世纪由千利休和长次郎创立，特点是低温烧制后快速冷却，产生独特的窑变和裂纹效果。柴烧（Wood-firing）是最古老的烧制方式，使用木柴作为燃料，灰烬自然落在器物表面形成天然釉面，每件作品都是独一无二的。

CLAY LAB 手作陶艺坊正是这一文化的产物：12 节课程覆盖拉坯/手捏/修坯/釉下彩/柴烧/乐烧/绞胎/茶器/亲子/雕塑/化妆土/坑烧，从体验到进阶到大师班完整覆盖。10 色釉料覆盖雨过天青/柿红/米白/侘寂黑/蜜柑黄/陶土原色/鼠尾草绿/亚麻灰/铁锈花/月白，从传统到现代丰富选择。12 台窑炉覆盖电窑/气窑/柴窑/乐烧窑/素烧窑/试验窑，满足不同烧制需求。

12.2 陶艺类型与特点

拉坯（Wheel Throwing）：在旋转的陶轮上用双手将泥团拉成各种器型，是最经典的陶艺成型技法。优点是器型规整、壁薄均匀、适合制作碗/杯/瓶/壶等圆形器型。缺点是需要较长练习时间掌握定中心和提拉技巧。CLAY LAB 拉坯初体验¥199/90分钟，是最热门课程（142人报名）。拉坯七步曲（揉泥→定中心→开孔→成型→修坯→上釉→烧制）完整展示拉坯流程。

手捏（Hand-building）：不使用陶轮，纯手工捏制成型，包括捏塑/盘筑/泥板成型等技法。优点是自由度高、适合初学者、可制作非圆形器型和雕塑。缺点是器型可能不够规整、壁厚度不均匀。CLAY LAB 手捏陶趣¥168/120分钟，适合零基础和亲子活动。

修坯（Trimming）：在半干的坯体上用修坯刀修整外形和底部，使器型更加精致挺拔。修坯需要掌握坯体干湿程度（皮革硬度最佳）和修坯刀角度。CLAY LAB 修坯精修课¥328/150分钟，适合有基础的学员。

釉下彩（Underglaze Painting）：在素烧后的坯体上用釉料彩绘，再罩透明釉烧制，色彩在釉下永不褪色。中国青花是最著名的釉下彩。CLAY LAB 釉下彩绘¥388/180分钟，学习青花手绘技法。

柴烧（Wood-firing）：使用木柴作为燃料烧制陶器，烧制时间长达 24-72 小时，温度可达 1300℃。木柴灰烬自然落在器物表面，在高温下形成天然釉面（自然釉），每件作品的火痕和落灰都是独一无二的。CLAY LAB 柴烧大师班¥2680/2天，是高阶课程。柴烧温度曲线（入窑→脱水→氧化→升温→高温→保温→降温→出窑）完整展示柴烧过程。

乐烧（Raku）：日本独特的低温烧制技法，坯体在约 1000℃ 时从窑中取出，放入可燃材料（木屑/纸张）中快速还原冷却，产生独特的金属光泽和裂纹效果。CLAY LAB 乐烧之夜¥299/150分钟，是体验课程，适合喜欢惊喜和不确定性的学员。

绞胎（Nerikomi）：将不同颜色的泥料叠合、揉绞、切片，形成类似大理石或木纹的纹理，是唐代传入日本的技法。CLAY LAB 绞胎纹样¥428/180分钟，学习泥料配色和纹理控制。

12.3 陶艺安全提示

• 揉泥安全：揉泥时注意姿势，避免手腕过度用力导致腱鞘炎。建议使用揉泥台，保持肘部自然弯曲。揉泥时间不宜过长，每 15 分钟休息一次。
• 拉坯安全：拉坯时长发需扎起，避免卷入陶轮。宽松衣物需收紧，避免被旋转的陶轮卷入。手指不要靠近陶轮底部和转轴。陶轮旋转时不要用手强行停止，应使用脚控或等待自然停止。
• 修坯安全：修坯刀锋利，使用时注意手指位置，刀刃朝向远离身体的方向。修坯时坯体需固定在修坯转盘上，避免飞出。废弃泥料及时清理，避免滑倒。
• 釉料安全：部分釉料含有重金属（铅/镉/钴等），使用时需戴手套和口罩，避免吸入釉料粉尘。釉料容器需标注成分和安全提示。废弃釉料需按危废处理，不可直接倒入下水道。食用器（碗/杯/盘）必须使用食品级釉料，烧制温度需达到釉料熔融温度。
• 烧制安全：窑炉表面温度极高（可达 300℃+），烧制过程中不可触摸。开窑时需等窑温降至 100℃ 以下，佩戴隔热手套和护目镜。柴烧添柴时需站在窑门侧面，避免火焰喷出。乐烧取坯时需佩戴隔热手套和防护面罩，避免高温烫伤和烟雾吸入。
• 粉尘防护：陶艺过程中会产生大量陶土粉尘（揉泥/修坯/打磨），长期吸入可能导致尘肺病。建议在通风良好的环境中操作，佩戴 N95 口罩，使用湿擦方式清理粉尘（避免干扫产生二次扬尘）。
• 电气安全：电窑功率大（通常 3-10kW），需使用专用电路和插座，不可与其他大功率电器共用。电窑周围不可堆放易燃物品。使用前检查电线和插头是否完好。
• 急救处理：烫伤时立即用流动冷水冲洗 15-20 分钟，不要涂抹牙膏/酱油等偏方，严重烫伤及时就医。刀具割伤时用干净纱布按压止血，伤口较深及时就医缝合。釉料误入眼睛时用大量清水冲洗 15 分钟，及时就医。

12.4 釉料选择与烧制安全

• 釉料品牌：专业陶艺釉料品牌包括日本のぐるみ/韩国陶彩/中国景德镇釉料/美国Amaco/Mid-fire等。CLAY LAB 使用 10 色精选釉料，覆盖雨过天青/柿红/米白/侘寂黑/蜜柑黄/陶土原色/鼠尾草绿/亚麻灰/铁锈花/月白，烧成温度 1180-1290℃。
• 釉料分类：按烧成温度分为低温釉（1000-1150℃，色彩鲜艳但耐久性差）、中温釉（1180-1280℃，最常用，色彩和耐久性平衡）、高温釉（1280-1350℃，耐久性好但色彩较有限）。按效果分为透明釉/乳浊釉/结晶釉/裂纹釉/金属釉/无光釉等。
• 烧制温度：素烧通常 800-900℃，使坯体硬化便于上釉。釉烧温度根据釉料确定，中温釉 1200-1280℃，高温釉 1280-1350℃。烧制曲线包括升温（约 100-150℃/小时）→保温（最高温保温 15-30 分钟）→降温（自然冷却，不可快速降温否则开裂）。
• 窑炉类型：电窑（温度精确控制，适合釉烧和素烧，0.12m³ 可烧约 20 件）、气窑（升温快，适合快烧和还原焰，0.3m³ 可烧约 45 件）、柴窑（木柴燃料，自然釉效果，0.8m³ 可烧约 60 件，烧制 72 小时）、乐烧窑（低温快速，0.05m³ 可烧约 6 件，烧制 30 分钟）、素烧窑（专用素烧，0.2m³ 可烧约 35 件）、试验窑（小容量试验，0.02m³ 可烧约 4 件）。

---

第十三章 手作生活方式与陶艺疗愈

13.1 手作生活方式

手作（Handcraft）正在成为当代都市人的生活方式选择。在快节奏的数字时代，手作提供了一种"慢下来"的可能性——用双手触摸泥土、感受陶轮的旋转、等待窑火的淬炼，这个过程本身就是一种疗愈。陶艺作为最古老的手作之一，具有独特的魅力：泥土的可塑性、陶轮的节奏感、釉料的不可预测性、烧制的惊喜感，每一步都充满了与材料对话的乐趣。

CLAY LAB 手作陶艺坊的设计理念正是"手作生活方式"：侘寂陶土暖风配色营造温暖的工坊氛围，陶轮旋转动画模拟拉坯时的专注感，灰尘粒子漂浮模拟工坊的真实场景，陶器弧形下缘增加手作形态感。6 个 Tab 覆盖从课程学习到材料购买、从工坊制作到社区分享、从个人成长到展览报名的完整手作生活链路。

13.2 陶艺疗愈

陶艺疗愈（Ceramic Therapy）是艺术疗愈的一个分支，通过陶艺创作帮助人们表达情感、缓解压力、提升专注力。研究表明，陶艺创作具有以下疗愈效果：

• 正念冥想效果：拉坯时需要全神贯注于陶轮和双手的配合，这种专注状态类似于正念冥想，可以帮助人们从日常焦虑中抽离。
• 触觉疗愈：触摸柔软的泥土可以激活触觉神经系统，带来安全感和放松感。泥土的温度和质感具有天然的安抚作用。
• 创造成就感：从一团泥到一件完整的器物，这个创造过程带来的成就感可以提升自尊和自信。即使是"不完美"的作品，也具有独特的价值。
• 情绪表达：陶艺可以作为非语言的情绪表达渠道，通过器型、釉色、纹理表达难以用语言描述的情感。
• 耐心培养：陶艺需要耐心——揉泥、定中心、成型、修坯、上釉、烧制，每一步都不能急躁。这种耐心可以迁移到日常生活中。

CLAY LAB 的课程设计考虑了疗愈需求：拉坯初体验（90分钟，专注拉坯的正念感）、手捏陶趣（120分钟，自由创作的表达感）、乐烧之夜（150分钟，不可预测的惊喜感）、亲子陶艺（90分钟，亲子互动的连接感）。手作等级系统（学徒→匠人→大师）提供成长目标，社区分享提供社交支持。

13.3 侘寂美学与不完美之美

侘寂（Wabi-Sabi）是日本美学的核心概念，强调不完美、无常、不完整、自然之美。“侘”（Wabi）指简朴、安静、清贫中的富足感；“寂”（Sabi）指时间流逝中事物的老化、锈蚀、 patina 之美。侘寂美学反对完美主义和消费主义，欣赏事物的自然状态和时间痕迹。

陶艺是侘寂美学的最佳载体：手捏的不规则、柴烧的火痕、乐烧的裂纹、釉料的流淌、使用中的开片和包浆，这些"不完美"恰恰是陶艺最迷人的地方。CLAY LAB 本月主题展览「侘寂之器 · 不完美之美」正是这一美学的体现，38 件会员作品展示了各种"不完美"的美。

CLAY LAB 的设计中融入了侘寂美学：不对称圆角（模拟手作的不规整）、陶器弧形下缘（模拟陶器的自然形态）、陶土暖色配色（模拟泥土和窑火的自然色）、灰尘粒子漂浮（模拟工坊的自然状态）、柴烧温度曲线（模拟窑火的不可控性）。这些设计元素共同营造了"不完美之美"的侘寂氛围。

13.4 陶艺入门建议

• 从体验课开始：建议先参加拉坯初体验或手捏陶趣体验课，感受陶艺的乐趣和自己的兴趣程度，不要一开始就购买大量材料和工具。
• 选择适合的技法：拉坯适合喜欢规律和节奏感的人，手捏适合喜欢自由和创造力的人，雕塑适合喜欢立体造型的人，釉彩适合喜欢色彩和绘画的人。可以多尝试几种技法，找到自己最喜欢的方向。
• 接受不完美：初学者的作品一定会有各种"不完美"——器型不规整、壁厚薄不均、釉色不均匀、烧制开裂。这些都是正常的，接受不完美是陶艺学习的第一步。每一件"不完美"的作品都是学习过程的记录。
• 坚持练习：陶艺需要大量练习才能掌握，拉坯定中心通常需要练习 10-20 小时才能基本掌握。建议每周练习 1-2 次，保持手感。可以在工作室办卡或购买课程包，降低单次成本。
• 找到社区：陶艺不是孤独的活动，找到志同道合的陶友可以互相学习、分享经验、拼窑烧制、参加展览。CLAY LAB 社区提供了这样的平台，可以浏览他人作品、发布自己的作品、参与话题讨论。
• 安全第一：陶艺涉及锋利工具、高温窑炉、化学釉料、粉尘等安全风险，务必遵守安全规范，佩戴防护装备，在专业指导下操作。特别是烧制环节，必须由专业人员操作，不可独自尝试。

---

十四、开发环境搭建

14.1 环境要求

DevEco Studio 5.0+（支持HarmonyOS 6.1.1）、HarmonyOS SDK API 24、Node.js 18+、至少8GB内存。

14.2 安装DevEco Studio

从华为开发者官网下载最新版本，运行安装包，选择安装路径，勾选创建桌面快捷方式，点击安装。

14.3 配置SDK

首次启动后进入File > Settings > HarmonyOS SDK，勾选API 24及以上版本，点击Apply等待下载完成。

14.4 创建项目

选择Create Project > Empty Ability，配置项目名称、包名、保存路径，选择Compile SDK为API 24，点击Finish。

14.5 运行应用

将1316.ets代码替换到entry/src/main/ets/pages/Index.ets，连接HarmonyOS设备或启动模拟器，点击运行按钮预览。

14.6 预览调试

DevEco Studio提供实时预览功能，编辑器右侧打开Previewer面板，支持多设备尺寸预览、深色模式切换、组件树inspect等调试能力。

本章介绍如何在本地搭建 HarmonyOS 开发环境并运行 CLAY LAB 手作陶艺坊项目。从 DevEco Studio 安装到项目创建、SDK 配置、预览调试，完整覆盖从零到运行的全流程。

总结与展望

CLAY LAB 手作陶艺坊是一款融合了侘寂陶土暖风美学、得物 App 电商风格、陶艺工坊真实场景的 HarmonyOS ArkTS 概念应用。通过约 2900 行单文件代码，实现了 6 Tab 完整业务链路、6 套差异化弹框、约 4 组属性动画、9 个纯函数业务逻辑、16 个数据接口、约 20 组全局数据常量，覆盖了从课程预约到材料购买、从工坊制作到社区分享、从个人成长到展览报名的完整手作生活场景。

核心价值：

• 视觉设计：侘寂陶土暖风 15 色调色板，陶土橙×鼠尾草绿×深褐三色对撞，不对称圆角与陶器弧形下缘，营造手作温度感
• 交互体验：6 Tab 导航+6 弹框交互，时段chips/人数stepper/器型Radio/釉色chips/温度Slider/展位选择等丰富交互组件
• 动画特效：陶轮 360° 无缝旋转、窑火呼吸脉动、灰尘粒子漂浮（3 纯函数驱动）、流光横扫，约 4 组属性动画营造工坊真实场景
• 数据可视化：报名热度柱状图、器型分布比例条、柴烧温度阶梯曲线、手作等级进度环，4 类数据可视化增强信息表达
• 工程架构：单文件组件化架构，@Builder 封装复用，三级状态管理，9 纯函数业务逻辑，配置化数据驱动，易于维护和扩展

技术亮点：

• 零定时器循环动画（iterations:-1），框架自动调度，组件销毁自动停止
• 灰尘粒子三纯函数（cyDustY/cyDustX/cyDustO）通过数学公式模拟自然漂浮
• 陶轮 Normal+Linear 无缝旋转，0° 与 360° 视觉相同实现无缝循环
• Progress Ring 手作等级进度环，76% 完成度直观展示成长路径
• 拉坯七步横向时间轴，完整展示从泥到器的制作流程
• 柴烧温度 8 点阶梯曲线，红→金→绿三色渐变模拟温度变化

未来展望：
CLAY LAB 手作陶艺坊作为概念应用，已具备完整的 UI 框架和交互体系。未来可从以下方向深化：对接后端 API 实现真实数据、引入支付 SDK 实现在线课程预约和材料购买、增加图片/视频上传实现真实社区内容、接入 IoT 窑炉实现实时控温和烧制追踪、AI 釉色推荐和 AR 试摆、鸿蒙原子化服务和万能卡片适配、多设备协同（手机/平板/手表/智慧屏）。

陶艺是一门古老而年轻的手工艺，在数字时代焕发新的生命力。CLAY LAB 手作陶艺坊希望通过技术与美学的结合，让更多人感受到手作的温度、泥土的质感、窑火的惊喜，以及"不完美之美"的侘寂哲学。泥为器，手作心——每一件手作陶器，都是双手与泥土的对话，都是时间与窑火的馈赠。

---

附录：完整 ArkTS 源码

以下是 CLAY LAB 手作陶艺坊的完整 ArkTS 源码，约 2900 行，单文件结构。将代码复制到 HarmonyOS 项目的 entry/src/main/ets/pages/Index.ets 文件中即可运行。

// ============================================================
// CLAY LAB 手作陶艺坊（精简版）
// 只保留核心结构、首页、课程页、预约弹窗，其余Tab占位
// ============================================================

// ---------- 配色 ----------
interface CYColorPalette {
  clay: string
  clayDeep: string
  linen: string
  sage: string
  brown: string
  card: string
  danger: string
  textMain: string
  textSub: string
  textHint: string
  white: string
}

const CY_COLORS: CYColorPalette = {
  clay: '#C67B4E',
  clayDeep: '#A85F38',
  linen: '#EFE3D0',
  sage: '#9CAF88',
  brown: '#4A3C32',
  card: '#FAF6EF',
  danger: '#B5432E',
  textMain: '#3B2F27',
  textSub: '#8C7B6B',
  textHint: '#BFAE9D',
  white: '#FFFFFF'
}

// ---------- 底部 Tab ----------
enum CYTab {
  Home = 0,
  Course = 1,
  Material = 2,
  Studio = 3,
  Community = 4,
  Mine = 5
}

interface CYTabItem {
  icon: string
  label: string
  tab: CYTab
}

const CY_TABS: CYTabItem[] = [
  { icon: '🏺', label: '首页', tab: CYTab.Home },
  { icon: '🎨', label: '课程', tab: CYTab.Course },
  { icon: '🧱', label: '材料', tab: CYTab.Material },
  { icon: '🔥', label: '工坊', tab: CYTab.Studio },
  { icon: '📷', label: '社区', tab: CYTab.Community },
  { icon: '👐', label: '我的', tab: CYTab.Mine }
]

// ---------- 精简数据：作品 ----------
interface CYWork {
  id: number
  name: string
  author: string
  price: number
  likes: number
  emoji: string
  color1: string
  color2: string
}

const CY_HOME_WORKS: CYWork[] = [
  { id: 1, name: '雨过天青胆瓶', author: '青禾手作', price: 468, likes: 328, emoji: '🏺', color1: '#9CAF88', color2: '#D8E2CE' },
  { id: 2, name: '粗陶抹茶碗', author: '陶言器物', price: 168, likes: 256, emoji: '🍵', color1: '#C67B4E', color2: '#EFE3D0' },
  { id: 3, name: '月白茶盏对杯', author: '南山窑主', price: 298, likes: 412, emoji: '🍶', color1: '#E0A87E', color2: '#FAF6EF' },
  { id: 4, name: '铁锈花大盘', author: '老泥匠人', price: 388, likes: 195, emoji: '🍽️', color1: '#A85F38', color2: '#C67B4E' }
]

// ---------- 精简数据：课程 ----------
interface CYCourse {
  id: number
  name: string
  type: string
  duration: string
  price: number
  enrolled: number
  seats: number
  icon: string
}

const CY_COURSES: CYCourse[] = [
  { id: 1, name: '拉坯初体验·一只属于自己的碗', type: '体验', duration: '90分钟', price: 199, enrolled: 142, seats: 6, icon: '🥣' },
  { id: 2, name: '手捏陶趣·萌物小摆件', type: '体验', duration: '120分钟', price: 168, enrolled: 118, seats: 9, icon: '🐣' },
  { id: 3, name: '修坯精修课·让器物挺拔', type: '进阶', duration: '150分钟', price: 328, enrolled: 86, seats: 4, icon: '🪚' }
]

// ---------- 全局纯函数 ----------
function cyHotWorks(): CYWork[] {
  let r: CYWork[] = CY_HOME_WORKS.slice()
  r.sort((a: CYWork, b: CYWork) => b.likes - a.likes)
  return r
}

// ---------- 弹框组件：预约课程 ----------
@Component
struct CYCourseBookModal {
  @Prop courseName: string = ''
  onClose: () => void = () => {}
  onConfirm: () => void = () => {}
  @State selectedSlot: string = '周六上午'
  @State count: number = 1

  build() {
    Column() {
      Text('📅 ' + this.courseName).fontSize(13).fontWeight(FontWeight.Bold)
        .fontColor(CY_COLORS.textMain).width('100%').padding({ left: 20, top: 8 })

      Text('选择时段').fontSize(11).fontColor(CY_COLORS.textSub).width('100%').padding({ left: 20, top: 14 })
      Row() {
        ForEach(['周六上午', '周六下午', '周日上午'], (s: string) => {
          if (this.selectedSlot === s) {
            Text(s).fontSize(11).fontColor(CY_COLORS.white).backgroundColor(CY_COLORS.clay)
              .padding({ left: 11, right: 11, top: 6, bottom: 6 }).borderRadius(13).margin({ left: 4, right: 4 })
          } else {
            Text(s).fontSize(11).fontColor(CY_COLORS.clayDeep).backgroundColor(CY_COLORS.linen)
              .padding({ left: 11, right: 11, top: 6, bottom: 6 }).borderRadius(13).margin({ left: 4, right: 4 })
              .onClick(() => { this.selectedSlot = s })
          }
        }, (s: string) => s)
      }.width('100%').padding({ left: 16, right: 16, top: 6 })

      Text('预约人数').fontSize(11).fontColor(CY_COLORS.textSub).width('100%').padding({ left: 20, top: 16 })
      Row() {
        Text('－').fontSize(18).fontColor(this.count > 1 ? CY_COLORS.clayDeep : CY_COLORS.textHint)
          .width(34).height(34).textAlign(TextAlign.Center).backgroundColor(CY_COLORS.linen).borderRadius(17)
          .onClick(() => { if (this.count > 1) { this.count = this.count - 1 } })
        Text(this.count + ' 人').fontSize(16).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.textMain).width(70).textAlign(TextAlign.Center)
        Text('＋').fontSize(18).fontColor(CY_COLORS.clayDeep).width(34).height(34)
          .textAlign(TextAlign.Center).backgroundColor(CY_COLORS.linen).borderRadius(17)
          .onClick(() => { if (this.count < 6) { this.count = this.count + 1 } })
        Text('合计 ¥' + (this.count * 199)).fontSize(10).fontColor(CY_COLORS.danger).margin({ left: 14 })
      }.width('100%').alignItems(VerticalAlign.Center).padding({ left: 20, top: 8 })

      Row() {
        Text('再看看').fontSize(13).fontColor(CY_COLORS.textSub).backgroundColor(CY_COLORS.linen)
          .padding({ left: 26, right: 26, top: 10, bottom: 10 }).borderRadius(18).onClick(() => { this.onClose() })
        Text('确认预约').fontSize(13).fontColor(CY_COLORS.white).backgroundColor(CY_COLORS.clay)
          .padding({ left: 26, right: 26, top: 10, bottom: 10 }).borderRadius(18).margin({ left: 14 })
          .onClick(() => { this.onConfirm() })
      }.padding({ top: 22, bottom: 22 })
    }
    .width('100%').alignItems(HorizontalAlign.Start)
  }
}

// ---------- 首页组件 ----------
@Component
struct CYHomeContent {
  onExhibit: () => void = () => {}

  @Builder workCard(w: CYWork) {
    Column() {
      Stack() {
        Column().width('100%').height(110)
          .linearGradient({ angle: 135, colors: [[w.color1, 0.0], [w.color2, 1.0]] })
          .borderRadius({ topLeft: 14, topRight: 6, bottomLeft: 6, bottomRight: 14 })
        Text(w.emoji).fontSize(40)
      }.width('100%')

      Text(w.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.textMain)
        .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }).width('100%').margin({ top: 8 })
      Row() {
        Text(w.author).fontSize(10).fontColor(CY_COLORS.textSub)
        Column().layoutWeight(1)
        Text('¥' + w.price).fontSize(13).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.clayDeep)
      }.width('100%').margin({ top: 6, bottom: 4 })
    }
    .width('48.5%').backgroundColor(CY_COLORS.card)
    .borderRadius({ topLeft: 18, topRight: 8, bottomLeft: 8, bottomRight: 18 })
    .border({ width: 1, color: CY_COLORS.linen }).padding(8).margin({ top: 8 })
  }

  build() {
    Column() {
      Scroll() {
        Column() {
          Stack() {
            Column().width('100%').height(150)
              .linearGradient({ angle: 160, colors: [['#A85F38', 0.0], ['#C67B4E', 0.55], ['#E0A87E', 1.0]] })
            Text('🏺').fontSize(52).position({ x: '80%', y: 60 })
            Column() {
              Text('本月主题展览').fontSize(10).fontColor(CY_COLORS.linen).padding({ left: 8, right: 8, top: 3, bottom: 3 })
                .backgroundColor('rgba(74,60,50,0.35)').borderRadius(9)
              Text('「侘寂之器 · 不完美之美」').fontSize(19).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.white).margin({ top: 8 })
              Text('38 件会员作品').fontSize(11).fontColor(CY_COLORS.linen).margin({ top: 6 })
            }.alignItems(HorizontalAlign.Start).layoutWeight(1).padding({ left: 18, top: 30 })

            Text('报名参展').fontSize(12).fontColor('#A85F38').fontWeight(FontWeight.Bold)
              .backgroundColor(CY_COLORS.linen).padding({ left: 14, right: 14, top: 6, bottom: 6 }).borderRadius(14)
              .position({ x: '70%', y: 110 })
              .onClick(() => { this.onExhibit() })
          }
          .width('100%').height(150).borderRadius({ topLeft: 26, topRight: 26, bottomLeft: 60, bottomRight: 60 })
          .clip(true).margin({ left: 12, right: 12, top: 10 })

          Row() {
            Text('🔥 泥友新作').fontSize(15).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.textMain)
            Column().layoutWeight(1)
            Text('共 ' + CY_HOME_WORKS.length + ' 件').fontSize(10).fontColor(CY_COLORS.textSub)
          }.width('100%').padding({ left: 16, right: 16, top: 18 })

          Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
            ForEach(cyHotWorks(), (w: CYWork) => {
              this.workCard(w)
            }, (w: CYWork) => w.id.toString())
          }.width('92%').margin({ top: 2 })
        }
        .padding({ bottom: 20 })
      }
      .scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off).layoutWeight(1)
    }
    .width('100%').height('100%')
  }
}

// ---------- 课程页面组件 ----------
@Component
struct CYCourseContent {
  onBook: (name: string) => void = (name: string) => {}

  @Builder courseCard(c: CYCourse) {
    Column() {
      Row() {
        Stack() {
          Column().width(54).height(54).backgroundColor(CY_COLORS.linen)
            .borderRadius({ topLeft: 27, topRight: 12, bottomLeft: 12, bottomRight: 27 })
          Text(c.icon).fontSize(26)
        }.width(54).height(54)

        Column() {
          Text(c.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.textMain)
            .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
          Row() {
            Text(c.type).fontSize(9).fontColor(CY_COLORS.white).backgroundColor(CY_COLORS.clay)
              .padding({ left: 7, right: 7, top: 2, bottom: 2 }).borderRadius(8)
            Text('⏱ ' + c.duration).fontSize(10).fontColor(CY_COLORS.textSub).margin({ left: 6 })
          }.margin({ top: 6 })
          Text('已报名 ' + c.enrolled + ' 人 · 剩 ' + c.seats + ' 个名额')
            .fontSize(10).fontColor(c.seats <= 3 ? CY_COLORS.danger : CY_COLORS.textSub).margin({ top: 5 })
        }.alignItems(HorizontalAlign.Start).layoutWeight(1).margin({ left: 12 })

        Column() {
          Text('¥' + c.price).fontSize(17).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.clayDeep)
          Text('预约').fontSize(12).fontColor(CY_COLORS.white).backgroundColor(CY_COLORS.clay)
            .padding({ left: 16, right: 16, top: 6, bottom: 6 }).borderRadius(14).margin({ top: 6 })
            .onClick(() => { this.onBook(c.name) })
        }.alignItems(HorizontalAlign.End)
      }.width('100%')
    }
    .width('100%').backgroundColor(CY_COLORS.card)
    .borderRadius({ topLeft: 16, topRight: 8, bottomLeft: 8, bottomRight: 16 })
    .border({ width: 1, color: CY_COLORS.linen }).padding(12)
    .margin({ left: 12, right: 12, top: 8 })
  }

  build() {
    Column() {
      Scroll() {
        Column() {
          Row() {
            Text('🎨 全部课程').fontSize(15).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.textMain)
            Column().layoutWeight(1)
          }.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 4 })

          ForEach(CY_COURSES, (c: CYCourse) => {
            this.courseCard(c)
          }, (c: CYCourse) => c.id.toString())
        }
        .padding({ bottom: 20 })
      }
      .scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off).layoutWeight(1)
    }
    .width('100%').height('100%')
  }
}

// ---------- 占位组件 ----------
@Component
struct CYEmptyContent {
  @Prop title: string = ''
  build() {
    Column() {
      Text(this.title).fontSize(18).fontColor(CY_COLORS.textSub).margin({ top: 60 })
    }.width('100%').height('100%')
  }
}

// ---------- 入口组件 ----------
@Entry
@Component
struct CYClayLabApp {
  @State activeTab: CYTab = CYTab.Home
  @State showCourseBook: boolean = false
  @State showExhibit: boolean = false
  @State bookingCourse: string = ''

  @Builder courseBookModal() {
    Column() {
      Column().width('100%').height('100%')
        .backgroundColor('rgba(74,60,50,0.55)')
        .onClick(() => { this.showCourseBook = false })
      Column() {
        Row() {
          Text('🎨 预约课程').fontSize(18).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.textMain)
          Column().layoutWeight(1)
          Text('✕').fontSize(18).fontColor(CY_COLORS.textHint)
            .onClick(() => { this.showCourseBook = false })
        }.width('100%').padding({ left: 20, right: 20, top: 18, bottom: 12 })

        CYCourseBookModal({
          courseName: this.bookingCourse,
          onClose: () => { this.showCourseBook = false },
          onConfirm: () => { this.showCourseBook = false }
        })
      }
      .width('90%').backgroundColor(CY_COLORS.card)
      .borderRadius({ topLeft: 22, topRight: 10, bottomLeft: 16, bottomRight: 22 })
      .border({ width: 1, color: CY_COLORS.linen })
      .alignItems(HorizontalAlign.Center).position({ x: '5%', y: '14%' })
    }
    .width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
  }

  build() {
    Column() {
      Row() {
        Text('泥').fontSize(15).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.white)
          .width(30).height(30).textAlign(TextAlign.Center)
        Column() {
          Text('CLAY LAB').fontSize(16).fontWeight(FontWeight.Bold).fontColor(CY_COLORS.textMain)
          Text('手作陶艺坊').fontSize(9).fontColor(CY_COLORS.textSub)
        }.alignItems(HorizontalAlign.Start).margin({ left: 8 })
        Column().layoutWeight(1)
        Text('🔍').fontSize(20).margin({ right: 12 })
      }
      .width('100%').padding({ left: 14, right: 14, top: 10, bottom: 10 }).backgroundColor(CY_COLORS.linen)

      Stack() {
        if (this.activeTab === CYTab.Home) {
          CYHomeContent({ onExhibit: () => { this.showExhibit = true } })
        } else if (this.activeTab === CYTab.Course) {
          CYCourseContent({ onBook: (name: string) => { this.bookingCourse = name; this.showCourseBook = true } })
        } else if (this.activeTab === CYTab.Material) {
          CYEmptyContent({ title: '🧱 材料页' })
        } else if (this.activeTab === CYTab.Studio) {
          CYEmptyContent({ title: '🔥 工坊页' })
        } else if (this.activeTab === CYTab.Community) {
          CYEmptyContent({ title: '📷 社区页' })
        } else {
          CYEmptyContent({ title: '👐 我的页' })
        }

        if (this.showCourseBook) { this.courseBookModal() }
      }
      .layoutWeight(1)

      Row() {
        ForEach(CY_TABS, (item: CYTabItem) => {
          Column() {
            Text(item.icon).fontSize(20).opacity(this.activeTab === item.tab ? 1.0 : 0.45)
            Text(item.label).fontSize(9).fontColor(this.activeTab === item.tab ? CY_COLORS.clay : CY_COLORS.textHint)
              .fontWeight(this.activeTab === item.tab ? FontWeight.Bold : FontWeight.Normal).margin({ top: 2 })
            if (this.activeTab === item.tab) {
              Column().width(16).height(3).backgroundColor(CY_COLORS.clay).borderRadius(2).margin({ top: 3 })
            }
          }
          .layoutWeight(1).alignItems(HorizontalAlign.Center).padding({ top: 6, bottom: 6 })
          .onClick(() => { this.activeTab = item.tab })
        }, (item: CYTabItem) => item.label)
      }
      .width('100%').backgroundColor(CY_COLORS.card)
      .border({ width: { top: 1 }, color: CY_COLORS.linen }).padding({ top: 4, bottom: 6 })
    }
    .width('100%').height('100%').backgroundColor(CY_COLORS.linen)
  }
}