# simple-admin-ts

**Repository Path**: NativeBase/simple-admin-ts

## Basic Information

- **Project Name**: simple-admin-ts
- **Description**: 一个简单的Vue3后台模版
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-31
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 目录结构图
```
├── vueNextAdmin
	├── public (存放浏览器标题favicon.ico、静态json数据)
	│
	├── src (存放视图、工具类、image)
	│	├── api (与服务端对接的接口函数定义。建议视图文件夹与api文件夹相同，如login文件夹)
	│	│   ├── login (登录接口函数)
	│	│   └── menu (菜单接口函数)
	│	│
	│	├── assets (本地静态资源：图片、svg等)
	│	│
	│	├── components (存放公用全局组件)
	│	│   ├── auth (鉴权)
	│	│   ├── cropper (裁剪图片)
	│	│   ├── editor (富文本编辑器)
	│	│   ├── iconSelector (图标选择器)
	│	│   ├── noticeBar (滚动通知)
	│	│   ├── svgIcon (自定义封装 svg 图标)
	│	│   └── table (自定义封装 table)
	│	│
	│	├── directive (自定义指令内容)
	│	│
	│	├── i18n (存放框架国际化内容)
	│	│   ├── lang (框架内置国际化)
	│	│   └── pages (自定义国际化)
	│	│       ├── formI18n (表单)
	│	│       ├── home (首页)
	│	│       └── login (登录页)
	│	│
	│	├── layout (存放框架布局视图)
	│	│   ├── component (布局公用组件)
	│	│   ├── footer (页脚)
	│	│   ├── lockScreen (锁屏)
	│	│   ├── logo (logo)
	│	│   ├── main (主布局)
	│	│   ├── navBars (顶栏信息)
	│	│   │   ├── breadcrumb (面包屑、关闭全屏、菜单搜索、布局配置、用户信息、消息通知)
	│	│   │   └── tagsView (标签页)
	│	│   ├── navMenu (导航菜单)
	│	│   ├── routerView (路由视图出口、外链、iframe内嵌)
	│	│   ├── upgrade (版本升级提示组件)
	│	│  
	│	│
	│	├── mock (存放模拟数据，非mock.js。用于城市多级联动)
	│	│
	│	├── router (存放路由信息)
	│	│
	│	├── stores (存放组件的状态 pinia)
	│	│
	│	├── theme (存放框架样式)
	│	│   ├── common (基础样式)
	│	│   ├── media (媒体查询)
	│	│   └── mixins (scss混入)
	│	│
	│	├── types (ts 类型定义文件)
	│	│   ├── axios.d.ts (扩展 axios 数据返回类型，可自行扩展)
	│	│   ├── global.d.ts (全局 ts 类型定义申明)
	│	│   ├── layout.d.ts (layout 布局 ts 类型定义申明)
	│	│   ├── mitt.d.ts (mitt 事件总线 ts 类型定义申明)
	│	│   ├── pinia.d.ts (pinia ts 类型定义申明)
	│	│   └── views.d.ts (views 视图各界面 ts 类型定义申明)
	│	│
	│	├── utils (存放工具类函数)
	│	│
	│	└── views (存放页面视图)
	│			├── chart (大数据图表演示)
	│			├── error (404、401)
	│			├── fun (功能演示)
	│			│   ├── clipboard (复制剪切)
	│			│   ├── countup (countup 数字滚动)
	│			│   ├── cropper (cropper 图片裁剪)
	│			│   ├── echartsMap (地理坐标/地图)
	│			│   ├── gridLayout (拖拽布局)
	│			│   ├── printJs (页面打印)
	│			│   ├── qrcode (qrcode 二维码生成)
	│			│   ├── splitpanes (窗格拆分器)
	│			│   ├── tagsView (tagsView 操作)
	│			│   └── wangEditor (wangEditor 编辑器)
	│			├── home (首页)
	│			├── limits (权限管理演示)
	│			│   ├── backEnd (后端控制)
	│			│   │   └── page (页面权限)
	│			│   └── frontEnd (前端控制)
	│			│       ├── btn (按钮权限)
	│			│       └── page (页面权限)
	│			├── login (登录界面)
	│			│   └── component (登录界面组件)
	│			├── menu (菜单嵌套演示)
	│			│  ├── menu1 (menu1)
	│			│  │  ├── menu11 (menu11)
	│			│  │  ├── menu12 (menu12)
	│			│  │  │   ├── menu121 (menu121)
	│			│  │  │   └── menu122 (menu122)
	│			│  │  └── menu13 (menu13)
	│			│  └──  menu2 (menu2)
	│			├── pages (页面演示)
	│			│   ├── awesome (awesome 字体图标)
	│			│   ├── drag (拖动指令)
	│			│   ├── dynamicForm (动态复杂表单)
	│			│   ├── element (element 字体图标)
	│			│   ├── filtering (过滤筛选组件)
	│			│   ├── formAdapt (表单自适应)
	│			│   ├── formI18n (表单国际化)
	│			│   ├── formRules (多表单验证)
	│			│   │   └── component (多表单验证各组件)
	│			│   ├── iocnfont (iconfont 字体图标)
	│			│   ├── lazyImg (图片懒加载)
	│			│   ├── listAdapt (列表自适应)
	│			│   ├── preview (大图预览)
	│			│   ├── steps (步骤条)
	│			│   ├── tableRules (表单表格验证)
	│			│   ├── tree (树形改表格)
	│			│   ├── waterfall (瀑布屏)
	│			│   └── workflow (工作流)
	│			│       └── component (工作流组件)
	│			│           ├── contextmenu (工作流右键菜单)
	│			│           └── drawer (工作流拖拽组件)
	│			├── make (组件封装)
	│			│   ├── selector (图标选择器)
	│			│   ├── noticeBar (滚动通知栏)
	│			│   ├── svgDemo (svg 演示)
	│			│   └── tableDemo (自定义封装 table)
	│			├── params (路由参数演示)
	│			│   ├── common (普通路由)
	│			│   └── dynamic (动态路由)
	│			├── personal (个人中心)
	│			├── system (系统设置)
	│			│   ├── menu (菜单管理)
	│			│   │   └── component (菜单管理组件)
	│			│   └── user (用户管理)
	│			├── tools (工具类集合)
	│			└── visualizing (数据可视化)
	│
	├── .env (全局默认配置文件，无论什么环境都会加载合并)
	├── .env.development (开发环境的配置文件)
	├── .env.production (生产环境的配置文件)
	├── .eslintignore (eslint忽略配置)
	├── .eslintrc.js (eslint配置)
	├── .gitignore (git提交忽略配置)
	├── .prettierrc.js (prettier代码格式化配置)
	├── CHANGELOG.md (框架更新日志)
	├── index.html (用户页面访问入口)
	├── LICENSE (开源许可证)
	├── package-lock.json (npm锁定安装时的包的版本号)
	├── package.json (包的依赖管理配置文件)
	├── README.md (框架介绍文件)
	├── tsconfig.json (ts配置文件)
	└── vite.config.ts (vite配置文件)

```

## 工具类集合
代码路径：/@/utils

```
├── src/utils
	├── arrayOperation.ts (判断两数组、两个对象是否相同)
	├── authFunction.ts (用户权限指令，用于函数调用)
	├── commonFunction.ts (通用函数基础类)
	├── formatTime.ts (时间格式化)
	├── getStyleSheets.ts (自动获取css样式、svg 图标)
	├── loading.ts (全局loading、雪花屏)
	├── mitt.ts (事件总线初始化)
	├── other.ts (其它公共类)
	├── request.ts (接口请求，axios)
	├── setIconfont.ts (设置icon、svg)
	├── storage.ts (设置浏览器永久、临时缓存)
	├── theme.ts (框架主题函数)
	├── toolsValidate.ts (正则工具类)
	└── watermark.ts (页面水印)

```

## 菜单配置
代码位置：/@/router/route.ts
菜单路由中的字段说明

```
{
  // 菜单路径，用于跳转
  path: '/home',
  // 菜单 name，用于界面 keep-alive 路由缓存。
  // 此 name 需要与 component 组件中的 name 值相同（唯一）
  name: 'home',
  // 组件路径
  component: () => import('/@/views/home/index.vue'),
  // 附加自定义数据
  meta: {
    // 菜单标题（国际化写法）
    title: 'message.router.home',
    // 菜单外链链接
    // 开启外链条件，`1、isLink: true 2、链接地址不为空（meta.isLink） 3、isIframe: false`
    isLink: '',
    // 菜单是否隐藏（菜单不显示在界面，但可以进行跳转）
    isHide: false,
    // 菜单是否缓存
    isKeepAlive: true,
    // 菜单是否固定（固定在 tagsView 中，不可进行关闭），右键菜单无 `关闭` 项
    isAffix: true,
    // 是否内嵌
    // 开启条件，`1、isIframe: true 2、链接地址不为空（meta.isLink）`
    isIframe: false,
    // 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
    // 之前 auth 取用户（角色下有多个用户）
    roles: ['admin', 'common'],
    // 菜单图标
    icon: 'iconfont icon-shouye',
    // 自行再添加
    ...
  },
}

```

### 菜单格式
在项目 /@/router/route.ts 文件中。这里需要注意，菜单数据内容必须嵌套进顶级节点（作为顶级路由出口）的 children 字段里

```
{
  // 顶级菜单路径
  path: '/',
  // 顶级菜单 name
  name: '/',
  // 顶级路由出口
  component: () => import('/@/layout/index.vue'),
  // 顶级菜单重定向路径
  redirect: '/home',
  // 顶级附加自定义数据
  meta: {
    // 顶级菜单是否缓存
    isKeepAlive: true,
  },
  // 顶级菜单的子级菜单数据
  children: [
    // 新增的菜单对象写在这里
    {
      ...
    }
  ]
}

```

### 路径格式
注意 name 值需与 /@/router/route.ts 中的 name 值一致，否则实现不了路由的缓存（keep-alive）
#### 1. 面包屑多级显示
在项目 /@/router/route.ts 文件中，观察 path 字段，有 children 时，path 字段是基于上一级继续拼接（为什么这样？详看 布局配置-breadcrumb-面包屑）。

如下所示：/params/xxx，这样做是为了 breadcrumb-面包屑 的显示问题。
```
{
  path: '/params',
  redirect: '/params/common',
  ...,
  children: [
    {
      // 面包屑：首页 / 路由参数 / 普通路由
      path: '/params/common',
      ...,
    },
    {
      // 面包屑：首页 / 路由参数 / 普通路由 / 普通路由详情
      path: '/params/common/details',
      ...
    },
  ]
}

```

#### 2. 面包屑单级显示
children 里的 path 不基于上级 path，注意高亮部分代码的 path
```
{
  path: '/params',
  redirect: '/params/common',
  ...,
  children: [
    {
      // 面包屑：首页 / 路由参数 / 普通路由
      path: '/params/common',
      ...,
    },
    {
      // 面包屑：首页 / 路由参数 / 普通路由详情
      path: '/params/details',
      ...
    },
    {
      // 面包屑：首页
      path: '/params1/common1/details',
      ...
    },
  ]
}

```

### 后端接口菜单