feat: fix layout's problem (#7742)
This commit is contained in:
labbomb
GitHub
parent
52a74396dd
commit
b2e6b69b09
|
|
@ -15,53 +15,51 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { defineComponent, PropType, ref } from 'vue'
|
||||
import { defineComponent, PropType, ref, watch, onMounted } from 'vue'
|
||||
import styles from './index.module.scss'
|
||||
import { NLayoutSider, NMenu } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useLanguageStore } from '@/store/language/language'
|
||||
|
||||
const Sidebar = defineComponent({
|
||||
name: 'Sidebar',
|
||||
props: {
|
||||
sideMenuOptions: {
|
||||
type: Array as PropType<any>,
|
||||
default: [],
|
||||
},
|
||||
isShowSide: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const collapsedRef = ref(false)
|
||||
const defaultExpandedKeys = [
|
||||
'workflow',
|
||||
'udf-manage',
|
||||
'service-manage',
|
||||
'statistical-manage',
|
||||
]
|
||||
interface Props {
|
||||
sideMenuOptions: Array<any>,
|
||||
isShowSide: boolean
|
||||
}
|
||||
|
||||
return { collapsedRef, defaultExpandedKeys }
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
this.isShowSide && (
|
||||
<NLayoutSider
|
||||
bordered
|
||||
nativeScrollbar={false}
|
||||
show-trigger='bar'
|
||||
collapse-mode='width'
|
||||
collapsed={this.collapsedRef}
|
||||
onCollapse={() => (this.collapsedRef = true)}
|
||||
onExpand={() => (this.collapsedRef = false)}
|
||||
>
|
||||
<NMenu
|
||||
options={this.sideMenuOptions}
|
||||
defaultExpandedKeys={this.defaultExpandedKeys}
|
||||
/>
|
||||
</NLayoutSider>
|
||||
)
|
||||
)
|
||||
},
|
||||
})
|
||||
const Sidebar = (props: Props) => {
|
||||
// console.log('props', JSON.stringify(props))
|
||||
const collapsedRef = ref(false)
|
||||
const defaultExpandedKeys = [
|
||||
'workflow',
|
||||
'udf-manage',
|
||||
'service-manage',
|
||||
'statistical-manage',
|
||||
]
|
||||
|
||||
watch(useI18n().locale, () => {
|
||||
const languageStore = useLanguageStore()
|
||||
refreshOptionsRef.value = props.sideMenuOptions
|
||||
// console.log(123, JSON.stringify(props))
|
||||
})
|
||||
|
||||
const refreshOptionsRef = ref()
|
||||
|
||||
return (
|
||||
<NLayoutSider style={{display: props.isShowSide ? 'block' : 'none'}}
|
||||
bordered
|
||||
nativeScrollbar={false}
|
||||
show-trigger='bar'
|
||||
collapse-mode='width'
|
||||
collapsed={collapsedRef.value}
|
||||
onCollapse={() => (collapsedRef.value = true)}
|
||||
onExpand={() => (collapsedRef.value = false)}
|
||||
>
|
||||
<NMenu
|
||||
options={props.sideMenuOptions || refreshOptionsRef.value}
|
||||
defaultExpandedKeys={defaultExpandedKeys}
|
||||
/>
|
||||
</NLayoutSider>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
|
|
|
|||
|
|
@ -15,58 +15,54 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { defineComponent, ref, toRefs } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui'
|
||||
import NavBar from './components/navbar'
|
||||
import SideBar from './components/sidebar'
|
||||
import { useDataList } from './use-dataList'
|
||||
import { useLanguageStore } from '@/store/language/language'
|
||||
|
||||
const Content = defineComponent({
|
||||
name: 'Content',
|
||||
setup() {
|
||||
const { state, getHeaderMenuOptions } = useDataList()
|
||||
const Content = () => {
|
||||
|
||||
const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
|
||||
const { state, getHeaderMenuOptions } = useDataList()
|
||||
|
||||
const sideMenuOptions = ref()
|
||||
const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
|
||||
|
||||
const getSideMenuOptions = (item: any) => {
|
||||
sideMenuOptions.value =
|
||||
state.menuOptions.filter((menu) => menu.key === item.key)[0].children ||
|
||||
[]
|
||||
state.isShowSide = sideMenuOptions.value.length !== 0
|
||||
}
|
||||
const sideMenuOptions = ref()
|
||||
const languageStore = useLanguageStore()
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
headerMenuOptions,
|
||||
getSideMenuOptions,
|
||||
sideMenuOptions,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NLayout style='height: 100%;'>
|
||||
<NLayoutHeader style='height: 65px;'>
|
||||
<NavBar
|
||||
onHandleMenuClick={this.getSideMenuOptions}
|
||||
headerMenuOptions={this.headerMenuOptions}
|
||||
languageOptions={this.languageOptions}
|
||||
profileOptions={this.profileOptions}
|
||||
/>
|
||||
</NLayoutHeader>
|
||||
<NLayout has-sider position='absolute' style='top: 65px;'>
|
||||
<SideBar
|
||||
sideMenuOptions={this.sideMenuOptions}
|
||||
isShowSide={this.isShowSide}
|
||||
/>
|
||||
<NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
|
||||
<router-view />
|
||||
</NLayoutContent>
|
||||
</NLayout>
|
||||
const getSideMenuOptions = (item: any) => {
|
||||
// console.log('item', item)
|
||||
languageStore.setMenuKey(item.key)
|
||||
sideMenuOptions.value =
|
||||
state.menuOptions.filter((menu) => menu.key === item.key)[0].children ||
|
||||
[]
|
||||
state.isShowSide = sideMenuOptions.value.length !== 0
|
||||
// console.log('sideMenuOptions.value', sideMenuOptions.value)
|
||||
// console.log('state.isShowSide', state.isShowSide)
|
||||
}
|
||||
|
||||
return (
|
||||
<NLayout style='height: 100%;'>
|
||||
<NLayoutHeader style='height: 65px;'>
|
||||
<NavBar
|
||||
onHandleMenuClick={getSideMenuOptions}
|
||||
headerMenuOptions={headerMenuOptions}
|
||||
languageOptions={state.languageOptions}
|
||||
profileOptions={state.profileOptions}
|
||||
/>
|
||||
</NLayoutHeader>
|
||||
<NLayout has-sider position='absolute' style='top: 65px;'>
|
||||
<SideBar
|
||||
sideMenuOptions={sideMenuOptions.value}
|
||||
isShowSide={state.isShowSide}
|
||||
/>
|
||||
<NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
|
||||
<router-view />
|
||||
</NLayoutContent>
|
||||
</NLayout>
|
||||
)
|
||||
},
|
||||
})
|
||||
</NLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Content
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
* 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 { defineStore } from 'pinia'
|
||||
import LanguageState from './types'
|
||||
|
||||
export const useLanguageStore = defineStore({
|
||||
id: 'language',
|
||||
state: (): LanguageState => ({
|
||||
menuKey: '',
|
||||
}),
|
||||
getters: {
|
||||
getMenuKey(): string {
|
||||
return this.menuKey
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
setMenuKey(menuKey: string): void {
|
||||
this.menuKey = menuKey
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
interface LanguageState {
|
||||
menuKey: string
|
||||
}
|
||||
|
||||
export default LanguageState
|
||||
|
|
@ -15,86 +15,80 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { defineComponent, toRefs, withKeys } from 'vue'
|
||||
import { withKeys } from 'vue'
|
||||
import styles from './index.module.scss'
|
||||
import { NInput, NButton, NSwitch, NForm, NFormItem } from 'naive-ui'
|
||||
import { useValidate } from './use-validate'
|
||||
import { useTranslate } from './use-translate'
|
||||
import { useLogin } from './use-login'
|
||||
|
||||
const login = defineComponent({
|
||||
name: 'login',
|
||||
setup() {
|
||||
const { state, t, locale } = useValidate()
|
||||
const login = () => {
|
||||
const { state, t, locale } = useValidate()
|
||||
|
||||
const { handleChange } = useTranslate(locale)
|
||||
const { handleChange } = useTranslate(locale)
|
||||
|
||||
const { handleLogin } = useLogin(state)
|
||||
const { handleLogin } = useLogin(state)
|
||||
|
||||
return { t, handleChange, handleLogin, ...toRefs(state) }
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div class={styles.container}>
|
||||
<div class={styles['language-switch']}>
|
||||
<NSwitch
|
||||
onUpdateValue={this.handleChange}
|
||||
checked-value='en_US'
|
||||
unchecked-value='zh_CN'
|
||||
>
|
||||
{{
|
||||
checked: () => 'en_US',
|
||||
unchecked: () => 'zh_CN',
|
||||
}}
|
||||
</NSwitch>
|
||||
return (
|
||||
<div class={styles.container}>
|
||||
<div class={styles['language-switch']}>
|
||||
<NSwitch
|
||||
onUpdateValue={handleChange}
|
||||
checked-value='en_US'
|
||||
unchecked-value='zh_CN'
|
||||
>
|
||||
{{
|
||||
checked: () => 'en_US',
|
||||
unchecked: () => 'zh_CN',
|
||||
}}
|
||||
</NSwitch>
|
||||
</div>
|
||||
<div class={styles['login-model']}>
|
||||
<div class={styles.logo}>
|
||||
<div class={styles['logo-img']} />
|
||||
</div>
|
||||
<div class={styles['login-model']}>
|
||||
<div class={styles.logo}>
|
||||
<div class={styles['logo-img']} />
|
||||
</div>
|
||||
<div class={styles['form-model']}>
|
||||
<NForm rules={this.rules} ref='loginFormRef'>
|
||||
<NFormItem
|
||||
label={this.t('login.userName')}
|
||||
label-style={{ color: 'black' }}
|
||||
path='userName'
|
||||
>
|
||||
<NInput
|
||||
type='text'
|
||||
size='large'
|
||||
v-model={[this.loginForm.userName, 'value']}
|
||||
placeholder={this.t('login.userName_tips')}
|
||||
autofocus
|
||||
onKeydown={withKeys(this.handleLogin, ['enter'])}
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem
|
||||
label={this.t('login.userPassword')}
|
||||
label-style={{ color: 'black' }}
|
||||
path='userPassword'
|
||||
>
|
||||
<NInput
|
||||
type='password'
|
||||
size='large'
|
||||
v-model={[this.loginForm.userPassword, 'value']}
|
||||
placeholder={this.t('login.userPassword_tips')}
|
||||
onKeydown={withKeys(this.handleLogin, ['enter'])}
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<NButton
|
||||
round
|
||||
type='info'
|
||||
style={{ width: '100%' }}
|
||||
onClick={this.handleLogin}
|
||||
<div class={styles['form-model']}>
|
||||
<NForm rules={state.rules} ref='loginFormRef'>
|
||||
<NFormItem
|
||||
label={t('login.userName')}
|
||||
label-style={{ color: 'black' }}
|
||||
path='userName'
|
||||
>
|
||||
{this.t('login.login')}
|
||||
</NButton>
|
||||
</div>
|
||||
<NInput
|
||||
type='text'
|
||||
size='large'
|
||||
v-model={[state.loginForm.userName, 'value']}
|
||||
placeholder={t('login.userName_tips')}
|
||||
autofocus
|
||||
onKeydown={withKeys(handleLogin, ['enter'])}
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem
|
||||
label={t('login.userPassword')}
|
||||
label-style={{ color: 'black' }}
|
||||
path='userPassword'
|
||||
>
|
||||
<NInput
|
||||
type='password'
|
||||
size='large'
|
||||
v-model={[state.loginForm.userPassword, 'value']}
|
||||
placeholder={t('login.userPassword_tips')}
|
||||
onKeydown={withKeys(handleLogin, ['enter'])}
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<NButton
|
||||
round
|
||||
type='info'
|
||||
style={{ width: '100%' }}
|
||||
onClick={handleLogin}
|
||||
>
|
||||
{t('login.login')}
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default login
|
||||
|
|
|
|||
Loading…
Reference in New Issue