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; } }