Gate.io 管理后台组件库

这是 Gate.io 内部使用的管理后台 UI 组件库，基于 Vue 3 + TypeScript 开发。

安装

# 从公司内部 npm 仓库安装
npm install @gateio/admin-components --registry=http://your-company-npm-registry

使用方法

全局引入

import { createApp } from 'vue';
import App from './App.vue';
import GateIOAdminComponents from '@gateio/admin-components';
import '@gateio/admin-components/dist/style.css';

const app = createApp(App);
app.use(GateIOAdminComponents);
app.mount('#app');

按需引入

import { createApp } from 'vue';
import App from './App.vue';
import { GFooter, GBreadcrumb } from '@gateio/admin-components';
import '@gateio/admin-components/dist/style.css';

const app = createApp(App);
app.component('GFooter', GFooter);
app.component('GBreadcrumb', GBreadcrumb);
app.mount('#app');

组件列表

当前组件库包含以下组件：

• GFooter: 页脚组件
• GBreadcrumb: 面包屑导航组件

更多组件正在开发中...

开发指南

初始化项目

# 安装依赖
npm install

# 启动开发服务器
npm run dev

构建组件库

# 构建
npm run build

添加新组件

要添加一个新组件，请按照以下步骤操作：

1. 在 src/components 目录下创建一个新的文件夹，文件夹名称应该是组件名（小写） 例如: button, table, dialog 等

2. 在组件文件夹中创建 index.vue 文件实现组件

3. 运行自动导出脚本，更新组件导出：

   npm run generate-exports

4. 自动导出脚本会扫描 src/components 目录，并将所有组件添加到导出文件中。组件会自动添加 G 前缀和首字母大写，例如：

   • footer 文件夹中的组件会导出为 GFooter
   • breadcrumb 文件夹中的组件会导出为 GBreadcrumb

组件命名规则

• 组件文件夹名称应该使用全小写，单词之间可以使用短横线连接（例如：date-picker）
• 组件导出名称会自动转换为以 G 开头，后面跟着首字母大写的文件夹名（例如：GDatePicker）

目录结构

gateio_admin_components/
├── dist/                # 打包输出目录
├── src/
│   ├── components/      # 组件目录
│   │   ├── footer/      # 页脚组件
│   │   │   └── index.vue
│   │   ├── breadcrumb/  # 面包屑组件
│   │   │   └── index.vue
│   │   └── ...          # 其他组件
│   ├── utils/           # 工具函数
│   ├── App.vue          # 开发环境组件展示
│   ├── main.ts          # 开发环境入口
│   ├── index.ts         # 组件库入口
├── index.html           # 开发环境 HTML
├── tsconfig.json        # TypeScript 配置
├── vite.config.ts       # Vite 配置
└── package.json         # 项目配置