feat: migrate static pages to native tabbar
This commit is contained in:
74
packages/learning/pages/center/index.js
Normal file
74
packages/learning/pages/center/index.js
Normal file
@@ -0,0 +1,74 @@
|
||||
const {
|
||||
createLearningCenterPageData: createBaseLearningCenterPageData
|
||||
} = require('../../../../utils/static-ux/learning')
|
||||
const { ROUTES, openStaticRoute } = require('../../../../utils/static-ux/route-map')
|
||||
|
||||
function createLearningCenterPageData() {
|
||||
const baseData = createBaseLearningCenterPageData()
|
||||
|
||||
return {
|
||||
...baseData,
|
||||
heroTitle: '先继续上次学习，再回看静态记录',
|
||||
heroDescription: '学习中心不再承接旧后台列表，而是把最值得继续的学习动作放到最上面。',
|
||||
quickDeck: [
|
||||
{
|
||||
key: 'qa-history',
|
||||
title: 'AI历史',
|
||||
description: '继续查看中医问答与辨证分析的静态记录页',
|
||||
route: ROUTES.tcm.aiHistory,
|
||||
domain: 'tcm'
|
||||
},
|
||||
{
|
||||
key: 'assets',
|
||||
title: '学习资产',
|
||||
description: '回到笔记、书架、收藏和历史四类资产入口',
|
||||
route: `${ROUTES.tcm.assets}?kind=notes`,
|
||||
domain: 'tcm'
|
||||
},
|
||||
{
|
||||
key: 'interpret',
|
||||
title: '命理解读',
|
||||
description: '进入易学侧的静态问题解读页',
|
||||
route: `${ROUTES.mingli.interpret}?scene=result`,
|
||||
domain: 'mingli'
|
||||
},
|
||||
{
|
||||
key: 'bazi',
|
||||
title: '八字排盘',
|
||||
description: '继续查看静态排盘结果与四柱结构',
|
||||
route: `${ROUTES.mingli.bazi}?scene=result`,
|
||||
domain: 'mingli'
|
||||
}
|
||||
],
|
||||
recentItems: [
|
||||
{
|
||||
key: 'recent-reading',
|
||||
title: '典籍阅读',
|
||||
description: '回到《黄帝内经素问》的静态阅读页。',
|
||||
route: `${ROUTES.tcm.section}?scene=reader-a`
|
||||
},
|
||||
{
|
||||
key: 'recent-yixue',
|
||||
title: '易学阅读',
|
||||
description: '继续浏览《滴天髓》的静态阅读页。',
|
||||
route: `${ROUTES.mingli.section}?scene=reader-a`
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function showNavigate(route) {
|
||||
openStaticRoute(route, wx)
|
||||
}
|
||||
|
||||
Page({
|
||||
data: createLearningCenterPageData(),
|
||||
|
||||
handleRouteTap(event) {
|
||||
showNavigate(event.currentTarget.dataset.route)
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
createLearningCenterPageData
|
||||
}
|
||||
5
packages/learning/pages/center/index.json
Normal file
5
packages/learning/pages/center/index.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "学习中心",
|
||||
"navigationBarBackgroundColor": "#f7f0e6",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
44
packages/learning/pages/center/index.wxml
Normal file
44
packages/learning/pages/center/index.wxml
Normal file
@@ -0,0 +1,44 @@
|
||||
<view class="learning-page">
|
||||
<view class="hero-card">
|
||||
<text class="hero-card__title">{{heroTitle}}</text>
|
||||
<text class="hero-card__desc">{{heroDescription}}</text>
|
||||
<view class="stats-row">
|
||||
<view class="stat-pill" wx:for="{{summaryCards}}" wx:key="key">
|
||||
<text class="stat-pill__value">{{item.value}}</text>
|
||||
<text class="stat-pill__label">{{item.label}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="quick-grid">
|
||||
<view
|
||||
class="quick-card"
|
||||
wx:for="{{quickDeck}}"
|
||||
wx:key="key"
|
||||
data-route="{{item.route}}"
|
||||
bindtap="handleRouteTap"
|
||||
>
|
||||
<text class="quick-card__tag">{{item.domain === 'tcm' ? '中医继续学习' : '易学继续学习'}}</text>
|
||||
<text class="quick-card__title">{{item.title}}</text>
|
||||
<text class="quick-card__desc">{{item.description}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<text class="section-card__title">最近学习动作</text>
|
||||
<view
|
||||
class="timeline-item"
|
||||
wx:for="{{recentItems}}"
|
||||
wx:key="key"
|
||||
data-route="{{item.route}}"
|
||||
bindtap="handleRouteTap"
|
||||
>
|
||||
<view class="timeline-item__icon">读</view>
|
||||
<view class="timeline-item__body">
|
||||
<text class="timeline-item__title">{{item.title}}</text>
|
||||
<text class="timeline-item__desc">{{item.description}}</text>
|
||||
</view>
|
||||
<text class="timeline-item__arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
150
packages/learning/pages/center/index.wxss
Normal file
150
packages/learning/pages/center/index.wxss
Normal file
@@ -0,0 +1,150 @@
|
||||
page {
|
||||
min-height: 100%;
|
||||
background: linear-gradient(180deg, #f7f2ea 0%, #efe7dc 100%);
|
||||
}
|
||||
|
||||
.learning-page {
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
padding: 28rpx 20rpx 72rpx;
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.section-card,
|
||||
.quick-card {
|
||||
border: 1rpx solid rgba(84, 58, 29, 0.08);
|
||||
border-radius: 28rpx;
|
||||
background: rgba(255, 251, 244, 0.92);
|
||||
box-shadow: 0 10rpx 26rpx rgba(78, 50, 22, 0.06);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.hero-card__title,
|
||||
.section-card__title,
|
||||
.quick-card__title,
|
||||
.timeline-item__title {
|
||||
display: block;
|
||||
color: #2f261d;
|
||||
font-family: 'STSong', 'Songti SC', serif;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hero-card__desc,
|
||||
.quick-card__desc,
|
||||
.timeline-item__desc {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
color: #7b6d60;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 14rpx -5rpx 0;
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
box-sizing: border-box;
|
||||
width: 25%;
|
||||
padding: 5rpx;
|
||||
}
|
||||
|
||||
.stat-pill__value,
|
||||
.stat-pill__label {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-pill__value {
|
||||
padding: 12rpx 0 6rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
background: rgba(255, 250, 242, 0.8);
|
||||
color: #2f261d;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stat-pill__label {
|
||||
padding: 0 0 12rpx;
|
||||
border-radius: 0 0 18rpx 18rpx;
|
||||
background: rgba(255, 250, 242, 0.8);
|
||||
color: #7b6d60;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.quick-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 12rpx -6rpx 0;
|
||||
}
|
||||
|
||||
.quick-card {
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
margin-top: 12rpx;
|
||||
padding: 24rpx 18rpx;
|
||||
margin-left: 6rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.quick-card__tag {
|
||||
display: inline-block;
|
||||
padding: 8rpx 12rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(84, 58, 29, 0.08);
|
||||
color: #6d4d2f;
|
||||
font-size: 18rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quick-card__title {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
margin-top: 18rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid rgba(84, 58, 29, 0.08);
|
||||
}
|
||||
|
||||
.timeline-item:first-of-type {
|
||||
margin-top: 10rpx;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.timeline-item__icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(84, 58, 29, 0.08);
|
||||
color: #6d4d2f;
|
||||
font-size: 26rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timeline-item__body {
|
||||
flex: 1;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.timeline-item__arrow {
|
||||
color: #b4946a;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user