From 6f4d6aa924b0b923bcaa6c519899d8e21024d7e3 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 8 Jul 2025 14:15:33 +0800
Subject: [PATCH] feat: setting page loading

---
 open-isle-cli/src/views/SettingsPageView.vue | 80 +++++++++++---------
 src/main/resources/application.properties    |  2 +-
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/open-isle-cli/src/views/SettingsPageView.vue b/open-isle-cli/src/views/SettingsPageView.vue
index c48b4db42..b99af84cd 100644
--- a/open-isle-cli/src/views/SettingsPageView.vue
+++ b/open-isle-cli/src/views/SettingsPageView.vue
@@ -1,41 +1,46 @@
 <template>
   <div class="settings-page">
-    <div class="settings-title">个人资料设置</div>
-    <div class="profile-section">
-      <div class="avatar-row">
-        <!-- label 充当点击区域，内部隐藏 input -->
-        <label class="avatar-container">
-          <img :src="avatar" class="avatar-preview" />
-          <!-- 半透明蒙层：hover 时出现 -->
-          <div class="avatar-overlay">更换头像</div>
-          <input type="file" class="avatar-input" accept="image/*" @change="onAvatarChange" />
-        </label>
-      </div>
-      <div class="form-row username-row">
-        <BaseInput icon="fas fa-user" v-model="username" @input="usernameError = ''" placeholder="用户名" />
-        <div class="setting-description">用户名是你在社区的唯一标识</div>
-        <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
-      </div>
-      <div class="form-row introduction-row">
-        <div class="setting-title">自我介绍</div>
-        <BaseInput v-model="introduction" textarea rows="3" placeholder="说些什么..." />
-        <div class="setting-description">自我介绍会出现在你的个人主页，可以简要介绍自己</div>
-      </div>
+    <div v-if="isLoadingPage" class="loading-page">
+      <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
     </div>
-    <div v-if="role === 'ADMIN'" class="admin-section">
-      <h3>管理员设置</h3>
-      <div class="form-row">
-        <div class="setting-title">发布规则</div>
-        <Dropdown v-model="publishMode" :fetch-options="fetchPublishModes" />
+    <div v-else>
+      <div class="settings-title">个人资料设置</div>
+      <div class="profile-section">
+        <div class="avatar-row">
+          <!-- label 充当点击区域，内部隐藏 input -->
+          <label class="avatar-container">
+            <img :src="avatar" class="avatar-preview" />
+            <!-- 半透明蒙层：hover 时出现 -->
+            <div class="avatar-overlay">更换头像</div>
+            <input type="file" class="avatar-input" accept="image/*" @change="onAvatarChange" />
+          </label>
+        </div>
+        <div class="form-row username-row">
+          <BaseInput icon="fas fa-user" v-model="username" @input="usernameError = ''" placeholder="用户名" />
+          <div class="setting-description">用户名是你在社区的唯一标识</div>
+          <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
+        </div>
+        <div class="form-row introduction-row">
+          <div class="setting-title">自我介绍</div>
+          <BaseInput v-model="introduction" textarea rows="3" placeholder="说些什么..." />
+          <div class="setting-description">自我介绍会出现在你的个人主页，可以简要介绍自己</div>
+        </div>
       </div>
-      <div class="form-row">
-        <div class="setting-title">密码强度</div>
-        <Dropdown v-model="passwordStrength" :fetch-options="fetchPasswordStrengths" />
+      <div v-if="role === 'ADMIN'" class="admin-section">
+        <h3>管理员设置</h3>
+        <div class="form-row">
+          <div class="setting-title">发布规则</div>
+          <Dropdown v-model="publishMode" :fetch-options="fetchPublishModes" />
+        </div>
+        <div class="form-row">
+          <div class="setting-title">密码强度</div>
+          <Dropdown v-model="passwordStrength" :fetch-options="fetchPasswordStrengths" />
+        </div>
+      </div>
+      <div class="buttons">
+        <div v-if="isSaving" class="save-button disabled">保存中...</div>
+        <div v-else @click="save" class="save-button">保存</div>
       </div>
-    </div>
-    <div class="buttons">
-      <div v-if="isSaving" class="save-button disabled">保存中...</div>
-      <div v-else @click="save" class="save-button">保存</div>
     </div>
   </div>
 </template>
@@ -173,6 +178,14 @@ export default {
 </script>
 
 <style scoped>
+.loading-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 300px;
+}
+
 .settings-page {
   background-color: var(--background-color);
   padding: 40px;
@@ -304,5 +317,4 @@ export default {
   background-color: var(--primary-color-disabled);
   cursor: not-allowed;
 }
-
 </style>
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index f4d76b89d..ea4a907d8 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -35,7 +35,7 @@ resend.api.key=${RESEND_API_KEY:}
 # your email services: ...
 
 # for tencent cloud image upload service, you can improve your service by yourself
-cos.base-url=${COS_BASE_URL:https://example.com}
+cos.base-url=${:https://example.com}
 cos.secret-id=${COS_SECRET_ID:}
 cos.secret-key=${COS_SECRET_KEY:}
 cos.region=${COS_REGION:ap-guangzhou}