From 26978de65cce6196f481a65a59b5d09d42b247fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Mon, 26 Jan 2026 22:55:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(shop):=20=E5=AE=8C=E5=96=84=E5=88=86?=
 =?UTF-8?q?=E9=94=80=E5=95=86=E4=B8=9A=E5=8A=A1=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在ShopDealerCapital模型中新增分销商昵称字段
- 在ShopDealerUser模型中新增类型和头像字段
- 更新资本流水页面显示分销商昵称和用户ID组合信息
- 修改收益列标题为收益类型并隐藏对方用户列
- 更新分销商用户页面类型标签文本并添加二维码生成功能
- 添加二维码预览弹窗支持复制链接和打开原图
- 优化分销商用户编辑弹窗界面布局和字段验证
- 新增关联用户选择功能并完善表单验证规则
- 添加支付密码管理和佣金信息展示功能
---
 src/api/shop/shopDealerCapital/model/index.ts |   2 +
 src/api/shop/shopDealerUser/model/index.ts    |   4 +
 .../shopDealerCapital/components/search.vue   |  16 +-
 src/views/shop/shopDealerCapital/index.vue    |  18 +-
 .../components/shopDealerUserEdit.vue         | 428 ++++++++++++------
 src/views/shop/shopDealerUser/index.vue       |  65 ++-
 6 files changed, 363 insertions(+), 170 deletions(-)

