feat: fix layout's problem (#7742)

dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx

@@ -15,23 +15,19 @@
  * 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({
+interface Props {
-  name: 'Sidebar',
+  sideMenuOptions: Array<any>,
-  props: {
+  isShowSide: boolean
-    sideMenuOptions: {
+}
-      type: Array as PropType<any>,
+
-      default: [],
+const Sidebar = (props: Props) => {
-    },
+  // console.log('props', JSON.stringify(props))
-    isShowSide: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
-  },
-  setup() {
   const collapsedRef = ref(false)
   const defaultExpandedKeys = [
     'workflow',
@@ -40,28 +36,30 @@ const Sidebar = defineComponent({
     'statistical-manage',
   ]
 
-    return { collapsedRef, defaultExpandedKeys }
+  watch(useI18n().locale, () => {
-  },
+    const languageStore = useLanguageStore()
-  render() {
+    refreshOptionsRef.value = props.sideMenuOptions
+    // console.log(123, JSON.stringify(props))
+  })
+
+  const refreshOptionsRef = ref()
+
   return (
-      this.isShowSide && (
+    <NLayoutSider style={{display: props.isShowSide ? 'block' : 'none'}}
-        <NLayoutSider
       bordered
       nativeScrollbar={false}
       show-trigger='bar'
       collapse-mode='width'
-          collapsed={this.collapsedRef}
+      collapsed={collapsedRef.value}
-          onCollapse={() => (this.collapsedRef = true)}
+      onCollapse={() => (collapsedRef.value = true)}
-          onExpand={() => (this.collapsedRef = false)}
+      onExpand={() => (collapsedRef.value = false)}
     >
       <NMenu
-            options={this.sideMenuOptions}
+        options={props.sideMenuOptions || refreshOptionsRef.value}
-            defaultExpandedKeys={this.defaultExpandedKeys}
+        defaultExpandedKeys={defaultExpandedKeys}
       />
     </NLayoutSider>
   )
-    )
+}
-  },
-})
 
 export default Sidebar

dolphinscheduler-ui-next/src/layouts/content/index.tsx

@@ -15,50 +15,47 @@
  * 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 = () => {
 
-const Content = defineComponent({
-  name: 'Content',
-  setup() {
   const { state, getHeaderMenuOptions } = useDataList()
 
   const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
 
   const sideMenuOptions = ref()
+  const languageStore = useLanguageStore()
 
   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 {
-      ...toRefs(state),
-      headerMenuOptions,
-      getSideMenuOptions,
-      sideMenuOptions,
-    }
-  },
-  render() {
   return (
     <NLayout style='height: 100%;'>
       <NLayoutHeader style='height: 65px;'>
         <NavBar
-            onHandleMenuClick={this.getSideMenuOptions}
+          onHandleMenuClick={getSideMenuOptions}
-            headerMenuOptions={this.headerMenuOptions}
+          headerMenuOptions={headerMenuOptions}
-            languageOptions={this.languageOptions}
+          languageOptions={state.languageOptions}
-            profileOptions={this.profileOptions}
+          profileOptions={state.profileOptions}
         />
       </NLayoutHeader>
       <NLayout has-sider position='absolute' style='top: 65px;'>
         <SideBar
-            sideMenuOptions={this.sideMenuOptions}
+          sideMenuOptions={sideMenuOptions.value}
-            isShowSide={this.isShowSide}
+          isShowSide={state.isShowSide}
         />
         <NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
           <router-view />
@@ -66,7 +63,6 @@ const Content = defineComponent({
       </NLayout>
     </NLayout>
   )
-  },
+}
-})
 
 export default Content

dolphinscheduler-ui-next/src/store/language/language.ts

@@ -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
+    },
+  },
+})

dolphinscheduler-ui-next/src/store/language/types.ts

@@ -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

dolphinscheduler-ui-next/src/views/login/index.tsx

@@ -15,30 +15,25 @@
  * 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({
+const login = () => {
-  name: 'login',
-  setup() {
   const { state, t, locale } = useValidate()
 
   const { handleChange } = useTranslate(locale)
 
   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}
+          onUpdateValue={handleChange}
           checked-value='en_US'
           unchecked-value='zh_CN'
         >
@@ -53,32 +48,32 @@ const login = defineComponent({
           <div class={styles['logo-img']} />
         </div>
         <div class={styles['form-model']}>
-            <NForm rules={this.rules} ref='loginFormRef'>
+          <NForm rules={state.rules} ref='loginFormRef'>
             <NFormItem
-                label={this.t('login.userName')}
+              label={t('login.userName')}
               label-style={{ color: 'black' }}
               path='userName'
             >
               <NInput
                 type='text'
                 size='large'
-                  v-model={[this.loginForm.userName, 'value']}
+                v-model={[state.loginForm.userName, 'value']}
-                  placeholder={this.t('login.userName_tips')}
+                placeholder={t('login.userName_tips')}
                 autofocus
-                  onKeydown={withKeys(this.handleLogin, ['enter'])}
+                onKeydown={withKeys(handleLogin, ['enter'])}
               />
             </NFormItem>
             <NFormItem
-                label={this.t('login.userPassword')}
+              label={t('login.userPassword')}
               label-style={{ color: 'black' }}
               path='userPassword'
             >
               <NInput
                 type='password'
                 size='large'
-                  v-model={[this.loginForm.userPassword, 'value']}
+                v-model={[state.loginForm.userPassword, 'value']}
-                  placeholder={this.t('login.userPassword_tips')}
+                placeholder={t('login.userPassword_tips')}
-                  onKeydown={withKeys(this.handleLogin, ['enter'])}
+                onKeydown={withKeys(handleLogin, ['enter'])}
               />
             </NFormItem>
           </NForm>
@@ -86,15 +81,14 @@ const login = defineComponent({
             round
             type='info'
             style={{ width: '100%' }}
-              onClick={this.handleLogin}
+            onClick={handleLogin}
           >
-              {this.t('login.login')}
+            {t('login.login')}
           </NButton>
         </div>
       </div>
     </div>
   )
-  },
+}
-})
 
 export default login