pref: 优化设置页面排布

2025-12-06 16:58:26 +08:00 · 2024-04-07 16:27:58 +08:00 · 2024-04-07 16:27:58 +08:00 · 2d7000db01
commit 2d7000db01
parent 68fbccdf20
7 changed files with 38 additions and 26 deletions
--- a/blossom-editor/src/renderer/src/views/index/AsideUser.vue
+++ b/blossom-editor/src/renderer/src/views/index/AsideUser.vue
@ -11,6 +11,7 @@
 <script setup lang="ts">
 import { useUserStore } from '@renderer/stores/user'
 import { useConfigStore } from '@renderer/stores/config'
+
 const userStore = useUserStore()
 const { viewStyle } = useConfigStore()
 </script>
--- a/blossom-editor/src/renderer/src/views/index/SettingConfigAddUser.vue
+++ b/blossom-editor/src/renderer/src/views/index/SettingConfigAddUser.vue
@ -1,7 +1,11 @@
 <template>
  <div class="config-root">
    <div class="title">添加使用账号</div>
-    <div class="desc">您可以添加用户与您共用同一个后台服务，添加账号后，可登录新账号修改个人信息。</div>
+    <div class="desc" style="margin-bottom: 0">您可以添加用户与您共用同一个后台服务，添加账号后，可登录新账号修改个人信息。</div>
+    <div class="desc">
+      <el-button @click="showUserListDialog" text bg><span class="iconbl bl-user-line"></span>用户管理</el-button>
+    </div>
+
    <el-form :model="addUserForm" :rules="rules" label-position="right" label-width="130px" ref="AddUserFormRef">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addUserForm.username" size="default">
@ -34,6 +38,19 @@
      </el-form-item>
    </el-form>
  </div>
+
+  <!-- 自定义临时访问链接 -->
+  <el-dialog
+    v-model="isShowUserListDialog"
+    class="bl-dialog-fixed-body"
+    width="710"
+    style="height: 70%"
+    :align-center="true"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    :close-on-click-modal="true">
+    <UserListSetting></UserListSetting>
+  </el-dialog>
 </template>

 <script setup lang="ts">
@ -41,6 +58,7 @@ import { computed, ref } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { userAddApi } from '@renderer/api/auth'
 import Notify from '@renderer/scripts/notify'
+import UserListSetting from './setting/UserListSetting.vue'

 interface AddUserForm {
  username: string
@ -79,6 +97,13 @@ const save = async (formEl: FormInstance | undefined) => {
    }
  })
 }
+
+//#region ----------------------------------------< 菜单 >--------------------------------------
+const isShowUserListDialog = ref(false)
+const showUserListDialog = () => {
+  isShowUserListDialog.value = true
+}
+//#endregion
 </script>

 <style scoped lang="scss">
--- a/blossom-editor/src/renderer/src/views/index/SettingConfigBlog.vue
+++ b/blossom-editor/src/renderer/src/views/index/SettingConfigBlog.vue
@ -1,7 +1,10 @@
 <template>
  <div class="config-root" v-loading="!userStore.isLogin" element-loading-spinner="none" element-loading-text="请登录后查看...">
    <div class="title">博客配置</div>
-    <div class="desc">博客各项参数配置，若无内容请点击右侧刷新。<el-button @click="refreshParam" text bg>刷新参数</el-button></div>
+    <div class="desc" style="margin-bottom: 0">博客各项参数配置，若无内容请点击右侧刷新。</div>
+    <div class="desc">
+      <el-button @click="refreshParam" text bg><span class="iconbl bl-refresh-line"></span>刷新参数</el-button>
+    </div>

    <el-form :model="userParamForm" label-position="right" label-width="130px" style="max-width: 800px">
      <el-form-item label="文章查看地址" :required="true">
--- a/blossom-editor/src/renderer/src/views/index/SettingConfigServer.vue
+++ b/blossom-editor/src/renderer/src/views/index/SettingConfigServer.vue
@ -4,7 +4,6 @@
    <div class="desc" style="margin-bottom: 0">服务器各项参数配置，若无内容请点击下方刷新。只有管理员用户具有操作服务器配置的权限。</div>
    <div class="desc">
      <el-button @click="refreshParam" text bg><span class="iconbl bl-refresh-line"></span>刷新参数</el-button>
