Initial commit

miniprogram/pages/story/story.json

@@ -0,0 +1 @@
+{ "navigationStyle": "custom", "usingComponents": {} }

miniprogram/pages/story/story.ts

@@ -0,0 +1,60 @@
+import { getAvatarGradient, formatTime } from '../../utils/format'
+
+const DURATION = 5000
+
+Page({
+  data: {
+    stories: [] as any[],
+    current: 0,
+    progress: 0,
+    currentStory: {} as any,
+  },
+
+  _timer: null as any,
+
+  onLoad(query: { id?: string }) {
+    this.loadStory(query.id || '')
+  },
+
+  onUnload() {
+    if (this._timer) clearInterval(this._timer)
+  },
+
+  async loadStory(id: string) {
+    try {
+      const res = await wx.cloud.callFunction({ name: 'getStory', data: { id } }) as any
+      const stories = (res.result?.data || []).map((s: any) => ({
+        ...s,
+        gradient: getAvatarGradient(s.authorId),
+        timeText: formatTime(s.createdAt),
+      }))
+      this.setData({ stories, currentStory: stories[0] || {} })
+      this.startProgress()
+    } catch {}
+  },
+
+  startProgress() {
+    if (this._timer) clearInterval(this._timer)
+    const interval = 100
+    let elapsed = 0
+    this._timer = setInterval(() => {
+      elapsed += interval
+      const pct = Math.min(100, (elapsed / DURATION) * 100)
+      this.setData({ progress: pct })
+      if (elapsed >= DURATION) this.onNext()
+    }, interval)
+  },
+
+  onNext() {
+    const { current, stories } = this.data
+    if (current + 1 >= stories.length) {
+      wx.navigateBack()
+      return
+    }
+    const next = current + 1
+    this.setData({ current: next, progress: 0, currentStory: stories[next] })
+    this.startProgress()
+  },
+
+  onClose() { wx.navigateBack() },
+})

miniprogram/pages/story/story.wxml

@@ -0,0 +1,26 @@
+<view class="story-page" bindtap="onNext">
+  <!-- 进度条 -->
+  <view class="progress-row">
+    <view wx:for="{{stories}}" wx:key="index" class="progress-bar">
+      <view class="progress-fill" style="width: {{index < current ? '100%' : (index === current ? progress + '%' : '0%')}}"></view>
+    </view>
+  </view>
+  <!-- 作者头 -->
+  <view class="story-nav">
+    <view class="story-avatar" style="background: {{currentStory.gradient}}">
+      <text>{{currentStory.authorName[0]}}</text>
+    </view>
+    <view class="story-meta">
+      <text class="story-author">{{currentStory.authorName}}</text>
+      <text class="story-time">{{currentStory.timeText}}</text>
+    </view>
+    <view class="close-btn" catchtap="onClose">✕</view>
+  </view>
+  <!-- 内容 -->
+  <view class="story-content">
+    <image wx:if="{{currentStory.imageUrl}}" class="story-img" src="{{currentStory.imageUrl}}" mode="aspectFill" />
+    <view class="story-text-wrap">
+      <text class="story-text">{{currentStory.text}}</text>
+    </view>
+  </view>
+</view>

miniprogram/pages/story/story.wxss

@@ -0,0 +1,13 @@
+.story-page { width: 100vw; height: 100vh; background: #111; position: relative; overflow: hidden; }
+.progress-row { position: absolute; top: calc(env(safe-area-inset-top, 44rpx) + 16rpx); left: 16rpx; right: 16rpx; display: flex; gap: 6rpx; z-index: 10; }
+.progress-bar { flex: 1; height: 4rpx; background: rgba(255,255,255,0.35); border-radius: 2rpx; overflow: hidden; }
+.progress-fill { height: 100%; background: #fff; border-radius: 2rpx; transition: width 0.1s linear; }
+.story-nav { position: absolute; top: calc(env(safe-area-inset-top, 44rpx) + 28rpx); left: 20rpx; right: 20rpx; display: flex; align-items: center; gap: 14rpx; z-index: 10; }
+.story-avatar { width: 72rpx; height: 72rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 800; color: rgba(39,34,53,0.72); border: 3rpx solid rgba(255,255,255,0.72); }
+.story-author { display: block; font-size: 28rpx; font-weight: 800; color: #fff; }
+.story-time { display: block; font-size: 22rpx; color: rgba(255,255,255,0.72); }
+.close-btn { margin-left: auto; font-size: 40rpx; color: rgba(255,255,255,0.80); padding: 10rpx; }
+.story-content { width: 100%; height: 100%; }
+.story-img { width: 100%; height: 100%; }
+.story-text-wrap { position: absolute; bottom: 100rpx; left: 28rpx; right: 28rpx; background: rgba(0,0,0,0.42); border-radius: 20rpx; padding: 20rpx 24rpx; }
+.story-text { font-size: 32rpx; color: #fff; font-weight: 700; line-height: 1.6; }