style: 优化样式

- 修改了多个组件和全局样式中的 border-radius 属性 - 优化了按钮、标签、对话框等元素的视觉效果 - 统一了表单元素的圆角样式 - 调整了部分间距和布局
2025-05-22 17:01:40 +08:00 · 2025-05-22 17:01:40 +08:00 · 9363beab72
commit 9363beab72
parent e5b9b594e3
16 changed files with 84 additions and 29 deletions
--- a/src/components/ShareDialog/index.vue
+++ b/src/components/ShareDialog/index.vue
@ -108,9 +108,9 @@
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
-        <el-button round size="small" v-if="shareOptionConfig.shared" type="danger" @click="cancelShare" v-loading="cancelSharing">取消分享</el-button>
+        <el-button round size="small" v-if="shareOptionConfig.shared" type="danger" @click="cancelShare" :loading="cancelSharing">取消分享</el-button>
        <el-button round size="small" v-if="!shareOptionConfig.shared" type="primary" @click="submitShare"
-                   v-loading="generateShareLinkLoading">创建分享
+                   :loading="generateShareLinkLoading">创建分享
        </el-button>
        <el-button round size="small" class="tag-share-link" v-if="shareOptionConfig.shared && shareOption.isPrivacy"
                   @click="copyShareLink('口令复制成功')"
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@ -138,7 +138,7 @@
                    >
                      <el-button round
                        slot="append"
-                        v-loading="newFolderLoading"
+                        :loading="newFolderLoading"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="#f6f7fa88"
                        class="el-icon-right"
@ -791,7 +791,7 @@
          size="small"
          type="primary"
          @click="createFile(newCreateFileName)"
-          v-loading="createFileLoading"
+          :loading="createFileLoading"
          >确定</el-button
        >
      </span>
--- a/src/components/TagDialog/index.vue
+++ b/src/components/TagDialog/index.vue
@ -71,7 +71,7 @@
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button round v-if="existingTags.length > 0 || isEditMode" size="small" @click="editMode" >{{ isEditMode ? '取消编辑' : '编辑现有标签' }}</el-button>
-        <el-button round size="small" type="primary" @click="submitTag" v-loading="saveLoading">保存</el-button>
+        <el-button round size="small" type="primary" @click="submitTag" :loading="saveLoading">保存</el-button>
      </div>
    </el-dialog>
  </di>
--- a/src/components/table/TableList.vue
+++ b/src/components/table/TableList.vue
@ -70,7 +70,6 @@
    <div class="pagination">
      <el-pagination
        hide-on-single-page
-        background
        layout="total,sizes, prev, pager, next, jumper"
        :current-page="pagination.pageIndex"
        :page-sizes="[20, 30, 50, 100]"
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@ -75,10 +75,10 @@
 //}

 // --- Variables ---
-$inputBorderRadius: 12px;
-$inputBorderRadiusMedium: 11px;
-$inputBorderRadiusSmall: 10px;
-$inputBorderRadiusMini: 9px;
+$inputBorderRadius: 10px;
+$inputBorderRadiusMedium: 9px;
+$inputBorderRadiusSmall: 8px;
+$inputBorderRadiusMini: 7px;

 // --- Size Map ---
 // Map linking size suffixes (including 'default' placeholder) to radius variables
@ -89,15 +89,30 @@ $input-sizes: (
  "mini": $inputBorderRadiusMini
 );

+.el-pagination .el-select .el-input .el-input__inner {
+  border-radius: $inputBorderRadiusMini;
+}
+.el-pagination__jump .el-input__inner {
+  border-radius: $inputBorderRadiusMini !important;
+}
+
 // --- Loop through sizes to generate styles ---
@each $size, $radius in $input-sizes {
  // Determine the base selectors for input and input-number for the current size
  // For 'default', we target the base classes without size modifiers
  $input-base-selector: if($size == "default", ">>> .el-input", ">>> .el-input--#{$size}");
+  $select-base-selector: if($size == "default", ">>> .el-select", ">>> .el-select--#{$size}");
  $number-base-selector: if($size == "default", ">>> .el-input-number", ">>> .el-input-number--#{$size}");
+  $range-base-selector: if($size == "default", ">>> .el-range-editor", ">>> .el-range-editor--#{$size}");

  // --- Common Styles for Input and InputNumber Inner ---
+
+  #{$range-base-selector}.el-input__inner {
+    border-radius: $radius;
+  }
+
  #{$input-base-selector},
