feat: 更新新闻管理功能，新增摘要和排序顺序字段，优化上传组件逻辑

2026-01-09 00:26:46 +07:00
parent 28d93217a3
commit 5308020003
7 changed files with 144 additions and 50 deletions
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -20,7 +20,8 @@ export default defineConfig(
      ],
      'vue/no-duplicate-attr-inheritance': 'off',
      'unocss/order-attributify': 'off',
-      '@typescript-eslint/no-unused-vars': 'off'
+      '@typescript-eslint/no-unused-vars': 'off',
+      'consistent-return': 'off'
    }
  }
 );
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
    "@better-scroll/core": "2.5.1",
    "@elysiajs/eden": "^1.4.5",
    "@iconify/vue": "5.0.0",
-    "@riwa/api-types": "http://192.168.1.7:9527/api/riwa-eden-0.0.108.tgz",
+    "@riwa/api-types": "http://192.168.1.7:9527/api/riwa-eden-0.0.109.tgz",
    "@sa/axios": "workspace:*",
    "@sa/color": "workspace:*",
    "@sa/hooks": "workspace:*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
        specifier: 5.0.0
        version: 5.0.0(vue@3.5.25(typescript@5.9.3))
      '@riwa/api-types':
-        specifier: http://192.168.1.7:9527/api/riwa-eden-0.0.108.tgz
-        version: '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.108.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
+        specifier: http://192.168.1.7:9527/api/riwa-eden-0.0.109.tgz
+        version: '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.109.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
      '@sa/axios':
        specifier: workspace:*
        version: link:packages/axios
@@ -1230,9 +1230,9 @@ packages:
  '@quansync/fs@0.1.6':
    resolution: {integrity: sha512-zoA8SqQO11qH9H8FCBR7NIbowYARIPmBz3nKjgAaOUDi/xPAAu1uAgebtV7KXHTc6CDZJVRZ1u4wIGvY5CWYaw==}

-  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.108.tgz':
-    resolution: {tarball: http://192.168.1.7:9527/api/riwa-eden-0.0.108.tgz}
-    version: 0.0.108
+  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.109.tgz':
+    resolution: {tarball: http://192.168.1.7:9527/api/riwa-eden-0.0.109.tgz}
+    version: 0.0.109
    peerDependencies:
      '@elysiajs/eden': ^1.4.5

@@ -5651,7 +5651,7 @@ snapshots:
    dependencies:
      quansync: 0.3.0

-  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.108.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@riwa/eden@http://192.168.1.7:9527/api/riwa-eden-0.0.109.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
    dependencies:
      '@elysiajs/eden': 1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))

--- a/src/components/upload/index.vue
+++ b/src/components/upload/index.vue
@@ -55,7 +55,7 @@ async function handleCustomRequest({ file, onProgress, onFinish, onError }: Uplo
    }

    // 验证文件数量
