优化：编辑文章改抽屉模式

src/views/cms/cmsArticle/components/articleEdit.vue

@@ -1,7 +1,7 @@
 <!-- 编辑弹窗 -->
 <template>
-  <ele-modal
-    width="75%"
+  <a-drawer
+    width="70%"
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
@@ -11,6 +11,9 @@
     :confirm-loading="loading"
     @ok="save"
   >
+    <template #extra>
+      <a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
+    </template>
     <a-form
       ref="formRef"
       :model="form"
@@ -21,14 +24,8 @@
       "
     >
       <a-spin :spinning="loading">
-        <a-tabs type="card" v-model:active-key="active" @change="onChange">
-          <!--          <template #rightExtra>-->
-          <!--            <a-radio-group v-model:value="editor" v-if="active == 'content'" @change="onEditor">-->
-          <!--              <a-radio :value="1">富文本</a-radio>-->
-          <!--              <a-radio :value="2">Markdown</a-radio>-->
-          <!--            </a-radio-group>-->
-          <!--          </template>-->
-          <a-tab-pane tab="基本信息" key="base">
+        <!--        <a-tabs type="card" v-model:active-key="active" @change="onChange">-->
+        <!--          <a-tab-pane tab="基本信息" key="base">-->
         <a-form-item label="封面图" name="files">
           <SelectFile
             :placeholder="`请选择图片`"
@@ -63,7 +60,7 @@
             />
           </div>
         </a-form-item>
-            <a-form-item label="内容详情">
+        <a-form-item label="内容详情" name="content">
           <!-- 富文本编辑器 -->
           <div v-if="editor == 1">
             <tinymce-editor
@@ -135,15 +132,6 @@
             v-model:value="form.comments"
           />
         </a-form-item>
-            <a-form-item label="排序" name="sortNumber">
-              <a-input-number
-                :min="0"
-                :max="9999"
-                style="width: 206px"
-                placeholder="请输入排序号"
-                v-model:value="form.sortNumber"
-              />
-            </a-form-item>
         <a-form-item
           label="状态"
           name="status"
@@ -154,40 +142,36 @@
             <a-radio :value="0">已发布</a-radio>
           </a-radio-group>
         </a-form-item>
-          </a-tab-pane>
-          <a-tab-pane tab="其他选项" key="other">
+        <a-divider class="py-4 mb-3"  style="height: 20px" />
         <a-form-item label="关键词" name="tags">
           <a-select
             v-model:value="form.tags"
             mode="tags"
-                style="width: 558px"
             placeholder="按回车分隔"
           ></a-select>
         </a-form-item>
-            <a-form-item label="产品概述" name="overview">
+        <a-form-item label="描述" name="overview">
           <a-textarea
             :rows="3"
-                style="width: 558px"
             show-count
-                placeholder="请输入产品概述"
+            placeholder="请输入描述"
             v-model:value="form.overview"
           />
         </a-form-item>
-            <a-form-item label="文章来源" name="source">
-              <source-select
-                v-model:value="form.source"
-                :placeholder="`文章来源`"
-                style="width: 206px"
-              />
-            </a-form-item>
-            <a-form-item label="PDF" name="pdfUrl">
+        <a-form-item label="自定义链接" name="pdfUrl">
           <a-input
             allow-clear
-                style="width: 558px"
             placeholder="https://"
             v-model:value="form.pdfUrl"
           />
         </a-form-item>
+        <a-form-item label="文章来源" name="source">
+          <source-select
+            v-model:value="form.source"
+            style="width: 206px"
+            :placeholder="`文章来源`"
+          />
+        </a-form-item>
         <a-form-item
           label="虚拟阅读量"
           name="virtualViews"
@@ -223,6 +207,15 @@
             v-model:value="password"
           />
         </a-form-item>
+        <a-form-item label="排序" name="sortNumber">
+          <a-input-number
+            :min="0"
+            :max="9999"
+            style="width: 206px"
+            placeholder="请输入排序号"
+            v-model:value="form.sortNumber"
+          />
+        </a-form-item>
         <a-form-item label="发布时间" name="createTime" v-if="isUpdate">
           <a-date-picker
             v-model:value="form.createTime"
@@ -231,11 +224,12 @@
             value-format="YYYY-MM-DD HH:mm:ss"
           />
         </a-form-item>
-          </a-tab-pane>
-        </a-tabs>
+        <!--        </a-tab-pane>-->
+        <!--          <a-tab-pane tab="其他选项" key="other">-->
+        <!--        </a-tabs>-->
       </a-spin>
     </a-form>
-  </ele-modal>
+  </a-drawer>
 
   <!-- 文件库选择弹窗 -->
   <SelectData
@@ -321,7 +315,7 @@ const images = ref<ItemType[]>([]);
 const content = ref('');
 const disabled = ref(false);
 // 当前选项卡
-const active = ref('base');
+// const active = ref('base');
 const files = ref<ItemType[]>([]);
 const category = ref<string[]>([]);
 const password = ref();
@@ -707,7 +701,7 @@ const insertMarkdownText = (text: string) => {
 };
 
 const config = ref({
-  height: 620,
+  height: 420,
   paste_data_images: true,
   automatic_uploads: true,
 
@@ -1194,10 +1188,6 @@ const save = () => {
   if (!formRef.value) {
     return;
   }
-  if (content.value == '') {
-    message.error('请输入文章内容');
-    return;
-  }
   formRef.value
     .validate()
     .then(() => {
@@ -1209,9 +1199,12 @@ const save = () => {
         form.tags = JSON.stringify(form.tags);
       }
       // 取第一张图片作为封面图
-      if (form.files) {
-        const arr = JSON.parse(form.files);
-        form.image = arr[0];
+      if (files.value.length > 0) {
+        form.image = files.value[0].url;
+        form.files = JSON.stringify(files.value.map((d) => d.url));
+      }else {
+        form.image = '';
+        form.files = '';
       }
       const formData = {
         ...form,