feat: fix

packages/frontend/src/views/article/add.vue

@@ -7,39 +7,51 @@
     </template>
 
     <div class="editor-wrap">
-      <n-form ref="modalFormRef" class="form wh-full" label-placement="left" label-align="left" :label-width="80"
-        :model="modalForm">
-        <n-form-item label="文章名称" path="title" :rule="{
-          required: true,
-          message: '请输入文章名称',
-          trigger: ['input', 'blur'],
-        }">
+      <n-form
+        ref="modalFormRef" class="form wh-full" label-placement="left" label-align="left" :label-width="80"
+        :model="modalForm"
+      >
+        <n-form-item
+          label="文章名称" path="title" :rule="{
+            required: true,
+            message: '请输入文章名称',
+            trigger: ['input', 'blur'],
+          }"
+        >
           <n-input v-model:value="modalForm.title" />
         </n-form-item>
 
-        <n-form-item label="文章分类" path="categoryId" :rule="{
-          required: true,
-          type: 'number',
-          trigger: ['change', 'blur'],
-          message: '请输入文章分类',
-        }">
-          <n-tree-select v-model:value="modalForm.categoryId" :options="allCategory" label-field="title" key-field="id"
-            placeholder="根分类" clearable style="max-width: 300px;" />
+        <n-form-item
+          label="文章分类" path="categoryId" :rule="{
+            required: true,
+            type: 'number',
+            trigger: ['change', 'blur'],
+            message: '请输入文章分类',
+          }"
+        >
+          <n-tree-select
+            v-model:value="modalForm.categoryId" :options="allCategory" label-field="title" key-field="id"
+            placeholder="根分类" clearable style="max-width: 300px;"
+          />
         </n-form-item>
 
         <n-tabs type="line" animated>
           <template v-for="(lang, index) in langs" :key="lang">
             <n-tab-pane :name="lang" :tab="langLabel[lang]" :index="index">
-              <n-form-item label="文章名称" path="title" :rule="{
-                required: true,
-                message: '请输入文章名称',
-                trigger: ['input', 'blur'],
-              }">
+              <n-form-item
+                label="文章名称" path="title" :rule="{
+                  required: true,
+                  message: '请输入文章名称',
+                  trigger: ['input', 'blur'],
+                }"
+              >
                 <n-input v-model:value="modalForm.translations[index].title" />
               </n-form-item>
               <div class="h-450">
-                <VividEditor v-model="modalForm.translations[index].content" :dark="isDark"
-                  :handle-image-upload="handleUpload" :handle-video-upload="handleVideoUpload" >
+                <VividEditor
+                  v-model="modalForm.translations[index].content" :dark="isDark"
+                  :handle-image-upload="handleUpload" :handle-video-upload="handleVideoUpload"
+                >
                   <SlashCommand />
                   <DragHandle />
                   <!-- <template #menu>
@@ -56,7 +68,7 @@
 </template>
 
 <script setup>
-import { DragHandle, ImageExt, SlashCommand, VividEditor } from '@4dkankan/vivid'
+import { DragHandle, SlashCommand, VividEditor } from '@4dkankan/vivid'
 import { useUserStore } from '@/store/index.js'
 import { initTranslations, langLabel, langs } from '@/utils/translations'
 import { useDark } from '@vueuse/core'

packages/frontend/src/views/menu/list.vue

@@ -49,13 +49,16 @@
         </n-form-item> -->
         <n-form-item v-if="modalForm.level !== 0" label="封面" path="cover">
           <n-upload
-            accept=".jpg,.jpeg,.png" :multiple="false" :default-upload="true" list-type="image-card"
-            :custom-request="uploadCover" :max="1" ::default-file-list="previewFileList" @preview="handlePreview"
-            @before-upload="beforeUpload" @remove="handleCoverRemove"
+            style="max-width:120px ;" accept=".jpg,.jpeg,.png" :multiple="false" :default-upload="true"
+            list-type="image-card" :custom-request="uploadCover" :max="1" ::default-file-list="previewFileList"
+            @preview="handlePreview" @before-upload="beforeUpload" @remove="handleCoverRemove"
           />
           <n-modal v-model:show="showModal" preset="card" style="width: 600px" title="">
             <img :src="previewImageUrl" style="width: 100%">
           </n-modal>
+          <!-- {{ detail.styleType }} -->
+          {{ uploadTips.find(i => i.key === detail.styleType) ? uploadTips.find(i => i.key === detail.styleType).content
+            : "" }}
         </n-form-item>
         <n-form-item
           label="分类" path="categoryId" :rule="{
@@ -346,7 +349,32 @@ async function handleEnable(row) {
     row.enableLoading = false
   }
 }
-
+// 二宫格：支持jpg或png图片，大小不超过5MB；推荐图片比例2：1。
+// 横向幻灯片：支持jpg或png图片，大小不超过5MB；推荐图片比例4：3。
+// 二宫格多列图文：支持jpg或png图片，大小不超过5MB；推荐图片比例1：1。
+// 二宫格多列图文：支持jpg或png图片，大小不超过5MB；推荐图片比例1：1。
+const uploadTips = [
+  {
+    key: 0,
+    content: '支持jpg或png图片，大小不超过5MB；推荐图片比例2：1',
+  },
+  {
+    key: 1,
+    content: '支持jpg或png图片，大小不超过5MB；推荐图片比例4：3',
+  },
+  {
+    key: 2,
+    content: '支持jpg或png图片，大小不超过5MB；推荐图片比例1：1',
+  },
+  {
+    key: 3,
+    content: '支持jpg或png图片，大小不超过5MB；推荐图片比例1：1',
+  },
+  {
+    key: 4,
+    content: '',
+  },
+]
 watchEffect(() => {
   if (userId) {
     modalForm.value.userId = userId