feat: fix layout's problem (#7742)

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

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

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

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

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