biancd-admin

介绍

一个基于 Vue3 + TypeScript + ElementPlus 的后台管理系统快速搭建组件库。

软件架构

• 前端框架: Vue 3
• 语言: TypeScript
• UI 组件库: ElementPlus
• 构建工具: Vite

安装

npm install @biancd/admin

本包依赖以下 peer dependencies，使用前请确保项目中已安装：

npm install vue element-plus @form-create/element-ui @element-plus/icons-vue @vueuse/core axios

另外需要在项目中全局引入 Element Plus 以及本包的样式：

// main.ts
import 'element-plus/dist/index.css'
import '@biancd/admin/admin.css'

样式独立打包为 admin.css，需在使用方单独引入。

组件

| 组件 | 说明 | 文档 | |-----------------------|--------------------------------------------------------------------|----------------------------------------------------------| | useFormPopup | 基于 Element Plus + form-create 的命令式表单弹窗 Hook | docs/form-popup.md | | useAbTable | 基于 Element Plus 的通用表格 Hook，分页/排序/搜索/表单弹窗开箱即用 | docs/table.md | | useTabManager | 基于 useStorage 的持久化标签页管理 Hook | docs/tab-manager.md | | useCountdownPolling | 倒计时轮询 Hook，支持异步回调 | docs/countdown-polling.md | | request | 基于 axios 的通用 HTTP 请求封装，支持全局配置 | docs/request.md |

快速开始

表单弹窗

// main.ts — 全局配置（可选，在应用入口调用一次）
import {configureFormPopup} from '@biancd/admin'

configureFormPopup({
    uploadHeaders: {Authorization: 'Bearer xxx'},
    uploadAction: '/api/upload',
})

<!-- 任意 .vue 组件中 -->
<script setup>
  import {useFormPopup} from '@biancd/admin'

  const popup = useFormPopup({
    rules: [
      {type: 'input', field: 'name', title: '名称', validate: [{required: true}]},
    ],
    addService: (data) => api.create(data),
    editService: (data) => api.update(data),
  })
</script>

<template>
  <el-button @click="popup.addShow()">新增</el-button>
  <el-button @click="popup.editShow(row)">编辑</el-button>
</template>

通用表格

<script setup>
  import {useAbTable, AbTable, defaultOptButtons} from '@biancd/admin'
  import type {CoTable} from '@biancd/admin'
  import * as userApi from '@/api/user'

  const options: CoTable = {
    column: [
      {type: 'selection'},
      {prop: 'name', label: '姓名', width: 120},
      {
        prop: 'status', label: '状态', render: 'tag',
        replaceValue: {1: '启用', 0: '禁用'},
        custom: {1: 'success', 0: 'info'},
      },
      {
        render: 'buttons', label: '操作', width: 180,
        fixed: 'right', buttons: defaultOptButtons(),
      },
    ],
    formRules: [
      {type: 'input', field: 'name', title: '姓名', validate: [{required: true}]},
    ],
  }

  const {table} = useAbTable(userApi, options)
</script>

<template>
  <AbTable/>
</template>

标签页管理

<script setup>
  import {useTabManager} from '@biancd/admin'
  import ComponentA from './ComponentA.vue'
  import ComponentB from './ComponentB.vue'

  const {activeId, options, currentComponent} = useTabManager('my-tabs', [
    {label: '标签 A', value: 1, component: ComponentA},
    {label: '标签 B', value: 2, component: ComponentB},
  ])
</script>

<template>
  <el-segmented v-model="activeId" :options="options"/>
  <component :is="currentComponent"/>
</template>

倒计时轮询

<script setup>
  import {useCountdownPolling} from '@biancd/admin'

  const {countdown, running, start, stop, reset} = useCountdownPolling(
      30, // 每 30 秒轮询一次
      async () => {
        await fetchData() // 异步请求完成后才重置倒计时
      },
      (count) => {
        console.log(`剩余 ${count} 秒`)
      },
  )
</script>

<template>
  <div>
    <span>倒计时: {{ countdown }}s</span>
    <el-button @click="start" :disabled="running">开始</el-button>
    <el-button @click="stop">停止</el-button>
    <el-button @click="reset">重置</el-button>
  </div>
</template>

HTTP 请求

// main.ts — 全局配置
import {configureRequest} from '@biancd/admin'

configureRequest({
    baseURL: import.meta.env.VITE_API_BASE,
    tokenGetter: () => useUserinfo().token,
    onUnauthorized: () => {
        useUserinfo().logout()
        window.location.hash = '/login'
    },
})

// 任意 .ts 文件中使用
import {request} from '@biancd/admin'

const users = await request<User[]>('/api/users')
await request('/api/user', {name: 'Alice'}, 'post', '创建成功')

// 创建独立配置的请求函数
import {createRequest} from '@biancd/admin'

const upload = createRequest({baseURL: 'https://cdn.example.com'})