[Feature][UI Next] Rewrite the page as defineComponent (#7817)

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

@@ -15,52 +15,46 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, ref, watch, onMounted } from 'vue'
+import { defineComponent, ref, watch, PropType } 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'
 
-interface Props {
-  sideMenuOptions: Array<any>
-  isShowSide: boolean
-}
+const Sidebar = defineComponent({
+  name: 'Sidebar',
+  props: {
+    sideMenuOptions: {
+      type: Array as PropType<any>,
+      default: [],
+    },
+  },
+  setup() {},
+  render() {
+    console.log('props', this)
+    const collapsedRef = ref(false)
+    const defaultExpandedKeys = [
+      'workflow',
+      'udf-manage',
+      'service-manage',
+      'statistical-manage',
+    ]
 
-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>
-  )
-}
+    return (
+      <NLayoutSider
+        bordered
+        nativeScrollbar={false}
+        show-trigger='bar'
+        collapse-mode='width'
+        collapsed={collapsedRef.value}
+        onCollapse={() => (collapsedRef.value = true)}
+        onExpand={() => (collapsedRef.value = false)}
+      >
+        <NMenu
+          options={this.sideMenuOptions}
+          defaultExpandedKeys={defaultExpandedKeys}
+        />
+      </NLayoutSider>
+    )
+  }
+})
 
 export default Sidebar

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

@@ -15,53 +15,59 @@
  * limitations under the License.
  */
 
-import { ref } from 'vue'
+import { defineComponent, ref, watch } 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'
+import { useI18n } from 'vue-i18n'
 
-const Content = () => {
-  const { state, getHeaderMenuOptions } = useDataList()
+const Content = defineComponent({
+  name: 'Content',
+  setup() {
+    const languageStore = useLanguageStore()
 
-  const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
+    watch(useI18n().locale, () => {
+      console.log(123)
+    })
 
-  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 { languageStore }
+  },
+  render() {
+    const { state, getHeaderMenuOptions } = useDataList()
+  
+    const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
+  
+    const sideMenuOptions = ref()
+  
+    const getSideMenuOptions = (item: any) => {
+      this.languageStore.setMenuKey(item.key)
+      sideMenuOptions.value =
+        state.menuOptions.filter((menu) => menu.key === item.key)[0].children ||
+        []
+      state.isShowSide = sideMenuOptions.value.length !== 0
+    }
+    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;'>
+          { state.isShowSide && <SideBar sideMenuOptions={sideMenuOptions.value} /> }
+          <NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
+            <router-view />
+          </NLayoutContent>
+        </NLayout>
+      </NLayout>
+    )
   }
 
-  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