组件文档

项目通过 uni-app 的 easycom 机制自动注册了 13 个通用组件，使用时无需手动 import。另有 5 个 Layout 组件按需引入。

1. easycom 自动注册

以特定前缀命名的组件会自动识别并注册：

^TabBar → @/components/common/TabBar.vue
^LifeLayout → @/components/common/LifeLayout.vue
^LifeModal → @/components/common/LifeModal.vue
^LifeButton → @/components/common/LifeButton.vue
^LifeHeader → @/components/common/LifeHeader.vue
^LifeEmpty → @/components/common/LifeEmpty.vue
^LifeField → @/components/common/LifeField.vue
^EmptyState → @/components/common/EmptyState.vue
^LoadingSpinner → @/components/common/LoadingSpinner.vue
^PageHeader → @/components/common/PageHeader.vue
^DynamicForm → @/components/common/DynamicForm.vue

注：DashboardView 和 MagicView 的 easycom 映射无效，其对应文件不存在。实际使用时通过显式 import 从页面目录引入。

2. 布局组件

LifeLayout

通用页面布局容器，自动撑满视口。

Props：

属性	类型	默认值	说明
`bg`	string	—	背景色
`safeBottom`	boolean	false	为底部 TabBar 留白
`showFab`	boolean	false	显示浮动操作按钮
`fabColor`	string	`var(--color-primary)`	FAB 颜色

Events：

事件	说明
`fabClick`	浮动按钮点击

Slots：

插槽	说明
`default`	主内容区
`top`	顶部区域（放置 PageHeader）

使用示例：

vue

<LifeLayout safe-bottom show-fab @fab-click="handleAdd">
  <template #top>
    <PageHeader title="任务列表" />
  </template>
  <view>内容区域</view>
</LifeLayout>

TabBar

底部导航栏占位组件，内部根据 pages.json 的原生 TabBar 配置自动工作。5 个 Tab：首页、任务、功能、日程、我的。无对外 Props/Events。

3. 导航组件

PageHeader

页面头部栏，支持返回、标题、右侧操作。

Props：

属性	类型	默认值	说明
`title`	string	必填	标题
`subtitle`	string	—	副标题
`showBack`	boolean	true	显示返回按钮
`backText`	string	`←`	返回按钮文字
`bgColor`	string	`var(--color-bg)`	背景色
`rightIcon`	string	—	右侧图标（文字/emoji）
`rightBg`	string	—	右侧按钮背景
`rightColor`	string	—	右侧按钮颜色

Events：

事件	说明
`back`	返回按钮点击（未监听时自动 `navigateBack`）
`rightClick`	右侧图标按钮点击

Slots：

插槽	说明
`left`	返回按钮右侧自定义内容
`right`	右侧自定义内容（覆盖 `rightIcon`）

使用示例：

vue

<PageHeader
  title="设置"
  right-icon="⚙"
  @back="handleBack"
  @right-click="openSettings"
/>

LifeHeader

简化版头部组件，功能与 PageHeader 类似但更轻量。

Props：

属性	类型	默认值	说明
`title`	string	必填	标题
`subtitle`	string	—	副标题
`showBack`	boolean	—	显示返回按钮
`headerBg`	string	`var(--color-bg)`	背景色

Events：

事件	说明
`back`	返回按钮点击（需父组件手动 `navigateBack`）

Slots：right — 右侧自定义内容。

4. 表单组件

LifeField

单个表单字段组件，根据 type 自动渲染不同控件。

Props：

属性	类型	默认值	说明
`modelValue`	any	—	v-model 绑定值
`type`	enum	`text`	控件类型（见下方表格）
`label`	string	—	标签文字
`placeholder`	string	—	占位文字
`required`	boolean	false	显示必填标记 `*`
`options`	string[]	—	select 类型的选项
`textareaHeight`	string	`160rpx`	textarea 高度
`hint`	string	—	底部提示（红色）

type 取值：

值	渲染控件
`text`	单行文本输入
`number`	数字输入（系统数字键盘）
`password`	密码输入（掩码显示）
`textarea`	多行文本域
`date`	日期选择器
`select`	单选标签组
`toggle`	开关

使用示例：

vue

<LifeField
  v-model="name"
  type="text"
  label="姓名"
  required
  placeholder="请输入姓名"
  hint="至少 2 个字符"
/>

DynamicForm

动态表单组件，通过 fields 配置数组驱动渲染，支持 13 种字段类型。

Props：

属性	类型	默认值	说明
`modelValue`	Record<string, any>	必填	v-model 绑定的表单数据
`fields`	FieldConfig[]	必填	字段配置数组
`gap`	number	0	行间距 (px)

字段类型：text / number / textarea / select / multi-select / emoji / color / toggle / date / time / stepper / star / slot

FieldConfig 结构：

