# biancd-admin

**Repository Path**: anthonyjhon/biancd-admin

## Basic Information

- **Project Name**: biancd-admin
- **Description**: 一个基于Vue3+TS+ElementPlus的后台管理系统快速搭建组件库
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-03
- **Last Updated**: 2026-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# biancd-admin

## 介绍

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

## 软件架构

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

## 安装

```bash
npm install @biancd/admin
```

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

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

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

```ts
// 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](./docs/form-popup.md)               |
| `useAbTable`          | 基于 Element Plus 的通用表格 Hook，分页/排序/搜索/表单弹窗开箱即用 | [docs/table.md](./docs/table.md)                         |
| `useTabManager`       | 基于 useStorage 的持久化标签页管理 Hook                            | [docs/tab-manager.md](./docs/tab-manager.md)             |
| `useCountdownPolling` | 倒计时轮询 Hook，支持异步回调                                      | [docs/countdown-polling.md](./docs/countdown-polling.md) |
| `request`             | 基于 axios 的通用 HTTP 请求封装，支持全局配置                      | [docs/request.md](./docs/request.md)                     |

## 快速开始

### 表单弹窗

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

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

```vue
<!-- 任意 .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>
```

### 通用表格

```vue

<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>
```

### 标签页管理

```vue

<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>
```

### 倒计时轮询

```vue

<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 请求

```ts
// 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
// 任意 .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'})
```