+  #{$select-base-selector},
  #{$number-base-selector} {
    .el-input__inner {
      border-radius: $radius;
@ -131,6 +146,7 @@ $input-sizes: (
  // Note: Original logic for default vs sized inputs was slightly different.
  // This version aims for consistency: prepend rounds left, append rounds right.
  #{$input-base-selector}, // Apply group styles potentially within input context
+  #{$range-base-selector},
  #{$number-base-selector} { // And within input-number context

    .el-input-group__prepend {
@ -159,6 +175,28 @@ $input-sizes: (
  }
 }

+
+//.el-radio-button:first-child.el-radio-button--medium .el-radio-button__inner {
+//  border-top-left-radius: $inputBorderRadius;
+//}
+
+@each $size, $radius in $input-sizes {
+  $radio-button-first-selector: if($size == "default", ">>> .el-radio-button:first-child.el-radio-button", ">>> .el-radio-button:first-child.el-radio-button--#{$size}");
+  $radio-button-last-selector: if($size == "default", ">>> .el-radio-button:last-child.el-radio-button", ">>> .el-radio-button:last-child.el-radio-button--#{$size}");
+  #{$radio-button-first-selector} {
+    .el-radio-button__inner {
+      border-top-left-radius: $radius;
+      border-bottom-left-radius: $radius;
+    }
+  }
+  #{$radio-button-last-selector} {
+    .el-radio-button__inner {
+      border-top-right-radius: $radius;
+      border-bottom-right-radius: $radius;
+    }
+  }
+}
+
 // You might need additional overrides if the default Element UI styles conflict,
 // especially around the input group corners when combined with the main input radius.
 // Example: Ensure the input itself has sharp corners when grouped
@ -194,10 +232,23 @@ $input-sizes: (
  border-radius: 12px;
 }

