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

src/views/pointViews/PointGoodsView.vue

@@ -199,54 +199,121 @@ onMounted(async () => {
 </script>
 
 <template>
-  <NAlert v-if="!useAuth.isAuthed" type="warning">
+  <NAlert
+    v-if="!useAuth.isAuthed"
+    type="warning"
+  >
     你尚未进行 Bilibili 账号认证, 无法兑换积分
-    <br />
-    <NButton type="primary" @click="$router.push({ name: 'bili-auth' })" size="small" style="margin-top: 12px">
+    <br>
+    <NButton
+      type="primary"
+      size="small"
+      style="margin-top: 12px"
+      @click="$router.push({ name: 'bili-auth' })"
+    >
       立即认证
     </NButton>
   </NAlert>
-  <NCard v-else style="max-width: 600px; margin: 0 auto;" embedded hoverable>
-    <template #header> 你好, {{ useAuth.biliAuth.name }} </template>
+  <NCard
+    v-else
+    style="max-width: 600px; margin: 0 auto;"
+    embedded
+    hoverable
+  >
+    <template #header>
+      你好, {{ useAuth.biliAuth.name }}
+    </template>
     <template #header-extra>
       <NFlex>
-        <NButton type="info" @click="gotoAuthPage" secondary size="small"> 前往认证用户中心 </NButton>
-        <NButton @click="NavigateToNewTab('/bili-user#settings')" secondary size="small"> 切换账号 </NButton>
+        <NButton
+          type="info"
+          secondary
+          size="small"
+          @click="gotoAuthPage"
+        >
+          前往认证用户中心
+        </NButton>
+        <NButton
+          secondary
+          size="small"
+          @click="NavigateToNewTab('/bili-user#settings')"
+        >
+          切换账号
+        </NButton>
       </NFlex>
     </template>
     <NText> 你在 {{ userInfo.extra?.streamerInfo?.name ?? userInfo.name }} 的直播间的积分为 {{ currentPoint }} </NText>
   </NCard>
   <NDivider />
-  <NCard v-if="tags.length > 0" size="small" title="标签筛选">
-    <NFlex align="center" justify="center">
-      <NButton v-for="tag in tags" :type="tag == selectedTag ? 'success' : 'default'"
-        @click="selectedTag = selectedTag == tag ? undefined : tag" :borderd="false" style="margin: 4px" size="small">
+  <NCard
+    v-if="tags.length > 0"
+    size="small"
+    title="标签筛选"
+  >
+    <NFlex
+      align="center"
+      justify="center"
+    >
+      <NButton
+        v-for="tag in tags"
+        :key="tag"
+        :type="tag == selectedTag ? 'success' : 'default'"
+        :borderd="false"
+        style="margin: 4px"
+        size="small"
+        @click="selectedTag = selectedTag == tag ? undefined : tag"
+      >
         {{ tag }}
       </NButton>
     </NFlex>
     <NDivider />
-    <NCheckbox v-model:checked="onlyCanBuy"> 只显示可兑换的礼物 </NCheckbox>
-    <NCheckbox v-model:checked="ignoreGuard"> 忽略需要舰长的礼物 </NCheckbox>
+    <NCheckbox v-model:checked="onlyCanBuy">
+      只显示可兑换的礼物
+    </NCheckbox>
+    <NCheckbox v-model:checked="ignoreGuard">
+      忽略需要舰长的礼物
+    </NCheckbox>
   </NCard>
   <NDivider />
   <NSpin :show="isLoading">
-    <NEmpty v-if="selectedItems.length == 0"> 暂无礼物 </NEmpty>
+    <NEmpty v-if="selectedItems.length == 0">
+      暂无礼物
+    </NEmpty>
     <NFlex justify="center">
-      <PointGoodsItem v-for="item in selectedItems" :key="item.id" :goods="item"
-        content-style="max-width: 300px;height: 365px">
+      <PointGoodsItem
+        v-for="item in selectedItems"
+        :key="item.id"
+        :goods="item"
+        content-style="max-width: 300px;height: 365px"
+      >
         <template #footer>
-          <NFlex justify="space-between" align="center">
+          <NFlex
+            justify="space-between"
+            align="center"
+          >
             <NTooltip>
               <template #trigger>
-                <NButton :disabled="getTooltip(item) != '开始兑换'" size="small" type="primary" @click="onBuyClick(item)">兑换
+                <NButton
+                  :disabled="getTooltip(item) != '开始兑换'"
+                  size="small"
+                  type="primary"
+                  @click="onBuyClick(item)"
+                >
+                  兑换
                 </NButton>
               </template>
               {{ getTooltip(item) }}
             </NTooltip>
-            <NFlex style="flex: 1" justify="end">
+            <NFlex
+              style="flex: 1"
+              justify="end"
+            >
               <NTooltip>
                 <template #trigger>
-                  <NText style="size: 34px" :delete="item.canFreeBuy">
+                  <NText
+                    style="size: 34px"
+                    :delete="item.canFreeBuy"
+                  >
                     🪙
                     {{ item.price > 0 ? item.price : '免费' }}
                   </NText>
@@ -259,32 +326,70 @@ onMounted(async () => {
       </PointGoodsItem>
     </NFlex>
   </NSpin>
-  <NModal v-model:show="showBuyModal" v-if="currentGoods" preset="card" title="确认兑换"
-    style="width: 500px; max-width: 90vw; height: auto">
+  <NModal
+    v-if="currentGoods"
+    v-model:show="showBuyModal"
+    preset="card"
+    title="确认兑换"
+    style="width: 500px; max-width: 90vw; height: auto"
+  >
     <template #header>
       <NFlex align="baseline">
-        <NTag :type="currentGoods.type == GoodsTypes.Physical ? 'info' : 'default'" :bordered="false">
+        <NTag
+          :type="currentGoods.type == GoodsTypes.Physical ? 'info' : 'default'"
+          :bordered="false"
+        >
           {{ currentGoods.type == GoodsTypes.Physical ? '实体礼物' : '虚拟物品' }}
         </NTag>
         <NText> {{ currentGoods.name }} </NText>
       </NFlex>
     </template>
-    <PointGoodsItem v-if="currentGoods" :goods="currentGoods" />
+    <PointGoodsItem
+      v-if="currentGoods"
+      :goods="currentGoods"
+    />
     <template v-if="currentGoods.type == GoodsTypes.Physical">
       <NDivider> 选项 </NDivider>
       <NForm>
-        <NFormItem label="兑换数量" required>
-          <NInputNumber v-model:value="buyCount" :min="1" :max="currentGoods.maxBuyCount ?? 100000"
-            style="max-width: 120px" step="1" :precision="0" />
+        <NFormItem
+          label="兑换数量"
+          required
+        >
+          <NInputNumber
+            v-model:value="buyCount"
+            :min="1"
+            :max="currentGoods.maxBuyCount ?? 100000"
+            style="max-width: 120px"
+            step="1"
+            :precision="0"
+          />
         </NFormItem>
-        <NFormItem v-if="
-          currentGoods.type == GoodsTypes.Physical &&
-          (currentGoods.collectUrl == null || currentGoods.collectUrl == undefined)
-        " label="收货地址" required>
-          <NSelect v-model:show="showAddressSelect" :value="selectedAddress?.id" :options="addressOptions"
-            :render-label="renderLabel" :render-option="renderOption" placeholder="请选择地址" />
+        <NFormItem
+          v-if="
+            currentGoods.type == GoodsTypes.Physical &&
+              (currentGoods.collectUrl == null || currentGoods.collectUrl == undefined)
+          "
+          label="收货地址"
+          required
+        >
+          <NSelect
+            v-model:show="showAddressSelect"
+            :value="selectedAddress?.id"
+            :options="addressOptions"
+            :render-label="renderLabel"
+            :render-option="renderOption"
+            placeholder="请选择地址"
+          />
           &nbsp;
-          <NButton size="small" type="info" tag="a" href="/bili-user#settings" target="_blank"> 管理收货地址 </NButton>
+          <NButton
+            size="small"
+            type="info"
+            tag="a"
+            href="/bili-user#settings"
+            target="_blank"
+          >
+            管理收货地址
+          </NButton>
         </NFormItem>
       </NForm>
     </template>
@@ -293,7 +398,14 @@ onMounted(async () => {
         {{ currentGoods.price * buyCount > currentPoint ? '积分不足' : '可兑换' }}
       </NTag>
     </NDivider>
-    <NButton type="primary" :disabled="!canDoBuy" @click="buyGoods" :loading="isLoading"> 确认兑换 </NButton>
+    <NButton
+      type="primary"
+      :disabled="!canDoBuy"
+      :loading="isLoading"
+      @click="buyGoods"
+    >
+      确认兑换
+    </NButton>
     <NText>
       <NDivider vertical />
       所需积分: {{ currentGoods.price * buyCount }}

src/views/pointViews/PointOrderView.vue

@@ -37,7 +37,15 @@ onMounted(async () => {
 
 <template>
   <NSpin :show="isLoading">
-    <NEmpty v-if="orders.length == 0" description="暂无订单" />
-    <PointOrderCard v-else :order="orders" :loading="isLoading" type="user" />
+    <NEmpty
+      v-if="orders.length == 0"
+      description="暂无订单"
+    />
+    <PointOrderCard
+      v-else
+      :order="orders"
+      :loading="isLoading"
+      type="user"
+    />
   </NSpin>
 </template>

src/views/pointViews/PointUserLayout.vue

@@ -130,45 +130,104 @@ onMounted(async () => {
 
 <template>
   <NLayout style="height: 100vh">
-    <NSpin v-if="useAuth.isLoading && useAuth.currentToken" :show="useAuth.isLoading" />
+    <NSpin
+      v-if="useAuth.isLoading && useAuth.currentToken"
+      :show="useAuth.isLoading"
+    />
     <NLayoutContent
       v-else-if="(!useAuth.currentToken && useAuth.biliTokens.length > 0) || useAuth.isInvalid"
       style="height: 100vh; padding: 50px"
     >
-      <NAlert v-if="useAuth.isInvalid" type="error"> 当前登录的 Bilibili 账号已失效 </NAlert>
-      <NCard title="选择B站账号" embedded>
+      <NAlert
+        v-if="useAuth.isInvalid"
+        type="error"
+      >
+        当前登录的 Bilibili 账号已失效
+      </NAlert>
+      <NCard
+        title="选择B站账号"
+        embedded
+      >
         <template #header-extra>
-          <NButton type="primary" @click="$router.push({ name: 'bili-auth' })" size="small" secondary
-            >认证其他账号</NButton
+          <NButton
+            type="primary"
+            size="small"
+            secondary
+            @click="$router.push({ name: 'bili-auth' })"
           >
+            认证其他账号
+          </NButton>
         </template>
-        <NList clickable bordered>
-          <NListItem v-for="item in useAuth.biliTokens" :key="item.token" @click="switchAuth(item.token)">
-            <NFlex align="center"> {{ item.name }} - {{ item.uId }} </NFlex>
+        <NList
+          clickable
+          bordered
+        >
+          <NListItem
+            v-for="item in useAuth.biliTokens"
+            :key="item.token"
+            @click="switchAuth(item.token)"
+          >
+            <NFlex align="center">
+              {{ item.name }} - {{ item.uId }}
+            </NFlex>
           </NListItem>
         </NList>
       </NCard>
     </NLayoutContent>
-    <NLayoutContent v-else-if="!useAuth.currentToken" style="height: 100vh">
-      <NAlert v-if="useAuth.isInvalid" type="error"> 当前登录的 Bilibili 账号已失效 </NAlert>
-      <NResult status="error" title="你还未进行过B站账户验证" description="请先进行认证" style="padding-top: 64px">
+    <NLayoutContent
+      v-else-if="!useAuth.currentToken"
+      style="height: 100vh"
+    >
+      <NAlert
+        v-if="useAuth.isInvalid"
+        type="error"
+      >
+        当前登录的 Bilibili 账号已失效
+      </NAlert>
+      <NResult
+        status="error"
+        title="你还未进行过B站账户验证"
+        description="请先进行认证"
+        style="padding-top: 64px"
+      >
         <template #footer>
-          <NButton type="primary" @click="$router.push({ name: 'bili-auth' })">去认证</NButton>
+          <NButton
+            type="primary"
+            @click="$router.push({ name: 'bili-auth' })"
+          >
+            去认证
+          </NButton>
         </template>
       </NResult>
     </NLayoutContent>
     <template v-else>
-      <NLayoutHeader style="padding: 10px" bordered>
+      <NLayoutHeader
+        style="padding: 10px"
+        bordered
+      >
         <NFlex justify="center">
-          <NText style="font-size: 24px"> 认证用户个人中心 </NText>
+          <NText style="font-size: 24px">
+            认证用户个人中心
+          </NText>
         </NFlex>
       </NLayoutHeader>
       <NLayoutContent content-style="padding: 24px;">
-        <NFlex align="center" justify="center">
+        <NFlex
+          align="center"
+          justify="center"
+        >
           <div style="max-width: 95vw; width: 1200px">
             <NCard title="我的信息">
-              <NDescriptions label-placement="left" bordered size="small" :column="2">
-                <NDescriptionsItem label="用户名" style="min-width: 100px;">
+              <NDescriptions
+                label-placement="left"
+                bordered
+                size="small"
+                :column="2"
+              >
+                <NDescriptionsItem
+                  label="用户名"
+                  style="min-width: 100px;"
+                >
                   {{ biliAuth.name ?? '未知' }}
                 </NDescriptionsItem>
                 <NDescriptionsItem label="UserId">
@@ -180,10 +239,27 @@ onMounted(async () => {
               </NDescriptions>
             </NCard>
             <NDivider />
-            <NTabs v-if="hash" v-model:value="hash" default-value="points" animated>
-              <NTabPane name="points" tab="我的积分" display-directive="show:lazy" @vue:mounted="onAllPointPaneMounted">
+            <NTabs
+              v-if="hash"
+              v-model:value="hash"
+              default-value="points"
+              animated
+            >
+              <NTabPane
+                name="points"
+                tab="我的积分"
+                display-directive="show:lazy"
+                @vue:mounted="onAllPointPaneMounted"
+              >
                 <NDivider style="margin-top: 10px" />
-                <NButton style="margin-bottom: 10px" @click="getAllPoints()" size="small" type="primary">刷新</NButton>
+                <NButton
+                  style="margin-bottom: 10px"
+                  size="small"
+                  type="primary"
+                  @click="getAllPoints()"
+                >
+                  刷新
+                </NButton>
                 <NDivider />
                 <NFlex justify="center">
                   <NDataTable
@@ -196,15 +272,27 @@ onMounted(async () => {
                   />
                 </NFlex>
               </NTabPane>
-              <NTabPane name="orders" tab="我的订单" display-directive="show:lazy">
+              <NTabPane
+                name="orders"
+                tab="我的订单"
+                display-directive="show:lazy"
+              >
                 <NDivider style="margin-top: 10px" />
                 <PointOrderView />
               </NTabPane>
-              <NTabPane name="histories" tab="积分记录" display-directive="show:lazy">
+              <NTabPane
+                name="histories"
+                tab="积分记录"
+                display-directive="show:lazy"
+              >
                 <NDivider style="margin-top: 10px" />
                 <PointUserHistoryView />
               </NTabPane>
-              <NTabPane name="settings" tab="设置" display-directive="show:lazy">
+              <NTabPane
+                name="settings"
+                tab="设置"
+                display-directive="show:lazy"
+              >
                 <NDivider style="margin-top: 10px" />
                 <PointUserSettings />
               </NTabPane>

src/views/pointViews/PointUserSettings.vue

@@ -232,26 +232,55 @@ function logout() {
 
 <template>
   <NSpin :show="useAuth.isLoading">
-    <NFlex justify="center" align="center">
-      <NCard title="更多" embedded>
+    <NFlex
+      justify="center"
+      align="center"
+    >
+      <NCard
+        title="更多"
+        embedded
+      >
         <NCollapse>
-          <NCollapseItem title="收货地址" name="1">
+          <NCollapseItem
+            title="收货地址"
+            name="1"
+          >
             <NFlex vertical>
-              <NButton @click="onOpenAddressModal" type="primary"> 添加地址 </NButton>
-              <NList size="small" bordered>
-                <NListItem v-for="address in biliAuth.address" :key="address.id">
+              <NButton
+                type="primary"
+                @click="onOpenAddressModal"
+              >
+                添加地址
+              </NButton>
+              <NList
+                size="small"
+                bordered
+              >
+                <NListItem
+                  v-for="address in biliAuth.address"
+                  :key="address.id"
+                >
                   <AddressDisplay :address="address">
                     <template #actions>
-                      <NButton size="small" @click="() => {
-                        currentAddress = address
-                        showAddressModal = true
-                      }
-                        " type="info">
+                      <NButton
+                        size="small"
+                        type="info"
+                        @click="() => {
+                          currentAddress = address
+                          showAddressModal = true
+                        }
+                        "
+                      >
                         修改
                       </NButton>
                       <NPopconfirm @positive-click="() => deleteAddress(address?.id ?? '')">
                         <template #trigger>
-                          <NButton size="small" type="error"> 删除 </NButton>
+                          <NButton
+                            size="small"
+                            type="error"
+                          >
+                            删除
+                          </NButton>
                         </template>
                         确定要删除这个收货信息吗?
                       </NPopconfirm>
@@ -261,75 +290,191 @@ function logout() {
               </NList>
             </NFlex>
           </NCollapseItem>
-          <NCollapseItem title="登录链接" name="2">
-            <NInput type="textarea" :value="`${CURRENT_HOST}bili-user?auth=` + useAuth.biliToken" readonly />
+          <NCollapseItem
+            title="登录链接"
+            name="2"
+          >
+            <NInput
+              type="textarea"
+              :value="`${CURRENT_HOST}bili-user?auth=` + useAuth.biliToken"
+              readonly
+            />
           </NCollapseItem>
         </NCollapse>
       </NCard>
-      <NCard title="账号操作" embedded>
+      <NCard
+        title="账号操作"
+        embedded
+      >
         <NFlex>
           <NPopconfirm @positive-click="logout">
             <template #trigger>
-              <NButton type="warning" size="small"> 登出 </NButton>
+              <NButton
+                type="warning"
+                size="small"
+              >
+                登出
+              </NButton>
             </template>
             确定要登出吗?
           </NPopconfirm>
         </NFlex>
         <NDivider> 切换账号 </NDivider>
-        <NList clickable bordered>
-          <NListItem v-for="item in useAuth.biliTokens" :key="item.token" @click="switchAuth(item.token)">
+        <NList
+          clickable
+          bordered
+        >
+          <NListItem
+            v-for="item in useAuth.biliTokens"
+            :key="item.token"
+            @click="switchAuth(item.token)"
+          >
             <NFlex align="center">
-              <NTag v-if="useAuth.biliToken == item.token" type="info"> 当前账号 </NTag>
+              <NTag
+                v-if="useAuth.biliToken == item.token"
+                type="info"
+              >
+                当前账号
+              </NTag>
               {{ item.name }}
-              <NDivider vertical style="margin: 0" />
-              <NText depth="3"> {{ item.uId }} </NText>
+              <NDivider
+                vertical
+                style="margin: 0"
+              />
+              <NText depth="3">
+                {{ item.uId }}
+              </NText>
             </NFlex>
           </NListItem>
         </NList>
       </NCard>
     </NFlex>
   </NSpin>
-  <NModal v-model:show="showAddressModal" preset="card" style="width: 800px; max-width: 90vw; height: auto"
-    title="添加/更新地址">
-    <NSpin v-if="currentAddress" :show="isLoading">
-      <NForm ref="formRef" :model="currentAddress" :rules="rules">
-        <NFormItem label="地址" path="area" required>
+  <NModal
+    v-model:show="showAddressModal"
+    preset="card"
+    style="width: 800px; max-width: 90vw; height: auto"
+    title="添加/更新地址"
+  >
+    <NSpin
+      v-if="currentAddress"
+      :show="isLoading"
+    >
+      <NForm
+        ref="formRef"
+        :model="currentAddress"
+        :rules="rules"
+      >
+        <NFormItem
+          label="地址"
+          path="area"
+          required
+        >
           <NFlex style="width: 100%">
-            <NSelect v-model:value="currentAddress.province" :options="provinceOptions"
-              @update:value="onAreaSelectChange(0)" placeholder="请选择省" style="width: 100px" filterable />
-            <NSelect v-model:value="currentAddress.city" :key="currentAddress.province"
-              :options="cityOptions(currentAddress.province)" :disabled="!currentAddress?.province"
-              @update:value="onAreaSelectChange(1)" placeholder="请选择市" style="width: 100px" filterable />
-            <NSelect v-model:value="currentAddress.district" :key="currentAddress.city"
-              :options="districtOptions(currentAddress.province, currentAddress.city)" :disabled="!currentAddress?.city"
-              @update:value="onAreaSelectChange(2)" placeholder="请选择区" style="width: 100px" filterable />
-            <NSelect v-model:value="currentAddress.street" :key="currentAddress.district"
+            <NSelect
+              v-model:value="currentAddress.province"
+              :options="provinceOptions"
+              placeholder="请选择省"
+              style="width: 100px"
+              filterable
+              @update:value="onAreaSelectChange(0)"
+            />
+            <NSelect
+              :key="currentAddress.province"
+              v-model:value="currentAddress.city"
+              :options="cityOptions(currentAddress.province)"
+              :disabled="!currentAddress?.province"
+              placeholder="请选择市"
+              style="width: 100px"
+              filterable
+              @update:value="onAreaSelectChange(1)"
+            />
+            <NSelect
+              :key="currentAddress.city"
+              v-model:value="currentAddress.district"
+              :options="districtOptions(currentAddress.province, currentAddress.city)"
+              :disabled="!currentAddress?.city"
+              placeholder="请选择区"
+              style="width: 100px"
+              filterable
+              @update:value="onAreaSelectChange(2)"
+            />
+            <NSelect
+              :key="currentAddress.district"
+              v-model:value="currentAddress.street"
               :options="streetOptions(currentAddress.province, currentAddress.city, currentAddress.district)"
-              :disabled="!currentAddress?.district" placeholder="请选择街道" style="width: 150px" filterable />
+              :disabled="!currentAddress?.district"
+              placeholder="请选择街道"
+              style="width: 150px"
+              filterable
+            />
           </NFlex>
         </NFormItem>
-        <NFormItem label="详细地址" path="address" required>
-          <NInput v-model:value="currentAddress.address" placeholder="详细地址" type="textarea" />
+        <NFormItem
+          label="详细地址"
+          path="address"
+          required
+        >
+          <NInput
+            v-model:value="currentAddress.address"
+            placeholder="详细地址"
+            type="textarea"
+          />
         </NFormItem>
-        <NFormItem label="联系电话" path="phone" required>
-          <NInputNumber v-model:value="currentAddress.phone" placeholder="联系电话" :show-button="false"
-            style="width: 200px" />
+        <NFormItem
+          label="联系电话"
+          path="phone"
+          required
+        >
+          <NInputNumber
+            v-model:value="currentAddress.phone"
+            placeholder="联系电话"
+            :show-button="false"
+            style="width: 200px"
+          />
         </NFormItem>
-        <NFormItem label="联系人" path="name" required>
-          <NInput v-model:value="currentAddress.name" placeholder="联系人" style="max-width: 150px" />
+        <NFormItem
+          label="联系人"
+          path="name"
+          required
+        >
+          <NInput
+            v-model:value="currentAddress.name"
+            placeholder="联系人"
+            style="max-width: 150px"
+          />
         </NFormItem>
-        <NFormItem label="用户协议" required>
+        <NFormItem
+          label="用户协议"
+          required
+        >
           <NCheckbox v-model:checked="userAgree">
             阅读并同意本站
-            <NButton text @click="showAgreementModal = true" type="info"> 用户协议 </NButton>
+            <NButton
+              text
+              type="info"
+              @click="showAgreementModal = true"
+            >
+              用户协议
+            </NButton>
           </NCheckbox>
         </NFormItem>
-        <NButton @click="updateAddress" type="info" :loading="isLoading"> 保存 </NButton>
+        <NButton
+          type="info"
+          :loading="isLoading"
+          @click="updateAddress"
+        >
+          保存
+        </NButton>
       </NForm>
     </NSpin>
   </NModal>
-  <NModal v-model:show="showAgreementModal" title="用户协议" preset="card"
-    style="width: 800px; max-width: 90vw; height: 90vh">
+  <NModal
+    v-model:show="showAgreementModal"
+    title="用户协议"
+    preset="card"
+    style="width: 800px; max-width: 90vw; height: 90vh"
+  >
     <NScrollbar style="height: 80vh">
       <UserAgreement />
     </NScrollbar>