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

2026-01-26 20:38:32 +07:00
parent 8651f5c0d0
commit b0473d9996
7 changed files with 202 additions and 36 deletions
--- a/package.json
+++ b/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:*",
--- a/pnpm-lock.yaml
+++ b/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
-        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)))'
+        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.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':
-    resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.43.tgz}
-    version: 0.0.43
+  '@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.44.tgz}
+    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))

--- a/src/components/upload/index.vue
+++ b/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<{
-  (e: 'update:modelValue', value: string[]): void;
-}>();
+const model = defineModel({ type: Array as () => string[], default: () => [] });

 const fileList = ref<UploadFileInfo[]>([]);
 const loading = ref(false);

 async function initFileList() {
-  const fileIds = props.modelValue.filter(url => url && url.trim() !== '');
-  if (!props.modelValue || fileIds.length === 0) {
+  const fileIds = model.value.filter(url => url && url.trim() !== '');
+  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);
-    emit('update:modelValue', values);
+    model.value = [...model.value, res.publicUrl].filter(Boolean);

    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)) {
-    const newFileIds = props.modelValue.filter(url => url !== file.url);
-    emit('update:modelValue', newFileIds);
+  if (file.url && typeof file.url === 'string' && model.value.includes(file.url)) {
+    const newFileIds = model.value.filter(url => url !== file.url);
+    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
      >
-        <NButton>
-          <template #icon>
-            <icon-ic-round-upload class="text-icon" />
-          </template>
-          {{ placeholder || '选择文件' }}
-        </NButton>
+        <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">
--- a/src/service/api/client.ts
+++ b/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}` : ''
    };
  }
--- a/src/typings/components.d.ts
+++ b/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']
--- a/src/views/user/components/adjust-wallet-with-file.vue
+++ b/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>
--- a/src/views/user/index.vue
+++ b/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>