diff --git a/apps/web-antd/src/views/mp/autoReply/index.vue b/apps/web-antd/src/views/mp/autoReply/index.vue
index cf528c16d..e4862a60e 100644
--- a/apps/web-antd/src/views/mp/autoReply/index.vue
+++ b/apps/web-antd/src/views/mp/autoReply/index.vue
@@ -162,14 +162,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
           <Tabs.TabPane :key="String(AutoReplyMsgType.Follow)">
             <template #tab>
               <Row align="middle">
-                <IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
+                <IconifyIcon icon="lucide:star" class="mr-2px" /> 关注时回复
               </Row>
             </template>
           </Tabs.TabPane>
           <Tabs.TabPane :key="String(AutoReplyMsgType.Message)">
             <template #tab>
               <Row align="middle">
-                <IconifyIcon icon="ep:chat-line-round" class="mr-2px" />
+                <IconifyIcon icon="lucide:message-circle-more" class="mr-2px" />
                 消息回复
               </Row>
             </template>
@@ -177,7 +177,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
           <Tabs.TabPane :key="String(AutoReplyMsgType.Keyword)">
             <template #tab>
               <Row align="middle">
-                <IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
+                <IconifyIcon icon="lucide:newspaper" class="mr-2px" />
+                关键词回复
               </Row>
             </template>
           </Tabs.TabPane>
