Gauss

Appearance

配置项 ​

ts
createPrime(options: IPrimeAppOption)
createPrime(options: IPrimeAppOption)

appId ​

  • 类型：string
  • 默认值：undefined

应用 ID，必填。

appName ​

  • 类型：string
  • 默认值：Gauss

应用名称，必填。

clientId ​

  • 类型：string
  • 默认值：undefined

客户端 ID。

BASE_URL ​

  • 类型：string
  • 默认值：undefined

项目根目录，必填。

构建工具使用 webpack 时值应为 process.env.BASE_URL，构建工具使用 vite 时通过 (await import.meta.env).BASE_URL 获取。

routes ​

  • 类型：RouteRecordRaw[]
  • 默认值：[]
js
createPrime({
    routes: [
        {
            path: '/crud-demo',
            name: 'crud-demo',
            component: () => import('./demo.vue'),
        },
        ...
    ],
})
createPrime({
    routes: [
        {
            path: '/crud-demo',
            name: 'crud-demo',
            component: () => import('./demo.vue'),
        },
        ...
    ],
})

path ​

  • 类型：string
  • 默认值：undefined

路径名称

name ​

  • 类型：string
  • 默认值：undefined

别名

component ​

  • 类型：Component
  • 默认值：undefined

组件

meta ​

  • 类型：IMeta
  • 默认值：undefined
ts
interface IMeta {
    // 值为 true 时开启 keepAlive
    isKeepAlive?: boolean
    // 配置 document.title
    title?: string
    // 值为 true 时跳过路由鉴权
    noAuth?: boolean
    // 设置根节点，值为 true 时既不会在菜单布局内
    root?: boolean
    // 标记是否是新菜单
    new?: boolean
    // 父级路由地址，继承父级路由地址下的所有按钮权限配置
    parentRoutePath?: string
}
interface IMeta {
    // 值为 true 时开启 keepAlive
    isKeepAlive?: boolean
    // 配置 document.title
    title?: string
    // 值为 true 时跳过路由鉴权
    noAuth?: boolean
    // 设置根节点，值为 true 时既不会在菜单布局内
    root?: boolean
    // 标记是否是新菜单
    new?: boolean
    // 父级路由地址，继承父级路由地址下的所有按钮权限配置
    parentRoutePath?: string
}

home ​

  • 类型：string
  • 默认值：undefined

首页地址。

  • 类型：string | {path?: string, link?: boolean, onClick?: () => void}
  • 默认值：undefined

网站 logo 配置

js
import logo from './assets/logo.svg'

const prime = createPrime({
    logo,
})

const prime = createPrime({
    logo: {
        path: logo,
        // 是否可点击，为true时可点击
        link: false,
        // 点击logo的回调事件
        onClick() {
            // TODO
        },
    },
})
import logo from './assets/logo.svg'

const prime = createPrime({
    logo,
})

const prime = createPrime({
    logo: {
        path: logo,
        // 是否可点击，为true时可点击
        link: false,
        // 点击logo的回调事件
        onClick() {
            // TODO
        },
    },
})

isFirstLetterMenuIcon ​

  • 类型：boolean
  • 默认值：false

当未配置图标时，是否使用菜单名称首字母作为图标展示。

enableMessage ​

  • 类型：boolean
  • 默认值：false

是否开启站内信功能。

responsiveLayoutEnabled ​

  • 类型：boolean
  • 默认值：false

是否开启响应式布局。

progress ​

  • 类型：boolean
  • 默认值：true

是否开启进度条。

watermark ​

  • 类型：boolean
  • 默认值：true

是否开启水印。

gondar ​

埋点配置。

gondar.enabled ​

  • 类型：boolean
  • 默认值：false

是否开启。

gondar.collectUrl ​

  • 类型：string
  • 默认值：//cloud-api.tineco.com/sensorsdata/${appId}

采集地址，默认值内的 appId 为应用 ID。

gondar.debugger ​

  • 类型：boolean
  • 默认值：false

是否开启 debugger。

gondar.platform ​

  • 类型：string
  • 默认值：web

平台，可选值 web h5。

i18nOptions ​

  • 类型：object
  • 默认值：{}

