feat: 更新依赖版本，添加文件导入上分组件及其在用户页面的集成

package.json

@@ -51,7 +51,7 @@
     "@better-scroll/core": "2.5.1",
     "@elysiajs/eden": "^1.4.5",
     "@iconify/vue": "5.0.0",
-    "@riwa/api-types": "http://192.168.1.2:9538/api/capp-eden-0.0.43.tgz",
+    "@riwa/api-types": "http://192.168.1.2:9538/api/capp-eden-0.0.44.tgz",
     "@sa/axios": "workspace:*",
     "@sa/color": "workspace:*",
     "@sa/hooks": "workspace:*",

pnpm-lock.yaml

@@ -18,8 +18,8 @@ importers:
         specifier: 5.0.0
         version: 5.0.0(vue@3.5.25(typescript@5.9.3))
       '@riwa/api-types':
-        specifier: http://192.168.1.2:9538/api/capp-eden-0.0.43.tgz
+        specifier: http://192.168.1.2:9538/api/capp-eden-0.0.44.tgz
-        version: '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.43.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
+        version: '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.44.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
       '@sa/axios':
         specifier: workspace:*
         version: link:packages/axios
@@ -496,9 +496,9 @@ packages:
   '@borewit/text-codec@0.1.1':
     resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==}
 
-  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.43.tgz':
+  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.44.tgz':
-    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.43.tgz}
+    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.44.tgz}
-    version: 0.0.43
+    version: 0.0.44
     peerDependencies:
       '@elysiajs/eden': ^1.4.6
 
@@ -4871,7 +4871,7 @@ snapshots:
 
   '@borewit/text-codec@0.1.1': {}
 
-  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.43.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
+  '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.44.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
     dependencies:
       '@elysiajs/eden': 1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))
 

src/components/upload/index.vue

