[Feature][UI Next] Add charts i18n. (#7568)
songjianet
GitHub
parent
1efa85ca27
commit
b2852a716f
|
|
@ -15,9 +15,15 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { getCurrentInstance, onMounted, onBeforeUnmount, watch } from 'vue'
|
||||
import {
|
||||
getCurrentInstance,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { useThemeStore } from '@/store/theme/theme'
|
||||
import { throttle } from 'echarts'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Ref } from 'vue'
|
||||
import type { ECharts } from 'echarts'
|
||||
import type { ECBasicOption } from 'echarts/types/dist/shared'
|
||||
|
|
@ -28,6 +34,7 @@ function initChart<Opt extends ECBasicOption>(
|
|||
): ECharts | null {
|
||||
let chart: ECharts | null = null
|
||||
const themeStore = useThemeStore()
|
||||
const { locale } = useI18n()
|
||||
const globalProperties =
|
||||
getCurrentInstance()?.appContext.config.globalProperties
|
||||
|
||||
|
|
@ -51,6 +58,14 @@ function initChart<Opt extends ECBasicOption>(
|
|||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => locale.value,
|
||||
() => {
|
||||
chart?.dispose()
|
||||
init()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
addEventListener('resize', resize)
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.header-model {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: inherit;
|
||||
.menu {
|
||||
margin-left: 0px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.profile {
|
||||
width: 135px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
import styles from './index.module.scss'
|
||||
import { NDropdown, NIcon, NLayoutHeader, NMenu } from 'naive-ui'
|
||||
import Logo from '@/layouts/basic/components/logo'
|
||||
import { IosArrowDown } from '@vicons/ionicons4'
|
||||
import { UserAlt } from '@vicons/fa'
|
||||
|
||||
const Header = defineComponent({
|
||||
name: 'Header',
|
||||
props: {
|
||||
inverted: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
menuOptions: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
languageOptions: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
profileOptions: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
currentMenu: {
|
||||
type: Object,
|
||||
},
|
||||
defaultMenuKey: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const currentMenuRef = ref({})
|
||||
|
||||
const handleMenuClick = (key, data) => {
|
||||
currentMenuRef.value = data
|
||||
context.emit('menuClick', data)
|
||||
}
|
||||
|
||||
return { handleMenuClick }
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NLayoutHeader
|
||||
class={styles['header-model']}
|
||||
inverted={this.inverted}
|
||||
bordered
|
||||
>
|
||||
<Logo />
|
||||
<div class={styles.nav}>
|
||||
<NMenu
|
||||
mode='horizontal'
|
||||
onUpdate:value={this.handleMenuClick}
|
||||
defaultValue={this.defaultMenuKey}
|
||||
class={styles.menu}
|
||||
inverted={this.inverted}
|
||||
options={this.menuOptions}
|
||||
/>
|
||||
<div class={styles.profile}>
|
||||
<NDropdown inverted={this.inverted} options={this.languageOptions}>
|
||||
<span>
|
||||
中文
|
||||
<NIcon class={styles.icon}>
|
||||
<IosArrowDown />
|
||||
</NIcon>
|
||||
</span>
|
||||
</NDropdown>
|
||||
<NDropdown inverted={this.inverted} options={this.profileOptions}>
|
||||
<span>
|
||||
<NIcon class={styles.icon}>
|
||||
<UserAlt />
|
||||
</NIcon>
|
||||
admin
|
||||
<NIcon class={styles.icon}>
|
||||
<IosArrowDown />
|
||||
</NIcon>
|
||||
</span>
|
||||
</NDropdown>
|
||||
</div>
|
||||
</div>
|
||||
</NLayoutHeader>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export { Header }
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 280px;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
import styles from './index.module.scss'
|
||||
|
||||
const Logo = defineComponent({
|
||||
name: 'Logo',
|
||||
setup() {},
|
||||
render() {
|
||||
return (
|
||||
<div class={styles.logo}>
|
||||
<img src='./src/assets/images/nav-logo.svg' alt='' />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default Logo
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.sider-model {
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { NLayoutSider, NMenu } from 'naive-ui'
|
||||
|
||||
const Sider = defineComponent({
|
||||
name: 'Sider',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
inverted: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
menuOptions: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
currentMenu: {
|
||||
type: Object,
|
||||
},
|
||||
defaultMenuKey: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const currentMenuRef = ref({})
|
||||
|
||||
const handleMenuClick = (key, data) => {
|
||||
currentMenuRef.value = data
|
||||
}
|
||||
|
||||
return { handleMenuClick }
|
||||
},
|
||||
render() {
|
||||
return
|
||||
this.visible ? (
|
||||
<NLayoutSider
|
||||
width={240}
|
||||
collapseMode={'width'}
|
||||
collapsedWidth={64}
|
||||
inverted={this.inverted}
|
||||
nativeScrollbar={false}
|
||||
show-trigger
|
||||
bordered
|
||||
>
|
||||
<NMenu
|
||||
onUpdate:value={this.handleMenuClick}
|
||||
inverted={this.inverted}
|
||||
collapsedWidth={64}
|
||||
collapsedIconSize={22}
|
||||
options={this.menuOptions}
|
||||
/>
|
||||
</NLayoutSider>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export { Sider }
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.container {
|
||||
.header-model {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: inherit;
|
||||
.menu {
|
||||
margin-left: 0px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.profile {
|
||||
width: 135px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,234 +0,0 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { h, defineComponent, ref } from 'vue'
|
||||
import styles from './index.module.scss'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {
|
||||
PersonCircleOutline,
|
||||
LogOutOutline,
|
||||
FileTrayFullOutline,
|
||||
Server,
|
||||
SettingsOutline,
|
||||
} from '@vicons/ionicons5'
|
||||
import {
|
||||
HomeOutlined,
|
||||
FolderOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
UserOutlined,
|
||||
} from '@vicons/antd'
|
||||
import { Database, Notes, Users } from '@vicons/tabler'
|
||||
import { MonitorFilled, AcUnitOutlined } from '@vicons/material'
|
||||
import { Flow } from '@vicons/carbon'
|
||||
import { Header } from './components/header'
|
||||
import { Sider } from './components/sider'
|
||||
import { NLayout, NLayoutContent, NIcon } from 'naive-ui'
|
||||
|
||||
function renderIcon(icon) {
|
||||
return () => h(NIcon, null, { default: () => h(icon) })
|
||||
}
|
||||
|
||||
const switchLanguageOptions = [
|
||||
{
|
||||
label: 'English',
|
||||
key: 'en',
|
||||
},
|
||||
{
|
||||
label: '中文',
|
||||
key: 'zh',
|
||||
},
|
||||
]
|
||||
|
||||
const profileOptions = [
|
||||
{
|
||||
label: '用户信息',
|
||||
key: 'profile',
|
||||
icon: renderIcon(PersonCircleOutline),
|
||||
},
|
||||
{
|
||||
label: '退出登录',
|
||||
key: 'logout',
|
||||
icon: renderIcon(LogOutOutline),
|
||||
},
|
||||
]
|
||||
|
||||
const menuOptions = [
|
||||
{
|
||||
label: '首页',
|
||||
key: 'home',
|
||||
icon: renderIcon(HomeOutlined),
|
||||
},
|
||||
{
|
||||
label: '项目管理',
|
||||
key: 'project',
|
||||
icon: renderIcon(Notes),
|
||||
children: [
|
||||
{
|
||||
label: '项目',
|
||||
key: 'projects-list',
|
||||
icon: renderIcon(Notes),
|
||||
},
|
||||
{
|
||||
label: '工作流监控',
|
||||
key: 'projects-index',
|
||||
icon: renderIcon(Flow),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '资源中心',
|
||||
key: 'resources',
|
||||
icon: renderIcon(FolderOutlined),
|
||||
children: [
|
||||
{
|
||||
label: '文件管理',
|
||||
key: 'file',
|
||||
icon: renderIcon(FileTrayFullOutline),
|
||||
},
|
||||
{
|
||||
label: '创建资源',
|
||||
key: 'resource-file-create',
|
||||
icon: renderIcon(AcUnitOutlined),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '数据源中心',
|
||||
key: 'datasource',
|
||||
icon: renderIcon(Database),
|
||||
children: [
|
||||
{
|
||||
label: '数据源中心',
|
||||
key: 'datasource-list',
|
||||
icon: renderIcon(Database),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '监控中心',
|
||||
key: 'monitor',
|
||||
icon: renderIcon(MonitorFilled),
|
||||
children: [
|
||||
{
|
||||
key: 'servers-master',
|
||||
title: '服务管理-Master',
|
||||
icon: renderIcon(Server),
|
||||
},
|
||||
{
|
||||
key: 'servers-worker',
|
||||
title: '服务管理-Worker',
|
||||
icon: renderIcon(SettingsOutline),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '安全中心',
|
||||
key: 'security',
|
||||
icon: renderIcon(SafetyCertificateOutlined),
|
||||
children: [
|
||||
{
|
||||
key: 'tenement-manage',
|
||||
label: '租户管理',
|
||||
icon: renderIcon(UserOutlined),
|
||||
},
|
||||
{
|
||||
key: 'users-manage',
|
||||
label: '用户管理',
|
||||
icon: renderIcon(Users),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const basic = defineComponent({
|
||||
name: 'basic',
|
||||
setup() {
|
||||
const invertedRef = ref(true)
|
||||
const hasSiderRef = ref(false)
|
||||
const defaultMenuKeyRef = ref('home')
|
||||
const currentMenuRef = ref({})
|
||||
const topMenuOptionsRef = ref([])
|
||||
const sideMenuOptionsRef = ref([])
|
||||
|
||||
const handleTopMenuClick = (data) => {
|
||||
currentMenuRef.value = data
|
||||
generateMenus()
|
||||
}
|
||||
|
||||
const handleSideMenuClick = (key, data) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const generateMenus = () => {
|
||||
topMenuOptionsRef.value = []
|
||||
sideMenuOptionsRef.value = []
|
||||
hasSiderRef.value = false
|
||||
menuOptions.forEach((option) => {
|
||||
topMenuOptionsRef.value.push({
|
||||
label: option.label,
|
||||
key: option.key,
|
||||
icon: option.icon,
|
||||
})
|
||||
if (
|
||||
currentMenuRef.value.key === option.key ||
|
||||
defaultMenuKeyRef.value === option.key
|
||||
) {
|
||||
if (option.hasOwnProperty('children') && option.children) {
|
||||
sideMenuOptionsRef.value = option.children
|
||||
hasSiderRef.value = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
generateMenus()
|
||||
return {
|
||||
topMenuOptionsRef,
|
||||
sideMenuOptionsRef,
|
||||
invertedRef,
|
||||
hasSiderRef,
|
||||
defaultMenuKeyRef,
|
||||
handleTopMenuClick,
|
||||
handleSideMenuClick,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NLayout class={styles.container}>
|
||||
<Header
|
||||
languageOptions={switchLanguageOptions}
|
||||
profileOptions={profileOptions}
|
||||
menuOptions={this.topMenuOptionsRef}
|
||||
inverted={this.invertedRef}
|
||||
defaultMenuKey={this.defaultMenuKeyRef}
|
||||
onMenuClick={this.handleTopMenuClick}
|
||||
/>
|
||||
<NLayout hasSider>
|
||||
<Sider
|
||||
visible={this.hasSiderRef}
|
||||
inverted={this.invertedRef}
|
||||
menuOptions={this.sideMenuOptionsRef}
|
||||
/>
|
||||
<NLayoutContent>
|
||||
<router-view />
|
||||
</NLayoutContent>
|
||||
</NLayout>
|
||||
</NLayout>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default basic
|
||||
|
|
@ -21,20 +21,20 @@ export function useDataList() {
|
|||
const languageOptions = [
|
||||
{
|
||||
label: 'English',
|
||||
key: 'en',
|
||||
key: 'en_US',
|
||||
},
|
||||
{
|
||||
label: '中文',
|
||||
key: 'zh',
|
||||
key: 'zh_CN',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
const state = reactive({
|
||||
chooseVal: ref('中文'),
|
||||
languageOptions: languageOptions
|
||||
languageOptions: languageOptions,
|
||||
})
|
||||
|
||||
return {
|
||||
state
|
||||
state,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,13 +16,17 @@
|
|||
*/
|
||||
|
||||
import { DropdownOption } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export function useDropDown(state: any) {
|
||||
const { locale } = useI18n()
|
||||
|
||||
const handleSelect = (key: string | number, option: DropdownOption) => {
|
||||
console.log(key, option)
|
||||
state.chooseVal = option.label
|
||||
locale.value = key as string
|
||||
}
|
||||
return {
|
||||
handleSelect
|
||||
handleSelect,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,11 +18,16 @@
|
|||
import { reactive, ref, h } from 'vue'
|
||||
import { NIcon } from 'naive-ui'
|
||||
import {
|
||||
HomeOutlined, ProfileOutlined, FolderOutlined, DatabaseOutlined, DesktopOutlined, SafetyCertificateOutlined
|
||||
HomeOutlined,
|
||||
ProfileOutlined,
|
||||
FolderOutlined,
|
||||
DatabaseOutlined,
|
||||
DesktopOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
} from '@vicons/antd'
|
||||
|
||||
export function useDataList() {
|
||||
const renderIcon = (icon:any) => {
|
||||
const renderIcon = (icon: any) => {
|
||||
return () => h(NIcon, null, { default: () => h(icon) })
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +40,7 @@ export function useDataList() {
|
|||
{
|
||||
label: '项目管理',
|
||||
key: 'project',
|
||||
icon: renderIcon(ProfileOutlined)
|
||||
icon: renderIcon(ProfileOutlined),
|
||||
},
|
||||
{
|
||||
label: '资源中心',
|
||||
|
|
@ -56,15 +61,15 @@ export function useDataList() {
|
|||
label: '安全中心',
|
||||
key: 'security',
|
||||
icon: renderIcon(SafetyCertificateOutlined),
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
const state = reactive({
|
||||
activeKey: ref('home'),
|
||||
menuOptions: menuOptions
|
||||
menuOptions: menuOptions,
|
||||
})
|
||||
|
||||
return {
|
||||
state
|
||||
state,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { Router } from 'vue-router'
|
||||
import { MenuOption } from 'naive-ui'
|
||||
import { MenuOption } from 'naive-ui'
|
||||
|
||||
export function useMenuClick() {
|
||||
const router: Router = useRouter()
|
||||
|
|
@ -28,6 +28,6 @@ export function useMenuClick() {
|
|||
}
|
||||
|
||||
return {
|
||||
handleMenuClick
|
||||
handleMenuClick,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,10 @@
|
|||
|
||||
import { reactive, ref, h } from 'vue'
|
||||
import { NIcon } from 'naive-ui'
|
||||
import {
|
||||
UserOutlined, LogoutOutlined
|
||||
} from '@vicons/antd'
|
||||
import { UserOutlined, LogoutOutlined } from '@vicons/antd'
|
||||
|
||||
export function useDataList() {
|
||||
const renderIcon = (icon:any) => {
|
||||
const renderIcon = (icon: any) => {
|
||||
return () => h(NIcon, null, { default: () => h(icon) })
|
||||
}
|
||||
|
||||
|
|
@ -38,12 +36,12 @@ export function useDataList() {
|
|||
icon: renderIcon(LogoutOutlined),
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
const state = reactive({
|
||||
profileOptions: profileOptions
|
||||
profileOptions: profileOptions,
|
||||
})
|
||||
|
||||
return {
|
||||
state
|
||||
state,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,6 @@ export function useDropDown() {
|
|||
console.log(key, option)
|
||||
}
|
||||
return {
|
||||
handleSelect
|
||||
handleSelect,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue