jet-autoflow-example

Editor Config

我们提供了 .editorconfig 约束文件格式. 为了确保 editorconfig 的正常工作，你需要按照 需插件支持 和 无需插件支持 确定是否需要安装插件

我们同时提供了 .vscode/settings.json 约束文件格式，对于 vscode 用户来说，这会让你可以开箱即用。对于非 vscode 用户，.editorconfig 也能帮你约束，但是可能需要你安装插件

Vue 3 + Typescript + Vite

• Vue 3
• Typescript
• Vite

Recommended IDE

• Volar
• TypeScript Vue Plugin (Volar)

Quick start

pnpm install

# 本地如需覆盖 `.env` 文件，需新建 `.env.local` 文件
# 环境变量设置参考 https://vitejs.dev/guide/env-and-mode.html#env-files
pnpm dev

# 打包生产环境代码
pnpm build

# 生产环境预览
pnpm build
pnpm preview

Router

routes 通过 vite-plugin-pages 动态生成

常见问题

• Q: 自动生成路由的规则是什么样子的？支持 vue-router 的哪些能力?
  • A: 我们使用的是nuxt 风格的生成方式
• Q: 如果要做路由权限应该怎么做?
  • A: 见附录的使用方式

附录

• 在需要权限控制的页面中加入自定义的 Route Data

<route>
{
  meta: {
    roles: ['admin', 'editor']
  }
}
</route>

tips：若路由提供了 roles 则代表对指定的角色有权限，否则对所有的角色都有权限

• 将路由分为 constantRoutes 和 asyncRoutes

import routes from '~pages'

const { constantRoutes, asyncRoutes } = filterRoutes(routes)
createRouter({ routes: constantRoutes })

• 管理用户的状态，包括 token、roles 等信息

• 管理路由的状态，包括 routes、currentRolesAsyncRoutes

function generateRoutes(roles) {
  currentRolesAsyncRoutes = filterAsyncRoutes(asyncRoutes, roles)
  routes = constantRoutes.concat(currentRolesAsyncRoutes)
}

• 角色每次变更后更新路由

watch(
  userInfo.roles,
  roles => {
    resetRoutes()
    if (roles.length) {
      generateRoutes(roles)
      addRoutes(currentRolesAsyncRoutes)
    }
  },
  { immediate: true },
)

tips：token 和 roles 都必须使用本地存储，这样才能保证每次刷新都去更新路由

Css

Tailwindcss

配置颜色主题，间距使用默认定义的，未定义的使用任意值(以宽度的任意值为例)