feat: Added the configuration of routes (#7433)

dolphinscheduler-ui-next/index.html

@@ -28,4 +28,12 @@
     <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>

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

@@ -15,26 +15,35 @@
  * limitations under the License.
  */
 
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw, NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+import routes from './routes'
 
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/login',
-    redirect: { name: 'Login' },
-    component: () => import('@/layouts/content/Content'),
-    children: [
-      {
-        path: '/login',
-        name: 'Login',
-        component: () => import('@/views/login/Login'),
-      },
-    ],
-  },
-]
+// NProgress
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
 
-const index = createRouter({
+const router = createRouter({
   history: createWebHistory(),
-  routes,
+  routes
 })
 
-export default index
+/**
+ * Routing to intercept
+ */
+router.beforeEach(
+  async (
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized,
+    next: NavigationGuardNext
+  ) => {
+    NProgress.start()
+    next()
+    NProgress.done()
+  }
+)
+
+router.afterEach(() => {
+  NProgress.done()
+})
+
+export default router

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

@@ -0,0 +1,58 @@
+/*
+ * 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 type { RouteRecordRaw } from 'vue-router'
+import type { Component } from 'vue'
+import utils from '@/utils'
+
+// All TSX files under the views folder automatically generate mapping relationship
+const modules = import.meta.glob('/src/views/**/**.tsx')
+const components: { [key: string]: Component } = utils.classification(modules)
+
+/**
+ * Basic page
+ */
+const basePage: RouteRecordRaw[] = [
+  {
+    path: '/',
+    redirect: { name: 'home' },
+    component: () => import('@/layouts/content/Content'),
+    children: [
+      {
+        path: '/home',
+        name: 'home',
+        component: components['home'],
+      },
+    ],
+  },
+]
+
+/**
+ * Login page
+ */
+ const loginPage: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'login',
+    component: components['login']
+  }
+]
+
+const routes: RouteRecordRaw[] = [...basePage, ...loginPage]
+
+// 重新组织后导出
+export default routes

dolphinscheduler-ui-next/src/utils/classification.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 type { Component } from 'vue'
+
+interface modules extends Object {
+  [key: string]: any
+}
+
+const classification = (modules: modules) => {
+  const components: { [key: string]: Component } = {}
+  // All TSX files under the views folder automatically generate mapping relationship
+  Object.keys(modules).forEach((key: string) => {
+    const nameMatch: string[] | null = key.match(/^\/src\/views\/(.+)\.tsx/)
+
+    if (!nameMatch) {
+      return
+    }
+
+    // If the page is named Index, the parent folder is used as the name
+    const indexMatch: string[] | null = nameMatch[1].match(/(.*)\/Index$/i)
+
+    let name: string = indexMatch ? indexMatch[1] : nameMatch[1]
+
+    ;[name] = name.split('/').splice(-1)
+
+    components[name] = modules[key]
+  })
+  return components
+}
+
+export default classification

dolphinscheduler-ui-next/src/utils/index.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 classification from './classification'
+
+const utils = {
+  classification
+}
+
+export default utils

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

@@ -0,0 +1,24 @@
+/*
+ * 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;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+}

dolphinscheduler-ui-next/src/views/home/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'
+
+export default defineComponent({
+    name: 'home',
+    setup() {},
+    render() {
+      return <div class={styles.container}>
+        Home Test
+      </div>
+    }
+})

dolphinscheduler-ui-next/src/views/login/index.tsx

@@ -16,13 +16,13 @@
  */
 
 import { defineComponent } from 'vue'
-import styles from './login.module.scss'
+import styles from './index.module.scss'
 import { useI18n } from 'vue-i18n'
 import { NButton } from 'naive-ui'
 import { useThemeStore } from '@/store/theme/theme'
 
 const Login = defineComponent({
-  name: 'Login',
+  name: 'login',
   setup() {
     const { t, locale } = useI18n()
     const themeStore = useThemeStore()

dolphinscheduler-ui-next/tsconfig.json

@@ -12,7 +12,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "types": ["vite/client"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }