feat(staffchat): 朋友圈feed(作者卡+九宫格预览+点赞列表+滚动翻页,对齐云客)

Co-Authored-By: Claude <noreply@anthropic.com>

yunkes/src/components/staffchat/MomentsPane.vue

@@ -1,8 +1,310 @@
-<!-- 占位组件: Task 12 实现朋友圈视图,签名锁定如下。 -->
+<!-- 员工聊天窗口右列·朋友圈 feed(对齐云客 wechat-window 朋友圈 tab):
+     顶部账号名片(头像/昵称/微信号) + 帖卡流(作者→内容→九宫格→时间→点赞人) +
+     滚动到底翻页。根元素必须保持单 div——父组件 StaffChat 靠 attrs fallthrough
+     挂 sc-root__pane 列宽。图片按 OSS URL 直连渲染(moments API 不做 media 本地化)。 -->
 <script setup lang="ts">
-defineProps<{ ownerId: string }>()
+import { computed, nextTick, ref, watch } from 'vue'
+import { getMoments } from '@/api'
+import type { MomentsList, MomentsPost } from '@/api/types'
+import { formatTime } from '@/utils/format'
+
+const props = defineProps<{ ownerId: string }>()
+
+const PAGE_SIZE = 20
+
+const header = ref<MomentsList['header'] | null>(null)
+const items = ref<MomentsPost[]>([])
+const total = ref(0)
+const page = ref(1)
+const loading = ref(false)
+const errorMsg = ref<string | null>(null)
+/** 分页空页兜底: total 口径异常(如手动删行未更新 total)时防 ensureFilled 死循环。 */
+const exhausted = ref(false)
+/** feed 滚动容器(距底 <100px 触发翻页的监听目标)。 */
+const feedEl = ref<HTMLElement | null>(null)
+
+const hasMore = computed(() => !exhausted.value && items.value.length < total.value)
+
+/** 请求序号: ownerId 切换后在途旧响应整体丢弃(防竞态覆盖新员工的数据)。 */
+let seq = 0
+
+async function loadPage(p: number) {
+  const mySeq = ++seq
+  loading.value = true
+  errorMsg.value = null
+  try {
+    const res = await getMoments({ wechat_id: props.ownerId, page: p, page_size: PAGE_SIZE })
+    if (mySeq !== seq) return
+    header.value = res.header
+    total.value = res.total
+    items.value = p === 1 ? res.items : [...items.value, ...res.items]
+    page.value = p
+    if (res.items.length === 0) exhausted.value = true
+  } catch (e) {
+    if (mySeq !== seq) return
+    errorMsg.value = (e as Error).message
+    if (p === 1) items.value = []
+  } finally {
+    if (mySeq === seq) loading.value = false
+  }
+}
+
+function loadMore() {
+  if (loading.value || !hasMore.value) return
+  void loadPage(page.value + 1).then(ensureFilled)
+}
+
+/** 首屏不满一屏时没有 scroll 事件可触发——加载后主动检查补页。 */
+async function ensureFilled() {
+  await nextTick()
+  const el = feedEl.value
+  if (el && !loading.value && hasMore.value && el.scrollHeight <= el.clientHeight) {
+    loadMore()
+  }
+}
+
+async function reload() {
+  header.value = null
+  items.value = []
+  total.value = 0
+  page.value = 1
+  exhausted.value = false
+  await loadPage(1)
+  await ensureFilled()
+}
+watch(() => props.ownerId, () => void reload(), { immediate: true })
+
+/** 滚动到底判定: 距底 <100px 且空闲且有下一页。 */
+function onScroll() {
+  const el = feedEl.value
+  if (!el || loading.value || !hasMore.value) return
+  if (el.scrollHeight - el.scrollTop - el.clientHeight < 100) loadMore()
+}
+
+/** 帖子图片(过滤空串,空数组跳过九宫格渲染)。 */
+function postImages(p: MomentsPost): string[] {
+  return (p.image_urls ?? []).filter(u => !!u)
+}
+/** 帖子作者名: 帖子自带缺失时回退 header 昵称/ownerId。 */
+function authorName(p: MomentsPost): string {
+  return p.author_name || header.value?.nickname || props.ownerId
+}
+/** 点赞人名列表(空 name 剔除;空列表不渲染该行)。 */
+function praiseNames(p: MomentsPost): string[] {
+  return (p.praise_json ?? []).map(x => x?.name ?? '').filter(Boolean)
+}
+const headerInitial = computed(
+  () => header.value?.nickname?.slice(0, 1) || props.ownerId.slice(0, 1),
+)
 </script>
 
 <template>