diff --git a/src/api/shop/shopDealerCapital/model/index.ts b/src/api/shop/shopDealerCapital/model/index.ts
index b62e6e5..bc9bd11 100644
--- a/src/api/shop/shopDealerCapital/model/index.ts
+++ b/src/api/shop/shopDealerCapital/model/index.ts
@@ -8,6 +8,8 @@ export interface ShopDealerCapital {
   id?: number;
   // 分销商用户ID
   userId?: number;
+  // 分销商昵称
+  nickName?: string;
   // 订单ID
   orderId?: number;
   // 订单编号
diff --git a/src/api/shop/shopDealerUser/model/index.ts b/src/api/shop/shopDealerUser/model/index.ts
index d443ef2..4f57555 100644
--- a/src/api/shop/shopDealerUser/model/index.ts
+++ b/src/api/shop/shopDealerUser/model/index.ts
@@ -6,8 +6,12 @@ import type { PageParam } from '@/api';
 export interface ShopDealerUser {
   // 主键ID
   id?: number;
+  // 类型 0经销商 1企业 2集团
+  type?: number;
   // 自增ID
   userId?: number;
+  // 头像
+  avatar?: string;
   // 姓名
   realName?: string;
   // 手机号
diff --git a/src/views/shop/shopDealerCapital/components/search.vue b/src/views/shop/shopDealerCapital/components/search.vue
index ad1a2c6..218dfcd 100644
--- a/src/views/shop/shopDealerCapital/components/search.vue
+++ b/src/views/shop/shopDealerCapital/components/search.vue
@@ -57,12 +57,12 @@
   const handleExport = async () => {
     const array: (string | number)[][] = [
       [
-        '用户ID',
-        '流动类型',
+        '订单号',
+        '用户',
+        '收益类型',
         '金额',
-        '订单编号',
-        '对方用户ID',
-        `创建时间`,
+        '描述',
+        '创建时间',
         '租户ID'
       ]
     ];
@@ -73,11 +73,11 @@
         list.value = data?.list || [];
         list.value?.forEach((d: ShopDealerCapital) => {
           array.push([
-            `${d.userId}`,
+            `${d.orderNo}`,
+            `${d.nickName}(${d.userId})`,
             `${d.flowType == 10 ? '佣金收入' : ''}`,
             `${d.money}`,
-            `${d.orderNo}`,
-            `${d.toUserId}`,
+            `${d.comments}`,
             `${d.createTime}`,
             `${d.tenantId}`
           ]);
diff --git a/src/views/shop/shopDealerCapital/index.vue b/src/views/shop/shopDealerCapital/index.vue
index e051abc..c8b1752 100644
--- a/src/views/shop/shopDealerCapital/index.vue
+++ b/src/views/shop/shopDealerCapital/index.vue
@@ -24,7 +24,7 @@
             <a-image :src="record.image" :width="50" />
           </template>
           <template v-if="column.key === 'userId'">
-            <div>{{ record.nickName }}</div>
+            <div>{{ record.nickName }}({{ record.userId }})</div>
           </template>
           <template v-if="column.key === 'status'">
             <a-tag v-if="record.status === 0" color="green">显示</a-tag>
@@ -135,7 +135,7 @@
       fixed: 'left'
     },
     {
-      title: '收益',
+      title: '收益类型',
       dataIndex: 'flowType',
       key: 'flowType',
       align: 'center',
@@ -177,13 +177,13 @@
         };
       }
     },
-    {
-      title: '对方用户',
-      dataIndex: 'toUserId',
-      key: 'toUserId',
-      align: 'center',
-      customRender: ({ text }) => (text ? `ID: ${text}` : '-')
-    },
+    // {
+    //   title: '对方用户',
+    //   dataIndex: 'toUserId',
+    //   key: 'toUserId',
+    //   align: 'center',
+    //   customRender: ({ text }) => (text ? `ID: ${text}` : '-')
+    // },
     {
       title: '描述',
       dataIndex: 'comments',
diff --git a/src/views/shop/shopDealerUser/components/shopDealerUserEdit.vue b/src/views/shop/shopDealerUser/components/shopDealerUserEdit.vue
index 502f42b..14648fc 100644
--- a/src/views/shop/shopDealerUser/components/shopDealerUserEdit.vue
+++ b/src/views/shop/shopDealerUser/components/shopDealerUserEdit.vue
@@ -1,11 +1,12 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="800"
+    :width="900"
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
-    :title="isUpdate ? '编辑分销商用户记录表' : '添加分销商用户记录表'"
+    :confirm-loading="loading"
+    :title="isUpdate ? '编辑分销商用户' : '添加分销商用户'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
     @ok="save"
@@ -19,150 +20,176 @@
         styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
     >
-      <a-form-item label="类型 0经销商 1企业 2集团" name="type">
-        <a-input
-          allow-clear
-          placeholder="请输入类型 0经销商 1企业 2集团"
-          v-model:value="form.type"
-        />
-      </a-form-item>
-      <a-form-item label="自增ID" name="userId">
-        <a-input
-          allow-clear
-          placeholder="请输入自增ID"
-          v-model:value="form.userId"
-        />
-      </a-form-item>
-      <a-form-item label="姓名" name="realName">
-        <a-input
-          allow-clear
-          placeholder="请输入姓名"
-          v-model:value="form.realName"
-        />
-      </a-form-item>
-      <a-form-item label="手机号" name="mobile">
-        <a-input
-          allow-clear
-          placeholder="请输入手机号"
-          v-model:value="form.mobile"
-        />
-      </a-form-item>
-      <a-form-item label="支付密码" name="payPassword">
-        <a-input
-          allow-clear
-          placeholder="请输入支付密码"
-          v-model:value="form.payPassword"
-        />
-      </a-form-item>
-      <a-form-item label="当前可提现佣金" name="money">
-        <a-input
-          allow-clear
-          placeholder="请输入当前可提现佣金"
-          v-model:value="form.money"
-        />
-      </a-form-item>
-      <a-form-item label="已冻结佣金" name="freezeMoney">
-        <a-input
-          allow-clear
-          placeholder="请输入已冻结佣金"
-          v-model:value="form.freezeMoney"
-        />
-      </a-form-item>
-      <a-form-item label="累积提现佣金" name="totalMoney">
-        <a-input
-          allow-clear
-          placeholder="请输入累积提现佣金"
-          v-model:value="form.totalMoney"
-        />
-      </a-form-item>
-      <a-form-item label="收益基数" name="rate">
-        <a-input
-          allow-clear
-          placeholder="请输入收益基数"
-          v-model:value="form.rate"
-        />
-      </a-form-item>
-      <a-form-item label="单价" name="price">
-        <a-input
-          allow-clear
-          placeholder="请输入单价"
-          v-model:value="form.price"
-        />
-      </a-form-item>
-      <a-form-item label="推荐人用户ID" name="refereeId">
-        <a-input
-          allow-clear
-          placeholder="请输入推荐人用户ID"
-          v-model:value="form.refereeId"
-        />
-      </a-form-item>
-      <a-form-item label="成员数量(一级)" name="firstNum">
-        <a-input
-          allow-clear
-          placeholder="请输入成员数量(一级)"
-          v-model:value="form.firstNum"
-        />
-      </a-form-item>
-      <a-form-item label="成员数量(二级)" name="secondNum">
-        <a-input
-          allow-clear
-          placeholder="请输入成员数量(二级)"
-          v-model:value="form.secondNum"
-        />
-      </a-form-item>
-      <a-form-item label="成员数量(三级)" name="thirdNum">
-        <a-input
-          allow-clear
-          placeholder="请输入成员数量(三级)"
-          v-model:value="form.thirdNum"
-        />
-      </a-form-item>
-      <a-form-item label="专属二维码" name="qrcode">
-        <a-input
-          allow-clear
-          placeholder="请输入专属二维码"
-          v-model:value="form.qrcode"
-        />
-      </a-form-item>
-      <a-form-item label="备注" name="comments">
-        <a-textarea
-          :rows="4"
-          :maxlength="200"
-          placeholder="请输入描述"
-          v-model:value="form.comments"
-        />
-      </a-form-item>
-      <a-form-item label="排序号" name="sortNumber">
-        <a-input-number
-          :min="0"
-          :max="9999"
-          class="ele-fluid"
-          placeholder="请输入排序号"
-          v-model:value="form.sortNumber"
-        />
-      </a-form-item>
-      <a-form-item label="是否删除" name="isDelete">
-        <a-input
-          allow-clear
-          placeholder="请输入是否删除"
-          v-model:value="form.isDelete"
-        />
-      </a-form-item>
-      <a-form-item label="修改时间" name="updateTime">
-        <a-input
-          allow-clear
-          placeholder="请输入修改时间"
-          v-model:value="form.updateTime"
-        />
-      </a-form-item>
+      <a-divider orientation="left">
+        <span style="color: #1890ff; font-weight: 600">基础信息</span>
+      </a-divider>
+
+      <a-row :gutter="16">
+        <a-col :span="24" v-if="!isUpdate">
+          <a-form-item label="关联用户" name="userId">
+            <SelectUser
+              :key="selectedUserText"
+              :value="selectedUserText"
+              :placeholder="`选择用户`"
+              @done="onChooseUser"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="类型" name="type">
+            <a-select v-model:value="form.type" placeholder="请选择类型">
+              <a-select-option :value="0">经销商</a-select-option>
+              <a-select-option :value="1">企业</a-select-option>
+              <a-select-option :value="2">集团</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="手机号" name="mobile">
+            <a-input
+              allow-clear
+              :maxlength="11"
+              placeholder="请输入手机号"
+              :disabled="true"
+              v-model:value="form.mobile"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="姓名" name="realName">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入姓名"
+              v-model:value="form.realName"
+            />
+          </a-form-item>
+        </a-col>
+<!--        <a-col :span="12">-->
+<!--          <a-form-item-->
+<!--            label="支付密码"-->
+<!--            name="payPassword"-->
+<!--            :help="isUpdate ? '留空表示不修改' : undefined"-->
+<!--          >-->
+<!--            <a-input-password-->
+<!--              allow-clear-->
+<!--              :maxlength="20"-->
+<!--              placeholder="请输入支付密码"-->
+<!--              v-model:value="form.payPassword"-->
+<!--            />-->
+<!--          </a-form-item>-->
+<!--        </a-col>-->
+        <a-col :span="12">
+          <a-form-item label="头像" name="image">
+            <a-image :src="form.avatar" :width="50" :preview="false" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-divider orientation="left">
+        <span style="color: #1890ff; font-weight: 600">佣金信息</span>
+      </a-divider>
+
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="可提现" name="money">
+            <a-input-number
+              class="ele-fluid"
+              :min="0"
+              :precision="2"
+              stringMode
+              placeholder="0.00"
+              :disabled="true"
+              v-model:value="form.money"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="已冻结" name="freezeMoney">
+            <a-input-number
+              class="ele-fluid"
+              :min="0"
+              :precision="2"
+              stringMode
+              placeholder="0.00"
+              :disabled="true"
+              v-model:value="form.freezeMoney"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="累积提现" name="totalMoney">
+            <a-input-number
+              class="ele-fluid"
+              :min="0"
+              :precision="2"
+              stringMode
+              placeholder="0.00"
+              :disabled="true"
+              v-model:value="form.totalMoney"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="佣金比例" name="rate">
+            <a-input-number
+              class="ele-fluid"
+              :min="0"
+              :max="1"
+              :precision="4"
+              stringMode
+              :disabled="true"
+              placeholder="例如 0.007"
+              v-model:value="form.rate"
+            />
+          </a-form-item>
+        </a-col>
+<!--        <a-col :span="12">-->
+<!--          <a-form-item label="单价" name="price">-->
+<!--            <a-input-number-->
+<!--              class="ele-fluid"-->
+<!--              :min="0"-->
+<!--              :precision="2"-->
+<!--              stringMode-->
+<!--              placeholder="0.00"-->
+<!--              v-model:value="form.price"-->
+<!--            />-->
+<!--          </a-form-item>-->
+<!--        </a-col>-->
+      </a-row>
+
+<!--      <a-row :gutter="16">-->
+<!--        <a-col :span="12">-->
+<!--          <a-form-item label="排序号" name="sortNumber">-->
+<!--            <a-input-number-->
+<!--              :min="0"-->
+<!--              :max="9999"-->
+<!--              class="ele-fluid"-->
+<!--              placeholder="请输入排序号"-->
+<!--              v-model:value="form.sortNumber"-->
+<!--            />-->
+<!--          </a-form-item>-->
+<!--        </a-col>-->
+<!--        <a-col :span="12">-->
+<!--          <a-form-item label="备注" name="comments">-->
+<!--            <a-textarea-->
+<!--              :rows="3"-->
+<!--              :maxlength="200"-->
+<!--              show-count-->
+<!--              placeholder="请输入备注"-->
+<!--              v-model:value="form.comments"-->
+<!--            />-->
+<!--          </a-form-item>-->
+<!--        </a-col>-->
+<!--      </a-row>-->
     </a-form>
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
+  import { computed, ref, reactive, watch } from 'vue';
   import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
+  import { assignObject, toDateString, uuid } from 'ele-admin-pro';
   import { addShopDealerUser, updateShopDealerUser } from '@/api/shop/shopDealerUser';
   import { ShopDealerUser } from '@/api/shop/shopDealerUser/model';
   import { useThemeStore } from '@/store/modules/theme';
@@ -170,6 +197,7 @@
   import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FormInstance } from 'ant-design-vue/es/form';
   import { FileRecord } from '@/api/system/file/model';
+  import type { User } from '@/api/system/user/model';
 
   // 是否是修改
   const isUpdate = ref(false);
@@ -201,11 +229,12 @@
   // 用户信息
   const form = reactive<ShopDealerUser>({
     id: undefined,
-    type: undefined,
     userId: undefined,
+    avatar: undefined,
+    type: 0,
     realName: undefined,
     mobile: undefined,
-    payPassword: undefined,
+    payPassword: '',
     money: undefined,
     freezeMoney: undefined,
     totalMoney: undefined,
@@ -216,14 +245,10 @@
     secondNum: undefined,
     thirdNum: undefined,
     qrcode: undefined,
-    comments: undefined,
-    sortNumber: undefined,
     isDelete: undefined,
     tenantId: undefined,
     createTime: undefined,
     updateTime: undefined,
-    shopDealerUserId: undefined,
-    shopDealerUserName: '',
     status: 0,
     comments: '',
     sortNumber: 100
@@ -234,18 +259,90 @@
     emit('update:visible', value);
   };
 
+  const createTimeText = computed(() => {
+    return form.createTime ? toDateString(form.createTime, 'yyyy-MM-dd HH:mm:ss') : '';
+  });
+
+  const updateTimeText = computed(() => {
+    return form.updateTime ? toDateString(form.updateTime, 'yyyy-MM-dd HH:mm:ss') : '';
+  });
+
+  const selectedUserText = ref<string>('');
+
   // 表单验证规则
   const rules = reactive({
-    shopDealerUserName: [
+    userId: [
+      {
+        validator: (_rule: unknown, value: number | undefined) => {
+          if (!isUpdate.value && !value) {
+            return Promise.reject(new Error('请选择关联用户'));
+          }
+          return Promise.resolve();
+        },
+        trigger: 'change'
+      }
+    ],
+    type: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择类型',
+        trigger: 'change'
+      }
+    ],
+    realName: [
       {
         required: true,
         type: 'string',
-        message: '请填写分销商用户记录表名称',
+        message: '请填写姓名',
+        trigger: 'blur'
+      }
+    ],
+    // mobile: [
+    //   {
+    //     required: true,
+    //     type: 'string',
+    //     message: '请填写手机号',
+    //     trigger: 'blur'
+    //   },
+    //   {
+    //     pattern: /^1\\d{10}$/,
+    //     message: '手机号格式不正确',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    payPassword: [
+      {
+        validator: (_rule: unknown, value: string) => {
+          if (!isUpdate.value && !value) {
+            return Promise.reject(new Error('请输入支付密码'));
+          }
+          return Promise.resolve();
+        },
         trigger: 'blur'
       }
     ]
   });
 
+  const onChooseUser = (user?: User) => {
+    if (!user) {
+      selectedUserText.value = '';
+      form.userId = undefined;
+      return;
+    }
+    form.userId = user.userId;
+    // 新增时尽量帮用户填充，避免重复输入
+    if (!form.realName) {
+      form.realName = user.realName ?? user.nickname;
+    }
+    if (!form.mobile) {
+      form.mobile = user.phone ?? user.mobile;
+    }
+    const name = user.realName ?? user.nickname ?? '';
+    const phone = user.phone ?? user.mobile ?? '';
+    selectedUserText.value = phone ? `${name}（${phone}）` : name;
+  };
+
   const chooseImage = (data: FileRecord) => {
     images.value.push({
       uid: data.id,
@@ -271,9 +368,23 @@
       .validate()
       .then(() => {
         loading.value = true;
-        const formData = {
-          ...form
-        };
+        // 不在弹窗里编辑的字段不提交，避免误更新（如自增ID、删除标识等）
+        const {
+          isDelete,
+          tenantId,
+          createTime,
+          updateTime,
+          ...rest
+        } = form;
+        const formData: ShopDealerUser = { ...rest };
+        // userId 新增需要，编辑不允许修改
+        if (isUpdate.value) {
+          delete formData.userId;
+        }
+        // 编辑时留空表示不修改密码
+        if (isUpdate.value && !formData.payPassword) {
+          delete formData.payPassword;
+        }
         const saveOrUpdate = isUpdate.value ? updateShopDealerUser : addShopDealerUser;
         saveOrUpdate(formData)
           .then((msg) => {
@@ -294,9 +405,13 @@
     () => props.visible,
     (visible) => {
       if (visible) {
+        formRef.value?.clearValidate();
         images.value = [];
         if (props.data) {
           assignObject(form, props.data);
+          // 不回显密码，避免误操作
+          form.payPassword = '';
+          selectedUserText.value = '';
           if(props.data.image){
             images.value.push({
               uid: uuid(),
@@ -306,10 +421,21 @@
           }
           isUpdate.value = true;
         } else {
+          // 新增时确保表单是干净的默认值
+          resetFields();
+          form.payPassword = '';
+          form.type = 0;
+          form.status = 0;
+          form.comments = '';
+          form.sortNumber = 100;
+          selectedUserText.value = '';
           isUpdate.value = false;
         }
       } else {
         resetFields();
+        formRef.value?.clearValidate();
+        images.value = [];
+        selectedUserText.value = '';
       }
     },
     { immediate: true }
diff --git a/src/views/shop/shopDealerUser/index.vue b/src/views/shop/shopDealerUser/index.vue
index bcb665d..9eab787 100644
--- a/src/views/shop/shopDealerUser/index.vue
+++ b/src/views/shop/shopDealerUser/index.vue
@@ -25,9 +25,12 @@
             </template>
             <template v-if="column.key === 'type'">
               <a-tag v-if="record.type === 0">经销商</a-tag>
-              <a-tag v-if="record.type === 1" color="orange">门店</a-tag>
+              <a-tag v-if="record.type === 1" color="orange">企业</a-tag>
               <a-tag v-if="record.type === 2" color="purple">集团</a-tag>
             </template>
+            <template v-if="column.key === 'qrcode'">
+              <QrcodeOutlined :style="{fontSize: '24px'}" @click="openQrCode(record)" />
+            </template>
             <template v-if="column.key === 'status'">
               <a-tag v-if="record.status === 0" color="green">显示</a-tag>
               <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
@@ -50,13 +53,33 @@
 
       <!-- 编辑弹窗 -->
       <ShopDealerUserEdit v-model:visible="showEdit" :data="current" @done="reload" />
+
+      <!-- 二维码预览 -->
+      <a-modal
+        v-model:visible="showQrModal"
+        :title="qrModalTitle"
+        :footer="null"
+        :width="380"
+        centered
+        destroy-on-close
+      >
+        <div style="display: flex; justify-content: center">
+          <a-image v-if="qrModalUrl" :src="qrModalUrl" :width="280" :preview="false" />
+        </div>
+        <div style="display: flex; justify-content: center; margin-top: 12px">
+          <a-space>
+            <a-button @click="copyQrUrl">复制链接</a-button>
+            <a-button type="primary" @click="openQrInNewTab">打开原图</a-button>
+          </a-space>
+        </div>
+      </a-modal>
   </a-page-header>
 </template>
 
 <script lang="ts" setup>
   import { createVNode, ref, computed } from 'vue';
   import { message, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { ExclamationCircleOutlined, QrcodeOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
   import { toDateString } from 'ele-admin-pro';
   import type {
@@ -78,11 +101,48 @@
   const current = ref<ShopDealerUser | null>(null);
   // 是否显示编辑弹窗
   const showEdit = ref(false);
+  // 是否显示二维码弹窗
+  const showQrModal = ref(false);
+  const qrModalUrl = ref<string>('');
+  const qrModalTitle = ref<string>('二维码');
   // 是否显示批量移动弹窗
   const showMove = ref(false);
   // 加载状态
   const loading = ref(true);
 
+  const getQrCodeUrl = (userId?: number) => {
+    return `https://mp-api.websoft.top/api/wx-login/getOrderQRCodeUnlimited/uid_${userId ?? ''}`;
+  };
+
+  const openQrCode = (row: ShopDealerUser) => {
+    if (!row.userId) {
+      message.warning('缺少用户ID，无法生成二维码');
+      return;
+    }
+    qrModalUrl.value = getQrCodeUrl(row.userId);
+    qrModalTitle.value = row.realName ? `${row.realName} 的二维码` : `UID_${row.userId} 二维码`;
+    showQrModal.value = true;
+  };
+
+  const copyQrUrl = async () => {
+    if (!qrModalUrl.value) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(qrModalUrl.value);
+      message.success('已复制');
+    } catch (e) {
+      message.error('复制失败，请手动复制');
+    }
+  };
+
+  const openQrInNewTab = () => {
+    if (!qrModalUrl.value) {
+      return;
+    }
+    window.open(qrModalUrl.value, '_blank');
+  };
+
   // 表格数据源
   const datasource: DatasourceFunction = ({
     page,
@@ -114,6 +174,7 @@
       title: '类型',
       dataIndex: 'type',
       key: 'type',
+      align: 'center',
       width: 120
     },
     {