知识库 App 的首页在基础版上做了两处关键升级：新增快捷操作区提供高频功能入口，笔记本卡片加了阴影和内边距提升视觉层次。这两处改动不大，但直接影响用户的第一印象和操作效率。

完整效果

一、首页的区块演进

版本	区块	变化
基础版	Header + 统计卡片 + 笔记本 + 最近笔记	4 个区块
优化版	Header + 统计卡片 + 笔记本 + 快捷操作 + 最近笔记	5 个区块

快捷操作区插在笔记本和最近笔记之间——用户浏览完笔记本分类后，看到快捷入口，再看到具体笔记。这个位置符合"分类→操作→内容"的浏览逻辑。

二、快捷操作区的 Action Builder

@Builder Action(icon: string, label: string, color: string) {
  Column() {
    Text(icon).fontSize(20).width(44).height(44).borderRadius(14)
      .backgroundColor(color + '12').textAlign(TextAlign.Center)
    Text(label).fontSize(10).fontColor(T2).margin({ top: 4 })
  }.layoutWeight(1).onClick(() => {
    if (label === '写笔记') router.pushUrl({ url: 'pages/NoteEditor', params: {} as Record<string,Object> })
    else if (label === '标签管理') router.pushUrl({ url: 'pages/ProfilePage' })
  })
}

三个参数的设计

参数	作用	例子
icon	emoji 图标	📝
label	功能名称	写笔记
color	背景色	#6C5CE7

color 只用于背景色的 7% 透明度（color + '12'）。 图标本身是 emoji 不受 color 影响，color 只控制底部色块。四个操作项各有不同颜色——紫色/绿色/橙色/红色——视觉上区分不同功能。

和 Stat Builder 的结构对比

// Stat：图标 + 数字 + 标签（三行）
@Builder Stat(icon, value, label) {
  Column() { Text(icon); Text(value); Text(label) }
}

// Action：图标 + 标签（两行）
@Builder Action(icon, label, color) {
  Column() { Text(icon); Text(label) }
}

Action 比 Stat 少一行——没有数字。 Stat 展示统计数据需要数字，Action 是功能入口只需要图标和名称。两个 Builder 结构相似但职责不同。

四个操作项的路由目标

操作	颜色	路由目标	参数
写笔记	#6C5CE7 紫	NoteEditor	无（新建模式）
标签管理	#00B894 绿	ProfilePage	无
导出数据	#FF9F43 橙	无	纯展示
数据统计	#FF6B6B 红	无	纯展示

四个操作只有两个有实际路由——"导出数据"和"数据统计"是占位。 这是原型阶段的常见做法：先放入口占位，后续逐步实现功能。如果去掉占位项，快捷操作区只剩两个按钮，视觉上太单薄。

踩坑记录： 最初"标签管理"跳转到 TagFilterPage，但 TagFilterPage 是标签筛选页不是管理页。改成跳转 ProfilePage（个人中心的标签云更接近"管理"的概念）。

三、笔记本卡片的视觉升级

基础版 vs 优化版

// 基础版：白色背景 + 无阴影
.backgroundColor(CW).borderRadius(14)

// 优化版：白色背景 + 阴影 + 内边距增加
.backgroundColor(CW).borderRadius(14)
.shadow({ radius: 2, color: 'rgba(0,0,0,0.02)', offsetY: 1 })

阴影参数的含义：

参数	值	效果
radius	2	模糊半径 2px，阴影边缘柔和
color	rgba(0,0,0,0.02)	2% 黑色透明度，几乎不可见
offsetY	1	阴影向下偏移 1px

2% 透明度的阴影——用户几乎看不到阴影本身，但能感知到卡片"浮"在背景上。 这是微阴影（micro shadow）的设计理念：不明显的阴影比明显的阴影更高级。

图标背景色的透明度

Text(nb.icon).fontSize(22).width(40).height(40).borderRadius(12)
  .backgroundColor(nb.color + '15')

nb.color + '15' 是 8% 透明度（0x15=21，21/255≈8%）。 比笔记卡片的 7%（0x12）稍深——因为笔记本卡片是独立的白色卡片，图标背景需要更明显的颜色来区分四个笔记本。

四个笔记本的配色：

笔记本	颜色	图标背景
工作	#FF6B6B 红	8% 红色
学习	#6C5CE7 紫	8% 紫色
生活	#00B894 绿	8% 绿色
灵感	#FF9F43 橙	8% 橙色

笔记本卡片的信息结构

Column（白色卡片 + 阴影）
  ├→ Row（图标容器）
  │    └→ Text(nb.icon)      22px emoji + 40×40 彩色背景
  ├→ Text(nb.name)           13px 粗体
  └→ Text(nb.noteCount)      10px 灰色 "3 篇笔记"

三行信息——图标最重要（22px），名称次之（13px），数量最弱（10px）。 视觉层次清晰：用户先看到图标识别笔记本，再看到名称确认，最后看到数量了解规模。

四、快捷操作区的布局

