feat: 完善IM用户管理与治理操作

web/src/views/imUser/index.vue

@@ -19,26 +19,226 @@
         :actionColumn="actionColumn"
         :scroll-x="scrollX"
         :resizeHeightOffset="-10000"
-      />
+      >
+        <template #tableTitle>
+          <n-space>
+            <n-button type="primary" v-if="hasPermission(['/imUser/create'])" @click="openCreate">
+              <template #icon
+                ><n-icon><PlusOutlined /></n-icon
+              ></template>
+              创建用户
+            </n-button>
+            <n-button v-if="hasPermission(['/imUser/batchCreate'])" @click="openBatchCreate">
+              批量创建
+            </n-button>
+            <n-button v-if="hasPermission(['/imUser/import'])" @click="openImport">
+              <template #icon
+                ><n-icon><UploadOutlined /></n-icon
+              ></template>
+              导入Excel
+            </n-button>
+            <n-button v-if="hasPermission(['/imUser/downloadTemplate'])" @click="DownloadTemplate">
+              <template #icon
+                ><n-icon><DownloadOutlined /></n-icon
+              ></template>
+              下载模板
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
     </n-card>
     <ViewModal ref="viewRef" />
-    <DevicesModal ref="devicesRef" />
     <ResetPasswordModal ref="resetPasswordRef" @reload="reloadTable" />
+
+    <n-modal
+      v-model:show="ipVisible"
+      preset="dialog"
+      title="IP白名单"
+      :show-icon="false"
+      class="user-dialog"
+    >
+      <n-form label-placement="left" label-width="90">
+        <n-form-item label="用户"
+          >{{ operationUser?.username }}（{{ operationUser?.userId }}）</n-form-item
+        >
+        <n-form-item label="IP/CIDR">
+          <n-input
+            v-model:value="ipWhitelistText"
+            type="textarea"
+            :rows="7"
+            placeholder="每行一个 IP 或 CIDR，例如 192.168.1.10 或 10.0.0.0/8"
+          />
+        </n-form-item>
+      </n-form>
+      <template #action>
+        <n-button @click="ipVisible = false">取消</n-button>
+        <n-button
+          v-if="hasPermission(['/imUser/ipWhitelistSave'])"
+          type="primary"
+          :loading="submitting"
+          @click="submitIPWhitelist"
+          >保存</n-button
+        >
+      </template>
+    </n-modal>
+
+    <n-modal
+      v-model:show="groupVisible"
+      preset="dialog"
+      title="调整分组"
+      :show-icon="false"
+      class="user-dialog"
+    >
+      <n-form label-placement="left" label-width="90">
+        <n-form-item label="用户"
+          >{{ operationUser?.username }}（{{ operationUser?.userId }}）</n-form-item
+        >
+        <n-form-item label="用户分组" required>
+          <n-select
+            v-model:value="adjustGroupId"
+            :options="policyGroupOptions"
+            placeholder="请选择用户分组"
+          />
+        </n-form-item>
+      </n-form>
+      <template #action>
+        <n-button @click="groupVisible = false">取消</n-button>
+        <n-button type="primary" :loading="submitting" @click="submitAdjustGroup">保存</n-button>
+      </template>
+    </n-modal>
+
+    <n-modal
+      v-model:show="createVisible"
+      preset="dialog"
+      title="创建用户"
+      :show-icon="false"
+      class="user-dialog"
+    >
+      <n-form
+        ref="createFormRef"
+        :model="createForm"
+        :rules="createRules"
+        label-placement="left"
+        label-width="90"
+      >
+        <n-form-item label="用户名" path="username"
+          ><n-input v-model:value="createForm.username" placeholder="可空，系统自动生成"
+        /></n-form-item>
+        <n-form-item label="昵称" path="nickname"
+          ><n-input v-model:value="createForm.nickname" placeholder="请输入昵称"
+        /></n-form-item>
+        <n-form-item label="手机号" path="phone"
+          ><n-input v-model:value="createForm.phone" placeholder="可选"
+        /></n-form-item>
+        <n-form-item label="密码" path="password"
+          ><n-input v-model:value="createForm.password" type="password" show-password-on="click"
+        /></n-form-item>
+        <n-form-item label="用户分组"
+          ><n-select
+            v-model:value="createForm.groupId"
+            :options="policyGroupOptions"
+            clearable
+            placeholder="请选择用户分组"
+        /></n-form-item>
+      </n-form>
+      <template #action
+        ><n-button @click="createVisible = false">取消</n-button
+        ><n-button type="primary" :loading="submitting" @click="submitCreate"
+          >确定</n-button
+        ></template
+      >
+    </n-modal>
+
+    <n-modal
+      v-model:show="batchVisible"
+      preset="dialog"
+      title="批量创建用户"
+      :show-icon="false"
+      class="user-dialog"
+    >
+      <n-form
+        ref="batchFormRef"
+        :model="batchForm"
+        :rules="batchRules"
+        label-placement="left"
+        label-width="100"
+      >
+        <n-form-item label="创建数量" path="count"
+          ><n-input-number v-model:value="batchForm.count" :min="1" :max="100"
+        /></n-form-item>
+        <n-form-item label="昵称前缀"
+          ><n-input v-model:value="batchForm.nicknamePrefix" placeholder="默认：用户"
+        /></n-form-item>
+        <n-form-item label="默认密码" path="password"
+          ><n-input v-model:value="batchForm.password" type="password" show-password-on="click"
+        /></n-form-item>
+        <n-form-item label="默认分组"
+          ><n-select v-model:value="batchForm.groupId" :options="policyGroupOptions" clearable
+        /></n-form-item>
+      </n-form>
+      <template #action
+        ><n-button @click="batchVisible = false">取消</n-button
+        ><n-button type="primary" :loading="submitting" @click="submitBatchCreate"
+          >确定</n-button
+        ></template
+      >
+    </n-modal>
+
+    <n-modal
+      v-model:show="importVisible"
+      preset="dialog"
+      title="导入Excel"
+      :show-icon="false"
+      class="user-dialog"
+    >
+      <n-form label-placement="left" label-width="90">
+        <n-form-item label="默认分组"
+          ><n-select v-model:value="importGroupId" :options="policyGroupOptions" clearable
+        /></n-form-item>
+        <n-form-item label="Excel文件">
+          <n-upload :max="1" accept=".xlsx" :custom-request="handleImport" :show-file-list="true">
+            <n-upload-dragger><n-text>点击或拖动 .xlsx 文件到此处</n-text></n-upload-dragger>
+          </n-upload>
+        </n-form-item>
+      </n-form>
+    </n-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, h, onMounted, reactive, ref } from 'vue';
-  import { useDialog, useMessage } from 'naive-ui';
+  import { computed, h, onMounted, reactive, ref, watch } from 'vue';
+  import { UploadCustomRequestOptions, useDialog, useMessage } from 'naive-ui';
   import { BasicTable, TableAction } from '@/components/Table';
   import { BasicForm, useForm } from '@/components/Form/index';
   import { usePermission } from '@/hooks/web/usePermission';
   import { useUserStore } from '@/store/modules/user';
