[*] 修改页脚，优化 auth 界面样式

LoCyan-Team · Oct 6, 2024 · 1cf2ee4 · 1cf2ee4
1 parent 0b6d640
commit 1cf2ee4
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 71 deletions.
diff --git a/src/components/nav/GuestNav.vue b/src/components/nav/GuestNav.vue
@@ -20,7 +20,7 @@
             &nbsp;&nbsp;&nbsp;&nbsp;
             <n-gradient-text :size="46" type="danger"> 高考加油！ </n-gradient-text>
           </div> -->
-          <div style="margin-right: 15px; margin-left: 15px">
+          <div style="margin-right: 15px; margin-left: 15px; min-height: calc(100vh - 66px)">
             <router-view v-slot="{ Component }">
               <KeepAlive :max="10">
                 <Transition name="fade" mode="out-in" :duration="400">
@@ -31,6 +31,52 @@
               </KeepAlive>
             </router-view>
           </div>
+          <n-divider></n-divider>
+          <div style="margin: 15px">
+            <div style="text-align: center">
+              <n-alert type="default" style="font-size: 20px; display: inline-block">
+                <template #icon>
+                  <i class="twa-sm twa-speech-balloon"></i>
+                </template>
+                {{ hitokoto_content }}
+              </n-alert>
+              <br />
+              <br />
+              <span style="text-align: center">
+                <a target="_blank" href="https://内网穿透.中国/">
+                  <n-button text>内网穿透联盟[CFU]</n-button>
+                </a>
+                识别码:
+                <b>JRXHB5D4</b>
+              </span>
+              <br />
+              <span style="text-align: center">
+                © {{ nowYear }} LoCyanTeam。保留所有权利。 |
+                <a target="_blank" href="https://github.com/LoCyan-Team/LoCyanFrpPanel">
+                  <n-button text style="transform: translateY(4.5px)">
+                    <template #icon>
+                      <n-icon>
+                        <git-alt />
+                      </n-icon>
+                    </template>
+                    {{ gitHash }}
+                  </n-button>
+                </a>
+              </span>
+              <br />
+              <span style="text-align: center">
+                <a target="_blank" href="https://www.locyan.cn/doc/yhfw.html"> 服务条款 </a>
+                |
+                <a target="_blank" href="https://www.locyan.cn/doc/yszc.html"> 隐私政策 </a>
+              </span>
+              <br />
+              <br />
+              <span style="text-align: center"
+                >"Minecraft" 为美国微软公司的商标，本站与其没有任何从属关系</span
+              >
+              <br />
+            </div>
+          </div>
         </n-layout>
       </n-layout>
     </n-layout>
@@ -40,10 +86,14 @@
 <script setup>
 import { h, ref, onMounted } from 'vue'
 import { NGradientText } from 'naive-ui'
+import { GitAlt } from '@vicons/fa'
 import GuestSidebar from '@components/sidebar/GuestSidebar.vue'
 import router from '@router'
 import { get } from '@/utils/request'
 
