代码优化

6 years ago · d998cd11a5
parent 621e7918be
commit d998cd11a5
3 changed files with 122 additions and 169 deletions
--- a/src/components/global.less
+++ b/src/components/global.less
@ -1,9 +1,7 @@
@import './index.less';

 body {
-  // 打开滚动条固定显示
-  overflow-y: scroll;
-
+  overflow-y: none;
  &.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;
  }
 }
--- a/src/views/attachment/AttachmentList.vue
+++ b/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)
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -1,10 +1,6 @@
 <template>
  <div class="page-header-index-wide">
-    <a-row
-      :gutter="12"
-      type="flex"
-      align="middle"
-    >
+    <a-row :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
-          hoverable
-          :title="theme.name"
-        >
-          <img
-            :alt="theme.name"
-            :src="theme.screenshots"
-            slot="cover"
-          />
-          <template
-            class="ant-card-actions"
-            slot="actions"
-          >
+        <a-card hoverable :title="theme.name">
+          <img :alt="theme.name" :src="theme.screenshots" slot="cover">
+          <template class="ant-card-actions" slot="actions">
            <div v-if="theme.activated">
-              <a-icon
-                type="unlock"
-                theme="twoTone"
-              />
-              激活中
+              <a-icon type="unlock" theme="twoTone"/> 激活中
            </div>
-            <div
-              v-else
-              @click="handleActivateClick(theme)"
-            >
-              <a-icon type="lock" />
-              激活
+            <div v-else @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
-                class="ant-dropdown-link"
-                href="#"
-              >
-                <a-icon type="ellipsis" /> 更多
+              <a class="ant-dropdown-link" href="#">
+                <a-icon type="ellipsis"/> 更多
              </a>
              <a-menu slot="overlay">
-                <a-menu-item
-                  :key="1"
-                  :disabled="theme.activated"
-                >
+                <a-menu-item :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
-        :gutter="12"
-        type="flex"
-      >
-        <a-col
-          :xl="12"
-          :lg="12"
-          :md="12"
-          :sm="24"
-          :xs="24"
-        >
-          <a-skeleton
-            active
-            :loading="optionLoading"
-            :paragraph="{rows: 10}"
-          >
+      <a-row :gutter="12" type="flex">
+        <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
-                :alt="themeProperty.name"
-                :src="themeProperty.screenshots"
-                slot="cover"
-              />
+              <img :alt="themeProperty.name" :src="themeProperty.screenshots" slot="cover">
              <a-card-meta
                :title="themeProperty.author.name"
                :description="themeProperty.description"
@ -121,28 +72,15 @@
                  size="large"
                  slot="avatar"
                />
-                <a-avatar
-                  v-else
-                  size="large"
-                  slot="avatar"
-                >{{ themeProperty.author.name }}</a-avatar>
+                <a-avatar v-else size="large" slot="avatar">{{ themeProperty.author.name }}</a-avatar>
              </a-card-meta>
            </a-card>
          </a-skeleton>
        </a-col>
-        <a-col
-          :xl="12"
-          :lg="12"
-          :md="12"
-          :sm="24"
-          :xs="24"
-        >
-          <a-skeleton
-            active
-            :loading="optionLoading"
-            :paragraph="{rows: 20}"
-          >
-            <a-tabs defaultActiveKey="0">
+        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
+            <div class="card-container">
+              <a-tabs type="card" defaultActiveKey="0">
                <a-tab-pane
                  v-for="(group, index) in themeConfiguration"
                  :key="index.toString()"
@ -191,32 +129,20 @@
                      </a-select>
                    </a-form-item>
                    <a-form-item>
-                    <a-button
-                      type="primary"
-                      @click="saveSettings"
-                    >保存</a-button>
+                      <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
-        type="primary"
-        shape="circle"
-        icon="plus"
-        size="large"
-        @click="showUploadModal"
-      ></a-button>
+      <a-button type="primary" shape="circle" icon="plus" size="large" @click="showUploadModal"></a-button>
    </div>
-    <a-modal
-      title="上传主题"
-      v-model="uploadVisible"
-      :footer="null"
-    >
+    <a-modal 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>