feat: migrate static pages to native tabbar

packages/tcm/pages/section/index.js

@@ -0,0 +1,97 @@
+const { resolveScene } = require('../../../../utils/static-ux/shared')
+const { ROUTES, openStaticRoute } = require('../../../../utils/static-ux/route-map')
+
+const READER_SURFACES = Object.freeze({
+  'reader-a': {
+    chapterTitle: '上古天真论',
+    passages: [
+      '上古之人，其知道者，法于阴阳，和于术数。',
+      '食饮有节，起居有常，不妄作劳，故能形与神俱。'
+    ]
+  },
+  'reader-b': {
+    chapterTitle: '太阳病篇',
+    passages: [
+      '伤寒者，太阳病也。',
+      '太阳之为病，脉浮，头项强痛而恶寒。'
+    ]
+  }
+})
+
+function createTcmSectionPageData(rawScene) {
+  const scene = resolveScene(rawScene, ['reader-a', 'reader-b'], 'reader-a')
+  const surface = READER_SURFACES[scene]
+
+  return {
+    title: '典籍阅读',
+    scene,
+    chapterTitle: surface.chapterTitle,
+    passages: [...surface.passages],
+    toolbarVisible: false,
+    settings: {
+      fontScale: 1,
+      lineMode: 'normal',
+      bgMode: 'default'
+    },
+    lineModes: [
+      { key: 'compact', label: '紧凑' },
+      { key: 'normal', label: '适中' },
+      { key: 'relaxed', label: '宽松' }
+    ],
+    backgroundModes: [
+      { key: 'default', label: '默认' },
+      { key: 'paper', label: '纸张' },
+      { key: 'care', label: '护眼' }
+    ],
+    catalogItems: [
+      {
+        key: 'reader-a',
+        title: '上古天真论',
+        route: `${ROUTES.tcm.section}?scene=reader-a`
+      },
+      {
+        key: 'reader-b',
+        title: '太阳病篇',
+        route: `${ROUTES.tcm.section}?scene=reader-b`
+      }
+    ]
+  }
+}
+
+function showNavigate(route) {
+  openStaticRoute(route, wx)
+}
+
+Page({
+  data: createTcmSectionPageData('reader-a'),
+
+  onLoad(options) {
+    this.setData(createTcmSectionPageData(options.scene))
+  },
+
+  handleToolbarToggle() {
+    this.setData({
+      toolbarVisible: !this.data.toolbarVisible
+    })
+  },
+
+  handleLineModeTap(event) {
+    this.setData({
+      'settings.lineMode': event.currentTarget.dataset.mode
+    })
+  },
+
+  handleBackgroundTap(event) {
+    this.setData({
+      'settings.bgMode': event.currentTarget.dataset.mode
+    })
+  },
+
+  handleCatalogTap(event) {
+    showNavigate(event.currentTarget.dataset.route)
+  }
+})
+
+module.exports = {
+  createTcmSectionPageData
+}

packages/tcm/pages/section/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "典籍阅读",
+  "navigationBarBackgroundColor": "#f8ecd8",
+  "navigationBarTextStyle": "black"
+}

packages/tcm/pages/section/index.wxml

@@ -0,0 +1,49 @@
+<view class="reading-page reading-page--{{settings.bgMode}}">
+  <view class="reading-page__article" bindtap="handleToolbarToggle">
+    <text class="reading-page__chapter">{{chapterTitle}}</text>
+    <text class="reading-page__passage" wx:for="{{passages}}" wx:key="index">{{item}}</text>
+  </view>
+
+  <view wx:if="{{toolbarVisible}}" class="reading-toolbar">
+    <text class="reading-toolbar__title">{{title}}</text>
+
+    <view class="reading-toolbar__group">
+      <text class="reading-toolbar__label">行间距</text>
+      <view
+        class="reading-toolbar__pill {{settings.lineMode === item.key ? 'reading-toolbar__pill--active' : ''}}"
+        wx:for="{{lineModes}}"
+        wx:key="key"
+        data-mode="{{item.key}}"
+        bindtap="handleLineModeTap"
+      >
+        {{item.label}}
+      </view>
+    </view>
+
+    <view class="reading-toolbar__group">
+      <text class="reading-toolbar__label">背景</text>
+      <view
+        class="reading-toolbar__pill {{settings.bgMode === item.key ? 'reading-toolbar__pill--active' : ''}}"
+        wx:for="{{backgroundModes}}"
+        wx:key="key"
+        data-mode="{{item.key}}"
+        bindtap="handleBackgroundTap"
+      >
+        {{item.label}}
+      </view>
+    </view>
+
+    <view class="reading-toolbar__group">
+      <text class="reading-toolbar__label">目录</text>
+      <view
+        class="catalog-item"
+        wx:for="{{catalogItems}}"
+        wx:key="key"
+        data-route="{{item.route}}"
+        bindtap="handleCatalogTap"
+      >
+        {{item.title}}
+      </view>
+    </view>
+  </view>
+</view>

packages/tcm/pages/section/index.wxss

@@ -0,0 +1,102 @@
+page {
+  min-height: 100%;
+  background: #f8f1e6;
+}
+
+.reading-page {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 0 0 40rpx;
+}
+
+.reading-page--default {
+  background: #f8f1e6;
+}
+
+.reading-page--paper {
+  background: #f4ead1;
+}
+
+.reading-page--care {
+  background: #eef4e8;
+}
+
+.reading-page__article {
+  padding: 72rpx 40rpx 48rpx;
+}
+
+.reading-page__chapter {
+  display: block;
+  color: #2c2419;
+  font-family: 'STSong', 'Songti SC', serif;
+  font-size: 40rpx;
+  font-weight: 700;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.reading-page__passage {
+  display: block;
+  margin-top: 24rpx;
+  color: #3b3027;
+  font-size: 30rpx;
+  line-height: 1.9;
+  text-align: justify;
+}
+
+.reading-toolbar {
+  margin: 0 20rpx;
+  padding: 24rpx;
+  border: 1rpx solid rgba(118, 83, 42, 0.08);
+  border-radius: 28rpx;
+  background: rgba(255, 251, 244, 0.96);
+  box-shadow: 0 18rpx 42rpx rgba(86, 58, 25, 0.08);
+}
+
+.reading-toolbar__title,
+.reading-toolbar__label {
+  display: block;
+  color: #2c2419;
+}
+
+.reading-toolbar__title {
+  font-family: 'STSong', 'Songti SC', serif;
+  font-size: 32rpx;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.reading-toolbar__group {
+  margin-top: 20rpx;
+}
+
+.reading-toolbar__label {
+  font-size: 24rpx;
+  line-height: 1.5;
+}
+
+.reading-toolbar__pill {
+  display: inline-block;
+  margin: 10rpx 8rpx 0 0;
+  padding: 12rpx 18rpx;
+  border-radius: 999rpx;
+  background: rgba(111, 66, 22, 0.08);
+  color: #6f4216;
+  font-size: 22rpx;
+  line-height: 1;
+}
+
+.reading-toolbar__pill--active {
+  background: linear-gradient(135deg, #9a622d 0%, #6f4216 100%);
+  color: #fff8ef;
+}
+
+.catalog-item {
+  margin-top: 12rpx;
+  padding: 18rpx 20rpx;
+  border-radius: 20rpx;
+  background: rgba(255, 254, 250, 0.94);
+  color: #4f3e2e;
+  font-size: 24rpx;
+  line-height: 1.5;
+}