[Feature][UI Next]Refactoring layout (#7558)

* refactor: Refactoring layout

* chore: Delete unnecessary packages

dolphinscheduler-ui-next/package.json

@@ -31,14 +31,6 @@
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "@vicons/antd": "^0.11.0",
-    "@vicons/carbon": "^0.11.0",
-    "@vicons/fa": "^0.11.0",
-    "@vicons/fluent": "^0.11.0",
-    "@vicons/ionicons4": "^0.11.0",
-    "@vicons/ionicons5": "^0.11.0",
-    "@vicons/material": "^0.11.0",
-    "@vicons/tabler": "^0.11.0",
-    "@vicons/utils": "^0.1.4",
     "@vitejs/plugin-vue": "^1.10.2",
     "@vitejs/plugin-vue-jsx": "^1.3.1",
     "dart-sass": "^1.25.0",

dolphinscheduler-ui-next/src/layouts/content/components/language/index.module.scss

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+ 
+.icon {
+  margin: 0 12px;
+}

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

@@ -0,0 +1,51 @@
+/*
+ * 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, toRefs } from 'vue'
+import { NDropdown, NIcon, NButton } from 'naive-ui'
+import styles from './index.module.scss'
+import { DownOutlined } from '@vicons/antd'
+import { useDataList } from './use-dataList'
+import { useDropDown } from './use-dropdown'
+
+const language = defineComponent({
+  name: 'language',
+  setup() {
+    const { state } = useDataList()
+    const { handleSelect } = useDropDown(state)
+    return { ...toRefs(state), handleSelect }
+  },
+  render() {
+    return (
+      <NDropdown
+        trigger='hover'
+        show-arrow
+        options={this.languageOptions}
+        on-select={this.handleSelect}
+      >
+        <NButton text>
+          {this.chooseVal}
+          <NIcon class={styles.icon}>
+            <DownOutlined />
+          </NIcon>
+        </NButton>
+      </NDropdown>
+    )
+  },
+})
+
+export default language

dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { reactive, ref } from 'vue'
+
+export function useDataList() {
+  const languageOptions = [
+    {
+      label: 'English',
+      key: 'en',
+    },
+    {
+      label: '中文',
+      key: 'zh',
+    },
+  ]
+  
+  const state = reactive({
+    chooseVal: ref('中文'),
+    languageOptions: languageOptions
+  })
+
+  return {
+    state
+  }
+}

dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { DropdownOption } from 'naive-ui'
+
+export function useDropDown(state: any) {
+  const handleSelect = (key: string | number, option: DropdownOption) => {
+    console.log(key, option)
+    state.chooseVal = option.label
+  }
+  return {
+    handleSelect
+  }
+}

dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss

@@ -0,0 +1,23 @@
+/*
+ * 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 {
+  width: 180px;
+  height: 100%;
+  margin-left: 12px;
+  background: url('../../../../assets/images/logo.svg') 100% no-repeat;
+}

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

@@ -0,0 +1,29 @@
+/*
+ * 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}></div>
+  },
+})
+
+export default logo

dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss

@@ -0,0 +1,33 @@
+/*
+ * 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 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 64px;
+
+  .nav {
+    margin-left: 12px;
+  }
+  
+  .settings {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+  }
+}

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

@@ -0,0 +1,55 @@
+/*
+ * 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, toRefs } from 'vue'
+import styles from './index.module.scss'
+import { NMenu } from 'naive-ui'
+import Logo from '../logo'
+import Language from '../language'
+import User from '../user'
+import { useDataList } from './use-dataList'
+import { useMenuClick } from './use-menuClick'
+
+const navbar = defineComponent({
+  name: 'navbar',
+  setup() {
+    const { state } = useDataList()
+    const { handleMenuClick } = useMenuClick()
+    return { ...toRefs(state), handleMenuClick }
+  },
+  render() {
+    return (
+      <div class={styles.container}>
+        <Logo />
+        <div class={styles.nav}>
+          <NMenu
+            v-model={[this.activeKey, 'value']}
+            mode='horizontal'
+            options={this.menuOptions}
+            onUpdateValue={this.handleMenuClick}
+          />
+        </div>
+        <div class={styles.settings}>
+          <Language />
+          <User />
+        </div>
+      </div>
+    )
+  },
+})
+
+export default navbar

dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts

@@ -0,0 +1,70 @@
+/*
+ * 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 { reactive, ref, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  HomeOutlined, ProfileOutlined, FolderOutlined, DatabaseOutlined, DesktopOutlined, SafetyCertificateOutlined
+} from '@vicons/antd'
+
+export function useDataList() {
+  const renderIcon = (icon:any) => {
+    return () => h(NIcon, null, { default: () => h(icon) })
+  }
+
+  const menuOptions = [
+    {
+      label: '首页',
+      key: 'home',
+      icon: renderIcon(HomeOutlined),
+    },
+    {
+      label: '项目管理',
+      key: 'project',
+      icon: renderIcon(ProfileOutlined)
+    },
+    {
+      label: '资源中心',
+      key: 'resources',
+      icon: renderIcon(FolderOutlined),
+    },
+    {
+      label: '数据源中心',
+      key: 'datasource',
+      icon: renderIcon(DatabaseOutlined),
+    },
+    {
+      label: '监控中心',
+      key: 'monitor',
+      icon: renderIcon(DesktopOutlined),
+    },
+    {
+      label: '安全中心',
+      key: 'security',
+      icon: renderIcon(SafetyCertificateOutlined),
+    }
+  ]
+  
+  const state = reactive({
+    activeKey: ref('home'),
+    menuOptions: menuOptions
+  })
+
+  return {
+    state
+  }
+}

dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { useRouter } from 'vue-router'
+import type { Router } from 'vue-router'
+import { MenuOption } from 'naive-ui' 
+
+export function useMenuClick() {
+  const router: Router = useRouter()
+
+  const handleMenuClick = (key: string, item: MenuOption) => {
+    console.log(key, item)
+    router.push({ path: 'home' })
+  }
+
+  return {
+    handleMenuClick
+  }
+}

dolphinscheduler-ui-next/src/layouts/content/components/user/index.module.scss

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+ 
+.icon {
+  margin: 0 12px;
+}

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

@@ -0,0 +1,54 @@
+/*
+ * 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, toRefs } from 'vue'
+import { NDropdown, NIcon, NButton } from 'naive-ui'
+import styles from './index.module.scss'
+import { DownOutlined, UserOutlined } from '@vicons/antd'
+import { useDataList } from './use-dataList'
+import { useDropDown } from './use-dropdown'
+
+const user = defineComponent({
+  name: 'user',
+  setup() {
+    const { state } = useDataList()
+    const { handleSelect } = useDropDown()
+    return { ...toRefs(state), handleSelect }
+  },
+  render() {
+    return (
+      <NDropdown
+        trigger='hover'
+        show-arrow
+        options={this.profileOptions}
+        on-select={this.handleSelect}
+      >
+        <NButton text>
+          <NIcon class={styles.icon}>
+            <UserOutlined />
+          </NIcon>
+          admin
+          <NIcon class={styles.icon}>
+            <DownOutlined />
+          </NIcon>
+        </NButton>
+      </NDropdown>
+    )
+  },
+})
+
+export default user

dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 { reactive, ref, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  UserOutlined, LogoutOutlined
+} from '@vicons/antd'
+
+export function useDataList() {
+  const renderIcon = (icon:any) => {
+    return () => h(NIcon, null, { default: () => h(icon) })
+  }
+
+  const profileOptions = [
+    {
+      label: '用户信息',
+      key: 'profile',
+      icon: renderIcon(UserOutlined),
+    },
+    {
+      label: '退出登录',
+      key: 'logout',
+      icon: renderIcon(LogoutOutlined),
+    },
+  ]
+  
+  const state = reactive({
+    profileOptions: profileOptions
+  })
+
+  return {
+    state
+  }
+}

dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { DropdownOption } from 'naive-ui'
+
+export function useDropDown() {
+  const handleSelect = (key: string | number, option: DropdownOption) => {
+    console.log(key, option)
+  }
+  return {
+    handleSelect
+  }
+}

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

@@ -0,0 +1,38 @@
+/*
+ * 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 { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui'
+import NavBar from './components/navbar'
+
+const Content = defineComponent({
+  name: 'Content',
+  render() {
+    return (
+      <NLayout>
+        <NLayoutHeader>
+          <NavBar></NavBar>
+        </NLayoutHeader>
+        <NLayoutContent>
+          <router-view />
+        </NLayoutContent>
+      </NLayout>
+    )
+  },
+})
+
+export default Content

dolphinscheduler-ui-next/src/router/modules/datasource.ts

@@ -27,7 +27,7 @@ export default {
   name: 'datasource',
   redirect: { name: 'datasource-list' },
   meta: { title: '数据源中心' },
-  component: () => import('@/layouts/basic'),
+  component: () => import('@/layouts/content'),
   children: [
     {
       path: '/datasource/list',

dolphinscheduler-ui-next/src/router/modules/monitor.ts

@@ -27,7 +27,7 @@ export default {
   name: 'monitor',
   meta: { title: 'monitor' },
   redirect: { name: 'servers-master' },
-  component: () => import('@/layouts/basic'),
+  component: () => import('@/layouts/content'),
   children: [
     {
       path: '/monitor/servers/master',

dolphinscheduler-ui-next/src/router/modules/projects.ts

@@ -27,7 +27,7 @@ export default {
   name: 'projects',
   redirect: { name: 'projects-list' },
   meta: { title: '项目管理' },
-  component: () => import('@/layouts/basic'),
+  component: () => import('@/layouts/content'),
   children: [
     {
       path: '/projects/list',

dolphinscheduler-ui-next/src/router/modules/resources.ts

@@ -27,7 +27,7 @@ export default {
   name: 'resource',
   redirect: { name: 'file' },
   meta: { title: '资源中心' },
-  component: () => import('@/layouts/basic'),
+  component: () => import('@/layouts/content'),
   children: [
     {
       path: '/resource/file',

dolphinscheduler-ui-next/src/router/modules/security.ts

@@ -27,7 +27,7 @@ export default {
   name: 'security',
   meta: { title: '安全中心' },
   redirect: { name: 'tenement-manage' },
-  component: () => import('@/layouts/basic'),
+  component: () => import('@/layouts/content'),
   children: [
     {
       path: '/security/tenant',

dolphinscheduler-ui-next/src/router/routes.ts

@@ -36,7 +36,7 @@ const basePage: RouteRecordRaw[] = [
     path: '/',
     redirect: { name: 'home' },
     meta: { title: '首页' },
-    component: () => import('@/layouts/basic'),
+    component: () => import('@/layouts/content'),
     children: [
       {
         path: '/home',

dolphinscheduler-ui-next/src/views/login/index.module.scss

@@ -37,13 +37,15 @@
     box-shadow: 0 2px 25px 0 rgb(0 0 0 / 30%);
 
     .logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       padding-top: 30px;
 
       .logo-img {
         width: 280px;
         height: 60px;
-        display: block;
-        background: url('../../assets/images/logo.svg') no-repeat 23px;
+        background: url('../../assets/images/logo.svg') 50% no-repeat;
         margin: 0 auto;
       }
     }