From 9877f2e6bdcc2271277a48867a27ad10a7ac3b21 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Tue, 23 Sep 2025 16:38:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(property-marketing):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=AA=92=E4=BD=93=E8=B4=A6=E5=8F=B7=E4=BD=9C=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2-=20=E6=B7=BB=E5=8A=A0=E5=8D=B1?=
 =?UTF-8?q?=E9=99=A9=E8=89=B2=E5=92=8C=E6=88=90=E5=8A=9F=E8=89=B2=E5=88=B0?=
 =?UTF-8?q?=20redTheme=20=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   2 +
 src/api/all/propertyMarketing.ts              |   5 +
 .../media-account/node-detail/index.vue       | 314 +++++++-----------
 3 files changed, 121 insertions(+), 200 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5f23ee8..3db5a4f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,7 +26,9 @@ const enterpriseStore = useEnterpriseStore();
 const redTheme = {
   token: {
     colorPrimary: '#6d4cfe', // 主色
+    colorError: '#f64b31', // 危险色
     colorLink: '#f5222d', // 链接色
+    colorSuccess: '#25c883', // 成功色
   },
 };
 
diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index 75f68a1..4a8ce90 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -402,3 +402,8 @@ export const putProject = (params = {}) => {
 export const getProjectDetail = (id: string) => {
   return Http.get(`/v1/projects/${id}`);
 };
+
+// 账号笔记-详情
+export const getMediaAccountWorkDetail = (id: string) => {
+  return Http.get(`/v1/media-account-works/${id}`);
+};
diff --git a/src/views/property-marketing/media-account/node-detail/index.vue b/src/views/property-marketing/media-account/node-detail/index.vue
index e175945..37529ee 100644
--- a/src/views/property-marketing/media-account/node-detail/index.vue
+++ b/src/views/property-marketing/media-account/node-detail/index.vue
@@ -6,7 +6,7 @@
     </div>
 
     <!--作品详情-->
-    <div class="bg-#fff rounded-8px px-24px pb-20px flex-1 flex flex-col mb-16px">
+    <div class="bg-#fff rounded-8px px-24px pb-20px max-h-552px 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>
@@ -15,7 +15,7 @@
           </Tooltip>
         </div>
       </div>
-      <p class="mt-16px cts bold !text-24px !lh-32px">挖到宝了！这个平价好物让我素颜出门都自信✨</p>
+      <p class="mt-16px cts bold !text-24px !lh-32px">{{ dataSource.title }}</p>
       <div class="mt-16px">
         <ImagePreviewGroup>
           <Image
@@ -32,32 +32,11 @@
           />
         </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>
+      <p class="mt-16px cts whitespace-pre-line">{{ dataSource.content }}</p>
     </div>
 
     <!--评论列表-->
-    <div class="bg-#fff rounded-8px pb-12px h-422px flex flex-col mb-16px">
+    <div class="bg-#fff rounded-8px pb-12px max-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>
@@ -68,15 +47,15 @@
       </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 v-for="(item, index) in dataSource.comments" :key="index" class="flex items-start justify-between mb-8px">
+          <TextOverTips :context="item.commenter" 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>
+              <p class="cts !color-#737478 flex-shrink-0 num">{{ exactFormatTime(item.commented_at) }}</p>
             </div>
-            <TextoverTips
-              :context="`${item.likes}点赞 ${item.replies}回复`"
+            <TextOverTips
+              :context="`${formatNumberShow(item.like_number)}点赞 ${formatNumberShow(item.reply_number)}回复`"
               class="cts !color-#737478 ml-20px !w-fit max-w-200px"
             />
           </div>
@@ -102,7 +81,7 @@
               <icon-question-circle class="color-#737478" size="16" />
             </Tooltip>
           </div>
-          <span class="cts num">{{ formatNumberShow(data[item.prop]) }}</span>
+          <span class="cts num">{{ formatNumberShow(dataSource[item.prop]) }}</span>
         </div>
       </div>
     </div>
@@ -110,30 +89,13 @@
 </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 { useRoute, useRouter } from 'vue-router';
+import { Image, ImagePreviewGroup, Tooltip } from 'ant-design-vue';
+import TextOverTips from '@/components/text-over-tips/index.vue';
 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: 'exposure_number', tooltip: '内容被展示给用户的总次数，不代表用户实际观看。' },
   {
     label: '观看量',
     prop: 'view_number',
@@ -165,154 +127,106 @@ const noteData = [
     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',
-  },
-];
+
+const router = useRouter();
+const route = useRoute();
+
+const dataSource = ref({});
+const handleBack = () => {
+  router.go(-1);
+};
+
+const getData = async () => {
+  dataSource.value = {
+    title: '挖到宝了！这个平价好物让我素颜出门都自信✨',
+    view_number: 424242,
+    like_number: 424242,
+    collect_number: 424242,
+    comment_number: 424242,
+    share_number: 424242,
+    cover_click_rate: 424242,
+    content: `谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+      最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+      （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+      最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+      （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+      最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+      （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+      最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+      （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）
+      #电影票 #电影分享 #省钱小妙招 #电影票 #电影分享 #省钱小妙招
+    `,
+
+    comments: [
+      {
+        id: 1,
+        commenter: '小红薯650EC5A小红薯650EC5A小红薯650EC5A',
+        content: '太麻烦了，有没有简单一点的方法',
+        like_number: 628,
+        reply_number: 200,
+        commented_at: '2024-08-13',
+      },
+      {
+        id: 2,
+        commenter: '汪汪汪',
+        content: '电影票太贵了，不去看电影了@小哥',
+        like_number: 329,
+        reply_number: 132,
+        commented_at: '2024-08-13',
+      },
+      {
+        id: 3,
+        commenter: '小情绪',
+        content:
+          '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+        like_number: 217,
+        reply_number: 89,
+        commented_at: '2024-08-13',
+      },
+      {
+        id: 4,
+        commenter: '鱼Sir爱生活',
+        content: '8.15开始两边券不通用了，大麦的订单也同步不到淘票票了',
+        like_number: 183,
+        reply_number: 64,
+        commented_at: '2024-08-13',
+      },
+      {
+        id: 5,
+        commenter: 'Duku',
+        content: '用大麦买就可以了，把淘票票账号绑进大麦是一样的',
+        like_number: 128,
+        reply_number: 32,
+        commented_at: '2024-08-13',
+      },
+      {
+        id: 6,
+        commenter: '小情绪',
+        content:
+          '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+        like_number: 92,
+        reply_number: 73,
+        commented_at: '2024-08-13',
+      },
+      {
+        id: 7,
+        commenter: '一鸣的歌单',
+        content: '今天问的KF，直接答非所问，很气人！',
+        like_number: 81,
+        reply_number: 63,
+        commented_at: '2024-08-13',
+      },
+    ],
+  };
+
+  // const { code, data } = await getMediaAccountWorkDetail(route.params.id);
+  // if (code === 200) {
+  //   dataSource.value = data;
+  // }
+};
+onMounted(() => {
+  getData();
+});
 </script>
 
 <style lang="scss" scoped>