完整后台模块模板

下面一个基于 Naive Admin（Vue3 + Vite + Naive UI） 的完整后台模块模板，包含：

• 用户列表（增删改查）
• 角色管理（分配角色）
• 权限点管理（配置页面/功能权限）
• 接口与数据结构示例（可直接接你的小程序用户数据）

---

🧩 目录结构设计

src/
  api/
    users.js         # 用户相关接口
    roles.js         # 角色相关接口
    permissions.js   # 权限点相关接口
  views/
    user/index.vue         # 用户管理页面
    role/index.vue         # 角色管理页面
    permission/index.vue   # 权限点管理页面
  router/
    modules/
      system.js             # 菜单配置（用户、角色、权限）

---

📁 src/api/users.js

import request from '@/utils/request'

export function getUsers() {
  return request.get('/api/users')
}

export function updateUser(id, data) {
  return request.put(`/api/users/${id}`, data)
}

export function deleteUser(id) {
  return request.delete(`/api/users/${id}`)
}

export function createUser(data) {
  return request.post('/api/users', data)
}

---

📁 src/api/roles.js

import request from '@/utils/request'

export function getRoles() {
  return request.get('/api/roles')
}

export function assignRole(userId, roleId) {
  return request.post(`/api/users/${userId}/assign-role`, { roleId })
}

---

📁 src/api/permissions.js

import request from '@/utils/request'

export function getPermissions() {
  return request.get('/api/permissions')
}

export function updatePermissions(roleId, permIds) {
  return request.post(`/api/roles/${roleId}/permissions`, { permIds })
}

---

📁 src/views/user/index.vue

<template>
  <n-card title="用户管理">
    <n-data-table :columns="columns" :data="users" :bordered="true" />
  </n-card>

  <n-modal v-model:show="showEdit" preset="dialog" title="编辑用户">
    <n-form :model="editForm" label-placement="left" label-width="80">
      <n-form-item label="昵称">
        <n-input v-model:value="editForm.nickname" />
      </n-form-item>
      <n-form-item label="手机号">
        <n-input v-model:value="editForm.phone" />
      </n-form-item>
      <n-form-item label="角色">
        <n-select :options="roleOptions" v-model:value="editForm.roleId" />
      </n-form-item>
    </n-form>
    <template #action>
      <n-button @click="saveUser" type="primary">保存</n-button>
    </template>
  </n-modal>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUsers, updateUser, deleteUser } from '@/api/users'
import { getRoles } from '@/api/roles'
import { useMessage } from 'naive-ui'

const users = ref([])
const showEdit = ref(false)
const editForm = ref({})
const message = useMessage()
const roleOptions = ref([])

onMounted(async () => {
  users.value = await getUsers()
  roleOptions.value = (await getRoles()).map(r => ({ label: r.name, value: r.id }))
})

const columns = [
  { title: 'ID', key: 'id' },
  { title: '昵称', key: 'nickname' },
  { title: '手机号', key: 'phone' },
  { title: '角色', key: 'roleName' },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return [
        h('n-button', { size: 'small', onClick: () => startEdit(row) }, '编辑'),
        h('n-button', { size: 'small', type: 'error', onClick: () => remove(row.id) }, '删除')
      ]
    }
  }
]

function startEdit(row) {
  editForm.value = { ...row }
  showEdit.value = true
}

async function saveUser() {
  await updateUser(editForm.value.id, editForm.value)
  message.success('保存成功')
  showEdit.value = false
  users.value = await getUsers()
}

async function remove(id) {
  await deleteUser(id)
  message.success('删除成功')
  users.value = users.value.filter(u => u.id !== id)
}
</script>

---

📁 src/views/role/index.vue

• 显示所有角色
• 可创建、删除、编辑角色
• 点击某角色进入权限配置页

<template>
  <n-card title="角色管理">
    <n-data-table :columns="columns" :data="roles" :bordered="true" />
  </n-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRoles } from '@/api/roles'

const roles = ref([])

onMounted(async () => {
  roles.value = await getRoles()
})

const columns = [
  { title: 'ID', key: 'id' },
  { title: '角色名', key: 'name' },
  { title: '描述', key: 'description' }
]
</script>

---

📁 src/views/permission/index.vue

• 勾选某角色拥有的功能点权限

<template>
  <n-card title="权限点管理">
    <n-select :options="roleOptions" v-model:value="activeRole" placeholder="选择角色" />
    <n-tree
      checkable
      :data="permissionTree"
      :checked-keys="checkedKeys"
      @update:checked-keys="updateChecked"
    />
    <n-button type="primary" class="mt-4" @click="save">保存</n-button>
  </n-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRoles } from '@/api/roles'
import { getPermissions, updatePermissions } from '@/api/permissions'
import { useMessage } from 'naive-ui'

const activeRole = ref()
const roleOptions = ref([])
const permissionTree = ref([])
const checkedKeys = ref([])
const message = useMessage()

onMounted(async () => {
  roleOptions.value = (await getRoles()).map(r => ({ label: r.name, value: r.id }))
  permissionTree.value = await getPermissions()
})

function updateChecked(keys) {
  checkedKeys.value = keys
}

async function save() {
  await updatePermissions(activeRole.value, checkedKeys.value)
  message.success('已保存权限设置')
}
</script>

---

📁 src/router/modules/system.js

export default {
  path: '/system',
  name: 'system',
  meta: { title: '系统管理', icon: 'settings' },
  children: [
    { path: 'users', name: 'users', component: () => import('@/views/user/index.vue'), meta: { title: '用户管理' } },
    { path: 'roles', name: 'roles', component: () => import('@/views/role/index.vue'), meta: { title: '角色管理' } },
    { path: 'permissions', name: 'permissions', component: () => import('@/views/permission/index.vue'), meta: { title: '权限管理' } }
  ]
}

---

⚙️ 接口返回数据示例

/api/users

[  {"id":1, "nickname":"张三", "phone":"13800000000", "roleId":1, "roleName":"管理员"},  {"id":2, "nickname":"李四", "phone":"13900000000", "roleId":2, "roleName":"普通用户"}]

/api/roles

[  {"id":1, "name":"管理员", "description":"拥有所有权限"},  {"id":2, "name":"普通用户", "description":"仅能浏览"}]

/api/permissions

[  {"key":"dashboard","label":"首页"},  {"key":"user","label":"用户管理"},  {"key":"order","label":"订单管理"},  {"key":"settings","label":"系统设置"}]

---

✅ 结果

这样就拥有一个：

• 左侧菜单导航
• 三个模块：用户列表 / 角色管理 / 权限点配置
• Naive UI 风格现代、轻量、响应式
• 后续只需接后端数据库接口即可上线使用

---