国际化配置。详情

i18nOptions.codes ​

国际化支持语言配置，默认为“简体中文”和“English”，无需再重复配置

对应语言的标识符，默认值为 zh en。

期望下拉语言列表支持繁体中文，您可以这样做

js
const prime = createPrime({
    ...
    i18nOptions: {
        codes: [{ label: '繁体中文', value: 'zh-tw' }],
    },
})
const prime = createPrime({
    ...
    i18nOptions: {
        codes: [{ label: '繁体中文', value: 'zh-tw' }],
    },
})

i18nOptions.messages ​

定义国际化文件。

src/locales/zh.ts

js
import { defineLocale } from '@gauss/prime'

export default defineLocale({
    siteTitle: 'Gauss',
})
import { defineLocale } from '@gauss/prime'

export default defineLocale({
    siteTitle: 'Gauss',
})

src/locales/en.ts

js
import { defineLocale } from '@gauss/prime'

export default defineLocale({
    siteTitle: 'Gauss',
})
import { defineLocale } from '@gauss/prime'

export default defineLocale({
    siteTitle: 'Gauss',
})

main.ts

js
import { createPrime } from '@gauss/prime'
import zh from './locales/zh'
import en from './locales/en'

const prime = createPrime({
    ...
    i18nOptions: {
        messages: {
            zh,
            en,
        }
    },
})
import { createPrime } from '@gauss/prime'
import zh from './locales/zh'
import en from './locales/en'

const prime = createPrime({
    ...
    i18nOptions: {
        messages: {
            zh,
            en,
        }
    },
})

i18nOptions.elementMessages ​

定义 Element-Plus 国际化文件。使用方式同 i18nOptions.messages

js
import elZhTW from 'element-plus/es/locale/lang/zh-tw'

const prime = createPrime({
    ...
    i18nOptions: {
        elementMessages: {
            'zh-tw': elZhTW,
        },
    },
})
import elZhTW from 'element-plus/es/locale/lang/zh-tw'

const prime = createPrime({
    ...
    i18nOptions: {
        elementMessages: {
            'zh-tw': elZhTW,
        },
    },
})

i18nOptions.hamletMessages ​

定义 Hamlet-web 国际化文件。使用方式同 i18nOptions.messages

js
import hamletZhTW from './locales/zh-tw/hamlet'

const prime = createPrime({
    ...
    i18nOptions: {
        hamletMessages: {
            'zh-tw': hamletZhTW,
        },
    },
})
import hamletZhTW from './locales/zh-tw/hamlet'

const prime = createPrime({
    ...
    i18nOptions: {
        hamletMessages: {
            'zh-tw': hamletZhTW,
        },
    },
})

fileRepository ​

  • 类型：string
  • 默认值：undefined

文件仓库，非必填。

slots ​

插槽

slots.layoutHeaderLeft ​

  • 类型：Vue.Component
  • 默认值：undefined

布局头部左侧内容插槽。

Crumb.vue

vue
<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item>promotion management</el-breadcrumb-item>
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
</script>
<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item>promotion management</el-breadcrumb-item>
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
</script>

main.js

js
import { markRaw } from 'vue'
import { createPrime } from '@gauss/prime'
import Crumb from './components/Crumb.vue'

const prime = createPrime({
    ...
    slots: {
        layoutHeaderLeft: markRaw(Crumb),
    },
})
import { markRaw } from 'vue'
import { createPrime } from '@gauss/prime'
import Crumb from './components/Crumb.vue'

const prime = createPrime({
    ...
    slots: {
        layoutHeaderLeft: markRaw(Crumb),
    },
})

slots.avatarDropdownMenu ​

  • 类型：Vue.Component
  • 默认值：undefined

登录后头像下拉菜单插槽

avatar-menu.vue

vue
<template>
    <el-dropdown-item @click="showMsg('个人设置')">个人设置</el-dropdown-item>
    <el-dropdown-item @click="showMsg('日志')">日志</el-dropdown-item>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const showMsg = msg => {
    ElMessage.success(`您点击了自定义下拉菜单：${msg}`)
}
</script>
<template>
    <el-dropdown-item @click="showMsg('个人设置')">个人设置</el-dropdown-item>
    <el-dropdown-item @click="showMsg('日志')">日志</el-dropdown-item>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const showMsg = msg => {
    ElMessage.success(`您点击了自定义下拉菜单：${msg}`)
}
</script>

