refactor: new loading logic, icons for tabs

1 files changed, 83 insertions, 43 deletions

diff --git a/web/html/settings.html b/web/html/settings.html
index 18e0d6a8..840778f5 100644
--- a/web/html/settings.html
+++ b/web/html/settings.html
@@ -65,9 +65,9 @@
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
-      <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+      <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
         <transition name="list" appear>
-          <a-alert type="error" v-if="confAlerts.length>0" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="confAlerts.length>0 && loadingStates.fetched" :style="{ marginBottom: '10px' }"
               message='{{ i18n "secAlertTitle" }}'
               color="red"
               show-icon closable>
@@ -77,46 +77,79 @@
             </template>
           </a-alert>
         </transition>
-        <a-space direction="vertical">
-          <a-card hoverable :style="{ marginBottom: '.5rem', overflowX: 'hidden' }">
-            <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
-              <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
-                <a-space direction="horizontal">
-                  <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
-                  <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
-                </a-space>
+        <transition name="list" appear>
+          <template>
+            <a-row v-if="!loadingStates.fetched">
+              <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+                <a-spin tip='{{ i18n "loading" }}'></a-spin>
+              </a-card>
+            </a-row>
+            <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+              <a-col>
+                <a-card hoverable>
+                  <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
+                    <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
+                      <a-space direction="horizontal">
+                        <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
+                        <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
+                      </a-space>
+                    </a-col>
+                    <a-col :xs="24" :sm="14">
+                      <template>
+                        <div>
+                          <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
+                          <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
+                            message='{{ i18n "pages.settings.infoDesc" }}'
+                            show-icon>
+                          </a-alert>
+                        </div>
+                      </template>
+                    </a-col>
+                  </a-row>
+                </a-card>
               </a-col>
-              <a-col :xs="24" :sm="14">
-                <template>
-                  <div>
-                    <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                    <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
-                      message='{{ i18n "pages.settings.infoDesc" }}'
-                      show-icon>
-                    </a-alert>
-                  </div>
-                </template>
+              <a-col>
+                <a-tabs default-active-key="1">
+                  <a-tab-pane key="1" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="setting"></a-icon>
+                      <span>{{ i18n "pages.settings.panelSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/general" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="2" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="safety"></a-icon>
+                      <span>{{ i18n "pages.settings.securitySettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/security" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="3" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="message"></a-icon>
+                      <span>{{ i18n "pages.settings.TGBotSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/telegram" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="4" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="cloud-server"></a-icon>
+                      <span>{{ i18n "pages.settings.subSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/subscription/general" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="5" v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="code"></a-icon>
+                      <span>{{ i18n "pages.settings.subSettings" }} (JSON)</span>
+                    </template>
+                    {{ template "settings/panel/subscription/json" . }}
+                  </a-tab-pane>
+                </a-tabs>
               </a-col>
             </a-row>
-          </a-card>
-          <a-tabs default-active-key="1">
-            <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/general" . }}
-            </a-tab-pane>
-            <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/security" . }}
-            </a-tab-pane>
-            <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/telegram" . }}
-            </a-tab-pane>
-            <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/subscription/general" . }}
-            </a-tab-pane>
-            <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/subscription/json" . }}
-            </a-tab-pane>
-          </a-tabs>
-        </a-space>
+          </template>
+        </transition>
       </a-spin>
     </a-layout-content>
   </a-layout>
@@ -132,10 +165,14 @@
 <script>
   const app = new Vue({
     delimiters: ['[[', ']]'],
+    mixins: [MediaQueryMixin],
     el: '#app',
     data: {
       themeSwitcher,
-      spinning: false,
+      loadingStates: {
+        fetched: false,
+        spinning: false
+      },
       oldAllSetting: new AllSetting(),
       allSetting: new AllSetting(),
       saveBtnDisable: true,
@@ -248,13 +285,16 @@
     },
     methods: {
       loading(spinning = true) {
-        this.spinning = spinning;
+        this.loadingStates.spinning = spinning;
       },
       async getAllSetting() {
-        this.loading(true);
         const msg = await HttpUtil.post("/panel/setting/all");
-        this.loading(false);
+
         if (msg.success) {
+          if (!this.loadingStates.fetched) {
+            this.loadingStates.fetched = true
+          }
+
           this.oldAllSetting = new AllSetting(msg.obj);
           this.allSetting = new AllSetting(msg.obj);
           app.changeRemarkSample();