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

src/views/manage/Setting_PaymentView.vue

@@ -1,30 +1,53 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
-import { ConsumptionTypes } from '@/api/models/consumption';
-import { NFlex, NIcon, NLayout, NLayoutSider, NMenu, NTabPane, NTabs } from 'naive-ui';
-import { h, onMounted } from 'vue';
-import { useConsumptionSettingStore } from '@/store/usePaymentSettingStore';
-import { CheckmarkCircle24Filled } from '@vicons/fluent';
+import { useAccount } from '@/api/account'
+import { ConsumptionTypes } from '@/api/models/consumption'
+import {
+  NFlex,
+  NIcon,
+  NLayout,
+  NLayoutSider,
+  NMenu,
+  NTabPane,
+  NTabs,
+  NDivider
+} from 'naive-ui'
+import { h, onMounted, ref, defineComponent, shallowRef } from 'vue'
+import { useConsumptionSettingStore } from '@/store/usePaymentSettingStore'
+import { CheckmarkCircle24Filled } from '@vicons/fluent'
+import { isDev } from '@/data/constants'
+
+const DanmakuStorageView = defineComponent({
+  setup() {
+    return () => h('div', [
+      h(NDivider),
+      h('div', 'WIP...')
+    ])
+  }
+})
 
 const accountInfo = useAccount()
 const useConsumption = useConsumptionSettingStore()
+const currentComponent = shallowRef(DanmakuStorageView)
 
-const { } = defineProps<{
+const enabledIcon = h(NIcon, {
+  component: CheckmarkCircle24Filled,
+  color: 'lightgrey'
+})
+const disabledIcon = h(NIcon, {
+  component: CheckmarkCircle24Filled,
+  color: 'red'
+})
 
-}>()
-const enabledIcon = h(NIcon, { component: CheckmarkCircle24Filled, color: 'lightgrey' })
-const disabledIcon = h(NIcon, { component: CheckmarkCircle24Filled, color: 'red' })
-const tabDisplay = (type: ConsumptionTypes) => {
+function tabDisplay(type: ConsumptionTypes) {
   const setting = useConsumption.GetSetting(type)
-  return h(NFlex, {}, () => [
-    h(NIcon, { component: setting.isEnabled ? enabledIcon : disabledIcon, }),
-    h('span', {}, setting.isEnabled ? '已启用' : '未启用'),
-  ])
+  switch (type) {
+    case ConsumptionTypes.DanmakuStorage:
+      return DanmakuStorageView
+  }
 }
 
 async function getAccountPaymentSettings() {
   try {
-
   } catch (error) {
     console.error(error)
   }
@@ -32,18 +55,18 @@ async function getAccountPaymentSettings() {
 
 onMounted(() => {
   getAccountPaymentSettings()
-});
+  currentComponent.value = tabDisplay(ConsumptionTypes.DanmakuStorage)
+})
 </script>
 
 <template>
-  <div v-if="true">
+  <div v-if="true && !isDev">
     WIP...
   </div>
-  <NTabs v-else animated type="line">
-    <NTabPane name="弹幕储存" tab="弹幕储存">
-      <template #tab>
-        <component :is="tabDisplay(ConsumptionTypes.DanmakuStorage)" />
-      </template>
+  <NTabs>
+    <NTabPane name="overview" tab="概览">
+      {{ accountInfo.point }}
     </NTabPane>
   </NTabs>
+  <component :is="tabDisplay(ConsumptionTypes.DanmakuStorage)" />
 </template>