-  import { List, RevokeSessions } from '@/api/imUser';
-  import { columns, loadOptions, loadTenantOptions, schemas, State, tenantOptions } from './model';
+  import {
+    AccountCancel,
+    AdjustGroup,
+    Ban,
+    BatchCreate,
+    Create,
+    DownloadTemplate,
+    ImportUsers,
+    IPWhitelist,
+    IPWhitelistSave,
+    List,
+    LogoutAll,
+    Unban,
+  } from '@/api/imUser';
+  import {
+    columns,
+    loadOptions,
+    loadPolicyGroupOptions,
+    loadTenantOptions,
+    policyGroupOptions,
+    schemas,
+    State,
+    tenantOptions,
+  } from './model';
+  import { DownloadOutlined, PlusOutlined, UploadOutlined } from '@vicons/antd';
   import { adaTableScrollX } from '@/utils/hotgo';
   import ViewModal from './view.vue';
-  import DevicesModal from './DevicesModal.vue';
   import ResetPasswordModal from './ResetPasswordModal.vue';
 
   const message = useMessage();
@@ -49,8 +249,40 @@
   const actionRef = ref();
   const searchFormRef = ref<any>({});
   const viewRef = ref();
-  const devicesRef = ref();
   const resetPasswordRef = ref();
+  const createFormRef = ref();
+  const batchFormRef = ref();
+  const createVisible = ref(false);
+  const batchVisible = ref(false);
+  const importVisible = ref(false);
+  const submitting = ref(false);
+  const ipVisible = ref(false);
+  const groupVisible = ref(false);
+  const operationUser = ref<State | null>(null);
+  const ipWhitelistText = ref('');
+  const adjustGroupId = ref<number | null>(null);
+  const importGroupId = ref<number | null>(null);
+  const createForm = reactive({
+    username: '',
+    nickname: '',
+    phone: '',
+    password: '',
+    groupId: null as number | null,
+  });
+  const batchForm = reactive({
+    count: 10,
+    nicknamePrefix: '用户',
+    password: '',
+    groupId: null as number | null,
+  });
+  const createRules = {
+    nickname: { required: true, message: '请输入昵称', trigger: 'blur' },
+    password: { required: true, min: 3, message: '密码至少3位', trigger: 'blur' },
+  };
+  const batchRules = {
+    count: { required: true, type: 'number', message: '请输入创建数量', trigger: 'change' },
+    password: { required: true, min: 3, message: '密码至少3位', trigger: 'blur' },
+  };
 
   const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
   if (tenantSchema) {
@@ -58,7 +290,7 @@
   }
 
   const actionColumn = reactive({
-    width: 330,
+    width: 600,
     title: '操作',
     key: 'action',
     fixed: 'right',
@@ -68,25 +300,51 @@
         actions: [
           {
             label: '详情',
+            type: 'default',
             onClick: handleView.bind(null, record),
             auth: ['/imUser/view'],
           },
-          {
-            label: '设备',
-            onClick: handleDevices.bind(null, record),
-            auth: ['/imUser/devices'],
-          },
-          {
-            label: '撤销会话',
-            type: 'error',
-            onClick: handleRevokeSessions.bind(null, record),
-            auth: ['/imUser/revokeSessions'],
-          },
           {
             label: '重置密码',
-            type: 'warning',
+            type: 'default',
             onClick: handleResetPassword.bind(null, record),
             auth: ['/imUser/resetPassword'],
+            ifShow: record.state !== 20,
+          },
+          {
+            label: 'IP白名单',
+            type: 'default',
+            onClick: openIPWhitelist.bind(null, record),
+            auth: ['/imUser/ipWhitelist'],
+            ifShow: record.state !== 20,
+          },
+          {
+            label: '调整分组',
+            type: 'default',
+            onClick: openAdjustGroup.bind(null, record),
+            auth: ['/imUser/adjustGroup'],
+            ifShow: record.state !== 20,
+          },
+          {
+            label: record.state === 0 ? '封禁' : '解封',
+            type: record.state === 0 ? 'error' : 'default',
+            onClick: handleBanToggle.bind(null, record),
+            auth: [record.state === 0 ? '/imUser/ban' : '/imUser/unban'],
+            ifShow: record.state !== 20,
+          },
+          {
+            label: '强制下线',
+            type: 'error',
+            onClick: handleForceOffline.bind(null, record),
+            auth: ['/imUser/logoutAll'],
+            ifShow: record.state !== 20,
+          },
+          {
+            label: '强制注销',
+            type: 'error',
+            onClick: handleForceCancel.bind(null, record),
+            auth: ['/imUser/accountCancel'],
+            ifShow: record.state !== 20,
           },
         ],
       });
