gengxin

TongjiUniApp/native/tang-detective/pages/cast/cast.wxml

@@ -0,0 +1,119 @@
+<view class="safe-shell cast-shell font-{{fontScale}}">
+  <view class="cast-head paper-panel">
+    <button class="quiet-button cast-back" bindtap="goBack" aria-label="返回封面">‹ 封面</button>
+    <view class="cast-heading-copy">
+      <text class="eyebrow">桂香里的熟面孔</text>
+      <text class="cast-title">人物画谱</text>
+    </view>
+    <view class="cast-head-actions">
+      <button
+        class="quiet-button font-button"
+        bindtap="toggleFont"
+        aria-label="{{fontScale === 'large' ? '把人物画谱文字再放大' : '恢复标准大字'}}"
+      >
+        {{fontScale === 'large' ? '再大一点' : '标准大字'}}
+      </button>
+      <view class="capsule-safe-space" aria-hidden="true"></view>
+    </view>
+  </view>
+
+  <scroll-view
+    class="cast-scroll"
+    scroll-y
+    enhanced
+    show-scrollbar="{{true}}"
+    lower-threshold="24"
+    bindscrolltolower="markListEnd"
+    aria-label="桂香人物列表，可上下滑动"
+  >
+    <view class="cast-intro">
+      <text>点开一位人物，先认清他和家里人的关系，再看看他在桂香里的故事。</text>
+    </view>
+    <view class="cast-grid">
+      <view
+        wx:for="{{cast}}"
+        wx:key="id"
+        class="cast-card paper-panel"
+        aria-role="button"
+        aria-label="{{item.name}}，{{item.title}}"
+        hover-class="cast-card-hover"
+        data-id="{{item.id}}"
+        bindtap="selectCharacter"
+      >
+        <view class="cast-image-wrap">
+          <view class="cast-portrait-window poses-{{item.poseCount}}">
+            <image
+              class="cast-image"
+              src="{{item.asset}}"
+              mode="aspectFit"
+              aria-label="{{item.name}}的全身像"
+            ></image>
+          </view>
+        </view>
+        <view class="cast-copy">
+          <view class="name-row">
+            <text class="cast-name">{{item.name}}</text>
+            <text class="eras">{{item.eras}}</text>
+          </view>
+          <text class="cast-role-title">{{item.title}}</text>
+          <text class="cast-relationship">{{item.relationship}}</text>
+          <text class="cast-hint">点开看故事</text>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+
+  <view class="list-scroll-guide" aria-live="polite">
+    <text>{{castListEnded ? '人物都看见了' : '向下翻，还有更多人物'}}</text>
+    <text class="scroll-guide-mark" aria-hidden="true">{{castListEnded ? '✓' : '⌄'}}</text>
+  </view>
+
+  <view wx:if="{{selected}}" class="modal-backdrop" bindtap="closeCharacter">
+    <view
+      class="character-modal paper-panel"
+      catchtap="noop"
+      aria-role="dialog"
+      aria-label="{{selected.name}}的人物故事"
+    >
+      <button class="modal-close" bindtap="closeCharacter" aria-label="关闭人物故事">关闭</button>
+      <view class="modal-image-wrap">
+        <view class="modal-portrait-window poses-{{selected.poseCount}}">
+          <image
+            class="modal-image"
+            src="{{selected.asset}}"
+            mode="aspectFit"
+            aria-label="{{selected.name}}的全身像"
+          ></image>
+        </view>
+      </view>
+      <view class="modal-copy">
+        <view class="modal-head">
+          <view class="modal-heading">
+            <text class="eyebrow">{{selected.eras}} · {{selected.title}}</text>
+            <text class="modal-name">{{selected.name}}</text>
+          </view>
+        </view>
+        <scroll-view
+          class="modal-story-scroll"
+          scroll-y
+          enhanced
+          bounces="{{false}}"
+          show-scrollbar="{{true}}"
+          aria-label="{{selected.name}}的人物故事正文，可上下滑动"
+        >
+          <view class="modal-story">
+            <text class="section-label">他和大家的关系</text>
+            <text class="modal-text">{{selected.relationship}}</text>
+            <text class="section-label">他在桂香里的故事</text>
+            <text class="modal-text">{{selected.readerRole}}</text>
+            <text class="section-label">衣着和模样</text>
+            <text class="modal-text">{{selected.readerVisual}}</text>
+          </view>
+        </scroll-view>
+        <view class="modal-footer">
+          <button class="primary-button modal-done" bindtap="closeCharacter">看完了，返回人物谱</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>