优化文章管理模块

src/views/content/article/columns.ts

@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
+import { ElAvatar, ElTag } from 'element-plus';
 
 export const columns = [
   {
@@ -7,22 +7,41 @@ export const columns = [
   },
   {
     label: 'ID',
-    prop: 'id'
+    prop: 'id',
+    width: 100,
   },
   {
     label: '文章标题',
     prop: 'title',
+    width: 300,
     render(record) {
       return h('a', {
         href: 'http://www.baidu.com',
         target:"_blank"
-      },record.row.title);
+      }, record.row.title);
     },
   },
+  {
+    label: '文章封面',
+    prop: 'cover',
+    render(record) {
+      return h(ElAvatar, {
+        size: 48,
+        src: record.row.cover,
+        shape: 'square',
+        fit: 'fill',
+      });
+    },
+    width: 100,
+  },
   {
     label: '文章分类',
     prop: 'categoryName',
   },
+  {
+    label: '文章作者',
+    prop: 'author',
+  },
   // {
   //   label: '文章链接',
   //   value:'articelLink',
@@ -32,8 +51,24 @@ export const columns = [
     label: '文章状态',
     prop: 'status',
     render(record) {
-      return h('span', record.row.status === 1 ? '下架' : '正常')
+      return h(
+        ElTag,
+        {
+          type: record.row.status === 0 ? 'success' : 'danger',
         },
+        {
+          default: () => (record.row.status === 0 ? '正常' : '下架'),
+        },
+      );
+    },
+  },
+  {
+    label: '点击率',
+    prop: 'click',
+  },
+  {
+    label: '文章排序',
+    prop: 'sort',
   },
   {
     label: '创建人',
@@ -42,5 +77,6 @@ export const columns = [
   {
     label: '创建时间',
     prop: 'createTime',
+    width: 180,
   },
 ];

src/views/content/article/edit.vue

@@ -21,6 +21,13 @@
         >
           <el-input placeholder="请输入文章标题" :maxlength="50" v-model="formData.title"></el-input>
         </el-form-item>
+        <el-form-item
+            label="文章作者"
+            prop="author"
+            :rules="{ required: true,message: '请输入文章作者', trigger: 'blur' }"
+        >
+          <el-input placeholder="请输入文章作者" :maxlength="50" v-model="formData.author"></el-input>
+        </el-form-item>
         <el-form-item label="文章分类" prop="categoryId"  :rules="{ required: true, message: '请选择文章分类', trigger: 'change' }">
           <el-tree-select
             v-model="formData.categoryId"
@@ -107,6 +114,7 @@ const formData = reactive({
   id:"",
   categoryId: "",
   title: "",
+  author: "",
   cover:'',
   intro:'',
   content:'',

src/views/content/article/index.vue

@@ -68,7 +68,7 @@ const selectionData = ref([])
     status:''
   });
   const actionColumn = reactive({
-    width: 250,
+    width: 200,
     label: '操作',
     prop: 'action',
     fixed: 'right',

src/views/content/tag/columns.ts

@@ -7,7 +7,8 @@ export const columns = [
   },
   {
     label: 'ID',
-    prop: 'id'
+    prop: 'id',
+    width: 100,
   },
   {
     label: '标签名称',
@@ -24,5 +25,6 @@ export const columns = [
   {
     label: '创建时间',
     prop: 'createTime',
+    width: 180,
   },
 ];

src/views/content/tag/index.vue

@@ -64,7 +64,7 @@ const selectionData = ref([])
     name:''
   });
   const actionColumn = reactive({
-    width: 250,
+    width: 200,
     label: '操作',
     prop: 'action',
     fixed: 'right',