->>> .el-dialog {
+>>> .el-dialog, .box-card {
  border-radius: $dialogBorderRadius;
 }

 >>> .el-popper {
  border-radius: $popperBorderRadius;
 }
+
+.el-tag {
+  border-radius: 9px;
+}
+.el-tag--mini {
+  border-radius: 6px;
+}
+.el-tag--small {
+  border-radius: 7px;
+}
+.el-tag--medium {
+  border-radius: 8px;
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -16,13 +16,16 @@ body {
    border-width: 0;
  }

-  .el-button {
-    border-radius: 32px;
-  }
-
-  .el-tag {
-    border-radius: 8px;
+  .el-button.is-circle {
+    line-height: 0;
  }
+  //.el-button {
+  //  border-radius: 32px;
+  //}
+  //
+  //.el-tag {
+  //  border-radius: 8px;
+  //}

  .el-message-box {
    border-radius: $popperBorderRadius;
--- a/src/styles/setting.scss
+++ b/src/styles/setting.scss
@ -122,7 +122,6 @@ a:hover {
  }
 }
 >>> .el-dialog {
-  border-radius: 4px;
  max-width: calc(100vw - 30px);
  .el-dialog__header {
    padding-top: 14px;
--- a/src/views/public/share/shareList.vue
+++ b/src/views/public/share/shareList.vue
@ -119,7 +119,7 @@
                        @keyup.enter.native="rowRename(renameFileName, scope.row)">
              </el-input>
              <el-button round
-                v-loading="renameLoading"
+                :loading="renameLoading"
                element-loading-spinner="el-icon-loading"
                element-loading-background="#f6f7fa88"
                class="el-icon-check"
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@ -100,7 +100,7 @@

          <div>
            <el-divider content-position="center">预览</el-divider>
-            <footer id="footer" style="font-size: 0.725rem;">
+            <footer id="footer" style="font-size: 0.725rem; border-radius: 12px">
              <div v-if="!form.footerHtml">
                <div>{{ form.copyright }}</div>
                <span>
--- a/src/views/setting/articles/tagManager.vue
+++ b/src/views/setting/articles/tagManager.vue
@ -49,7 +49,7 @@
            >
              {{tag.name}}
              <i
-                :style="{marginLeft: '-5px',visibility: hoverEditId === tag.id ? 'visible' : 'hidden'}"
+                :style="{visibility: hoverEditId === tag.id ? 'visible' : 'hidden'}"
                class="el-tag__close el-icon-edit"
                @click.prevent="handleEdit(tag.id)"
              >
@ -282,4 +282,7 @@ export default {
 >>> .el-form-item__content {
  line-height: 1.5;
 }
+.el-checkbox.is-bordered.el-checkbox--small {
+  border-radius: 8px;
+}
 </style>
--- a/src/views/setting/cloudSetting/ldapConfig.vue
+++ b/src/views/setting/cloudSetting/ldapConfig.vue
@ -28,7 +28,7 @@
      </el-form-item>

      <el-form-item>
-        <el-button round type="primary" :disabled="ldapTestBtn" v-loading="testLdapConfigLoading" @click="doTestLdapConfig">测试链接</el-button>
+        <el-button round type="primary" :disabled="ldapTestBtn" :loading="testLdapConfigLoading" @click="doTestLdapConfig">测试链接</el-button>
        <span v-if="testLdapConfigResult === 0" class="el-icon-check" style="color: #67C23A"></span>
        <span v-if="testLdapConfigResult > 0" class="el-icon-close" style="color: #F56C6C"></span>
      </el-form-item>
@ -49,7 +49,7 @@
      </el-form-item>

      <el-form-item>
-        <el-button round type="primary" :disabled="ldapSaveBtn" v-loading="saveLdapConfigLoading" @click="saveLdapConfig">保存配置</el-button>
+        <el-button round type="primary" :disabled="ldapSaveBtn" :loading="saveLdapConfigLoading" @click="saveLdapConfig">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
--- a/src/views/setting/cloudSetting/ocrConfig.vue
+++ b/src/views/setting/cloudSetting/ocrConfig.vue
@ -52,7 +52,7 @@
        </div>
      </el-form-item>
      <el-form-item>
-        <el-button round type="primary" v-loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
+        <el-button round type="primary" :loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
--- a/src/views/setting/cloudSetting/officeConfig.vue
+++ b/src/views/setting/cloudSetting/officeConfig.vue
@ -15,7 +15,7 @@
        <span class="form-instruction">使用外部OnlyOffice服务时需要填写</span>
      </el-form-item>
      <el-form-item>
-        <el-button round type="primary" v-loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
+        <el-button round type="primary" :loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
--- a/src/views/setting/cloudSetting/previewConfig.vue
+++ b/src/views/setting/cloudSetting/previewConfig.vue
@ -12,7 +12,7 @@
        </el-input>
      </el-form-item>
      <el-form-item>
-        <el-button round type="primary" v-loading="saveConfigLoading" @click="submitForm">保存配置</el-button>
+        <el-button round type="primary" :loading="saveConfigLoading" @click="submitForm">保存配置</el-button>
        <el-button round type="warning" @click="resetConfig">重置</el-button>
      </el-form-item>
    </el-form>
--- a/src/views/setting/cloudSetting/transcodeConfig.vue
+++ b/src/views/setting/cloudSetting/transcodeConfig.vue
@ -110,8 +110,8 @@
      </el-form-item>
      <el-form-item>
        <div class="transcode-status">
-          <el-button round v-if="transcodeStatus.waitingTranscodingCount > 0 || transcodeStatus.transcodingCount > 0"  type="warning" v-loading="cancelTaskLoading" @click="cancelTask">取消任务</el-button>
-          <el-button round v-else type="primary" v-loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
+          <el-button round v-if="transcodeStatus.waitingTranscodingCount > 0 || transcodeStatus.transcodingCount > 0"  type="warning" :loading="cancelTaskLoading" @click="cancelTask">取消任务</el-button>
+          <el-button round v-else type="primary" :loading="saveConfigLoading" @click="saveConfig">保存配置</el-button>
          <div>
            <span v-if="transcodeStatus.waitingTranscodingCount > 0"><b>{{transcodeStatus.waitingTranscodingCount}}</b>个视频等待转码 </span>
            <span v-if="transcodeStatus.transcodingCount > 0"> <b>{{transcodeStatus.transcodingCount}}</b>个视频正在转码中</span>
--- a/src/views/setting/ossManager.vue
+++ b/src/views/setting/ossManager.vue
@ -53,7 +53,7 @@
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button round size="small" @click="showDialog = false">取消</el-button>
-        <el-button round size="small" type="primary" @click="submitForm" v-loading="submitLoading">确定</el-button>
+        <el-button round size="small" type="primary" @click="submitForm" :loading="true">确定</el-button>
      </span>
      </el-dialog>
    </div>