Gauss

Appearance

API ​

globalProperties ​

vue
<script setup>
import { getCurrentInstance } from 'vue'

// appId 应用ID
const { appId, BASE_URL } = getCurrentInstance().appContext.config.globalProperties.$gauss
</script>
<script setup>
import { getCurrentInstance } from 'vue'

// appId 应用ID
const { appId, BASE_URL } = getCurrentInstance().appContext.config.globalProperties.$gauss
</script>

axios ​

request

请求库，基于 axios 封装，使用方法与 axios 一致。

超时时间默认设置为 10s

js
import { axios } from '@gauss/core'

// 设置超时时间
axios.defaults.timeout = 3 * 60 * 1000

axios
    .get('/user?ID=12345')
    .then(function (response) {
        // 处理成功情况
        console.log(response)
    })
    .catch(function (error) {
        // 处理错误情况
        console.log(error)
    })
    .then(function () {
        // 总是会执行
    })

axios
    .post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone',
    })
    .then(function (response) {
        console.log(response)
    })
    .catch(function (error) {
        console.log(error)
    })
import { axios } from '@gauss/core'

// 设置超时时间
axios.defaults.timeout = 3 * 60 * 1000

axios
    .get('/user?ID=12345')
    .then(function (response) {
        // 处理成功情况
        console.log(response)
    })
    .catch(function (error) {
        // 处理错误情况
        console.log(error)
    })
    .then(function () {
        // 总是会执行
    })

axios
    .post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone',
    })
    .then(function (response) {
        console.log(response)
    })
    .catch(function (error) {
        console.log(error)
    })

setRequestHeader ​

设置请求头，可自定义 axios 请求头。

ts
setRequestHeader({
    workNo: '15xxx',
    ...
})
setRequestHeader({
    workNo: '15xxx',
    ...
})

gondar ​

初始化埋点。通常在全局进行初始化 main.js。

注意：当您正在使用框架时，无需进行初始化操作，框架内部已经处理。

js
import { gondar } from '@gauss/core'

gondar.init({
    appId: 'DEMO',
    gondar: {
        // 是否开启
        enabled?: true,
        // 采集地址
        collectUrl: '//cloud-api.tineco.com/sensorsdata/${appId}',
        // 是否开启 debugger
        debugger: false,
        // 平台，可选值 web h5
        platform: 'web'
    }
})
import { gondar } from '@gauss/core'

gondar.init({
    appId: 'DEMO',
    gondar: {
        // 是否开启
        enabled?: true,
        // 采集地址
        collectUrl: '//cloud-api.tineco.com/sensorsdata/${appId}',
        // 是否开启 debugger
        debugger: false,
        // 平台，可选值 web h5
        platform: 'web'
    }
})

埋点追踪用户行为事件

js
import { gondar } from '@gauss/core'

// 追踪用户行为事件，并添加自定义属性
gondar.track('search', {
    // [text] key 值可随意修改
    text: queryText.value,
    ...
})
import { gondar } from '@gauss/core'

// 追踪用户行为事件，并添加自定义属性
gondar.track('search', {
    // [text] key 值可随意修改
    text: queryText.value,
    ...
})

NProgress ​

进度条

显示进度条 NProgress.start()

结束进度条 NProgress.done()

Watermark ​

水印组件

vue
<template>
    <Watermark isBody :visible="watermark" :options="options" />
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Watermark } from '@gauss/core'

const visible = ref(true)

const options = reactive({
    text: '测试环境',
})
</script>
<template>
    <Watermark isBody :visible="watermark" :options="options" />
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Watermark } from '@gauss/core'

const visible = ref(true)

const options = reactive({
    text: '测试环境',
})
</script>

参数 ​

参数说明类型默认值
options配置项WatermarkOptions{}
visible水印是否显示booleantrue
isBody是否挂载在 body 上booleanfalse
WatermarkOptions ​
参数说明类型默认值
text水印文本string-

eventBus ​

事件总线。详见

eventBus.$on(event, callback[, context]) ​

订阅事件。

eventBus.$once(event, callback[, context]) ​

只订阅一次事件。

eventBus.$off(event[, callback]) ​

取消订阅一个事件或所有事件。 如果没有提供回调，它将取消您对所有事件的订阅。

eventBus.$emit(event[, arguments...]) ​

触发已订阅的事件。

previewFile ​

文件在线预览

ts
import { previewFile } from '@gauss/core'

interface IPreviewFileOption {
    // 非必填，默认从 config.json 内取 baseUrl 值
    baseUrl?: string
    // 水印显示文本
    watermarkTxt?: string
}

previewFile(path: string, option?: IPreviewFileOption)
import { previewFile } from '@gauss/core'

interface IPreviewFileOption {
    // 非必填，默认从 config.json 内取 baseUrl 值
    baseUrl?: string
    // 水印显示文本
    watermarkTxt?: string
}

previewFile(path: string, option?: IPreviewFileOption)

常量 ​

PLATFORM ​

平台

PLATFORM.h5 h5 平台

PLATFORM.web web 平台

useDictionaryStore ​