-    if (fileList.value.length >= props.maxFiles) {
+    if (fileList.value.length > props.maxFiles) {
      window.$message?.error(`最多只能上传 ${props.maxFiles} 个文件`);
      onError();
      return;
--- a/src/views/news/components/add.vue
+++ b/src/views/news/components/add.vue
@@ -96,6 +96,19 @@ const rules: FormRules = {
      trigger: ['blur', 'input']
    }
  ],
+  summary: [
+    {
+      required: true,
+      message: '请输入新闻摘要',
+      trigger: ['blur', 'input']
+    },
+    {
+      min: 10,
+      max: 200,
+      message: '摘要长度应在10-200个字符之间',
+      trigger: ['blur', 'input']
+    }
+  ],
  content: [
    {
      required: true,
@@ -144,24 +157,42 @@ async function handleSubmit() {
    require-mark-placement="left"
  >
    <NFormItem label="新闻标题" path="title">
-      <NInput v-model:value="form.title" placeholder="请输入新闻标题" maxlength="200" show-count />
+      <NInput v-model:value="form.title" placeholder="请输入新闻标题" maxlength="50" show-count />
    </NFormItem>

-    <NFormItem label="新闻分类" path="categoryId">
-      <NSelect v-model:value="form.categoryId" :options="categoryOptions" placeholder="请选择新闻分类" class="flex-1">
-        <template #action>
-          <div class="px-3 py-2">
-            <NButton size="small" type="primary" block @click.stop="handleAddCategory">
-              <template #icon>
-                <icon-ic-round-plus class="text-icon" />
-              </template>
-              新增分类
-            </NButton>
-          </div>
-        </template>
-      </NSelect>
+    <NFormItem label="缩略图" path="thumbnailId">
+      <UploadS3
+        :model-value="form.thumbnailId ? [form.thumbnailId] : undefined"
+        :max-size="20"
+        :max-files="1"
+        accept="image/*"
+        placeholder="上传图片"
+        :fetch-options="{ businessType: 'news_attachment' }"
+        @update:model-value="evt => (form.thumbnailId = evt.length > 0 ? evt[0] : undefined)"
+      />
    </NFormItem>

+    <NGrid :cols="2">
+      <NFormItemGi label="新闻分类" path="categoryId">
+        <NSelect v-model:value="form.categoryId" :options="categoryOptions" placeholder="请选择新闻分类" class="flex-1">
+          <template #action>
+            <div class="px-3 py-2">
+              <NButton size="small" type="primary" block @click.stop="handleAddCategory">
+                <template #icon>
+                  <icon-ic-round-plus class="text-icon" />
+                </template>
+                新增分类
+              </NButton>
+            </div>
+          </template>
+        </NSelect>
+      </NFormItemGi>
+
+      <NFormItemGi label="新闻摘要" path="summary">
+        <NInput v-model:value="form.summary" placeholder="请输入新闻摘要" maxlength="100" show-count />
+      </NFormItemGi>
+    </NGrid>
+
    <NFormItem label="新闻内容" path="content">
      <MarkdownEditor v-model:value="form.content" placeholder="请输入新闻内容" :preview="false" />
    </NFormItem>
@@ -178,12 +209,22 @@ async function handleSubmit() {
      />
    </NFormItem>

-    <NFormItem label="置顶显示" path="isPinned">
-      <NSwitch v-model:value="form.isPinned">
-        <template #checked>是</template>
-        <template #unchecked>否</template>
-      </NSwitch>
-    </NFormItem>
+    <NGrid :cols="2">
+      <NFormItemGi label="置顶显示" path="isPinned">
+        <NSwitch v-model:value="form.isPinned">
+          <template #checked>是</template>
+          <template #unchecked>否</template>
+        </NSwitch>
+      </NFormItemGi>
+
+      <NFormItemGi label="排序顺序" path="sortOrder">
+        <NInputNumber v-model:value="form.sortOrder" :min="0" :step="1" placeholder="请输入排序顺序" class="w-full">
+          <template #suffix>
+            <span class="text-12px text-gray-400">数字越小越靠前</span>
+          </template>
+        </NInputNumber>
+      </NFormItemGi>
+    </NGrid>

    <NSpace justify="end" class="mt-4">
      <NButton @click="$emit('close')">取消</NButton>
--- a/src/views/news/components/edit.vue
+++ b/src/views/news/components/edit.vue
@@ -98,6 +98,19 @@ const rules: FormRules = {
      trigger: ['blur', 'input']
    }
  ],
+  summary: [
+    {
+      required: true,
+      message: '请输入新闻摘要',
+      trigger: ['blur', 'input']
+    },
+    {
+      min: 10,
+      max: 200,
+      message: '摘要长度应在10-200个字符之间',
+      trigger: ['blur', 'input']
+    }
+  ],
  content: [
    {
      required: true,
@@ -149,23 +162,41 @@ async function handleSubmit() {
      <NInput v-model:value="form.title" placeholder="请输入新闻标题" maxlength="200" show-count />
    </NFormItem>

-    <NFormItem label="新闻分类" path="categoryId">
-      <NSelect v-model:value="form.categoryId" :options="categoryOptions" placeholder="请选择新闻分类" class="flex-1">
-        <template #action>
-          <div class="px-3 py-2">
-            <NButton size="small" type="primary" block @click.stop="handleAddCategory">
-              <template #icon>
-                <icon-ic-round-plus class="text-icon" />
-              </template>
-              新增分类
-            </NButton>
-          </div>
-        </template>
-      </NSelect>
+    <NFormItem label="缩略图" path="thumbnailId">
+      <UploadS3
+        :model-value="[form.thumbnailId || '']"
+        :max-size="20"
+        :max-files="1"
+        accept="image/*"
+        placeholder="上传图片"
+        :fetch-options="{ businessType: 'news_attachment' }"
+        @update:model-value="evt => (form.thumbnailId = evt[0] || '')"
+      />
    </NFormItem>

+    <NGrid :cols="2">
+      <NFormItemGi label="新闻分类" path="categoryId">
+        <NSelect v-model:value="form.categoryId" :options="categoryOptions" placeholder="请选择新闻分类" class="flex-1">
+          <template #action>
+            <div class="px-3 py-2">
+              <NButton size="small" type="primary" block @click.stop="handleAddCategory">
+                <template #icon>
+                  <icon-ic-round-plus class="text-icon" />
+                </template>
+                新增分类
+              </NButton>
+            </div>
+          </template>
+        </NSelect>
+      </NFormItemGi>
+
+      <NFormItemGi label="新闻摘要" path="summary">
+        <NInput v-model:value="form.summary" placeholder="请输入新闻摘要" maxlength="100" show-count />
+      </NFormItemGi>
+    </NGrid>
+
    <NFormItem label="新闻内容" path="content">
-      <MarkdownEditor v-model:value="form.content" placeholder="请输入新闻内容" :preview="false" />
+      <MarkdownEditor v-model:value="form.content" placeholder="请输入新闻内容" :preview="false" class="h-400px!" />
    </NFormItem>

    <NFormItem label="附件上传" path="attachmentIds">
@@ -180,12 +211,22 @@ async function handleSubmit() {
      />
    </NFormItem>

-    <NFormItem label="置顶显示" path="isPinned">
-      <NSwitch v-model:value="form.isPinned">
-        <template #checked>是</template>
-        <template #unchecked>否</template>
-      </NSwitch>
-    </NFormItem>
+    <NGrid :cols="2">
+      <NFormItemGi label="置顶显示" path="isPinned">
+        <NSwitch v-model:value="form.isPinned">
+          <template #checked>是</template>
+          <template #unchecked>否</template>
+        </NSwitch>
+      </NFormItemGi>
+
+      <NFormItemGi label="排序顺序" path="sortOrder">
+        <NInputNumber v-model:value="form.sortOrder" :min="0" :step="1" placeholder="请输入排序顺序" class="w-full">
+          <template #suffix>
+            <span class="text-12px text-gray-400">数字越小越靠前</span>
+          </template>
+        </NInputNumber>
+      </NFormItemGi>
+    </NGrid>

    <NSpace justify="end" class="mt-4">
      <NButton @click="$emit('close')">取消</NButton>
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -41,6 +41,12 @@ const columns: TableBaseColumns = [
    key: 'category.name',
    width: 120
  },
+  {
+    title: '摘要',
+    key: 'summary',
+    width: 300,
+    ellipsis: { tooltip: true }
+  },
  {
    title: '内容预览',
    key: 'content',
@@ -64,6 +70,11 @@ const columns: TableBaseColumns = [
        { default: () => (row.isPinned ? '是' : '否') }
      )
  },
+  {
+    title: '排序顺序',
+    key: 'sortOrder',
+    width: 80
+  },
  {
    title: '创建时间',
    key: 'createdAt',
@@ -150,7 +161,7 @@ function handleEdit(row: any) {
          tableInst.value?.reload();
        }
      }),
-    style: { width: '800px' },
+    style: { width: '1200px' },
    showIcon: false
  });
 }