@@ -122,19 +380,19 @@
     viewRef.value.openModal(record);
   }
 
-  function handleDevices(record: State) {
-    devicesRef.value.openModal(record);
-  }
-
-  function handleRevokeSessions(record: State) {
+  function handleForceOffline(record: State) {
     dialog.warning({
-      title: '撤销用户会话',
-      content: '将递增该用户认证版本，并通知 IM 服务清退在线会话，是否确认？',
+      title: '强制下线',
+      content: `确定强制用户“${record.username}”的全部设备下线吗？`,
       positiveText: '确认',
       negativeText: '取消',
       onPositiveClick: async () => {
-        await RevokeSessions({ tenantId: record.tenantId, userId: record.userId });
-        message.success('会话撤销事件已提交');
+        await LogoutAll({
+          tenantId: record.tenantId,
+          userId: Number(record.userId),
+          reason: '后台强制下线',
+        });
+        message.success('强制下线命令已提交');
         reloadTable();
       },
     });
@@ -144,6 +402,169 @@
     resetPasswordRef.value.openModal(record);
   }
 
+  async function openIPWhitelist(record: State) {
+    operationUser.value = record;
+    const result = await IPWhitelist({ tenantId: record.tenantId, userId: Number(record.userId) });
+    ipWhitelistText.value = (result?.ipList || []).join('\n');
+    ipVisible.value = true;
+  }
+
+  async function submitIPWhitelist() {
+    if (!operationUser.value) return;
+    const ipList = ipWhitelistText.value
+      .split(/[\n,，]+/)
+      .map((item) => item.trim())
+      .filter(Boolean);
+    submitting.value = true;
+    try {
+      await IPWhitelistSave({
+        tenantId: operationUser.value.tenantId,
+        userId: Number(operationUser.value.userId),
+        ipList,
+      });
+      message.success('IP白名单保存成功');
+      ipVisible.value = false;
+    } finally {
+      submitting.value = false;
+    }
+  }
+
+  function openAdjustGroup(record: State) {
+    operationUser.value = record;
+    adjustGroupId.value = record.policyGroupId || null;
+    groupVisible.value = true;
+  }
+
+  async function submitAdjustGroup() {
+    if (!operationUser.value || !adjustGroupId.value) {
+      message.warning('请选择用户分组');
+      return;
+    }
+    submitting.value = true;
+    try {
+      await AdjustGroup({
+        tenantId: operationUser.value.tenantId,
+        userId: Number(operationUser.value.userId),
+        groupId: adjustGroupId.value,
+      });
+      message.success('用户分组调整成功');
+      groupVisible.value = false;
+      reloadTable();
+    } finally {
+      submitting.value = false;
+    }
+  }
+
+  function handleBanToggle(record: State) {
+    const banning = record.state === 0;
+    dialog.warning({
+      title: banning ? '封禁用户' : '解封用户',
+      content: `确定${banning ? '封禁' : '解封'}用户“${record.username}”吗？`,
+      positiveText: '确认',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        const action = banning ? Ban : Unban;
+        await action({
+          tenantId: record.tenantId,
+          userId: Number(record.userId),
+          reason: banning ? '后台封禁' : '后台解封',
+        });
+        message.success(`${banning ? '封禁' : '解封'}命令已提交`);
+        reloadTable();
+      },
+    });
+  }
+
+  function handleForceCancel(record: State) {
+    dialog.error({
+      title: '强制注销',
+      content: `确定强制注销用户“${record.username}”吗？注销后账号不可继续登录。`,
+      positiveText: '确认注销',
+      negativeText: '取消',
+      onPositiveClick: async () => {
+        await AccountCancel({
+          tenantId: record.tenantId,
+          userId: Number(record.userId),
+          reason: '后台强制注销',
+        });
+        message.success('强制注销命令已提交');
+        reloadTable();
+      },
+    });
+  }
+
+  function currentTenantId() {
+    return Number(searchFormRef.value?.formModel?.tenantId || 0);
+  }
+
+  function openCreate() {
+    Object.assign(createForm, {
+      username: '',
+      nickname: '',
+      phone: '',
+      password: '',
+      groupId: null,
+    });
+    createVisible.value = true;
+  }
+
+  async function submitCreate() {
+    await createFormRef.value?.validate();
+    submitting.value = true;
+    try {
+      const result = await Create({ ...createForm, tenantId: currentTenantId() });
+      message.success(`用户 ${result.username} 创建成功`);
+      createVisible.value = false;
+      reloadTable();
+    } finally {
+      submitting.value = false;
+    }
+  }
+
+  function openBatchCreate() {
+    Object.assign(batchForm, { count: 10, nicknamePrefix: '用户', password: '', groupId: null });
+    batchVisible.value = true;
+  }
+
+  async function submitBatchCreate() {
+    await batchFormRef.value?.validate();
+    submitting.value = true;
+    try {
+      const result = await BatchCreate({ ...batchForm, tenantId: currentTenantId() });
+      message.success(`创建完成：成功 ${result.successCount}，失败 ${result.failedCount}`);
+      batchVisible.value = false;
+      reloadTable();
+    } finally {
+      submitting.value = false;
+    }
+  }
+
+  function openImport() {
+    importGroupId.value = null;
+    importVisible.value = true;
+  }
+
+  async function handleImport(options: UploadCustomRequestOptions) {
+    try {
+      const result = await ImportUsers({
+        file: options.file.file as File,
+        tenantId: currentTenantId(),
+        groupId: importGroupId.value || 0,
+      });
+      options.onFinish();
+      message.success(`导入完成：成功 ${result.successCount}，失败 ${result.failedCount}`);
+      importVisible.value = false;
+      reloadTable();
+    } catch {
+      options.onError();
+    }
+  }
+
+  watch(
+    () => searchFormRef.value?.formModel?.tenantId,
+    (tenantId) => loadPolicyGroupOptions(Number(tenantId || 0))
+  );
+
   onMounted(async () => {
     loadOptions();
     if (isPlatformAdmin.value) {
@@ -154,8 +575,13 @@
         message.warning('暂无可用租户');
       }
     }
+    await loadPolicyGroupOptions(currentTenantId());
     reloadTable();
   });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  :deep(.user-dialog) {
+    width: min(560px, calc(100vw - 32px));
+  }
+</style>