diff --git a/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue b/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
index 3cde118fc..1026b7e78 100644
--- a/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
@@ -291,11 +291,19 @@ watch(
     <!-- TODO @dylan：看看图片的小卡片，是不是可以整齐点，类似微信公众号，图片的高度是一致的哈；https://mp.weixin.qq.com/cgi-bin/filepage?type=2&begin=0&count=12&token=1646383362&lang=zh_CN -->
     <template v-if="props.type === 'image'">
       <Spin :spinning="loading">
-        <div class="waterfall">
-          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
-            <img class="material-img" :src="item.url" alt="素材图片" />
-            <p class="item-name">{{ item.name }}</p>
-            <Row class="ope-row">
+        <div
+          class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        >
+          <div
+            v-for="item in list"
+            :key="item.mediaId"
+            class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+          >
+            <img class="w-full" :src="item.url" alt="素材图片" />
+            <p class="truncate text-center text-xs leading-[30px]">
+              {{ item.name }}
+            </p>
+            <Row class="flex justify-center pt-2.5">
               <Button type="primary" @click="selectMaterialFun(item)">
                 选择
                 <template #icon>
@@ -353,11 +361,17 @@ watch(
     <!-- 类型：news -->
     <template v-else-if="props.type === 'news'">
       <Spin :spinning="loading">
-        <div class="waterfall">
-          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
+        <div
+          class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        >
+          <div
+            v-for="item in list"
+            :key="item.mediaId"
+            class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+          >
             <div v-if="item.content && item.content.newsItem">
               <WxNews :articles="item.content.newsItem" />
-              <Row class="ope-row">
+              <Row class="flex justify-center pt-2.5">
                 <Button type="primary" @click="selectMaterialFun(item)">
                   选择
                   <template #icon>
@@ -380,67 +394,3 @@ watch(
     </template>
   </Page>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-@media (width >= 992px) and (width <= 1300px) {
-  .waterfall {
-    column-count: 3;
-  }
-
-  p {
-    color: red;
-  }
-}
-
-@media (width >= 768px) and (width <= 991px) {
-  .waterfall {
-    column-count: 2;
-  }
-
-  p {
-    color: orange;
-  }
-}
-
-@media (width <= 767px) {
-  .waterfall {
-    column-count: 1;
-  }
-}
-
-.waterfall {
-  column-count: 5;
-  column-gap: 10px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-.waterfall-item {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #eaeaea;
-  break-inside: avoid;
-}
-
-.material-img {
-  width: 100%;
-}
-
-p {
-  line-height: 30px;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue b/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
index 54ab65548..00a9cd795 100644
--- a/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
@@ -32,25 +32,44 @@ function getNickname(sendFrom: number) {
 <template>
   <div class="execution" v-for="item in props.list" :key="item.id">
     <div
-      class="mp-comment"
-      :class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
+      class="mb-[30px] flex items-start"
+      :class="{ 'flex-row-reverse': item.sendFrom === SendFrom.MpBot }"
     >
-      <div class="avatar-div">
-        <img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
-        <div class="mp-comment__author">
+      <div class="flex w-20 flex-col items-center text-center">
+        <img
+          :src="getAvatar(item.sendFrom)"
+          class="mb-2 h-12 w-12 rounded-full border border-transparent object-cover"
+        />
+        <div class="text-sm font-semibold text-[#999]">
           {{ getNickname(item.sendFrom) }}
         </div>
       </div>
-      <div class="mp-comment__main">
-        <div class="mp-comment__header">
-          <div class="mp-comment__create_time">
+      <div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
+        <span
+          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
+          :class="{
+            '-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
+              item.sendFrom === SendFrom.MpBot,
+          }"
+        ></span>
+        <span
+          class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
+          :class="{
+            '-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
+              item.sendFrom === SendFrom.MpBot,
+          }"
+        ></span>
+        <div
+          class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
+        >
+          <div class="text-xs text-gray-500">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>
         <div
-          class="mp-comment__body"
-          :style="
-            item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
+          class="overflow-hidden rounded-b-[5px] p-[15px] text-sm text-[#333]"
+          :class="
+            item.sendFrom === SendFrom.MpBot ? 'bg-[#6BED72]' : 'bg-white'
           "
         >
           <Msg :item="item" />
@@ -59,17 +78,3 @@ function getNickname(sendFrom: number) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
-
-/** TODO @dylan： 看看有没适合 tindwind 的哈。 */
-
-@import url('./comment.scss');
-@import url('./card.scss');
-
-.avatar-div {
-  width: 80px;
-  text-align: center;
-}
-</style>
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 c081b69b8..3a6d1a33e 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
@@ -28,64 +28,27 @@ defineExpose({
 <template>
   <div>
     <Link :href="href" target="_blank" class="text-success no-underline">
-      <div class="music-card">
-        <div class="music-avatar">
-          <img :src="thumbMediaUrl" alt="音乐封面" />
+      <div
+        class="flex items-center rounded-[5px] border border-[#e8e8e8] bg-white p-2.5 transition hover:border-black/10 hover:shadow-sm"
+      >
+        <div
+          class="mr-3 h-[60px] w-[60px] overflow-hidden rounded-[4px] border border-transparent"
+        >
+          <img
+            :src="thumbMediaUrl"
+            alt="音乐封面"
+            class="h-full w-full object-cover"
+          />
         </div>
-        <div class="music-detail">
-          <div class="music-title">{{ title }}</div>
-          <div class="music-description">{{ description }}</div>
+        <div class="min-w-0 flex-1">
+          <div class="mb-2 truncate text-sm font-medium text-[#333]">
+            {{ title }}
+          </div>
+          <div class="truncate text-xs text-[#666]">
+            {{ description }}
+          </div>
         </div>
       </div>
     </Link>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-.music-card {
-  display: flex;
-  padding: 10px;
-  background-color: #fff;
-  border-radius: 5px;
-}
-
-.music-avatar {
-  flex-shrink: 0;
-  width: 60px;
-  height: 60px;
-  margin-right: 12px;
-  overflow: hidden;
-  border-radius: 4px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.music-detail {
-  flex: 1;
-  overflow: hidden;
-}
-
-.music-title {
-  margin-bottom: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-  white-space: nowrap;
-}
-
-.music-description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  color: #666;
-  white-space: nowrap;
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue b/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
index 02e6a0609..7ec1635b7 100644
--- a/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
+++ b/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { Image } from 'ant-design-vue';
-
 /** 微信消息 - 图文 */
 defineOptions({ name: 'WxNews' });
 
@@ -22,14 +20,13 @@ defineExpose({
   <div class="news-home">
     <div v-for="(article, index) in articles" :key="index" class="news-div">
       <!-- 头条 -->
-      <!-- TODO @hw：第一篇文章（头条）图片是铺满，不过要限制高度；第二篇文章开始（次条），图片是在右侧，也是需要限制宽高 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="news-main">
           <div class="news-content">
-            <Image
+            <img
               :src="article.picUrl"
               :preview="false"
-              class="material-img flex items-center justify-center"
+              class="material-img flex w-[100px] items-center justify-center"
             />
             <div class="news-content-title">
               <span>{{ article.title }}</span>
@@ -41,9 +38,14 @@ defineExpose({
       <a v-else :href="article.url" target="_blank">
         <div class="news-main-item">
           <div class="news-content-item">
-            <div class="news-content-item-title">{{ article.title }}</div>
             <div class="news-content-item-img">
-              <img :src="article.picUrl" class="material-img" alt="文章图片" />
+              <div class="news-content-item-title">{{ article.title }}</div>
+
+              <img
+                :src="article.picUrl"
+                class="h-[70px] w-[70px] object-cover"
+                alt="文章图片"
+              />
             </div>
           </div>
         </div>
@@ -59,6 +61,9 @@ defineExpose({
   width: 100%;
   margin: auto;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .news-main {
@@ -80,39 +85,35 @@ defineExpose({
   display: inline-block;
   width: 98%;
   padding: 1%;
-  font-size: 12px;
+  font-size: 16px;
   color: #fff;
   white-space: normal;
-  background-color: black;
-  opacity: 0.65;
+  margin-left: 10px;
 }
 
 .news-main-item {
-  padding: 5px 0;
   background-color: #fff;
-  border-top: 1px solid #eaeaea;
 }
 
 .news-content-item {
+  padding: 10px;
+  box-sizing: border-box;
   position: relative;
 }
 
 .news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  margin-left: 1%;
-  font-size: 10px;
-  white-space: normal;
+  flex: 1;
+  font-size: 14px;
+  // padding-left: 10px;
 }
 
 .news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  margin-right: 1%;
-  background-color: #acadae;
+  display: flex;
+  align-items: center;
 }
 
 .material-img {
-  width: 100%;
+  width: auto;
+  object-fit: cover;
 }
 </style>
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
index 970b472de..0a68f04eb 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
@@ -167,7 +167,7 @@ function selectMaterial(item: any) {
 <style lang="scss" scoped>
 /** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .select-item {
-  width: 280px;
+  // width: 280px;
   padding: 10px;
   margin: 0 auto 10px;
   border: 1px solid #eaeaea;
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/autoReply/index.vue b/apps/web-ele/src/views/mp/autoReply/index.vue
index 24f8b8579..4ed1b8492 100644
--- a/apps/web-ele/src/views/mp/autoReply/index.vue
+++ b/apps/web-ele/src/views/mp/autoReply/index.vue
@@ -161,14 +161,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
           <ElTabPane :name="String(AutoReplyMsgType.Follow)">
             <template #label>
               <ElRow align="middle">
-                <IconifyIcon icon="ep:star" class="mr-[2px]" /> 关注时回复
+                <IconifyIcon icon="lucide:star" class="mr-[2px]" /> 关注时回复
               </ElRow>
             </template>
           </ElTabPane>
           <ElTabPane :name="String(AutoReplyMsgType.Message)">
             <template #label>
               <ElRow align="middle">
-                <IconifyIcon icon="ep:chat-line-round" class="mr-[2px]" />
+                <IconifyIcon
+                  icon="lucide:message-circle-more"
+                  class="mr-[2px]"
+                />
                 消息回复
               </ElRow>
             </template>
@@ -176,7 +179,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           <ElTabPane :name="String(AutoReplyMsgType.Keyword)">
             <template #label>
               <ElRow align="middle">
-                <IconifyIcon icon="fa:newspaper-o" class="mr-[2px]" />
+                <IconifyIcon icon="lucide:newspaper" class="mr-[2px]" />
                 关键词回复
               </ElRow>
             </template>
diff --git a/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue b/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
index 88c3094cb..adbdd72e4 100644
--- a/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
+++ b/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
@@ -4,32 +4,54 @@
 <script lang="ts" setup>
 import type { WxLocationProps } from './types';
 
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-// TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
-import { ElCol, ElLink, ElRow } from 'element-plus';
+import { ElCol, ElLink, ElMessage, ElRow } from 'element-plus';
+
+import { getTradeConfig } from '#/api/mall/trade/config';
 
 defineOptions({ name: 'Location' });
 
-const props = withDefaults(defineProps<WxLocationProps>(), {
-  qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
-});
+const props = defineProps<WxLocationProps>();
+
+const fetchedQqMapKey = ref('');
+const resolvedQqMapKey = computed(
+  () => props.qqMapKey || fetchedQqMapKey.value || '',
+);
 
 const mapUrl = computed(() => {
   return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
 });
 
 const mapImageUrl = computed(() => {
-  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
+  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${resolvedQqMapKey.value}&size=250*180`;
+});
+
+async function fetchQqMapKey() {
+  try {
+    const data = await getTradeConfig();
+    fetchedQqMapKey.value = data.tencentLbsKey ?? '';
+    if (!fetchedQqMapKey.value) {
+      ElMessage.warning('请先配置腾讯位置服务密钥');
+    }
+  } catch {
+    ElMessage.error('获取腾讯位置服务密钥失败');
+  }
+}
+
+onMounted(async () => {
+  if (!props.qqMapKey) {
+    await fetchQqMapKey();
+  }
 });
 
 defineExpose({
   locationX: props.locationX,
   locationY: props.locationY,
   label: props.label,
-  qqMapKey: props.qqMapKey,
+  qqMapKey: resolvedQqMapKey,
 });
 </script>
 
@@ -42,7 +64,7 @@ defineExpose({
           <img :src="mapImageUrl" alt="地图位置" />
         </ElRow>
         <ElRow>
-          <IconifyIcon icon="ep:location" />
+          <IconifyIcon icon="lucide:map-pin" />
           {{ label }}
         </ElRow>
       </ElCol>
diff --git a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue b/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
index 624818971..96298d093 100644
--- a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
+++ b/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
@@ -36,8 +36,9 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['selectMaterial']);
-
+const emit = defineEmits<{
+  (e: 'selectMaterial', item: any): void;
+}>();
 const loading = ref(false); // 遮罩层
 const total = ref(0); // 总条数
 const list = ref<any[]>([]); // 数据列表
@@ -116,14 +117,23 @@ onMounted(async () => {
   <div class="pb-30px">
     <!-- 类型：image -->
     <div v-if="props.type === 'image'">
-      <div class="waterfall" v-loading="loading">
-        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
-          <img class="material-img" :src="item.url" />
-          <p class="item-name">{{ item.name }}</p>
-          <ElRow class="ope-row">
+      <div
+        class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        v-loading="loading"
+      >
+        <div
+          class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+          v-for="item in list"
+          :key="item.mediaId"
+        >
+          <img class="w-full" :src="item.url" />
+          <p class="truncate text-center text-xs leading-[30px]">
+            {{ item.name }}
+          </p>
+          <ElRow class="flex justify-center pt-2.5">
             <ElButton type="success" @click="selectMaterialFun(item)">
               选择
-              <IconifyIcon icon="ep:circle-check" />
+              <IconifyIcon icon="lucide:circle-check" />
             </ElButton>
           </ElRow>
         </div>
@@ -163,7 +173,7 @@ onMounted(async () => {
           <template #default="scope">
             <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
               选择
-              <IconifyIcon icon="ep:plus" />
+              <IconifyIcon icon="lucide:plus" />
             </ElButton>
           </template>
         </ElTableColumn>
@@ -210,7 +220,7 @@ onMounted(async () => {
           <template #default="scope">
             <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
               选择
-              <IconifyIcon icon="akar-icons:circle-plus" />
+              <IconifyIcon icon="lucide:circle-plus" />
             </ElButton>
           </template>
         </ElTableColumn>
@@ -228,14 +238,21 @@ onMounted(async () => {
     </div>
     <!-- 类型：news -->
     <div v-else-if="props.type === 'news'">
-      <div class="waterfall" v-loading="loading">
-        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+      <div
+        class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        v-loading="loading"
+      >
+        <div
+          class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+          v-for="item in list"
+          :key="item.mediaId"
+        >
           <div v-if="item.content && item.content.newsItem">
             <News :articles="item.content.newsItem" />
-            <ElRow class="ope-row">
+            <ElRow class="flex justify-center pt-2.5">
               <ElButton type="success" @click="selectMaterialFun(item)">
                 选择
-                <IconifyIcon icon="ep:circle-check" />
+                <IconifyIcon icon="lucide:circle-check" />
               </ElButton>
             </ElRow>
           </div>
@@ -254,54 +271,3 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-@media (width >= 992px) and (width <= 1300px) {
-  .waterfall {
-    column-count: 3;
-  }
-
-  p {
-    color: red;
-  }
-}
-
-@media (width >= 768px) and (width <= 991px) {
-  .waterfall {
-    column-count: 2;
-  }
-
-  p {
-    color: orange;
-  }
-}
-
-@media (width <= 767px) {
-  .waterfall {
-    column-count: 1;
-  }
-}
-
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
-
-.waterfall {
-  column-gap: 10px;
-  width: 100%;
-  margin: 0 auto;
-  column-count: 5;
-}
-
-.waterfall-item {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #eaeaea;
-  break-inside: avoid;
-}
-
-.material-img {
-  width: 100%;
-}
-
-p {
-  line-height: 30px;
-}
-</style>
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue b/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
index 2b89a2302..12b86cdec 100644
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { ElTag } from 'element-plus';
 
-const props = defineProps<{
+defineOptions({ name: 'MsgEvent' });
+
+defineProps<{
   item: any;
 }>();
-
-// TODO @hw：看看用 antd 的风格，还是 ele 的风格，就是下面的 item。
-// 等antd修改完再调整
-const item = ref(props.item);
 </script>
 
 <template>
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue b/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
index 49bfbb821..00a9cd795 100644
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
@@ -32,25 +32,44 @@ function getNickname(sendFrom: number) {
 <template>
   <div class="execution" v-for="item in props.list" :key="item.id">
     <div
-      class="mp-comment"
-      :class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
+      class="mb-[30px] flex items-start"
+      :class="{ 'flex-row-reverse': item.sendFrom === SendFrom.MpBot }"
     >
-      <div class="avatar-div">
-        <img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
-        <div class="mp-comment__author">
+      <div class="flex w-20 flex-col items-center text-center">
+        <img
+          :src="getAvatar(item.sendFrom)"
+          class="mb-2 h-12 w-12 rounded-full border border-transparent object-cover"
+        />
+        <div class="text-sm font-semibold text-[#999]">
           {{ getNickname(item.sendFrom) }}
         </div>
       </div>
-      <div class="mp-comment__main">
-        <div class="mp-comment__header">
-          <div class="mp-comment__create_time">
+      <div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
+        <span
+          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
+          :class="{
+            '-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
+              item.sendFrom === SendFrom.MpBot,
+          }"
+        ></span>
+        <span
+          class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
+          :class="{
+            '-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
+              item.sendFrom === SendFrom.MpBot,
+          }"
+        ></span>
+        <div
+          class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
+        >
+          <div class="text-xs text-gray-500">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>
         <div
-          class="mp-comment__body"
-          :style="
-            item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
+          class="overflow-hidden rounded-b-[5px] p-[15px] text-sm text-[#333]"
+          :class="
+            item.sendFrom === SendFrom.MpBot ? 'bg-[#6BED72]' : 'bg-white'
           "
         >
           <Msg :item="item" />
@@ -59,17 +78,3 @@ function getNickname(sendFrom: number) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
-
-/** TODO @hw： 看看有没适合 tindwind 的哈。 */
-
-@import url('./comment.scss');
-@import url('./card.scss');
-
-.avatar-div {
-  width: 80px;
-  text-align: center;
-}
-</style>
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 b6a91dc92..6000e4f4d 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
@@ -42,16 +42,21 @@ defineExpose({
       :underline="false"
       target="_blank"
       :href="hqMusicUrl ? hqMusicUrl : musicUrl"
+      class="block"
     >
-      <div class="mp-card__body rounded-sm bg-background p-2.5">
-        <div class="mp-card__avatar">
-          <img :src="thumbMediaUrl" alt="" />
+      <div
+        class="bg-background flex items-center rounded-sm border border-[#e8e8e8] p-4 transition hover:border-black/10 hover:shadow-sm"
+      >
+        <div
+          class="mr-3 h-12 w-12 overflow-hidden rounded-full border border-transparent"
+        >
+          <img :src="thumbMediaUrl" alt="" class="h-full w-full object-cover" />
         </div>
-        <div class="mp-card__detail">
-          <div class="mp-card__title" style="margin-bottom: unset">
+        <div class="flex-1">
+          <div class="mb-3 text-base font-medium text-[#000000d9]">
             {{ title }}
           </div>
-          <div class="mp-card__info" style="height: unset">
+          <div class="line-clamp-3 h-16 overflow-hidden text-sm text-black/45">
             {{ description }}
           </div>
         </div>
@@ -59,10 +64,3 @@ defineExpose({
     </ElLink>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
-
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../wx-msg/card.scss');
-</style>
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 a8781cfe6..6d9dbc4c5 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
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ElImage } from 'element-plus';
-
 /** 微信消息 - 图文 */
 defineOptions({ name: 'WxNews' });
 
@@ -22,13 +20,13 @@ defineExpose({
   <div class="news-home">
     <div v-for="(article, index) in articles" :key="index" class="news-div">
       <!-- 头条 -->
-      <!-- TODO @hw：第一篇文章（头条）图片是铺满，不过要限制高度；第二篇文章开始（次条），图片是在右侧，也是需要限制宽高 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="news-main">
-          <div class="news-content flex items-center justify-center">
-            <ElImage
-              :src="article.picUrl || article.thumbUrl"
-              class="material-img"
+          <div class="news-content">
+            <img
+              :src="article.picUrl"
+              :preview="false"
+              class="material-img flex w-[100px] items-center justify-center"
             />
             <div class="news-content-title">
               <span>{{ article.title }}</span>
@@ -40,12 +38,13 @@ defineExpose({
       <a v-else :href="article.url" target="_blank">
         <div class="news-main-item">
           <div class="news-content-item">
-            <div class="news-content-item-title">{{ article.title }}</div>
-            <div class="news-content-item-img flex items-center justify-center">
+            <div class="news-content-item-img">
+              <div class="news-content-item-title">{{ article.title }}</div>
+
               <img
-                :src="article.picUrl || article.thumbUrl"
-                class="material-img"
-                height="100%"
+                :src="article.picUrl"
+                class="h-[70px] w-[70px] object-cover"
+                alt="文章图片"
               />
             </div>
           </div>
@@ -56,12 +55,15 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 
 .news-home {
   width: 100%;
   margin: auto;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .news-main {
@@ -83,42 +85,34 @@ defineExpose({
   display: inline-block;
   width: 98%;
   padding: 1%;
-  font-size: 12px;
+  font-size: 16px;
   color: #fff;
   white-space: normal;
-  background-color: black;
-  opacity: 0.65;
+  margin-left: 10px;
 }
 
 .news-main-item {
-  padding: 5px 0;
   background-color: #fff;
-  border-top: 1px solid #eaeaea;
 }
 
 .news-content-item {
+  padding: 10px;
+  box-sizing: border-box;
   position: relative;
 }
 
 .news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  margin-left: 1%;
-  font-size: 10px;
-  white-space: normal;
+  flex: 1;
+  font-size: 14px;
 }
 
 .news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  margin-right: 1%;
-  background-color: #acadae;
+  display: flex;
+  align-items: center;
 }
 
 .material-img {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
+  width: auto;
+  object-fit: cover;
 }
 </style>
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
index 3b1bfd310..d179062fb 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
@@ -100,7 +100,7 @@ function selectMaterial(item: any) {
       </p>
       <ElRow class="pt-[10px] text-center" justify="center">
         <ElButton type="danger" circle @click="onDelete">
-          <IconifyIcon icon="ep:delete" />
+          <IconifyIcon icon="lucide:trash-2" />
         </ElButton>
       </ElRow>
     </div>
@@ -112,7 +112,7 @@ function selectMaterial(item: any) {
         class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
       >
         <ElButton type="success" @click="showDialog = true">
-          素材库选择 <IconifyIcon icon="ep:circle-check" />
+          素材库选择 <IconifyIcon icon="lucide:circle-check" />
         </ElButton>
         <ElDialog
           title="选择图片"
@@ -133,7 +133,6 @@ function selectMaterial(item: any) {
         :span="12"
         class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
       >
-        {{ uploadData }}
         <ElUpload
           :action="UPLOAD_URL"
           :headers="HEADERS"
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
index 1635c7fc7..f36da6059 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
@@ -87,7 +87,7 @@ function selectMaterial(item: any) {
                 v-if="reply.thumbMediaUrl"
                 :src="reply.thumbMediaUrl"
               />
-              <IconifyIcon v-else icon="ep:plus" />
+              <IconifyIcon v-else icon="lucide:plus" />
             </ElRow>
             <ElRow align="middle" justify="center" class="mt-[2%]">
               <div>
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
index acc730754..bec81d2fa 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
@@ -51,7 +51,7 @@ function onDelete() {
         <News :articles="reply.articles" />
         <ElCol class="pt-[10px] text-center">
           <ElButton type="danger" circle @click="onDelete">
-            <IconifyIcon icon="ep:delete" />
+            <IconifyIcon icon="lucide:trash-2" />
           </ElButton>
         </ElCol>
       </div>
@@ -65,7 +65,7 @@ function onDelete() {
                   ? '选择已发布图文'
                   : '选择草稿箱图文'
               }}
-              <IconifyIcon icon="ep:circle-check" />
+              <IconifyIcon icon="lucide:circle-check" />
             </ElButton>
           </ElCol>
         </ElRow>
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
index 02d4c1670..b9df5060f 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
@@ -104,7 +104,7 @@ function selectMaterial(item: any) {
           <!-- 选择素材 -->
           <ElCol :span="12">
             <ElButton type="success" @click="showDialog = true">
-              素材库选择 <IconifyIcon icon="ep:circle-check" />
+              素材库选择 <IconifyIcon icon="lucide:circle-check" />
             </ElButton>
             <ElDialog
               title="选择视频"
@@ -133,7 +133,7 @@ function selectMaterial(item: any) {
               :on-success="onUploadSuccess"
             >
               <ElButton type="primary">
-                新建视频 <IconifyIcon icon="ep:upload" />
+                新建视频 <IconifyIcon icon="lucide:upload" />
               </ElButton>
             </ElUpload>
           </ElCol>
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue
index f8524c31e..3893f94b6 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue
@@ -103,7 +103,7 @@ function selectMaterial(item: Reply) {
       </ElRow>
       <ElRow class="w-full pt-[10px] text-center" justify="center">
         <ElButton type="danger" circle @click="onDelete">
-          <IconifyIcon icon="ep:delete" />
+          <IconifyIcon icon="lucide:trash-2" />
         </ElButton>
       </ElRow>
     </div>
@@ -114,7 +114,7 @@ function selectMaterial(item: Reply) {
         class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
       >
         <ElButton type="success" @click="showDialog = true">
-          素材库选择<IconifyIcon icon="ep:circle-check" />
+          素材库选择<IconifyIcon icon="lucide:circle-check" />
         </ElButton>
         <ElDialog
           title="选择语音"
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue b/apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue
index fc00ac9a6..f80decea0 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue
@@ -117,7 +117,9 @@ defineExpose({
     <!-- 类型 1：文本 -->
     <ElTabPane :name="ReplyType.Text">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:document" /> 文本</ElRow>
+        <ElRow align="middle">
+          <IconifyIcon icon="lucide:file-text" /> 文本
+        </ElRow>
       </template>
       <TabText v-model="reply.content" />
     </ElTabPane>
@@ -126,7 +128,7 @@ defineExpose({
     <ElTabPane :name="ReplyType.Image">
       <template #label>
         <ElRow align="middle">
-          <IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
+          <IconifyIcon icon="lucide:image" class="mr-5px" /> 图片
         </ElRow>
       </template>
       <TabImage v-model="reply" />
@@ -135,7 +137,7 @@ defineExpose({
     <!-- 类型 3：语音 -->
     <ElTabPane :name="ReplyType.Voice">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:phone" /> 语音</ElRow>
+        <ElRow align="middle"> <IconifyIcon icon="lucide:mic" /> 语音 </ElRow>
       </template>
       <TabVoice v-model="reply" />
     </ElTabPane>
@@ -143,7 +145,7 @@ defineExpose({
     <!-- 类型 4：视频 -->
     <ElTabPane :name="ReplyType.Video">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:share" /> 视频</ElRow>
+        <ElRow align="middle"><IconifyIcon icon="lucide:video" /> 视频</ElRow>
       </template>
       <TabVideo v-model="reply" />
     </ElTabPane>
@@ -151,7 +153,9 @@ defineExpose({
     <!-- 类型 5：图文 -->
     <ElTabPane :name="ReplyType.News">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:reading" /> 图文</ElRow>
+        <ElRow align="middle">
+          <IconifyIcon icon="lucide:newspaper" /> 图文
+        </ElRow>
       </template>
       <TabNews v-model="reply" :news-type="newsType" />
     </ElTabPane>
@@ -159,7 +163,7 @@ defineExpose({
     <!-- 类型 6：音乐 -->
     <ElTabPane :name="ReplyType.Music">
       <template #label>
-        <ElRow align="middle"><IconifyIcon icon="ep:service" />音乐</ElRow>
+        <ElRow align="middle"> <IconifyIcon icon="lucide:music" />音乐 </ElRow>
       </template>
       <TabMusic v-model="reply" />
     </ElTabPane>
diff --git a/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue b/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
index f6ff368d5..a92777d86 100644
--- a/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
+++ b/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
@@ -26,7 +26,7 @@ const playVideo = () => {
   <div @click="playVideo()">
     <!-- 提示 -->
     <div class="flex cursor-pointer flex-col items-center">
-      <IconifyIcon icon="ep:video-play" :size="32" class="mr-5px" />
+      <IconifyIcon icon="lucide:circle-play" :size="32" class="mr-5px" />
       <p class="text-sm">点击播放视频</p>
     </div>
 
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 e20509dc4..67f0db4c5 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
@@ -9,18 +9,15 @@ import BenzAMRRecorder from 'benz-amr-recorder';
 /** 微信消息 - 语音 */
 defineOptions({ name: 'VoicePlayer' });
 
-// TODO @hw：antd 和 ele 代码风格一致；
-const props = defineProps({
-  url: {
-    type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
-    required: true,
+const props = withDefaults(
+  defineProps<{
+    content?: string; // 语音文本
+    url: string; // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
+  }>(),
+  {
+    content: '',
   },
-  content: {
-    type: String, // 语音文本
-    required: false,
-    default: '',
-  },
-});
+);
 
 const amr = ref();
 const playing = ref(false);
@@ -72,8 +69,12 @@ const amrStop = () => {
 <template>
   <div class="wx-voice-div" @click="playVoice">
     <el-icon>
-      <IconifyIcon v-if="playing !== true" icon="ep:video-play" :size="32" />
-      <IconifyIcon v-else icon="ep:video-pause" :size="32" />
+      <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>
     <div v-if="content">
diff --git a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
index 6ae5b8d4a..4f9feec26 100644
--- a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
@@ -93,7 +93,7 @@ function onUploadError(err: Error) {
       />
       <IconifyIcon
         v-else
-        icon="ep:plus"
+        icon="lucide:plus"
         class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
         :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
       />
diff --git a/apps/web-ele/src/views/mp/draft/modules/form.vue b/apps/web-ele/src/views/mp/draft/modules/form.vue
index 229698649..1563f1a2c 100644
--- a/apps/web-ele/src/views/mp/draft/modules/form.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/form.vue
@@ -1,32 +1,27 @@
 <script lang="ts" setup>
-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';
 
 import { computed, provide, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
-import * as MpDraftApi from '#/api/mp/draft';
+import { createDraft, updateDraft } from '#/api/mp/draft';
 
 import NewsForm from './news-form.vue';
 
 const emit = defineEmits(['success']);
 
-// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
-
 const formData = ref<{
   accountId: number;
-  isCreating: boolean;
   mediaId?: string;
-  newsList?: NewsItem[];
+  newsList?: MpDraftApi.NewsItem[];
 }>();
-const newsList = ref<NewsItem[]>([]);
-const isSubmitting = ref(false);
-const isSaved = ref(false);
+const newsList = ref<MpDraftApi.NewsItem[]>([]);
 
 const getTitle = computed(() => {
-  return formData.value?.isCreating ? '新建图文' : '修改图文';
+  return formData.value?.mediaId ? '修改图文' : '新建图文';
 });
 
 // 提供 accountId 给子组件
@@ -39,59 +34,45 @@ const [Modal, modalApi] = useVbenModal({
     if (!formData.value) {
       return;
     }
-
-    isSubmitting.value = true;
     modalApi.lock();
     try {
-      if (formData.value.isCreating) {
-        await MpDraftApi.createDraft(formData.value.accountId, newsList.value);
-        ElMessage.success('新增成功');
-      } else if (formData.value.mediaId) {
-        await MpDraftApi.updateDraft(
+      if (formData.value.mediaId) {
+        await updateDraft(
           formData.value.accountId,
           formData.value.mediaId,
           newsList.value,
         );
         ElMessage.success('更新成功');
+      } else {
+        await createDraft(formData.value.accountId, newsList.value);
+        ElMessage.success('新增成功');
       }
-      isSaved.value = true;
       await modalApi.close();
       emit('success');
     } finally {
-      isSubmitting.value = false;
       modalApi.unlock();
     }
   },
-  async onBeforeClose() {
-    // 如果已经成功保存，直接关闭，不显示提示
-    if (isSaved.value) {
-      return true;
-    }
-    try {
-      await ElMessageBox.confirm('修改内容可能还未保存，确定关闭吗?');
-      return true;
-    } catch {
-      return false;
-    }
-  },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
       newsList.value = [];
-      isSaved.value = false;
       return;
     }
-    isSaved.value = false;
     const data = modalApi.getData<{
       accountId: number;
       isCreating: boolean;
       mediaId?: string;
-      newsList?: NewsItem[];
+      newsList?: MpDraftApi.NewsItem[];
     }>();
     if (!data) {
       return;
     }
-    formData.value = data;
+    formData.value = {
+      accountId: data.accountId,
+      mediaId: data.mediaId,
+      newsList: data.newsList,
+    };
     newsList.value = data.newsList || [];
   },
 });
@@ -102,8 +83,7 @@ const [Modal, modalApi] = useVbenModal({
     <NewsForm
       v-if="formData"
       v-model="newsList"
-      v-loading="isSubmitting"
-      :is-creating="formData.isCreating"
+      :is-creating="!formData.mediaId"
     />
   </Modal>
 </template>
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 ddbcceb52..27df02e66 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
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';
 
 import { computed, ref } from 'vue';
 
@@ -16,24 +16,23 @@ import {
   ElRow,
 } from 'element-plus';
 
+import { createEmptyNewsItem } from '#/api/mp/draft';
 import { Tinymce as RichTextarea } from '#/components/tinymce';
 
 import CoverSelect from './cover-select.vue';
-import { createEmptyNewsItem } from './types';
 
 defineOptions({ name: 'NewsForm' });
 
 const props = defineProps<{
   isCreating: boolean;
-  modelValue: NewsItem[] | null;
+  modelValue: MpDraftApi.NewsItem[] | null;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: NewsItem[]): void;
+  (e: 'update:modelValue', v: MpDraftApi.NewsItem[]): void;
 }>();
 
-// TODO @hw: 对齐 antd，应该是 MpDraftApi.NewsItem 这种哈。
-const newsList = computed<NewsItem[]>({
+const newsList = computed<MpDraftApi.NewsItem[]>({
   get() {
     return props.modelValue === null
       ? [createEmptyNewsItem()]
@@ -124,7 +123,7 @@ function plusNews() {
                 size="small"
                 @click="() => moveDownNews(index)"
               >
-                <IconifyIcon icon="ep:arrow-down-bold" />
+                <IconifyIcon icon="lucide:arrow-down" />
               </ElButton>
               <ElButton
                 v-if="isCreating"
@@ -133,7 +132,7 @@ function plusNews() {
                 size="small"
                 @click="() => removeNews(index)"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
               </ElButton>
             </div>
           </div>
@@ -168,7 +167,7 @@ function plusNews() {
                 size="small"
                 @click="() => moveDownNews(index)"
               >
-                <IconifyIcon icon="ep:arrow-down-bold" />
+                <IconifyIcon icon="lucide:arrow-down" />
               </ElButton>
               <ElButton
                 v-if="index > 0"
@@ -177,7 +176,7 @@ function plusNews() {
                 size="small"
                 @click="() => moveUpNews(index)"
               >
-                <IconifyIcon icon="ep:arrow-up-bold" />
+                <IconifyIcon icon="lucide:arrow-up" />
               </ElButton>
               <ElButton
                 v-if="isCreating"
@@ -186,7 +185,7 @@ function plusNews() {
                 circle
                 @click="() => removeNews(index)"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
               </ElButton>
             </div>
           </div>
@@ -201,7 +200,7 @@ function plusNews() {
             @click="plusNews"
             v-if="newsList.length < 8 && isCreating"
           >
-            <IconifyIcon icon="ep:plus" />
+            <IconifyIcon icon="lucide:plus" />
           </ElButton>
         </ElRow>
       </div>
diff --git a/apps/web-ele/src/views/mp/draft/modules/types.ts b/apps/web-ele/src/views/mp/draft/modules/types.ts
deleted file mode 100644
index e5bd312a3..000000000
--- a/apps/web-ele/src/views/mp/draft/modules/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// TODO @hw：合并到 api 里，参考 antd 的做法；
-interface NewsItem {
-  title: string;
-  thumbMediaId: string;
-  author: string;
-  digest: string;
-  showCoverPic: number;
-  content: string;
-  contentSourceUrl: string;
-  needOpenComment: number;
-  onlyFansCanComment: number;
-  thumbUrl: string;
-  picUrl?: string; // 用于预览封面
-}
-
-interface NewsItemList {
-  newsItem: NewsItem[];
-}
-
-interface Article {
-  mediaId: string;
-  content: NewsItemList;
-  updateTime: number;
-}
-
-const createEmptyNewsItem = (): NewsItem => {
-  return {
-    title: '',
-    thumbMediaId: '',
-    author: '',
-    digest: '',
-    showCoverPic: 0,
-    content: '',
-    contentSourceUrl: '',
-    needOpenComment: 0,
-    onlyFansCanComment: 0,
-    thumbUrl: '',
-  };
-};
-
-export type { Article, NewsItem, NewsItemList };
-export { createEmptyNewsItem };
diff --git a/apps/web-ele/src/views/mp/menu/index.vue b/apps/web-ele/src/views/mp/menu/index.vue
index e92c9aa7a..688b1f268 100644
--- a/apps/web-ele/src/views/mp/menu/index.vue
+++ b/apps/web-ele/src/views/mp/menu/index.vue
@@ -291,7 +291,6 @@ function menuToBackend(menu: any) {
   };
   return result;
 }
-// TODO @hw：antd 和 ele 版本，基本没用自定义组件，他们的 tindwind 需要进一步对齐么？（主要还是考虑维护性哈。）
 </script>
 
 <template>
@@ -310,21 +309,21 @@ function menuToBackend(menu: any) {
       >
         <!--左边配置菜单-->
         <div
-          class="left relative box-border block h-[715px] w-[350px] flex-shrink-0 bg-[length:100%_auto] bg-no-repeat px-[25px] pb-[88px] pt-[518px]"
+          class="relative float-left box-border block h-[715px] w-[350px] bg-[length:100%_auto] bg-no-repeat p-[518px_25px_88px]"
           :style="{ backgroundImage: `url(${iphoneBackImg})` }"
         >
           <div
-            class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%_auto] bg-no-repeat text-center text-white"
+            class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%] bg-[position:0_0] bg-no-repeat text-center text-white"
             :style="{ backgroundImage: `url(${menuHeadImg})` }"
           >
             <div
-              class="absolute left-0 top-[33px] w-full text-center text-[14px] text-white"
+              class="absolute left-0 top-[33px] w-full text-center text-sm text-white"
             >
               {{ accountName }}
             </div>
           </div>
           <div
-            class="h-[46px] bg-no-repeat pl-[43px] text-[12px]"
+            class="bg-[position:0_0] bg-no-repeat pl-[43px] text-xs after:clear-both after:table after:content-['']"
             :style="{ backgroundImage: `url(${menuFootImg})` }"
           >
             <Previewer
@@ -336,7 +335,7 @@ function menuToBackend(menu: any) {
               @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
             />
           </div>
-          <div class="mt-[15px] text-center">
+          <div class="mt-[15px] flex items-center justify-center gap-[10px]">
             <ElButton
               class="mx-2"
               type="success"
@@ -357,7 +356,7 @@ function menuToBackend(menu: any) {
         </div>
         <!--右边配置-->
         <div
-          class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
+          class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5"
           v-if="showRightPanel"
         >
           <Editor
@@ -368,11 +367,8 @@ function menuToBackend(menu: any) {
           />
         </div>
         <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
-        <div
-          v-else
-          class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
-        >
-          <p class="text-left">请选择菜单配置</p>
+        <div v-else class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5">
+          <p>请选择菜单配置</p>
         </div>
       </div>
     </ContentWrap>
diff --git a/apps/web-ele/src/views/mp/menu/modules/editor.vue b/apps/web-ele/src/views/mp/menu/modules/editor.vue
index 898a9a755..103b2dea4 100644
--- a/apps/web-ele/src/views/mp/menu/modules/editor.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/editor.vue
@@ -14,10 +14,7 @@ import {
   ElSelect,
 } from 'element-plus';
 
-// TODO @hw：import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
-import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
-import News from '#/views/mp/components/wx-news/wx-news.vue';
-import ReplySelect from '#/views/mp/components/wx-reply/wx-reply.vue';
+import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
 
 import { menuOptions } from './types';
 
@@ -79,7 +76,7 @@ function deleteMaterial() {
   <div class="space-y-5">
     <div class="flex justify-end">
       <ElButton type="danger" @click="emit('delete')">
-        <IconifyIcon icon="ep:delete" />
+        <IconifyIcon icon="lucide:trash-2" />
         删除当前菜单
       </ElButton>
     </div>
@@ -183,10 +180,10 @@ function deleteMaterial() {
             class="mx-auto mb-2.5 w-[280px] border border-[#eaeaea] p-2.5"
             v-if="menu && menu.replyArticles"
           >
-            <News :articles="menu.replyArticles" />
+            <WxNews :articles="menu.replyArticles" />
             <ElRow class="pt-2.5 text-center" justify="center" align="middle">
               <ElButton type="danger" circle @click="deleteMaterial">
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="ep:trash-2" />
               </ElButton>
             </ElRow>
           </div>
@@ -195,7 +192,7 @@ function deleteMaterial() {
               <ElCol :span="24" class="text-center">
                 <ElButton type="success" @click="showNewsDialog = true">
                   素材库选择
-                  <IconifyIcon icon="ep:circle-check" />
+                  <IconifyIcon icon="lucide:circle-check" />
                 </ElButton>
               </ElCol>
             </ElRow>
@@ -206,7 +203,7 @@ function deleteMaterial() {
             width="80%"
             destroy-on-close
           >
-            <MaterialSelect
+            <WxMaterialSelect
               type="news"
               :account-id="props.accountId"
               @select-material="selectMaterial"
@@ -218,7 +215,7 @@ function deleteMaterial() {
         class="rounded bg-white px-3 py-5 shadow-sm"
         v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
       >
-        <ReplySelect v-model="menu.reply" />
+        <WxReply v-model="menu.reply" />
       </div>
     </div>
   </div>
diff --git a/apps/web-ele/src/views/mp/menu/modules/previewer.vue b/apps/web-ele/src/views/mp/menu/modules/previewer.vue
index 631a5c3ad..6316f683f 100644
--- a/apps/web-ele/src/views/mp/menu/modules/previewer.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/previewer.vue
@@ -140,8 +140,9 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
           "
           @click="menuClicked(parent, x)"
         >
-          <!-- TODO @hw：尽量用中立的 lucide icon -->
-          <IconifyIcon icon="ep:fold" color="black" />{{ parent.name }}
+          <IconifyIcon icon="lucide:list-collapse" color="black" />{{
+            parent.name
+          }}
         </div>
         <!-- 以下为二级菜单-->
         <div
@@ -180,8 +181,7 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
             v-if="!parent.children || parent.children.length < 5"
             @click="addSubMenu(x, parent)"
           >
-            <!-- TODO @hw：尽量用中立的 lucide icon -->
-            <IconifyIcon icon="ep:plus" class="" />
+            <IconifyIcon icon="lucide:plus" class="" />
           </div>
         </div>
       </div>
@@ -194,8 +194,7 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
     v-if="menuList.length < 3"
     @click="addMenu"
   >
-    <!-- TODO @hw：尽量用中立的 lucide icon -->
-    <IconifyIcon icon="ep:plus" class="" />
+    <IconifyIcon icon="lucide:plus" class="" />
   </div>
 </template>