-  <div class="yk-empty">朋友圈 — Task 12 实现</div>
+  <div class="sc-moments yk-panel-bg yk-panel-sep">
+    <!-- ── 顶部账号名片(nickname 空时 ownerId 兜底,对齐云客朋友圈顶部) ── -->
+    <div v-if="header" class="sc-moments__header">
+      <el-avatar :size="48" :src="header.avatar ?? undefined">{{ headerInitial }}</el-avatar>
+      <div class="sc-moments__hmeta">
+        <div class="sc-moments__hname">{{ header.nickname || props.ownerId }}</div>
+        <div class="sc-moments__hsub">
+          微信号：{{ header.alias || props.ownerId }}
+          <template v-if="total > 0"> · 共 {{ total }} 条</template>
+        </div>
+      </div>
+    </div>
+
+    <el-alert v-if="errorMsg" :title="errorMsg" type="error" :closable="false" />
+
+    <!-- ── feed 流(列内滚动,距底 100px 翻页) ── -->
+    <div
+      ref="feedEl"
+      class="sc-moments__feed"
+      v-loading="loading && items.length === 0"
+      @scroll="onScroll"
+    >
+      <div
+        v-if="!loading && items.length === 0 && !errorMsg"
+        class="yk-empty"
+      >该员工暂无朋友圈数据，请先运行 moments 抓取</div>
+
+      <div class="sc-moments__stream">
+        <article v-for="p in items" :key="p.id" class="sc-moments__post">
+          <div class="sc-moments__author">
+            <el-avatar :size="36" :src="p.author_avatar ?? header?.avatar ?? undefined">
+              {{ authorName(p).slice(0, 1) }}
+            </el-avatar>
+            <span class="sc-moments__aname">{{ authorName(p) }}</span>
+          </div>
+          <p v-if="p.content" class="sc-moments__content">{{ p.content }}</p>
+          <!-- 图片: 1 图大图,2+ 图 3 列九宫格;点击 el-image 全屏预览 -->
+          <el-image
+            v-if="postImages(p).length === 1"
+            class="sc-moments__img-single"
+            :src="postImages(p)[0]"
+            fit="cover"
+            lazy
+            preview-teleported
+            :preview-src-list="postImages(p)"
+            :initial-index="0"
+          />
+          <div v-else-if="postImages(p).length > 1" class="sc-moments__grid">
+            <div v-for="(u, i) in postImages(p)" :key="i" class="sc-moments__cell">
+              <el-image
+                :src="u"
+                fit="cover"
+                lazy
+                preview-teleported
+                :preview-src-list="postImages(p)"
+                :initial-index="i"
+              />
+            </div>
+          </div>
+          <div class="sc-moments__time">{{ formatTime(p.create_time) }}</div>
+          <div v-if="praiseNames(p).length" class="sc-moments__praise">
+            ❤ {{ praiseNames(p).join('; ') }}
+          </div>
+        </article>
+
+        <div v-if="loading && items.length > 0" class="sc-moments__more">加载中…</div>
+        <div v-else-if="!hasMore && items.length > 0" class="sc-moments__more">已到底</div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+/* ══ 朋友圈右列(墨玉主题,手法沿用 SessionPane) ══
+   点阵底/右缘玉绿线走全局 yk-panel-bg/yk-panel-sep(style.css);这里只写布局。 */
+.sc-moments {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+}
+
+/* ── 账号名片(顶部固定,随列不滚动) ── */
+.sc-moments__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid rgba(23, 29, 43, 0.05);
+}
+.sc-moments__header .el-avatar {
+  flex: none;
+  border-radius: 12px;
+  border: 1px solid rgba(23, 29, 43, 0.05);
+  box-shadow: 0 1px 3px rgba(23, 29, 43, 0.06);
+}
+.sc-moments__hname {
+  font-size: 15px;
+  font-weight: 600;
+  color: #2b3240;
+  line-height: 1.3;
+}
+.sc-moments__hsub {
+  margin-top: 3px;
+  font-size: 12px;
+  color: #8a94a4;
+}
+
+/* ── feed 流(列内滚动) ── */
+.sc-moments__feed {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px;
+}
+/* 限宽居中: 右列很宽时帖卡保持可读宽度(朋友圈单列流惯例) */
+.sc-moments__stream {
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+/* 帖卡(白底圆角,手法对齐 SessionPane 会话卡) */
+.sc-moments__post {
+  padding: 14px;
+  margin-bottom: 12px;
+  background: #fff;
+  border: 1px solid rgba(23, 29, 43, 0.05);
+  border-radius: 12px;
+  box-shadow: 0 1px 4px rgba(23, 29, 43, 0.04);
+}
+.sc-moments__author {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.sc-moments__author .el-avatar {
+  flex: none;
+  border-radius: 10px;
+  border: 1px solid rgba(23, 29, 43, 0.05);
+}
+.sc-moments__aname {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: #2b3240;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sc-moments__content {
+  margin: 10px 0 0;
+  font-size: 13.5px;
+  line-height: 1.65;
+  color: #2b3240;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 图片: 1 图大图(3:4 封面裁切),2+ 图 3 列方格 */
+.sc-moments__img-single {
+  width: 240px;
+  max-width: 100%;
+  aspect-ratio: 3 / 4;
+  margin-top: 10px;
+  border-radius: 8px;
+  display: block;
+}
+.sc-moments__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+  max-width: 320px;
+  margin-top: 10px;
+}
+.sc-moments__cell {
+  aspect-ratio: 1 / 1;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.sc-moments__cell .el-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.sc-moments__time {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #8a94a4;
+}
+.sc-moments__praise {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid rgba(23, 29, 43, 0.06);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--el-color-primary);
+  word-break: break-all;
+}
+
+/* 底部翻页状态行 */
+.sc-moments__more {
+  padding: 6px 0 2px;
+  font-size: 11.5px;
+  color: #8a94a4;
+  text-align: center;
+}
+</style>