uni-halo/src/pages/moments/moments.vue

<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',
})

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 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-xs 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>