[Feature][UI Next] Add layout content, theme and i18n. (#7690)

3 years ago · 9f9ddea8dc
13 changed files with 213 additions and 125 deletions
--- a/dolphinscheduler-ui-next/index.html
+++ b/dolphinscheduler-ui-next/index.html
@ -28,12 +28,4 @@
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
-  <style>
-    html, body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-    }
-  </style>
 </html>
--- a/dolphinscheduler-ui-next/src/App.tsx
+++ b/dolphinscheduler-ui-next/src/App.tsx
@ -39,7 +39,7 @@ const App = defineComponent({
      <NConfigProvider
        theme={this.currentTheme}
        themeOverrides={themeOverrides}
-        style={{ width: '100%', height: '100vh', overflow: 'hidden' }}
+        style={{ width: '100%', height: '100vh' }}
      >
        <router-view />
      </NConfigProvider>
--- a/dolphinscheduler-ui-next/src/assets/styles/default.scss
+++ b/dolphinscheduler-ui-next/src/assets/styles/default.scss
@ -19,6 +19,16 @@
  outline: 0;
 }

+html, body {
+  width: 100%;
+  height: 100%;
+  //scrollbar-width: none;
+  //-ms-overflow-style: none;
+  //::-webkit-scrollbar {
+  //  display: none;
+  //}
+}
+
 html, body, p, dl, dd, dt {
  margin: 0;
  padding: 0;
--- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss
@ -20,11 +20,12 @@
  align-items: center;
  width: 100%;
  height: 64px;
+  border-bottom: 1px solid var(--border-color);

  .nav {
    margin-left: 12px;
  }
-  
+
  .settings {
    display: flex;
    flex: 1;
--- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
@ -20,7 +20,7 @@ import type { Router } from 'vue-router'
 import { MenuOption } from 'naive-ui'
 import { SetupContext } from 'vue'

-export function useMenuClick(ctx: SetupContext<"handleMenuClick"[]>) {
+export function useMenuClick(ctx: SetupContext<'handleMenuClick'[]>) {
  const router: Router = useRouter()

  const handleMenuClick = (key: string, item: MenuOption) => {
--- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
 import styles from './index.module.scss'
 import { NLayoutSider, NMenu } from 'naive-ui'

@ -29,21 +29,38 @@ const Sidebar = defineComponent({
    isShowSide: {
      type: Boolean as PropType<boolean>,
      default: false,
-    }
+    },
  },
  setup() {
-    return {}
+    const collapsedRef = ref(false)
+    const defaultExpandedKeys = [
+      'workflow',
+      'udf-manage',
+      'service-manage',
+      'statistical-manage',
+    ]
+
+    return { collapsedRef, defaultExpandedKeys }
  },
  render() {
-    if (this.isShowSide) {
-      return (
-        <NLayoutSider bordered nativeScrollbar={false} show-trigger='bar'>
-          <NMenu options={this.sideMenuOptions} default-expand-all />
+    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>
      )
-    } else {
-      return
-    }
+    )
  },
 })

--- a/dolphinscheduler-ui-next/src/layouts/content/index.module.scss
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.module.scss
@ -1,20 +0,0 @@
-/*
- * 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.
- */
-
-.content {
-  padding: 12px;
-}
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
@ -17,10 +17,8 @@

 import { defineComponent, ref, toRefs } from 'vue'
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui'
-import styles from './index.module.scss'
 import NavBar from './components/navbar'
 import SideBar from './components/sidebar'
-
 import { useDataList } from './use-dataList'

 const Content = defineComponent({
@ -33,16 +31,23 @@ const Content = defineComponent({
    const sideMenuOptions = ref()

    const getSideMenuOptions = (item: any) => {
-      sideMenuOptions.value = state.menuOptions.filter(menu => menu.key === item.key)[0].children || []
-      state.isShowSide = (sideMenuOptions.value.length !== 0)
+      sideMenuOptions.value =
+        state.menuOptions.filter((menu) => menu.key === item.key)[0].children ||
+        []
+      state.isShowSide = sideMenuOptions.value.length !== 0
+    }
+
+    return {
+      ...toRefs(state),
+      headerMenuOptions,
+      getSideMenuOptions,
+      sideMenuOptions,
    }
-    
-    return { ...toRefs(state), headerMenuOptions, getSideMenuOptions, sideMenuOptions }
  },
  render() {
    return (
-      <NLayout>
-        <NLayoutHeader>
+      <NLayout style='height: 100%;'>
+        <NLayoutHeader style='height: 65px;'>
          <NavBar
            onHandleMenuClick={this.getSideMenuOptions}
            headerMenuOptions={this.headerMenuOptions}
@ -50,9 +55,12 @@ const Content = defineComponent({
            profileOptions={this.profileOptions}
          />
        </NLayoutHeader>
-        <NLayout has-sider>
-          <SideBar sideMenuOptions={this.sideMenuOptions} isShowSide={this.isShowSide} />
-          <NLayoutContent class={styles.content}>
+        <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>
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
@ -17,6 +17,7 @@

 import { reactive, h } from 'vue'
 import { NIcon } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
 import {
  HomeOutlined,
  ProfileOutlined,
@ -39,168 +40,174 @@ import {
  ControlOutlined,
  SlackOutlined,
  EnvironmentOutlined,
-  KeyOutlined
+  KeyOutlined,
 } from '@vicons/antd'

 export function useDataList() {
+  const { t } = useI18n()
+
  const renderIcon = (icon: any) => {
    return () => h(NIcon, null, { default: () => h(icon) })
  }

  const menuOptions = [
    {
-      label: '首页',
+      label: t('menu.home'),
      key: 'home',
      icon: renderIcon(HomeOutlined),
    },
    {
-      label: '项目管理',
+      label: t('menu.project'),
      key: 'project',
      icon: renderIcon(ProfileOutlined),
      children: [
        {
-          label: '工作流监控',
+          label: t('menu.workflow_monitoring'),
          key: 'workflow-monitoring',
          icon: renderIcon(FundProjectionScreenOutlined),
        },
        {
-          label: '工作流关系',
+          label: t('menu.workflow_relationships'),
          key: 'workflow-relationships',
          icon: renderIcon(PartitionOutlined),
        },
        {
-          label: '工作流',
+          label: t('menu.workflow'),
          key: 'workflow',
          icon: renderIcon(SettingOutlined),
          children: [
            {
-              label: '工作流定义',
-              key: 'workflow-definition'
+              label: t('menu.workflow_definition'),
+              key: 'workflow-definition',
+            },
+            {
+              label: t('menu.workflow_instance'),
+              key: 'workflow-instance',
            },
            {
-              label: '工作流实例',
-              key: 'workflow-instance'
+              label: t('menu.task_instance'),
+              key: 'task-instance',
            },
            {
-              label: '任务实例',
-              key: 'task-instance'
-            }
-          ]
+              label: t('menu.task_definition'),
+              key: 'task-definition',
+            },
+          ],
        },
      ],
    },
    {
-      label: '资源中心',
+      label: t('menu.resources'),
      key: 'resources',
      icon: renderIcon(FolderOutlined),
      children: [
        {
-          label: '文件管理',
-          key: 'file-management',
+          label: t('menu.file_manage'),
+          key: 'file-manage',
          icon: renderIcon(FileSearchOutlined),
        },
        {
-          label: 'UDF管理',
-          key: 'UDF-management',
+          label: t('menu.udf_manage'),
+          key: 'udf-manage',
          icon: renderIcon(RobotOutlined),
          children: [
            {
-              label: '资源管理',
-              key: 'resource-management'
+              label: t('menu.resource_manage'),
+              key: 'resource-manage',
            },
            {
-              label: '函数管理',
-              key: 'function-management'
-            }
-          ]
+              label: t('menu.function_manage'),
+              key: 'function-manage',
+            },
+          ],
        },
      ],
    },
    {
-      label: '数据源中心',
+      label: t('menu.datasource'),
      key: 'datasource',
      icon: renderIcon(DatabaseOutlined),
    },
    {
-      label: '监控中心',
+      label: t('menu.monitor'),
      key: 'monitor',
      icon: renderIcon(DesktopOutlined),
      children: [
        {
-          label: '服务管理',
-          key: 'service-management',
+          label: t('menu.service_manage'),
+          key: 'service-manage',
          icon: renderIcon(AppstoreOutlined),
          children: [
            {
-              label: 'Master',
-              key: 'master'
+              label: t('menu.master'),
+              key: 'master',
            },
            {
-              label: 'Worker',
-              key: 'worker'
+              label: t('menu.worker'),
+              key: 'worker',
            },
            {
-              label: 'DB',
-              key: 'DB'
-            }
-          ]
+              label: t('menu.db'),
+              key: 'db',
+            },
+          ],
        },
        {
-          label: '统计管理',
-          key: 'statistical-management',
+          label: t('menu.statistical_manage'),
+          key: 'statistical-manage',
          icon: renderIcon(AppstoreOutlined),
          children: [
            {
-              label: 'Statistics',
-              key: 'statistics'
+              label: t('menu.statistics'),
+              key: 'statistics',
            },
          ],
        },
      ],
    },
    {
-      label: '安全中心',
+      label: t('menu.security'),
      key: 'security',
      icon: renderIcon(SafetyCertificateOutlined),
      children: [
        {
-          label: '租户管理',
-          key: 'tenant-management',
+          label: t('menu.tenant_manage'),
+          key: 'tenant-manage',
          icon: renderIcon(UsergroupAddOutlined),
        },
        {
-          label: '用户管理',
-          key: 'user-management',
+          label: t('menu.user_manage'),
+          key: 'user-manage',
          icon: renderIcon(UserAddOutlined),
        },
        {
-          label: '告警组管理',
-          key: 'alarm-group-management',
+          label: t('menu.alarm_group_manage'),
+          key: 'alarm-group-manage',
          icon: renderIcon(WarningOutlined),
        },
        {
-          label: '告警实例管理',
-          key: 'alarm-instance-management',
+          label: t('menu.alarm_instance_manage'),
+          key: 'alarm-instance-manage',
          icon: renderIcon(InfoCircleOutlined),
        },
        {
-          label: 'Worker分组管理',
-          key: 'worker-group-management',
+          label: t('menu.worker_group_manage'),
+          key: 'worker-group-manage',
          icon: renderIcon(ControlOutlined),
        },
        {
-          label: 'Yarn 队列管理',
-          key: 'yarn-queue-management',
+          label: t('menu.yarn_queue_manage'),
+          key: 'yarn-queue-manage',
          icon: renderIcon(SlackOutlined),
        },
        {
-          label: '环境管理',
-          key: 'environmental-management',
+          label: t('menu.environmental_manage'),
+          key: 'environmental-manage',
          icon: renderIcon(EnvironmentOutlined),
        },
        {
-          label: '令牌管理',
-          key: 'token-management',
+          label: t('menu.token_manage'),
+          key: 'token-manage',
          icon: renderIcon(KeyOutlined),
        },
      ],
@ -220,12 +227,12 @@ export function useDataList() {

  const profileOptions = [
    {
-      label: '用户信息',
+      label: t('profile.profile'),
      key: 'profile',
      icon: renderIcon(UserOutlined),
    },
    {
-      label: '退出登录',
+      label: t('profile.logout'),
      key: 'logout',
      icon: renderIcon(LogoutOutlined),
    },
@ -247,9 +254,9 @@ export function useDataList() {

  const state = reactive({
    isShowSide: false,
-    menuOptions: menuOptions,
-    languageOptions: languageOptions,
-    profileOptions: profileOptions
+    menuOptions,
+    languageOptions,
+    profileOptions,
  })

  return {
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@ -29,7 +29,48 @@ const theme = {
  dark: 'Dark',
 }

+const profile = {
+  profile: 'Profile',
+  logout: 'Logout',
+}
+
+const menu = {
+  home: 'Home',
+  project: 'Project',
+  resources: 'Resources',
+  datasource: 'Datasource',
+  monitor: 'Monitor',
+  security: 'Security',
+  workflow_monitoring: 'Workflow Monitoring',
+  workflow_relationships: 'Workflow Relationships',
+  workflow: 'Workflow',
+  workflow_definition: 'Workflow Definition',
+  workflow_instance: 'Workflow Instance',
+  task_instance: 'Task Instance',
+  task_definition: 'Task Definition',
+  file_manage: 'File Manage',
+  udf_manage: 'UDF Manage',
+  resource_manage: 'Resource Manage',
+  function_manage: 'Function Manage',
+  service_manage: 'Service Manage',
+  master: 'Master',
+  worker: 'Worker',
+  db: 'DB',
+  statistical_manage: 'Statistical Manage',
+  statistics: 'Statistics',
+  tenant_manage: 'Tenant Manage',
+  user_manage: 'User Manage',
+  alarm_group_manage: 'Alarm Group Manage',
+  alarm_instance_manage: 'Alarm Instance Manage',
+  worker_group_manage: 'Worker Group Manage',
+  yarn_queue_manage: 'Yarn Queue Manage',
+  environmental_manage: 'Environmental Manage',
+  token_manage: 'Token Manage',
+}
+
 export default {
  login,
  theme,
+  profile,
+  menu,
 }
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@ -29,7 +29,48 @@ const theme = {
  dark: '深色',
 }

+const profile = {
+  profile: '用户信息',
+  logout: '退出登录',
+}
+
+const menu = {
+  home: '首页',
+  project: '项目管理',
+  resources: '资源中心',
+  datasource: '数据源中心',
+  monitor: '监控中心',
+  security: '安全中心',
+  workflow_monitoring: '工作流监控',
+  workflow_relationships: '工作流关系',
+  workflow: '工作流',
+  workflow_definition: '工作流定义',
+  workflow_instance: '工作流实例',
+  task_instance: '任务实例',
+  task_definition: '任务定义',
+  file_manage: '文件管理',
+  udf_manage: 'UDF管理',
+  resource_manage: '资源管理',
+  function_manage: '函数管理',
+  service_manage: '服务管理',
+  master: 'Master',
+  worker: 'Worker',
+  db: 'DB',
+  statistical_manage: '统计管理',
+  statistics: 'Statistics',
+  tenant_manage: '租户管理',
+  user_manage: '用户管理',
+  alarm_group_manage: '告警组管理',
+  alarm_instance_manage: '告警实例管理',
+  worker_group_manage: 'Worker分组管理',
+  yarn_queue_manage: 'Yarn队列管理',
+  environmental_manage: '环境管理',
+  token_manage: '令牌管理',
+}
+
 export default {
  login,
  theme,
+  profile,
+  menu,
 }
--- a/dolphinscheduler-ui-next/src/views/home/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/home/index.module.scss
@ -14,11 +14,3 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100vh;
-}
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/index.tsx
@ -16,7 +16,6 @@
 */

 import { defineComponent } from 'vue'
-import styles from './index.module.scss'
 import Card from '@/components/card'
 import PieChart from '@/components/chart/modules/Pie'
 import GaugeChart from '@/components/chart/modules/Gauge'
@ -27,7 +26,7 @@ export default defineComponent({
  setup() {},
  render() {
    return (
-      <div class={styles.container}>
+      <div>
        <Card title='test'>{{ default: () => <PieChart /> }}</Card>
        <Card title='test'>{{ default: () => <GaugeChart /> }}</Card>
        <Card title='test'>{{ default: () => <BarChart /> }}</Card>