main.js

js
import { markRaw } from 'vue'
import { createPrime } from '@gauss/prime'
import AvatarMenu from './components/avatar-menu.vue'

const prime = createPrime({
    ...
    slots: {
        avatarDropdownMenu: markRaw(AvatarMenu),
    },
})
import { markRaw } from 'vue'
import { createPrime } from '@gauss/prime'
import AvatarMenu from './components/avatar-menu.vue'

const prime = createPrime({
    ...
    slots: {
        avatarDropdownMenu: markRaw(AvatarMenu),
    },
})

toolbar ​

  • 类型：String[]，可选值：'dark' | 'language' | 'fullscreen' | 'themeSetting' | 'message'
  • 默认值：[]

头部右侧导航项配置，控制显示或隐藏

js
createPrime({
    toolbar: ['dark', 'language', 'fullscreen', 'themeSetting'],
})
createPrime({
    toolbar: ['dark', 'language', 'fullscreen', 'themeSetting'],
})
  • 类型：INav[]
  • 默认值：[]

头部右侧自定义导航项

js
import { Gitlab } from '@icon-park/vue-next'

createPrime({
    nav: [
        {
            icon: markRaw(shallowRef(Gitlab)),
            link: 'https://www.baidu.com/',
            blank: true,
            text: 'Gitlab',
            id: 'Gitlab',
        },
    ],
})
import { Gitlab } from '@icon-park/vue-next'

createPrime({
    nav: [
        {
            icon: markRaw(shallowRef(Gitlab)),
            link: 'https://www.baidu.com/',
            blank: true,
            text: 'Gitlab',
            id: 'Gitlab',
        },
    ],
})

自定义导入组件

js
import HelpDropdown from './components/help-dropdown.vue'

createPrime({
    nav: [
        {
            icon: markRaw(shallowRef(HelpDropdown)),
            id: 'HelpDropdown',
        },
    ],
})
import HelpDropdown from './components/help-dropdown.vue'

createPrime({
    nav: [
        {
            icon: markRaw(shallowRef(HelpDropdown)),
            id: 'HelpDropdown',
        },
    ],
})

icon ​

  • 类型：string
  • 默认值：undefined

显示图标

  • 类型：string
  • 默认值：undefined

链接地址

blank ​

  • 类型：boolean
  • 默认值：true

是否打开新标签，默认值为 true

forwardUrl ​

转发地址配置

ts
interface IRequestForwardUrlOption {
    [rule: string]: {
        target: string
        rewrite: {
            [rule: string]: string
        }
    }
}
interface IRequestForwardUrlOption {
    [rule: string]: {
        target: string
        rewrite: {
            [rule: string]: string
        }
    }
}

示例

js
createPrime({
    forwardUrl: {
        '^/test-api': {
            // 转发地址
            target: 'https://ibu-api-test.tineco.com',
            // 重写uri
            rewrite: {
                '^/test-api': '/test-api',
            },
        },
    },
})
createPrime({
    forwardUrl: {
        '^/test-api': {
            // 转发地址
            target: 'https://ibu-api-test.tineco.com',
            // 重写uri
            rewrite: {
                '^/test-api': '/test-api',
            },
        },
    },
})

onFrameLoad ​

  • 类型：({ router }: { router: Router }): void
  • 默认值：undefined

框架加载完成后的回调函数，返回一个 router 参数，在此阶段可做些额外操作，比如：自定义路由拦截。

js
createPrime({
    onFrameLoad({ router }) {
        router.afterEach(to => {
            // TODO
        })
        // TODO
    },
})
createPrime({
    onFrameLoad({ router }) {
        router.afterEach(to => {
            // TODO
        })
        // TODO
    },
})

onAuthFailed ​

  • 类型：() => void
  • 默认值：undefined

鉴权错误的回调

versionCheckEnabled ​

  • 类型：boolean
  • 默认值：true

是否开启框架版本检测，非必填。

Copyright © 2023-present Gauss