字典。注意，获取字典本身可能是异步的，返回 reactive 包裹的值，使用时需结合 computed 来使用。

dictionaryStore.code 获取单个字典 ​

vue
<template>
    <div v-for="item in value" :key="item.code">
        <div>{{ item.code }}</div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDictionaryStore } from '@gauss/core'

const value = computed(() => useDictionaryStore().code('userType'))
</script>
<template>
    <div v-for="item in value" :key="item.code">
        <div>{{ item.code }}</div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDictionaryStore } from '@gauss/core'

const value = computed(() => useDictionaryStore().code('userType'))
</script>

dictionaryStore.codes 获取多个字典 ​

vue
<template>
    <div v-for="item in dicts.userType" :key="item.code">
        <div>{{ item.code }}</div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDictionaryStore } from '@gauss/core'

const dicts = computed(() => useDictionaryStore().codes(['userType']))
</script>
<template>
    <div v-for="item in dicts.userType" :key="item.code">
        <div>{{ item.code }}</div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDictionaryStore } from '@gauss/core'

const dicts = computed(() => useDictionaryStore().codes(['userType']))
</script>

直接调用接口 ​

当然，你可以直接请求字典接口服务来处理一些同步的问题。

js
import { getDictionaries } from '@gauss/core'

// 接受一个 string[] 参数
getDictionaries(['userType']).then(() => {
    // TODO
})
import { getDictionaries } from '@gauss/core'

// 接受一个 string[] 参数
getDictionaries(['userType']).then(() => {
    // TODO
})

useUserInfo ​

用户信息

vue
<script setup>
import { useUserInfo } from '@gauss/prime'

const userInfo = useUserInfo()
console.log(userInfo)
</script>
<script setup>
import { useUserInfo } from '@gauss/prime'

const userInfo = useUserInfo()
console.log(userInfo)
</script>

返回值

json
{
    "appId": "DEMO",
    "avatar": "https://cloud-minio-test.tineco.com/tineco-cloud/avatar/1624961855875342338.png",
    "departmentName": "架构组",
    "email": "jinhua.gong@tineco.com",
    "gender": 1,
    "language": "zh",
    "mobilePhone": "13913xxxx97",
    "positionName": "开发工程师",
    "uId": "jinhua.gong",
    "userId": "b709a802879c20cd8cxx0b08ee03ad77",
    "userName": "龚锦华",
    "userType": "internal",
    "workNo": "15xx3"
}
{
    "appId": "DEMO",
    "avatar": "https://cloud-minio-test.tineco.com/tineco-cloud/avatar/1624961855875342338.png",
    "departmentName": "架构组",
    "email": "jinhua.gong@tineco.com",
    "gender": 1,
    "language": "zh",
    "mobilePhone": "13913xxxx97",
    "positionName": "开发工程师",
    "uId": "jinhua.gong",
    "userId": "b709a802879c20cd8cxx0b08ee03ad77",
    "userName": "龚锦华",
    "userType": "internal",
    "workNo": "15xx3"
}

useRouteHash ​

参考 @vueuse/router - useRouteHash。

ts
import { useRouteHash } from '@gauss/core'

const search = useRouteHash()

console.log(search.value) // route.hash
import { useRouteHash } from '@gauss/core'

const search = useRouteHash()

console.log(search.value) // route.hash

useRouteParams ​

参考 @vueuse/router - useRouteParams。

ts
import { useRouteParams } from '@gauss/core'

const userId = useRouteParams('userId')
import { useRouteParams } from '@gauss/core'

const userId = useRouteParams('userId')

useRouteQuery ​

参考 @vueuse/router - useRouteQuery。

ts
import { useRouteQuery } from '@gauss/core'

const search = useRouteQuery('search')
import { useRouteQuery } from '@gauss/core'

const search = useRouteQuery('search')

SSEClient ​

基于 @microsoft/fetch-event-source 封装的一个用于实现SSE的方法。

vue
<script setup>
import { SSEClient } from '@gauss/core'

new SSEClient({
    url: `/url`,
    onOpen: response => {
        console.log('open', response)
    },
    onMessage: res => {
        console.log(res)
    },
    onError: () => {
        console.log('error')
    },
    onClose: () => {
        console.log('close')
    },
})
</script>
<script setup>
import { SSEClient } from '@gauss/core'

new SSEClient({
    url: `/url`,
    onOpen: response => {
        console.log('open', response)
    },
    onMessage: res => {
        console.log(res)
    },
    onError: () => {
        console.log('error')
    },
    onClose: () => {
        console.log('close')
    },
})
</script>

参数 ​

参数说明类型默认值
url要连接的SSE服务的URLstring-
methodHTTP请求方式stringGET
headers包含自定义请求头的对象Record<string, string>{'Content-Type': 'application/x-www-form-urlencoded', Authorization: accessToken}
onOpen连接成功打开时的回调(response: Response) => void-
onMessage从服务器接收到消息时的回调(message: string) => void-
onError连接发生错误时触发的回调(error: any) => void-
onClose连接关闭时的回调函数() => void-

Copyright © 2023-present Gauss