+const gitHash = GIT_COMMITHASH
+const nowYear = new Date().getFullYear()
+
 // 手机状态下收缩菜单栏
 const collapsed = ref(true)
 if (document.body.clientWidth >= 1000) {

diff --git a/src/components/nav/MainNav.vue b/src/components/nav/MainNav.vue
@@ -59,7 +59,8 @@
             &nbsp;&nbsp;&nbsp;&nbsp;
             <n-gradient-text :size="46" type="danger"> 高考加油！ </n-gradient-text>
           </div> -->
-          <div style="margin-right: 15px; margin-left: 15px">
+          <div style="margin-right: 15px; margin-left: 15px; min-height: calc(100vh - 66px)">
+            >
             <router-view v-slot="{ Component }">
               <KeepAlive :max="10">
                 <Transition name="fade" mode="out-in" :duration="400">
@@ -70,7 +71,7 @@
               </KeepAlive>
             </router-view>
           </div>
-          <br />
+          <n-divider></n-divider>
           <div style="margin: 15px">
             <div style="text-align: center">
               <n-alert type="default" style="font-size: 20px; display: inline-block">
@@ -83,20 +84,14 @@
               <br />
               <span style="text-align: center">
                 <a target="_blank" href="https://内网穿透.中国/">
-                  <n-button text> 内网穿透联盟[CFU] </n-button>
+                  <n-button text>内网穿透联盟[CFU]</n-button>
                 </a>
                 识别码:
                 <b>JRXHB5D4</b>
               </span>
               <br />
-              <span style="text-align: center"
-                >Daiyangcheng 策划 / 运营 | DXCFTDE, Zhiyuan 协助</span
-              >
-              <br />
-              <span style="text-align: center">特别鸣谢: 夏沫花火zzz🌙, 天宇网络, LiteCat</span>
-              <br />
-              <span style="text-align: center"
-                >LoCyanTeam 所有 |
+              <span style="text-align: center">
+                © {{ nowYear }} LoCyanTeam。保留所有权利。 |
                 <a target="_blank" href="https://github.com/LoCyan-Team/LoCyanFrpPanel">
                   <n-button text style="transform: translateY(4.5px)">
                     <template #icon>
@@ -109,13 +104,17 @@
                 </a>
               </span>
               <br />
-              <!--
-              <template>
-                <n-alert type="default" style="font-size: 20px; display:inline-block;">
-                <a href="https://spcraft.ml">风雨阁Storm Pavilion</a>
-              </n-alert>
-              </template>
-              -->
+              <span style="text-align: center">
+                <a target="_blank" href="https://www.locyan.cn/doc/yhfw.html"> 服务条款 </a>
+                |
+                <a target="_blank" href="https://www.locyan.cn/doc/yszc.html"> 隐私政策 </a>
+              </span>
+              <br />
+              <br />
+              <span style="text-align: center"
+                >"Minecraft" 为美国微软公司的商标，本站与其没有任何从属关系</span
+              >
+              <br />
             </div>
           </div>
         </n-layout>
@@ -143,6 +142,7 @@ import logger from '@/utils/logger'
 import notice from '@/utils/notice'
 
 const gitHash = GIT_COMMITHASH
+const nowYear = new Date().getFullYear()
 
 // 手机状态下收缩菜单栏
 const collapsed = ref(true)

diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
@@ -62,15 +62,30 @@
       <n-card title="数据报表" size="large">
         <n-space>
           <n-statistic label="上行限速" tabular-nums>
-            <n-number-animation ref="outboundRef" show-separator :from="0" :to="userData.getters.get_user_inbound" />
+            <n-number-animation
+              ref="outboundRef"
+              show-separator
+              :from="0"
+              :to="userData.getters.get_user_inbound"
+            />
             <template #suffix>Mbit/s</template>
           </n-statistic>
           <n-statistic label="下行限速" tabular-nums>
-            <n-number-animation ref="inboundRef" show-separator :from="0" :to="userData.getters.get_user_outbound" />
+            <n-number-animation
+              ref="inboundRef"
+              show-separator
+              :from="0"
+              :to="userData.getters.get_user_outbound"
+            />
             <template #suffix>Mbit/s</template>
           </n-statistic>
           <n-statistic label="剩余流量" tabular-nums>
-            <n-number-animation ref="trafficRef" show-separator :from="0" :to="userData.getters.get_traffic" />
+            <n-number-animation
+              ref="trafficRef"
+              show-separator
+              :from="0"
+              :to="userData.getters.get_traffic"
+            />
             <template #suffix>GiB</template>
           </n-statistic>
         </n-space>

diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useLoadingBar, useMessage } from 'naive-ui'
 import router from '@router'
 import userData from '@/utils/stores/userData/store'