@@ -1,14 +1,12 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import type { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui';
-import { client, safeClient } from '@/service/api';
 import { type UploadFetchOptions, uploadToS3 } from '@/utils/aws/s3';
 
 defineOptions({ name: 'UploadS3' });
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: string[];
     label?: string;
     placeholder?: string;
     accept?: string;
@@ -18,7 +16,6 @@ const props = withDefaults(
     fetchOptions: Partial<UploadFetchOptions>;
   }>(),
   {
-    modelValue: () => [],
     accept: '*/*',
     multiple: true,
     maxSize: 10,
@@ -28,19 +25,17 @@ const props = withDefaults(
   }
 );
 
-const emit = defineEmits<{
+const model = defineModel({ type: Array as () => string[], default: () => [] });
-  (e: 'update:modelValue', value: string[]): void;
-}>();
 
 const fileList = ref<UploadFileInfo[]>([]);
 const loading = ref(false);
 
 async function initFileList() {
-  const fileIds = props.modelValue.filter(url => url && url.trim() !== '');
+  const fileIds = model.value.filter(url => url && url.trim() !== '');
-  if (!props.modelValue || fileIds.length === 0) {
+  if (!model.value || fileIds.length === 0) {
     fileList.value = [];
   } else {
-    fileList.value = props.modelValue.map(url => ({
+    fileList.value = model.value.map(url => ({
       id: url,
       name: url.split('/').pop() || 'file',
       url,
@@ -50,19 +45,15 @@ async function initFileList() {
 }
 
 watch(
-  () => props.modelValue,
+  () => model.value,
   (newVal, oldVal) => {
     if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
       initFileList();
     }
   },
-  { deep: true }
+  { deep: true, immediate: true }
 );
 
-onMounted(() => {
-  initFileList();
-});
-
 async function handleCustomRequest({ file, onProgress, onFinish, onError }: UploadCustomRequestOptions) {
   try {
     const fileSizeMB = file.file!.size / 1024 / 1024;
@@ -96,8 +87,7 @@ async function handleCustomRequest({ file, onProgress, onFinish, onError }: Uplo
     file.status = 'finished';
     file.url = res.publicUrl;
 
-    const values = [...props.modelValue, res.publicUrl].filter(Boolean);
+    model.value = [...model.value, res.publicUrl].filter(Boolean);
-    emit('update:modelValue', values);
 
     onFinish();
     window.$message?.success(`文件 ${file.name} 上传成功`);
@@ -108,9 +98,9 @@ async function handleCustomRequest({ file, onProgress, onFinish, onError }: Uplo
 
 function handleRemove({ file }: { file: UploadFileInfo }) {
   // 只删除上传成功的文件（有有效 id 的文件）
-  if (file.url && typeof file.url === 'string' && props.modelValue.includes(file.url)) {
+  if (file.url && typeof file.url === 'string' && model.value.includes(file.url)) {
-    const newFileIds = props.modelValue.filter(url => url !== file.url);
+    const newFileIds = model.value.filter(url => url !== file.url);
-    emit('update:modelValue', newFileIds);
+    model.value = newFileIds;
   }
   return true;
 }
@@ -139,13 +129,16 @@ function beforeUpload({ file }: { file: UploadFileInfo }) {
         :on-before-upload="beforeUpload"
         list-type="text"
         show-download-button
+        directory-dnd
       >
+        <slot>
           <NButton>
             <template #icon>
               <icon-ic-round-upload class="text-icon" />
             </template>
             {{ placeholder || '选择文件' }}
           </NButton>
+        </slot>
       </NUpload>
     </NSpin>
     <div class="mt-2 text-12px text-gray-400">

src/service/api/client.ts

@@ -14,7 +14,6 @@ const client = treaty<App>(baseURL, {
   headers() {
     const token = localStg.get('token');
     return {
-      'Content-Type': 'application/json',
       Authorization: token ? `Bearer ${token}` : ''
     };
   }

src/typings/components.d.ts

@@ -63,6 +63,7 @@ declare module 'vue' {
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
+    NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
@@ -71,6 +72,7 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NP: typeof import('naive-ui')['NP']
     NPopover: typeof import('naive-ui')['NPopover']
     NResult: typeof import('naive-ui')['NResult']
     NRow: typeof import('naive-ui')['NRow']
@@ -82,8 +84,10 @@ declare module 'vue' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
     NTabs: typeof import('naive-ui')['NTabs']
+    NText: typeof import('naive-ui')['NText']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
+    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     NWatermark: typeof import('naive-ui')['NWatermark']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
@@ -156,6 +160,7 @@ declare global {
   const NFormItemGi: typeof import('naive-ui')['NFormItemGi']
   const NGi: typeof import('naive-ui')['NGi']
   const NGrid: typeof import('naive-ui')['NGrid']
+  const NIcon: typeof import('naive-ui')['NIcon']
   const NInput: typeof import('naive-ui')['NInput']
   const NInputGroup: typeof import('naive-ui')['NInputGroup']
   const NInputNumber: typeof import('naive-ui')['NInputNumber']
@@ -164,6 +169,7 @@ declare global {
   const NMessageProvider: typeof import('naive-ui')['NMessageProvider']
   const NModal: typeof import('naive-ui')['NModal']
   const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+  const NP: typeof import('naive-ui')['NP']
   const NPopover: typeof import('naive-ui')['NPopover']
   const NResult: typeof import('naive-ui')['NResult']
   const NRow: typeof import('naive-ui')['NRow']
@@ -175,8 +181,10 @@ declare global {
   const NSwitch: typeof import('naive-ui')['NSwitch']
   const NTab: typeof import('naive-ui')['NTab']
   const NTabs: typeof import('naive-ui')['NTabs']
+  const NText: typeof import('naive-ui')['NText']
   const NTooltip: typeof import('naive-ui')['NTooltip']
   const NUpload: typeof import('naive-ui')['NUpload']
+  const NUploadDragger: typeof import('naive-ui')['NUploadDragger']
   const NWatermark: typeof import('naive-ui')['NWatermark']
   const PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
   const ReloadButton: typeof import('./../components/common/reload-button.vue')['default']

src/views/user/components/adjust-wallet-with-file.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui';
+import { client, safeClient } from '@/service/api';
+import { localStg } from '@/utils/storage';
+import { type UploadFetchOptions, uploadToS3 } from '@/utils/aws/s3';
+import IconParkOutlineUpload from '~icons/icon-park-outline/upload';
+
+const downloading = ref(false);
+const loading = ref(false);
+const fileId = ref('');
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+async function handleDownloadTemplate() {
+  downloading.value = true;
+  try {
+    const res = await client.api.admin.wallet_import.template.get();
+    // debugger;
+    const result = await fetch('http://192.168.1.2:9538/api/admin/wallet_import/template', {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${localStg.get('token') || ''}`
+      }
+    });
+    const blob = await result.blob();
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `批量上分模版-${new Date().getTime()}.xlsx`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+    window.$message?.success('模板下载成功');
+    // if (result.data?.value) {
+    //   let blob: Blob;
+    //   if (typeof result.data.value === 'string') {
+    //     blob = new Blob([result.data.value]);
+    //   } else {
+    //     window.$message?.error('模板下载失败');
+    //     return;
+    //   }
+
+    //   const url = window.URL.createObjectURL(blob);
+    //   const link = document.createElement('a');
+    //   link.href = url;
+    //   link.download = `批量上分模版-${new Date().getTime()}.xlsx`;
+    //   document.body.appendChild(link);
+    //   link.click();
+    //   document.body.removeChild(link);
+    //   window.URL.revokeObjectURL(url);
+    //   window.$message?.success('模板下载成功');
+    // }
+  } catch (error) {
+    window.$message?.error('模板下载失败');
+  } finally {
+    downloading.value = false;
+  }
+}
+
+async function handleCustomRequest({ file, onProgress, onFinish, onError }: UploadCustomRequestOptions) {
+  try {
+    const options: UploadFetchOptions = {
+      fileName: file.name,
+      fileSize: file.file!.size,
+      businessType: 'wallet_import'
+    };
+
+    const res = await uploadToS3(file.file as File, {
+      fetchOptions: options,
+      onProgress: percent => {
+        onProgress({ percent });
+      }
+    });
+
+    fileId.value = res.fileId;
+
+    onFinish();
+    window.$message?.success(`文件 ${file.name} 上传成功`);
+  } catch (error: any) {
+    onError();
+  }
+}
+
+function beforeUpload({ file }: { file: UploadFileInfo }) {
+  const fileSizeMB = file.file!.size / 1024 / 1024;
+  if (fileSizeMB > 100) {
+    window.$message?.error(`文件大小不能超过 100MB`);
+    return false;
+  }
+  return true;
+}
+
+async function handleSubmit() {
+  if (fileId.value === '') {
+    window.$message?.error('请先上传文件');
+    return;
+  }
+  loading.value = true;
+  await safeClient(
+    client.api.admin.wallet_import.jobs.post({
+      fileId: fileId.value
+    })
+  );
+  loading.value = false;
+  window.$message?.success('操作成功');
+  emit('close');
+}
+</script>
+
+<template>
+  <NSpace vertical class="m-10">
+    <NSpin :show="loading">
+      <NUpload
+        :max="1"
+        accept=".xlsx,.xls"
+        show-download-button
+        directory-dnd
+        :custom-request="handleCustomRequest"
+        :on-before-upload="beforeUpload"
+      >
+        <NUploadDragger>
+          <div class="mb-5">
+            <NIcon size="48" :depth="3">
+              <IconParkOutlineUpload />
+            </NIcon>
+          </div>
+          <NText class="text-sm">点击或者拖动文件到该区域来上传</NText>
+          <NP depth="3" class="mt-2">请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码</NP>
+        </NUploadDragger>
+      </NUpload>
+    </NSpin>
+    <div class="mt-2 text-12px text-gray-400">
+      <div>单个文件大小不超过 100MB</div>
+      <div>支持格式：.xlsx,.xls</div>
+    </div>
+
+    <NButton text type="primary" :loading="downloading" @click="handleDownloadTemplate">点击下载Excel模版</NButton>
+  </NSpace>
+
+  <div class="mt-16px flex justify-end gap-12px">
+    <NButton @click="emit('close')">取消</NButton>
+    <NButton type="primary" :loading="loading" @click="handleSubmit">确定</NButton>
+  </div>
+</template>
+
+<style lang="css" scoped></style>

src/views/user/index.vue

@@ -15,6 +15,7 @@ import Ledger from './components/ledger.vue';
 import Deposit from './components/deposit.vue';
 import Subscription from './components/subscription.vue';
 import AdjustWallet from './components/adjust-wallet.vue';
+import AdjustWalletWithFile from './components/adjust-wallet-with-file.vue';
 
 const dialog = useDialog();
 const message = useMessage();
@@ -294,6 +295,20 @@ function handleAdjustWallet() {
       })
   });
 }
+
+function handleAdjustWalletWithFile() {
+  const d = dialog.create({
+    title: '文件导入上分',
+    showIcon: false,
+    style: { width: '600px' },
+    content: () =>
+      h(AdjustWalletWithFile, {
+        onClose: () => {
+          d.destroy();
+        }
+      })
+  });
+}
 </script>
 
 <template>
@@ -312,7 +327,8 @@ function handleAdjustWallet() {
     }"
   >
     <template #header-operation-suffix>
-      <NButton size="small" type="primary" @click="handleAdjustWallet">一键上分</NButton>
+      <NButton size="small" type="primary" ghost @click="handleAdjustWallet">一键上分</NButton>
+      <NButton size="small" type="primary" ghost @click="handleAdjustWalletWithFile">文件导入上分</NButton>
     </template>
   </TableBase>
 </template>