BuildAdmin源码阅读体会记录(一)

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。

//返回值为删除路由的回调函数
const removeRoute = router.addRoute({ path: '/about', component: About })

删除路由

有几个不同的方法来删除现有的路由：

通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

通过调用 router.addRoute() 返回的回调：

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

当路由没有名称时，这很有用。

通过使用 router.removeRoute() 按名称删除路由：
```
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
```
需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol 作为名字。

当路由被删除时，所有的别名和子路由也会被同时删除

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样：

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这等效于：

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

`<component>`

官方文档地址：https://cn.vuejs.org/api/options-rendering.html#template

一个用于渲染动态组件或元素的“元组件”。

Props

interface DynamicComponentProps {
is: string | Component
}

详细信息

要渲染的实际组件由 is prop 决定。
- 当 is 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。
- 或者，is 也可以直接绑定到组件的定义。

但在实际我使用中，传入字符串时，组件不能正常的被渲染

我按官方文档的这样写

<template>
    <div>
        <component :is="'Test'"></component>        
    </div>
</template>

<!-- <script>
import Test from './Test.vue';

export default {
  components: {
    Test
  }
}
</script>

又来能成功渲染，我看了Buildadmin里有下面一行

defineOptions({
    components: { Default, Classic, Streamline, Double },
})

然后我把代码里修改成这样

<template>
    <div>
        <component :is="'Test'"></component>        
    </div>
</template>

<script setup>
import Test from './Test.vue';

defineOptions({
    components: { Test },
})
</script>

能正常的渲染。

总结：因此如果要给传字符串，需要用defineOptions进行才可使用字符串传入。

Glob 导入

官方文档地址：https://cn.vitejs.dev/guide/features.html#glob-import

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob('./dir/*.js')

以上将会被转译为下面的样子：

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

你可以遍历 modules 对象的 key 值来访问相应的模块：

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}

匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以传入 { eager: true } 作为第二个参数：

const modules = import.meta.glob('./dir/*.js', { eager: true })

以上会被转译为下面的样子：

// vite 生成的代码
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

Glob 导入形式

import.meta.glob 都支持以字符串形式导入文件，类似于以字符串形式导入资源。在这里，我们使用了 Import Reflection 语法对导入进行断言：

const modules = import.meta.glob('./dir/*.js', { as: 'raw', eager: true })

上面的代码会被转换为下面这样：

// code produced by vite（代码由 vite 输出）
const modules = {
  './dir/foo.js': 'export default "foo"\n',
  './dir/bar.js': 'export default "bar"\n',
}

{ as: 'url' } 还支持将资源作为 URL 加载。

多个匹配模式

第一个参数可以是一个 glob 数组，例如：

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

反面匹配模式

同样也支持反面 glob 匹配模式（以 ! 作为前缀）。若要忽略结果中的一些文件，你可以添加“排除匹配模式”作为第一个参数：

const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
}

具名导入

也可能你只想要导入模块中的部分内容，那么可以利用 import 选项。

const modules = import.meta.glob('./dir/*.js', { import: 'setup' })

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup),
  './dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup),
}

当与 eager 一同存在时，甚至可以对这些模块进行 tree-shaking。

const modules = import.meta.glob('./dir/*.js', {
  import: 'setup',
  eager: true,
})

// vite 生成的代码
import { setup as __glob__0_0 } from './dir/foo.js'
import { setup as __glob__0_1 } from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

设置 import 为 default 可以加载默认导出。

const modules = import.meta.glob('./dir/*.js', {
  import: 'default',
  eager: true,
})

// vite 生成的代码
import __glob__0_0 from './dir/foo.js'
import __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

自定义查询

你也可以使用 query 选项来提供对导入的自定义查询，以供其他插件使用。

const modules = import.meta.glob('./dir/*.js', {
  query: { foo: 'bar', bar: true },
})

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js?foo=bar&bar=true'),
  './dir/bar.js': () => import('./dir/bar.js?foo=bar&bar=true'),
}

Glob 导入注意事项

请注意：

这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径（请看 resolve.alias 选项)。
Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅支持的 Glob 模式。
你还需注意，所有 import.meta.glob 的参数都必须以字面量传入。你不可以在其中使用变量或表达式。

动态导入

和 glob 导入类似，Vite 也支持带变量的动态导入。

const module = await import(`./dir/${file}.js`)

注意变量仅代表一层深的文件名。如果 file 是 foo/bar，导入将会失败。对于更进阶的使用详情，你可以使用 glob 导入功能。

路由、菜单、签权数据处理

在获取首页返回的数据后，取出data下的menu数据后

首先把路由部分数据解析出来，通过router.addRouter动态添加路由，其中只处理menu_type=tab

的数据。

处理完路由后，接着处理菜单导航部分数据，只处理type=menu或者menu_dir的数据，处理完成以后保存到navTabs的store里。

处理完菜单后，最后处理权限部分，权限部分只处理type=button的数据，处理完以后保存到navTabs的store里authNode里。

权限路径是 router.currentRoute.value.path + '/' + name)

上面均用到递归处理

/**
 * 页面按钮鉴权
 * @param name
 */
export const auth = (name: string) => {
    const navTabs = useNavTabs()
    // console.log(navTabs.state.authNode)
    if (navTabs.state.authNode.has(router.currentRoute.value.path)) {
        if (navTabs.state.authNode.get(router.currentRoute.value.path)!.some((v: string) => v == router.currentRoute.value.path + '/' + name)) {
            return true
        }
    }
    return false
}

<!-- 操作按钮组 -->
<div v-bind="$attrs" class="table-header ba-scroll-style">
    <slot name="refreshPrepend"></slot>
    <el-tooltip v-if="props.buttons.includes('refresh')" :content="t('Refresh')" placement="top">
        <el-button v-blur @click="onAction('refresh', { loading: true })" color="#40485b" class="table-header-operate" type="info">
            <Icon name="fa fa-refresh" />
        </el-button>
    </el-tooltip>
    <slot name="refreshAppend"></slot>
    <el-tooltip v-if="props.buttons.includes('add') && baTable.auth('add')" :content="t('Add')" placement="top">
        <el-button v-blur @click="onAction('add')" class="table-header-operate" type="primary">
            <Icon name="fa fa-plus" />
            <span class="table-header-operate-text">{{ t('Add') }}</span>
        </el-button>
    </el-tooltip>
    <el-tooltip v-if="props.buttons.includes('edit') && baTable.auth('edit')" :content="t('Edit selected row')" placement="top">
        <el-button v-blur @click="onAction('edit')" :disabled="!enableBatchOpt" class="table-header-operate" type="primary">
            <Icon name="fa fa-pencil" />
            <span class="table-header-operate-text">{{ t('Edit') }}</span>
        </el-button>
    </el-tooltip>

baTable.auth('edit')为鉴权操作，baTable的实现使用的是供应商/注入的方式通信的

下面和当前版本的不一样，但是我感觉这个应该很好用，可以留下作为参考，用v-auth=edit

/**
 * 页面按钮鉴权指令
 * @description v-auth="'name'"，name可以为：index,add,edit,del,...
 */
function authDirective(app: App) {
    app.directive('auth', {
        mounted(el, binding) {
            if (!binding.value) return false
            const navTabs = useNavTabs()
            if (navTabs.state.authNode.has(router.currentRoute.value.path)) {
                if (
                    !navTabs.state.authNode
                        .get(router.currentRoute.value.path)!
                        .some((v: string) => v == router.currentRoute.value.path + '/' + binding.value)
                ) {
                    el.parentNode.removeChild(el)
                }
            }
        },
    })
}