代码优化

src/components/global.less

@@ -1,9 +1,7 @@
 @import './index.less';
 
 body {
-  // 打开滚动条固定显示
+  overflow-y: none;
-  overflow-y: scroll;
-
   &.colorWeak {
     filter: invert(80%);
   }
@@ -497,11 +495,17 @@ body {
 
 .ant-card{
   .ant-card-head{
-    padding: 0 16px;
+    padding: 0 16px!important;
     .ant-card-head-wrapper{
       .ant-card-head-title{
-        padding: 12px 0;
+        padding: 12px 0!important;
       }
     }
   }
+}
+
+.ant-card-wider-padding{
+  .ant-card-body{
+    padding: 24px!important;
+  }
 }

src/views/attachment/AttachmentList.vue

@@ -178,13 +178,10 @@ export default {
     },
     handleChange(info) {
       const status = info.file.status
-      if (status !== 'uploading') {
-        console.log(info.file, info.fileList)
-      }
       if (status === 'done') {
-        this.$message.success(`${info.file.name} file uploaded successfully.`)
+        this.$message.success(`${info.file.name} 文件上传成功`)
       } else if (status === 'error') {
-        this.$message.error(`${info.file.name} file upload failed.`)
+        this.$message.error(`${info.file.name} 文件上传失败`)
       }
     },
     deleteAttachment(id) {
@@ -201,7 +198,7 @@ export default {
       this.$copyText(text)
         .then(message => {
           console.log('copy', message)
-          this.$message.success('复制完毕')
+          this.$message.success('复制成功')
         })
         .catch(err => {
           console.log('copy.err', err)
@@ -215,7 +212,7 @@ export default {
       this.$copyText(text)
         .then(message => {
           console.log('copy', message)
-          this.$message.success('复制完毕')
+          this.$message.success('复制成功')
         })
         .catch(err => {
           console.log('copy.err', err)

src/views/interface/ThemeList.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="page-header-index-wide">
-    <a-row
+    <a-row :gutter="12" type="flex" align="middle">
-      :gutter="12"
-      type="flex"
-      align="middle"
-    >
       <a-col
         class="theme-item"
         :xl="6"
@@ -15,49 +11,24 @@
         v-for="(theme, index) in themes"
         :key="index"
       >
-        <a-card
+        <a-card hoverable :title="theme.name">
-          hoverable
+          <img :alt="theme.name" :src="theme.screenshots" slot="cover">
-          :title="theme.name"
+          <template class="ant-card-actions" slot="actions">
-        >
-          <img
-            :alt="theme.name"
-            :src="theme.screenshots"
-            slot="cover"
-          />
-          <template
-            class="ant-card-actions"
-            slot="actions"
-          >
             <div v-if="theme.activated">
-              <a-icon
+              <a-icon type="unlock" theme="twoTone"/> 激活中
-                type="unlock"
-                theme="twoTone"
-              />
-              激活中
             </div>
-            <div
+            <div v-else @click="handleActivateClick(theme)">
-              v-else
+              <a-icon type="lock"/> 激活
-              @click="handleActivateClick(theme)"
-            >
-              <a-icon type="lock" />
-              激活
             </div>
             <div @click="handleEditClick(theme)">
-              <a-icon type="setting" />
+              <a-icon type="setting"/> 设置
-              设置
             </div>
             <a-dropdown placement="topCenter">
-              <a
+              <a class="ant-dropdown-link" href="#">
-                class="ant-dropdown-link"
+                <a-icon type="ellipsis"/> 更多
-                href="#"
-              >
-                <a-icon type="ellipsis" /> 更多
               </a>
               <a-menu slot="overlay">
-                <a-menu-item
+                <a-menu-item :key="1" :disabled="theme.activated">
-                  :key="1"
-                  :disabled="theme.activated"
-                >
                   <a-popconfirm
                     v-if="!theme.activated"
                     :title="'确定删除【' + theme.name + '】主题？'"
@@ -65,12 +36,10 @@
                     okText="确定"
                     cancelText="取消"
                   >
-                    <a-icon type="delete" />
+                    <a-icon type="delete"/> 删除
-                    删除
                   </a-popconfirm>
                   <span v-else>
-                    <a-icon type="delete" />
+                    <a-icon type="delete"/> 删除
-                    删除
                   </span>
                 </a-menu-item>
               </a-menu>
@@ -78,7 +47,6 @@
           </template>
         </a-card>
       </a-col>
-
     </a-row>
     <a-drawer
       v-if="themeProperty"
@@ -89,28 +57,11 @@
       :visible="visible"
       destroyOnClose
     >
-      <a-row
+      <a-row :gutter="12" type="flex">
-        :gutter="12"
+        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-        type="flex"
+          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 10}">
-      >
-        <a-col
-          :xl="12"
-          :lg="12"
-          :md="12"
-          :sm="24"
-          :xs="24"
-        >
-          <a-skeleton
-            active
-            :loading="optionLoading"
-            :paragraph="{rows: 10}"
-          >
             <a-card :bordered="false">
-              <img
+              <img :alt="themeProperty.name" :src="themeProperty.screenshots" slot="cover">
-                :alt="themeProperty.name"
-                :src="themeProperty.screenshots"
-                slot="cover"
-              />
               <a-card-meta
                 :title="themeProperty.author.name"
                 :description="themeProperty.description"
@@ -121,102 +72,77 @@
                   size="large"
                   slot="avatar"
                 />
-                <a-avatar
+                <a-avatar v-else size="large" slot="avatar">{{ themeProperty.author.name }}</a-avatar>
-                  v-else
-                  size="large"
-                  slot="avatar"
-                >{{ themeProperty.author.name }}</a-avatar>
               </a-card-meta>
             </a-card>
           </a-skeleton>
         </a-col>
-        <a-col
+        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-          :xl="12"
+          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
-          :lg="12"
+            <div class="card-container">
-          :md="12"
+              <a-tabs type="card" defaultActiveKey="0">
-          :sm="24"
+                <a-tab-pane
-          :xs="24"
+                  v-for="(group, index) in themeConfiguration"
-        >
+                  :key="index.toString()"
-          <a-skeleton
+                  :tab="group.label"
-            active
+                >
-            :loading="optionLoading"
+                  <a-form layout="vertical">
-            :paragraph="{rows: 20}"
+                    <a-form-item
-          >
+                      v-for="(item, index1) in group.items"
-            <a-tabs defaultActiveKey="0">
+                      :label="item.label + '：'"
-              <a-tab-pane
+                      :key="index1"
-                v-for="(group, index) in themeConfiguration"
+                      :wrapper-col="wrapperCol"
-                :key="index.toString()"
-                :tab="group.label"
-              >
-                <a-form layout="vertical">
-                  <a-form-item
-                    v-for="(item, index1) in group.items"
-                    :label="item.label + '：'"
-                    :key="index1"
-                    :wrapper-col="wrapperCol"
-                  >
-                    <a-input
-                      v-model="themeSettings[item.name]"
-                      :defaultValue="item.defaultValue"
-                      v-if="item.type == 'TEXT'"
-                    />
-                    <a-input
-                      type="textarea"
-                      :autosize="{ minRows: 5 }"
-                      v-model="themeSettings[item.name]"
-                      v-else-if="item.type == 'TEXTAREA'"
-                    />
-                    <a-radio-group
-                      v-decorator="['radio-group']"
-                      :defaultValue="item.defaultValue"
-                      v-model="themeSettings[item.name]"
-                      v-else-if="item.type == 'RADIO'"
-                    >
-                      <a-radio
-                        v-for="(option, index2) in item.options"
-                        :key="index2"
-                        :value="option.value"
-                      >{{ option.label }}</a-radio>
-                    </a-radio-group>
-                    <a-select
-                      v-model="themeSettings[item.name]"
-                      :defaultValue="item.defaultValue"
-                      v-else-if="item.type == 'SELECT'"
                     >
-                      <a-select-option
+                      <a-input
-                        v-for="option in item.options"
+                        v-model="themeSettings[item.name]"
-                        :key="option.value"
+                        :defaultValue="item.defaultValue"
-                        :value="option.value"
+                        v-if="item.type == 'TEXT'"
-                      >{{ option.label }}</a-select-option>
+                      />
-                    </a-select>
+                      <a-input
-                  </a-form-item>
+                        type="textarea"
-                  <a-form-item>
+                        :autosize="{ minRows: 5 }"
-                    <a-button
+                        v-model="themeSettings[item.name]"
-                      type="primary"
+                        v-else-if="item.type == 'TEXTAREA'"
-                      @click="saveSettings"
+                      />
-                    >保存</a-button>
+                      <a-radio-group
-                  </a-form-item>
+                        v-decorator="['radio-group']"
-                </a-form>
+                        :defaultValue="item.defaultValue"
-              </a-tab-pane>
+                        v-model="themeSettings[item.name]"
-            </a-tabs>
+                        v-else-if="item.type == 'RADIO'"
+                      >
+                        <a-radio
+                          v-for="(option, index2) in item.options"
+                          :key="index2"
+                          :value="option.value"
+                        >{{ option.label }}</a-radio>
+                      </a-radio-group>
+                      <a-select
+                        v-model="themeSettings[item.name]"
+                        :defaultValue="item.defaultValue"
+                        v-else-if="item.type == 'SELECT'"
+                      >
+                        <a-select-option
+                          v-for="option in item.options"
+                          :key="option.value"
+                          :value="option.value"
+                        >{{ option.label }}</a-select-option>
+                      </a-select>
+                    </a-form-item>
+                    <a-form-item>
+                      <a-button type="primary" @click="saveSettings">保存</a-button>
+                    </a-form-item>
+                  </a-form>
+                </a-tab-pane>
+              </a-tabs>
+            </div>
           </a-skeleton>
         </a-col>
       </a-row>
     </a-drawer>
     <div class="upload-button">
-      <a-button
+      <a-button type="primary" shape="circle" icon="plus" size="large" @click="showUploadModal"></a-button>
-        type="primary"
-        shape="circle"
-        icon="plus"
-        size="large"
-        @click="showUploadModal"
-      ></a-button>
     </div>
-    <a-modal
+    <a-modal title="上传主题" v-model="uploadVisible" :footer="null">
-      title="上传主题"
-      v-model="uploadVisible"
-      :footer="null"
-    >
       <a-upload-dragger
         name="file"
         :multiple="true"
@@ -225,7 +151,7 @@
         accept=".zip"
       >
         <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
+          <a-icon type="inbox"/>
         </p>
         <p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
         <p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
@@ -318,13 +244,10 @@ export default {
     },
     handleChange(info) {
       const status = info.file.status
-      if (status !== 'uploading') {
-        console.log(info.file, info.fileList)
-      }
       if (status === 'done') {
-        this.$message.success(`${info.file.name} file uploaded successfully.`)
+        this.$message.success(`${info.file.name} 主题上传成功`)
       } else if (status === 'error') {
-        this.$message.error(`${info.file.name} file upload failed.`)
+        this.$message.error(`${info.file.name} 主题上传失败`)
       }
     },
     handleEllipsisClick(theme) {
@@ -362,4 +285,33 @@ export default {
   bottom: 80px;
   right: 20px;
 }
+
+.card-container {
+  background: #f5f5f5;
+}
+.card-container > .ant-tabs-card > .ant-tabs-content {
+  margin-top: -16px;
+}
+
+.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
+  background: #fff;
+  padding: 16px;
+}
+
+.card-container > .ant-tabs-card > .ant-tabs-bar {
+  border-color: #fff;
+}
+
+.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+  border-color: transparent;
+  background: transparent;
+}
+
+.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+  border-color: #fff;
+  background: #fff;
+}
+.ant-form-vertical .ant-form-item {
+  padding-bottom: 0;
+}
 </style>