From 78e0f421f550a802052cdfadcdf0e2e7d71adcbf Mon Sep 17 00:00:00 2001
From: labbomb <739955946@qq.com>
Date: Thu, 23 Dec 2021 10:22:19 +0800
Subject: [PATCH] [Feature][UI Next]Refactoring layout (#7558)
* refactor: Refactoring layout
* chore: Delete unnecessary packages
---
dolphinscheduler-ui-next/package.json | 8 ---
.../components/language/index.module.scss | 20 ++++++
.../content/components/language/index.tsx | 51 ++++++++++++++
.../components/language/use-dataList.ts | 40 +++++++++++
.../components/language/use-dropdown.ts | 28 ++++++++
.../content/components/logo/index.module.scss | 23 ++++++
.../layouts/content/components/logo/index.tsx | 29 ++++++++
.../components/navbar/index.module.scss | 33 +++++++++
.../content/components/navbar/index.tsx | 55 +++++++++++++++
.../content/components/navbar/use-dataList.ts | 70 +++++++++++++++++++
.../components/navbar/use-menuClick.ts | 33 +++++++++
.../content/components/user/index.module.scss | 20 ++++++
.../layouts/content/components/user/index.tsx | 54 ++++++++++++++
.../content/components/user/use-dataList.ts | 49 +++++++++++++
.../content/components/user/use-dropdown.ts | 27 +++++++
.../src/layouts/content/index.tsx | 38 ++++++++++
.../src/router/modules/datasource.ts | 2 +-
.../src/router/modules/monitor.ts | 2 +-
.../src/router/modules/projects.ts | 2 +-
.../src/router/modules/resources.ts | 2 +-
.../src/router/modules/security.ts | 2 +-
dolphinscheduler-ui-next/src/router/routes.ts | 2 +-
.../src/views/login/index.module.scss | 6 +-
23 files changed, 580 insertions(+), 16 deletions(-)
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/language/index.module.scss
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/user/index.module.scss
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
create mode 100644 dolphinscheduler-ui-next/src/layouts/content/index.tsx
diff --git a/dolphinscheduler-ui-next/package.json b/dolphinscheduler-ui-next/package.json
index 0b5aad51c3..bc43c04521 100644
--- a/dolphinscheduler-ui-next/package.json
+++ b/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",
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/components/language/index.module.scss
new file mode 100644
index 0000000000..41b284a62a
--- /dev/null
+++ b/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;
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/language/index.tsx
new file mode 100644
index 0000000000..b921423080
--- /dev/null
+++ b/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 (
+
+
+ {this.chooseVal}
+
+
+
+
+
+ )
+ },
+})
+
+export default language
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts
new file mode 100644
index 0000000000..29068f0e5b
--- /dev/null
+++ b/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
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts b/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
new file mode 100644
index 0000000000..77f69e7cac
--- /dev/null
+++ b/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
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss
new file mode 100644
index 0000000000..2254960345
--- /dev/null
+++ b/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;
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx
new file mode 100644
index 0000000000..fd658dfaf9
--- /dev/null
+++ b/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
+ },
+})
+
+export default logo
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss
new file mode 100644
index 0000000000..31b57b3f68
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
new file mode 100644
index 0000000000..0cc5e7c8df
--- /dev/null
+++ b/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 (
+
+ )
+ },
+})
+
+export default navbar
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts
new file mode 100644
index 0000000000..66a3a79f2c
--- /dev/null
+++ b/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
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
new file mode 100644
index 0000000000..5c1d6cbbf4
--- /dev/null
+++ b/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
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/user/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/components/user/index.module.scss
new file mode 100644
index 0000000000..41b284a62a
--- /dev/null
+++ b/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;
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/user/index.tsx
new file mode 100644
index 0000000000..9e0c002dab
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ admin
+
+
+
+
+
+ )
+ },
+})
+
+export default user
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts
new file mode 100644
index 0000000000..c3941f32d6
--- /dev/null
+++ b/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
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts b/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts
new file mode 100644
index 0000000000..2d93f134eb
--- /dev/null
+++ b/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
+ }
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
new file mode 100644
index 0000000000..e88651c1aa
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ )
+ },
+})
+
+export default Content
diff --git a/dolphinscheduler-ui-next/src/router/modules/datasource.ts b/dolphinscheduler-ui-next/src/router/modules/datasource.ts
index 23a26f5135..05631b9f01 100644
--- a/dolphinscheduler-ui-next/src/router/modules/datasource.ts
+++ b/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',
diff --git a/dolphinscheduler-ui-next/src/router/modules/monitor.ts b/dolphinscheduler-ui-next/src/router/modules/monitor.ts
index 94d0dfb3dc..ea06daf7d1 100644
--- a/dolphinscheduler-ui-next/src/router/modules/monitor.ts
+++ b/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',
diff --git a/dolphinscheduler-ui-next/src/router/modules/projects.ts b/dolphinscheduler-ui-next/src/router/modules/projects.ts
index 9485952747..b4fdafddef 100644
--- a/dolphinscheduler-ui-next/src/router/modules/projects.ts
+++ b/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',
diff --git a/dolphinscheduler-ui-next/src/router/modules/resources.ts b/dolphinscheduler-ui-next/src/router/modules/resources.ts
index 0e47d212cd..6ea940a746 100644
--- a/dolphinscheduler-ui-next/src/router/modules/resources.ts
+++ b/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',
diff --git a/dolphinscheduler-ui-next/src/router/modules/security.ts b/dolphinscheduler-ui-next/src/router/modules/security.ts
index 731a24ad7d..9f2873634e 100644
--- a/dolphinscheduler-ui-next/src/router/modules/security.ts
+++ b/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',
diff --git a/dolphinscheduler-ui-next/src/router/routes.ts b/dolphinscheduler-ui-next/src/router/routes.ts
index 0e6a343229..8e799a5fcc 100644
--- a/dolphinscheduler-ui-next/src/router/routes.ts
+++ b/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',
diff --git a/dolphinscheduler-ui-next/src/views/login/index.module.scss b/dolphinscheduler-ui-next/src/views/login/index.module.scss
index abd21538ab..6a7c8c0b88 100644
--- a/dolphinscheduler-ui-next/src/views/login/index.module.scss
+++ b/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;
}
}