From 365915e37c90522e86a4661d15335c5172a66d6e Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Fri, 7 Apr 2023 14:42:45 +0000
Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=E8=8E=B7=E5=8F=96FreePublic?=
 =?UTF-8?q?=E5=87=BA=E9=94=99&=E5=88=86=E9=A1=B5=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: dhb52 <dhb52@126.com>
---
 .../mp/components/wx-material-select/main.vue | 239 +++++++++---------
 1 file changed, 122 insertions(+), 117 deletions(-)

diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
index 4c477078b..ab3539740 100644
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -5,127 +5,130 @@
   ① 移除 avue 组件，使用 ElementUI 原生组件
 -->
 <template>
-  <!-- 类型：图片 -->
-  <div v-if="objData.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>
-        <el-row class="ope-row">
-          <el-button type="success" @click="selectMaterialFun(item)"
-            >选择
-            <i class="el-icon-circle-check el-icon--right"></i>
-          </el-button>
-        </el-row>
-      </div>
-    </div>
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getMaterialPageFun"
-    />
-  </div>
-  <!-- 类型：语音 -->
-  <div v-else-if="objData.type === 'voice'">
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="编号" align="center" prop="mediaId" />
-      <el-table-column label="文件名" align="center" prop="name" />
-      <el-table-column label="语音" align="center">
-        <template #default="scope">
-          <wx-voice-player :url="scope.row.url" />
-        </template>
-      </el-table-column>
-      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-        <template #default="scope">
-          <span>{{ formatDate(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        fixed="right"
-        class-name="small-padding fixed-width"
-      >
-        <template #default="scope">
-          <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
-            >选择
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getPage"
-    />
-  </div>
-  <div v-else-if="objData.type === 'video'">
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="编号" align="center" prop="mediaId" />
-      <el-table-column label="文件名" align="center" prop="name" />
-      <el-table-column label="标题" align="center" prop="title" />
-      <el-table-column label="介绍" align="center" prop="introduction" />
-      <el-table-column label="视频" align="center">
-        <template #default="scope">
-          <wx-video-player :url="scope.row.url" />
-        </template>
-      </el-table-column>
-      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-        <template #default="scope">
-          <span>{{ formatDate(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        fixed="right"
-        class-name="small-padding fixed-width"
-      >
-        <template #default="scope">
-          <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
-            >选择
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getMaterialPageFun"
-    />
-  </div>
-  <div v-else-if="objData.type === 'news'">
-    <div class="waterfall" v-loading="loading">
-      <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
-        <div v-if="item.content && item.content.newsItem">
-          <wx-news :articles="item.content.newsItem" />
+  <div class="pb-30px">
+    <!-- 类型：image -->
+    <div v-if="objData.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>
           <el-row class="ope-row">
-            <el-button type="success" @click="selectMaterialFun(item)">
-              选择<i class="el-icon-circle-check el-icon--right"></i>
+            <el-button type="success" @click="selectMaterialFun(item)"
+              >选择 <Icon icon="ep:circle-check" />
             </el-button>
           </el-row>
         </div>
       </div>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：voice -->
+    <div v-else-if="objData.type === 'voice'">
+      <!-- 列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="mediaId" />
+        <el-table-column label="文件名" align="center" prop="name" />
+        <el-table-column label="语音" align="center">
+          <template #default="scope">
+            <WxVoicePlayer :url="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+          <template #default="scope">
+            <span>{{ formatDate(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          fixed="right"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button type="text" @click="selectMaterialFun(scope.row)"
+              >选择<Icon icon="ep:plus" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getPage"
+      />
+    </div>
+    <!-- 类型：video -->
+    <div v-else-if="objData.type === 'video'">
+      <!-- 列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="mediaId" />
+        <el-table-column label="文件名" align="center" prop="name" />
+        <el-table-column label="标题" align="center" prop="title" />
+        <el-table-column label="介绍" align="center" prop="introduction" />
+        <el-table-column label="视频" align="center">
+          <template #default="scope">
+            <WxVideoPlayer :url="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+          <template #default="scope">
+            <span>{{ formatDate(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          fixed="right"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button type="text" @click="selectMaterialFun(scope.row)"
+              >选择<Icon icon="ep:circle-plus" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：news -->
+    <div v-else-if="objData.type === 'news'">
+      <div class="waterfall" v-loading="loading">
+        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+          <div v-if="item.content && item.content.newsItem">
+            <WxNews :articles="item.content.newsItem" />
+            <el-row class="ope-row">
+              <el-button type="success" @click="selectMaterialFun(item)">
+                选择<Icon icon="ep:circle-check" />
+              </el-button>
+            </el-row>
+          </div>
+        </div>
+      </div>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
     </div>
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getMaterialPageFun"
-    />
   </div>
 </template>
 
@@ -173,7 +176,7 @@ export default defineComponent({
     const newsTypeRef = ref(props.newsType)
 
     const selectMaterialFun = (item) => {
-      ctx.emit('selectMaterial', item)
+      ctx.emit('select-material', item)
     }
     /** 搜索按钮操作 */
     const handleQuery = () => {
@@ -203,9 +206,10 @@ export default defineComponent({
       total.value = data.total
       loading.value = false
     }
+
     const getFreePublishPageFun = async () => {
       let data = await getFreePublishPage(queryParams)
-      data.list.foreach((item) => {
+      data.list.forEach((item) => {
         const newsItem = item.content.newsItem
         newsItem.forEach((article) => {
           article.picUrl = article.thumbUrl
@@ -232,6 +236,7 @@ export default defineComponent({
     onMounted(async () => {
       getPage()
     })
+
     return {
       handleQuery,
       dateFormatter,

From 7cc8d9067c368b57e23ac52e0c869e7e4bef5853 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 7 Apr 2023 23:26:09 +0800
Subject: [PATCH 02/16] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20swagger=E3=80=81drui?=
 =?UTF-8?q?d=E3=80=81skywalking=E3=80=81admin=20=E7=9A=84=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auto-components.d.ts       |  4 +++
 src/views/infra/dbDoc/index.vue      | 52 ++++++++++++----------------
 src/views/infra/druid/index.vue      | 20 +++++++++--
 src/views/infra/server/index.vue     | 21 +++++++++--
 src/views/infra/skywalking/index.vue | 18 +++++++++-
 src/views/infra/swagger/index.vue    | 20 +++++++++--
 6 files changed, 96 insertions(+), 39 deletions(-)

diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index b707dd22d..c7ff571c3 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -56,10 +56,14 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
diff --git a/src/views/infra/dbDoc/index.vue b/src/views/infra/dbDoc/index.vue
index b15489c87..6b3e3f8b1 100644
--- a/src/views/infra/dbDoc/index.vue
+++ b/src/views/infra/dbDoc/index.vue
@@ -2,46 +2,38 @@
   <doc-alert title="数据库文档" url="https://doc.iocoder.cn/db-doc/" />
 
   <ContentWrap title="数据库文档">
-    <!-- 操作工具栏 -->
     <div class="mb-10px">
-      <XButton
-        type="primary"
-        preIcon="ep:download"
-        :title="t('action.export') + ' HTML'"
-        @click="handleExport('HTML')"
-      />
-      <XButton
-        type="primary"
-        preIcon="ep:download"
-        :title="t('action.export') + ' Word'"
-        @click="handleExport('Word')"
-      />
-      <XButton
-        type="primary"
-        preIcon="ep:download"
-        :title="t('action.export') + ' Markdown'"
-        @click="handleExport('Markdown')"
-      />
+      <el-button type="primary" plain @click="handleExport('HTML')">
+        <Icon icon="ep:download" /> 导出 HTML
+      </el-button>
+      <el-button type="primary" plain @click="handleExport('Word')">
+        <Icon icon="ep:download" /> 导出 Word
+      </el-button>
+      <el-button type="primary" plain @click="handleExport('Markdown')">
+        <Icon icon="ep:download" /> 导出 Markdown
+      </el-button>
     </div>
-    <IFrame v-if="!loding" v-loading="loding" :src="src" />
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
 <script setup lang="ts" name="DbDoc">
 import download from '@/utils/download'
-
 import * as DbDocApi from '@/api/infra/dbDoc'
 
-const { t } = useI18n() // 国际化
-const src = ref('')
-const loding = ref(true)
+const loading = ref(true) // 是否加载中
+const src = ref('') // HTML 的地址
+
 /** 页面加载 */
 const init = async () => {
-  const res = await DbDocApi.exportHtml()
-  let blob = new Blob([res], { type: 'text/html' })
-  let blobUrl = window.URL.createObjectURL(blob)
-  src.value = blobUrl
-  loding.value = false
+  try {
+    const data = await DbDocApi.exportHtml()
+    const blob = new Blob([data], { type: 'text/html' })
+    src.value = window.URL.createObjectURL(blob)
+  } finally {
+    loading.value = false
+  }
 }
+
 /** 处理导出  */
 const handleExport = async (type: string) => {
   if (type === 'HTML') {
@@ -57,6 +49,8 @@ const handleExport = async (type: string) => {
     download.markdown(res, '数据库文档.md')
   }
 }
+
+/** 初始化 */
 onMounted(async () => {
   await init()
 })
diff --git a/src/views/infra/druid/index.vue b/src/views/infra/druid/index.vue
index adacb17ce..608b318b4 100644
--- a/src/views/infra/druid/index.vue
+++ b/src/views/infra/druid/index.vue
@@ -3,10 +3,24 @@
   <doc-alert title="多数据源（读写分离）" url="https://doc.iocoder.cn/dynamic-datasource/" />
 
   <ContentWrap>
-    <IFrame :src="src" />
+    <IFrame v-if="!loading" :src="url" />
   </ContentWrap>
 </template>
 <script setup lang="ts" name="Druid">
-const BASE_URL = import.meta.env.VITE_BASE_URL
-const src = ref(BASE_URL + '/druid/index.html')
+import * as ConfigApi from '@/api/infra/config'
+
+const loading = ref(true) // 是否加载中
+const url = ref(import.meta.env.VITE_BASE_URL + '/druid/index.html')
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await ConfigApi.getConfigKey('url.druid')
+    if (data && data.length > 0) {
+      url.value = data
+    }
+  } finally {
+    loading.value = false
+  }
+})
 </script>
diff --git a/src/views/infra/server/index.vue b/src/views/infra/server/index.vue
index dad3047c9..23aeadd09 100644
--- a/src/views/infra/server/index.vue
+++ b/src/views/infra/server/index.vue
@@ -1,10 +1,25 @@
 <template>
   <doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
+
   <ContentWrap>
-    <IFrame :src="src" />
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
 <script setup lang="ts" name="AdminServer">
-const BASE_URL = import.meta.env.VITE_BASE_URL
-const src = ref(BASE_URL + '/admin/applications')
+import * as ConfigApi from '@/api/infra/config'
+
+const loading = ref(true) // 是否加载中
+const src = ref(import.meta.env.VITE_BASE_URL + '/admin/applications')
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await ConfigApi.getConfigKey('url.spring-boot-admin')
+    if (data && data.length > 0) {
+      src.value = data
+    }
+  } finally {
+    loading.value = false
+  }
+})
 </script>
diff --git a/src/views/infra/skywalking/index.vue b/src/views/infra/skywalking/index.vue
index a330b5162..f26d8f2c0 100644
--- a/src/views/infra/skywalking/index.vue
+++ b/src/views/infra/skywalking/index.vue
@@ -1,9 +1,25 @@
 <template>
   <doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
+
   <ContentWrap>
-    <IFrame :src="src" />
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
 <script setup lang="ts" name="Skywalking">
+import * as ConfigApi from '@/api/infra/config'
+
+const loading = ref(true) // 是否加载中
 const src = ref('http://skywalking.shop.iocoder.cn')
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await ConfigApi.getConfigKey('url.skywalking')
+    if (data && data.length > 0) {
+      src.value = data
+    }
+  } finally {
+    loading.value = false
+  }
+})
 </script>
diff --git a/src/views/infra/swagger/index.vue b/src/views/infra/swagger/index.vue
index c38d3a5a9..9de2e9848 100644
--- a/src/views/infra/swagger/index.vue
+++ b/src/views/infra/swagger/index.vue
@@ -6,7 +6,21 @@
   </ContentWrap>
 </template>
 <script setup lang="ts" name="Swagger">
-const BASE_URL = import.meta.env.VITE_BASE_URL
-// const src = ref(BASE_URL + '/doc.html')
-const src = ref(BASE_URL + '/swagger-ui')
+import * as ConfigApi from '@/api/infra/config'
+
+const loading = ref(true) // 是否加载中
+const src = ref(import.meta.env.VITE_BASE_URL + '/doc.html') // Knife4j UI
+// const src = ref(import.meta.env.VITE_BASE_URL + '/swagger-ui') // Swagger UI
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await ConfigApi.getConfigKey('url.swagger')
+    if (data && data.length > 0) {
+      src.value = data
+    }
+  } finally {
+    loading.value = false
+  }
+})
 </script>

From a422ad4177cb4031561bcd27ac00ee6088e70fd5 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Fri, 7 Apr 2023 16:23:02 +0000
Subject: [PATCH 03/16] =?UTF-8?q?fix:=20=E5=9B=BE=E6=96=87=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=9C=89=E8=AF=AF=EF=BC=8Carticles=E4=B8=BA=E6=95=B0?=
 =?UTF-8?q?=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: dhb52 <dhb52@126.com>
---
 src/views/mp/components/wx-reply/main.vue | 34 +++++++++++------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue
index a31e9462e..b7bc3443e 100644
--- a/src/views/mp/components/wx-reply/main.vue
+++ b/src/views/mp/components/wx-reply/main.vue
@@ -37,7 +37,7 @@
       <div class="select-item" v-if="objDataRef.url">
         <img class="material-img" :src="objDataRef.url" />
         <p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
-        <el-row class="ope-row">
+        <el-row class="ope-row" justify="center">
           <el-button type="danger" circle @click="deleteObj">
             <icon icon="ep:delete" />
           </el-button>
@@ -52,7 +52,7 @@
             <icon icon="ep:circle-check" />
           </el-button>
           <el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
-            <wx-material-select :obj-data="objDataRef" @selectMaterial="selectMaterial" />
+            <WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
           </el-dialog>
         </el-col>
         <!-- 文件上传 -->
@@ -91,20 +91,20 @@
       <div class="select-item2" v-if="objDataRef.url">
         <p class="item-name">{{ objDataRef.name }}</p>
         <div class="item-infos">
-          <wx-voice-player :url="objDataRef.url" />
+          <WxVoicePlayer :url="objDataRef.url" />
         </div>
-        <el-row class="ope-row">
-          <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
+        <el-row class="ope-row" justify="center">
+          <el-button type="danger" circle @click="deleteObj"><Icon icon="ep:delete" /></el-button>
         </el-row>
       </div>
       <el-row v-else style="text-align: center">
         <!-- 选择素材 -->
         <el-col :span="12" class="col-select">
           <el-button type="success" @click="openMaterial">
-            素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+            素材库选择<Icon icon="ep:circle-check" />
           </el-button>
           <el-dialog title="选择语音" v-model="dialogVoiceVisible" width="90%" append-to-body>
-            <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
+            <WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
           </el-dialog>
         </el-col>
         <!-- 文件上传 -->
@@ -151,7 +151,7 @@
           @input="inputContent"
         />
         <div style="text-align: center">
-          <wx-video-player v-if="objDataRef.url" :url="objDataRef.url" />
+          <WxVideoPlayer v-if="objDataRef.url" :url="objDataRef.url" />
         </div>
         <el-col>
           <el-row style="text-align: center" align="middle">
@@ -162,7 +162,7 @@
                 <icon icon="ep:circle-check" />
               </el-button>
               <el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
-                <wx-material-select :objData="objDataRef" @selectMaterial="selectMaterial" />
+                <WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
               </el-dialog>
             </el-col>
             <!-- 文件上传 -->
@@ -196,8 +196,8 @@
         </el-row>
       </template>
       <el-row>
-        <div class="select-item" v-if="objDataRef.articles.size > 0">
-          <wx-news :articles="objDataRef.articles" />
+        <div class="select-item" v-if="objDataRef.articles?.length > 0">
+          <WxNews :articles="objDataRef.articles" />
           <el-col class="ope-row">
             <el-button type="danger" circle @click="deleteObj">
               <icon icon="ep:delete" />
@@ -216,9 +216,9 @@
           </el-row>
         </el-col>
         <el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
-          <wx-material-select
+          <WxMaterialSelect
             :objData="objDataRef"
-            @selectMaterial="selectMaterial"
+            @select-material="selectMaterial"
             :newsType="newsType"
           />
         </el-dialog>
@@ -268,9 +268,9 @@
             </el-col>
           </el-row>
           <el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
-            <wx-material-select
+            <WxMaterialSelect
               :objData="{ type: 'image', accountId: objDataRef.accountId }"
-              @selectMaterial="selectMaterial"
+              @select-material="selectMaterial"
             />
           </el-dialog>
         </el-col>
@@ -482,7 +482,7 @@ export default defineComponent({
       // 创建 tempObjItem 对象，并设置对应的值
       let tempObjItem = {
         type: '',
-        articles: '',
+        articles: [],
         thumbMediaId: '',
         thumbMediaUrl: '',
         introduction: '',
@@ -560,7 +560,7 @@ export default defineComponent({
     }
     const deleteObj = () => {
       if (objDataRef.type === 'news') {
-        objDataRef.articles = ''
+        objDataRef.articles = []
       } else if (objDataRef.type === 'image') {
         objDataRef.mediaId = null
         objDataRef.url = null

From f2ab791812acc173501dfc1086310ce53ac7682f Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 8 Apr 2023 01:49:20 +0000
Subject: [PATCH 04/16] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96@element-plus/icons-vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: dhb52 <dhb52@126.com>
---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8fd1a0eb6..48858528b 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "private": false,
   "scripts": {
     "i": "pnpm install",
-    "dev": "vite --mode base",
+    "dev": "pnpm vite",
     "front": "vite --mode front",
     "ts:check": "vue-tsc --noEmit",
     "build:pro": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode pro",
@@ -27,10 +27,12 @@
     "lint:pretty": "pretty-quick --staged"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "@form-create/designer": "^3.1.0",
     "@form-create/element-ui": "^3.1.17",
     "@iconify/iconify": "^3.1.0",
     "@videojs-player/vue": "^1.0.0",
+    "@vueup/vue-quill": "^1.1.1",
     "@vueuse/core": "^9.13.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",

From 42a9715ff2dc32e224cd23c4011cb9dbfd52276a Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 8 Apr 2023 10:13:22 +0800
Subject: [PATCH 05/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DWxReply=E3=80=81?=
 =?UTF-8?q?WxMaterialSelect=E7=BB=84=E4=BB=B6bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mp/components/wx-material-select/main.vue | 239 +++++++++---------
 src/views/mp/components/wx-reply/main.vue     |  34 +--
 2 files changed, 139 insertions(+), 134 deletions(-)

diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
index 4c477078b..bcf380278 100644
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -5,127 +5,130 @@
   ① 移除 avue 组件，使用 ElementUI 原生组件
 -->
 <template>
-  <!-- 类型：图片 -->
-  <div v-if="objData.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>
-        <el-row class="ope-row">
-          <el-button type="success" @click="selectMaterialFun(item)"
-            >选择
-            <i class="el-icon-circle-check el-icon--right"></i>
-          </el-button>
-        </el-row>
-      </div>
-    </div>
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getMaterialPageFun"
-    />
-  </div>
-  <!-- 类型：语音 -->
-  <div v-else-if="objData.type === 'voice'">
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="编号" align="center" prop="mediaId" />
-      <el-table-column label="文件名" align="center" prop="name" />
-      <el-table-column label="语音" align="center">
-        <template #default="scope">
-          <wx-voice-player :url="scope.row.url" />
-        </template>
-      </el-table-column>
-      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-        <template #default="scope">
-          <span>{{ formatDate(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        fixed="right"
-        class-name="small-padding fixed-width"
-      >
-        <template #default="scope">
-          <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
-            >选择
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getPage"
-    />
-  </div>
-  <div v-else-if="objData.type === 'video'">
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="编号" align="center" prop="mediaId" />
-      <el-table-column label="文件名" align="center" prop="name" />
-      <el-table-column label="标题" align="center" prop="title" />
-      <el-table-column label="介绍" align="center" prop="introduction" />
-      <el-table-column label="视频" align="center">
-        <template #default="scope">
-          <wx-video-player :url="scope.row.url" />
-        </template>
-      </el-table-column>
-      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-        <template #default="scope">
-          <span>{{ formatDate(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        fixed="right"
-        class-name="small-padding fixed-width"
-      >
-        <template #default="scope">
-          <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
-            >选择
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getMaterialPageFun"
-    />
-  </div>
-  <div v-else-if="objData.type === 'news'">
-    <div class="waterfall" v-loading="loading">
-      <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
-        <div v-if="item.content && item.content.newsItem">
-          <wx-news :articles="item.content.newsItem" />
+  <div class="pb-30px">
+    <!-- 类型：image -->
+    <div v-if="objData.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>
           <el-row class="ope-row">
-            <el-button type="success" @click="selectMaterialFun(item)">
-              选择<i class="el-icon-circle-check el-icon--right"></i>
+            <el-button type="success" @click="selectMaterialFun(item)"
+              >选择 <Icon icon="ep:circle-check" />
             </el-button>
           </el-row>
         </div>
       </div>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：voice -->
+    <div v-else-if="objData.type === 'voice'">
+      <!-- 列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="mediaId" />
+        <el-table-column label="文件名" align="center" prop="name" />
+        <el-table-column label="语音" align="center">
+          <template #default="scope">
+            <WxVoicePlayer :url="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+          <template #default="scope">
+            <span>{{ formatDate(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          fixed="right"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button type="text" @click="selectMaterialFun(scope.row)"
+              >选择<Icon icon="ep:plus" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getPage"
+      />
+    </div>
+    <!-- 类型：video -->
+    <div v-else-if="objData.type === 'video'">
+      <!-- 列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="mediaId" />
+        <el-table-column label="文件名" align="center" prop="name" />
+        <el-table-column label="标题" align="center" prop="title" />
+        <el-table-column label="介绍" align="center" prop="introduction" />
+        <el-table-column label="视频" align="center">
+          <template #default="scope">
+            <WxVideoPlayer :url="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+          <template #default="scope">
+            <span>{{ formatDate(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          fixed="right"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button type="text" @click="selectMaterialFun(scope.row)"
+              >选择<Icon icon="akar-icons:circle-plus" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：news -->
+    <div v-else-if="objData.type === 'news'">
+      <div class="waterfall" v-loading="loading">
+        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+          <div v-if="item.content && item.content.newsItem">
+            <WxNews :articles="item.content.newsItem" />
+            <el-row class="ope-row">
+              <el-button type="success" @click="selectMaterialFun(item)">
+                选择<Icon icon="ep:circle-check" />
+              </el-button>
+            </el-row>
+          </div>
+        </div>
+      </div>
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
     </div>
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getMaterialPageFun"
-    />
   </div>
 </template>
 
@@ -173,7 +176,7 @@ export default defineComponent({
     const newsTypeRef = ref(props.newsType)
 
     const selectMaterialFun = (item) => {
-      ctx.emit('selectMaterial', item)
+      ctx.emit('select-material', item)
     }
     /** 搜索按钮操作 */
     const handleQuery = () => {
@@ -203,9 +206,10 @@ export default defineComponent({
       total.value = data.total
       loading.value = false
     }
+
     const getFreePublishPageFun = async () => {
       let data = await getFreePublishPage(queryParams)
-      data.list.foreach((item) => {
+      data.list.forEach((item) => {
         const newsItem = item.content.newsItem
         newsItem.forEach((article) => {
           article.picUrl = article.thumbUrl
@@ -232,6 +236,7 @@ export default defineComponent({
     onMounted(async () => {
       getPage()
     })
+
     return {
       handleQuery,
       dateFormatter,
diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue
index a31e9462e..b7bc3443e 100644
--- a/src/views/mp/components/wx-reply/main.vue
+++ b/src/views/mp/components/wx-reply/main.vue
@@ -37,7 +37,7 @@
       <div class="select-item" v-if="objDataRef.url">
         <img class="material-img" :src="objDataRef.url" />
         <p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
-        <el-row class="ope-row">
+        <el-row class="ope-row" justify="center">
           <el-button type="danger" circle @click="deleteObj">
             <icon icon="ep:delete" />
           </el-button>
@@ -52,7 +52,7 @@
             <icon icon="ep:circle-check" />
           </el-button>
           <el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
-            <wx-material-select :obj-data="objDataRef" @selectMaterial="selectMaterial" />
+            <WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
           </el-dialog>
         </el-col>
         <!-- 文件上传 -->
@@ -91,20 +91,20 @@
       <div class="select-item2" v-if="objDataRef.url">
         <p class="item-name">{{ objDataRef.name }}</p>
         <div class="item-infos">
-          <wx-voice-player :url="objDataRef.url" />
+          <WxVoicePlayer :url="objDataRef.url" />
         </div>
-        <el-row class="ope-row">
-          <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
+        <el-row class="ope-row" justify="center">
+          <el-button type="danger" circle @click="deleteObj"><Icon icon="ep:delete" /></el-button>
         </el-row>
       </div>
       <el-row v-else style="text-align: center">
         <!-- 选择素材 -->
         <el-col :span="12" class="col-select">
           <el-button type="success" @click="openMaterial">
-            素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+            素材库选择<Icon icon="ep:circle-check" />
           </el-button>
           <el-dialog title="选择语音" v-model="dialogVoiceVisible" width="90%" append-to-body>
-            <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
+            <WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
           </el-dialog>
         </el-col>
         <!-- 文件上传 -->
@@ -151,7 +151,7 @@
           @input="inputContent"
         />
         <div style="text-align: center">
-          <wx-video-player v-if="objDataRef.url" :url="objDataRef.url" />
+          <WxVideoPlayer v-if="objDataRef.url" :url="objDataRef.url" />
         </div>
         <el-col>
           <el-row style="text-align: center" align="middle">
@@ -162,7 +162,7 @@
                 <icon icon="ep:circle-check" />
               </el-button>
               <el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
-                <wx-material-select :objData="objDataRef" @selectMaterial="selectMaterial" />
+                <WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
               </el-dialog>
             </el-col>
             <!-- 文件上传 -->
@@ -196,8 +196,8 @@
         </el-row>
       </template>
       <el-row>
-        <div class="select-item" v-if="objDataRef.articles.size > 0">
-          <wx-news :articles="objDataRef.articles" />
+        <div class="select-item" v-if="objDataRef.articles?.length > 0">
+          <WxNews :articles="objDataRef.articles" />
           <el-col class="ope-row">
             <el-button type="danger" circle @click="deleteObj">
               <icon icon="ep:delete" />
@@ -216,9 +216,9 @@
           </el-row>
         </el-col>
         <el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
-          <wx-material-select
+          <WxMaterialSelect
             :objData="objDataRef"
-            @selectMaterial="selectMaterial"
+            @select-material="selectMaterial"
             :newsType="newsType"
           />
         </el-dialog>
@@ -268,9 +268,9 @@
             </el-col>
           </el-row>
           <el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
-            <wx-material-select
+            <WxMaterialSelect
               :objData="{ type: 'image', accountId: objDataRef.accountId }"
-              @selectMaterial="selectMaterial"
+              @select-material="selectMaterial"
             />
           </el-dialog>
         </el-col>
@@ -482,7 +482,7 @@ export default defineComponent({
       // 创建 tempObjItem 对象，并设置对应的值
       let tempObjItem = {
         type: '',
-        articles: '',
+        articles: [],
         thumbMediaId: '',
         thumbMediaUrl: '',
         introduction: '',
@@ -560,7 +560,7 @@ export default defineComponent({
     }
     const deleteObj = () => {
       if (objDataRef.type === 'news') {
-        objDataRef.articles = ''
+        objDataRef.articles = []
       } else if (objDataRef.type === 'image') {
         objDataRef.mediaId = null
         objDataRef.url = null

From 2e7edd94bc1bf11921ffb3cdc80a8dbb488af0f3 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 8 Apr 2023 10:14:20 +0800
Subject: [PATCH 06/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20WxEditor?=
 =?UTF-8?q?=EF=BC=8C=E6=9A=82=E6=97=B6=E4=BD=BF=E7=94=A8quill-editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +
 .../mp/components/wx-editor/WxEditor.vue      | 201 ++++++++++++++++++
 .../mp/components/wx-editor/quill-options.js  |  45 ++++
 3 files changed, 248 insertions(+)
 create mode 100644 src/views/mp/components/wx-editor/WxEditor.vue
 create mode 100644 src/views/mp/components/wx-editor/quill-options.js

diff --git a/package.json b/package.json
index 8fd1a0eb6..def1f5c75 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,12 @@
     "lint:pretty": "pretty-quick --staged"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "@form-create/designer": "^3.1.0",
     "@form-create/element-ui": "^3.1.17",
     "@iconify/iconify": "^3.1.0",
     "@videojs-player/vue": "^1.0.0",
+    "@vueup/vue-quill": "^1.1.1",
     "@vueuse/core": "^9.13.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
diff --git a/src/views/mp/components/wx-editor/WxEditor.vue b/src/views/mp/components/wx-editor/WxEditor.vue
new file mode 100644
index 000000000..50c65c6e7
--- /dev/null
+++ b/src/views/mp/components/wx-editor/WxEditor.vue
@@ -0,0 +1,201 @@
+<script setup>
+import { ref, reactive } from 'vue'
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css'
+import { getAccessToken } from '@/utils/auth'
+import editorOptions from './quill-options'
+
+const BASE_URL = import.meta.env.VITE_BASE_URL
+
+const message = useMessage()
+
+const props = defineProps({
+  /* 公众号账号编号 */
+  accountId: {
+    type: Number,
+    required: true
+  },
+  /* 编辑器的内容 */
+  value: {
+    type: String,
+    default: ''
+  },
+  /* 图片大小 */
+  maxSize: {
+    type: Number,
+    default: 4000 // kb
+  }
+})
+
+const emit = defineEmits(['input'])
+
+const myQuillEditorRef = ref()
+
+const content = ref(props.value.replace(/data-src/g, 'src'))
+
+const loading = ref(false) // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
+
+const actionUrl = ref(BASE_URL + '/admin-api/mp/material/upload-news-image') // 这里写你要上传的图片服务器地址
+const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
+const uploadData = reactive({
+  type: 'image', // TODO 芋艿：试试要不要换成 thumb
+  accountId: props.accountId
+})
+
+const onEditorChange = () => {
+  //内容改变事件
+  emit('input', content.value)
+}
+
+// 富文本图片上传前
+const beforeUpload = () => {
+  // 显示 loading 动画
+  loading.value = true
+}
+
+// 图片上传成功
+// 注意！由于微信公众号的图片有访问限制，所以会显示“此图片来自微信公众号，未经允许不可引用”
+const uploadSuccess = (res) => {
+  // res为图片服务器返回的数据
+  // 获取富文本组件实例
+  const quill = myQuillEditorRef.value.quill
+  // 如果上传成功
+  const link = res.data
+  if (link) {
+    // 获取光标所在位置
+    let length = quill.getSelection().index
+    // 插入图片  res.info为服务器返回的图片地址
+    quill.insertEmbed(length, 'image', link)
+    // 调整光标到最后
+    quill.setSelection(length + 1)
+  } else {
+    message.error('图片插入失败')
+  }
+  // loading 动画消失
+  loading.value = false
+}
+
+// 富文本图片上传失败
+const uploadError = () => {
+  // loading 动画消失
+  loading.value = false
+  message.error('图片插入失败')
+}
+</script>
+
+<template>
+  <div id="wxEditor">
+    <div v-loading="loading" element-loading-text="请稍等，图片上传中">
+      <!-- 图片上传组件辅助-->
+      <el-upload
+        class="avatar-uploader"
+        name="file"
+        :action="actionUrl"
+        :headers="headers"
+        :show-file-list="false"
+        :data="uploadData"
+        :on-success="uploadSuccess"
+        :on-error="uploadError"
+        :before-upload="beforeUpload"
+      />
+      <QuillEditor
+        class="editor"
+        v-model="content"
+        ref="quillEditorRef"
+        :options="editorOptions"
+        @change="onEditorChange($event)"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.editor {
+  line-height: normal !important;
+  height: 500px;
+}
+
+.ql-snow .ql-tooltip[data-mode='link']::before {
+  content: '请输入链接地址:';
+}
+
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0;
+  content: '保存';
+  padding-right: 0;
+}
+
+.ql-snow .ql-tooltip[data-mode='video']::before {
+  content: '请输入视频地址:';
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: '14px';
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+  content: '10px';
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+  content: '18px';
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+  content: '32px';
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: '文本';
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+  content: '标题1';
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+  content: '标题2';
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+  content: '标题3';
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+  content: '标题4';
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+  content: '标题5';
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+  content: '标题6';
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: '标准字体';
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+  content: '衬线字体';
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+  content: '等宽字体';
+}
+</style>
diff --git a/src/views/mp/components/wx-editor/quill-options.js b/src/views/mp/components/wx-editor/quill-options.js
new file mode 100644
index 000000000..5ec211ae6
--- /dev/null
+++ b/src/views/mp/components/wx-editor/quill-options.js
@@ -0,0 +1,45 @@
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+  ['blockquote', 'code-block'], // 引用  代码块
+  [{ header: 1 }, { header: 2 }], // 1、2 级标题
+  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
+  [{ indent: '-1' }, { indent: '+1' }], // 缩进
+  // [{'direction': 'rtl'}],                         // 文本方向
+  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+  [{ font: [] }], // 字体种类
+  [{ align: [] }], // 对齐方式
+  ['clean'], // 清除文本格式
+  ['link', 'image', 'video'] // 链接、图片、视频
+]
+
+export default {
+  theme: 'snow',
+  placeholder: '请输入文章内容',
+  modules: {
+    toolbar: {
+      container: toolbarOptions,
+      // container: "#toolbar",
+      handlers: {
+        image: function (value) {
+          if (value) {
+            // 触发input框选择图片文件
+            document.querySelector('.avatar-uploader input').click()
+          } else {
+            this.quill.format('image', false)
+          }
+        },
+        link: function (value) {
+          if (value) {
+            const href = prompt('注意！只支持公众号图文链接')
+            this.quill.format('link', href)
+          } else {
+            this.quill.format('link', false)
+          }
+        }
+      }
+    }
+  }
+}

From d5d16e4e392ef84f4faaaf2ec544b7863b2ee72e Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 8 Apr 2023 10:15:11 +0800
Subject: [PATCH 07/16] =?UTF-8?q?feat:=20=E5=BE=AE=E4=BF=A1=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/menu/assets/iphone_backImg.png | Bin 0 -> 34272 bytes
 src/views/mp/menu/assets/menu_foot.png      | Bin 0 -> 1348 bytes
 src/views/mp/menu/assets/menu_head.png      | Bin 0 -> 12673 bytes
 src/views/mp/menu/index.vue                 | 792 +++++++++++++++++++-
 src/views/mp/menu/menuOptions.js            |  42 ++
 5 files changed, 833 insertions(+), 1 deletion(-)
 create mode 100644 src/views/mp/menu/assets/iphone_backImg.png
 create mode 100644 src/views/mp/menu/assets/menu_foot.png
 create mode 100644 src/views/mp/menu/assets/menu_head.png
 create mode 100644 src/views/mp/menu/menuOptions.js

diff --git a/src/views/mp/menu/assets/iphone_backImg.png b/src/views/mp/menu/assets/iphone_backImg.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb09591a7912730aab07287e0bb2bc4e3383abc5
GIT binary patch
literal 34272
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

literal 0
HcmV?d00001

diff --git a/src/views/mp/menu/assets/menu_foot.png b/src/views/mp/menu/assets/menu_foot.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a89d4bd254f65f3111f18aa550e32bdfd4d1a24
GIT binary patch
literal 1348
zcmeAS@N?(olHy`uVBq!ia0y~yU~~YojX0Qq<f8nk%|J@B#5JNMI6tkVJh3R1!7(L2
zDOJHUH!(dmC^a#qvhZZ84FdzSLS{%rNrbPDRdRl=ULr`1UPW#JP&WgEjeSKyVsdtB
zi9%9pdS;%j()-=}l@u~lY?Z=IeGPmIoKrJ0J*tXQgRA^PlB=?lEmM^2?G$V(tbhjO
zrj{fsROII56<bx<DuK<l0<uBE`br95B_-LmN)Sgy_y#CA=NF|anCcnmCL5R;D3}@Q
z85*0Io15z>7#SEE=o=X68ye{vnp+tgSs558K!Fm_wxX0Ys~{IQs9ivwtx`rwNr9EV
zetCJhUb(Seeo?x<p{1oI$P6PRU7!lx;>x^|#0uTKVr7^KE~&-IMVSR9nfZANAQKal
z@=Hr>m4GgVcp<j{ZfssLG?;(^reBd*pl_&W0P+${p|3A~rMbCq)x{-2sR;LCHMlsW
zvLIDID784hv?v)EacRmRs|u`~i&7Iy@{2<9^K)RK7?6=)l3$#WU!dR|Y^o5RnU|7Z
zUJO?4>ucqiS6q^qmz?V9Vygtyua}vbVr6J*;^buLXku>WW@2dQYU*fd;OJ=PYT@W&
zWNu+<X$;frlAm0fo0?Yw)0=|OYl>4ZC?Vt)0Bv?jEy^rQO>ryA&s6|>*eVmZTa0j;
z2i2Q`+bza8_38s1qYsK!q-cf-0n-kM2~V^@4m{bX<^j`s5in63MQrc{=CEC!E{-7;
zx8B^@?IjZ^bKqg=MuXNxPC^A+BMJ?34TM}5|KJg8%1==Jq0ltde}Sh<Fe{U$u&e44
zvCSG{aUZzi0wSgPxs;SRXC|gg{IFYQvHHXz`MNp9F58y{t$Y#`syE$xX%OF!`buR6
zMrI~979J4hkPt8cVTA;N0-mX}XMd1TRatNL?EHIqnR9h<9NiZuKD@p@PD&#sjor@5
zZst#u`pQbtc^f$Nc}0viGe7_QbK${%$3Yz7g5u!h3LZhD$`+upA<sGXZrr)`*X#1=
zY{hfcbLP$6`%<TLi+HcJ5N}29-}5g{6#Uu#)8f19feBv(cP-raug=iYRCZp*>jhgc
zBwd^Eh40UUSHG-2NqJa45HBsAc->*@l|O%r7uM_O@qhV#tbX=<Z*BQsRrCH%JKx%t
zb+>VTN5OB_OZHB?|2jQmF8j?|o=~3P@tBV%<p;;y-M?k8+UM_lC}L}9m$oB;oo&&(
z1J=8%{r3swX4~5DH^}y|dho71e}CQYe;>pzUd(y_X5agFMj+9?Z;SpbF_kAc9B628
n1Y$<UW*|ljI*-$98JHQ8PETJmQ;k~-RIYit`njxgN@xNAPyp4k

literal 0
HcmV?d00001

diff --git a/src/views/mp/menu/assets/menu_head.png b/src/views/mp/menu/assets/menu_head.png
new file mode 100644
index 0000000000000000000000000000000000000000..248cfb761be5ce1eeeed36067de909ef58c6de79
GIT binary patch
literal 12673
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
X!lw4y|2_Uwf${mHs$8XvQQ-do;aw2N

literal 0
HcmV?d00001

diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index 497f72ec1..a8e3d8809 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -1,3 +1,793 @@
 <template>
-  <span>开发中</span>
+  <div class="app-container">
+    <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
+
+    <!-- 搜索工作栏 -->
+    <el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="公众号" prop="accountId">
+        <el-select v-model="accountId" placeholder="请选择公众号">
+          <el-option
+            v-for="item in accountList"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="public-account-management clearfix" v-loading="loading">
+      <!--左边配置菜单-->
+      <div class="left">
+        <div class="weixin-hd">
+          <div class="weixin-title">{{ name }}</div>
+        </div>
+        <div class="weixin-menu menu_main clearfix">
+          <div class="menu_bottom" v-for="(item, i) of menuList" :key="i">
+            <!-- 一级菜单 -->
+            <div @click="menuClick(i, item)" class="menu_item" :class="{ active: isActive === i }"
+              ><Icon icon="ep:fold" color="black" />{{ item.name }}
+            </div>
+            <!-- 以下为二级菜单-->
+            <div class="submenu" v-if="isSubMenuFlag === i">
+              <div class="subtitle menu_bottom" v-for="(subItem, k) in item.children" :key="k">
+                <div
+                  class="menu_subItem"
+                  v-if="item.children"
+                  :class="{ active: isSubMenuActive === i + '' + k }"
+                  @click="subMenuClick(subItem, i, k)"
+                >
+                  {{ subItem.name }}
+                </div>
+              </div>
+              <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
+              <div
+                class="menu_bottom menu_addicon"
+                v-if="!item.children || item.children.length < 5"
+                @click="addSubMenu(i, item)"
+              >
+                <Icon icon="ep:plus" />
+              </div>
+            </div>
+          </div>
+          <!-- 一级菜单加号 -->
+          <div class="menu_bottom menu_addicon" v-if="menuList.length < 3" @click="addMenu">
+            <Icon icon="ep:plus" />
+          </div>
+        </div>
+        <div class="save_div">
+          <el-button
+            class="save_btn"
+            type="success"
+            size="small"
+            @click="handleSave"
+            v-hasPermi="['mp:menu:save']"
+            >保存并发布菜单</el-button
+          >
+          <el-button
+            class="save_btn"
+            type="danger"
+            size="small"
+            @click="handleDelete"
+            v-hasPermi="['mp:menu:delete']"
+            >清空菜单</el-button
+          >
+        </div>
+      </div>
+      <!--右边配置-->
+      <div v-if="showRightFlag" class="right">
+        <div class="configure_page">
+          <div class="delete_btn">
+            <el-button size="small" type="danger" @click="handleDeleteMenu(tempObj)"
+              >删除当前菜单<Icon icon="ep:delete"
+            /></el-button>
+          </div>
+          <div>
+            <span>菜单名称：</span>
+            <el-input
+              class="input_width"
+              v-model="tempObj.name"
+              placeholder="请输入菜单名称"
+              :maxlength="nameMaxLength"
+              clearable
+            />
+          </div>
+          <div v-if="showConfigureContent">
+            <div class="menu_content">
+              <span>菜单标识：</span>
+              <el-input
+                class="input_width"
+                v-model="tempObj.menuKey"
+                placeholder="请输入菜单 KEY"
+                clearable
+              />
+            </div>
+            <div class="menu_content">
+              <span>菜单内容：</span>
+              <el-select v-model="tempObj.type" clearable placeholder="请选择" class="menu_option">
+                <el-option
+                  v-for="item in menuOptions"
+                  :label="item.label"
+                  :value="item.value"
+                  :key="item.value"
+                />
+              </el-select>
+            </div>
+            <div class="configur_content" v-if="tempObj.type === 'view'">
+              <span>跳转链接：</span>
+              <el-input
+                class="input_width"
+                v-model="tempObj.url"
+                placeholder="请输入链接"
+                clearable
+              />
+            </div>
+            <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
+              <div class="applet">
+                <span>小程序的 appid ：</span>
+                <el-input
+                  class="input_width"
+                  v-model="tempObj.miniProgramAppId"
+                  placeholder="请输入小程序的appid"
+                  clearable
+                />
+              </div>
+              <div class="applet">
+                <span>小程序的页面路径：</span>
+                <el-input
+                  class="input_width"
+                  v-model="tempObj.miniProgramPagePath"
+                  placeholder="请输入小程序的页面路径，如：pages/index"
+                  clearable
+                />
+              </div>
+              <div class="applet">
+                <span>小程序的备用网页：</span>
+                <el-input
+                  class="input_width"
+                  v-model="tempObj.url"
+                  placeholder="不支持小程序的老版本客户端将打开本网页"
+                  clearable
+                />
+              </div>
+              <p class="blue">tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！</p>
+            </div>
+            <div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
+              <el-row>
+                <div class="select-item" v-if="tempObj && tempObj.replyArticles">
+                  <WxNews :articles="tempObj.replyArticles" />
+                  <el-row class="ope-row" justify="center" align="middle">
+                    <el-button type="danger" circle @click="deleteMaterial"
+                      ><icon icon="ep:delete"
+                    /></el-button>
+                  </el-row>
+                </div>
+                <div v-else>
+                  <el-row justify="center">
+                    <el-col :span="24" style="text-align: center">
+                      <el-button type="success" @click="openMaterial">
+                        素材库选择<Icon icon="ep:circle-check" />
+                      </el-button>
+                    </el-col>
+                  </el-row>
+                </div>
+                <el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%">
+                  <WxMaterialSelect
+                    :objData="{ type: 'news', accountId: accountId }"
+                    @select-material="selectMaterial"
+                  />
+                </el-dialog>
+              </el-row>
+            </div>
+            <div
+              class="configur_content"
+              v-if="tempObj.type === 'click' || tempObj.type === 'scancode_waitmsg'"
+            >
+              <WxReplySelect :objData="tempObj.reply" v-if="hackResetWxReplySelect" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
+      <div v-else class="right">
+        <p>请选择菜单配置</p>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
+import { deleteMenu, getMenuList, saveMenu } from '@/api/mp/menu'
+import { getSimpleAccountList } from '@/api/mp/account'
+import { handleTree } from '@/utils/tree'
+import menuOptions from './menuOptions'
+
+const message = useMessage()
+
+// ======================== 列表查询 ========================
+// 遮罩层
+const loading = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 公众号Id
+const accountId = ref(undefined)
+// 公众号名
+const name = ref('')
+const menuList = ref({ children: [] })
+
+// const menuList = ref(menuListData)
+// ======================== 菜单操作 ========================
+const isActive = ref(-1) // 一级菜单点中样式
+const isSubMenuActive = ref(-1) // 一级菜单点中样式
+const isSubMenuFlag = ref(-1) // 二级菜单显示标志
+
+// ======================== 菜单编辑 ========================
+const showRightFlag = ref(false) // 右边配置显示默认详情还是配置详情
+const nameMaxLength = ref(0) // 菜单名称最大长度；1 级是 4 字符；2 级是 7 字符；
+const showConfigureContent = ref(true) // 是否展示配置内容；如果有子菜单，就不显示配置内容
+const hackResetWxReplySelect = ref(false) // 重置 WxReplySelect 组件
+const tempObj = ref({}) // 右边临时变量，作为中间值牵引关系
+
+const tempSelfObj = ref({
+  // 一些临时值放在这里进行判断，如果放在 tempObj，由于引用关系，menu 也会多了多余的参数
+})
+const dialogNewsVisible = ref(false) // 跳转图文时的素材选择弹窗
+
+// 公众号账号列表
+const accountList = ref([])
+
+onMounted(async () => {
+  accountList.value = await getSimpleAccountList()
+  // 选中第一个
+  if (accountList.value.length > 0) {
+    // @ts-ignore
+    setAccountId(accountList.value[0].id)
+  }
+  await getList()
+})
+
+// ======================== 列表查询 ========================
+/** 设置账号编号 */
+const setAccountId = (id) => {
+  accountId.value = id
+  name.value = accountList.value.find((item) => item.id === accountId.value)?.name
+}
+
+const getList = async () => {
+  loading.value = false
+  getMenuList(accountId.value)
+    .then((response) => {
+      const menuData = convertMenuList(response)
+      menuList.value = handleTree(menuData, 'id')
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  resetForm()
+  // 默认选中第一个
+  if (accountId.value) {
+    setAccountId(accountId.value)
+  }
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  resetForm()
+  // 默认选中第一个
+  if (accountList.value.length > 0) {
+    setAccountId(accountList.value[0].id)
+  }
+  handleQuery()
+}
+
+// 将后端返回的 menuList，转换成前端的 menuList
+const convertMenuList = (list) => {
+  if (!list) return []
+
+  const menuList = []
+  list.forEach((item) => {
+    const menu = {
+      ...item
+    }
+    if (item.type === 'click' || item.type === 'scancode_waitmsg') {
+      delete menu.replyMessageType
+      delete menu.replyContent
+      delete menu.replyMediaId
+      delete menu.replyMediaUrl
+      delete menu.replyDescription
+      delete menu.replyArticles
+      menu.reply = {
+        type: item.replyMessageType,
+        accountId: item.accountId,
+        content: item.replyContent,
+        mediaId: item.replyMediaId,
+        url: item.replyMediaUrl,
+        title: item.replyTitle,
+        description: item.replyDescription,
+        thumbMediaId: item.replyThumbMediaId,
+        thumbMediaUrl: item.replyThumbMediaUrl,
+        articles: item.replyArticles,
+        musicUrl: item.replyMusicUrl,
+        hqMusicUrl: item.replyHqMusicUrl
+      }
+    }
+    menuList.push(menu)
+  })
+  return menuList
+}
+
+// 重置表单，清空表单数据
+const resetForm = () => {
+  // 菜单操作
+  isActive.value = -1
+  isSubMenuActive.value = -1
+  isSubMenuFlag.value = -1
+
+  // 菜单编辑
+  showRightFlag.value = false
+  nameMaxLength.value = 0
+  showConfigureContent.value = 0
+  hackResetWxReplySelect.value = false
+  tempObj.value = {}
+  tempSelfObj.value = {}
+  dialogNewsVisible.value = false
+}
+
+// ======================== 菜单操作 ========================
+// 一级菜单点击事件
+const menuClick = (i, item) => {
+  // 右侧的表单相关
+  resetEditor()
+  showRightFlag.value = true // 右边菜单
+  tempObj.value = item // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+  tempSelfObj.value.grand = '1' // 表示一级菜单
+  tempSelfObj.value.index = i // 表示一级菜单索引
+  nameMaxLength.value = 4
+  showConfigureContent.value = !(item.children && item.children.length > 0) // 有子菜单，就不显示配置内容
+
+  // 左侧的选中
+  isActive.value = i // 一级菜单选中样式
+  isSubMenuFlag.value = i // 二级菜单显示标志
+  isSubMenuActive.value = -1 // 二级菜单去除选中样式
+}
+
+// 二级菜单点击事件
+const subMenuClick = (subItem, index, k) => {
+  // 右侧的表单相关
+  resetEditor()
+  showRightFlag.value = true // 右边菜单
+  console.log(subItem)
+  tempObj.value = subItem // 将点击的数据放到临时变量，对象有引用作用
+  tempSelfObj.value.grand = '2' // 表示二级菜单
+  tempSelfObj.value.index = index // 表示一级菜单索引
+  tempSelfObj.value.secondIndex = k // 表示二级菜单索引
+  nameMaxLength.value = 7
+  showConfigureContent.value = true
+
+  // 左侧的选中
+  isActive.value = -1 // 一级菜单去除样式
+  isSubMenuActive.value = index + '' + k // 二级菜单选中样式
+}
+
+// 添加横向一级菜单
+const addMenu = () => {
+  const menuKeyLength = menuList.value.length
+  const addButton = {
+    name: '菜单名称',
+    children: [],
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: accountId.value // 保证组件里，可以使用到对应的公众号
+    }
+  }
+  menuList.value[menuKeyLength] = addButton
+  menuClick(menuKeyLength.value - 1, addButton)
+}
+// 添加横向二级菜单；item 表示要操作的父菜单
+const addSubMenu = (i, item) => {
+  // 清空父菜单的属性，因为它只需要 name 属性即可
+  if (!item.children || item.children.length <= 0) {
+    item.children = []
+    delete item['type']
+    delete item['menuKey']
+    delete item['miniProgramAppId']
+    delete item['miniProgramPagePath']
+    delete item['url']
+    delete item['reply']
+    delete item['articleId']
+    delete item['replyArticles']
+    // 关闭配置面板
+    showConfigureContent.value = false
+  }
+
+  let subMenuKeyLength = item.children.length // 获取二级菜单key长度
+  let addButton = {
+    name: '子菜单名称',
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: accountId.value // 保证组件里，可以使用到对应的公众号
+    }
+  }
+  item.children[subMenuKeyLength] = addButton
+  subMenuClick(item.children[subMenuKeyLength], i, subMenuKeyLength)
+}
+
+// 删除当前菜单
+const handleDeleteMenu = async () => {
+  try {
+    await message.confirm('确定要删除吗?')
+    if (tempSelfObj.value.grand === '1') {
+      // 一级菜单的删除方法
+      menuList.value.splice(tempSelfObj.value.index, 1)
+    } else if (tempSelfObj.value.grand === '2') {
+      // 二级菜单的删除方法
+      menuList.value[tempSelfObj.value.index].children.splice(tempSelfObj.value.secondIndex, 1)
+    }
+    // 提示
+    message.notifySuccess('删除成功')
+
+    // 处理菜单的选中
+    tempObj.value = {}
+    showRightFlag.value = false
+    isActive.value = -1
+    isSubMenuActive.value = -1
+  } catch {}
+}
+
+// ======================== 菜单编辑 ========================
+const handleSave = async () => {
+  try {
+    await message.confirm('确定要删除吗?')
+    loading.value = true
+    await saveMenu(accountId.value, convertMenuFormList())
+    getList()
+    message.notifySuccess('发布成功')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 表单 Editor 重置
+const resetEditor = () => {
+  hackResetWxReplySelect.value = false // 销毁组件
+  nextTick(() => {
+    console.log('nextTick')
+    hackResetWxReplySelect.value = true // 重建组件
+  })
+}
+
+const handleDelete = async () => {
+  try {
+    await message.confirm('确定要删除吗?')
+    loading.value = true
+    await deleteMenu(accountId.value)
+    handleQuery()
+    message.notifySuccess('清空成功')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 将前端的 menuList，转换成后端接收的 menuList
+const convertMenuFormList = () => {
+  const result = []
+  menuList.value.forEach((item) => {
+    let menu = convertMenuForm(item)
+    result.push(menu)
+
+    // 处理子菜单
+    if (!item.children || item.children.length <= 0) {
+      return
+    }
+    menu.children = []
+    item.children.forEach((subItem) => {
+      menu.children.push(convertMenuForm(subItem))
+    })
+  })
+  return result
+}
+
+// 将前端的 menu，转换成后端接收的 menu
+const convertMenuForm = (menu) => {
+  let result = {
+    ...menu,
+    children: undefined, // 不处理子节点
+    reply: undefined // 稍后复制
+  }
+  if (menu.type === 'click' || menu.type === 'scancode_waitmsg') {
+    result.replyMessageType = menu.reply.type
+    result.replyContent = menu.reply.content
+    result.replyMediaId = menu.reply.mediaId
+    result.replyMediaUrl = menu.reply.url
+    result.replyTitle = menu.reply.title
+    result.replyDescription = menu.reply.description
+    result.replyThumbMediaId = menu.reply.thumbMediaId
+    result.replyThumbMediaUrl = menu.reply.thumbMediaUrl
+    result.replyArticles = menu.reply.articles
+    result.replyMusicUrl = menu.reply.musicUrl
+    result.replyHqMusicUrl = menu.reply.hqMusicUrl
+  }
+  return result
+}
+
+// ======================== 菜单编辑（素材选择） ========================
+const openMaterial = () => {
+  dialogNewsVisible.value = true
+}
+
+const selectMaterial = (item) => {
+  const articleId = item.articleId
+  const articles = item.content.newsItem
+  // 提示，针对多图文
+  if (articles.length > 1) {
+    message.alertWarning('您选择的是多图文，将默认跳转第一篇')
+  }
+  dialogNewsVisible.value = false
+
+  // 设置菜单的回复
+  tempObj.value.articleId = articleId
+  tempObj.value.replyArticles = []
+  articles.forEach((article) => {
+    tempObj.value.replyArticles.push({
+      title: article.title,
+      description: article.digest,
+      picUrl: article.picUrl,
+      url: article.url
+    })
+  })
+}
+
+const deleteMaterial = () => {
+  delete tempObj.value['articleId']
+  delete tempObj.value['replyArticles']
+}
+</script>
+<!--本组件样式-->
+<style lang="scss" scoped="scoped">
+/* 公共颜色变量 */
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+div {
+  text-align: left;
+}
+
+.weixin-hd {
+  color: #fff;
+  text-align: center;
+  position: relative;
+  bottom: 426px;
+  left: 0px;
+  width: 300px;
+  height: 64px;
+  background: transparent url('./assets/menu_head.png') no-repeat 0 0;
+  background-position: 0 0;
+  background-size: 100%;
+}
+
+.weixin-title {
+  color: #fff;
+  font-size: 14px;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 33px;
+  left: 0px;
+}
+
+.weixin-menu {
+  background: transparent url('./assets/menu_foot.png') no-repeat 0 0;
+  padding-left: 43px;
+  font-size: 12px;
+}
+
+.menu_option {
+  width: 40% !important;
+}
+
+.public-account-management {
+  min-width: 1200px;
+  width: 1200px;
+  margin: 0 auto;
+
+  .left {
+    float: left;
+    display: inline-block;
+    width: 350px;
+    height: 715px;
+    background: url('./assets/iphone_backImg.png') no-repeat;
+    background-size: 100% auto;
+    padding: 518px 25px 88px;
+    position: relative;
+    box-sizing: border-box;
+
+    /*第一级菜单*/
+    .menu_main {
+      .menu_bottom {
+        position: relative;
+        float: left;
+        display: inline-block;
+        box-sizing: border-box;
+        width: 85.5px;
+        text-align: center;
+        border: 1px solid #ebedee;
+        background-color: #fff;
+        cursor: pointer;
+
+        &.menu_addicon {
+          height: 46px;
+          line-height: 46px;
+        }
+
+        .menu_item {
+          height: 44px;
+          line-height: 44px;
+          // text-align: center;
+          box-sizing: border-box;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &.active {
+            border: 1px solid #2bb673;
+          }
+        }
+
+        .menu_subItem {
+          height: 44px;
+          line-height: 44px;
+          text-align: center;
+          box-sizing: border-box;
+
+          &.active {
+            border: 1px solid #2bb673;
+          }
+        }
+      }
+
+      i {
+        color: #2bb673;
+      }
+
+      /*第二级菜单*/
+      .submenu {
+        position: absolute;
+        width: 85.5px;
+        bottom: 45px;
+
+        .subtitle {
+          background-color: #fff;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    .save_div {
+      margin-top: 15px;
+      text-align: center;
+
+      .save_btn {
+        bottom: 20px;
+        left: 100px;
+      }
+    }
+  }
+
+  /*右边菜单内容*/
+  .right {
+    float: left;
+    width: 63%;
+    background-color: #e8e7e7;
+    padding: 20px;
+    margin-left: 20px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    .configure_page {
+      .delete_btn {
+        text-align: right;
+        margin-bottom: 15px;
+      }
+
+      .menu_content {
+        margin-top: 20px;
+      }
+
+      .configur_content {
+        margin-top: 20px;
+        background-color: #fff;
+        padding: 20px 10px;
+        border-radius: 5px;
+      }
+
+      .blue {
+        color: #29b6f6;
+        margin-top: 10px;
+      }
+
+      .applet {
+        margin-bottom: 20px;
+
+        span {
+          width: 20%;
+        }
+      }
+
+      .input_width {
+        width: 40%;
+      }
+
+      .material {
+        .input_width {
+          width: 30%;
+        }
+
+        .el-textarea {
+          width: 80%;
+        }
+      }
+    }
+  }
+
+  .el-input {
+    width: 70%;
+    margin-right: 2%;
+  }
+}
+</style>
+<!--素材样式-->
+<style lang="scss" scoped>
+.pagination {
+  text-align: right;
+  margin-right: 25px;
+}
+
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+
+.select-item2 {
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.item-name {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+</style>
diff --git a/src/views/mp/menu/menuOptions.js b/src/views/mp/menu/menuOptions.js
new file mode 100644
index 000000000..d86dd789c
--- /dev/null
+++ b/src/views/mp/menu/menuOptions.js
@@ -0,0 +1,42 @@
+export default [
+  {
+    value: 'view',
+    label: '跳转网页'
+  },
+  {
+    value: 'miniprogram',
+    label: '跳转小程序'
+  },
+  {
+    value: 'click',
+    label: '点击回复'
+  },
+  {
+    value: 'article_view_limited',
+    label: '跳转图文消息'
+  },
+  {
+    value: 'scancode_push',
+    label: '扫码直接返回结果'
+  },
+  {
+    value: 'scancode_waitmsg',
+    label: '扫码回复'
+  },
+  {
+    value: 'pic_sysphoto',
+    label: '系统拍照发图'
+  },
+  {
+    value: 'pic_photo_or_album',
+    label: '拍照或者相册'
+  },
+  {
+    value: 'pic_weixin',
+    label: '微信相册'
+  },
+  {
+    value: 'location_select',
+    label: '选择地理位置'
+  }
+]

From 0ffa807343f940ae57b3fadbfccb6733bfba3f5e Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 8 Apr 2023 10:18:10 +0800
Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=E5=BE=AE=E4=BF=A1=E8=8D=89?=
 =?UTF-8?q?=E7=A8=BF=E7=AE=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/draft/index.vue | 820 ++++++++++++++++++++++++++++++++++-
 src/views/mp/draft/mock.js   | 151 +++++++
 2 files changed, 970 insertions(+), 1 deletion(-)
 create mode 100644 src/views/mp/draft/mock.js

diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index 497f72ec1..6a4fa31a3 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -1,3 +1,821 @@
 <template>
-  <span>开发中</span>
+  <div class="app-container">
+    <doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
+      <el-form-item label="公众号" prop="accountId">
+        <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
+          <el-option
+            v-for="item in accountList"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          size="small"
+          @click="handleAdd"
+          v-hasPermi="['mp:draft:create']"
+          ><Icon icon="ep:plus" />新增
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <!-- 列表 -->
+    <div class="waterfall" v-loading="loading">
+      <template v-for="item in list" :key="item.articleId">
+        <div class="waterfall-item" v-if="item.content && item.content.newsItem">
+          <wx-news :articles="item.content.newsItem" />
+          <!-- 操作按钮 -->
+          <el-row class="ope-row">
+            <el-button
+              type="success"
+              circle
+              @click="handlePublish(item)"
+              v-hasPermi="['mp:free-publish:submit']"
+              ><Icon icon="fa:upload"
+            /></el-button>
+            <el-button
+              type="primary"
+              circle
+              @click="handleUpdate(item)"
+              v-hasPermi="['mp:draft:update']"
+              ><Icon icon="ep:edit"
+            /></el-button>
+            <el-button
+              type="danger"
+              circle
+              @click="handleDelete(item)"
+              v-hasPermi="['mp:draft:delete']"
+              ><Icon icon="ep:delete"
+            /></el-button>
+          </el-row>
+        </div>
+      </template>
+    </div>
+    <!-- 分页记录 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改草稿对话框 -->
+    <Teleport to="body">
+      <el-dialog
+        :title="operateMaterial === 'add' ? '新建图文' : '修改图文'"
+        width="80%"
+        top="20px"
+        v-model="dialogNewsVisible"
+        :before-close="dialogNewsClose"
+        :close-on-click-modal="false"
+      >
+        <div class="left">
+          <div class="select-item">
+            <div v-for="(news, index) in articlesAdd" :key="news.id">
+              <div
+                class="news-main father"
+                v-if="index === 0"
+                :class="{ activeAddNews: isActiveAddNews === index }"
+                @click="activeNews(index)"
+              >
+                <div class="news-content">
+                  <img class="material-img" v-if="news.thumbUrl" :src="news.thumbUrl" />
+                  <div class="news-content-title">{{ news.title }}</div>
+                </div>
+                <div class="child" v-if="articlesAdd.length > 1">
+                  <el-button size="small" @click="downNews(index)"
+                    ><Icon icon="ep:sort-down" />下移</el-button
+                  >
+                  <el-button v-if="operateMaterial === 'add'" size="small" @click="minusNews(index)"
+                    ><Icon icon="ep:delete" />删除
+                  </el-button>
+                </div>
+              </div>
+              <div
+                class="news-main-item father"
+                v-if="index > 0"
+                :class="{ activeAddNews: isActiveAddNews === index }"
+                @click="activeNews(index)"
+              >
+                <div class="news-content-item">
+                  <div class="news-content-item-title">{{ news.title }}</div>
+                  <div class="news-content-item-img">
+                    <img
+                      class="material-img"
+                      v-if="news.thumbUrl"
+                      :src="news.thumbUrl"
+                      height="100%"
+                    />
+                  </div>
+                </div>
+                <div class="child">
+                  <el-button
+                    v-if="articlesAdd.length > index + 1"
+                    size="small"
+                    @click="downNews(index)"
+                    ><Icon icon="ep:sort-down" />下移
+                  </el-button>
+                  <el-button size="small" @click="upNews(index)"
+                    ><Icon icon="ep:sort-up" />上移</el-button
+                  >
+                  <el-button
+                    v-if="operateMaterial === 'add'"
+                    type="danger"
+                    size="small"
+                    @click="minusNews(index)"
+                    ><Icon icon="ep:delete" />删除
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <el-row justify="center" class="ope-row">
+              <el-button
+                type="primary"
+                circle
+                @click="plusNews(item)"
+                v-if="articlesAdd.length < 8 && operateMaterial === 'add'"
+              >
+                <Icon icon="ep:plus" />
+              </el-button>
+            </el-row>
+          </div>
+        </div>
+        <div class="right" v-loading="addMaterialLoading" v-if="articlesAdd.length > 0">
+          <br />
+          <br />
+          <br />
+          <br />
+          <!-- 标题、作者、原文地址 -->
+          <el-input v-model="articlesAdd[isActiveAddNews].title" placeholder="请输入标题（必填）" />
+          <el-input
+            v-model="articlesAdd[isActiveAddNews].author"
+            placeholder="请输入作者"
+            style="margin-top: 5px"
+          />
+          <el-input
+            v-model="articlesAdd[isActiveAddNews].contentSourceUrl"
+            placeholder="请输入原文地址"
+            style="margin-top: 5px"
+          />
+          <!-- 封面和摘要 -->
+          <div class="input-tt">封面和摘要：</div>
+          <div>
+            <div class="thumb-div">
+              <img
+                class="material-img"
+                v-if="articlesAdd[isActiveAddNews].thumbUrl"
+                :src="articlesAdd[isActiveAddNews].thumbUrl"
+                :class="isActiveAddNews === 0 ? 'avatar' : 'avatar1'"
+              />
+              <Icon
+                v-else
+                icon="ep:plus"
+                class="avatar-uploader-icon"
+                :class="isActiveAddNews === 0 ? 'avatar' : 'avatar1'"
+              />
+              <div class="thumb-but">
+                <el-upload
+                  :action="actionUrl"
+                  :headers="headers"
+                  multiple
+                  :limit="1"
+                  :file-list="fileList"
+                  :data="uploadData"
+                  :before-upload="beforeThumbImageUpload"
+                  :on-success="handleUploadSuccess"
+                >
+                  <template #trigger>
+                    <el-button size="small" type="primary">本地上传</el-button>
+                  </template>
+                  <el-button
+                    size="small"
+                    type="primary"
+                    @click="openMaterial"
+                    style="margin-left: 5px"
+                    >素材库选择</el-button
+                  >
+                  <template #tip>
+                    <div class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div>
+                  </template>
+                </el-upload>
+              </div>
+              <Teleport to="body">
+                <el-dialog title="选择图片" v-model="dialogImageVisible" width="80%">
+                  <WxMaterialSelect
+                    ref="materialSelectRef"
+                    :objData="{ type: 'image', accountId: queryParams.accountId }"
+                    @select-material="selectMaterial"
+                  />
+                </el-dialog>
+              </Teleport>
+            </div>
+            <el-input
+              :rows="8"
+              type="textarea"
+              v-model="articlesAdd[isActiveAddNews].digest"
+              placeholder="请输入摘要"
+              class="digest"
+              maxlength="120"
+              style="float: right"
+            />
+          </div>
+          <!--富文本编辑器组件-->
+          <el-row>
+            <wx-editor
+              v-model="articlesAdd[isActiveAddNews].content"
+              :account-id="uploadData.accountId"
+              v-if="hackResetEditor"
+            />
+          </el-row>
+        </div>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="dialogNewsVisible = false">取 消</el-button>
+            <el-button type="primary" @click="submitForm">提 交</el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </Teleport>
+  </div>
 </template>
+
+<script setup name="MpDraft">
+import { ref, onMounted, reactive, nextTick } from 'vue'
+import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue'
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
+import { getAccessToken } from '@/utils/auth'
+import { createDraft, deleteDraft, getDraftPage, updateDraft } from '@/api/mp/draft'
+import { getSimpleAccountList } from '@/api/mp/account'
+import { submitFreePublish } from '@/api/mp/freePublish'
+// 可以用改本地数据模拟，避免API调用超限
+// import drafts from './mock'
+
+const BASE_URL = import.meta.env.VITE_BASE_URL
+
+const message = useMessage()
+
+const materialSelectRef = ref()
+const queryFormRef = ref()
+
+// 遮罩层
+const loading = ref(false)
+// 显示搜索条件
+// 总条数
+const total = ref(0)
+// 数据列表
+const list = ref([])
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  accountId: undefined
+})
+
+// ========== 文件上传 ==========
+const actionUrl = ref(BASE_URL + '/admin-api/mp/material/upload-permanent') // 上传永久素材的地址
+const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
+const fileList = ref([])
+const uploadData = reactive({
+  type: 'image',
+  accountId: 1
+})
+
+// ========== 草稿新建 or 修改 ==========
+const dialogNewsVisible = ref(false)
+const addMaterialLoading = ref(false) // 添加草稿的 loading 标识
+const articlesAdd = ref([])
+const isActiveAddNews = ref(0)
+const dialogImageVisible = ref(false)
+const operateMaterial = ref('add')
+const articlesMediaId = ref('')
+const hackResetEditor = ref(false)
+// 公众号账号列表
+const accountList = ref([])
+
+onMounted(async () => {
+  accountList.value = await getSimpleAccountList()
+  // 选中第一个
+  if (accountList.value.length > 0) {
+    // @ts-ignore
+    queryParams.accountId = accountList.value[0].id
+  }
+  await getList()
+})
+
+// ======================== 列表查询 ========================
+/** 设置账号编号 */
+const setAccountId = (accountId) => {
+  queryParams.accountId = accountId
+  uploadData.accountId = accountId
+}
+
+/** 查询列表 */
+const getList = async () => {
+  // 如果没有选中公众号账号，则进行提示。
+  if (!queryParams.accountId) {
+    message.error('未选中公众号，无法查询草稿箱')
+    return false
+  }
+
+  loading.value = true
+  try {
+    const drafts = await getDraftPage(queryParams)
+    drafts.list.forEach((item) => {
+      const newsItem = item.content.newsItem
+      // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
+      newsItem.forEach((article) => {
+        article.picUrl = article.thumbUrl
+      })
+    })
+    list.value = drafts.list
+    total.value = drafts.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  // 默认选中第一个
+  if (queryParams.accountId) {
+    setAccountId(queryParams.accountId)
+  }
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  // 默认选中第一个
+  if (accountList.value.length > 0) {
+    setAccountId(accountList.value[0].id)
+  }
+  handleQuery()
+}
+
+// ======================== 新增/修改草稿 ========================
+/** 新增按钮操作 */
+const handleAdd = () => {
+  resetEditor()
+  reset()
+  // 打开表单，并设置初始化
+  operateMaterial.value = 'add'
+  dialogNewsVisible.value = true
+}
+
+/** 更新按钮操作 */
+const handleUpdate = (item) => {
+  resetEditor()
+  reset()
+  articlesMediaId.value = item.mediaId
+  articlesAdd.value = JSON.parse(JSON.stringify(item.content.newsItem))
+  // 打开表单，并设置初始化
+  operateMaterial.value = 'edit'
+  dialogNewsVisible.value = true
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+  addMaterialLoading.value = true
+  if (operateMaterial.value === 'add') {
+    createDraft(queryParams.accountId, articlesAdd.value)
+      .then(() => {
+        message.notifySuccess('新增成功')
+        dialogNewsVisible.value = false
+        getList()
+      })
+      .finally(() => {
+        addMaterialLoading.value = false
+      })
+  } else {
+    updateDraft(queryParams.accountId, articlesMediaId.value, articlesAdd.value)
+      .then(() => {
+        message.notifySuccess('更新成功')
+        dialogNewsVisible.value = false
+        getList()
+      })
+      .finally(() => {
+        addMaterialLoading.value = false
+      })
+  }
+}
+
+// 关闭弹窗
+const dialogNewsClose = async (done) => {
+  try {
+    await message.confirm('修改内容可能还未保存，确定关闭吗?')
+    reset()
+    resetEditor()
+    done()
+  } catch {}
+}
+
+// 表单重置
+const reset = () => {
+  isActiveAddNews.value = 0
+  articlesAdd.value = [buildEmptyArticle()]
+}
+
+// 表单 Editor 重置
+const resetEditor = () => {
+  hackResetEditor.value = false // 销毁组件
+  nextTick(() => {
+    hackResetEditor.value = true // 重建组件
+  })
+}
+
+// 将图文向下移动
+const downNews = (index) => {
+  let temp = articlesAdd.value[index]
+  articlesAdd.value[index] = articlesAdd.value[index + 1]
+  articlesAdd.value[index + 1] = temp
+  isActiveAddNews.value = index + 1
+}
+
+// 将图文向上移动
+const upNews = (index) => {
+  let temp = articlesAdd.value[index]
+  articlesAdd.value[index] = articlesAdd.value[index - 1]
+  articlesAdd.value[index - 1] = temp
+  isActiveAddNews.value = index - 1
+}
+
+// 选中指定 index 的图文
+const activeNews = (index) => {
+  resetEditor()
+  isActiveAddNews.value = index
+}
+
+// 删除指定 index 的图文
+const minusNews = async (index) => {
+  try {
+    await message.confirm('确定删除该图文吗?')
+    articlesAdd.value.splice(index, 1)
+    if (isActiveAddNews.value === index) {
+      isActiveAddNews.value = 0
+    }
+  } catch {}
+}
+
+// 添加一个图文
+const plusNews = () => {
+  articlesAdd.value.push(buildEmptyArticle())
+  isActiveAddNews.value = articlesAdd.value.length - 1
+}
+
+// 创建空的 article
+const buildEmptyArticle = () => {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: '',
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: '',
+    onlyFansCanComment: '',
+    thumbUrl: ''
+  }
+}
+
+// ======================== 文件上传 ========================
+const beforeThumbImageUpload = (file) => {
+  addMaterialLoading.value = true
+  const isType =
+    file.type === 'image/jpeg' ||
+    file.type === 'image/png' ||
+    file.type === 'image/gif' ||
+    file.type === 'image/bmp' ||
+    file.type === 'image/jpg'
+  if (!isType) {
+    message.error('上传图片格式不对!')
+    addMaterialLoading.value = false
+    return false
+  }
+  const isLt = file.size / 1024 / 1024 < 2
+  if (!isLt) {
+    message.error('上传图片大小不能超过 2M!')
+    addMaterialLoading.value = false
+    return false
+  }
+  // 校验通过
+  return true
+}
+
+const handleUploadSuccess = (response, file, fileList) => {
+  addMaterialLoading.value = false
+  if (response.code !== 0) {
+    message.error('上传出错：' + response.msg)
+    return false
+  }
+
+  // 重置上传文件的表单
+  fileList.value = []
+
+  // 设置草稿的封面字段
+  articlesAdd.value[isActiveAddNews.value].thumbMediaId = response.data.mediaId
+  articlesAdd.value[isActiveAddNews.value].thumbUrl = response.data.url
+}
+
+// 选择 or 上传完素材，设置回草稿
+const selectMaterial = (item) => {
+  dialogImageVisible.value = false
+  articlesAdd.value[isActiveAddNews.value].thumbMediaId = item.mediaId
+  articlesAdd.value[isActiveAddNews.value].thumbUrl = item.url
+}
+
+// 打开素材选择
+const openMaterial = () => {
+  dialogImageVisible.value = true
+  try {
+    materialSelectRef.value.queryParams.accountId = queryParams.accountId // 强制设置下 accountId，避免二次查询不对
+    materialSelectRef.value.handleQuery() // 刷新列表，失败也无所谓
+  } catch (e) {}
+}
+
+// ======================== 草稿箱发布 ========================
+const handlePublish = async (item) => {
+  const accountId = queryParams.accountId
+  const mediaId = item.mediaId
+  const content =
+    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。已发布内容不会推送给用户，也不会展示在公众号主页中。 发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。'
+  try {
+    await message.confirm(content)
+    await submitFreePublish(accountId, mediaId)
+    getList()
+    message.notifySuccess('发布成功')
+  } catch {}
+}
+
+const handleDelete = async (item) => {
+  const accountId = queryParams.accountId
+  const mediaId = item.mediaId
+  try {
+    await message.confirm('此操作将永久删除该草稿, 是否继续?')
+    await deleteDraft(accountId, mediaId)
+    getList()
+    message.notifySuccess('删除成功')
+  } catch {}
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination {
+  float: right;
+  margin-right: 25px;
+}
+
+.add_but {
+  padding: 10px;
+}
+
+.ope-row {
+  margin-top: 5px;
+  text-align: center;
+  border-top: 1px solid #eaeaea;
+  padding-top: 5px;
+}
+
+.item-name {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.el-upload__tip {
+  margin-left: 5px;
+}
+
+/*新增图文*/
+.left {
+  display: inline-block;
+  width: 35%;
+  vertical-align: top;
+  margin-top: 200px;
+}
+
+.right {
+  display: inline-block;
+  width: 60%;
+  margin-top: -40px;
+}
+
+.avatar-uploader {
+  width: 20%;
+  display: inline-block;
+}
+
+.avatar-uploader .el-upload {
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  text-align: unset !important;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #165dff;
+}
+
+.avatar-uploader-icon {
+  border: 1px solid #d9d9d9;
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+
+.avatar {
+  width: 230px;
+  height: 120px;
+}
+
+.avatar1 {
+  width: 120px;
+  height: 120px;
+}
+
+.digest {
+  width: 60%;
+  display: inline-block;
+  vertical-align: top;
+}
+
+/*新增图文*/
+/*瀑布流样式*/
+.waterfall {
+  width: 100%;
+  column-gap: 10px;
+  column-count: 5;
+  margin: 0 auto;
+}
+
+.waterfall-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  break-inside: avoid;
+  border: 1px solid #eaeaea;
+}
+
+p {
+  line-height: 30px;
+}
+
+@media (min-width: 992px) and (max-width: 1300px) {
+  .waterfall {
+    column-count: 3;
+  }
+
+  p {
+    color: red;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .waterfall {
+    column-count: 2;
+  }
+
+  p {
+    color: orange;
+  }
+}
+
+@media (max-width: 767px) {
+  .waterfall {
+    column-count: 1;
+  }
+}
+
+/*瀑布流样式*/
+.news-main {
+  background-color: #ffffff;
+  width: 100%;
+  margin: auto;
+  height: 120px;
+}
+
+.news-content {
+  background-color: #acadae;
+  width: 100%;
+  height: 120px;
+  position: relative;
+}
+
+.news-content-title {
+  display: inline-block;
+  font-size: 15px;
+  color: #ffffff;
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  background-color: black;
+  width: 98%;
+  padding: 1%;
+  opacity: 0.65;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 25px;
+}
+
+.news-main-item {
+  background-color: #ffffff;
+  padding: 5px 0px;
+  border-top: 1px solid #eaeaea;
+  width: 100%;
+  margin: auto;
+}
+
+.news-content-item {
+  position: relative;
+  margin-left: -3px;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  font-size: 12px;
+  width: 70%;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  background-color: #acadae;
+}
+
+.input-tt {
+  padding: 5px;
+}
+
+.activeAddNews {
+  border: 5px solid #2bb673;
+}
+
+.news-main-plus {
+  width: 280px;
+  text-align: center;
+  margin: auto;
+  height: 50px;
+}
+
+.icon-plus {
+  margin: 10px;
+  font-size: 25px;
+}
+
+.select-item {
+  width: 60%;
+  padding: 10px;
+  margin: 0 auto 10px auto;
+  border: 1px solid #eaeaea;
+}
+
+.father .child {
+  display: none;
+  text-align: center;
+  position: relative;
+  bottom: 25px;
+}
+
+.father:hover .child {
+  display: block;
+}
+
+.thumb-div {
+  display: inline-block;
+  width: 30%;
+  text-align: center;
+}
+
+.thumb-but {
+  margin: 5px;
+}
+
+.material-img {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/mp/draft/mock.js b/src/views/mp/draft/mock.js
new file mode 100644
index 000000000..e8493f6cd
--- /dev/null
+++ b/src/views/mp/draft/mock.js
@@ -0,0 +1,151 @@
+export default {
+  list: [
+    {
+      mediaId: 'r6ryvl6LrxBU0miaST4Y-q-G9pdsmZw0OYG4FzHQkKfpLfEwIH51wy2bxisx8PvW',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题（OOO）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9XaFphcmtJVFh3VEc4Q1MxQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN2QxTE56SFBCYXc2RE9NcUxIeS1CQjJuUHhTWjBlN2VOeGRpRi1fZUhwN1FNQjdrQV9yRU9EU0hibHREZmZoVW5acnZrN3ZjaWsxejR3RGpKczBzTHFIM0dFNFZWVkpBc0dWWlAzUEhlVmpnfn4%3D&chksm=1f6354802814dd969ef83c0f3babe555c614270b30bc383beaf7ffd13b0257f0fe5ced9af694#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png'
+          },
+          {
+            title: '我是标题（XXX）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9yTlYwOEs1clpwcE5OUEhCQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN0NSMjFqN3N1aUZMbFNVLTZHN2ZDME9qOGp2THk2RFNlSTlKZ3Y1czFVZDdQQm5IeUg3dEppSUtpQUh5SExOOTRkT3dHNUdBdHdWSWlOendlREV3dS1jUEVQbFpiVTZmVW5iRWhZcGdkNTFRfn4%3D&chksm=1f6354802814dd96a403151cd44c7da4eecf0e475d25423e46ecd795b513bafd829a75daef9b#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png'
+          }
+        ]
+      },
+      updateTime: 1673655730
+    },
+    {
+      mediaId: 'r6ryvl6LrxBU0miaST4Y-jGpXnO73ihN0lsNXknCRQHapp2xgHMRxHKG50LituFe',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题（修改）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl95WVFXYndIZnZJd0t5cjgvQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN1dlNURPbWswbEF4RDd5dVJTdjQ4cm9Cc0Q1TWhpMUh6SE1hVEE3ZHljaHhlZjZYSGF5N2JNSHpDTlh6ajNZbkpGTGpTcUQ4M3NMdW41ZUpXNFZZQ1VKbVlaMVp5ekxEV1czREdsY1dOYTZnfn4%3D&chksm=1f6354be2814dda8e6238037c2ebd52b1c8e80e93249a861ad80e4d40e5ca7207233475ca689#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png'
+          }
+        ]
+      },
+      updateTime: 1673655584
+    },
+    {
+      mediaId: 'r6ryvl6LrxBU0miaST4Y-v5SrbNCPpD6M_p3TmSrYwTjKogs-0DMJgmjMyNZPeMO',
+      content: {
+        newsItem: [
+          {
+            title: '1321',
+            author: '3232',
+            digest: '1333',
+            content: '<p>444</p>',
+            contentSourceUrl: 'http://www.iocoder.cn',
+            thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-tlQmcl3RdC-Jcgns6IQtf7zenGy3b86WLT7GzUcrb1T',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9jelJiaDAzbmdpSkJOZ2M2QWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNDNXVVc2ZDRYeTY0Zm1weXR6dE9vQWh1TzEwbEpUVnRfVzJyaGFDNXBkZ0ZXM2JFOTNaRHNhOHRUeFdEanhMeS01X01kMUNWQ1BpRER3cjYwTl9pMnpFLUJhZXFucVVfM1pDUXlTUEl1S25nfn4%3D&chksm=1f6354bc2814ddaa56a90ad5bc3d078601c8d1589ba01827a8170587bc830ff9747b5f59c3a0#rd',
+            thumbUrl:
+              'http://mmbiz.qpic.cn/mmbiz_png/btUmCVHwbJUoicwBiacjVeQbu6QxgBVrukfSJXz509boa21SpH8OVHAqXCJiaiaAaHQJNxwwsa0gHRXVr0G5EZYamw/0?wx_fmt=png'
+          }
+        ]
+      },
+      updateTime: 1673628969
+    },
+    {
+      mediaId: 'r6ryvl6LrxBU0miaST4Y-vdWrisK5EZbk4Y3tzh8P0PG0eEUbnQrh0BcsEb3WNP0',
+      content: {
+        newsItem: [
+          {
+            title: 'tudou',
+            author: 'haha',
+            digest: '312',
+            content: '<p>132312</p>',
+            contentSourceUrl: 'http://www.iocoder.cn',
+            thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qdkJ1ZjBoUmg2Uk9TS3RlQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNVg2aTJsaC1fMkU2eXNacUplN3VDTTZFZkhtMjhuTUZvWkxsNDBRSXExY2tiVXRHb09TaHgtREhzY3doZ0JYeC1TSTZ5eWZldXJsOWtfbV8yMi1aYkcyZ2pOY0haM0Ntb3VSWEtxUGVFRlNBfn4%3D&chksm=1f6354ba2814ddacf0184b24d310483641ef190b1faac098c285eb416c70017e2f54decfa1af#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG.png'
+          }
+        ]
+      },
+      updateTime: 1673628760
+    },
+    {
+      mediaId: 'r6ryvl6LrxBU0miaST4Y-u9kTIm1DhWZDdXyxsxUVv2Z5DAB99IPxkIRTUUD206k',
+      content: {
+        newsItem: [
+          {
+            title: '12',
+            author: '333',
+            digest: '123',
+            content: '123',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qVVhpSDZUaFJWTzBBWWRVQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNWRnTDJWYmF2NER0clV1bThmQ0xUR3hqQnJkZ3BJSUNmNDJmc0lCZ1dadkVnZ3Z5bkN4YWtVUjhoaWZWYzZURUR4NnpMd0Y4Z3U5aUdib0lkMzI4Rjg3SG9JX2FycTMxbUctOHplaTlQVVhnfn4%3D&chksm=1f6354b62814dda076c778af33f06580165d8aa81f7798d55cfabb1886b5c74d9b2124a3535c#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8.jpg'
+          }
+        ]
+      },
+      updateTime: 1673626494
+    },
+    {
+      mediaId: 'r6ryvl6LrxBU0miaST4Y-sO24upobaENDmeByfBTfaozB3aOqSMAV0lGy-UkHXE7',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9LT2dqRnpMNUpsR0hjYWtBQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNGNmazZTdlE5WkxvU0tfX2V5cjV2WjJiR0xjQUhyREFSZWo2eWNrUW9EYVh6ZkpWRXBLR3FmTEV6YldBMno3Q2ZvVXBSdzlaVDc3aFhndEpQWUwzWmFMUWt0YVVURE1VZ1FsQTdPMlRtc3JBfn4%3D&chksm=1f6354aa2814ddbcc2637382f963a8742993ac38ebcebe6e3411df5ac82ac7bbdb391be6494a#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png'
+          }
+        ]
+      },
+      updateTime: 1673534279
+    }
+  ],
+  total: 6
+}

From df57191cf00d8f26b3bc3f79c63987775746e2c0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 8 Apr 2023 11:48:37 +0800
Subject: [PATCH 09/16] =?UTF-8?q?=E6=89=80=E6=9C=89=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=9A=84=20name=20=E9=83=BD=E5=8A=A0=E4=B8=8A=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E7=9A=84=E5=89=8D=E7=BC=80=EF=BC=8C=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts               | 40 +++--------
 src/types/auto-components.d.ts                |  1 +
 src/views/bpm/definition/index.vue            |  2 +-
 src/views/bpm/form/index.vue                  |  5 +-
 src/views/bpm/group/index.vue                 |  2 +-
 src/views/bpm/model/editor/index.vue          |  2 +-
 src/views/bpm/model/index.vue                 |  6 +-
 .../bpm/processInstance/create/index.vue      |  2 +-
 .../bpm/processInstance/detail/index.vue      |  2 +-
 src/views/bpm/processInstance/index.vue       |  4 +-
 src/views/bpm/task/done/index.vue             |  2 +-
 src/views/bpm/task/todo/index.vue             |  2 +-
 src/views/bpm/taskAssignRule/index.vue        |  2 +-
 src/views/infra/apiAccessLog/index.vue        |  2 +-
 src/views/infra/apiErrorLog/index.vue         |  3 +-
 src/views/infra/build/index.vue               |  2 +-
 src/views/infra/codegen/index.vue             |  2 +-
 src/views/infra/config/index.vue              |  2 +-
 src/views/infra/dataSourceConfig/index.vue    |  2 +-
 src/views/infra/dbDoc/index.vue               |  2 +-
 src/views/infra/druid/index.vue               |  2 +-
 src/views/infra/file/FileForm.vue             | 67 +++++++++++++------
 src/views/infra/file/index.vue                | 17 +++--
 src/views/infra/fileConfig/index.vue          | 19 +++++-
 src/views/infra/job/index.vue                 |  2 +-
 src/views/infra/job/logger/index.vue          |  2 +-
 src/views/infra/redis/index.vue               |  2 +-
 src/views/infra/server/index.vue              |  2 +-
 src/views/infra/skywalking/index.vue          |  2 +-
 src/views/infra/swagger/index.vue             |  2 +-
 .../mall/product/category/CategoryForm.vue    |  2 +-
 src/views/mall/product/property/index.vue     |  2 +-
 .../mall/product/property/value/index.vue     |  2 +-
 src/views/mp/freePublish/index.vue            |  2 +-
 src/views/pay/app/index.vue                   |  2 +-
 src/views/pay/merchant/index.vue              |  2 +-
 src/views/pay/order/index.vue                 |  2 +-
 src/views/pay/refund/index.vue                |  2 +-
 src/views/system/area/index.vue               |  2 +-
 src/views/system/dept/index.vue               |  2 +-
 src/views/system/dict/data/index.vue          |  2 +-
 src/views/system/dict/index.vue               |  2 +-
 src/views/system/errorCode/index.vue          |  2 +-
 src/views/system/loginlog/index.vue           |  2 +-
 src/views/system/mail/account/index.vue       |  2 +-
 src/views/system/mail/log/index.vue           |  2 +-
 src/views/system/mail/template/index.vue      |  2 +-
 src/views/system/menu/index.vue               |  2 +-
 src/views/system/notice/index.vue             |  2 +-
 src/views/system/notify/message/index.vue     |  2 +-
 src/views/system/notify/my/index.vue          |  2 +-
 src/views/system/notify/template/index.vue    |  2 +-
 src/views/system/oauth2/client/index.vue      |  2 +-
 src/views/system/oauth2/token/index.vue       |  2 +-
 src/views/system/operatelog/index.vue         |  2 +-
 src/views/system/post/index.vue               |  3 +-
 src/views/system/role/index.vue               |  2 +-
 src/views/system/sensitiveWord/index.vue      |  2 +-
 src/views/system/sms/channel/index.vue        |  2 +-
 src/views/system/sms/log/index.vue            |  2 +-
 src/views/system/sms/template/index.vue       |  2 +-
 src/views/system/tenant/index.vue             |  3 +-
 src/views/system/tenantPackage/index.vue      |  2 +-
 src/views/system/user/index.vue               |  2 +-
 64 files changed, 144 insertions(+), 130 deletions(-)

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index aa98ebc0f..11420a07a 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -116,7 +116,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       {
         path: 'type/data/:dictType',
         component: () => import('@/views/system/dict/data/index.vue'),
-        name: 'data',
+        name: 'SystemDictData',
         meta: {
           title: '字典数据',
           noCache: true,
@@ -140,7 +140,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       {
         path: 'edit',
         component: () => import('@/views/infra/codegen/EditTable.vue'),
-        name: 'EditTable',
+        name: 'InfraCodegenEditTable',
         meta: {
           noCache: true,
           hidden: true,
@@ -163,7 +163,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       {
         path: 'job-log',
         component: () => import('@/views/infra/job/logger/index.vue'),
-        name: 'JobLog',
+        name: 'InfraJobLog',
         meta: {
           noCache: true,
           hidden: true,
@@ -226,7 +226,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       {
         path: '/manager/form/edit',
         component: () => import('@/views/bpm/form/editor/index.vue'),
-        name: 'bpmFormEditor',
+        name: 'BpmFormEditor',
         meta: {
           noCache: true,
           hidden: true,
@@ -238,7 +238,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       {
         path: '/manager/model/edit',
         component: () => import('@/views/bpm/model/editor/index.vue'),
-        name: 'modelEditor',
+        name: 'BpmModelEditor',
         meta: {
           noCache: true,
           hidden: true,
@@ -250,7 +250,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       {
         path: '/manager/definition',
         component: () => import('@/views/bpm/definition/index.vue'),
-        name: 'BpmProcessDefinitionList',
+        name: 'BpmProcessDefinition',
         meta: {
           noCache: true,
           hidden: true,
@@ -262,7 +262,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       {
         path: '/manager/task-assign-rule',
         component: () => import('@/views/bpm/taskAssignRule/index.vue'),
-        name: 'BpmTaskAssignRuleList',
+        name: 'BpmTaskAssignRule',
         meta: {
           noCache: true,
           hidden: true,
@@ -305,30 +305,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
           title: '发起 OA 请假',
           activeMenu: 'bpm/oa/leave/create'
         }
-      },
-      {
-        path: '/bpm/task/todo',
-        component: () => import('@/views/bpm/task/todo/index.vue'),
-        name: 'TaskTodo',
-        meta: {
-          noCache: true,
-          hidden: true,
-          canTo: true,
-          title: '代办任务',
-          activeMenu: 'bpm/task/todo/index'
-        }
-      },
-      {
-        path: '/bpm/processInstance',
-        component: () => import('@/views/bpm/processInstance/index.vue'),
-        name: 'processInstance',
-        meta: {
-          noCache: true,
-          hidden: true,
-          canTo: true,
-          title: '流程办理',
-          activeMenu: 'bpm/processInstance/index'
-        }
       }
     ]
   },
@@ -343,7 +319,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       {
         path: 'value/:propertyId(\\d+)',
         component: () => import('@/views/mall/product/property/value/index.vue'),
-        name: 'PropertyValue',
+        name: 'ProductPropertyValue',
         meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
       }
     ]
diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index c7ff571c3..f93f11f6e 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -77,6 +77,7 @@ declare module '@vue/runtime-core' {
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Error: typeof import('./../components/Error/src/Error.vue')['default']
diff --git a/src/views/bpm/definition/index.vue b/src/views/bpm/definition/index.vue
index 66a6a23bd..4fa86db90 100644
--- a/src/views/bpm/definition/index.vue
+++ b/src/views/bpm/definition/index.vue
@@ -93,7 +93,7 @@
   </Dialog>
 </template>
 
-<script setup lang="ts" name="Form">
+<script setup lang="ts" name="BpmProcessDefinition">
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as DefinitionApi from '@/api/bpm/definition'
diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue
index 4fdc37eeb..915bd0bdf 100644
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -83,12 +83,11 @@
   </Dialog>
 </template>
 
-<script setup lang="ts" name="Form">
+<script setup lang="ts" name="BpmForm">
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as FormApi from '@/api/bpm/form'
 import { setConfAndFields2 } from '@/utils/formCreate'
-
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
@@ -130,7 +129,7 @@ const resetQuery = () => {
 /** 添加/修改操作 */
 const openForm = (id?: number) => {
   push({
-    name: 'bpmFormEditor',
+    name: 'BpmFormEditor',
     query: {
       id
     }
diff --git a/src/views/bpm/group/index.vue b/src/views/bpm/group/index.vue
index 0c731dbe6..f2427f71b 100644
--- a/src/views/bpm/group/index.vue
+++ b/src/views/bpm/group/index.vue
@@ -111,7 +111,7 @@
   <UserGroupForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts" name="UserGroup">
+<script setup lang="ts" name="BpmUserGroup">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as UserGroupApi from '@/api/bpm/userGroup'
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 7e3d8413b..9eade1ad2 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -24,7 +24,7 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="BpmModelEditor">
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 9a0d725ff..83e9ac774 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -224,7 +224,7 @@
   </Dialog>
 </template>
 
-<script setup lang="ts" name="Form">
+<script setup lang="ts" name="BpmModel">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter, formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
@@ -319,7 +319,7 @@ const handleChangeState = async (row) => {
 /** 设计流程 */
 const handleDesign = (row) => {
   push({
-    name: 'modelEditor',
+    name: 'BpmModelEditor',
     query: {
       modelId: row.id
     }
@@ -352,7 +352,7 @@ const handleAssignRule = (row) => {
 /** 跳转到指定流程定义列表 */
 const handleDefinitionList = (row) => {
   push({
-    name: 'BpmProcessDefinitionList',
+    name: 'BpmProcessDefinition',
     query: {
       key: row.key
     }
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index d616e4954..11cf929b6 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -46,7 +46,7 @@
     <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
   </ContentWrap>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="BpmProcessInstanceCreate">
 import { DICT_TYPE } from '@/utils/dict'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index be79f59c5..62fe3ab2f 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -96,7 +96,7 @@
     <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
   </ContentWrap>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="BpmProcessInstanceDetail">
 import { useUserStore } from '@/store/modules/user'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index e23d023ea..6d7fe6d2e 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -81,7 +81,7 @@
           v-hasPermi="['bpm:process-instance:query']"
           @click="handleCreate"
         >
-          发起流程
+          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
         </el-button>
       </el-form-item>
     </el-form>
@@ -159,7 +159,7 @@
     />
   </ContentWrap>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="BpmProcessInstance">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
diff --git a/src/views/bpm/task/done/index.vue b/src/views/bpm/task/done/index.vue
index 75ba0fef4..ae3352d9f 100644
--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@@ -74,7 +74,7 @@
   <!-- 表单弹窗：详情 -->
   <TaskDetail ref="detailRef" @success="getList" />
 </template>
-<script setup lang="tsx">
+<script setup lang="tsx" name="BpmTodoTask">
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as TaskApi from '@/api/bpm/task'
diff --git a/src/views/bpm/task/todo/index.vue b/src/views/bpm/task/todo/index.vue
index c575a020b..0bdc38505 100644
--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
@@ -71,7 +71,7 @@
   </ContentWrap>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="tsx" name="BpmDoneTask">
 import { dateFormatter } from '@/utils/formatTime'
 const { push } = useRouter() // 路由
 import * as TaskApi from '@/api/bpm/task'
diff --git a/src/views/bpm/taskAssignRule/index.vue b/src/views/bpm/taskAssignRule/index.vue
index 4a4e76f87..d54fe168c 100644
--- a/src/views/bpm/taskAssignRule/index.vue
+++ b/src/views/bpm/taskAssignRule/index.vue
@@ -32,7 +32,7 @@
   <!-- 添加/修改弹窗 -->
   <TaskAssignRuleForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="TaskAssignRule">
+<script setup lang="ts" name="BpmTaskAssignRule">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
 import * as RoleApi from '@/api/system/role'
diff --git a/src/views/infra/apiAccessLog/index.vue b/src/views/infra/apiAccessLog/index.vue
index 7fa4eab44..ec6b546db 100644
--- a/src/views/infra/apiAccessLog/index.vue
+++ b/src/views/infra/apiAccessLog/index.vue
@@ -139,7 +139,7 @@
   <!-- 表单弹窗：详情 -->
   <ApiAccessLogDetail ref="detailRef" />
 </template>
-<script setup lang="ts" name="ApiAccessLog">
+<script setup lang="ts" name="InfraApiAccessLog">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import download from '@/utils/download'
 import { formatDate } from '@/utils/formatTime'
diff --git a/src/views/infra/apiErrorLog/index.vue b/src/views/infra/apiErrorLog/index.vue
index a20cba1bd..1eed5a8cd 100644
--- a/src/views/infra/apiErrorLog/index.vue
+++ b/src/views/infra/apiErrorLog/index.vue
@@ -158,14 +158,13 @@
   <ApiErrorLogDetail ref="detailRef" />
 </template>
 
-<script setup lang="ts" name="ApiErrorLog">
+<script setup lang="ts" name="InfraApiErrorLog">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
 import ApiErrorLogDetail from './ApiErrorLogDetail.vue'
 import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
-
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index 00b56feac..c7ff86eb2 100644
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@@ -31,7 +31,7 @@
     </div>
   </Dialog>
 </template>
-<script setup lang="ts" name="Build">
+<script setup lang="ts" name="InfraBuild">
 import formCreate from '@form-create/element-ui'
 import { useClipboard } from '@vueuse/core'
 const { t } = useI18n() // 国际化
diff --git a/src/views/infra/codegen/index.vue b/src/views/infra/codegen/index.vue
index 5e1f78ebd..b23c6fd9a 100644
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/index.vue
@@ -142,7 +142,7 @@
   <!-- 弹窗：预览代码 -->
   <PreviewCode ref="previewRef" />
 </template>
-<script setup lang="ts" name="Codegen">
+<script setup lang="ts" name="InfraCodegen">
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CodegenApi from '@/api/infra/codegen'
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index 414c91536..7d3ac68a4 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -137,7 +137,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <ConfigForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Config">
+<script setup lang="ts" name="InfraConfig">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/infra/dataSourceConfig/index.vue b/src/views/infra/dataSourceConfig/index.vue
index 83e757a6f..9975b8d05 100644
--- a/src/views/infra/dataSourceConfig/index.vue
+++ b/src/views/infra/dataSourceConfig/index.vue
@@ -57,7 +57,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <DataSourceConfigForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="DataSourceConfig">
+<script setup lang="ts" name="InfraDataSourceConfig">
 import { dateFormatter } from '@/utils/formatTime'
 import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
 import DataSourceConfigForm from './DataSourceConfigForm.vue'
diff --git a/src/views/infra/dbDoc/index.vue b/src/views/infra/dbDoc/index.vue
index 6b3e3f8b1..58c038b0d 100644
--- a/src/views/infra/dbDoc/index.vue
+++ b/src/views/infra/dbDoc/index.vue
@@ -16,7 +16,7 @@
     <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="DbDoc">
+<script setup lang="ts" name="InfraDBDoc">
 import download from '@/utils/download'
 import * as DbDocApi from '@/api/infra/dbDoc'
 
diff --git a/src/views/infra/druid/index.vue b/src/views/infra/druid/index.vue
index 608b318b4..9a86eb0ab 100644
--- a/src/views/infra/druid/index.vue
+++ b/src/views/infra/druid/index.vue
@@ -6,7 +6,7 @@
     <IFrame v-if="!loading" :src="url" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="Druid">
+<script setup lang="ts" name="InfraDruid">
 import * as ConfigApi from '@/api/infra/config'
 
 const loading = ref(true) // 是否加载中
diff --git a/src/views/infra/file/FileForm.vue b/src/views/infra/file/FileForm.vue
index 36f251e80..5485870df 100644
--- a/src/views/infra/file/FileForm.vue
+++ b/src/views/infra/file/FileForm.vue
@@ -2,17 +2,19 @@
   <Dialog title="上传文件" v-model="dialogVisible">
     <el-upload
       ref="uploadRef"
-      :limit="1"
-      accept=".jpg, .png, .gif"
-      :auto-upload="false"
-      drag
-      :headers="headers"
       :action="url"
       :data="data"
-      :disabled="formLoading"
+      :headers="uploadHeaders"
+      v-model:file-list="fileList"
+      drag
+      accept=".jpg, .png, .gif"
+      :limit="1"
+      :on-success="submitFormSuccess"
+      :on-exceed="handleExceed"
+      :on-error="submitFormError"
       :on-change="handleFileChange"
-      :on-progress="handleFileUploadProgress"
-      :on-success="handleFileSuccess"
+      :auto-upload="false"
+      :disabled="formLoading"
     >
       <i class="el-icon-upload"></i>
       <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
@@ -29,44 +31,47 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { Dialog } from '@/components/Dialog'
-import { getAccessToken } from '@/utils/auth'
+import { getAccessToken, getTenantId } from '@/utils/auth'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formLoading = ref(false) // 表单的加载中
 const url = import.meta.env.VITE_UPLOAD_URL
-const headers = { Authorization: 'Bearer ' + getAccessToken() }
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
 const data = ref({ path: '' })
 const uploadRef = ref()
 
 /** 打开弹窗 */
 const open = async () => {
   dialogVisible.value = true
+  resetForm()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 /** 处理上传的文件发生变化 */
 const handleFileChange = (file) => {
   data.value.path = file.name
 }
 
-/** 处理文件上传中 */
-const handleFileUploadProgress = () => {
-  formLoading.value = true // 禁止修改
-}
-
-/** 发起文件上传 */
+/** 提交表单 */
 const submitFileForm = () => {
+  if (fileList.value.length == 0) {
+    message.error('请上传文件')
+    return
+  }
+  // 提交请求
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
+  }
   unref(uploadRef)?.submit()
 }
 
 /** 文件上传成功处理 */
-const handleFileSuccess = () => {
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitFormSuccess = () => {
   // 清理
   dialogVisible.value = false
   formLoading.value = false
@@ -75,4 +80,22 @@ const handleFileSuccess = () => {
   message.success(t('common.createSuccess'))
   emit('success')
 }
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('上传失败，请您重新上传！')
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  // 重置上传状态和文件
+  formLoading.value = false
+  uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
+}
 </script>
diff --git a/src/views/infra/file/index.vue b/src/views/infra/file/index.vue
index 6e709ec7e..91d7639e7 100644
--- a/src/views/infra/file/index.vue
+++ b/src/views/infra/file/index.vue
@@ -1,9 +1,14 @@
 <template>
-  <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/"/>
-
+  <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
   <!-- 搜索 -->
   <ContentWrap>
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
       <el-form-item label="文件路径" prop="path">
         <el-input
           v-model="queryParams.path"
@@ -33,7 +38,7 @@
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button type="primary" @click="openForm">
+        <el-button type="primary" plain @click="openForm">
           <Icon icon="ep:upload" class="mr-5px" /> 上传文件
         </el-button>
       </el-form-item>
@@ -86,11 +91,11 @@
   <!-- 表单弹窗：添加/修改 -->
   <FileForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Config">
+<script setup lang="ts" name="InfraFile">
 import { fileSizeFormatter } from '@/utils'
 import { dateFormatter } from '@/utils/formatTime'
 import * as FileApi from '@/api/infra/file'
-import FileUploadForm from './FileForm.vue'
+import FileForm from './FileForm.vue'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
diff --git a/src/views/infra/fileConfig/index.vue b/src/views/infra/fileConfig/index.vue
index 7dd027fa7..4fb3f645f 100644
--- a/src/views/infra/fileConfig/index.vue
+++ b/src/views/infra/fileConfig/index.vue
@@ -3,17 +3,29 @@
 
   <!-- 搜索 -->
   <ContentWrap>
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
       <el-form-item label="配置名" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入配置名"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="存储器" prop="storage">
-        <el-select v-model="queryParams.storage" placeholder="请选择存储器" clearable>
+        <el-select
+          v-model="queryParams.storage"
+          placeholder="请选择存储器"
+          clearable
+          class="!w-240px"
+        >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
             :key="dict.value"
@@ -30,6 +42,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
@@ -113,7 +126,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <FileConfigForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Config">
+<script setup lang="ts" name="InfraFileConfig">
 import * as FileConfigApi from '@/api/infra/fileConfig'
 import FileConfigForm from './FileConfigForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
diff --git a/src/views/infra/job/index.vue b/src/views/infra/job/index.vue
index af02133ea..4aab3df05 100644
--- a/src/views/infra/job/index.vue
+++ b/src/views/infra/job/index.vue
@@ -147,7 +147,7 @@
   <!-- 表单弹窗：查看 -->
   <JobDetail ref="detailRef" />
 </template>
-<script setup lang="ts" name="Job">
+<script setup lang="ts" name="InfraJob">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { checkPermi } from '@/utils/permission'
 import JobForm from './JobForm.vue'
diff --git a/src/views/infra/job/logger/index.vue b/src/views/infra/job/logger/index.vue
index 4fc967364..16a4e5ca7 100644
--- a/src/views/infra/job/logger/index.vue
+++ b/src/views/infra/job/logger/index.vue
@@ -121,7 +121,7 @@
   <!-- 表单弹窗：查看 -->
   <JobLogDetail ref="detailRef" />
 </template>
-<script setup lang="ts" name="JobLog">
+<script setup lang="ts" name="InfraJobLog">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/infra/redis/index.vue b/src/views/infra/redis/index.vue
index 81603dc3b..246b90ee2 100644
--- a/src/views/infra/redis/index.vue
+++ b/src/views/infra/redis/index.vue
@@ -63,7 +63,7 @@
     </el-row>
   </el-scrollbar>
 </template>
-<script setup lang="ts" name="Redis">
+<script setup lang="ts" name="InfraRedis">
 import * as echarts from 'echarts'
 import * as RedisApi from '@/api/infra/redis'
 import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
diff --git a/src/views/infra/server/index.vue b/src/views/infra/server/index.vue
index 23aeadd09..57a5bc5cf 100644
--- a/src/views/infra/server/index.vue
+++ b/src/views/infra/server/index.vue
@@ -5,7 +5,7 @@
     <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="AdminServer">
+<script setup lang="ts" name="InfraAdminServer">
 import * as ConfigApi from '@/api/infra/config'
 
 const loading = ref(true) // 是否加载中
diff --git a/src/views/infra/skywalking/index.vue b/src/views/infra/skywalking/index.vue
index f26d8f2c0..1869269f4 100644
--- a/src/views/infra/skywalking/index.vue
+++ b/src/views/infra/skywalking/index.vue
@@ -5,7 +5,7 @@
     <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="Skywalking">
+<script setup lang="ts" name="InfraSkyWalking">
 import * as ConfigApi from '@/api/infra/config'
 
 const loading = ref(true) // 是否加载中
diff --git a/src/views/infra/swagger/index.vue b/src/views/infra/swagger/index.vue
index 9de2e9848..948b2a726 100644
--- a/src/views/infra/swagger/index.vue
+++ b/src/views/infra/swagger/index.vue
@@ -5,7 +5,7 @@
     <IFrame :src="src" />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="Swagger">
+<script setup lang="ts" name="InfraSwagger">
 import * as ConfigApi from '@/api/infra/config'
 
 const loading = ref(true) // 是否加载中
diff --git a/src/views/mall/product/category/CategoryForm.vue b/src/views/mall/product/category/CategoryForm.vue
index db395a66f..19bce8721 100644
--- a/src/views/mall/product/category/CategoryForm.vue
+++ b/src/views/mall/product/category/CategoryForm.vue
@@ -50,7 +50,7 @@
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="ProductCategory">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import { handleTree } from '@/utils/tree'
diff --git a/src/views/mall/product/property/index.vue b/src/views/mall/product/property/index.vue
index 6c2e6e97a..102ee8a5c 100644
--- a/src/views/mall/product/property/index.vue
+++ b/src/views/mall/product/property/index.vue
@@ -92,7 +92,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <PropertyForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Config">
+<script setup lang="ts" name="ProductProperty">
 import { dateFormatter } from '@/utils/formatTime'
 import * as PropertyApi from '@/api/mall/product/property'
 import PropertyForm from './PropertyForm.vue'
diff --git a/src/views/mall/product/property/value/index.vue b/src/views/mall/product/property/value/index.vue
index 6f5ae5c8b..46343934f 100644
--- a/src/views/mall/product/property/value/index.vue
+++ b/src/views/mall/product/property/value/index.vue
@@ -88,7 +88,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <ValueForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Config">
+<script setup lang="ts" name="ProductPropertyValue">
 import { dateFormatter } from '@/utils/formatTime'
 import * as PropertyApi from '@/api/mall/product/property'
 import ValueForm from './ValueForm.vue'
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index 565d2da5e..66f35012b 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -59,7 +59,7 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="freePublish">
+<script setup lang="ts" name="MpFreePublish">
 import * as FreePublishApi from '@/api/mp/freePublish'
 import * as MpAccountApi from '@/api/mp/account'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
diff --git a/src/views/pay/app/index.vue b/src/views/pay/app/index.vue
index 1ac31c41c..77b78170a 100644
--- a/src/views/pay/app/index.vue
+++ b/src/views/pay/app/index.vue
@@ -75,7 +75,7 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="App">
+<script setup lang="ts" name="PayApp">
 import type { FormExpose } from '@/components/Form'
 import { rules, allSchemas } from './app.data'
 import * as AppApi from '@/api/pay/app'
diff --git a/src/views/pay/merchant/index.vue b/src/views/pay/merchant/index.vue
index 17be19afa..806a0b60f 100644
--- a/src/views/pay/merchant/index.vue
+++ b/src/views/pay/merchant/index.vue
@@ -137,7 +137,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <MerchantForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Merchant">
+<script setup lang="ts" name="PayMerchant">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import { dateFormatter } from '@/utils/formatTime'
diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index 3d140ed9d..21b8cca4e 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -41,7 +41,7 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="Order">
+<script setup lang="ts" name="PayOrder">
 import { allSchemas } from './order.data'
 import * as OrderApi from '@/api/pay/order'
 
diff --git a/src/views/pay/refund/index.vue b/src/views/pay/refund/index.vue
index 9deea53b8..ec8bf12c1 100644
--- a/src/views/pay/refund/index.vue
+++ b/src/views/pay/refund/index.vue
@@ -33,7 +33,7 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="Refund">
+<script setup lang="ts" name="PayRefund">
 import { allSchemas } from './refund.data'
 import * as RefundApi from '@/api/pay/refund'
 
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index a31fd10d3..320c2ddab 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -30,7 +30,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <AreaForm ref="formRef" />
 </template>
-<script setup lang="tsx" name="Area">
+<script setup lang="tsx" name="SystemArea">
 import type { Column } from 'element-plus'
 import AreaForm from './AreaForm.vue'
 import * as AreaApi from '@/api/system/area'
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 706331118..36d3ca5ca 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -103,7 +103,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <DeptForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Dept">
+<script setup lang="ts" name="SystemDept">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import { handleTree } from '@/utils/tree'
diff --git a/src/views/system/dict/data/index.vue b/src/views/system/dict/data/index.vue
index 9677614a9..77770dda7 100644
--- a/src/views/system/dict/data/index.vue
+++ b/src/views/system/dict/data/index.vue
@@ -115,7 +115,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <DictDataForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="DictData">
+<script setup lang="ts" name="SystemDictData">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 79b2aed62..bbcd8a2cc 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -132,7 +132,7 @@
   <DictTypeForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts" name="DictType">
+<script setup lang="ts" name="SystemDictType">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as DictTypeApi from '@/api/system/dict/dict.type'
diff --git a/src/views/system/errorCode/index.vue b/src/views/system/errorCode/index.vue
index e31b252ca..b21bef2d2 100644
--- a/src/views/system/errorCode/index.vue
+++ b/src/views/system/errorCode/index.vue
@@ -137,7 +137,7 @@
   <ErrorCodeForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts" name="ErrorCode">
+<script setup lang="ts" name="SystemErrorCode">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/system/loginlog/index.vue b/src/views/system/loginlog/index.vue
index 9c69da145..ed3f20bf5 100644
--- a/src/views/system/loginlog/index.vue
+++ b/src/views/system/loginlog/index.vue
@@ -104,7 +104,7 @@
   <!-- 表单弹窗：详情 -->
   <LoginLogDetail ref="detailRef" />
 </template>
-<script setup lang="ts" name="LoginLog">
+<script setup lang="ts" name="SystemLoginLog">
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index 878d7d9e9..eeaf8bcfa 100644
--- a/src/views/system/mail/account/index.vue
+++ b/src/views/system/mail/account/index.vue
@@ -64,7 +64,7 @@
   <!-- 详情弹窗 -->
   <MailAccountDetail ref="detailRef" />
 </template>
-<script setup lang="ts" name="MailAccount">
+<script setup lang="ts" name="SystemMailAccount">
 import { allSchemas } from './account.data'
 import * as MailAccountApi from '@/api/system/mail/account'
 import MailAccountForm from './MailAccountForm.vue'
diff --git a/src/views/system/mail/log/index.vue b/src/views/system/mail/log/index.vue
index 9ca2b9e87..f039e66e4 100644
--- a/src/views/system/mail/log/index.vue
+++ b/src/views/system/mail/log/index.vue
@@ -34,7 +34,7 @@
   <!-- 表单弹窗：详情 -->
   <mail-log-detail ref="detailRef" />
 </template>
-<script setup lang="ts" name="MailLog">
+<script setup lang="ts" name="SystemMailLog">
 import { allSchemas } from './log.data'
 import * as MailLogApi from '@/api/system/mail/log'
 import MailLogDetail from './MailLogDetail.vue'
diff --git a/src/views/system/mail/template/index.vue b/src/views/system/mail/template/index.vue
index 5babc9060..357b028fd 100644
--- a/src/views/system/mail/template/index.vue
+++ b/src/views/system/mail/template/index.vue
@@ -65,7 +65,7 @@
   <!-- 表单弹窗：发送测试 -->
   <MailTemplateSendForm ref="sendFormRef" />
 </template>
-<script setup lang="ts" name="MailTemplate">
+<script setup lang="ts" name="SystemMailTemplate">
 import { allSchemas } from './template.data'
 import * as MailTemplateApi from '@/api/system/mail/template'
 import MailTemplateForm from './MailTemplateForm.vue'
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 9b157e840..323126c21 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -111,7 +111,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <MenuForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Menu">
+<script setup lang="ts" name="SystemMenu">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { handleTree } from '@/utils/tree'
 import * as MenuApi from '@/api/system/menu'
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 26d5ae2aa..d7fb9751f 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -102,7 +102,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <NoticeForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="tsx">
+<script setup lang="tsx" name="SystemNotice">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as NoticeApi from '@/api/system/notice'
diff --git a/src/views/system/notify/message/index.vue b/src/views/system/notify/message/index.vue
index 2a249817d..36d9885e7 100644
--- a/src/views/system/notify/message/index.vue
+++ b/src/views/system/notify/message/index.vue
@@ -153,7 +153,7 @@
   <!-- 表单弹窗：详情 -->
   <NotifyMessageDetail ref="detailRef" />
 </template>
-<script setup lang="ts" name="NotifyMessage">
+<script setup lang="ts" name="SystemNotifyMessage">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
diff --git a/src/views/system/notify/my/index.vue b/src/views/system/notify/my/index.vue
index a7711660d..5a4afc608 100644
--- a/src/views/system/notify/my/index.vue
+++ b/src/views/system/notify/my/index.vue
@@ -115,7 +115,7 @@
   <MyNotifyMessageDetail ref="detailRef" />
 </template>
 
-<script setup lang="ts" name="MyNotifyMessage">
+<script setup lang="ts" name="SystemMyNotify">
 import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
diff --git a/src/views/system/notify/template/index.vue b/src/views/system/notify/template/index.vue
index de14d5ca0..69fda9071 100644
--- a/src/views/system/notify/template/index.vue
+++ b/src/views/system/notify/template/index.vue
@@ -114,7 +114,7 @@
     </template>
   </XModal>
 </template>
-<script setup lang="ts" name="NotifyTemplate">
+<script setup lang="ts" name="SystemNotifyTemplate">
 import { FormExpose } from '@/components/Form'
 // 业务相关的 import
 import { rules, allSchemas } from './template.data'
diff --git a/src/views/system/oauth2/client/index.vue b/src/views/system/oauth2/client/index.vue
index 3e7b1253f..17ebec3e8 100644
--- a/src/views/system/oauth2/client/index.vue
+++ b/src/views/system/oauth2/client/index.vue
@@ -119,7 +119,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <ClientForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="SystemOAuth2Client">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as ClientApi from '@/api/system/oauth2/client'
diff --git a/src/views/system/oauth2/token/index.vue b/src/views/system/oauth2/token/index.vue
index 13743b2b0..803cd7d10 100644
--- a/src/views/system/oauth2/token/index.vue
+++ b/src/views/system/oauth2/token/index.vue
@@ -98,7 +98,7 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="Oauth2AccessToken">
+<script setup lang="ts" name="SystemTokenClient">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as OAuth2AccessTokenApi from '@/api/system/oauth2/token'
diff --git a/src/views/system/operatelog/index.vue b/src/views/system/operatelog/index.vue
index 6be329693..87ce26582 100644
--- a/src/views/system/operatelog/index.vue
+++ b/src/views/system/operatelog/index.vue
@@ -135,7 +135,7 @@
   <!-- 表单弹窗：详情 -->
   <OperateLogDetail ref="detailRef" />
 </template>
-<script setup lang="ts" name="OperateLog">
+<script setup lang="ts" name="SystemOperateLog">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index c94ee747a..b94d1c9a6 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -111,13 +111,12 @@
   <!-- 表单弹窗：添加/修改 -->
   <PostForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="tsx">
+<script setup lang="tsx" name="SystemPost">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as PostApi from '@/api/system/post'
 import PostForm from './PostForm.vue'
-
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index f77f17f0a..618a4990b 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -152,7 +152,7 @@
   <!-- 表单弹窗：数据权限 -->
   <RoleDataPermissionForm ref="dataPermissionFormRef" />
 </template>
-<script setup lang="tsx">
+<script setup lang="tsx" name="SystemRole">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/system/sensitiveWord/index.vue b/src/views/system/sensitiveWord/index.vue
index 5b73132bf..741d873c8 100644
--- a/src/views/system/sensitiveWord/index.vue
+++ b/src/views/system/sensitiveWord/index.vue
@@ -143,7 +143,7 @@
   <!-- 表单弹窗：测试敏感词 -->
   <SensitiveWordTestForm ref="testFormRef" />
 </template>
-<script setup lang="ts" name="SensitiveWord">
+<script setup lang="ts" name="SystemSensitiveWordhao">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/system/sms/channel/index.vue b/src/views/system/sms/channel/index.vue
index b3d572ffb..792497029 100644
--- a/src/views/system/sms/channel/index.vue
+++ b/src/views/system/sms/channel/index.vue
@@ -129,7 +129,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <SmsChannelForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="SmsChannel">
+<script setup lang="ts" name="SystemSmsChannel">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as SmsChannelApi from '@/api/system/sms/smsChannel'
diff --git a/src/views/system/sms/log/index.vue b/src/views/system/sms/log/index.vue
index 8b6d9b480..0be8d841b 100644
--- a/src/views/system/sms/log/index.vue
+++ b/src/views/system/sms/log/index.vue
@@ -184,7 +184,7 @@
   <!-- 表单弹窗：详情 -->
   <SmsLogDetail ref="detailRef" />
 </template>
-<script setup lang="ts" name="smsLog">
+<script setup lang="ts" name="SystemSmsLog">
 import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
 import { dateFormatter, formatDate } from '@/utils/formatTime'
 import download from '@/utils/download'
diff --git a/src/views/system/sms/template/index.vue b/src/views/system/sms/template/index.vue
index bba80332e..6ed0f0297 100644
--- a/src/views/system/sms/template/index.vue
+++ b/src/views/system/sms/template/index.vue
@@ -211,7 +211,7 @@
   <!-- 表单弹窗：测试发送 -->
   <SmsTemplateSendForm ref="sendFormRef" />
 </template>
-<script setup lang="ts" name="SmsTemplate">
+<script setup lang="ts" name="SystemSmsTemplate">
 import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index 3993e985f..349fd378b 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -171,14 +171,13 @@
   <!-- 表单弹窗：添加/修改 -->
   <TenantForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="Tenant">
+<script setup lang="ts" name="SystemTenant">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as TenantApi from '@/api/system/tenant'
 import * as TenantPackageApi from '@/api/system/tenantPackage'
 import TenantForm from './TenantForm.vue'
-
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
diff --git a/src/views/system/tenantPackage/index.vue b/src/views/system/tenantPackage/index.vue
index 3f799fbf7..51f9b8f78 100644
--- a/src/views/system/tenantPackage/index.vue
+++ b/src/views/system/tenantPackage/index.vue
@@ -106,7 +106,7 @@
   <!-- 表单弹窗：添加/修改 -->
   <TenantPackageForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts" name="TenantPackage">
+<script setup lang="ts" name="SystemTenantPackage">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as TenantPackageApi from '@/api/system/tenantPackage'
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ed2eea5da..204e262fa 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -198,7 +198,7 @@
   <!-- 分配角色 -->
   <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
 </template>
-<script setup lang="ts" name="User">
+<script setup lang="ts" name="SystemUser">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { checkPermi } from '@/utils/permission'
 import { dateFormatter } from '@/utils/formatTime'

From 40699edb572af1d93b9adb0a6c7620e0ffc82fee Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 8 Apr 2023 17:30:30 +0800
Subject: [PATCH 10/16] =?UTF-8?q?=E5=BE=AE=E8=B0=83=E5=BE=AE=E4=BF=A1?=
 =?UTF-8?q?=E5=85=AC=E4=BC=97=E5=8F=B7=E7=9A=84=E5=9B=9E=E5=A4=8D=E5=92=8C?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E9=80=89=E6=8B=A9=E7=9A=84=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auto-components.d.ts                |  1 +
 .../mp/components/wx-material-select/main.vue | 57 +++++++---------
 src/views/mp/components/wx-reply/main.vue     | 65 ++++++-------------
 3 files changed, 42 insertions(+), 81 deletions(-)

diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index f93f11f6e..2d620925c 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
index ab3539740..b1bdd5aa6 100644
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -13,15 +13,14 @@
           <img class="material-img" :src="item.url" />
           <p class="item-name">{{ item.name }}</p>
           <el-row class="ope-row">
-            <el-button type="success" @click="selectMaterialFun(item)"
-              >选择 <Icon icon="ep:circle-check" />
+            <el-button type="success" @click="selectMaterialFun(item)">
+              选择 <Icon icon="ep:circle-check" />
             </el-button>
           </el-row>
         </div>
       </div>
       <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
+      <Pagination
         :total="total"
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
@@ -30,7 +29,6 @@
     </div>
     <!-- 类型：voice -->
     <div v-else-if="objData.type === 'voice'">
-      <!-- 列表 -->
       <el-table v-loading="loading" :data="list">
         <el-table-column label="编号" align="center" prop="mediaId" />
         <el-table-column label="文件名" align="center" prop="name" />
@@ -39,27 +37,23 @@
             <WxVoicePlayer :url="scope.row.url" />
           </template>
         </el-table-column>
-        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-          <template #default="scope">
-            <span>{{ formatDate(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
         <el-table-column
-          label="操作"
+          label="上传时间"
           align="center"
-          fixed="right"
-          class-name="small-padding fixed-width"
-        >
+          prop="createTime"
+          width="180"
+          :formatter="dateFormatter"
+        />
+        <el-table-column label="操作" align="center" fixed="right">
           <template #default="scope">
-            <el-button type="text" @click="selectMaterialFun(scope.row)"
-              >选择<Icon icon="ep:plus" />
+            <el-button type="text" @click="selectMaterialFun(scope.row)">
+              选择 <Icon icon="ep:plus" />
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
+      <Pagination
         :total="total"
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
@@ -79,17 +73,14 @@
             <WxVideoPlayer :url="scope.row.url" />
           </template>
         </el-table-column>
-        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-          <template #default="scope">
-            <span>{{ formatDate(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
         <el-table-column
-          label="操作"
+          label="上传时间"
           align="center"
-          fixed="right"
-          class-name="small-padding fixed-width"
-        >
+          prop="createTime"
+          width="180"
+          :formatter="dateFormatter"
+        />
+        <el-table-column label="操作" align="center">
           <template #default="scope">
             <el-button type="text" @click="selectMaterialFun(scope.row)"
               >选择<Icon icon="ep:circle-plus" />
@@ -98,8 +89,7 @@
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
+      <Pagination
         :total="total"
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
@@ -114,15 +104,14 @@
             <WxNews :articles="item.content.newsItem" />
             <el-row class="ope-row">
               <el-button type="success" @click="selectMaterialFun(item)">
-                选择<Icon icon="ep:circle-check" />
+                选择 <Icon icon="ep:circle-check" />
               </el-button>
             </el-row>
           </div>
         </div>
       </div>
       <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
+      <Pagination
         :total="total"
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
@@ -131,7 +120,6 @@
     </div>
   </div>
 </template>
-
 <script lang="ts" name="WxMaterialSelect">
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
@@ -139,7 +127,7 @@ import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 import { getMaterialPage } from '@/api/mp/material'
 import { getFreePublishPage } from '@/api/mp/freePublish'
 import { getDraftPage } from '@/api/mp/draft'
-import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import { defineComponent, PropType } from 'vue'
 
 export default defineComponent({
@@ -243,7 +231,6 @@ export default defineComponent({
       selectMaterialFun,
       getMaterialPageFun,
       getPage,
-      formatDate,
       newsTypeRef,
       queryParams,
       objDataRef,
diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue
index b7bc3443e..eb02be1a4 100644
--- a/src/views/mp/components/wx-reply/main.vue
+++ b/src/views/mp/components/wx-reply/main.vue
@@ -12,10 +12,7 @@
     <!-- 类型 1：文本 -->
     <el-tab-pane name="text">
       <template #label>
-        <el-row align="middle">
-          <icon icon="ep:document" />
-          文本
-        </el-row>
+        <el-row align="middle"><Icon icon="ep:document" /> 文本</el-row>
       </template>
       <el-input
         type="textarea"
@@ -28,10 +25,7 @@
     <!-- 类型 2：图片 -->
     <el-tab-pane name="image">
       <template #label>
-        <el-row align="middle">
-          <icon icon="ep:picture" class="mr-5px" />
-          图片
-        </el-row>
+        <el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 图片</el-row>
       </template>
       <!-- 情况一：已经选择好素材、或者上传好图片 -->
       <div class="select-item" v-if="objDataRef.url">
@@ -39,7 +33,7 @@
         <p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
         <el-row class="ope-row" justify="center">
           <el-button type="danger" circle @click="deleteObj">
-            <icon icon="ep:delete" />
+            <Icon icon="ep:delete" />
           </el-button>
         </el-row>
       </div>
@@ -48,8 +42,7 @@
         <!-- 选择素材 -->
         <el-col :span="12" class="col-select">
           <el-button type="success" @click="openMaterial">
-            素材库选择
-            <icon icon="ep:circle-check" />
+            素材库选择 <Icon icon="ep:circle-check" />
           </el-button>
           <el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
             <WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
@@ -70,10 +63,8 @@
             <el-button type="primary">上传图片</el-button>
             <template #tip>
               <span>
-                <div class="el-upload__tip"
-                  >支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div
-                ></span
-              >
+                <div class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div>
+              </span>
             </template>
           </el-upload>
         </el-col>
@@ -82,12 +73,8 @@
     <!-- 类型 3：语音 -->
     <el-tab-pane name="voice">
       <template #label>
-        <el-row align="middle">
-          <icon icon="ep:phone" />
-          语音
-        </el-row>
+        <el-row align="middle"><Icon icon="ep:phone" /> 语音</el-row>
       </template>
-
       <div class="select-item2" v-if="objDataRef.url">
         <p class="item-name">{{ objDataRef.name }}</p>
         <div class="item-infos">
@@ -121,8 +108,8 @@
           >
             <el-button type="primary">点击上传</el-button>
             <template #tip>
-              <div class="el-upload__tip"
-                >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+              <div class="el-upload__tip">
+                格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
               </div>
             </template>
           </el-upload>
@@ -132,10 +119,7 @@
     <!-- 类型 4：视频 -->
     <el-tab-pane name="video">
       <template #label>
-        <el-row align="middle">
-          <icon icon="ep:share" />
-          视频
-        </el-row>
+        <el-row align="middle"><Icon icon="ep:share" /> 视频</el-row>
       </template>
       <el-row>
         <el-input
@@ -158,8 +142,7 @@
             <!-- 选择素材 -->
             <el-col :span="12">
               <el-button type="success" @click="openMaterial">
-                素材库选择
-                <icon icon="ep:circle-check" />
+                素材库选择 <Icon icon="ep:circle-check" />
               </el-button>
               <el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
                 <WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
@@ -177,10 +160,7 @@
                 :before-upload="beforeVideoUpload"
                 :on-success="handleUploadSuccess"
               >
-                <el-button type="primary"
-                  >新建视频
-                  <icon icon="ep:upload" />
-                </el-button>
+                <el-button type="primary">新建视频 <Icon icon="ep:upload" /></el-button>
               </el-upload>
             </el-col>
           </el-row>
@@ -190,17 +170,14 @@
     <!-- 类型 5：图文 -->
     <el-tab-pane name="news">
       <template #label>
-        <el-row align="middle">
-          <icon icon="ep:reading" />
-          图文
-        </el-row>
+        <el-row align="middle"><Icon icon="ep:reading" /> 图文</el-row>
       </template>
       <el-row>
         <div class="select-item" v-if="objDataRef.articles?.length > 0">
           <WxNews :articles="objDataRef.articles" />
           <el-col class="ope-row">
             <el-button type="danger" circle @click="deleteObj">
-              <icon icon="ep:delete" />
+              <Icon icon="ep:delete" />
             </el-button>
           </el-col>
         </div>
@@ -208,8 +185,8 @@
         <el-col :span="24" v-if="!objDataRef.content">
           <el-row style="text-align: center" align="middle">
             <el-col :span="24">
-              <el-button type="success" @click="openMaterial"
-                >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文' }}
+              <el-button type="success" @click="openMaterial">
+                {{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文' }}
                 <icon icon="ep:circle-check" />
               </el-button>
             </el-col>
@@ -227,10 +204,7 @@
     <!-- 类型 6：音乐 -->
     <el-tab-pane name="music">
       <template #label>
-        <el-row align="middle">
-          <icon icon="ep:service" />
-          音乐
-        </el-row>
+        <el-row align="middle"><Icon icon="ep:service" />音乐</el-row>
       </template>
       <el-row align="middle" justify="center">
         <el-col :span="6">
@@ -259,8 +233,8 @@
                     <template #trigger>
                       <el-button type="text">本地上传</el-button>
                     </template>
-                    <el-button type="text" @click="openMaterial" style="margin-left: 5px"
-                      >素材库选择
+                    <el-button type="text" @click="openMaterial" style="margin-left: 5px">
+                      素材库选择
                     </el-button>
                   </el-upload>
                 </div>
@@ -295,7 +269,6 @@
     </el-tab-pane>
   </el-tabs>
 </template>
-
 <script lang="ts" name="WxReplySelect">
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'

From e1a2d4b7029da38e0313a4fcc43210c41658c198 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 8 Apr 2023 18:04:26 +0800
Subject: [PATCH 11/16] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20dev=20=E5=90=AF?=
 =?UTF-8?q?=E5=8A=A8=E7=9A=84=E7=8E=AF=E5=A2=83=E8=AE=BE=E7=BD=AE=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 48858528b..def1f5c75 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "private": false,
   "scripts": {
     "i": "pnpm install",
-    "dev": "pnpm vite",
+    "dev": "vite --mode base",
     "front": "vite --mode front",
     "ts:check": "vue-tsc --noEmit",
     "build:pro": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode pro",

From f7fe794944197b9164df561a8d98f30ba6cf589a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 8 Apr 2023 20:28:33 +0800
Subject: [PATCH 12/16] =?UTF-8?q?REVIEW=20=E5=85=AC=E4=BC=97=E5=8F=B7?=
 =?UTF-8?q?=E7=9A=84=E8=8D=89=E7=A8=BF=E7=AE=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mp/components/wx-material-select/main.vue | 55 +++++------
 src/views/mp/draft/index.vue                  | 96 +++++++++----------
 2 files changed, 69 insertions(+), 82 deletions(-)

diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
index 74e068a6a..87a19dadf 100644
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -13,15 +13,14 @@
           <img class="material-img" :src="item.url" />
           <p class="item-name">{{ item.name }}</p>
           <el-row class="ope-row">
-            <el-button type="success" @click="selectMaterialFun(item)"
-            >选择 <Icon icon="ep:circle-check" />
+            <el-button type="success" @click="selectMaterialFun(item)">
+              选择 <Icon icon="ep:circle-check" />
             </el-button>
           </el-row>
         </div>
       </div>
       <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
+      <Pagination
         :total="total"
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
@@ -39,27 +38,23 @@
             <WxVoicePlayer :url="scope.row.url" />
           </template>
         </el-table-column>
-        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-          <template #default="scope">
-            <span>{{ formatDate(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
         <el-table-column
-          label="操作"
+          label="上传时间"
           align="center"
-          fixed="right"
-          class-name="small-padding fixed-width"
-        >
+          prop="createTime"
+          width="180"
+          :formatter="dateFormatter"
+        />
+        <el-table-column label="操作" align="center" fixed="right">
           <template #default="scope">
-            <el-button type="text" @click="selectMaterialFun(scope.row)"
-            >选择<Icon icon="ep:plus" />
+            <el-button type="text" @click="selectMaterialFun(scope.row)">
+              选择<Icon icon="ep:plus" />
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
+      <Pagination
         :total="total"
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
@@ -79,11 +74,13 @@
             <WxVideoPlayer :url="scope.row.url" />
           </template>
         </el-table-column>
-        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
-          <template #default="scope">
-            <span>{{ formatDate(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
+        <el-table-column
+          label="上传时间"
+          align="center"
+          prop="createTime"
+          width="180"
+          :formatter="dateFormatter"
+        />
         <el-table-column
           label="操作"
           align="center"
@@ -91,15 +88,14 @@
           class-name="small-padding fixed-width"
         >
           <template #default="scope">
-            <el-button type="text" @click="selectMaterialFun(scope.row)"
-            >选择<Icon icon="akar-icons:circle-plus" />
+            <el-button type="text" @click="selectMaterialFun(scope.row)">
+              选择<Icon icon="akar-icons:circle-plus" />
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
+      <Pagination
         :total="total"
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
@@ -121,8 +117,7 @@
         </div>
       </div>
       <!-- 分页组件 -->
-      <pagination
-        v-show="total > 0"
+      <Pagination
         :total="total"
         v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
@@ -139,7 +134,7 @@ import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
 import { getMaterialPage } from '@/api/mp/material'
 import { getFreePublishPage } from '@/api/mp/freePublish'
 import { getDraftPage } from '@/api/mp/draft'
-import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import { defineComponent, PropType } from 'vue'
 
 export default defineComponent({
@@ -244,7 +239,6 @@ export default defineComponent({
       getMaterialPageFun,
       getPage,
       formatDate,
-      newsTypeRef,
       queryParams,
       objDataRef,
       list,
@@ -254,7 +248,6 @@ export default defineComponent({
   }
 })
 </script>
-
 <style lang="scss" scoped>
 /*瀑布流样式*/
 .waterfall {
diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index 6a4fa31a3..604f8faf9 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -1,40 +1,37 @@
 <template>
-  <div class="app-container">
-    <doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+  <doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
 
-    <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
       <el-form-item label="公众号" prop="accountId">
         <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
           <el-option
             v-for="item in accountList"
-            :key="parseInt(item.id)"
+            :key="item.id"
             :label="item.name"
-            :value="parseInt(item.id)"
+            :value="item.id"
           />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+        <el-button type="primary" plain @click="handleAdd" v-hasPermi="['mp:draft:create']">
+          <Icon icon="ep:plus" />新增
+        </el-button>
       </el-form-item>
     </el-form>
+  </ContentWrap>
 
-    <!-- 操作工具栏 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          size="small"
-          @click="handleAdd"
-          v-hasPermi="['mp:draft:create']"
-          ><Icon icon="ep:plus" />新增
-        </el-button>
-      </el-col>
-    </el-row>
-
-    <!-- 列表 -->
+  <!-- 列表 -->
+  <ContentWrap>
     <div class="waterfall" v-loading="loading">
       <template v-for="item in list" :key="item.articleId">
         <div class="waterfall-item" v-if="item.content && item.content.newsItem">
@@ -46,35 +43,40 @@
               circle
               @click="handlePublish(item)"
               v-hasPermi="['mp:free-publish:submit']"
-              ><Icon icon="fa:upload"
-            /></el-button>
+            >
+              <Icon icon="fa:upload" />
+            </el-button>
             <el-button
               type="primary"
               circle
               @click="handleUpdate(item)"
               v-hasPermi="['mp:draft:update']"
-              ><Icon icon="ep:edit"
-            /></el-button>
+            >
+              <Icon icon="ep:edit" />
+            </el-button>
             <el-button
               type="danger"
               circle
               @click="handleDelete(item)"
               v-hasPermi="['mp:draft:delete']"
-              ><Icon icon="ep:delete"
-            /></el-button>
+            >
+              <Icon icon="ep:delete" />
+            </el-button>
           </el-row>
         </div>
       </template>
     </div>
     <!-- 分页记录 -->
-    <pagination
-      v-show="total > 0"
+    <Pagination
       :total="total"
       v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
+  </ContentWrap>
 
+  <!-- TODO @Dhb52：迁移成独立路由 -->
+  <div class="app-container">
     <!-- 添加或修改草稿对话框 -->
     <Teleport to="body">
       <el-dialog
@@ -254,9 +256,7 @@
     </Teleport>
   </div>
 </template>
-
 <script setup name="MpDraft">
-import { ref, onMounted, reactive, nextTick } from 'vue'
 import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
@@ -264,30 +264,24 @@ import { getAccessToken } from '@/utils/auth'
 import { createDraft, deleteDraft, getDraftPage, updateDraft } from '@/api/mp/draft'
 import { getSimpleAccountList } from '@/api/mp/account'
 import { submitFreePublish } from '@/api/mp/freePublish'
+const message = useMessage() // 消息
 // 可以用改本地数据模拟，避免API调用超限
 // import drafts from './mock'
 
-const BASE_URL = import.meta.env.VITE_BASE_URL
-
-const message = useMessage()
-
-const materialSelectRef = ref()
-const queryFormRef = ref()
-
-// 遮罩层
-const loading = ref(false)
-// 显示搜索条件
-// 总条数
-const total = ref(0)
-// 数据列表
-const list = ref([])
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   accountId: undefined
 })
+const queryFormRef = ref() // 搜索的表单
+const accountList = ref([]) // 公众号账号列表
 
 // ========== 文件上传 ==========
+const materialSelectRef = ref()
+const BASE_URL = import.meta.env.VITE_BASE_URL
 const actionUrl = ref(BASE_URL + '/admin-api/mp/material/upload-permanent') // 上传永久素材的地址
 const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
 const fileList = ref([])
@@ -305,9 +299,8 @@ const dialogImageVisible = ref(false)
 const operateMaterial = ref('add')
 const articlesMediaId = ref('')
 const hackResetEditor = ref(false)
-// 公众号账号列表
-const accountList = ref([])
 
+/** 初始化 **/
 onMounted(async () => {
   accountList.value = await getSimpleAccountList()
   // 选中第一个
@@ -393,6 +386,7 @@ const handleUpdate = (item) => {
 
 /** 提交按钮 */
 const submitForm = () => {
+  // TODO @Dhb52: 参考别的模块写法，改成 await 方式
   addMaterialLoading.value = true
   if (operateMaterial.value === 'add') {
     createDraft(queryParams.accountId, articlesAdd.value)
@@ -560,23 +554,23 @@ const handlePublish = async (item) => {
   try {
     await message.confirm(content)
     await submitFreePublish(accountId, mediaId)
-    getList()
     message.notifySuccess('发布成功')
+    await getList()
   } catch {}
 }
 
+/** 删除按钮操作 */
 const handleDelete = async (item) => {
   const accountId = queryParams.accountId
   const mediaId = item.mediaId
   try {
     await message.confirm('此操作将永久删除该草稿, 是否继续?')
     await deleteDraft(accountId, mediaId)
-    getList()
     message.notifySuccess('删除成功')
+    await getList()
   } catch {}
 }
 </script>
-
 <style lang="scss" scoped>
 .pagination {
   float: right;

From ef4f6bda5c7d64c77ba21a0b8362db47a5bb178a Mon Sep 17 00:00:00 2001
From: Aix <949148000@qq.com>
Date: Sat, 8 Apr 2023 20:31:52 +0800
Subject: [PATCH 13/16] =?UTF-8?q?=E3=80=90feature=E3=80=91=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=95=86=E5=93=81=E5=93=81=E7=89=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/brand.ts              |  56 +++++++
 src/views/mall/product/brand/BrandForm.vue | 109 +++++++++++++
 src/views/mall/product/brand/index.vue     | 177 +++++++++++++++++++++
 3 files changed, 342 insertions(+)
 create mode 100644 src/api/mall/product/brand.ts
 create mode 100644 src/views/mall/product/brand/BrandForm.vue
 create mode 100644 src/views/mall/product/brand/index.vue

diff --git a/src/api/mall/product/brand.ts b/src/api/mall/product/brand.ts
new file mode 100644
index 000000000..f5f6e2183
--- /dev/null
+++ b/src/api/mall/product/brand.ts
@@ -0,0 +1,56 @@
+import request from '@/config/axios'
+
+/**
+ * 商品品牌
+ */
+export interface BrandVO {
+  /**
+   * 品牌编号
+   */
+  id?: number
+  /**
+   * 品牌名称
+   */
+  name: string
+  /**
+   * 品牌图片
+   */
+  picUrl: string
+  /**
+   * 品牌排序
+   */
+  sort?: number
+  /**
+   * 品牌描述
+   */
+  description?: string
+  /**
+   * 开启状态
+   */
+  status: number
+}
+
+// 创建商品品牌
+export const createBrand = (data: BrandVO) => {
+  return request.post({ url: '/product/brand/create', data })
+}
+
+// 更新商品品牌
+export const updateBrand = (data: BrandVO) => {
+  return request.put({ url: '/product/brand/update', data })
+}
+
+// 删除商品品牌
+export const deleteBrand = (id: number) => {
+  return request.delete({ url: `/product/brand/delete?id=${id}` })
+}
+
+// 获得商品品牌
+export const getBrand = (id: number) => {
+  return request.get({ url: `/product/brand/get?id=${id}` })
+}
+
+// 获得商品品牌列表
+export const getBrandList = (params: any) => {
+  return request.get({ url: '/product/brand/page', params })
+}
diff --git a/src/views/mall/product/brand/BrandForm.vue b/src/views/mall/product/brand/BrandForm.vue
new file mode 100644
index 000000000..38e9de52c
--- /dev/null
+++ b/src/views/mall/product/brand/BrandForm.vue
@@ -0,0 +1,109 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="品牌名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入品牌名称" />
+      </el-form-item>
+      <el-form-item label="品牌图片" prop="picUrl">
+        <UploadImg v-model="formData.picUrl" :limit="1" :is-show-tip="false" />
+        <div style="font-size: 10px">推荐 100x100 图片分辨率</div>
+      </el-form-item>
+      <el-form-item label="品牌排序" prop="sort">
+        <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
+      </el-form-item>
+      <el-form-item label="品牌描述">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入品牌描述" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts" name="ProductBrand">
+import { CommonStatusEnum } from '@/utils/constants'
+import * as ProductBrandApi from '@/api/mall/product/brand'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: '',
+  picUrl: '',
+  status: CommonStatusEnum.ENABLE,
+  description: ''
+})
+const formRules = reactive({
+  name: [{ required: true, message: '品牌名称不能为空', trigger: 'blur' }],
+  picUrl: [{ required: true, message: '品牌图片不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '品牌排序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ProductBrandApi.getBrand(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as ProductBrandApi.BrandVO
+    if (formType.value === 'create') {
+      await ProductBrandApi.createBrand(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ProductBrandApi.updateBrand(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    picUrl: '',
+    status: CommonStatusEnum.ENABLE,
+    description: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/product/brand/index.vue b/src/views/mall/product/brand/index.vue
new file mode 100644
index 000000000..5d13b517d
--- /dev/null
+++ b/src/views/mall/product/brand/index.vue
@@ -0,0 +1,177 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="品牌名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入品牌名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['product:brand:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
+      <el-table-column label="品牌名称" prop="name" sortable />
+      <el-table-column label="品牌图片" align="center" prop="picUrl">
+        <template #default="scope">
+          <img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="品牌图片" class="h-100px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="品牌排序" align="center" prop="sort" />
+      <el-table-column label="开启状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['product:brand:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['product:brand:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <BrandForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="ProductBrand">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as ProductBrandApi from '@/api/mall/product/brand'
+import BrandForm from './BrandForm.vue'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref<any[]>([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductBrandApi.getBrandList(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ProductBrandApi.deleteBrand(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

From 867b60a948110d76085c841bdb2d96ba01ef0121 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 8 Apr 2023 20:48:26 +0800
Subject: [PATCH 14/16] =?UTF-8?q?feat:=20=E5=BE=AE=E4=BF=A1=E7=B2=89?=
 =?UTF-8?q?=E4=B8=9D=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/mpuser/index.vue | 292 +++++++++++++++++++++++++++++++++-
 1 file changed, 291 insertions(+), 1 deletion(-)

diff --git a/src/views/mp/mpuser/index.vue b/src/views/mp/mpuser/index.vue
index 497f72ec1..d773760dd 100644
--- a/src/views/mp/mpuser/index.vue
+++ b/src/views/mp/mpuser/index.vue
@@ -1,3 +1,293 @@
 <template>
-  <span>开发中</span>
+  <div class="app-container">
+    <doc-alert title="公众号粉丝" url="https://doc.iocoder.cn/mp/user/" />
+
+    <!-- 搜索工作栏 -->
+    <el-form
+      :model="queryParams"
+      ref="queryFormRef"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="公众号" prop="accountId">
+        <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
+          <el-option
+            v-for="item in accounts"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用户标识" prop="openid">
+        <el-input
+          v-model="queryParams.openid"
+          placeholder="请输入用户标识"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input
+          v-model="queryParams.nickname"
+          placeholder="请输入昵称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-refresh"
+          size="small"
+          @click="handleSync"
+          v-hasPermi="['mp:user:sync']"
+          >同步
+        </el-button>
+      </el-col>
+      <!-- <right-toolbar :showSearch="showSearch" @query-table="getList" /> -->
+    </el-row>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="id" />
+        <el-table-column label="用户标识" align="center" prop="openid" width="260" />
+        <el-table-column label="昵称" align="center" prop="nickname" />
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="标签" align="center" prop="tagIds" width="200">
+          <template #default="scope">
+            <span v-for="(tagId, index) in scope.row.tagIds" :key="index">
+              <el-tag>{{ tags.find((tag) => tag.tagId === tagId)?.name }} </el-tag>&nbsp;
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="订阅状态" align="center" prop="subscribeStatus">
+          <template #default="scope">
+            <el-tag v-if="scope.row.subscribeStatus === 0" type="success">已订阅</el-tag>
+            <el-tag v-else type="danger">未订阅</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="订阅时间" align="center" prop="subscribeTime" width="180">
+          <template #default="scope">
+            <span>{{ formatDate(scope.row.subscribeTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <div class="flex justify-center items-center">
+              <el-button
+                type="primary"
+                link
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['mp:user:update']"
+              >
+                <Icon icon="ep:edit" />修改
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </ContentWrap>
+
+    <!-- 分页组件 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="昵称" prop="nickname">
+          <el-input v-model="form.nickname" placeholder="请输入昵称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="标签" prop="tagIds">
+          <el-select v-model="form.tagIds" multiple clearable placeholder="请选择标签">
+            <el-option
+              v-for="item in tags"
+              :key="parseInt(item.tagId)"
+              :label="item.name"
+              :value="parseInt(item.tagId)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
+
+<script lang="ts" setup name="MpUser">
+import { ref, reactive } from 'vue'
+import { updateUser, getUser, getUserPage, syncUser } from '@/api/mp/mpuser'
+import { getSimpleAccountList } from '@/api/mp/account'
+import { getSimpleTagList } from '@/api/mp/tag'
+import { formatDate } from '@/utils/formatTime'
+
+const message = useMessage()
+
+const formRef = ref()
+const queryFormRef = ref()
+
+// 遮罩层
+const loading = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 总条数
+const total = ref(0)
+// 微信公众号粉丝列表
+const list = ref([])
+// 弹出层标题
+const title = ref('')
+// 是否显示弹出层
+const open = ref(false)
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  accountId: null,
+  openid: null,
+  nickname: null
+})
+// 表单参数
+const form = ref({})
+// 表单校验
+const rules = ref({})
+
+// 公众号账号列表
+const accounts = ref([])
+// 公众号标签列表
+const tags = ref([])
+
+onMounted(() => {
+  getSimpleAccountList().then((data) => {
+    accounts.value = data
+    // 默认选中第一个
+    if (accounts.value.length > 0) {
+      queryParams.accountId = accounts.value[0].id
+    }
+    // 加载数据
+    getList()
+  })
+
+  // 加载标签
+  getSimpleTagList().then((data) => {
+    tags.value = data
+  })
+})
+
+/** 查询列表 */
+const getList = () => {
+  // 如果没有选中公众号账号，则进行提示。
+  if (!queryParams.accountId) {
+    message.error('未选中公众号，无法查询用户')
+    return false
+  }
+
+  loading.value = true
+  // 处理查询参数
+  let params = { ...queryParams }
+  // 执行查询
+  getUserPage(params)
+    .then((data) => {
+      list.value = data.list
+      total.value = data.total
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+/** 取消按钮 */
+const cancel = () => {
+  open.value = false
+  reset()
+}
+
+/** 表单重置 */
+const reset = () => {
+  form.value = {
+    id: undefined,
+    nickname: undefined,
+    remark: undefined,
+    tagIds: []
+  }
+  formRef.value?.resetFields()
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  // 默认选中第一个
+  if (accounts.value.length > 0) {
+    queryParams.accountId = accounts.value[0].id
+  }
+  handleQuery()
+}
+
+/** 修改按钮操作 */
+const handleUpdate = (row) => {
+  reset()
+  getUser(row.id).then((data) => {
+    form.value = data
+    open.value = true
+    title.value = '修改公众号粉丝'
+  })
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value.validate((valid) => {
+    if (!valid) {
+      return
+    }
+    // 修改的提交
+    if (form.value.id != null) {
+      updateUser(form.value).then(() => {
+        message.success('修改成功')
+        open.value = false
+        getList()
+      })
+    }
+  })
+}
+
+/** 同步标签 */
+const handleSync = async () => {
+  const accountId = queryParams.accountId
+  try {
+    await message.confirm('是否确认同步粉丝？')
+    await syncUser(accountId)
+    message.success('开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询')
+  } catch {}
+}
+</script>

From 40e23bd8057676eaa2a89437c34c4598445aadaf Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 8 Apr 2023 21:37:54 +0800
Subject: [PATCH 15/16] =?UTF-8?q?REVIEW=20=E5=85=AC=E4=BC=97=E5=8F=B7?=
 =?UTF-8?q?=E7=9A=84=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mp/draft/index.vue                  | 18 ++---
 src/views/mp/menu/index.vue                   | 71 +++++++++----------
 .../menu/{menuOptions.js => menuOptions.ts}   |  0
 3 files changed, 42 insertions(+), 47 deletions(-)
 rename src/views/mp/menu/{menuOptions.js => menuOptions.ts} (100%)

diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index 604f8faf9..d2ed1e24c 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -261,9 +261,9 @@ import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import { getAccessToken } from '@/utils/auth'
-import { createDraft, deleteDraft, getDraftPage, updateDraft } from '@/api/mp/draft'
-import { getSimpleAccountList } from '@/api/mp/account'
-import { submitFreePublish } from '@/api/mp/freePublish'
+import * as MpAccountApi from '@/api/mp/account'
+import * as MpDraftApi from '@/api/mp/draft'
+import * as MpFreePublishApi from '@/api/mp/freePublish'
 const message = useMessage() // 消息
 // 可以用改本地数据模拟，避免API调用超限
 // import drafts from './mock'
@@ -302,7 +302,7 @@ const hackResetEditor = ref(false)
 
 /** 初始化 **/
 onMounted(async () => {
-  accountList.value = await getSimpleAccountList()
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 选中第一个
   if (accountList.value.length > 0) {
     // @ts-ignore
@@ -328,7 +328,7 @@ const getList = async () => {
 
   loading.value = true
   try {
-    const drafts = await getDraftPage(queryParams)
+    const drafts = await MpDraftApi.getDraftPage(queryParams)
     drafts.list.forEach((item) => {
       const newsItem = item.content.newsItem
       // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
@@ -389,7 +389,7 @@ const submitForm = () => {
   // TODO @Dhb52: 参考别的模块写法，改成 await 方式
   addMaterialLoading.value = true
   if (operateMaterial.value === 'add') {
-    createDraft(queryParams.accountId, articlesAdd.value)
+    MpDraftApi.createDraft(queryParams.accountId, articlesAdd.value)
       .then(() => {
         message.notifySuccess('新增成功')
         dialogNewsVisible.value = false
@@ -399,7 +399,7 @@ const submitForm = () => {
         addMaterialLoading.value = false
       })
   } else {
-    updateDraft(queryParams.accountId, articlesMediaId.value, articlesAdd.value)
+    MpDraftApi.updateDraft(queryParams.accountId, articlesMediaId.value, articlesAdd.value)
       .then(() => {
         message.notifySuccess('更新成功')
         dialogNewsVisible.value = false
@@ -553,7 +553,7 @@ const handlePublish = async (item) => {
     '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。已发布内容不会推送给用户，也不会展示在公众号主页中。 发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。'
   try {
     await message.confirm(content)
-    await submitFreePublish(accountId, mediaId)
+    await MpFreePublishApi.submitFreePublish(accountId, mediaId)
     message.notifySuccess('发布成功')
     await getList()
   } catch {}
@@ -565,7 +565,7 @@ const handleDelete = async (item) => {
   const mediaId = item.mediaId
   try {
     await message.confirm('此操作将永久删除该草稿, 是否继续?')
-    await deleteDraft(accountId, mediaId)
+    await MpDraftApi.deleteDraft(accountId, mediaId)
     message.notifySuccess('删除成功')
     await getList()
   } catch {}
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index a8e3d8809..ae2b24913 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -1,25 +1,33 @@
 <template>
-  <div class="app-container">
-    <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
-
-    <!-- 搜索工作栏 -->
-    <el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+  <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
       <el-form-item label="公众号" prop="accountId">
         <el-select v-model="accountId" placeholder="请选择公众号">
           <el-option
             v-for="item in accountList"
-            :key="parseInt(item.id)"
+            :key="item.id"
             :label="item.name"
-            :value="parseInt(item.id)"
+            :value="item.id"
           />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
       </el-form-item>
     </el-form>
+  </ContentWrap>
 
+  <!-- 列表 -->
+  <ContentWrap>
     <div class="public-account-management clearfix" v-loading="loading">
       <!--左边配置菜单-->
       <div class="left">
@@ -63,7 +71,6 @@
           <el-button
             class="save_btn"
             type="success"
-            size="small"
             @click="handleSave"
             v-hasPermi="['mp:menu:save']"
             >保存并发布菜单</el-button
@@ -71,7 +78,6 @@
           <el-button
             class="save_btn"
             type="danger"
-            size="small"
             @click="handleDelete"
             v-hasPermi="['mp:menu:delete']"
             >清空菜单</el-button
@@ -82,9 +88,9 @@
       <div v-if="showRightFlag" class="right">
         <div class="configure_page">
           <div class="delete_btn">
-            <el-button size="small" type="danger" @click="handleDeleteMenu(tempObj)"
-              >删除当前菜单<Icon icon="ep:delete"
-            /></el-button>
+            <el-button size="small" type="danger" @click="handleDeleteMenu(tempObj)">
+              删除当前菜单<Icon icon="ep:delete" />
+            </el-button>
           </div>
           <div>
             <span>菜单名称：</span>
@@ -161,9 +167,9 @@
                 <div class="select-item" v-if="tempObj && tempObj.replyArticles">
                   <WxNews :articles="tempObj.replyArticles" />
                   <el-row class="ope-row" justify="center" align="middle">
-                    <el-button type="danger" circle @click="deleteMaterial"
-                      ><icon icon="ep:delete"
-                    /></el-button>
+                    <el-button type="danger" circle @click="deleteMaterial">
+                      <icon icon="ep:delete" />
+                    </el-button>
                   </el-row>
                 </div>
                 <div v-else>
@@ -197,33 +203,25 @@
         <p>请选择菜单配置</p>
       </div>
     </div>
-  </div>
+  </ContentWrap>
 </template>
-
-<script setup>
-import { ref, nextTick } from 'vue'
+<script setup name="MpMenu">
+import { handleTree } from '@/utils/tree'
 import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue'
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import { deleteMenu, getMenuList, saveMenu } from '@/api/mp/menu'
-import { getSimpleAccountList } from '@/api/mp/account'
-import { handleTree } from '@/utils/tree'
+import * as MpAccountApi from '@/api/mp/account'
 import menuOptions from './menuOptions'
-
-const message = useMessage()
+const message = useMessage() // 消息
 
 // ======================== 列表查询 ========================
-// 遮罩层
-const loading = ref(true)
-// 显示搜索条件
-const showSearch = ref(true)
-// 公众号Id
-const accountId = ref(undefined)
-// 公众号名
-const name = ref('')
+const loading = ref(true) // 遮罩层
+const accountId = ref(undefined) // 公众号Id
+const name = ref('') // 公众号名
 const menuList = ref({ children: [] })
+const accountList = ref([]) // 公众号账号列表
 
-// const menuList = ref(menuListData)
 // ======================== 菜单操作 ========================
 const isActive = ref(-1) // 一级菜单点中样式
 const isSubMenuActive = ref(-1) // 一级菜单点中样式
@@ -241,11 +239,8 @@ const tempSelfObj = ref({
 })
 const dialogNewsVisible = ref(false) // 跳转图文时的素材选择弹窗
 
-// 公众号账号列表
-const accountList = ref([])
-
 onMounted(async () => {
-  accountList.value = await getSimpleAccountList()
+  accountList.value = await MpAccountApi.getSimpleAccountList()
   // 选中第一个
   if (accountList.value.length > 0) {
     // @ts-ignore
diff --git a/src/views/mp/menu/menuOptions.js b/src/views/mp/menu/menuOptions.ts
similarity index 100%
rename from src/views/mp/menu/menuOptions.js
rename to src/views/mp/menu/menuOptions.ts

From 31dfa867834f08e42f885f0b70dfb5f161cd99ac Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 8 Apr 2023 22:32:04 +0800
Subject: [PATCH 16/16] =?UTF-8?q?REVIEW=20=E5=85=AC=E4=BC=97=E5=8F=B7?=
 =?UTF-8?q?=E7=9A=84=E7=B2=89=E4=B8=9D=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mp/{mpuser => user}/index.ts |   0
 src/views/mp/mpuser/index.vue        | 293 ---------------------------
 src/views/mp/user/UserForm.vue       |  99 +++++++++
 src/views/mp/user/index.vue          | 187 +++++++++++++++++
 4 files changed, 286 insertions(+), 293 deletions(-)
 rename src/api/mp/{mpuser => user}/index.ts (100%)
 delete mode 100644 src/views/mp/mpuser/index.vue
 create mode 100644 src/views/mp/user/UserForm.vue
 create mode 100644 src/views/mp/user/index.vue

diff --git a/src/api/mp/mpuser/index.ts b/src/api/mp/user/index.ts
similarity index 100%
rename from src/api/mp/mpuser/index.ts
rename to src/api/mp/user/index.ts
diff --git a/src/views/mp/mpuser/index.vue b/src/views/mp/mpuser/index.vue
deleted file mode 100644
index d773760dd..000000000
--- a/src/views/mp/mpuser/index.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<template>
-  <div class="app-container">
-    <doc-alert title="公众号粉丝" url="https://doc.iocoder.cn/mp/user/" />
-
-    <!-- 搜索工作栏 -->
-    <el-form
-      :model="queryParams"
-      ref="queryFormRef"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-    >
-      <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="queryParams.accountId" placeholder="请选择公众号">
-          <el-option
-            v-for="item in accounts"
-            :key="parseInt(item.id)"
-            :label="item.name"
-            :value="parseInt(item.id)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="用户标识" prop="openid">
-        <el-input
-          v-model="queryParams.openid"
-          placeholder="请输入用户标识"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="昵称" prop="nickname">
-        <el-input
-          v-model="queryParams.nickname"
-          placeholder="请输入昵称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 操作工具栏 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-refresh"
-          size="small"
-          @click="handleSync"
-          v-hasPermi="['mp:user:sync']"
-          >同步
-        </el-button>
-      </el-col>
-      <!-- <right-toolbar :showSearch="showSearch" @query-table="getList" /> -->
-    </el-row>
-
-    <!-- 列表 -->
-    <ContentWrap>
-      <el-table v-loading="loading" :data="list">
-        <el-table-column label="编号" align="center" prop="id" />
-        <el-table-column label="用户标识" align="center" prop="openid" width="260" />
-        <el-table-column label="昵称" align="center" prop="nickname" />
-        <el-table-column label="备注" align="center" prop="remark" />
-        <el-table-column label="标签" align="center" prop="tagIds" width="200">
-          <template #default="scope">
-            <span v-for="(tagId, index) in scope.row.tagIds" :key="index">
-              <el-tag>{{ tags.find((tag) => tag.tagId === tagId)?.name }} </el-tag>&nbsp;
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="订阅状态" align="center" prop="subscribeStatus">
-          <template #default="scope">
-            <el-tag v-if="scope.row.subscribeStatus === 0" type="success">已订阅</el-tag>
-            <el-tag v-else type="danger">未订阅</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="订阅时间" align="center" prop="subscribeTime" width="180">
-          <template #default="scope">
-            <span>{{ formatDate(scope.row.subscribeTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center">
-          <template #default="scope">
-            <div class="flex justify-center items-center">
-              <el-button
-                type="primary"
-                link
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['mp:user:update']"
-              >
-                <Icon icon="ep:edit" />修改
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </ContentWrap>
-
-    <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="昵称" prop="nickname">
-          <el-input v-model="form.nickname" placeholder="请输入昵称" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-        <el-form-item label="标签" prop="tagIds">
-          <el-select v-model="form.tagIds" multiple clearable placeholder="请选择标签">
-            <el-option
-              v-for="item in tags"
-              :key="parseInt(item.tagId)"
-              :label="item.name"
-              :value="parseInt(item.tagId)"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts" setup name="MpUser">
-import { ref, reactive } from 'vue'
-import { updateUser, getUser, getUserPage, syncUser } from '@/api/mp/mpuser'
-import { getSimpleAccountList } from '@/api/mp/account'
-import { getSimpleTagList } from '@/api/mp/tag'
-import { formatDate } from '@/utils/formatTime'
-
-const message = useMessage()
-
-const formRef = ref()
-const queryFormRef = ref()
-
-// 遮罩层
-const loading = ref(true)
-// 显示搜索条件
-const showSearch = ref(true)
-// 总条数
-const total = ref(0)
-// 微信公众号粉丝列表
-const list = ref([])
-// 弹出层标题
-const title = ref('')
-// 是否显示弹出层
-const open = ref(false)
-// 查询参数
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  accountId: null,
-  openid: null,
-  nickname: null
-})
-// 表单参数
-const form = ref({})
-// 表单校验
-const rules = ref({})
-
-// 公众号账号列表
-const accounts = ref([])
-// 公众号标签列表
-const tags = ref([])
-
-onMounted(() => {
-  getSimpleAccountList().then((data) => {
-    accounts.value = data
-    // 默认选中第一个
-    if (accounts.value.length > 0) {
-      queryParams.accountId = accounts.value[0].id
-    }
-    // 加载数据
-    getList()
-  })
-
-  // 加载标签
-  getSimpleTagList().then((data) => {
-    tags.value = data
-  })
-})
-
-/** 查询列表 */
-const getList = () => {
-  // 如果没有选中公众号账号，则进行提示。
-  if (!queryParams.accountId) {
-    message.error('未选中公众号，无法查询用户')
-    return false
-  }
-
-  loading.value = true
-  // 处理查询参数
-  let params = { ...queryParams }
-  // 执行查询
-  getUserPage(params)
-    .then((data) => {
-      list.value = data.list
-      total.value = data.total
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-/** 取消按钮 */
-const cancel = () => {
-  open.value = false
-  reset()
-}
-
-/** 表单重置 */
-const reset = () => {
-  form.value = {
-    id: undefined,
-    nickname: undefined,
-    remark: undefined,
-    tagIds: []
-  }
-  formRef.value?.resetFields()
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  // 默认选中第一个
-  if (accounts.value.length > 0) {
-    queryParams.accountId = accounts.value[0].id
-  }
-  handleQuery()
-}
-
-/** 修改按钮操作 */
-const handleUpdate = (row) => {
-  reset()
-  getUser(row.id).then((data) => {
-    form.value = data
-    open.value = true
-    title.value = '修改公众号粉丝'
-  })
-}
-
-/** 提交按钮 */
-const submitForm = () => {
-  formRef.value.validate((valid) => {
-    if (!valid) {
-      return
-    }
-    // 修改的提交
-    if (form.value.id != null) {
-      updateUser(form.value).then(() => {
-        message.success('修改成功')
-        open.value = false
-        getList()
-      })
-    }
-  })
-}
-
-/** 同步标签 */
-const handleSync = async () => {
-  const accountId = queryParams.accountId
-  try {
-    await message.confirm('是否确认同步粉丝？')
-    await syncUser(accountId)
-    message.success('开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询')
-  } catch {}
-}
-</script>
diff --git a/src/views/mp/user/UserForm.vue b/src/views/mp/user/UserForm.vue
new file mode 100644
index 000000000..a23d271f3
--- /dev/null
+++ b/src/views/mp/user/UserForm.vue
@@ -0,0 +1,99 @@
+<template>
+  <Dialog title="修改" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="昵称" prop="nickname">
+        <el-input v-model="formData.nickname" placeholder="请输入昵称" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" />
+      </el-form-item>
+      <el-form-item label="标签" prop="tagIds">
+        <el-select v-model="formData.tagIds" multiple clearable placeholder="请选择标签">
+          <el-option
+            v-for="item in tagList"
+            :key="item.tagId"
+            :label="item.name"
+            :value="item.tagId"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as MpTagApi from '@/api/mp/tag'
+import * as MpUserApi from '@/api/mp/user'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: undefined,
+  nickname: undefined,
+  remark: undefined,
+  tagIds: []
+})
+const formRules = reactive({}) // 表单的校验
+const formRef = ref() // 表单 Ref
+const tagList = ref([]) // 公众号标签列表
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await MpUserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 加载标签
+  tagList.value = await MpTagApi.getSimpleTagList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await MpUserApi.updateUser(formData.value)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    nickname: undefined,
+    remark: undefined,
+    tagIds: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mp/user/index.vue b/src/views/mp/user/index.vue
new file mode 100644
index 000000000..e338f822b
--- /dev/null
+++ b/src/views/mp/user/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <doc-alert title="公众号粉丝" url="https://doc.iocoder.cn/mp/user/" />
+
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="公众号" prop="accountId">
+        <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
+          <el-option
+            v-for="item in accountList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用户标识" prop="openid">
+        <el-input
+          v-model="queryParams.openid"
+          placeholder="请输入用户标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input
+          v-model="queryParams.nickname"
+          placeholder="请输入昵称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+        <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:user:sync']">
+          <Icon icon="ep:refresh" class="mr-5px" /> 同步
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="用户标识" align="center" prop="openid" width="260" />
+      <el-table-column label="昵称" align="center" prop="nickname" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="标签" align="center" prop="tagIds" width="200">
+        <template #default="scope">
+          <span v-for="(tagId, index) in scope.row.tagIds" :key="index">
+            <el-tag>{{ tagList.find((tag) => tag.tagId === tagId)?.name }} </el-tag>&nbsp;
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="订阅状态" align="center" prop="subscribeStatus">
+        <template #default="scope">
+          <el-tag v-if="scope.row.subscribeStatus === 0" type="success">已订阅</el-tag>
+          <el-tag v-else type="danger">未订阅</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="订阅时间"
+        align="center"
+        prop="subscribeTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            type="primary"
+            link
+            @click="openForm(scope.row.id)"
+            v-hasPermi="['mp:user:update']"
+          >
+            修改
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：修改 -->
+  <UserForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" setup name="MpUser">
+import { dateFormatter } from '@/utils/formatTime'
+import * as MpAccountApi from '@/api/mp/account'
+import * as MpUserApi from '@/api/mp/user'
+import * as MpTagApi from '@/api/mp/tag'
+import UserForm from './UserForm.vue'
+const message = useMessage() // 消息
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  accountId: null,
+  openid: null,
+  nickname: null
+})
+const queryFormRef = ref() // 搜索的表单
+const accountList = ref([]) // 公众号账号列表
+const tagList = ref([]) // 公众号标签列表
+
+/** 查询列表 */
+const getList = async () => {
+  // 如果没有选中公众号账号，则进行提示。
+  if (!queryParams.accountId) {
+    message.error('未选中公众号，无法查询用户')
+    return false
+  }
+  try {
+    loading.value = true
+    const data = await MpUserApi.getUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  // 默认选中第一个
+  if (accountList.value.length > 0) {
+    queryParams.accountId = accountList.value[0].id
+  }
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (id: number) => {
+  formRef.value.open(id)
+}
+
+/** 同步标签 */
+const handleSync = async () => {
+  const accountId = queryParams.accountId
+  try {
+    await message.confirm('是否确认同步粉丝？')
+    await MpUserApi.syncUser(accountId)
+    message.success('开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询')
+    await getList()
+  } catch {}
+}
+
+/** 初始化 */
+onMounted(async () => {
+  // 加载标签
+  tagList.value = await MpTagApi.getSimpleTagList()
+
+  // 加载账号
+  accountList.value = await MpAccountApi.getSimpleAccountList()
+  if (accountList.value.length > 0) {
+    queryParams.accountId = accountList.value[0].id
+  }
+  await getList()
+})
+</script>