@wlink/zw-user-management

用户管理业务模块 - 基于 Vue 3 的通用增删改查解决方案

特性

• 🌲 依赖注入 - 不绑定具体 UI 框架，通过注入获取依赖
• 🔌 插件化 - API、权限、弹窗等都可以外部注入
• 📦 开箱即用 - 提供默认实现，快速上手
• 🌍 国际化 - 内置中英文支持
• 🎨 可扩展 - 支持自定义操作、插槽扩展

安装

pnpm add @wlink/zw-user-management

peerDependencies

{
  "vue": "^3.5.0",
  "vue-router": "^5.0.0",
  "@wlink/access": "^5.6.0",
  "@wlink/common-ui": "^5.6.0",
  "@wlink/constants": "^5.6.0",
  "@wlink/locales": "^5.6.0",
  "@wlink/types": "^5.6.0",
  "ant-design-vue": "^4.2.0"
}

快速开始

1. 初始化依赖

在应用入口（如 main.ts）调用一次：

import { setupUserManagementDependencies } from '@wlink/zw-user-management';
import { useWlinkModal } from '@wlink/common-ui';
import { useAccess } from '@wlink/access';
import { $t } from '@wlink/locales';
import { message } from 'ant-design-vue';
import { ref, reactive, computed, onMounted } from 'vue';

setupUserManagementDependencies({
  ref,
  reactive,
  computed,
  onMounted,
  $t,
  useAccess,
  useWlinkModal,
  message,
});

2. 使用组件

<script setup lang="ts">
import { UserList } from '@wlink/zw-user-management';
import UserModal from './UserModal.vue';
import { requestClient } from '@/api/request';

// API 配置
const api = {
  getList: (params) =>
    requestClient.post('/sys/user/v1/get-page', params),
  getDetail: (id) =>
    requestClient.get(`/sys/user/v1/get-info-by-id/${id}`),
  create: (data) =>
    requestClient.post('/sys/user/v1/save-data', data),
  update: (id, data) =>
    requestClient.put('/sys/user/v1/update-by-id', { id, ...data }),
  delete: (id) =>
    requestClient.delete(`/sys/user/v1/del-by-id/${id}`),
};

// 权限配置
const permissions = {
  create: ['sys:user:create'],
  edit: ['sys:user:edit'],
  delete: ['sys:user:delete'],
};
</script>

<template>
  <UserList
    :api="api"
    :permissions="permissions"
    :modal-component="UserModal"
  />
</template>

3. 使用 Hook

<script setup lang="ts">
import { useUserTable } from '@wlink/zw-user-management';
import { requestClient } from '@/api/request';

const {
  listPageRef,
  ModalComponent,
  onCreate,
  onEdit,
  onDelete,
  handleSuccess,
  operationConfig,
  refresh,
} = useUserTable({
  api: {
    getList: (params) => requestClient.post('/sys/user/v1/get-page', params),
    delete: (id) => requestClient.delete(`/sys/user/v1/del-by-id/${id}`),
  },
  permissions: {
    create: ['sys:user:create'],
    edit: ['sys:user:edit'],
    delete: ['sys:user:delete'],
  },
});
</script>

<template>
  <div>
    <a-button type="primary" @click="onCreate">新增</a-button>

    <vxe-grid
      ref="listPageRef"
      :proxy-config="proxyConfig"
      :columns="columnsWithOperation"
    />

    <ModalComponent @success="handleSuccess" />
  </div>
</template>

API

setupUserManagementDependencies(deps)

初始化依赖，在应用入口调用一次。

| 参数 | 类型 | 描述 | |------|------|------| | ref | (T) => Ref<T> | Vue ref | | reactive | (T) => T | Vue reactive | | computed | (fn) => ComputedRef | Vue computed | | $t | (key: string) => string | 国际化函数 | | useAccess | () => UseAccessReturn | 权限钩子 | | useWlinkModal | (options) => [Component, ModalApi] | 弹窗创建 | | message | { success, error, warning, info } | 消息提示 |

useCrud(options)

核心 CRUD hook。

import { useCrud } from '@wlink/zw-user-management';

const {
  listPageRef,
  ModalComponent,
  modalApi,
  currentEditData,
  onCreate,
  onEdit,
  onDelete,
  handleSuccess,
  operationConfig,
  refresh,
} = useCrud({
  api: {
    getList: (params) => Promise,
    getDetail: (id) => Promise,
    create: (data) => Promise,
    update: (id, data) => Promise,
    delete: (id) => Promise,
  },
  permissions: {
    create: ['perm:create'],
    edit: ['perm:edit'],
    delete: ['perm:delete'],
  },
  i18nPrefix: 'user',
  customActions: {
    resetPassword: (row) => { /* ... */ },
  },
  beforeDelete: (row) => confirm('确认删除？'),
  afterDelete: (row) => { /* 刷新其他数据 */ },
});

useUserTable(options)

带表格配置的用户管理 hook。

UserList 组件

| Prop | Type | Default | Description | |------|------|---------|-------------| | api | CrudApiConfig | required | API 配置 | | permissions | CrudPermissions | {} | 权限配置 | | i18nPrefix | string | 'user' | 国际化前缀 | | modalComponent | Component | null | 弹窗内容组件 | | customActions | Record<string, Function> | {} | 自定义操作 |

国际化

包内置了中英文：

import { $t, setLocale } from '@wlink/zw-user-management';

// 切换语言
setLocale('en-US');

// 使用
$t('user.username'); // => 'Username'

License

MIT