← Browse

@chenychenyu/robot-admin

在这里,当 Bun 的极致性能遇上 Vue3 的组合式 API,当 TypeScript 的类型安全拥抱 UnoCSS 的原子化样式...

instructionscopilot

Install

agr install @chenychenyu/robot-admin --target copilot

Writes 1 file into .github/copilot-instructions.md, pinned to git-889dc207.

  • .github/copilot-instructions.md

Document

🤖 Robot Admin — AI 编码指南

本文件面向 AI 编程助手(Copilot / Cursor / Claude 等)。 在对本项目生态进行任何代码生成、修改或建议之前,必须完整阅读本指南。 最后更新:2026-04-13

目录

一、项目全景 · 二、技术栈与工具链 · 三、包管理器与运行命令 · 四、项目结构与目录约定 · 五、编码规范 · 六、Vue SFC 编写规范 · 七、组件库编写规范 · 八、演示页面编写规范 · 九、Store 编写规范 · 十、API 与请求规范 · 十一、路由与权限 · 十二、样式与主题规范 · 十三、TypeScript 规范 · 十四、Git 提交规范 · 十五、ESLint 规则摘要 · 十六、构建与部署 · 十七、生态包速查表 · 十八、常见坑与注意事项 · 十九、新功能开发 Checklist


一、项目全景

Robot Admin 是一个企业级后台管理系统生态,由 4 个关联仓库组成:

仓库简称用途npm 包名
Robot_Admin主项目Vue 3 SPA 后台应用
naive-ui-components组件库51 个业务组件(基于 Naive UI)@robot-admin/naive-ui-components
robot-admin-packages包集合7 个独立 npm 包(指令/请求/布局/主题等)@robot-admin/*
AgileTeam_Doc文档库VitePress 2.0 团队文档站

核心信息

  • 作者: ChenYu (ycyplus@gmail.com)
  • 许可证: MIT
  • 演示站: https://robotadmin.cn
  • Node 版本要求: >=22.x
  • 包管理器: Bun >=1.x不使用 npm / yarn / pnpm

二、技术栈与工具链

核心框架

技术版本用途
Vue3.5.30渐进式框架
TypeScript~5.8.3类型安全
Vite8.0.3构建工具
Naive UI2.44.1UI 组件库
Pinia3.0.4状态管理
Vue Router4.6.4路由系统
UnoCSS66.6.6原子化 CSS(presetWind3 + attributify + icons)
Sass1.97.3样式预处理

自有包生态(@robot-admin/*)

包名版本功能
@robot-admin/naive-ui-components0.8.251+ 个业务组件
@robot-admin/layout2.2.06 种布局模式 + 设置管理
@robot-admin/request-core0.1.3Axios + 7 插件 + useTableCrud
@robot-admin/theme0.1.1主题切换(Light/Dark/System)
@robot-admin/directives1.1.011 个 Vue 指令
@robot-admin/form-validate2.0.048+ 验证规则
@robot-admin/file-utils1.0.0文件处理(Excel/ZIP/分片上传)
@robot-admin/git-standards1.0.3Git 工程化标准

开发工具链

工具用途
ESLint 10 + Oxlint双重 Lint(Oxlint 用 Rust 编写,极速)
Prettier 3.8代码格式化
Commitizen + CommitlintGit 提交规范
Husky 9 + lint-stagedPre-commit 钩子
unplugin-auto-importVue/Router/Pinia/VueUse 自动导入
unplugin-vue-components组件自动导入(NaiveUiResolver + RobotNaiveUiResolver)

三、包管理器与运行命令

⚠️ 强制使用 Bun

# ✅ 正确
bun install
bun run dev
bun run build
bun run lint

# ❌ 错误 — 不要使用
npm install
yarn install
pnpm install

主要脚本

命令用途说明
bun run dev标准开发默认端口 1988
bun run dev:local本地包调试USE_LOCAL_PACKAGES=true
bun run dev:components组件库联调USE_LOCAL_COMPONENTS=true
bun run dev:devtoolsVue DevToolsVITE_DEVTOOLS=true
bun run build生产构建env-manager prod 模式
bun run build:test测试构建--mode test
bun run build:staging预发构建--mode staging --profile
bun run lint代码检查Oxlint → ESLint 双重检查
bun run format代码格式化Prettier
bun run type-watch实时 TS 检查vue-tsc --watch
bun run analyze构建分析rollup-plugin-visualizer
bun run cz规范化提交Commitizen 交互式

组件库脚本(naive-ui-components)

bun run dev          # watch 模式开发
bun run build        # tsdown + scss + merge-css + gen-exports 全流程
bun run lint         # oxlint + eslint
bun run check:exports # 检测导出命名冲突

包集合脚本(robot-admin-packages)

# 在具体包目录下
bun run build        # 构建单个包
bun run changeset    # 创建变更集
bun run version      # 版本号递增
bun run release      # 发布到 npm

四、项目结构与目录约定

Robot_Admin 主结构

Robot_Admin/
├── src/
│   ├── main.ts                    # 应用入口(启动引导流程)
│   ├── App.vue                    # 根组件(NConfigProvider 包裹)
│   │
│   ├── api/                       # API 接口定义
│   │   ├── auth.ts                # 认证接口
│   │   ├── permission-manage.ts   # 权限 CRUD
│   │   └── generated/             # 自动生成的 TS 类型
│   │
│   ├── assets/                    # 静态资源(images/css/data)
│   │
│   ├── components/                # Vue 组件
│   │   ├── global/                # 全局组件(C_ 大写前缀)
│   │   │   ├── C_Header/          # 顶部导航
│   │   │   ├── C_Layout/          # 布局容器
│   │   │   ├── C_Login/           # 登录组件
│   │   │   ├── C_Settings/        # 设置面板
│   │   │   └── ...
│   │   └── local/                 # 局部业务组件(c_ 小写前缀)
│   │       ├── c_detail/          # 详情组件
│   │       ├── c_role/            # 角色组件
│   │       └── ...
│   │
│   ├── composables/               # 组合式函数(业务逻辑解耦)
│   │   ├── useLoginController.ts  # 登录控制器
│   │   ├── useLayoutBridge.ts     # 布局桥接(适配器模式)
│   │   └── useLayoutCache.ts      # 页面缓存管理
│   │
│   ├── config/                    # 配置汇总
│   │   ├── theme/                 # 主题系统(tokens + overrides)
│   │   ├── vite/                  # Vite 配置拆分
│   │   └── keepAliveConfig.ts     # 页面缓存配置
│   │
│   ├── constant/                  # 常量定义
│   │   └── index.ts               # TOKEN/TIME_STAMP/TIMEOUT
│   │
│   ├── hooks/                     # 通用 Hooks
│   │   ├── useCopy/               # 剪贴板复制
│   │   ├── useFormSubmit/         # 表单提交
│   │   └── usePrintWatermark/     # 打印水印
│   │
│   ├── lib/                       # 第三方库集成
│   │   └── version.ts             # 版本信息输出
│   │
│   ├── plugins/                   # Vue 插件(初始化系统)
│   │   ├── loading.ts             # 首屏加载动画
│   │   ├── store.ts               # Pinia + 持久化
│   │   ├── request-core.ts        # Axios 请求核心
│   │   ├── layout.ts              # 布局系统
│   │   ├── naive-ui-plugin.ts     # 全局通知服务
│   │   ├── highlight.ts           # 代码高亮(异步)
│   │   ├── markdown.ts            # Markdown(异步懒加载)
│   │   ├── analytics.ts           # Vercel 分析(仅生产)
│   │   └── index.ts               # 统一导出
│   │
│   ├── router/                    # 路由系统
│   │   ├── index.ts               # createRouter(hash/history 可配)
│   │   ├── permission.ts          # 前置守卫(登录检查+动态路由)
│   │   ├── dynamicRouter.ts       # 后端 JSON → RouteRecordRaw
│   │   ├── publicRouter.ts        # 静态路由(login/404/preview)
│   │   └── previewRouter.ts       # 免登录预览路由
│   │
│   ├── stores/                    # Pinia 状态管理
│   │   ├── user/                  # 用户认证(token/userInfo/logout)
│   │   ├── permission/            # 权限(菜单列表/按钮权限)
│   │   ├── theme/                 # 主题(dark/light/overrides)
│   │   ├── language/              # 国际化(locale/dateLocale)
│   │   ├── settings/              # 布局设置(layoutMode/sidebar)
│   │   └── reLogin/               # 重新登录弹窗
│   │
│   ├── styles/                    # 全局样式
│   │   ├── index.scss             # 主入口
│   │   ├── theme-variables.scss   # CSS 变量
│   │   └── naive-ui-override.scss # Naive UI 样式定制
│   │
│   ├── types/                     # TypeScript 类型
│   │   ├── env.d.ts               # 环境变量声明
│   │   ├── global.d.ts            # 全局类型
│   │   ├── modules/               # 业务模块类型(23+ d.ts)
│   │   ├── auto-imports.d.ts      # 自动生成
│   │   └── components.d.ts        # 自动生成
│   │
│   ├── utils/                     # 工具函数
│   │   ├── d_auth.ts              # Token 管理 + 超时检查(8小时)
│   │   ├── d_route.ts             # 菜单过滤 + KeepAlive 收集
│   │   ├── errorHandler/          # 全局错误处理
│   │   └── unocss/                # UnoCSS 快捷方式 + 图标 Safelist
│   │
│   └── views/                     # 业务页面
│       ├── home/                  # 首页(eager 加载)
│       ├── dashboard/             # 数据大屏(eager 加载)
│       ├── login/                 # 登录页
│       ├── demo/                  # 54 个功能演示
│       │   ├── 01-icon/
│       │   ├── 07-form/
│       │   ├── 10-table/
│       │   ├── 38-upload/
│       │   └── ...
│       ├── sys-manage/            # 系统管理
│       └── error-page/            # 错误页
│
├── envs/                          # 环境变量文件
├── lang/                          # i18n 语言文件
├── scripts/                       # 构建脚本
├── docs/                          # 项目分析文档
├── eslint.config.ts               # ESLint Flat Config
├── commitlint.config.js           # 提交规范
├── unocss.config.ts               # UnoCSS 配置
├── vite.config.ts                 # Vite 配置
├── tsconfig.json                  # TypeScript 配置
└── package.json                   # 项目依赖

命名约定总结

类型约定示例
全局组件目录C_ + PascalCaseC_Header/, C_Settings/
局部组件目录c_ + snake_casec_detail/, c_role/
组件库组件C_ + PascalCaseC_Form, C_Table, C_Upload
Composableuse + PascalCaseuseLoginController, useLayoutBridge
Hookuse + PascalCaseuseCopy, useFormSubmit
Stores_ + camelCase + Stores_userStore, s_themeStore
工具函数d_ 前缀(domain 工具)d_auth.ts, d_route.ts
Demo 目录数字编号-功能名01-icon/, 07-form/, 10-table/
类型文件.d.ts 后缀form.d.ts, table.d.ts
样式文件index.scss与组件同目录

五、编码规范

通用规则

  1. 引号:TypeScript/JavaScript 使用单引号,HTML 模板中使用双引号
  2. 缩进:2 空格
  3. 分号:不使用尾部分号(Prettier 配置)
  4. 最大深度:嵌套不超过 4 层(ESLint max-depth: 4
  5. 圈复杂度:函数复杂度警告阈值 10(ESLint complexity: 10
  6. JSDoc:所有函数声明、方法定义、类声明必须添加 JSDoc 注释
  7. 文件头注释:每个文件必须包含作者、日期、描述信息

文件头注释模板

/*
 * @Author: ChenYu ycyplus@gmail.com
 * @Date: 2026-03-06
 * @LastEditors: ChenYu ycyplus@gmail.com
 * @LastEditTime: 2026-03-06
 * @FilePath: \Robot_Admin\src\xxx\xxx.ts
 * @Description: 文件描述
 * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
 */

