chore: 优化私有图片上传和查看逻辑

packages/ui/certd-client/src/views/certd/wallet/crud-withdraw.tsx

@@ -1,6 +1,12 @@
 import { CreateCrudOptionsRet, dict, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import * as api from "./api";
 import PriceInput from "/@/views/sys/suite/product/price-input.vue";
+import { useUserStore } from "/@/store/user";
+
+function buildPrivateFileUrl(key: string) {
+  const userStore = useUserStore();
+  return `/api/basic/file/download?token=${userStore.getToken}&key=${encodeURIComponent(key)}`;
+}
 
 export default function (): CreateCrudOptionsRet {
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
@@ -59,7 +65,7 @@ export default function (): CreateCrudOptionsRet {
               if (!value) {
                 return "-";
               }
-              return <a-image src={`/api/basic/file/download?key=${value}`} width={48} />;
+              return <a-image src={buildPrivateFileUrl(value)} width={48} />;
             },
           },
         },

packages/ui/certd-client/src/views/certd/wallet/index.vue

@@ -14,9 +14,11 @@
       <div class="wallet-action-panel">
         <div class="wallet-action-title">提现操作</div>
         <div class="wallet-action-content">
-          <a-button type="primary" @click="openWithdrawSetting">提现设置</a-button>
-          <a-input-number v-model:value="withdrawAmountYuan" class="withdraw-amount-input" :min="0" addon-before="提现金额" addon-after="元" />
-          <a-button @click="applyWithdraw">申请提现</a-button>
+          <a-button class="wallet-action-button" type="primary" @click="openWithdrawSetting">提现设置</a-button>
+          <div class="withdraw-amount-field">
+            <a-input-number v-model:value="withdrawAmountYuan" class="withdraw-amount-input" :min="0" addon-before="提现金额" addon-after="元" />
+          </div>
+          <a-button class="wallet-action-button" type="primary" @click="applyWithdraw">申请提现</a-button>
         </div>
       </div>
 
@@ -62,6 +64,10 @@ function moneyText(amount: number) {
   return `¥ ${amountToYuan(amount)}`;
 }
 
+function buildPrivateFileUrl(key: string) {
+  return `/api/basic/file/download?token=${userStore.getToken}&key=${encodeURIComponent(key)}`;
+}
+
 const summaryCards = computed(() => [
   {
     key: "availableAmount",
@@ -139,6 +145,7 @@ async function openWithdrawSetting() {
         type: "cropper-uploader",
         form: {
           col: { span: 24 },
+          show: compute(({ form }) => form.channel !== "bank"),
           component: {
             vModel: "modelValue",
             valueType: "key",
@@ -160,7 +167,7 @@ async function openWithdrawSetting() {
               },
             },
             buildUrl(key: string) {
-              return `/api/basic/file/download?key=` + key;
+              return buildPrivateFileUrl(key);
             },
           },
         },
@@ -176,6 +183,9 @@ async function openWithdrawSetting() {
       },
     },
     async onSubmit(form: any) {
+      if (form.channel === "bank") {
+        form.qrCode = "";
+      }
       await api.SaveWithdrawSetting(form);
       notification.success({ message: "保存成功" });
     },
@@ -303,13 +313,26 @@ onActivated(async () => {
   .wallet-action-content {
     display: flex;
     align-items: center;
+    flex: 1;
     flex-wrap: wrap;
     justify-content: flex-start;
     gap: 10px;
+    min-width: 0;
   }
 
-  .withdraw-amount-input {
-    width: 240px;
+  .wallet-action-button {
+    flex: none;
+  }
+
+  .withdraw-amount-field {
+    flex: 0 1 280px;
+    min-width: 240px;
+  }
+
+  .withdraw-amount-field,
+  .withdraw-amount-input,
+  .withdraw-amount-input.ant-input-number-group-wrapper {
+    width: 100%;
   }
 
   .wallet-tabs {
@@ -359,9 +382,15 @@ onActivated(async () => {
       justify-content: flex-start;
     }
 
-    .withdraw-amount-input {
+    .wallet-action-button,
+    .withdraw-amount-field {
       width: 100%;
     }
+
+    .withdraw-amount-field {
+      flex-basis: auto;
+      min-width: 0;
+    }
   }
 }
 </style>

packages/ui/certd-client/src/views/sys/suite/invite/crud-withdraw.tsx

@@ -3,6 +3,12 @@ import { notification } from "ant-design-vue";
 import * as api from "./api";
 import PriceInput from "/@/views/sys/suite/product/price-input.vue";
 import { useFormDialog } from "/@/use/use-dialog";
+import { useUserStore } from "/@/store/user";
+
+function buildPrivateFileUrl(key: string) {
+  const userStore = useUserStore();
+  return `/api/basic/file/download?token=${userStore.getToken}&key=${encodeURIComponent(key)}`;
+}
 
 export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const { openFormDialog } = useFormDialog();
@@ -19,7 +25,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
         <a-descriptions-item label="账号">{row.account || "-"}</a-descriptions-item>
         <a-descriptions-item label="开户行名称">{row.bankName || "-"}</a-descriptions-item>
         <a-descriptions-item label="收款二维码" span={2}>
-          {row.qrCode ? <a-image src={`/api/basic/file/download?key=${row.qrCode}`} width={160} /> : <span>-</span>}
+          {row.qrCode ? <a-image src={buildPrivateFileUrl(row.qrCode)} width={160} /> : <span>-</span>}
         </a-descriptions-item>
         <a-descriptions-item label="提现金额">{row.amount / 100} 元</a-descriptions-item>
       </a-descriptions>
@@ -157,7 +163,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
               if (!value) {
                 return "-";
               }
-              return <a-image src={`/api/basic/file/download?key=${value}`} width={48} />;
+              return <a-image src={buildPrivateFileUrl(value)} width={48} />;
             },
           },
         },