Files
sundynix-pets/pets-fe/pages/plan/plan.wxml
T
Blizzard 2fd25e26ef feat(fe): 其余 8 页 + 三个薄组件套用新设计语言
页面:
- record:3×3 emoji 九宫格(184rpx 高、全站最大的点击块)换成图标 + 4 色分类,
  和首页的 8 宫格合并成同一套 .quick-grid,此前它俩是同一个东西的两个副本
- record/plan/community:三套横向切换全部换成 seg-tabs
- record/plan/community/report/learn:砍掉与 nav-bar 重复的 46rpx 大标题,
  每页白赚约 130rpx 首屏
- 时间轴图标改按 HealthRecord.Type 取(9 值枚举,可靠),老数据里的 emoji
  只作兜底;写库的 icon 字段一个字符没动
- profile:设置行加分类图标 + 右侧箭头换图标
- community/report:主操作改深色 CTA,btn-primary 继续留给弹层的「保存」
- 6 套空态写法统一成 .empty

组件:
- nav-bar 的 ‹ 和 fab 的 "AI" 文字换成图标;fab 从蓝渐变改深色,
  和全站唯一主 CTA 的语义对齐
- pet-switch 的「+」换图标;宠物自己的 emoji 是用户数据,保留

pt-icon 开了 virtualHost,组件标签上的 class 不生效,需要定位的地方
(profile 行图标、箭头)都用外层 view 包了一层。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-29 10:54:18 +08:00

94 lines
5.2 KiB
Plaintext

<nav-bar title="养宠计划"></nav-bar>
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<view class="page-body">
<pet-switch bind:add="onAddPet"></pet-switch>
<seg-tabs variant="solid" items="{{planTabs}}" current="{{planView}}" bind:change="switchPlanView"></seg-tabs>
<!-- 路线图 -->
<view wx:if="{{planView === 'timeline'}}">
<view class="card">
<view class="section-head">
<view class="sh-title">{{pet.name}}的 30 天计划</view>
<view class="tag warn">{{plan.completion_pct || 0}}%</view>
</view>
<view class="progress-row"><text>完成度</text><text>{{plan.completion_pct || 0}}%</text></view>
<view class="bar"><view class="bar-fill" style="width:{{plan.completion_pct || 0}}%"></view></view>
</view>
<view class="timeline">
<view wx:for="{{plan.tasks}}" wx:key="id" class="time-block">
<view class="time-label">{{item.day_label}}<text wx:if="{{item.dateLabel}}" class="time-date">{{item.dateLabel}}</text></view>
<view class="plan-task {{item.done ? 'done' : ''}}">
<view class="pk-check" catchtap="toggleTimelineTask" data-id="{{item.id}}"><pt-icon wx:if="{{item.done}}" name="check" size="{{22}}"></pt-icon></view>
<view class="pk-body" data-type="{{item.sheet_type}}" bindtap="openSheet">
<text class="pk-b">{{item.title}}</text><view class="pk-p">{{item.description}}</view>
</view>
</view>
</view>
<view wx:if="{{!plan}}" class="empty">暂无计划</view>
</view>
</view>
<!-- 日历 -->
<view wx:elif="{{planView === 'calendar'}}">
<view class="calendar">
<view class="cal-head"><text>{{calLabel}}</text><view class="link" data-type="reminders" bindtap="openSheet">提醒</view></view>
<view class="cal-grid">
<text class="cal-w">一</text><text class="cal-w">二</text><text class="cal-w">三</text><text class="cal-w">四</text><text class="cal-w">五</text><text class="cal-w">六</text><text class="cal-w">日</text>
<view wx:for="{{calCells}}" wx:key="index"
class="cal-cell {{item.today ? 'today' : ''}} {{item.tasked ? 'tasked' : ''}} {{item.day === 0 ? 'blank' : ''}} {{item.date && item.date === selectedCalDate ? 'sel' : ''}}"
data-date="{{item.date}}" bindtap="onTapCalDay">{{item.day || ''}}</view>
</view>
</view>
<view wx:if="{{dayDetail}}" class="day-detail">
<view class="dd-title">{{dayDetail.date}} 的安排</view>
<block wx:if="{{!dayDetail.empty}}">
<view wx:for="{{dayDetail.nodes}}" wx:key="title" class="dd-item">
<text class="dd-tag plan">计划</text><text class="dd-b {{item.done ? 'done' : ''}}">{{item.title}}</text>
</view>
<view wx:for="{{dayDetail.tasks}}" wx:key="title" class="dd-item">
<text class="dd-tag task">任务</text><text class="dd-b {{item.done ? 'done' : ''}}">{{item.title}}</text>
</view>
<view wx:for="{{dayDetail.reminders}}" wx:key="title" class="dd-item">
<text class="dd-tag rem">提醒</text><text class="dd-b">{{item.title}}</text>
</view>
</block>
<view wx:else class="empty">这天没有安排</view>
</view>
</view>
<!-- AI 计划 -->
<view wx:elif="{{planView === 'aiPlan'}}">
<view class="card">
<view class="section-head"><view class="sh-title">AI 计划模式</view><view class="tag purple">Plan</view></view>
<view class="ai-plan-tip">描述 {{pet.name}} 的近况(阶段、近期变化、担心的问题),AI 会提取关键信息并生成可执行计划。</view>
<textarea class="textarea" placeholder="例如:4 个月,刚换粮有点软便,也快打第二针疫苗" placeholder-class="placeholder" value="{{aiInput}}" bindinput="onAiInput"></textarea>
<button class="btn btn-primary btn-block" style="margin-top:16rpx" bindtap="genAIPlan" disabled="{{aiBusy}}">{{aiBusy ? '生成中…' : '生成计划'}}</button>
</view>
<view wx:if="{{aiPlan}}" class="card">
<view class="section-head"><view class="sh-title">已提取信息</view></view>
<view class="extracted">
<view class="extract"><text class="ex-b">阶段</text>{{aiPlan.extracted.stage}}</view>
<view class="extract"><text class="ex-b">风险</text>{{aiPlan.extracted.risk}}</view>
<view class="extract"><text class="ex-b">重点</text>{{aiPlan.extracted.priority}}</view>
<view class="extract"><text class="ex-b">提醒</text>{{aiPlan.extracted.reminder}}</view>
</view>
<view class="section-head" style="margin-top:20rpx"><view class="sh-title">生成的计划</view></view>
<view class="task-list">
<view wx:for="{{aiPlan.tasks}}" wx:key="id" class="task">
<view class="circle"></view>
<view class="task-text"><text class="tt-b">{{item.day_label}}· {{item.title}}</text><view class="tt-p">{{item.description}}</view></view>
</view>
</view>
<button class="btn btn-primary btn-block" style="margin-top:16rpx" bindtap="applyAIPlan">加入我的计划</button>
</view>
</view>
</view>
</scroll-view>
<fab bind:tap="onFab"></fab>
<bottom-sheet show="{{sheetShow}}" type="{{sheetType}}" bind:close="closeSheet"></bottom-sheet>