JSDoc 注释风格

本项目使用特殊的 JSDoc 标记约定:

/**
 * * @description: 用于描述功能(星号标记 = 功能说明)
 * ? @param {object} data 参数说明(问号标记 = 参数说明)
 * ! @return {Promise<T>} 返回值说明(叹号标记 = 返回值说明)
 */

导入顺序

// 1. 外部样式
import '@robot-admin/layout/style'
import '@robot-admin/naive-ui-components/style.css'
import 'virtual:uno.css'

// 2. Vue 核心
import { ref, computed, watch, onMounted } from 'vue'

// 3. 路由/状态
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'

// 4. UI 库
import { NCard, NButton, NSpace } from 'naive-ui'

// 5. 自有包
import { postData, getData } from '@robot-admin/request-core'
import { PRESET_RULES } from '@robot-admin/form-validate'

// 6. 项目内部(使用路径别名)
import { s_userStore } from '@/stores/user'
import type { LoginResponse } from '@/api/auth'

// 7. 相对路径
import { layoutOptions, testDataConfig } from './data'
import DefaultLayout from './layouts/DefaultLayout/index.vue'

路径别名

// tsconfig.json 中配置
'@/*'       → 'src/*'
'_views/*'  → 'src/views/*'

六、Vue SFC 编写规范

script setup 标准结构

<template>
  <!-- 模板内容 -->
</template>

<script setup lang="ts">
  // ① defineOptions(组件名称)
  defineOptions({ name: 'ComponentName' })

  // ② Props 定义(interface + withDefaults)
  interface Props {
    title: string
    size?: 'small' | 'medium' | 'large'
  }
  const props = withDefaults(defineProps<Props>(), {
    size: 'medium',
  })

  // ③ Emits 定义
  const emit = defineEmits<{
    submit: [payload: SubmitPayload]
    'update:modelValue': [value: string]
  }>()

  // ④ 外部导入的响应式状态(Stores / Composables)
  const userStore = s_userStore()
  const route = useRoute()
  const message = useMessage()

  // ⑤ 响应式状态
  const loading = ref(false)
  const formData = ref<FormModel>({})

  // ⑥ 计算属性
  const isValid = computed(() => formData.value.name !== '')

  // ⑦ 方法
  const handleSubmit = async () => {
    loading.value = true
    try {
      await submitApi(formData.value)
      emit('submit', { data: formData.value })
    } finally {
      loading.value = false
    }
  }

  // ⑧ 生命周期
  onMounted(() => {
    // 初始化逻辑
  })

  // ⑨ Watch
  watch(
    () => props.title,
    newVal => {
      // 响应变化
    }
  )

  // ⑩ defineExpose(暴露给父组件的方法/属性)
  defineExpose({
    validate,
    resetFields,
    formData,
  })
</script>

<style lang="scss" scoped>
  @use './index.scss';
</style>

关键编写规则

  1. <script setup lang="ts"> — 永远使用 setup + TypeScript
  2. defineOptions({ name: 'XXX' }) — 所有组件必须声明 name(用于 DevTools 和 KeepAlive)
  3. Props 用 interface + withDefaults — 不用 defineProps({ ... }) 对象语法
  4. Emits 用泛型语法defineEmits<{ event: [payload: Type] }>()
  5. 样式使用 @use 导入<style lang="scss" scoped> + @use './index.scss'
  6. 自动导入生效ref, computed, watch, onMounted, useRoute, useRouter, defineStore 等无需手动导入
  7. Naive UI 组件自动导入NCard, NButton, NModal 等无需手动导入
  8. C_ 组件自动导入C_Form, C_Table, C_Icon 等由 RobotNaiveUiResolver 自动解析

七、组件库编写规范

架构原则:薄 UI 壳 + 厚 Composable 引擎

┌────────────────────────────────────┐
│  index.vue (薄 UI 壳, ~100 行)      │  ← 模板 + 事件桥接
├────────────────────────────────────┤
│  composables/                      │  ← 业务逻辑引擎
│    useXxxConfig.ts                 │     配置解析 + 默认值
│    useXxxState.ts                  │     状态管理 + CRUD
│    useXxxRenderer.ts               │     VNode 渲染逻辑
├────────────────────────────────────┤
│  types.ts                          │  ← 完整类型定义
├────────────────────────────────────┤
│  index.ts                          │  ← 导出入口
├────────────────────────────────────┤
│  index.scss                        │  ← 组件样式
└────────────────────────────────────┘

组件目录结构(三种复杂度)

简单组件

C_Code/
├── index.ts       # export { default as C_Code } from './index.vue'
├── index.vue      # 组件(50-100 行)
└── index.scss     # 样式(可选)

中等复杂组件

C_ActionBar/
├── index.ts       # 导出组件 + 类型
├── index.vue      # 组件
├── types.ts       # 类型定义
└── index.scss     # 样式

高度复杂组件

C_Form/
├── index.ts              # 导出组件 + 类型 + composables
├── index.vue             # 薄 UI 壳(~100 行)
├── types.ts              # 70+ 接口定义
├── composables/          # 逻辑引擎
│   ├── useFormConfig.ts  # 配置解析
│   ├── useFormState.ts   # 状态管理(300+ 行)
│   └── useFormRenderer.ts # VNode 渲染
└── layouts/              # 布局变体
    ├── Default/
    ├── Grid/
    ├── Card/
    ├── Tabs/
    ├── Steps/
    └── Dynamic/

组件库入口文件 index.ts 规范

// 导出组件
export { default as C_Form } from './index.vue'

// 导出类型
export type { FormOption, FormModel, FormInstance, LayoutType } from './types'

// 导出 Composables(供外部扩展使用)
export { useFormState } from './composables/useFormState'
export {
  useFormRenderer,
  registerRenderer,
} from './composables/useFormRenderer'
export type { ComponentMap, FormRenderer } from './composables/useFormRenderer'

组件 Props 设计原则

配置收拢模式 — 将多个分散的 Props 收拢为一个 config 对象:

// ❌ 不推荐:Props 爆炸
<C_Form
  layout="grid"
  :cols="2"
  label-placement="left"
  :show-actions="true"
  :validate-on-change="false"
  ...13个props
/>

// ✅ 推荐:配置收拢
<C_Form
  :options="fields"
  :config="{
    layout: 'grid',
    grid: { cols: 2 },
    labelPlacement: 'left',
    onFieldChange: handleChange,
  }"
/>

新建组件的固定流程

# 1. 在组件库中创建目录
mkdir naive-ui-components/src/components/C_YourComponent

# 2. 创建入口文件
# index.ts
export { default as C_YourComponent } from './index.vue'

# 3. 创建组件文件
# index.vue — 遵循上述 SFC 规范

# 4. 构建(自动注册到 exports)
bun run build

