fix: 图文草稿箱样式调整、todo修复

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"
   },

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: '',

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="relative flex items-center justify-between">
-              <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"
+                class="mb-[5px] ml-[5px] h-[25px] flex-1 overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[16px]"
               >
                 {{ news.title }}
               </div>
-              </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"

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"
   },

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<{
+withDefaults(
-  item: any;
+  defineProps<{
-}>();
+    item?: any;
-
+  }>(),
-const item = ref<any>(props.item);
+  {
+    item: {},
+  },
+);
 </script>
 
 <template>

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;
+}

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' });
+defineOptions({ name: 'WxMusic' });
-// TODO @hw：antd 和 ele 的代码风格不一致，例如说：props；
 
-const props = defineProps({
+const props = withDefaults(defineProps<WxMusicProps>(), {
-  title: {
+  title: '',
-    required: false,
+  description: '',
-    type: String,
+  musicUrl: '',
-    default: '',
+  hqMusicUrl: '',
-  },
+  thumbMediaUrl: '',
-  description: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  musicUrl: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  hqMusicUrl: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  thumbMediaUrl: {
-    required: true,
-    type: String,
-  },
 });
 
+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

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="mx-auto w-full">
-          <div class="news-content">
+          <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="bg-white">
-          <div class="news-content-item">
+          <div class="relative box-border p-[10px]">
-            <div class="news-content-item-img">
+            <div class="flex items-center">
-              <div class="news-content-item-title">{{ article.title }}</div>
+              <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>

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">
+  <div
-    <el-icon>
+    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>
+      <span class="ml-2 text-xs" v-if="duration">{{ duration }} 秒</span>
-    </el-icon>
+    </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>

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="relative flex items-center justify-between">
-              <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"
+                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>
-
             <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" />