重构多个组件以优化代码格式和可读性，删除不必要的文件，更新类型定义，添加数据分析路由

src/views/manage/DashboardView.vue

@@ -33,7 +33,8 @@ import {
 import { onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 import SettingsManageView from './SettingsManageView.vue'
-import Setting_PaymentView from './Setting_PaymentView.vue'
+import SettingPaymentView from './Setting_PaymentView.vue'
+
 
 const token = ref('')
 const turnstile = ref()
@@ -286,17 +287,52 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <NAlert type="success" style="width: 100%; ">
-    本站新增国内镜像: <NButton text tag="a" :href="CN_HOST" target="_blank">{{ CN_HOST }}</NButton>, 访问更快
+  <NAlert
+    type="success"
+    style="width: 100%; "
+  >
+    本站新增国内镜像: <NButton
+      text
+      tag="a"
+      :href="CN_HOST"
+      target="_blank"
+    >
+      {{ CN_HOST }}
+    </NButton>, 访问更快
   </NAlert>
   <NDivider />
-  <NFlex justify="center" align="center" vertical style="margin: 0 auto; max-width: 1500px;">
-    <NTabs type="segment" animated v-if="accountInfo" style="width: 100%;"
-      :default-value="$route.query.tab?.toString() ?? 'info'">
-      <NTabPane name="info" tab="个人信息" style="width: 100%;" display-directive="show:lazy">
-        <NFlex justify="center" align="center">
-          <NCard embedded style="width: 100%;max-width: 800px;">
-            <NSpace align="center" justify="center" vertical>
+  <NFlex
+    justify="center"
+    align="center"
+    vertical
+    style="margin: 0 auto; max-width: 1500px;"
+  >
+    <NTabs
+      v-if="accountInfo"
+      type="segment"
+      animated
+      style="width: 100%;"
+      :default-value="$route.query.tab?.toString() ?? 'info'"
+    >
+      <NTabPane
+        name="info"
+        tab="个人信息"
+        style="width: 100%;"
+        display-directive="show:lazy"
+      >
+        <NFlex
+          justify="center"
+          align="center"
+        >
+          <NCard
+            embedded
+            style="width: 100%;max-width: 800px;"
+          >
+            <NSpace
+              align="center"
+              justify="center"
+              vertical
+            >
               <NText style="font-size: 3rem">
                 {{ accountInfo?.name }}
               </NText>
@@ -307,40 +343,77 @@ onUnmounted(() => {
               </NText>
             </NSpace>
             <NDivider>
-              <NText depth="3" style="font-size: 18px"> {{ accountInfo?.id }} </NText>
+              <NText
+                depth="3"
+                style="font-size: 18px"
+              >
+                {{ accountInfo?.id }}
+              </NText>
             </NDivider>
             <NSpace vertical>
               <NCard size="small">
                 <NSpace :size="5">
                   邮箱:
-                  <NEllipsis v-if="accountInfo?.isEmailVerified" style="max-width: 100%">
-                    <NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.bindEmail }} </NText>
+                  <NEllipsis
+                    v-if="accountInfo?.isEmailVerified"
+                    style="max-width: 100%"
+                  >
+                    <NText style="color: var(--primary-color)">
+                      已认证 | {{ accountInfo?.bindEmail }}
+                    </NText>
                   </NEllipsis>
                   <template v-else>
-                    <NTag type="error" size="small"> 未认证 </NTag>
+                    <NTag
+                      type="error"
+                      size="small"
+                    >
+                      未认证
+                    </NTag>
                   </template>
-                  <NButton v-if="accountInfo?.isEmailVerified" type="warning" size="tiny"
-                    @click="resetEmailModalVisiable = true">
+                  <NButton
+                    v-if="accountInfo?.isEmailVerified"
+                    type="warning"
+                    size="tiny"
+                    @click="resetEmailModalVisiable = true"
+                  >
                     修改邮箱
                   </NButton>
                 </NSpace>
               </NCard>
               <NCard size="small">
                 主播 Bilibili 账户:
-                <NEllipsis v-if="accountInfo?.isBiliVerified" style="max-width: 100%">
+                <NEllipsis
+                  v-if="accountInfo?.isBiliVerified"
+                  style="max-width: 100%"
+                >
                   <NText style="color: var(--primary-color)">
-                    <NSpace :size="5" align="center">
+                    <NSpace
+                      :size="5"
+                      align="center"
+                    >
                       已认证 | {{ accountInfo?.biliId }}
-                      <NTag v-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Active" type="success"
-                        size="small" :bordered="false">
+                      <NTag
+                        v-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Active"
+                        type="success"
+                        size="small"
+                        :bordered="false"
+                      >
                         身份码: 有效
                       </NTag>
-                      <NTag v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Inactive" type="error"
-                        size="small" :bordered="false">
+                      <NTag
+                        v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Inactive"
+                        type="error"
+                        size="small"
+                        :bordered="false"
+                      >
                         身份码: 需更新
                       </NTag>
-                      <NTag v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Notfound" type="warning"
-                        size="small" :bordered="false">
+                      <NTag
+                        v-else-if="accountInfo.biliAuthCodeStatus == BiliAuthCodeStatusType.Notfound"
+                        type="warning"
+                        size="small"
+                        :bordered="false"
+                      >
                         身份码: 需绑定
                         <NTooltip>
                           <template #trigger>
@@ -349,10 +422,21 @@ onUnmounted(() => {
                           如果你不是主播的话则不需要在意这个提示
                         </NTooltip>
                       </NTag>
-                      <NButton size="tiny" type="info" @click="bindBiliCodeModalVisiable = true"> 更新身份码 </NButton>
+                      <NButton
+                        size="tiny"
+                        type="info"
+                        @click="bindBiliCodeModalVisiable = true"
+                      >
+                        更新身份码
+                      </NButton>
                       <NPopconfirm @positive-click="resetBili">
                         <template #trigger>
-                          <NButton size="tiny" type="error"> 解除认证 </NButton>
+                          <NButton
+                            size="tiny"
+                            type="error"
+                          >
+                            解除认证
+                          </NButton>
                         </template>
                         确定解除认证吗? 解除后现有的数据跟踪数据将被删除并且无法恢复
                       </NPopconfirm>
@@ -360,7 +444,10 @@ onUnmounted(() => {
                   </NText>
                 </NEllipsis>
                 <template v-else>
-                  <NTag type="error" size="small">
+                  <NTag
+                    type="error"
+                    size="small"
+                  >
                     未绑定
                     <NTooltip>
                       <template #trigger>
@@ -370,18 +457,35 @@ onUnmounted(() => {
                     </NTooltip>
                   </NTag>
                   <NDivider vertical />
-                  <NButton size="small" @click="bindBiliCodeModalVisiable = true" type="info"> 进行绑定 </NButton>
+                  <NButton
+                    size="small"
+                    type="info"
+                    @click="bindBiliCodeModalVisiable = true"
+                  >
+                    进行绑定
+                  </NButton>
                 </template>
               </NCard>
               <NCard size="small">
                 用户 Bilibili 账户:
-                <NEllipsis v-if="accountInfo?.biliUserAuthInfo" style="max-width: 100%">
+                <NEllipsis
+                  v-if="accountInfo?.biliUserAuthInfo"
+                  style="max-width: 100%"
+                >
                   <NText style="color: var(--primary-color)">
-                    <NSpace :size="5" align="center">
+                    <NSpace
+                      :size="5"
+                      align="center"
+                    >
                       已绑定 | {{ accountInfo?.biliUserAuthInfo?.name }} [{{ accountInfo?.biliUserAuthInfo?.userId }}]
                       <NPopconfirm @positive-click="resetBiliAuthBind">
                         <template #trigger>
-                          <NButton size="tiny" type="error"> 解除绑定 </NButton>
+                          <NButton
+                            size="tiny"
+                            type="error"
+                          >
+                            解除绑定
+                          </NButton>
                         </template>
                         确定解除绑定吗?
                       </NPopconfirm>
@@ -389,7 +493,10 @@ onUnmounted(() => {
                   </NText>
                 </NEllipsis>
                 <template v-else>
-                  <NTag type="error" size="small">
+                  <NTag
+                    type="error"
+                    size="small"
+                  >
                     未认证
                     <NTooltip>
                       <template #trigger>
@@ -400,17 +507,33 @@ onUnmounted(() => {
                     </NTooltip>
                   </NTag>
                   <NDivider vertical />
-                  <NButton size="small" @click="bindBiliAuthModalVisiable = true" type="info"> 进行认证 </NButton>
+                  <NButton
+                    size="small"
+                    type="info"
+                    @click="bindBiliAuthModalVisiable = true"
+                  >
+                    进行认证
+                  </NButton>
                 </template>
               </NCard>
               <EventFetcherStatusCard />
-              <NAlert title="Token" type="info">
+              <NAlert
+                title="Token"
+                type="info"
+              >
                 请注意保管, 这个东西可以完全操作你的账号
                 <NInputGroup>
-                  <NInput type="password" :value="accountInfo?.token" show-password-on="click" status="error" />
+                  <NInput
+                    type="password"
+                    :value="accountInfo?.token"
+                    show-password-on="click"
+                    status="error"
+                  />
                   <NPopconfirm @positive-click="resetToken">
                     <template #trigger>
-                      <NButton type="error"> 重置 </NButton>
+                      <NButton type="error">
+                        重置
+                      </NButton>
                     </template>
                     确定要重新生成 Token 吗? EventFetcher 等设施将需要重新部署
                   </NPopconfirm>
@@ -419,11 +542,23 @@ onUnmounted(() => {
             </NSpace>
             <NDivider />
             <NSpace justify="center">
-              <NButton type="info" @click="resetNameModalVisiable = true"> 修改用户名 </NButton>
-              <NButton type="warning" @click="resetPasswordModalVisiable = true"> 修改密码 </NButton>
+              <NButton
+                type="info"
+                @click="resetNameModalVisiable = true"
+              >
+                修改用户名
+              </NButton>
+              <NButton
+                type="warning"
+                @click="resetPasswordModalVisiable = true"
+              >
+                修改密码
+              </NButton>
               <NPopconfirm @positive-click="logout">
                 <template #trigger>
-                  <NButton type="error"> 登出 </NButton>
+                  <NButton type="error">
+                    登出
+                  </NButton>
                 </template>
                 确定登出?
               </NPopconfirm>
@@ -431,54 +566,127 @@ onUnmounted(() => {
           </NCard>
         </NFlex>
       </NTabPane>
-      <NTabPane name="setting" tab="设置" display-directive="show:lazy">
+      <NTabPane
+        name="setting"
+        tab="设置"
+        display-directive="show:lazy"
+      >
         <SettingsManageView />
       </NTabPane>
-      <NTabPane name="payment" tab="增值" display-directive="show:lazy">
-        <Setting_PaymentView />
+      <NTabPane
+        name="billing"
+        tab="增值"
+        display-directive="show:lazy"
+      >
+        <SettingPaymentView />
       </NTabPane>
     </NTabs>
   </NFlex>
-  <NModal v-model:show="resetEmailModalVisiable" preset="card" title="改绑邮箱" style="width: 400px; max-width: 90%">
+  <NModal
+    v-model:show="resetEmailModalVisiable"
+    preset="card"
+    title="改绑邮箱"
+    style="width: 400px; max-width: 90%"
+  >
     <NSpace vertical>
-      <NInput v-model:value="newEmailAddress" placeholder="新邮箱地址" />
+      <NInput
+        v-model:value="newEmailAddress"
+        placeholder="新邮箱地址"
+      />
       <NInputGroup>
-        <NInput v-model:value="newEmailVerifyCode" placeholder="验证码" />
-        <NButton type="primary" @click="sendEmailVerifyCode">
-          发送验证码 <template v-if="!canSendEmailVerifyCode"> |
+        <NInput
+          v-model:value="newEmailVerifyCode"
+          placeholder="验证码"
+        />
+        <NButton
+          type="primary"
+          @click="sendEmailVerifyCode"
+        >
+          发送验证码 <template v-if="!canSendEmailVerifyCode">
+            |
             <NCountdown :duration="60000" />
           </template>
         </NButton>
       </NInputGroup>
     </NSpace>
     <template #footer>
-      <NButton @click="resetEmail" type="primary"> 确定 </NButton>
+      <NButton
+        type="primary"
+        @click="resetEmail"
+      >
+        确定
+      </NButton>
     </template>
   </NModal>
-  <NModal v-model:show="resetPasswordModalVisiable" preset="card" title="修改密码" style="width: 400px; max-width: 90%">
+  <NModal
+    v-model:show="resetPasswordModalVisiable"
+    preset="card"
+    title="修改密码"
+    style="width: 400px; max-width: 90%"
+  >
     <NSpace vertical>
-      <NInput v-model:value="newPassword" type="password" placeholder="新密码" />
-      <NInput v-model:value="newPassword2" type="password" placeholder="确认密码" />
+      <NInput
+        v-model:value="newPassword"
+        type="password"
+        placeholder="新密码"
+      />
+      <NInput
+        v-model:value="newPassword2"
+        type="password"
+        placeholder="确认密码"
+      />
     </NSpace>
     <template #footer>
-      <NButton @click="resetPassword" type="warning"> 确定修改 </NButton>
+      <NButton
+        type="warning"
+        @click="resetPassword"
+      >
+        确定修改
+      </NButton>
     </template>
   </NModal>
-  <NModal v-model:show="resetNameModalVisiable" preset="card" title="修改用户名" style="width: 400px; max-width: 90%">
+  <NModal
+    v-model:show="resetNameModalVisiable"
+    preset="card"
+    title="修改用户名"
+    style="width: 400px; max-width: 90%"
+  >
     <NSpace vertical>
-      <NInput v-model:value="newName" placeholder="新用户名" />
+      <NInput
+        v-model:value="newName"
+        placeholder="新用户名"
+      />
     </NSpace>
     <template #footer>
-      <NButton @click="resetName" type="warning" :loading="isLoading"> 确定修改 </NButton>
+      <NButton
+        type="warning"
+        :loading="isLoading"
+        @click="resetName"
+      >
+        确定修改
+      </NButton>
     </template>
   </NModal>
-  <NModal v-model:show="bindBiliCodeModalVisiable" preset="card" title="绑定/更新身份码" style="width: 400px; max-width: 90%" >
+  <NModal
+    v-model:show="bindBiliCodeModalVisiable"
+    preset="card"
+    title="绑定/更新身份码"
+    style="width: 400px; max-width: 90%"
+  >
     <NSpace vertical>
       <NInputGroup>
-        <NInput v-model:value="biliCode" placeholder="身份码" />
+        <NInput
+          v-model:value="biliCode"
+          placeholder="身份码"
+        />
         <NTooltip>
           <template #trigger>
-            <NButton type="primary" tag="a" href="https://play-live.bilibili.com/" target="_blank">
+            <NButton
+              type="primary"
+              tag="a"
+              href="https://play-live.bilibili.com/"
+              target="_blank"
+            >
               <template #icon>
                 <NIcon>
                   <Question24Regular />
@@ -492,25 +700,50 @@ onUnmounted(() => {
       </NInputGroup>
     </NSpace>
     <NDivider />
-    <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
+    <VueTurnstile
+      ref="turnstile"
+      v-model="token"
+      :site-key="TURNSTILE_KEY"
+      theme="auto"
+      style="text-align: center"
+    />
     <template #footer>
-      <NButton @click="accountInfo?.isBiliVerified ? ChangeBili() : BindBili()" type="success"
-        :loading="!token || isLoading">
+      <NButton
+        type="success"
+        :loading="!token || isLoading"
+        @click="accountInfo?.isBiliVerified ? ChangeBili() : BindBili()"
+      >
         确定
       </NButton>
     </template>
   </NModal>
-  <NModal v-model:show="bindBiliAuthModalVisiable" preset="card" title="绑定用户账户" style="width: 700px; max-width: 90%">
+  <NModal
+    v-model:show="bindBiliAuthModalVisiable"
+    preset="card"
+    title="绑定用户账户"
+    style="width: 700px; max-width: 90%"
+  >
     <NSpace vertical>
-      <NAlert title="获取认证链接" type="info">
+      <NAlert
+        title="获取认证链接"
+        type="info"
+      >
         因为部分功能如积分兑换等也需要对没有注册本站账户的用户开放, 所以需要现在另一个页面获取认证链接,
         然后再回到这里绑定
       </NAlert>
       <NInputGroup>
-        <NInput v-model:value="biliAuthText" placeholder="认证链接, 或者 Token" />
+        <NInput
+          v-model:value="biliAuthText"
+          placeholder="认证链接, 或者 Token"
+        />
         <NTooltip>
           <template #trigger>
-            <NButton type="primary" tag="a" href="/bili-auth" target="_blank">
+            <NButton
+              type="primary"
+              tag="a"
+              href="/bili-auth"
+              target="_blank"
+            >
               <template #icon>
                 <NIcon>
                   <Question24Regular />
@@ -526,7 +759,14 @@ onUnmounted(() => {
       </NInputGroup>
     </NSpace>
     <template #footer>
-      <NButton @click="BindBiliAuth()" type="success" :loading="isLoading" :disabled="!biliAuthText"> 确定 </NButton>
+      <NButton
+        type="success"
+        :loading="isLoading"
+        :disabled="!biliAuthText"
+        @click="BindBiliAuth()"
+      >
+        确定
+      </NButton>
     </template>
   </NModal>
 </template>