# 5. 主项目中直接使用(自动导入)
<C_YourComponent :options="data" />

CSS 变量三层方案

组件样式使用 CSS 变量,支持主题自适应:

// 组件 SCSS
.c-breadcrumb {
  // 暴露 CSS 变量,方便主项目覆盖
  --c-breadcrumb-icon-size: 16px;
  --c-breadcrumb-gap: 4px;

  display: flex;
  align-items: center;
}

全局 CSS 变量回退到 Naive UI:

:root {
  --c-primary: var(--primary-color, #2080f0);
  --c-success: var(--success-color, #18a058);
  --c-error: var(--error-color, #d03050);
  --c-bg-body: var(--body-color, #ffffff);
  --c-text-1: var(--text-color-1, #262626);
  --c-border: var(--border-color, #e5e7eb);
  --c-radius: var(--border-radius, 6px);
}

八、演示页面编写规范

演示页面(Demo View)标准结构

每个 demo 页面遵循以下目录结构:

views/demo/XX-feature-name/
├── index.vue           # 页面主文件
├── index.scss          # 页面样式(scoped)
├── data.ts             # 配置数据、常量、mock 数据
└── layouts/            # 布局变体组件(可选)
    ├── DefaultLayout/
    │   └── index.vue
    └── GridLayout/
        └── index.vue

演示页面 index.vue 标准模板

<!--
 * @Author: ChenYu ycyplus@gmail.com
 * @Date: 2026-03-06
 * @Description: XXX 组件 - 演示页面
 * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
-->

<template>
  <div class="xxx-demo">
    <!-- 1. 页面标题 -->
    <NH1>XXX 组件场景示例</NH1>

    <!-- 2. 控制面板(可选) -->
    <NCard
      class="control-panel"
      :bordered="false"
    >
      <!-- 模式切换、配置选项 -->
    </NCard>

    <!-- 3. 主内容区 -->
    <NCard :bordered="false">
      <C_XxxComponent
        :options="options"
        :config="config"
        @submit="handleSubmit"
      />
    </NCard>

    <!-- 4. 状态展示(可选) -->
    <div class="status-section">
      <!-- 实时数据展示 -->
    </div>
  </div>
</template>

<script setup lang="ts">
  // 从 data.ts 导入配置数据
  import { options, config, mockData } from './data'

  const message = useMessage()

  // 响应式状态
  const formData = ref({})

  // 事件处理
  const handleSubmit = (payload: any) => {
    console.log('提交:', payload)
    message.success('操作成功')
  }
</script>

<style lang="scss" scoped>
  @use './index.scss';
</style>

数据配置文件 data.ts 模式

将所有配置数据、常量、mock 数据抽离到 data.ts

// data.ts
import type { FormOption } from '@robot-admin/naive-ui-components'

// 静态配置常量
export const EDIT_MODES = [
  { value: 'modal', label: '弹窗编辑', icon: 'mdi:window-maximize' },
  { value: 'row', label: '行内编辑', icon: 'mdi:table-edit' },
  { value: 'cell', label: '单元格编辑', icon: 'mdi:pencil' },
  { value: 'none', label: '只读模式', icon: 'mdi:eye' },
] as const

// 表单字段配置
export const formOptions: FormOption[] = [
  {
    prop: 'username',
    label: '用户名',
    type: 'input',
    rules: [{ required: true, message: '请输入' }],
  },
  // ...
]

// Mock 数据工厂
export const testDataConfig = {
  getTestData(layout: string) {
    return {
      /* ... */
    }
  },
}

页面结构四段式

所有 demo 页面遵循四段式布局:

  1. 页面标题<NH1>XXX 组件场景示例</NH1> + 简短描述
  2. 控制面板 — 布局切换、模式选择、配置开关
  3. 主内容区 — 组件展示区域
  4. 状态展示 — 实时数据统计、验证状态、预览面板

九、Store 编写规范

Setup Store 语法(推荐)

import { defineStore } from 'pinia'

export const s_themeStore = defineStore('theme-extended', () => {
  // ============ 状态 ============
  const isDark = ref(false)
  const mode = ref<ThemeMode>('light')

  // ============ 计算属性 ============
  const currentTheme = computed(() => (isDark.value ? darkTheme : lightTheme))

  // ============ Actions ============
  const init = () => {
    /* ... */
  }
  const setMode = async (newMode: ThemeMode) => {
    /* ... */
  }

  return {
    isDark,
    mode,
    currentTheme,
    init,
    setMode,
  }
})

Options Store 语法(简单场景)

export const s_userStore = defineStore('user', {
  state: () => ({
    token: readStorage<string>(TOKEN, ''),
    userInfo: readStorage<UserInfo>('userInfo', {}),
  }),

  getters: {
    hasUserInfo: state => Object.keys(state.userInfo).length > 0,
  },

  actions: {
    setToken(token: string) {
      this.token = token
      localStorage.setItem(TOKEN, JSON.stringify(token))
    },

    async logout(isExpired = false) {
      // 清理逻辑...
    },
  },
})

Store 规范要求

  1. 命名s_ 前缀 + 描述 + Store 后缀(s_userStore, s_themeStore
  2. 文件位置src/stores/<domain>/index.ts
  3. 持久化:使用 pinia-plugin-persistedstate(已全局配置)
  4. 区块注释:使用 // ============ 状态 ============ 分隔不同关注点
  5. 类型安全:State 中的复杂对象必须定义 interface

十、API 与请求规范

API 文件编写

// src/api/auth.ts
import { postData, getData } from '@robot-admin/request-core'
import type { PostAuthLoginResponse } from './generated'

/**
 * * @description: 用户登录接口
 * ? @param {object} data 登录数据
 * ! @return {Promise<PostAuthLoginResponse>}
 */
export const loginApi = (data: { username: string; password: string }) =>
  postData<PostAuthLoginResponse>('/auth/login', data)

/**
 * * @description: 获取菜单权限列表
 * ! @return {Promise<MenuListResponse>}
 */
export const getAuthMenuListApi = () =>
  getData<MenuListResponse>('/auth/menu-list')

Request Core 集成

// src/plugins/request-core.ts
import { createRequestCore } from '@robot-admin/request-core'

export function setupRequestCore(app: App) {
  const requestCore = createRequestCore({
    request: {
      baseURL: VITE_API_BASE,
      timeout: 10000,
      headers: { 'Content-Type': 'application/json' },
    },
    interceptors: {
      request: config => {
        // 注入 token
        const { token } = s_userStore()
        if (token) config.headers.Authorization = `Bearer ${token}`
        return config
      },
      response: response => {
        // 业务码判断
        const { code, message: msg } = response.data
        const isSuccess =
          code === 200 || code === 0 || code === '200' || code === '0'
        if (!isSuccess) return Promise.reject(new Error(msg))
        return response
      },
      responseError: async error => {
        // 401 → 重新登录弹窗
        if (error.response?.status === 401) {
          reLoginStore.show(userStore.userInfo?.username || '')
          // ... 等待重新登录
        }
        return Promise.reject(error)
      },
    },
  })
}

useTableCrud 表格数据管理

import { useTableCrud } from '@robot-admin/request-core'

const table = useTableCrud({
  api: {
    list: '/api/employees',
    create: '/api/employees',
    update: '/api/employees/:id',
    delete: '/api/employees/:id',
    detail: '/api/employees/:id',
  },
  columns: [...],
  pagination: { pageSize: 20 },
})

// 模板中
<C_Table :crud="table" :config="{ edit: { mode: 'modal' } }" />

表单验证规则

import { PRESET_RULES } from '@robot-admin/form-validate'

const rules = {
  name: [PRESET_RULES.required('姓名'), PRESET_RULES.length('姓名', 2, 20)],
  age: [PRESET_RULES.required('年龄'), PRESET_RULES.range('年龄', 18, 65)],
  email: [PRESET_RULES.required('邮箱'), PRESET_RULES.email('邮箱')],
  mobile: [PRESET_RULES.required('手机号'), PRESET_RULES.mobile('手机号')],
}

十一、路由与权限

动态路由加载策略

// 高频页面:eager 预加载(打包到主 bundle)
const EAGER_MODULES = import.meta.glob('@/views/home/**/*.vue', { eager: true })
const EAGER_DASHBOARD = import.meta.glob('@/views/dashboard/**/*.vue', {
  eager: true,
})

// 其他页面:lazy 按需加载
const LAZY_MODULES = import.meta.glob('@/views/**/!(home|dashboard)*.vue')

路由守卫流程

用户请求页面
  ↓
是预览路由 (/preview/*) → 直接放行
  ↓
未登录 + 需要认证 → 重定向 /login
  ↓
已登录 + 访问 /login → 重定向 /home
  ↓
已登录 + authMenuList 为空 → initDynamicRouter()
  ↓
Token 超时(8小时无活跃) → 重新登录对话框
  ↓
正常渲染页面

新增页面的路由配置

路由配置通过后端 JSON 动态生成,本地开发使用 src/assets/data/dynamicRouter.json

{
  "path": "/demo/55-new-feature",
  "name": "demo-55-new-feature",
  "component": "/demo/55-new-feature/index",
  "meta": {
    "title": "新功能演示",
    "icon": "mdi:star",
    "keepAlive": true,
    "hidden": false
  }
}

十二、样式与主题规范

样式编写优先级

  1. UnoCSS 原子类(优先使用) — 间距、布局、颜色等
  2. 组件 SCSS(复杂样式) — <style lang="scss" scoped> + @use './index.scss'
  3. CSS 变量(主题适应) — var(--c-primary)

UnoCSS 使用示例

<!-- ✅ 使用 UnoCSS 原子类 -->
<div class="flex items-center gap-2 p-4 rounded-lg bg-white dark:bg-gray-800">
  <span class="text-sm text-gray-600">标签</span>
</div>

<!-- ✅ Attributify 模式 -->
<div
  flex
  items-center
  gap-2
  p-4
>
  <span
    text-sm
    text-gray-600
    >标签</span
  >
</div>

样式隔离

<style lang="scss" scoped>
  /* 使用 @use 导入独立样式文件 */
  @use './index.scss';
</style>

主题系统三层架构

Layer 1: Design Tokens (src/config/theme/tokens.ts)
  → 定义原始颜色、间距常量
  ↓
Layer 2: @robot-admin/theme (Light/Dark/System)
  → 基础主题模式管理
  ↓
Layer 3: s_themeStore (Naive UI 集成扩展)
  → 合并 themeOverrides → NConfigProvider 注入

十三、TypeScript 规范

tsconfig 关键配置

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "composite": true,
    "incremental": true,
    "paths": {
      "@/*": ["src/*"],
      "_views/*": ["src/views/*"]
    }
  }
}

类型定义位置

类型位置示例
环境变量src/types/env.d.tsImportMetaEnv
全局类型src/types/global.d.tsAppConfig
业务模块src/types/modules/*.d.tsform.d.ts, table.d.ts
自动生成src/types/auto-imports.d.tsunplugin 生成
API 类型src/api/generated/自动生成的请求/响应类型
组件库类型组件目录 types.tsC_Form/types.ts

类型编写规则

// ✅ 使用 interface 定义对象类型
interface UserInfo {
  username?: string
  password?: string
  [key: string]: unknown
}

// ✅ 使用 type 定义联合类型
type LayoutType = 'default' | 'inline' | 'grid' | 'card' | 'tabs' | 'steps'
type EditMode = 'modal' | 'row' | 'cell' | 'none'

// ✅ 使用泛型约束
export function useLoginController<
  TResponse extends { code: string; data?: any } = any,
>(options: UseLoginControllerOptions<TResponse>) {
  /* ... */
}

// ✅ 使用 defineProps 类型参数
const props = withDefaults(
  defineProps<{
    items?: BreadcrumbItem[]
    showIcon?: boolean
    iconSize?: number
  }>(),
  {
    showIcon: true,
    iconSize: 16,
  }
)

十四、Git 提交规范

提交格式

<type>(<scope>): <subject>

Type 类型

Type说明使用场景
wip开发中未完成的功能
feat新功能添加新特性
fix修复修复 Bug
docs文档更新文档
style样式代码格式(非 CSS 样式)
refactor重构既非 feat 也非 fix
perf性能性能优化
test测试添加/修改测试
chore杂务构建/辅助工具变动
revert回退回滚到某个版本
build构建构建流程/依赖变更
deps依赖更新依赖版本

Scope 要求

强制填写 scopescope-empty: [2, 'never']

常用 scope 示例:

  • components — 组件相关
  • views — 页面相关
  • stores — 状态管理
  • router — 路由相关
  • api — 接口相关
  • styles — 样式相关
  • config — 配置相关
  • utils — 工具函数
  • plugins — 插件相关
  • types — 类型定义

提交示例

# ✅ 正确
feat(components): 新增 C_AudioPlayer 音频播放组件
fix(router): 修复动态路由重复注册问题
docs(readme): 更新快速开始指南
perf(build): 优化 manualChunks 分包策略
deps(package): 升级 naive-ui 到 2.42.0

# ❌ 错误
update code                      # 缺少 type 和 scope
feat: 新增功能                    # 缺少 scope
Fix(router): 修复问题             # type 应为小写

提交流程

# 使用 Commitizen 交互式提交
bun run cz

# 或手动 git commit(会触发 commitlint 校验)
git add .
git commit -m "feat(views): 新增 55-new-feature 演示页面"

Pre-commit 钩子

Husky + lint-staged 在每次提交前自动执行:

# 对暂存的 JS/TS/Vue 文件
1. oxlint --max-warnings 0 --deny-warnings   # Rust Lint
2. eslint --fix --no-cache                     # ESLint 修复
3. prettier --write                            # 格式化

# 对 JSON/MD/YAML 文件
1. prettier --write                            # 格式化

十五、ESLint 规则摘要

配置概览

// eslint.config.ts — Flat Config 格式
export default [
  oxlint.configs['flat/recommended'], // Oxlint Rust 规则
  ...pluginVue.configs['flat/recommended'], // Vue 推荐规则
  ...vueTsEslintConfig(), // TS + Vue 集成
  // 自定义规则覆盖
]

重要规则

规则说明
quotes'single'单引号(TS)
semi'never' (Prettier)不使用分号
max-depth4最大嵌套深度
complexity['warn', 10]圈复杂度警告
jsdoc/require-jsdocerrorJSDoc 强制(function/method/class)
vue/component-name-in-template-casingPascalCase模板中组件名大驼峰
vue/no-unused-componentserror禁止未使用组件

忽略文件

dist/
node_modules/
src/types/auto-imports.d.ts
src/types/components.d.ts
*.config.*js

十六、构建与部署

Vite 构建优化

手动分包策略

// viteBuildConfig.ts
manualChunks: {
  'vue-vendor':      ['vue', 'vue-router', 'pinia'],
  'ui-vendor':       ['naive-ui'],
  'editor-vendor':   ['@kangc/v-md-editor', 'highlight.js'],
  'office-vendor':   ['xlsx', 'mammoth'],
  'calendar-vendor': ['FullCalendar 全家桶'],
  'spline-vendor':   ['@splinetool/runtime'],
  'graph-vendor':    ['@antv/x6', '@vue-flow/core'],
  'viz-vendor':      ['@visactor/vtable-gantt'],
}

依赖预构建

// vite.config.ts
optimizeDeps: {
  include: ['naive-ui', 'pinia', '@vueuse/core', 'echarts', ...],
  exclude: ['vue', 'vue-router', 'vue-demi'], // Vue 排除预构建
}

⚠️ 关键:Vue 全家桶必须排除预构建,因为 esbuild 拆包会导致 RefImpl 符号断裂。

重页面预加载

const HEAVY_PAGE_ROUTES = [
  '/demo/13-calendar', // FullCalendar
  '/demo/16-text-editor', // WangEditor
  '/demo/29-antv-x6-editor', // 流程图编辑器
]

生产环境优化

// esbuild 移除 console/debugger
esbuild: {
  drop: ['console', 'debugger'],
}

产物结构

dist/
├── js/          # 脚本(hash 命名,1年长期缓存)
├── css/         # 样式
├── images/      # 图片
├── fonts/       # 字体
├── media/       # 音视频
└── assets/      # 其他资源

组件库构建(naive-ui-components)

构建工具:Tsdown(Rolldown 封装,下一代 Rust 打包器)

bun run build
# 相当于:
# 1. tsdown          → ESM + CJS 双格式
# 2. build:scss      → Dart Sass 编译全局样式
# 3. build:css       → 合并 SFC scoped + 全局 CSS(去重)
# 4. build:exports   → 自动生成 package.json exports 映射

产物:

dist/
├── index.js          # 全量入口
├── resolver.js       # 自动导入解析器
├── style.css         # 全量样式
├── C_Form.js         # 按需入口
├── C_Form.css        # 按需样式
├── C_Table.js        # ...
└── ...

环境变量

# 共享
VITE_PORT=1988
VITE_APP_TITLE=AGILE TEAM | ROBOT ADMIN

# 开发环境
VITE_APP_ENV=development
VITE_API_BASE=/api
VITE_I18N_ENABLED=false

# 生产环境
VITE_APP_ENV=production
VITE_API_BASE=https://api.example.com

十七、生态包速查表

@robot-admin/directives — 11 个指令

指令用途参数
v-copy复制文本字符串值
v-debounce防抖{fn, delay} 默认 300ms
v-throttle节流{fn, delay}
v-drag拖拽
v-longpress长按{fn, delay}
v-permission权限控制string[] + AND/OR 模式
v-watermark水印{text, color, fontSize}
v-lazy图片懒加载图片 URL
v-loading局部 Loadingboolean
v-tooltipTooltip文本/配置对象
v-click-outside外部点击回调函数

@robot-admin/form-validate — 验证规则

import { PRESET_RULES } from '@robot-admin/form-validate'

// 常用规则
PRESET_RULES.required('字段名') // 必填
PRESET_RULES.length('字段名', min, max) // 长度范围
PRESET_RULES.range('字段名', min, max) // 数值范围
PRESET_RULES.email('邮箱') // 邮箱格式
PRESET_RULES.mobile('手机号') // 中国手机号
PRESET_RULES.url('URL') // URL 格式
PRESET_RULES.idCard('身份证') // 中国身份证
PRESET_RULES.ip('IP') // IP 地址

@robot-admin/request-core — 请求方法

import { getData, postData, putData, deleteData } from '@robot-admin/request-core'

// CRUD 快捷方法
getData<T>(url, params?)       // GET 请求
postData<T>(url, data?)        // POST 请求
putData<T>(url, data?)         // PUT 请求
deleteData<T>(url, params?)    // DELETE 请求

// 表格 CRUD
import { useTableCrud } from '@robot-admin/request-core'
const table = useTableCrud({ api, columns, pagination })

@robot-admin/layout — 布局模式

模式说明
side左侧菜单(传统 ERP)
top顶部菜单(内容优先)
mix左侧图标 + 悬浮菜单
mix-top左侧图标 + 顶部菜单
reverse-horizontal-mix顶部横向 + 右侧栏
card-layout卡片 hover + 网格抽屉

@robot-admin/file-utils — 文件处理

import {
  useExcel,
  useDownload,
  useJSZip,
  useChunkUpload,
} from '@robot-admin/file-utils'

// Excel 导入导出
const { exportExcel, importExcel } = useExcel()

// 通用下载(20+ 格式)
const { download } = useDownload()

// ZIP 压缩导出
const { createZip } = useJSZip()

// 大文件分片上传(并发 + 重试 + SHA 校验)
const { upload } = useChunkUpload()

十八、常见坑与注意事项

1. Vue 预构建排除

Vite 8 中 必须 将 Vue 全家桶排除预构建,否则 esbuild 会拆包导致 RefImpl 符号断裂:

optimizeDeps: {
  exclude: ['vue', 'vue-router', 'vue-demi', 'pinia-plugin-persistedstate'],
}

2. 自动导入范围

以下 API 已配置自动导入,无需手动 import

  • Vue: ref, computed, watch, onMounted, nextTick, reactive, readonly ...
  • Router: useRoute, useRouter
  • Pinia: defineStore, storeToRefs
  • VueUse: useLocalStorage, useClipboard, useDebounceFn
  • Naive UI: NCard, NButton, NModal, NSpace, useMessage, useDialog ...
  • 自定义: src/stores/*, src/composables/*, src/hooks/* 下的所有导出

3. C_ 组件自动解析优先级

RobotNaiveUiResolver(组件库 C_ 组件)
  ↓ 若不匹配
NaiveUiResolver(Naive UI 原生组件)
  ↓ 若不匹配
本地 global/ fallback(主项目 C_ 组件)
  ↓ 若不匹配
本地 local/ fallback(小写 c_ 组件)

4. 样式导入顺序

// main.ts 中的样式导入顺序不可更改
import './assets/css/main.css' // 基础重置
import '@/styles/index.scss' // 全局样式
import '@robot-admin/layout/style' // 布局系统样式
import '@robot-admin/naive-ui-components/style.css' // 组件库样式
import 'virtual:uno.css' // UnoCSS(最高优先级)

5. Store 命名约定

Store 文件导出必须使用 s_ 前缀:

// ✅ 正确
export const s_userStore = defineStore('user', { ... })
export const s_themeStore = defineStore('theme-extended', () => { ... })

// ❌ 不要使用
export const useUserStore = defineStore(...)  // 不用 "use" 前缀
export const userStore = defineStore(...)      // 缺少 "s_" 前缀

6. 组件事件桥接

组件库中的复杂组件使用 config 回调 替代大量 emit:

// ❌ 不推荐:16 个 emit
emit('tab-change', ...)
emit('step-change', ...)
emit('field-add', ...)

// ✅ 推荐:config 回调
<C_Form
  :config="{
    onTabChange: handleTabChange,
    onStepChange: handleStepChange,
    onFieldAdd: handleFieldAdd,
  }"
/>

7. 应用启动顺序

插件注册顺序很重要,不可随意调整:

setupLoading()           # 0. 首屏动画
createApp(App)           # 1. 创建实例
setupGlobalErrorHandler  # 2. 错误处理(必须最先)
setupStore               # 3. Pinia
setupRequestCore         # 4. Request Core
setupLayoutSystem        # 5. 布局
setupNaiveUI             # 6. Naive UI
setupDirectives          # 7. 指令
router.isReady()         # 8. 等待路由
app.mount('#app')        # 9. 挂载

十九、新功能开发 Checklist

新增 Demo 页面

  • 创建 src/views/demo/XX-feature-name/ 目录
  • 创建 index.vue(遵循四段式结构)
  • 创建 index.scss(scoped 样式)
  • 创建 data.ts(配置数据抽离)
  • dynamicRouter.json 中添加路由配置
  • 添加文件头注释
  • 添加 JSDoc 注释
  • 使用 bun run lint 检查
  • 使用 bun run cz 规范化提交

新增组件库组件

  • naive-ui-components/src/components/ 下创建 C_ComponentName/ 目录
  • 创建 index.ts(导出入口)
  • 创建 index.vue(薄 UI 壳)
  • 创建 types.ts(类型定义)
  • 复杂组件创建 composables/ 目录
  • 创建 index.scss(组件样式,使用 CSS 变量)
  • bun run build 构建(自动注册导出)
  • 在主项目中创建 demo 页面验证
  • 使用 bun run check:exports 检查冲突

新增业务页面

  • 创建 src/views/module-name/ 目录
  • 创建页面 Vue 文件
  • src/api/ 下创建对应的 API 文件
  • src/types/modules/ 下创建类型定义
  • 配置路由(dynamicRouter.json)
  • 如需全局状态,在 src/stores/ 下创建 Store

新增 @robot-admin 包

  • robot-admin-packages/packages/ 下创建包目录
  • 配置 package.json(name: @robot-admin/xxx
  • 使用 TypeScript 编写源码
  • 配置构建脚本
  • 在主项目 package.json 中添加依赖
  • src/plugins/ 中创建初始化插件
  • 使用 Changesets 管理版本

最后提醒:本项目追求高性能、强类型、零冗余。编写代码时:

  1. 优先使用项目已有的包和工具(@robot-admin/*),不要引入功能重复的第三方库
  2. 遵循薄 UI 壳 + 厚 Composable 引擎的架构模式
  3. 使用 Bun 作为唯一的包管理器和任务运行器
  4. 所有文件必须包含文件头注释和 JSDoc
  5. Git 提交严格遵守 Commitlint 规范
  6. 不要破坏自动导入机制(unplugin-auto-import + unplugin-vue-components)

二十、MCP 工具(实时查询)

本项目配备了 MCP Server(mcp/server.ts),让 AI 工具可以实时查询项目数据,而非依赖训练记忆猜测 API。

配置文件:.vscode/mcp.json(VS Code Copilot Chat 自动识别);详细说明见 mcp/use-mcp.md

工具调用时机
list_components不确定某个 C_ 组件是否存在时
get_component_api(name)使用任何 C_ 组件前必查,获取真实 Props/Emits 定义
list_routes注册新路由或 router.push 跳转前,防止 name 冲突
list_api_endpoints新建 API 函数前,确认同名函数是否已存在
get_preset_rules编写 FORM_RULES 前,查 @robot-admin/form-validate 可用规则

二十一、AI 技能调度表(Skills)

本项目配备了 6 个结构化 AI 技能包,位于 .github/skills/ 目录。 当识别到用户意图匹配下表关键词时,自动加载对应 SKILL.md 并按其流程执行

技能目录触发关键词说明
原型解析skills/prototype-scan/原型解析、axure扫描、页面清单、详设文档将 Axure HTML / 详设文档 → page-spec JSON
接口约定skills/api-contract/接口约定、生成api、swagger转ts、接口文件从 page-spec / Swagger → TS 类型 + API 函数
页面生成skills/page-codegen/生成页面、代码生成、页面骨架、scaffold从 page-spec → index.vue + data.ts + index.scss
路由注册skills/route-sync/注册路由、添加菜单、路由配置、新增页面路由将新页面注册到 dynamicRouter.json
规范审计skills/convention-audit/规范检查、代码审查、命名规范、code review10 维度规范合规性审查
Mock生成skills/mock-codegen/生成mock、mock数据、模拟数据、联调前mock可选:生成内联 Mock 数据注入 data.ts
分支同步skills/branch-sync/分支同步、版本升级、依赖更新、sync branches单体变更后检查并同步到架构分支(micro-app/MF/monorepo)

典型工作流

原型/详设文档
  │
  ▼
prototype-scan → page-spec JSON
  │
  ├──▶ api-contract → src/api/ 类型 + 请求函数
  │
  ├──▶ page-codegen → src/views/ 页面三件套
  │
  ├──▶ route-sync  → dynamicRouter.json 路由注册
  │
  └──▶ mock-codegen(可选,完整流程结束后确认)→ data.ts 内联 Mock

代码完成后
  │
  ▼
convention-audit → 规范审计报告

使用方式:直接用自然语言描述需求即可,AI 会自动匹配并执行对应技能。 mock-codegen 为可选技能,在完整流程结束时由 AI 询问是否需要,也可单独触发。

Repository README

Describes ChenyCHENYU/Robot_Admin as a whole, which may contain artifacts other than this one. Where this artifact had no useful description of its own, its summary was taken from here.


🎯 多架构支持

💡 Robot Admin 提供多种架构分支,支持从单体到微前端的渐进演进。当前所在为单体 SPA 开发主线dev/main)。

架构类型适用场景特点分支文档
🏗️ 单体架构中小型项目、快速原型简单直接、开箱即用main本文档
📦 Monorepo多应用统一管理代码复用、统一工具链、独立部署monorepo完整指南
🔮 模块联邦微应用动态加载运行时共享、独立部署、版本隔离module-federation使用指南
🚀 微前端大型应用、团队协作技术栈无关、独立部署、渐进式迁移micro-app查看文档

🚀 重新定义企业级中后台开发体验

🎯 一个敏捷的,为开发者体验而生的企业级中后台解决方案

在这里,当 Bun 的极致性能遇上 Vue3 的组合式 API,当 TypeScript 的类型安全拥抱 UnoCSS 的原子化样式...


⚡ 为什么选择 Robot Admin?

🔥 性能怪兽级别的开发体验

  • 毫秒级热更新 - Bun + Vite8 化学反应,告别等待
  • 智能类型提示 - TypeScript5.8 + 51+ 自定义组件,IDE 智能感知体验拉满
  • 零配置开箱即用 - 一条命令启动,30 秒内搭建完整后台系统

🎨 不只是一个管理系统,更是一个作品

  • 54+ 精心打磨的演示页面 - 每一个都是可直接用于生产的业务组件,51 个组件支持文档站 iframe 在线预览
  • 7 种自定义指令 - 防抖、节流、长按、拖拽、权限...让开发更优雅
  • 主题系统 - 深色/浅色模式/跟随系统 + 支持自定义扩展
  • Preview 路由系统 - 38 个无鉴权独立预览路由,供 文档站 通过 iframe 嵌入实时组件演示

🛠️ 企业级架构,个人项目也能享受

  • RBAC 权限体系 - 菜单级、按钮级、接口级,权限控制细致入微
  • 渐进式微前端 - 架构设计支持从单体到微前端的平滑演进
  • 生产级工程化 - ESLint + Prettier + Husky,代码质量无忧

🚀 快速开始(真的很快!)

🎉 推荐使用 Bun - 体验前所未有的安装速度

# 1. 克隆项目
git clone https://github.com/ChenyCHENYU/robot_admin.git

# 2. 进入目录
cd robot_admin

# 3. 安装依赖(如闪电般快速)
bun install    # 推荐!速度提升10倍
# 或使用 npm install / yarn install / pnpm install

# 4. 启动项目(毫秒级启动)
bun dev

🔥 首次启动只需 2 秒不到,后续热更新不到 100ms!

# 开发相关
bun dev                # 开发环境启动
bun run build          # 生产环境构建
bun run build:test     # 测试环境构建
bun run build:staging  # 预发布构建
bun run preview        # 本地预览构建结果

# 代码质量
bun run lint           # 代码检查和修复
bun run format         # 代码格式化
bun test:unit          # 单元测试

# 类型检查
bun run type-watch     # 监听模式类型检查
bun run type:check     # 智能类型分析

# 其他
bun run commit         # 规范化提交(git cz)
bun outdated           # 检查依赖更新
bun clean              # 清理缓存

✨ 核心亮点

🏗️ 技术栈(高富帅阵容)

🎭 前端核心

  • Vue 3.5.13 - 🔥 最新稳定版,Composition API 丝滑体验
  • TypeScript 5.8 - 🛡️ 类型安全,智能提示
  • Naive UI 2.41.0 - 🎨 颜值与性能并存的组件库
  • @robot-admin/naive-ui-components - 🧩 51+ 业务组件库,按需自动导入
  • UnoCSS 66.3.3 - ⚡ 原子化CSS,按需生成,体积极小

⚙️ 构建工具

  • Bun 1.3.x - 🚀 性能怪兽,安装速度提升10倍
  • Vite 8.0.3 - ⚡ Rolldown 统一构建引擎,构建速度提升 10-30x
  • Sass 1.87 - 🎨 成熟的CSS预处理器

🔧 开发工具

  • ESLint 9.21 - 📏 代码质量守护者
  • Prettier 3.5 - ✨ 代码格式化
  • Oxlint 0.15 - 🦀 Rust编写的超快Linter
  • Vitest 3.0 - 🧪 现代化测试框架

📊 功能组件(via @robot-admin/naive-ui-components)

  • ECharts 5.6 - 企业级图表库
  • AntV X6 - 专业流程图引擎(BPMN/ER/UML)
  • FullCalendar - 完整的日程管理
  • WangEditor - 富文本编辑器
  • XGPlayer - 视频播放器(HLS/防作弊)
  • Vue Flow - 工作流编辑器

🎯 功能矩阵

🔐 权限管理

  • RBAC权限体系 - 用户-角色-权限,灵活分配
  • 动态路由 - 根据权限实时生成菜单
  • 按钮级权限 - 精确到每一个操作按钮
  • 接口级权限 - API调用权限控制

🧩 组件库(51+ 开箱即用)

所有业务组件已独立发布为 @robot-admin/naive-ui-components,支持按需自动导入。

核心组件

  • C_Form - 动态表单引擎,支持8种布局
  • C_Table - 超级表格,支持虚拟滚动、打印水印、列设置
  • C_FormSearch - 高级搜索表单组件
  • C_ActionBar - 操作按钮组组件,统一按钮布局
  • C_Icon - Iconify 运行时图标管理系统
  • C_Theme - 主题切换组件
  • C_Language - 国际化语言切换

业务组件

  • C_Code - 代码编辑器组件
  • C_Markdown - Markdown编辑器
  • C_Editor - WangEditor 富文本编辑器
  • C_FormulaEditor - 公式编辑器
  • C_Time - 时间处理组件
  • C_Date - 日期选择组件
  • C_Progress - 进度展示组件
  • C_Upload - 文件上传组件
  • C_Cron - Cron 表达式编辑器
  • C_Steps - 步骤条组件

可视化 & 图表

  • C_AntV - AntV X6 流程图引擎(BPMN/ER/UML)
  • C_WorkFlow - Vue Flow 工作流编辑器
  • C_VtableGantt - 甘特图组件
  • C_FullCalendar - 完整日程管理

媒体 & 文件

  • C_VideoPlayer - XGPlayer 视频播放器(HLS/防作弊)
  • C_FilePreview - 文件预览(PDF/Excel/Word/图片)
  • C_ImageCropper - 图片裁剪
  • C_Signature - 电子签名
  • C_QRCode - 二维码生成
  • C_Barcode - 条形码生成
  • C_AudioPlayer - 音频播放器,播放列表、多循环模式

交互 & 布局

  • C_Draggable - 拖拽排序
  • C_SplitPane - 分割面板
  • C_CollapsePanel - 折叠面板
  • C_WaterFall - 瀑布流布局
  • C_Cascade - 地区级联选择
  • C_City - 城市选择器
  • C_Map - Leaflet 地图
  • C_Captcha - 验证码
  • C_Guide - 新手引导
  • C_GlobalSearch - 全局搜索
  • C_NotificationCenter - 通知中心
  • C_Chat - 聊天组件,消息泡泡、会话列表
  • C_Timeline - 时间线,垂直/水平多布局
  • C_ContextMenu - 右键上下文菜单
  • C_Transfer - 穿梭框,跨列表数据迁移
  • C_AvatarGroup - 叠加头像组,状态徽标

🎮 自定义指令

v-copy 复制 | v-debounce 防抖 | v-throttle 节流 | v-permission 权限 | v-watermark 水印 | v-draggable 拖拽 | v-longpress 长按

🎪 演示页面(54+ 完整示例)

🎨 基础组件展示

  • 图标组件 - 完整的图标系统使用指南
  • 地区联动 - 省市区三级联动实现
  • 进度条 - 多种样式进度展示
  • 时间组件 - 时间选择和格式化
  • 日期选择 - 日期范围选择器
  • 城市选择 - 城市选择器组件

📝 表单与表格

  • 表单布局 - 8种表单布局模式
  • 表单搜索 - 高级搜索功能
  • 超级表格 - 表格的各种高级用法

✏️ 编辑器展示

  • 日历组件 - FullCalendar完整功能
  • 代码编辑器 - 多语言语法高亮
  • Markdown编辑器 - 实时预览编辑
  • 富文本编辑 - WangEditor完整功能

🛠️ 实用功能

  • 导出ZIP - 批量文件打包下载
  • 复制功能 - 文本复制到剪贴板
  • 批量下载 - 文件批量下载处理
  • 拖拽排序 - 列表项拖拽排序
  • 3D展示 - Spline 3D场景
  • 动画系统 - 流畅的页面转场
  • 用户引导 - 新手引导系统

💬 示范组件

  • 聊天 - 即时聊天 UI,消息泡泡与会话列表
  • 时间线 - 时间轴事件展示,垂直/水平布局
  • 右键菜单 - 自定义上下文菜单
  • 穿梭框 - 跨列表数据迁移
  • 头像组 - 叠加头像展示,状态徽标
  • 音频播放器 - 播放列表、进度控制、多循环模式

🏗️ 项目架构

📁 目录结构

Robot_Admin/
├── 📁 src/                          # 源代码目录
│   ├── 📁 api/                      # 接口管理层
│   ├── 📁 components/               # 组件(桥接层 + 局部组件)
│   │   ├── 📁 global/               # 全局桥接组件(按需引用组件库)
│   │   └── 📁 local/                # 局部组件
│   ├── 📁 views/                    # 页面视图
│   │   ├── 📁 dashboard/            # 数据看板
│   │   ├── 📁 demo/                 # 演示页面(54+ 功能展示)
│   │   ├── 📁 preview/              # 组件预览页面(38 个 iframe 嵌入路由)
│   │   ├── 📁 sys-manage/           # 系统管理
│   │   ├── 📁 login/                # 登录注册
│   │   └── 📁 home/                 # 项目主页
│   ├── 📁 stores/                   # Pinia状态管理
│   ├── 📁 composables/              # 组合式API
│   ├── 📁 hooks/                    # 自定义Hooks
│   ├── 📁 router/                   # 路由配置
│   ├── 📁 utils/                    # 工具函数
│   ├── 📁 types/                    # TypeScript类型定义
│   ├── 📁 directives/               # 自定义指令(7个实用指令)
│   ├── 📁 assets/                   # 静态资源
│   └── 📁 plugins/                  # 插件配置
├── 📁 scripts/                      # 构建脚本
├── 📁 public/                       # 静态资源
├── ⚙️ vite.config.ts                # Vite配置
├── 🎨 unocss.config.ts              # UnoCSS配置
├── 📦 package.json                  # 项目配置
└── 🔧 tsconfig.json                 # TypeScript配置

🔄 架构演进路线

graph LR
    A[🏠 Monomer<br/>单体架构] --> B[📦 Monorepo<br/>单仓多包]
    B --> C[� Module Federation<br/>模块联邦]
    B --> D[🔗 MicroApp<br/>微前端]
    C --> E[🚀 NestJS<br/>全栈方案]
    D --> E

🛠️ 开发者工具

VS Code 插件推荐

必装插件

  • Vue - Official - Vue 3 官方支持
  • TypeScript Vue Plugin - TypeScript 支持
  • UnoCSS - 原子化CSS智能提示
  • Naive UI Snippets - Naive UI 代码片段

实用插件详解

1. Vscode Samge Translate 插件

  • desc: 用于快速中英文翻译切换,并生成变量命名方式
  • use: Ctrl+Shift+P, 选择 Samge 进行对应功能使用
  • key: Alt+x 翻译成中文, Alt+z 翻译成英文

2. any-rule 插件

  • desc: 用于快速生成正则
  • use: 右键 => 正则大全
  • key: @zz 弹出正则选项,根据生成的选项,可以图解正则

3. Better Comments 插件

  • desc: 在js文件中,通过颜色标记区分注释评论描述
  • use: //* 绿色 //! 红色 //? 蓝色

4. code settings sync 插件

  • desc: 用于快速团队同步 vscode 插件及配置
  • use: 使用文档

5. Code Spell Checker 插件

  • desc: 用于快速检查代码和文档拼写是否正确
  • use: 将非语法错误的单词添加到 cspell.json
  • key: 拼写后单词上方提示的黄色小灯泡💡

6. CodeSnap 插件

  • desc: 用于快速生成代码截图
  • use: 右键 => 底部选项 CodeSnap

7. EmoJi 插件

  • desc: 用于快速选择表情符号
  • use: 输入 Ctrl+Shift+P => 输入 emo
  • key: F1 => emo

8. JSON to JS 插件

  • desc: 用于快速将json格式转换为js格式
  • use: 从剪切板,选择转换,可选引号 3种 方式进行转换
  • key: Shift + Ctrl + Alt + V | SF1 => Clipboard

9. koroFileHeader 插件

  • desc: 用于添加头部注释,函数注释
  • use: 在文件头部使用快捷键,或自动识别生成
  • key: ctrl+win+i 头部注释 ctrl+win+t 函数注释

10. TODO Tree 插件

  • desc: 用于快速高亮代码中的 TODO 等标记性注释
  • use: 通过注释关键词的方式,高亮显示
  • key: TODO: 待完成 | BUG: 问题 | FIXME: 待修复 | HACK: 自定义

11. Turbo Console Log 插件

  • desc: 用于快速生成 console 打印信息
  • use: 通过选中变量,按下快捷键,生成打印句柄
  • key: ctrl+alt+l 生成 alt+shift+c 注释所有 +u 启用所有 +d 删除所有

🌍 国际化 (i18n)

自动化路由翻译

项目集成了 vite-auto-i18n-plugin,支持路由标题的自动翻译。

快速使用

# 1. 在 dynamicRouter.json 中添加新菜单(只需要中文)
{
  "meta": {
    "title": "新功能模块"
  }
}

# 2. 运行自动生成脚本
bun run gen:route-i18n

# 3. 重启开发服务器(首次需要)
bun run dev

就这么简单! 插件会自动调用有道翻译 API 将中文翻译成英文。

工作原理

graph LR
    A[dynamicRouter.json] --> B[gen:route-i18n]
    B --> C[提取路由标题]
    C --> D[vite-auto-i18n-plugin]
    D --> E[有道翻译 API]
    E --> F[lang/index.json]
    F --> G[编译时构建映射]
    G --> H[运行时 O1 查找]

特性

  • 零配置 - 添加中文标题后运行一条命令即可
  • 自动翻译 - 调用有道翻译 API 自动生成英文
  • 高性能 - O(1) 查找,编译时构建映射表
  • 零维护 - HMR 自动更新,无需手动管理翻译

详细文档

详细文档

📖 完整使用指南:国际化实践指南 - 在线文档


📊 性能优化

⚡ 性能基准测试

指标Robot Admin传统方案提升幅度
🚀 首屏加载< 800ms~2.5s70%+
⚡ 热更新速度< 100ms~1.5s90%+
📦 构建速度< 30s~2min75%+
💾 Bundle大小< 2MB~5MB60%+
🔄 页面切换< 50ms~300ms85%+

测试环境: HP 幽灵360, 16GB RAM, Node.js 22+

构建优化

  • Tree Shaking - 无用代码自动移除
  • 代码分割 - 按需加载,减少首屏时间
  • 资源压缩 - CSS/JS/图片智能压缩
  • CDN加速 - 静态资源CDN部署

运行时优化

  • 虚拟滚动 - 大数据表格流畅渲染
  • 组件懒加载 - 路由级别懒加载
  • 图片懒加载 - 视口内图片按需加载
  • 防抖节流 - 高频操作性能优化

💬 社区互动

🚧 本项目仍在快速迭代,欢迎任何使用反馈、功能建议、甚至吐槽!没有蠢问题,只有没被发现的优化点。

🎯 你的反馈,让项目变得更好

我明确想知道这些,请直接告诉我:

反馈类型你可以告诉我入口
🏢 使用场景你在做什么项目?解决了什么业务问题?提 Issue →
🧩 组件体验哪些组件用着顺手?哪些还需要打磨?提 Issue →
🚀 上手体验文档哪里说不清楚?部署遇到了什么坑?提 Issue →
💡 业务需求你需要但还没有的组件或功能是什么?提 Issue →

🤝 参与贡献

来啊,快活啊!一起搞事情啊! 🎉

🚀 30秒快速上手贡献

# 1. Fork + Clone
git clone https://github.com/你的用户名/robot_admin.git

# 2. 安装依赖
bun install

# 3. 创建分支
git checkout -b feat/awesome-feature

# 4. 提交修改
git commit -m "feat: 新功能"

# 5. 提交PR

💡 贡献方向

🎨 UI/演示页面贡献

  • src/views/demo/ 下新建页面
  • 展示一个完整的业务场景
  • 代码要有注释,能复制粘贴直接用

🧩 组件开发贡献

  • 放在 src/components/global/
  • 组件名以 C_ 开头
  • 必须有 TypeScript 类型定义

🛠️ 工具函数贡献

  • src/utils/ 目录下
  • 要有单元测试
  • 要有 JSDoc 注释

查看 贡献指南 了解更多。


🚀 部署方案

☁️ 多环境支持

环境配置

  • 开发环境 - 本地开发调试
  • 测试环境 - 功能测试验证
  • 预发布环境 - 生产前最后验证
  • 生产环境 - 线上正式环境

部署选项

  • Vercel - 零配置部署(推荐)
  • GitHub Pages - 静态部署
  • Docker - 容器化部署
  • 传统服务器 - Nginx部署
# Docker部署
docker build -t robot-admin .
docker run -p 80:80 robot-admin

# Nginx配置
location / {
  try_files $uri $uri/ /index.html;
}

📈 路线图

✅ 已完成里程碑

版本时间主要更新
v1.02025-07🎉 项目初版:Vue3 + Vite + Naive UI + Pinia 基础架构
v1.62025-10🎨 主题系统 + UnoCSS + 演示页面体系
v1.112025-12🧩 组件库雏形 + i18n 国际化 + 性能优化
v1.122026-02📦 @robot-admin/request-core 独立发布
v1.132026-02🔧 Composable 架构重构,各 npm 包逐步独立发布
v1.142026-02✨ 新增 10 个组件(签名/裁剪/Cron/瀑布流等)
v2.02026-03🏗️ 架构重构:39 个组件迁移至独立 npm 包,零冗余
v2.12026-03🔐 Token 无感刷新 + 权限体系升级 + 可插拔登录组件
v2.22026-03🎭 菜单双主题 + Vite 8 升级 + 全量 TypeScript 通过
v2.2.12026-03🔧 Vite 8.0.3 正式升级 + 样式细节优化

🚀 近期计划 (2026 Q2)

  • 📊 性能监控与错误追踪集成
  • 🎨 可视化低代码页面模板
  • 🏢 多租户系统支持
  • 🔌 Robot CLI 脚手架工具
  • 📱 Robot uniApp 移动端方案

🌟 长期规划 (2026 Q3+)

  • 🏗️ Robot Nest — NestJS 全栈服务
  • 🔄 完整的 CI/CD 流水线集成示例
  • 🌐 完整 i18n 国际化方案(更多语言)

🌟 生态系统

🔗 相关项目

已发布组件库

已发布周边工具

  • Robot CLI ✅ - 脚手架工具,快速初始化项目模板
  • Robot uniApp ✅ - 移动端跨平台解决方案(已完成)
  • Robot Nest 🚧 - NestJS 全栈后端服务(规划中)

已发布 npm 插件


🖼️ 项目预览

login 登录页面

home 首页页面

🎯 在线预览 | 📖 项目文档

注意:若无法访问请关闭科学上网,或访问 备用地址


🖥️ 浏览器支持

现代浏览器,拒绝IE

EdgeFirefoxChromeSafari
last 2 versionslast 2 versionslast 2 versionslast 2 versions

💻 系统要求

🔧 开发环境

  • Node.js: >= 22.18 (推荐最新 LTS)
  • Bun: >= 1.3.x (推荐最新版)
  • 内存: >= 8GB RAM
  • 存储: >= 1GB 可用空间
  • 系统: Windows 10+, macOS 12+, Ubuntu 20.04+

⚙️ 可选工具

  • VS Code: 推荐编辑器
  • Git: >= 2.20.0
  • Docker: >= 20.0 (容器部署)

🛠️ 故障排除

❌ Bun 安装失败

# Windows 用户
curl -fsSL https://bun.sh/install | bash

# macOS 用户
brew install oven-sh/bun/bun

# 或使用 npm 安装
npm install -g bun

⚠️ 端口占用问题

# 修改 vite.config.ts 中的端口
server: {
  port: 1988, # 改为其他端口
  host: true
}

🔧 TypeScript 类型错误

# 重新生成类型文件
bun run type:check

# 清除类型缓存
rm -rf node_modules/.cache
bun install

📦 构建失败

# 检查依赖版本
bun outdated

# 清除缓存重新安装
rm -rf node_modules bun.lockb
bun install

# 强制类型检查
bun run type-build

🔒 安全与权限

🛡️ 多层次权限控制

  • 页面级权限 - 路由访问控制
  • 菜单级权限 - 导航菜单显示控制
  • 按钮级权限 - 操作按钮权限控制
  • 接口级权限 - API调用权限验证

🔐 身份认证

  • JWT Token 认证
  • 刷新Token自动续期
  • 多终端登录管理
  • 密码强度验证

🆚 对比其他解决方案

特性对比Robot AdminAnt Design ProVue Element Admin其他框架
🚀 启动速度Bun < 100msnpm ~2syarn ~1.5s普遍较慢
⚡ 热更新速度< 100ms 极速~1.5s 等待~1s 等待普遍较慢
📦 构建工具Vite 8.x (Rolldown)Webpack/ViteWebpack 4/5工具多样
🎨 UI 组件库Naive UI 轻量Ant DesignElement Plus选择多样
💪 TypeScript完整类型支持基础支持基础支持支持程度不一
🔧 自定义指令7个实用指令少量指令基础指令功能有限
📊 演示页面54+ 完整示例有限示例有限示例基础示例
🎯 学习成本中等友好较高门槛中等门槛差异较大
📈 维护状态🔥 积极维护持续维护持续维护状态不一

选择 Robot Admin 的理由:

  • 🚀 性能优先: Bun + Vite8 (Rolldown) 双引擎,开发体验极致
  • 🧩 组件丰富: 51+ 业务组件,独立组件库按需导入
  • 🎨 设计现代: Naive UI + UnoCSS,颜值与性能并存
  • 📚 学习友好: 54+ 演示页面,每个都是最佳实践

❓ 你可能会有的一些小疑问

🔧 为什么推荐使用Bun?

  • 安装速度提升10倍+
  • 内存占用更低
  • 内置打包器、测试运行器
  • 完全兼容Node.js生态

🎨 如何自定义主题?

  1. 修改 src/assets/css/theme.scss 中的CSS变量
  2. 使用 C_Theme 组件进行动态切换
  3. 支持深色/浅色模式自动切换

🔐 权限系统如何使用?

  • 页面级:路由守卫控制
  • 菜单级:动态菜单生成
  • 按钮级:v-permission指令
  • 接口级:axios拦截器

📱 是否支持移动端?

  • 完全支持!响应式设计适配所有设备

🔄 如何从其他项目迁移?

  • 提供详细的迁移指南
  • 组件API基本兼容
  • 渐进式迁移支持

📞 联系我们

🧑‍💻 作者信息

  • 姓名: CHENY
  • 身份: 个人开发者 · 前端架构师(开源爱好者)
  • 公众号: 前端咔啦咪(小红书同名)
  • 邮箱: ycyplus@gmail.com
  • GitHub: @ChenyCHENYU
  • npm: @cheny_yang

💬 加入交流群


🤝 贡献者

感谢所有为项目做出贡献的开发者:

期望你成为贡献者:

  • 🐛 报告 Bug | 💡 提出功能建议 | 📝 改进文档 | 🔧 提交代码 | 🌍 翻译文档 | 📢 推广项目

🏆 特别鸣谢

🌟 开源项目致谢

核心技术

  • Vue.js 团队 - 提供强大的框架基础
  • Naive UI 团队 - 提供优秀的组件库
  • Vite 团队 - 提供极速的构建工具
  • Bun 团队 - 提供革命性的运行时
  • Anthony Fu - UnoCSS、unplugin等工具的创作者
  • 尤雨溪 (Evan You) - Vue.js 的创造者

功能组件

  • ECharts - 数据可视化图表库
  • AntV X6 - 图编辑引擎
  • FullCalendar - 日历组件
  • WangEditor - 富文本编辑器

👨‍💻 社区支持

  • 所有 Star 的开发者 - 给予项目信心和动力
  • 提出 Issue 的用户 - 帮助项目发现和改进问题
  • 贡献 PR 的开发者 - 让项目变得更好
  • 使用项目的企业 - 验证项目的实用价值

"一个人可以走得很快,但一群人可以走得更远。感谢每一位支持 Robot Admin 的朋友!"


📄 更新日志

🚀 v2.2.1 (2026-03-27) — 最新版本

  • 🔧 Vite 8.0.3 + Rolldown:升级至 Vite 最新版,构建引擎持续优化
  • 🎨 样式细节优化:NCard 全局间距优化,暗色主题细节全面提升
  • 🔒 工程化修复:oxlint 版本锁定,修复 pre-commit 钩子兼容性问题
  • 📐 代码质量:全量 TypeScript 类型检查通过,演示页面样式统一规范

🎭 v2.2.0 (2026-03-11)

  • 菜单双主题:增加菜单主题切换,提供个性/标准两种多态模式
  • 🔐 权限体系升级:按钮权限、路由鉴权、数据权限全面启用
  • Token 无感刷新:登录态不中断自动刷新 Token
  • 🔧 Vite 8 + Rolldown:构建速度提升 10-30 倍
  • 🧩 演示页面批量优化,全量 TypeScript 类型检查通过

🎨 v2.1.0 (2026-03-06)

  • ✨ 可插拔式 C_Login 登录组件,支持自定义扩展
  • 🔄 新增穿梭框 / 头像组 / 音频播放器组件
  • 🚀 38 个无鉴权预览路由,供文档站 iframe 嵌入
  • 🐛 登录页性能、错误拦截、中英文验证全面优化

🏗️ v2.0.0 (2026-03-02) — 破坏性升级

  • 📦 39 个组件全面迁移@robot-admin/naive-ui-components
  • ✅ 全量 vue-tsc 类型检查通过
  • 🔧 清理冗余依赖,简化主项目依赖树

✨ v1.14.0 (2026-02-27)

  • 新增电子签名 / 图片裁剪 / Cron 表达式编辑器 / 分割面板 / 公式编辑器 / 瀑布流 等 10 个组件
  • C_Notice 升级为 C_NotificationCenter 全局通知插件

📦 v1.13.x (2026-02-08 — 2026-02-17)

  • @robot-admin/layout 升级 v2.2.0,支持 View Transition API 主题切换
  • @robot-admin/* 各包逐步独立发布到 npm
  • i18n 自动翻译路由 + 分包优化

v1.11.x (2025-11 — 2025-12)

  • 组件库雏形建立、Vitest 测试框架集成
  • 全局搜索组件、内置权限指令系统

v1.0 — v1.11 (2025-07 — 2025-12)

  • 项目核心框架建立、主题系统、动态表单/表格引擎、Demo 页面体系建设

📚 查看完整 CHANGELOG.md


📄 开源许可

本项目基于 MIT License 开源协议。

MIT License

Copyright (c) 2026 ChenY (Robot Admin)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

这意味着您可以: ✅ 免费使用 | ✅ 修改源代码 | ✅ 商业使用 | ✅ 私有部署 | ✅ 分发和再许可

唯一要求: 📄 保留版权声明和许可证


🚀 加入 Robot Admin

🎯 下一步行动

💝 支持项目发展

🤖 Robot Admin - 让中后台开发变得简单而优雅

Trust

Not scanned yet. Artifacts are graded after they are crawled, so a recently discovered one may have no result for a while.

Versions

  • git-889dc207bfc52026-08-04