1. 重命名 DataGrid 为 MessageTable，增加可读性

2. 调整素材管理，读取 API 接口

src/views/mp/components/wx-account-select/main.vue

@@ -17,10 +17,6 @@ const emit = defineEmits<{
   (e: 'change', id?: number, name?: string): void
 }>()
 
-onMounted(() => {
-  handleQuery()
-})
-
 const handleQuery = async () => {
   accountList.value = await MpAccountApi.getSimpleAccountList()
   // 默认选中第一个
@@ -33,4 +29,9 @@ const handleQuery = async () => {
 const onChanged = () => {
   emit('change', account.id, account.name)
 }
+
+/** 初始化 */
+onMounted(() => {
+  handleQuery()
+})
 </script>

src/views/mp/draft/editor-config.ts

@@ -21,7 +21,10 @@ export const createEditorConfig = (
         allowedFileTypes: ['image/*'],
 
         // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
-        meta: { accountId: accountId },
+        meta: {
+          accountId: accountId,
+          type: 'image'
+        },
         // 将 meta 拼接到 url 参数中，默认 false
         metaWithUrl: true,
 
@@ -64,7 +67,7 @@ export const createEditorConfig = (
         },
         // 自定义插入图片
         customInsert(res: any, insertFn: InsertFnType) {
-          insertFn(res.data, 'image', res.data)
+          insertFn(res.data.url, 'image', res.data.url)
         }
       }
     }

src/views/mp/draft/index.vue

@@ -265,8 +265,7 @@ import * as MpDraftApi from '@/api/mp/draft'
 import * as MpFreePublishApi from '@/api/mp/freePublish'
 import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus'
 import { createEditorConfig } from './editor-config'
-// 可以用改本地数据模拟，避免API调用超限
+// import drafts from './mock' // 可以用改本地数据模拟，避免API调用超限
-import drafts from './mock'
 import { IEditorConfig } from '@wangeditor/editor'
 
 const message = useMessage() // 消息
@@ -342,7 +341,7 @@ const editorConfig = ref<Partial<IEditorConfig>>({})
 const getList = async () => {
   loading.value = true
   try {
-    // const drafts = await MpDraftApi.getDraftPage(queryParams)
+    const drafts = await MpDraftApi.getDraftPage(queryParams)
     drafts.list.forEach((item) => {
       const newsItem = item.content.newsItem
       // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面

src/views/mp/message/MessageTable.vue

@@ -143,5 +143,3 @@ const props = defineProps({
 
 const emit = defineEmits<{ (e: 'send', v: number) }>()
 </script>
-
-<style scoped></style>

src/views/mp/message/index.vue

@@ -58,7 +58,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <DataGrid :list="list" :loading="loading" @send="handleSend" />
+    <MessageTable :list="list" :loading="loading" @send="handleSend" />
     <Pagination
       v-show="total > 0"
       :total="total"
@@ -83,7 +83,7 @@
 import * as MpMessageApi from '@/api/mp/message'
 import WxMsg from '@/views/mp/components/wx-msg/main.vue'
 import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
-import DataGrid from './DataGrid.vue'
+import MessageTable from './MessageTable.vue'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { MsgType } from '@/views/mp/components/wx-msg/types'
 import type { FormInstance } from 'element-plus'
@@ -142,7 +142,7 @@ const getList = async () => {
 
 /** 重置按钮操作 */
 const resetQuery = async () => {
-  // 暂存accountId，并在reset后恢复
+  // 暂存 accountId，并在 reset 后恢复
   const accountId = queryParams.accountId
   queryFormRef.value?.resetFields()
   queryParams.accountId = accountId