属性	类型	说明
`key`	string	字段 key，对应 modelValue 的属性
`type`	FieldType	字段类型
`label`	string	标签文字
`labelIcon`	string	标签图标
`placeholder`	string	占位文字
`required`	boolean	是否必填
`options`	FieldOption[]	select/emoji/color 的选项列表
`textareaHeight`	string	textarea 高度
`showSeconds`	boolean	time 类型是否显示秒
`min` / `max`	number	stepper 的数值范围
`step`	number	stepper 步长
`disabled`	boolean	禁用
`suffix`	FieldSuffix	后缀按钮配置
`slotName`	string	slot 类型的插槽名

使用示例：

vue

<DynamicForm
  v-model="formData"
  :fields="[
    { key: 'name', type: 'text', label: '姓名', required: true },
    { key: 'priority', type: 'select', label: '优先级', options: [
      { label: '高', value: 'high' },
      { label: '中', value: 'medium' },
      { label: '低', value: 'low' }
    ]},
    { key: 'dueDate', type: 'date', label: '截止日期' },
    { key: 'rating', type: 'star', label: '重要程度', max: 5 },
    { key: 'notify', type: 'toggle', label: '提醒' }
  ]"
/>

5. 反馈组件

LifeModal

底部弹出式模态框。

Props：

属性	类型	默认值	说明
`visible`	boolean	必填	是否显示
`title`	string	—	弹窗标题
`maxHeight`	string	`85vh`	最大高度
`height`	string	`auto`	固定高度
`scrollable`	boolean	false	内容可滚动
`dragBar`	boolean	true	显示拖拽条
`closeBtn`	boolean	true	显示关闭按钮

Events：close — 点击遮罩或关闭按钮时触发。

使用示例：

vue

<LifeModal visible title="添加任务" @close="showModal = false">
  <DynamicForm v-model="form" :fields="fields" />
  <LifeButton label="提交" variant="primary" block @click="submit" />
</LifeModal>

LifeButton

通用按钮，支持 3 种变体。

Props：

属性	类型	默认值	说明
`label`	string	—	按钮文字
`variant`	enum	—	`primary` / `ghost` / `danger`
`block`	boolean	false	占满宽度
`active`	boolean	false	高亮激活态
`disabled`	boolean	false	禁用（不触发 click）
`gradient`	string	—	激活态渐变背景
`sm`	boolean	false	小尺寸
`lg`	boolean	false	大尺寸

使用示例：

vue

<LifeButton label="完成" variant="primary" block @click="save" />
<LifeButton label="取消" variant="ghost" @click="cancel" />
<LifeButton label="删除" variant="danger" sm @click="remove" />

LoadingSpinner

加载动画。

Props：

属性	类型	默认值	说明
`text`	string	`加载中…`	提示文字
`size`	string	`32px`	转圈尺寸

使用示例：

vue

<LoadingSpinner text="AI 思考中…" size="48px" />

6. 状态组件

LifeEmpty

空状态占位，居中图标 + 文字布局。

Props：

属性	类型	默认值	说明
`icon`	string	—	图标（emoji/文字）
`text`	string	—	提示文字
`paddingTop`	string	`160rpx`	上边距（rpx）
`iconSize`	string	`96rpx`	图标字号

EmptyState

空状态占位（与 LifeEmpty 类似，上边距单位为 px，文字有宽度限制）。

Props：

属性	类型	默认值	说明
`icon`	string	—	图标（emoji/文字）
`text`	string	—	提示文字
`paddingTop`	string	`80px`	上边距（px）
`iconSize`	string	`96rpx`	图标字号

使用示例：

vue

<LifeEmpty icon="📝" text="还没有任务，点击下方创建" />
<EmptyState icon="🔍" text="未找到结果" />

7. Layout 组件（非 easycom，需手动 import）

组件	路径	说明
Layout	`@/components/Layout/Layout.vue`	页面外层容器
StatusBar	`@/components/Layout/StatusBar.vue`	状态栏高度适配
BottomBar	`@/components/Layout/BottomBar.vue`	底部安全区适配
BioAuthOverlay	`@/components/common/BioAuthOverlay.vue`	生物认证全屏解锁
DashboardView	`@/pages/dashboard/index.vue`	首页仪表盘（页面组件）
MagicView	`@/pages/magic/index.vue`	快捷操作面板（页面组件）

组件文档 ​

1. easycom 自动注册 ​

2. 布局组件 ​

LifeLayout ​

TabBar ​

3. 导航组件 ​

PageHeader ​

LifeHeader ​

4. 表单组件 ​

LifeField ​

DynamicForm ​

5. 反馈组件 ​

LifeModal ​

LifeButton ​

LoadingSpinner ​

6. 状态组件 ​

LifeEmpty ​

EmptyState ​

7. Layout 组件（非 easycom，需手动 import） ​

组件文档

1. easycom 自动注册

2. 布局组件

LifeLayout

TabBar

3. 导航组件

PageHeader

LifeHeader

4. 表单组件

LifeField

DynamicForm

5. 反馈组件

LifeModal

LifeButton

LoadingSpinner

6. 状态组件

LifeEmpty

EmptyState

7. Layout 组件（非 easycom，需手动 import）