feat: dev

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

@@ -7,51 +7,39 @@
     </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-input v-model:value="modalForm.title" />
+      <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 :maxlength="200" show-count 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="`translations[${index}].title`" :rule="{
-                  required: true,
-                  message: '请输入文章名称',
-                  trigger: ['input', 'blur'],
-                }"
-              >
-                <n-input v-model:value="modalForm.translations[index].title" />
+              <n-form-item label="文章名称" :path="`translations[${index}].title`" :rule="{
+                required: true,
+                message: '请输入文章名称',
+                trigger: ['input', 'blur'],
+              }">
+                <n-input :maxlength="200" show-count 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>

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

@@ -18,7 +18,7 @@
             trigger: ['input', 'blur'],
           }"
         >
-          <n-input v-model:value="modalForm.title" />
+          <n-input :maxlength="200" show-count v-model:value="modalForm.title" />
         </n-form-item>
 
         <n-form-item
@@ -45,7 +45,7 @@
                   trigger: ['input', 'blur'],
                 }"
               >
-                <n-input v-model:value="modalForm.translations[index].title" />
+                <n-input :maxlength="200" show-count 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">