feat(media-account): 添加作品详情页面并优化相关组件

- 新增 `node-detail` 作品详情页面 - 优化 `account-detail` 页面的标题和字段 - 更新 `common-select` 组件，添加 `dropdownVisible
2025-09-22 16:05:47 +08:00
parent 0b4b6b85e5
commit 07b57f0d59
9 changed files with 400 additions and 17 deletions
--- a/src/components/common-select/index.vue
+++ b/src/components/common-select/index.vue
@ -13,6 +13,7 @@
    showArrow
    :maxTagCount="maxTagCount"
    @change="handleChange"
+    @dropdownVisibleChange="onDropdownVisibleChange"
  >
    <Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
      {{ item.name }}
@ -45,7 +46,7 @@ const props = defineProps({
  maxTagCount: {
    type: Number,
    default: 3,
-  },  
+  },
  allClear: {
    type: Boolean,
    default: true,
@ -53,10 +54,10 @@ const props = defineProps({
  allowSearch: {
    type: Boolean,
    default: false,
-  }
+  },
 });

-const emits = defineEmits(['update:modelValue', 'change']);
+const emits = defineEmits(['update:modelValue', 'change', 'dropdownVisibleChange']);

 const selectedValues = ref(props.multiple ? [] : '');

@ -76,4 +77,7 @@ const handleChange = (value) => {
  selectedValues.value = value;
  emits('change', value);
 };
+const onDropdownVisibleChange = (visible) => {
+  emits('dropdownVisibleChange', visible);
+};
 </script>
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/src/router/routes/modules/propertyMarketing.ts
@ -71,7 +71,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
          requireLogin: true,
          roles: ['*'],
        },
-        component: () => import('@/views/property-marketing/media-account/account-dashboard/index.vue'),  
+        component: () => import('@/views/property-marketing/media-account/account-dashboard/index.vue'),
      },
      {
        path: 'detail/:id',
@ -86,6 +86,19 @@ const COMPONENTS: AppRouteRecordRaw[] = [
        },
        component: () => import('@/views/property-marketing/media-account/account-detail/index.vue'),
      },
+      {
+        path: 'note-detail/:id',
+        name: 'MediaAccountNoteDetails',
+        meta: {
+          locale: '作品详情',
+          requiresAuth: true,
+          requireLogin: true,
+          roles: ['*'],
+          hideInMenu: true,
+          activeMenu: 'MediaAccountAccountDashboard',
+        },
+        component: () => import('@/views/property-marketing/media-account/node-detail/index.vue'),
+      },
    ],
  },
  // {
@ -121,7 +134,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
  //         requireLogin: true,
  //         roles: ['*'],
  //       },
-  //       component: () => import('@/views/property-marketing/put-account/account-data/index.vue'), 
+  //       component: () => import('@/views/property-marketing/put-account/account-data/index.vue'),
  //     },
  //     {
  //       path: 'account-dashboard',
--- a/src/styles/mixins/index.scss
+++ b/src/styles/mixins/index.scss
@ -1 +1 @@
-@import "./ellipsis.scss"
+@import './ellipsis.scss';
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
@ -8,7 +8,7 @@
      <div class="flex items-center">
        <span class="cts !text-18px !lh-26px mr-4px title">作品列表</span>
        <Tooltip title="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
-          <icon-question-circle size="16" class="color-#737478" />
+          <icon-question-circle class="color-#737478" size="14" />
        </Tooltip>
      </div>
    </div>
@ -68,7 +68,7 @@
        <template #title>
          <span class="cts mr-4px">{{ column.title }}</span>
          <Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
-            <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+            <icon-question-circle class="tooltip-icon color-#737478" size="14" />
          </Tooltip>
        </template>
        <template #customRender="{ record }">
@ -79,7 +79,12 @@
            {{ formatNumberShow({ value: record.view_number * 10, showExactValue: true }) }}
          </template>
          <template v-else-if="column.dataIndex === 'title'">
-            <TextoverTips :context="record.title" />
+            <Tooltip placement="top" title="查看作品详情">
+              <p class="cursor-pointer hover:color-#6D4CFE title" @click="() => goNoteDetail(record)">
+                {{ record.title }}
+              </p>
+            </Tooltip>
+            <!--            <TextoverTips :context="record.title" />-->
          </template>
          <template v-else>
            {{ formatTableField(column, record, true) }}
@ -108,12 +113,13 @@
 <script setup>
 import { Button, Input, Tooltip, Table, Pagination, DatePicker } from 'ant-design-vue';
 import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';
 import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
-import TextoverTips from '@/components/text-over-tips/index.vue';
+// import TextoverTips from '@/components/text-over-tips/index.vue';

 const route = useRoute();
+const router = useRouter();
 const id = route.params.id;
 const dataSource = ref([]);
 const published_at = ref([]);
@ -171,6 +177,12 @@ const getData = async () => {
  }
 };

+const goNoteDetail = (record) => {
+  router.push({
+    name: 'MediaAccountNoteDetails',
+  });
+};
+
 onMounted(() => {
  getData();
 });
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
@ -19,4 +19,8 @@
      }
    }
  }
+
+  .title {
+    @include ellipsis;
+  }
 }
--- a/src/views/property-marketing/media-account/account-detail/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/index.vue
@ -6,7 +6,7 @@
  <div class="account-detail-wrap">
    <div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
      <icon-left size="16" />
-      <spa class="cts title ml-8px">账号列表</spa>
+      <span class="cts title ml-8px">账号列表</span>
    </div>
    <AccountInfo />
    <NoteTable />
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
@ -46,6 +46,7 @@
          :multiple="false"
          :options="operators"
          @change="handleSearch"
+          @dropdownVisibleChange="getOperators"
        />
      </div>
    </div>
@ -54,10 +55,10 @@
        <span class="label">分组</span>
        <CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" class="!w-200px" />
      </div>
-      <div class="filter-row-item">
-        <span class="label">所属项目</span>
-        <CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" class="!w-200px" />
-      </div>
+      <!--      <div class="filter-row-item">-->
+      <!--        <span class="label">所属项目</span>-->
+      <!--        <CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" class="!w-200px" />-->
+      <!--      </div>-->
      <div class="filter-row-item">
        <span class="label">标签</span>
        <CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" class="!w-320px" />
@ -150,7 +151,7 @@ onMounted(() => {
  getTags();
  getGroups();
  getOperators();
-  getProjects();
+  // getProjects();
 });

 defineExpose({
--- a/src/views/property-marketing/media-account/node-detail/index.vue
+++ b/src/views/property-marketing/media-account/node-detail/index.vue
@ -0,0 +1,320 @@
+<template>
+  <div class="note-detail-wrap h-full flex flex-col">
+    <div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
+      <icon-left size="16" />
+      <span class="cts title ml-8px">账号详情</span>
+    </div>
+
+    <!--作品详情-->
+    <div class="bg-#fff rounded-8px px-24px pb-20px flex-1 flex flex-col mb-16px">
+      <div class="title-row">
+        <div class="flex items-center">
+          <span class="cts !text-18px !lh-26px mr-4px bold">作品详情</span>
+          <Tooltip title="展示作品的标题、图文、视频等详细内容">
+            <icon-question-circle class="color-#737478" size="14" />
+          </Tooltip>
+        </div>
+      </div>
+      <p class="mt-16px cts bold !text-24px !lh-32px">挖到宝了！这个平价好物让我素颜出门都自信✨</p>
+      <div class="mt-16px">
+        <ImagePreviewGroup>
+          <Image
+            :height="100"
+            :width="100"
+            class="rounded-8px mr-8px"
+            src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"
+          />
+          <Image
+            :height="100"
+            :width="100"
+            class="rounded-8px mr-8px"
+            src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"
+          />
+        </ImagePreviewGroup>
+      </div>
+      <p class="mt-16px cts">
+        谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 ——
+        质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+        最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3
+        瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+        （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说
+        “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 ——
+        质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+        最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3
+        瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+        （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说
+        “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 ——
+        质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+        最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3
+        瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+        （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说
+        “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 ——
+        质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+        最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3
+        瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）
+        #电影票 #电影分享 #省钱小妙招 #电影票 #电影分享 #省钱小妙招
+      </p>
+    </div>
+
+    <!--评论列表-->
+    <div class="bg-#fff rounded-8px pb-12px h-422px flex flex-col mb-16px">
+      <div class="title-row !px-24px">
+        <div class="flex items-center">
+          <span class="cts !text-18px !lh-26px mr-4px bold">评论列表</span>
+          <Tooltip title="展示用户对作品的评论">
+            <icon-question-circle class="color-#737478" size="14" />
+          </Tooltip>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto !px-24px">
+        <div v-for="(item, index) in comments" :key="index" class="flex items-start justify-between mb-8px">
+          <TextoverTips :context="item.user" class="cts !color-#737478 !w-120px mr-20px" />
+          <div class="flex-1 flex justify-between items-start">
+            <div class="flex-1 flex items-start">
+              <p class="mr-4px cts">{{ item.content }}</p>
+              <p class="cts !color-#737478 flex-shrink-0 num">{{ item.time }}</p>
+            </div>
+            <TextoverTips
+              :context="`${item.likes}点赞 ${item.replies}回复`"
+              class="cts !color-#737478 ml-20px !w-fit max-w-200px"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--作品数据-->
+    <div class="bg-#fff rounded-8px px-24px pb-20px h-184px flex flex-col">
+      <div class="title-row">
+        <div class="flex items-center">
+          <span class="cts !text-18px !lh-26px mr-4px bold">作品数据</span>
+          <Tooltip title="展示作品的曝光量、点赞量等数据指标">
+            <icon-question-circle class="color-#737478" size="14" />
+          </Tooltip>
+        </div>
+      </div>
+      <div class="flex-1 grid grid-cols-4 gap-24px">
+        <div v-for="(item, index) in noteData" :key="index">
+          <div class="flex items-center mb-4px">
+            <span class="cts !color-#737478 mr-4px">{{ item.label }}</span>
+            <Tooltip :title="item.tooltip">
+              <icon-question-circle class="color-#737478" size="16" />
+            </Tooltip>
+          </div>
+          <span class="cts num">{{ formatNumberShow(data[item.prop]) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import { Tooltip, ImagePreviewGroup, Image } from 'ant-design-vue';
+import TextoverTips from '@/components/text-over-tips/index.vue';
+import ImgLazyLoad from '@/components/img-lazy-load';
+
+import { exactFormatTime, formatNumberShow } from '@/utils/tools';
+
+const router = useRouter();
+
+const handleBack = () => {
+  router.go(-1);
+};
+
+const data = {
+  exposure_number: 424242,
+  view_number: 424242,
+  like_number: 424242,
+  collect_number: 424242,
+  comment_number: 424242,
+  share_number: 424242,
+  cover_click_rate: 424242,
+};
+const noteData = [
+  { label: '曝光量', prop: 'exposure_number', tooltip: '内容被展示给用户的总次数，不代表用户实际观看。' },
+  {
+    label: '观看量',
+    prop: 'view_number',
+    tooltip: '用户点击内容并实际观看的次数，是内容实际触达的重要指标。',
+  },
+  {
+    label: '点赞量',
+    prop: 'like_number',
+    tooltip: '单篇笔记获得的点赞总数，反映用户喜好程度。',
+  },
+  {
+    label: '收藏量',
+    prop: 'collect_number',
+    tooltip: '用户将内容保存到收藏夹的次数，代表内容被认可为“值得保留”。',
+  },
+  {
+    label: '评论数',
+    prop: 'comment_number',
+    tooltip: '内容下方用户留言的总数，体现用户参与度与讨论热度。',
+  },
+  {
+    label: '分享量',
+    prop: 'share_number',
+    tooltip: '内容被转发或分享至其他平台或私信的次数，代表外扩传播意愿。',
+  },
+  {
+    label: '点击率',
+    prop: 'cover_click_rate',
+    tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
+  },
+];
+const comments = [
+  {
+    id: 1,
+    user: '小红薯650EC5A...',
+    content: '太麻烦了，有没有简单一点的方法',
+    likes: 628,
+    replies: 200,
+    time: '2024-08-13',
+  },
+  { id: 2, user: '汪汪汪', content: '电影票太贵了，不去看电影了@小哥', likes: 329, replies: 132, time: '2024-08-13' },
+  {
+    id: 3,
+    user: '小情绪',
+    content:
+      '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+    likes: 217,
+    replies: 89,
+    time: '2024-08-13',
+  },
+  {
+    id: 4,
+    user: '鱼Sir爱生活',
+    content: '8.15开始两边券不通用了，大麦的订单也同步不到淘票票了',
+    likes: 183,
+    replies: 64,
+    time: '2024-08-13',
+  },
+  {
+    id: 5,
+    user: 'Duku',
+    content: '用大麦买就可以了，把淘票票账号绑进大麦是一样的',
+    likes: 128,
+    replies: 32,
+    time: '2024-08-13',
+  },
+  {
+    id: 6,
+    user: '小情绪',
+    content:
+      '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+    likes: 92,
+    replies: 73,
+    time: '2024-08-13',
+  },
+  {
+    id: 7,
+    user: '一鸣的歌单',
+    content: '今天问的KF，直接答非所问，很气人！',
+    likes: 81,
+    replies: 63,
+    time: '2024-08-13',
+  },
+  {
+    id: 8,
+    user: '松果儿',
+    content:
+      '简单来说就是，主包从大麦网买了个电影券，因为一直用惯了淘票票平台，把券添加到了淘票票，最后才发现不能使用，所以最后只能找客服，问题没解决，遇到了个神人。。。',
+    likes: 72,
+    replies: 31,
+    time: '2024-08-13',
+  },
+  {
+    id: 9,
+    user: '小红薯650EC5A...',
+    content: '太麻烦了，有没有简单一点的方法',
+    likes: 628,
+    replies: 200,
+    time: '2024-08-13',
+  },
+  { id: 10, user: '汪汪汪', content: '电影票太贵了，不去看电影了@小哥', likes: 329, replies: 132, time: '2024-08-13' },
+  {
+    id: 11,
+    user: '小情绪',
+    content:
+      '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+    likes: 217,
+    replies: 89,
+    time: '2024-08-13',
+  },
+  {
+    id: 12,
+    user: '鱼Sir爱生活',
+    content: '8.15开始两边券不通用了，大麦的订单也同步不到淘票票了',
+    likes: 183,
+    replies: 64,
+    time: '2024-08-13',
+  },
+  {
+    id: 13,
+    user: 'Duku',
+    content: '用大麦买就可以了，把淘票票账号绑进大麦是一样的',
+    likes: 128,
+    replies: 32,
+    time: '2024-08-13',
+  },
+  {
+    id: 14,
+    user: '小情绪',
+    content:
+      '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+    likes: 92,
+    replies: 73,
+    time: '2024-08-13',
+  },
+  {
+    id: 15,
+    user: '一鸣的歌单',
+    content: '今天问的KF，直接答非所问，很气人！',
+    likes: 81,
+    replies: 63,
+    time: '2024-08-13',
+  },
+  {
+    id: 16,
+    user: '松果儿',
+    content:
+      '简单来说就是，主包从大麦网买了个电影券，因为一直用惯了淘票票平台，把券添加到了淘票票，最后才发现不能使用，所以最后只能找客服，问题没解决，遇到了个神人。。。',
+    likes: 72,
+    replies: 31,
+    time: '2024-08-13',
+  },
+  {
+    id: 17,
+    user: '小红薯650EC5A...',
+    content: '太麻烦了，有没有简单一点的方法',
+    likes: 628,
+    replies: 200,
+    time: '2024-08-13',
+  },
+  { id: 18, user: '汪汪汪', content: '电影票太贵了，不去看电影了@小哥', likes: 329, replies: 132, time: '2024-08-13' },
+  {
+    id: 19,
+    user: '小情绪',
+    content:
+      '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+    likes: 217,
+    replies: 89,
+    time: '2024-08-13',
+  },
+  {
+    id: 20,
+    user: '鱼Sir爱生活',
+    content: '8.15开始两边券不通用了，大麦的订单也同步不到淘票票了',
+    likes: 183,
+    replies: 64,
+    time: '2024-08-13',
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
--- a/src/views/property-marketing/media-account/node-detail/style.scss
+++ b/src/views/property-marketing/media-account/node-detail/style.scss
@ -0,0 +1,29 @@
+.note-detail-wrap {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+
+    &.bold {
+      font-family: $font-family-medium;
+    }
+
+    &.num {
+      font-family: $font-family-manrope-regular;
+    }
+  }
+
+  .title-row {
+    display: flex;
+    height: 64px;
+    padding: 10px 0;
+    align-items: center;
+  }
+
+  :deep(.ant-image) {
+    margin-right: 8px;
+  }
+}