Row({ space: 10 }) {
  this.Action('📝', '写笔记', A)
  this.Action('🏷️', '标签管理', '#00B894')
  this.Action('📤', '导出数据', '#FF9F43')
  this.Action('📊', '数据统计', '#FF6B6B')
}.width('100%').padding({ left: 16, right: 16 }).margin({ bottom: 18 })

Row({ space: 10 }) 四等分宽度——和统计卡片、笔记本卡片用同样的布局方式。 layoutWeight(1) 让每个 Action 均分剩余宽度。四个按钮等宽等距，视觉上整齐。

和统计卡片的布局一致性

区块	布局方式	子项数量	间距
统计卡片	Row({ space: 10 }) + layoutWeight(1)	3 个	10px
笔记本	Row({ space: 10 }) + layoutWeight(1)	4 个	10px
快捷操作	Row({ space: 10 }) + layoutWeight(1)	4 个	10px

三个区块用完全相同的布局模式——Row + space:10 + layoutWeight(1)。 这种一致性让用户浏览首页时有"节奏感"——每个区块的宽度分配和间距都一样，视觉上不会突兀。

五、+ 按钮的设计

Row() { Text('+').fontSize(28).fontColor(A).fontWeight(FontWeight.Lighter) }
.width(42).height(42).borderRadius(21).backgroundColor(A + '12')
.justifyContent(FlexAlign.Center)
.onClick(() => { router.pushUrl({ url: 'pages/NoteEditor', params: {} as Record<string,Object> }) })

42×42 的圆形按钮，28px 的 + 号。 borderRadius(21) = 42/2 = 正圆。fontWeight(FontWeight.Lighter) 让 + 号笔画更细——和 Bold 的标题形成对比，视觉上更轻盈。

A + '12' 是 7% 紫色背景——和统计卡片的背景色一致。 整个首页的浅紫色背景都用同一个透明度（0x12），保持视觉统一。

和笔记本图标的对比：

元素	尺寸	背景色	文字
+ 按钮	42×42	7% 紫色	+ 号（28px）
笔记本图标	40×40	8% 对应颜色	emoji（22px）

• 按钮比笔记本图标稍大——因为它是首页最重要的操作入口，需要更显眼。

六、笔记本区域的标题栏

Row() {
  Text('笔记本').fontSize(17).fontWeight(FontWeight.Bold).fontColor(T1)
  Blank()
  Text('查看全部 ›').fontSize(12).fontColor(A)
}.width('100%').padding({ left: 16, right: 16 }).margin({ bottom: 8 })

“查看全部 ›” 是一个可点击的链接——虽然当前没有实际路由。 和快捷操作的"导出数据""数据统计"一样，是占位设计。点击后理论上应该跳转到显示所有笔记本的页面，但当前只有 4 个笔记本，一屏能看完，不需要单独的列表页。

Blank() 让"笔记本"和"查看全部 ›" 分别靠左和靠右。 这是 ArkTS 里实现"两端对齐"的标准方式——Blank 占据中间剩余空间。

七、整体嵌套结构

Stack(Alignment.Bottom)                      页面容器
  ├→ Scroll                                  可滚动内容
  │    └→ Column                             垂直排列
  │         ├→ Row (Header)                  标题 + +按钮
  │         ├→ Row + @Builder Stat × 3       统计卡片
  │         ├→ Row 标题栏 + Row + ForEach    笔记本卡片
  │         ├→ Row + @Builder Action × 4     快捷操作（新增）
  │         ├→ Row 标题栏 + Column + ForEach 最近笔记
  │         └→ Blank(80)                     底部导航栏预留
  └→ Row + @Builder Nav × 4                  底部导航栏

嵌套深度 4 层——和基础版一样。 快捷操作区没有增加嵌套深度——它是一个独立的 Row，直接放在 Column 里。

各区块的 margin-bottom 统一

区块	margin-bottom
Header	16px
统计卡片	16px
笔记本标题栏	8px
笔记本卡片	18px
快捷操作	18px
最近笔记标题栏	8px

标题栏和内容之间用 8px，区块之间用 16-18px。 两种间距区分了"标题-内容"的紧密关系和"区块-区块"的松散关系。

八、颜色系统的统一

首页的颜色常量和整个 App 保持一致：

常量	值	用途
A	#6C5CE7	主色（按钮、标签、进度条）
BG	#F8F7FE	页面背景
CW	#FFFFFF	卡片背景
T1	#1E1B2E	标题文字
T2	#888888	说明文字
T3	#BBBBBB	辅助文字

所有浅色背景都用 常量 + '12'（7% 透明度）。 统计卡片、+按钮、笔记图标背景都用同一个透明度。这种一致性让用户感知到"这些元素属于同一个系统"。

快捷操作的四个颜色是例外——每个操作用不同颜色。 紫色/绿色/橙色/红色 四色区分功能，但每个颜色都加了 '12' 后缀保持 7% 透明度。颜色不同但透明度一致——变化中有统一。