@@ -184,7 +184,6 @@ const rules = {
 
 @media (max-width: 1300px) {
   #item {
-    margin-top: calc(50vh - 160px);
     margin-left: 20px;
     margin-right: 20px;
   }

diff --git a/src/views/auth/RegisterView.vue b/src/views/auth/RegisterView.vue
@@ -1,50 +1,59 @@
 <template>
-  <n-form
-    ref="formRef"
-    :model="model"
-    style="margin-top: 20px"
-    :rules="rules"
-    label-width="auto"
-    require-mark-placement="right-hanging"
-    size="medium"
-    id="item"
-  >
-    <n-form-item label="用户名" path="username">
-      <n-input type="text" v-model:value="model.username" placeholder="用户名" />
-    </n-form-item>
-    <n-form-item label="邮箱" path="email">
-      <n-input type="text" v-model:value="model.email" placeholder="邮箱" />
-    </n-form-item>
-    <n-form-item label="密码" path="password">
-      <n-input type="password" v-model:value="model.password" placeholder="密码" />
-    </n-form-item>
-    <n-form-item label="确认密码" path="confirmpwd">
-      <n-input type="password" v-model:value="model.confirmpwd" placeholder="再次输入密码" />
-    </n-form-item>
-    <n-form-item label="QQ & 邮件验证码" path="qq">
-      <n-grid cols="6" :x-gap="8" :y-gap="8" item-responsive>
-        <n-grid-item span="0:6 600:3">
-          <n-input type="text" v-model:value="model.qq" placeholder="QQ号" />
-        </n-grid-item>
-        <n-grid-item span="0:6 600:2">
-          <n-input type="text" v-model:value="model.verify" placeholder="验证码" />
-        </n-grid-item>
-        <n-grid-item span="0:6 600:1">
-          <n-button ghost round type="primary" @click="sendCode" v-bind:disabled="verify.isClick">
-            {{ verify.msg }}
-          </n-button>
-        </n-grid-item>
-      </n-grid>
-    </n-form-item>
-    <div style="display: flex; margin-bottom: 20px; justify-content: flex-end">
-      <n-space>
-        <n-button type="primary" @click="register" style="margin-right: 10px"> 注册 </n-button>
-        <n-button ghost type="primary" style="--n-border: none" @click="goLogin">
-          已有账户？去登录
-        </n-button>
-      </n-space>
-    </div>
-  </n-form>
+  <n-grid cols="1" item-responsive>
+    <n-grid-item span="1">
+      <n-form
+        ref="formRef"
+        :model="model"
+        :rules="rules"
+        label-width="auto"
+        require-mark-placement="right-hanging"
+        size="medium"
+        id="item"
+      >
+        <n-form-item label="用户名" path="username">
+          <n-input type="text" v-model:value="model.username" placeholder="用户名" />
+        </n-form-item>
+        <n-form-item label="邮箱" path="email">
+          <n-input type="text" v-model:value="model.email" placeholder="邮箱" />
+        </n-form-item>
+        <n-form-item label="密码" path="password">
+          <n-input type="password" v-model:value="model.password" placeholder="密码" />
+        </n-form-item>
+        <n-form-item label="确认密码" path="confirmpwd">
+          <n-input type="password" v-model:value="model.confirmpwd" placeholder="再次输入密码" />
+        </n-form-item>
+        <n-form-item label="QQ & 邮件验证码" path="qq">
+          <n-grid cols="6" :x-gap="8" :y-gap="8" item-responsive>
+            <n-grid-item span="0:6 600:3">
+              <n-input type="text" v-model:value="model.qq" placeholder="QQ号" />
+            </n-grid-item>
+            <n-grid-item span="0:6 600:2">
+              <n-input type="text" v-model:value="model.verify" placeholder="验证码" />
+            </n-grid-item>
+            <n-grid-item span="0:6 600:1">
+              <n-button
+                ghost
+                round
+                type="primary"
+                @click="sendCode"
+                v-bind:disabled="verify.isClick"
+              >
+                {{ verify.msg }}
+              </n-button>
+            </n-grid-item>
+          </n-grid>
+        </n-form-item>
+        <div style="display: flex; margin-bottom: 20px; justify-content: flex-end">
+          <n-space>
+            <n-button type="primary" @click="register" style="margin-right: 10px"> 注册 </n-button>
+            <n-button ghost type="primary" style="--n-border: none" @click="goLogin">
+              已有账户？去登录
+            </n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-grid-item>
+  </n-grid>
 </template>
 
 <script setup>
@@ -180,7 +189,6 @@ const rules = {
 
 @media (max-width: 1300px) {
   #item {
-    margin-top: calc(50vh - 320px);
     margin-left: 20px;
     margin-right: 20px;
   }