From c014f2a1889de568ea798e2b82cdae11cb282729 Mon Sep 17 00:00:00 2001
From: hw <huangwen@yuanshengcloud.com>
Date: Wed, 26 Nov 2025 10:46:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E6=96=87=E8=8D=89=E7=A8=BF?=
 =?UTF-8?q?=E7=AE=B1=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=E3=80=81todo?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |  2 +-
 .../views/mp/components/wx-music/wx-music.vue |  2 -
 .../src/views/mp/draft/modules/news-form.vue  | 29 ++++---
 apps/web-ele/package.json                     |  2 +-
 .../src/views/mp/components/wx-msg/msg.vue    | 16 ++--
 .../src/views/mp/components/wx-music/types.ts |  7 ++
 .../views/mp/components/wx-music/wx-music.vue | 43 ++++------
 .../views/mp/components/wx-news/wx-news.vue   | 84 +++----------------
 .../wx-voice-play/wx-voice-play.vue           | 32 ++-----
 .../src/views/mp/draft/modules/news-form.vue  | 33 +++++---
 10 files changed, 88 insertions(+), 162 deletions(-)
 create mode 100644 apps/web-ele/src/views/mp/components/wx-music/types.ts

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 847d65725..a5f135136 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -18,7 +18,7 @@
   "scripts": {
     "build": "pnpm vite build --mode production",
     "build:analyze": "pnpm vite build --mode analyze",
-    "dev": "pnpm vite --mode development",
+    "dev": "pnpm vite --mode .local",
     "preview": "vite preview",
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
diff --git a/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue b/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
index 39c10bd0d..acc112b36 100644
--- a/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
+++ b/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
@@ -7,8 +7,6 @@ import { Typography } from 'ant-design-vue';
 
 /** 微信消息 - 音乐 */
 defineOptions({ name: 'WxMusic' });
-// TODO @hw：antd 和 ele 的代码风格不一致，例如说：props；
-
 const props = withDefaults(defineProps<WxMusicProps>(), {
   title: '',
   description: '',
diff --git a/apps/web-antd/src/views/mp/draft/modules/news-form.vue b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
index 72922dc3e..93ae16a71 100644
--- a/apps/web-antd/src/views/mp/draft/modules/news-form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
@@ -86,7 +86,6 @@ function plusNews() {
   <Layout>
     <Layout.Sider width="40%" theme="light">
       <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
-        <!-- TODO @hw：头条、次条的展示不对。微信聊过的呀~ -->
         <div v-for="(news, index) in newsList" :key="index">
           <div
             class="group relative mx-auto mb-[10px] w-full cursor-pointer border-[2px] bg-white"
@@ -99,15 +98,18 @@ function plusNews() {
             @click="activeNewsIndex = index"
           >
             <div class="relative w-full bg-[#acadae]">
-              <img class="h-full w-full" :src="news.thumbUrl" />
+              <img
+                class="max-h-[200px] min-h-[100px] w-full object-cover"
+                :src="news.thumbUrl"
+              />
               <div
-                class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
+                class="absolute bottom-0 left-0 mb-[5px] ml-[5px] inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[18px] text-white"
               >
                 {{ news.title }}
               </div>
             </div>
             <div
-              class="relative flex justify-center gap-[10px] py-[5px] text-center"
+              class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
               v-if="newsList.length > 1"
             >
               <Button
@@ -140,18 +142,19 @@ function plusNews() {
             "
             @click="activeNewsIndex = index"
           >
-            <div class="relative">
-              <div class="bg-[#acadae]">
-                <img class="block h-full w-full" :src="news.thumbUrl" />
-                <div
-                  class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
-                >
-                  {{ news.title }}
-                </div>
+            <div class="relative flex items-center justify-between">
+              <div
+                class="mb-[5px] ml-[5px] h-[25px] flex-1 overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[16px]"
+              >
+                {{ news.title }}
               </div>
+              <img
+                class="block h-[90px] w-[90px] object-cover"
+                :src="news.thumbUrl"
+              />
             </div>
             <div
-              class="relative flex justify-center gap-[10px] py-[5px] text-center"
+              class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
             >
               <Button
                 v-if="newsList.length > index + 1"
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index 7031134e8..a1293ce57 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -18,7 +18,7 @@
   "scripts": {
     "build": "pnpm vite build --mode production",
     "build:analyze": "pnpm vite build --mode analyze",
-    "dev": "pnpm vite --mode development",
+    "dev": "pnpm vite --mode .local",
     "preview": "vite preview",
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/msg.vue b/apps/web-ele/src/views/mp/components/wx-msg/msg.vue
index 09ec15e51..68ab5a364 100644
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { MpMsgType } from '@vben/constants';
 
 import Location from '#/views/mp/components/wx-location/wx-location.vue';
@@ -11,14 +9,16 @@ import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 
 import MsgEvent from './msg-event.vue';
 
-// TODO @hw：antd 和 ele 保持一致；例如说：1）props；2）WxVoicePlayer 这种；
 defineOptions({ name: 'Msg' });
 
-const props = defineProps<{
-  item: any;
-}>();
-
-const item = ref<any>(props.item);
+withDefaults(
+  defineProps<{
+    item?: any;
+  }>(),
+  {
+    item: {},
+  },
+);
 </script>
 
 <template>
diff --git a/apps/web-ele/src/views/mp/components/wx-music/types.ts b/apps/web-ele/src/views/mp/components/wx-music/types.ts
new file mode 100644
index 000000000..5164f5319
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/wx-music/types.ts
@@ -0,0 +1,7 @@
+export interface WxMusicProps {
+  title?: string;
+  description?: string;
+  musicUrl?: string;
+  hqMusicUrl?: string;
+  thumbMediaUrl: string;
+}
diff --git a/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue b/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
index f7c58243d..2eec42f1d 100644
--- a/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
+++ b/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
@@ -1,37 +1,22 @@
 <script lang="ts" setup>
+import type { WxMusicProps } from './types';
+
+import { computed } from 'vue';
+
 import { ElLink } from 'element-plus';
-
 /** 微信消息 - 音乐 */
-defineOptions({ name: 'Music' });
-// TODO @hw：antd 和 ele 的代码风格不一致，例如说：props；
+defineOptions({ name: 'WxMusic' });
 
-const props = defineProps({
-  title: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  description: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  musicUrl: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  hqMusicUrl: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  thumbMediaUrl: {
-    required: true,
-    type: String,
-  },
+const props = withDefaults(defineProps<WxMusicProps>(), {
+  title: '',
+  description: '',
+  musicUrl: '',
+  hqMusicUrl: '',
+  thumbMediaUrl: '',
 });
 
+const href = computed(() => props.hqMusicUrl || props.musicUrl);
+
 defineExpose({
   musicUrl: props.musicUrl,
 });
@@ -43,7 +28,7 @@ defineExpose({
       type="success"
       :underline="false"
       target="_blank"
-      :href="hqMusicUrl ? hqMusicUrl : musicUrl"
+      :href="href"
       class="block"
     >
       <div
diff --git a/apps/web-ele/src/views/mp/components/wx-news/wx-news.vue b/apps/web-ele/src/views/mp/components/wx-news/wx-news.vue
index f03ee5d2f..22f9800a4 100644
--- a/apps/web-ele/src/views/mp/components/wx-news/wx-news.vue
+++ b/apps/web-ele/src/views/mp/components/wx-news/wx-news.vue
@@ -17,18 +17,21 @@ defineExpose({
 </script>
 
 <template>
-  <div class="news-home">
+  <div class="mx-auto flex w-full flex-col gap-[10px] bg-white">
     <div v-for="(article, index) in articles" :key="index" class="news-div">
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
-        <div class="news-main">
-          <div class="news-content">
+        <div class="mx-auto w-full">
+          <div class="relative w-full bg-[#acadae]">
             <img
               :src="article.picUrl"
               :preview="false"
-              class="material-img flex w-[100px] items-center justify-center"
+              class="flex w-[100%] items-center justify-center object-cover"
             />
-            <div class="news-content-title">
+            <div
+              class="absolute bottom-0 left-0 ml-[10px] inline-block w-[98%] whitespace-normal p-[1%] text-base text-white"
+              style="box-sizing: unset !important"
+            >
               <span>{{ article.title }}</span>
             </div>
           </div>
@@ -36,10 +39,10 @@ defineExpose({
       </a>
       <!-- 二条/三条等等 -->
       <a v-else :href="article.url" target="_blank">
-        <div class="news-main-item">
-          <div class="news-content-item">
-            <div class="news-content-item-img">
-              <div class="news-content-item-title">{{ article.title }}</div>
+        <div class="bg-white">
+          <div class="relative box-border p-[10px]">
+            <div class="flex items-center">
+              <div class="flex-1 text-sm">{{ article.title }}</div>
 
               <img
                 :src="article.picUrl"
@@ -53,66 +56,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-.news-home {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-main {
-  width: 100%;
-  margin: auto;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  box-sizing: unset !important;
-  display: inline-block;
-  width: 98%;
-  padding: 1%;
-  margin-left: 10px;
-  font-size: 16px;
-  color: #fff;
-  white-space: normal;
-}
-
-.news-main-item {
-  background-color: #fff;
-}
-
-.news-content-item {
-  position: relative;
-  box-sizing: border-box;
-  padding: 10px;
-}
-
-.news-content-item-title {
-  flex: 1;
-  font-size: 14px;
-}
-
-.news-content-item-img {
-  display: flex;
-  align-items: center;
-}
-
-.material-img {
-  width: auto;
-  object-fit: cover;
-}
-</style>
diff --git a/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue b/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
index 2b13e86ff..52bdf8398 100644
--- a/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
+++ b/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
@@ -5,6 +5,7 @@ import { IconifyIcon } from '@vben/icons';
 
 // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import BenzAMRRecorder from 'benz-amr-recorder';
+import { ElTag } from 'element-plus';
 
 /** 微信消息 - 语音 */
 defineOptions({ name: 'WxVoicePlayer' });
@@ -67,37 +68,22 @@ function amrStop() {
 </script>
 
 <template>
-  <div class="wx-voice-div" @click="playVoice">
-    <el-icon>
+  <div
+    class="flex min-h-[50px] min-w-[120px] flex-col items-center justify-center rounded-[10px] bg-[#eaeaea] px-3 py-2"
+    @click="playVoice"
+  >
+    <div class="flex items-center">
       <IconifyIcon
         v-if="playing !== true"
         icon="lucide:circle-play"
         :size="32"
       />
       <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
-      <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
-    </el-icon>
+      <span class="ml-2 text-xs" v-if="duration">{{ duration }} 秒</span>
+    </div>
     <div v-if="content">
-      <el-tag type="success" size="small">语音识别</el-tag>
+      <ElTag type="success" size="small">语音识别</ElTag>
       {{ content }}
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.wx-voice-div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 120px;
-  height: 50px;
-  padding: 5px;
-  background-color: #eaeaea;
-  border-radius: 10px;
-}
-
-.amr-duration {
-  margin-left: 5px;
-  font-size: 11px;
-}
-</style>
diff --git a/apps/web-ele/src/views/mp/draft/modules/news-form.vue b/apps/web-ele/src/views/mp/draft/modules/news-form.vue
index 27df02e66..06bf24984 100644
--- a/apps/web-ele/src/views/mp/draft/modules/news-form.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/news-form.vue
@@ -106,15 +106,18 @@ function plusNews() {
             @click="activeNewsIndex = index"
           >
             <div class="relative w-full bg-[#acadae]">
-              <img class="h-full w-full" :src="news.thumbUrl" />
+              <img
+                class="max-h-[200px] min-h-[100px] w-full object-cover"
+                :src="news.thumbUrl"
+              />
               <div
-                class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
+                class="absolute bottom-0 left-0 mb-[5px] ml-[5px] inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[18px] text-white"
               >
                 {{ news.title }}
               </div>
             </div>
             <div
-              class="relative flex justify-center gap-[10px] py-[5px] text-center"
+              class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
               v-if="newsList.length > 1"
             >
               <ElButton
@@ -130,6 +133,7 @@ function plusNews() {
                 type="danger"
                 circle
                 size="small"
+                style="margin-left: 0"
                 @click="() => removeNews(index)"
               >
                 <IconifyIcon icon="lucide:trash-2" />
@@ -146,25 +150,26 @@ function plusNews() {
             "
             @click="activeNewsIndex = index"
           >
-            <div class="relative">
-              <div class="bg-[#acadae]">
-                <img class="block h-full w-full" :src="news.thumbUrl" />
-                <div
-                  class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
-                >
-                  {{ news.title }}
-                </div>
+            <div class="relative flex items-center justify-between">
+              <div
+                class="mb-[5px] ml-[5px] h-[25px] flex-1 overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[16px]"
+              >
+                {{ news.title }}
               </div>
+              <img
+                class="block h-[90px] w-[90px] object-cover"
+                :src="news.thumbUrl"
+              />
             </div>
-
             <div
-              class="relative flex justify-center gap-[10px] py-[5px] text-center"
+              class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
             >
               <ElButton
                 v-if="newsList.length > index + 1"
                 circle
                 type="info"
                 size="small"
+                class="ml-0"
                 @click="() => moveDownNews(index)"
               >
                 <IconifyIcon icon="lucide:arrow-down" />
@@ -174,6 +179,7 @@ function plusNews() {
                 type="info"
                 circle
                 size="small"
+                style="margin-left: 0"
                 @click="() => moveUpNews(index)"
               >
                 <IconifyIcon icon="lucide:arrow-up" />
@@ -183,6 +189,7 @@ function plusNews() {
                 type="danger"
                 size="small"
                 circle
+                style="margin-left: 0"
                 @click="() => removeNews(index)"
               >
                 <IconifyIcon icon="lucide:trash-2" />