-      <el-button @click="showUserListDialog" text bg><span class="iconbl bl-user-line"></span>用户管理</el-button>
    </div>

    <el-form :model="serverParamForm" label-position="right" label-width="130px" style="max-width: 800px">
@ -108,19 +107,6 @@
      {{ userStore.userinfo }}
    </div> -->
  </div>
-
-  <!-- 自定义临时访问链接 -->
-  <el-dialog
-    v-model="isShowUserListDialog"
-    class="bl-dialog-fixed-body"
-    width="710"
-    style="height: 70%"
-    :align-center="true"
-    :append-to-body="true"
-    :destroy-on-close="true"
-    :close-on-click-modal="true">
-    <UserListSetting></UserListSetting>
-  </el-dialog>
 </template>

 <script setup lang="ts">
@ -132,7 +118,6 @@ import { paramListApi, paramUpdApi, paramRefreshApi } from '@renderer/api/blosso
 import { getDateTimeFormat, betweenDay } from '@renderer/assets/utils/util'
 import Notify from '@renderer/scripts/notify'
 import dayjs from 'dayjs'
-import UserListSetting from './setting/UserListSetting.vue'

 const serverStore = useServerStore()
 const userStore = useUserStore()
@ -220,13 +205,6 @@ const autuUpdBlossomOSDomain = () => {
  })
 }

-//#region ----------------------------------------< 菜单 >--------------------------------------
-const isShowUserListDialog = ref(false)
-const showUserListDialog = () => {
-  isShowUserListDialog.value = true
-}
-//#endregion
-
 const reload = () => {
  getParamList()
 }
--- a/blossom-editor/src/renderer/src/views/index/SettingConfigUpdPwd.vue
+++ b/blossom-editor/src/renderer/src/views/index/SettingConfigUpdPwd.vue
@ -2,6 +2,7 @@
  <div class="config-root" v-loading="!userStore.isLogin" element-loading-spinner="none" element-loading-text="请登录后查看...">
    <div class="title">修改登录密码</div>
    <div class="desc">修改后下次登录将使用新密码。</div>
+    
    <el-form :model="updPwdForm" :rules="rules" label-position="right" label-width="130px" ref="UpdPwdFormRef">
      <el-form-item label="旧密码" prop="password">
        <el-input v-model="updPwdForm.password" size="default" show-password>
--- a/blossom-editor/src/renderer/src/views/index/SettingConfigUserinfo.vue
+++ b/blossom-editor/src/renderer/src/views/index/SettingConfigUserinfo.vue
@ -1,7 +1,11 @@
 <template>
  <div class="config-root" v-loading="!userStore.isLogin" element-loading-spinner="none" element-loading-text="请登录后查看...">
    <div class="title">修改用户信息</div>
-    <div class="desc">用户的个人信息，若无内容请点击右侧刷新。<el-button @click="refreshUserinfo" text bg>刷新信息</el-button></div>
+    <div class="desc" style="margin-bottom: 0">用户的个人信息，若无内容请点击右侧刷新。</div>
+    <div class="desc">
+      <el-button @click="refreshUserinfo" text bg><span class="iconbl bl-refresh-line"></span>刷新信息</el-button>
+    </div>
+
    <el-form :model="userinfoForm" :rules="rules" label-position="right" label-width="130px" style="max-width: 800px" ref="UserinfoFormRef">
      <el-form-item label="ID" prop="id">
        <el-input v-model="userinfoForm.id" size="default" disabled>
--- a/blossom-editor/src/renderer/src/views/index/SettingLogin.vue
+++ b/blossom-editor/src/renderer/src/views/index/SettingLogin.vue
@ -295,7 +295,7 @@ const helpMeLogin = () => {
        [class='dark'] & {
          box-shadow:
            0.3rem 0.3rem 0.6rem #000000,
-            -0.1rem -0.1rem 0.5rem #848484;
+            -0.1rem -0.1rem 0.5rem #4b4b4b;
        }

        ~ .iconbl {