细节优化

src/global.less

@@ -124,6 +124,51 @@ iframe {
   font-size: 14.5px;
   margin-bottom: 18px;
   color: rgba(0, 0, 0, 0.75);
+
+  // 选项卡模式
+  &.tabs {
+    border-bottom: 1px solid #f3f3f3;
+    margin-bottom: 23px;
+
+    .title-item {
+      position: relative;
+      display: inline-block;
+      margin-right: 15px;
+      padding: 0 15px;
+      padding-bottom: 10px;
+      cursor: pointer;
+      transition: color .3s cubic-bezier(.645, .045, .355, 1);
+
+      &:hover {
+        color: @primary-color;
+      }
+
+      &.active {
+        border-bottom: 2px solid @primary-color;
+      }
+
+      // 火热图标
+      &.fire-icon {
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          right: -8px;
+          top: 1px;
+          width: 20px;
+          height: 20px;
+          background-image: url('~@/assets/img/fire.png');
+          background-position: center;
+          background-size: contain;
+          background-repeat: no-repeat;
+        }
+      }
+    }
+
+
+  }
+
+  // 右侧操作 (例如刷新)
   .right-action {
     float: right;
     font-size: 13px;
@@ -209,14 +254,39 @@ iframe {
 }
 
 // modal弹窗
+.ant-modal {
+  // 解决控制台中aria-hidden的报错
+  [aria-hidden="true"][tabindex="0"] {
+    display: none;
+  }
+}
+
 .ant-modal-header {
   border-bottom: none;
   padding-bottom: 12px;
 }
 
 .ant-modal-body {
-  padding: 0 24px;
+  padding: 14px 24px 6px 24px;
   font-size: 13.5px;
+
+  .ant-form-item {
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .ant-form-item-control {
+    padding-left: 10px;
+
+    .ant-form-item-control {
+      padding-left: 0;
+    }
+  }
 }
 
 .ant-modal-footer {

src/views/content/article/category/Index.vue

@@ -18,8 +18,9 @@
       <span slot="status" slot-scope="text">
         <a-tag :color="text ? 'green' : ''">{{ text ? '显示' : '隐藏' }}</a-tag>
       </span>
-      <span slot="action" slot-scope="text, item">
-        <a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
+      <!-- 操作 -->
+      <span class="actions" slot="action" slot-scope="text, item">
+        <a v-action:edit @click="handleEdit(item)">编辑</a>
         <a v-action:delete @click="handleDelete(item)">删除</a>
       </span>
     </a-table>

src/views/content/article/category/modules/AddForm.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
-    title="编辑文章分类"
-    :width="720"
+    title="新增文章分类"
+    :width="620"
     :visible="visible"
     :confirmLoading="confirmLoading"
     :maskClosable="false"
@@ -41,13 +41,9 @@ export default {
       // 对话框标题
       title: '',
       // 标签布局属性
-      labelCol: {
-        span: 7
-      },
+      labelCol: { span: 7 },
       // 输入框布局属性
-      wrapperCol: {
-        span: 13
-      },
+      wrapperCol: { span: 13 },
       // modal(对话框)是否可见
       visible: false,
       // modal(对话框)确定按钮 loading
@@ -95,11 +91,9 @@ export default {
           // 通知父端组件提交完成了
           this.$emit('handleSubmit', values)
         })
-        .finally(result => {
-          this.confirmLoading = false
-        })
+        .finally(result => this.confirmLoading = false)
     }
 
   }
 }
-</script>
+</script>

src/views/content/article/category/modules/EditForm.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     title="编辑文章分类"
-    :width="720"
+    :width="620"
     :visible="visible"
     :confirmLoading="confirmLoading"
     :maskClosable="false"
@@ -43,13 +43,9 @@ export default {
       // 对话框标题
       title: '',
       // 标签布局属性
-      labelCol: {
-        span: 7
-      },
+      labelCol: { span: 7 },
       // 输入框布局属性
-      wrapperCol: {
-        span: 13
-      },
+      wrapperCol: { span: 13 },
       // modal(对话框)是否可见
       visible: false,
       // modal(对话框)确定按钮 loading
@@ -111,10 +107,8 @@ export default {
           // 通知父端组件提交完成了
           this.$emit('handleSubmit', values)
         })
-        .finally(result => {
-          this.confirmLoading = false
-        })
+        .finally(result => this.confirmLoading = false)
     }
   }
 }
-</script>
+</script>

src/views/goods/category/modules/AddForm.vue

@@ -65,20 +65,15 @@ export default {
       // 对话框标题
       title: '',
       // 标签布局属性
-      labelCol: {
-        span: 7
-      },
+      labelCol: { span: 7 },
       // 输入框布局属性
-      wrapperCol: {
-        span: 13
-      },
+      wrapperCol: { span: 13 },
       // modal(对话框)是否可见
       visible: false,
       // modal(对话框)确定按钮 loading
       confirmLoading: false,
       // 当前表单元素
       form: this.$form.createForm(this),
-
       // 上级分类列表
       categoryListTree: []
     }
@@ -137,9 +132,7 @@ export default {
           // 通知父端组件提交完成了
           this.$emit('handleSubmit', values)
         })
-        .finally(result => {
-          this.confirmLoading = false
-        })
+        .finally(result => this.confirmLoading = false)
     }
 
   }

src/views/goods/category/modules/EditForm.vue

@@ -71,9 +71,7 @@ export default {
       // 标签布局属性
       labelCol: { span: 7 },
       // 输入框布局属性
-      wrapperCol: {
-        span: 13
-      },
+      wrapperCol: { span: 13 },
       // modal(对话框)是否可见
       visible: false,
       // modal(对话框)确定按钮 loading
@@ -153,9 +151,7 @@ export default {
           // 通知父端组件提交完成了
           this.$emit('handleSubmit', values)
         })
-        .finally(result => {
-          this.confirmLoading = false
-        })
+        .finally(result => this.confirmLoading = false)
     }
   }
 }