feat: 新增瞬间页面、通用阴影样式，优化页面配置

1. 新增通用阴影样式工具类并引入全局样式
2. 新增moments瞬间页面并修改首页跳转指向
3. 为页面模板和瞬间页面添加下拉刷新、页面滚动等配置
4. 为halo瞬间api添加isHalo请求元信息
5. 优化links页面布局样式

src/api/halo-plugin/moment.ts

@@ -10,6 +10,9 @@ const EndpointBase = '/apis/api.moment.halo.run/v1alpha1/moments'
 export function queryMoments(params: any) {
   return http.Get<any>(`${EndpointBase}`, {
     params,
+    meta: {
+      isHalo: true,
+    },
   })
 }
 
@@ -19,5 +22,9 @@ export function queryMoments(params: any) {
  * @returns  获取瞬间详情响应参数
  */
 export function queryMomentByName(name: string) {
-  return http.Get<any>(`${EndpointBase}/${name}`, {})
+  return http.Get<any>(`${EndpointBase}/${name}`, {
+    meta: {
+      isHalo: true,
+    },
+  })
 }

src/pages-blog/page-template/page-template.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { queryLinks } from '@/api/halo-plugin/link'
+
 defineOptions({
   name: 'PageTemplate',
 })
@@ -6,8 +8,45 @@ defineOptions({
 definePage({
   style: {
     navigationBarTitleText: '页面模板',
+    navigationBarBackgroundColor: '#ffffff',
+    enablePullDownRefresh: true,
   },
 })
+
+const { loading, error, data, run } = useRequest<any, IPaginationParams>(queryLinks, { loadingToast: false, loadingToastContent: '加载中...', loadingToastMask: true })
+
+const { list: links, refresh } = useListData<any>({
+  params: {
+    page: 1,
+    size: 0,
+  },
+  loading: toRef(loading),
+  onPullDownRefresh: async (params, updateData) => {
+    await run({ ...params })
+    updateData({
+      error: error.value,
+      hasNext: data.value?.hasNext,
+      items: data.value?.items ?? [],
+    })
+  },
+  onReachBottom: async (params, updateData) => {
+    await run({ ...params })
+    updateData({
+      error: error.value,
+      hasNext: data.value?.hasNext,
+      items: data.value?.items ?? [],
+    })
+  },
+})
+
+onLoad(() => {
+  refresh()
+})
+
+onMounted(() => {
+})
+
+onPageScroll(() => {})
 </script>
 
 <template>

src/pages/index/index.vue

@@ -15,7 +15,7 @@ onLoad(() => {
   console.log('index onLoad')
   // 默认跳转首页
   // uni.switchTab({ url: '/pages/home/home' })
-  uni.switchTab({ url: '/pages/links/links' })
+  uni.switchTab({ url: '/pages/moments/moments' })
 })
 </script>
 

src/pages/links/links.vue

@@ -149,7 +149,7 @@ onLoad(async () => {
 </script>
 
 <template>
-  <view class="min-h-screen w-full bg-page2">
+  <view class="min-h-screen w-full flex flex-col bg-page2">
     <!-- <view>
       <view>分组数据</view>
       <view>{{ dataGroups }}</view>

src/pages/moments/moments.vue

@@ -1,4 +1,10 @@
 <script lang="ts" setup>
+import { cover } from '@/utils/imageHelper'
+import { copy } from '@/utils/base/clipboard'
+import { queryMoments } from '@/api/halo-plugin/moment'
+import { timeFrom } from '@/utils/base/timeFrom'
+import { timeFormat } from '@/utils/base/timeFormat'
+
 defineOptions({
   name: 'Moments',
 })
@@ -6,12 +12,145 @@ defineOptions({
 definePage({
   style: {
     navigationBarTitleText: '瞬间',
+    navigationBarBackgroundColor: '#ffffff',
+    enablePullDownRefresh: true,
   },
 })
+
+const { loading, error, data, run } = useRequest<any, IPaginationParams>(queryMoments, { loadingToast: false, loadingToastContent: '加载中...', loadingToastMask: true })
+
+const { list: moments, refresh } = useListData<any>({
+  params: {
+    page: 1,
+    size: 10,
+  },
+  loading: toRef(loading),
+  onPullDownRefresh: async (params, updateData) => {
+    await run({ ...params })
+    updateData({
+      error: error.value,
+      hasNext: data.value?.hasNext,
+      items: data.value?.items ?? [],
+    })
+  },
+  onReachBottom: async (params, updateData) => {
+    await run({ ...params })
+    updateData({
+      error: error.value,
+      hasNext: data.value?.hasNext,
+      items: data.value?.items ?? [],
+    })
+  },
+})
+
+onLoad(() => {
+  refresh()
+})
+
+onMounted(() => {
+})
+
+onPageScroll(() => { })
 </script>
 
 <template>
-  <view class="min-h-screen w-full flex flex-col items-center justify-center gap-y-6 bg-page">
+  <view class="min-h-screen w-full flex flex-col bg-page2">
-    瞬间页面
+    <!-- 瞬间列表 -->
+    <view v-if="moments.length !== 0" class="box-border w-full flex flex-col gap-y-4 overflow-hidden p-4 pb-0">
+      <view v-for="moment in moments" :key="moment.metadata.name" class="flex">
+        <!-- 左边区域 -->
+        <view class="relative h-auto w-4 flex shrink-0 items-center justify-center">
+          <view class="uh-shadow-md h-full w-2px bg-white" />
+          <view
+            class="uh-shadow-md absolute left-1/2 top-0 box-border h-4 w-4 border-2 border-white rounded-full border-solid bg-[#1A1A1A]"
+            :style="{
+              transform: 'translateX(-50%)',
+            }"
+          />
+        </view>
+        <!-- 瞬间卡片 -->
+        <view class="box-border flex-1 pl-2">
+          <view class="mb-2 text-sm text-gray-900 font-semibold">
+            {{ timeFormat(moment.spec.releaseTime) }}
+          </view>
+          <view
+            class="uh-shadow-card box-border w-full flex flex-1 flex-col items-center justify-center gap-y-2 overflow-hidden border-2 border-white rounded-xl border-solid bg-white p-4"
+          >
+            <!-- 用户信息 -->
+            <view class="box-border w-full flex items-center justify-between gap-x-4">
+              <view
+                class="uh-shadow-md box-border h-8 w-8 shrink-0 overflow-hidden border-2 border-white rounded-xl border-solid bg-white"
+              >
+                <image :src="cover(moment.owner.avatar)" mode="aspectFill" class="h-full w-full" />
+              </view>
+              <view class="flex flex-1 flex-col gap-y-1">
+                <view class="text-sm text-gray-900 font-bold">
+                  {{ moment.owner.displayName }}
+                </view>
+                <view v-if="false" class="text-xs text-gray-400">
+                  {{ timeFrom(moment.spec.releaseTime) }}
+                </view>
+              </view>
+              <view class="shrink-0">
+                <view
+                  class="uh-shadow-md rounded-3xl bg-[#1A1A1A] px-4 py-1.5 text-[11px] text-white"
+                >
+                  详情
+                </view>
+              </view>
+            </view>
+            <!-- 瞬间内容 -->
+            <view class="line-clamp-6 w-full text-xs text-gray-900 leading-relaxed">
+              <rich-text :nodes="moment.spec.content.raw" />
+            </view>
+
+            <!-- 瞬间附件 -->
+            <view class="w-full">
+            <!-- 如果有附件   -->
+            </view>
+            <!-- 分割线 -->
+            <view class="h-1px w-full bg-gray-50" />
+            <!-- 底部信息：标签、时间、点赞数、评论数 -->
+            <view class="w-full flex items-center justify-between gap-x-2 text-xs text-gray-500 leading-relaxed">
+              <template v-if="moment.spec.tags.length !== 0">
+                <view class="shrink-0">
+                  <view
+                    v-for="tag in moment.spec.tags" :key="tag"
+                    class="text-xs text-gray-600"
+                  >
+                    {{ tag }}
+                  </view>
+                </view>
+                <view class="shrink-0 text-xs text-gray-600">
+                  ·
+                </view>
+              </template>
+
+              <view class="text-[11px] text-gray-600">
+                点赞 {{ moment.stats.upvote }} 次
+              </view>
+              <view class="shrink-0 text-xs text-gray-600">
+                ·
+              </view>
+              <view class="text-[11px] text-gray-600">
+                评论 {{ moment.stats.totalComment }} 次
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-else class="w-full flex flex-1 items-center justify-center">
+      <wd-empty icon="no-content" tip="暂无瞬间">
+        <template #image>
+          <wd-icon name="empty" color="#1A1A1A" :size="52" />
+        </template>
+      </wd-empty>
+    </view>
+
+    <!-- 底部导航占位 -->
+    <view class="w-full shrink-0">
+      <uh-tabbar-page-placeholder />
+    </view>
   </view>
 </template>

src/style/index.scss

@@ -1,5 +1,6 @@
 // 测试用的 iconfont，可生效
 @import './iconfont.css';
+@import './uh-styles.css';
 
 .test {
   // 可以通过 @apply 多个样式封装整体样式

src/style/uh-styles.css

@@ -0,0 +1,11 @@
+.uh-shadow-xs {
+  box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.035);
+}
+
+.uh-shadow-md {
+  box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.075);
+}
+
+.uh-shadow-card {
+  box-shadow: 0 16rpx 60rpx rgba(0, 0, 0, 0.04);
+}