Merge pull request apache#146 from Helltab/feature/ui/framework/vue3

Feature/UI/framework/vue3: router feature, fixes apache#144, apache#143, apache#142

ui-vue3/README.md

@@ -209,6 +209,42 @@ function globalQuestion() {
    
    ```
 
+3. Config a tab route
+
+   > Note:  /tab is a middle layer for left-menu-item: must use LayoutTab as component; meta.tab must be true
+
+   ```ts
+   {
+       path: '/tab',
+       name: 'tabDemo',
+       component: LayoutTab,
+       redirect: 'index',
+       meta: {
+           tab_parent: true
+       },
+       children: [
+           {
+               path: '/index',
+               name: 'applications_index',
+               component: () => import('../views/resources/applications/index.vue'),
+               meta: {
+                   // hidden: true,
+               }
+           },
+           {
+               path: '/tab1',
+               name: 'tab1',
+               component: () => import('../views/common/tab_demo/tab1.vue'),
+               meta: {
+                   icon: 'simple-icons:podman',
+                   tab: true,
+               }
+           },
+   
+       ]
+   },
+   ```
+
    
 
    

ui-vue3/package.json

@@ -5,11 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "check:i18n": "node --loader ts-node/esm src/base/i18n/sortI18n.ts",
+    "build": "prettier --write src/ && vite build",
     "preview": "vite preview",
     "test:unit": "vitest",
-    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
-    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -24,11 +23,15 @@
     "@iconify/vue": "^4.1.1",
     "@types/lodash": "^4.14.202",
     "@types/lodash-es": "^4.17.12",
+    "@types/nprogress": "^0.2.3",
     "ant-design-vue": "4.x",
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.6.2",
     "vue": "^3.3.10",
     "vue-i18n": "^9.8.0",
     "vue-router": "^4.2.5",
@@ -39,7 +42,7 @@
     "@tsconfig/node18": "^18.2.2",
     "@types/jsdom": "^21.1.6",
     "@types/mockjs": "^1.0.10",
-    "@types/node": "^18.19.2",
+    "@types/node": "^20.10.6",
     "@vitejs/plugin-vue": "^4.5.1",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-prettier": "^8.0.0",

ui-vue3/src/api/mock/mockCluster.ts

@@ -17,14 +17,13 @@
 
 import Mock from 'mockjs'
 Mock.mock('/mock/metrics/cluster', 'get', {
-    code: 200,
-    message: '成功',
-    data: {
-        all: Mock.mock('@integer(100, 500)'),
-        application: Mock.mock('@integer(80, 200)'),
-        consumers: Mock.mock('@integer(80, 200)'),
-        providers: Mock.mock('@integer(80, 200)'),
-        services: Mock.mock('@integer(80, 200)'),
-
-    }
+  code: 200,
+  message: '成功',
+  data: {
+    all: Mock.mock('@integer(100, 500)'),
+    application: Mock.mock('@integer(80, 200)'),
+    consumers: Mock.mock('@integer(80, 200)'),
+    providers: Mock.mock('@integer(80, 200)'),
+    services: Mock.mock('@integer(80, 200)')
+  }
 })

ui-vue3/src/api/mock/mockServer.ts

@@ -17,19 +17,18 @@
 
 import Mock from 'mockjs'
 
-
 Mock.mock('/mock/metrics/metadata', 'get', {
   code: 200,
   message: '成功',
   data: {
-    versions: ["dubbo-golang-3.0.4"],
-    protocols: ["tri"],
-    rules:["DemoService:1.0.0:test.configurators","DemoService4:bb:aa.configurators"],
-    configCenter: "127.0.0.1:2181",
-    registry: "127.0.0.1:2181",
-    metadataCenter: "127.0.0.1:2181",
+    versions: ['dubbo-golang-3.0.4'],
+    protocols: ['tri'],
+    rules: ['DemoService:1.0.0:test.configurators', 'DemoService4:bb:aa.configurators'],
+    configCenter: '127.0.0.1:2181',
+    registry: '127.0.0.1:2181',
+    metadataCenter: '127.0.0.1:2181',
     // make sure the X-Frame-Options is forbidden
     grafana: `http://${window.location.host}/admin/home`,
-    prometheus: "127.0.0.1:9090"
+    prometheus: '127.0.0.1:9090'
   }
 })

ui-vue3/src/api/service/clusterInfo.ts

@@ -17,10 +17,10 @@
 
 import request from '@/base/http/request'
 
-export const getClusterInfo = (params: any):Promise<any> => {
-    return request({
-        url: '/metrics/cluster',
-        method: 'get',
-        params
-    })
+export const getClusterInfo = (params: any): Promise<any> => {
+  return request({
+    url: '/metrics/cluster',
+    method: 'get',
+    params
+  })
 }

ui-vue3/src/api/service/serverInfo.ts

@@ -15,13 +15,12 @@
  * limitations under the License.
  */
 
+import request from '@/base/http/request'
 
-import request from "@/base/http/request";
-
-export const getMetricsMetadata = (params: any):Promise<any> => {
-    return request({
-        url: '/metrics/metadata',
-        method: 'get',
-        params
-    })
+export const getMetricsMetadata = (params: any): Promise<any> => {
+  return request({
+    url: '/metrics/metadata',
+    method: 'get',
+    params
+  })
 }

ui-vue3/src/base/constants.ts

@@ -15,15 +15,13 @@
  * limitations under the License.
  */
 
-import {ref} from 'vue'
+import { ref } from 'vue'
 
 export const PRIMARY_COLOR_DEFAULT = '#17b392'
 
-
 export const LOCAL_STORAGE_LOCALE = 'LOCAL_STORAGE_LOCALE'
 export const LOCAL_STORAGE_THEME = 'LOCAL_STORAGE_THEME'
 
+let item = localStorage.getItem(LOCAL_STORAGE_THEME)
 
-let item = localStorage.getItem(LOCAL_STORAGE_THEME);
-
-export const PRIMARY_COLOR = ref(item || PRIMARY_COLOR_DEFAULT)
+export const PRIMARY_COLOR = ref(item || PRIMARY_COLOR_DEFAULT)

ui-vue3/src/base/enums/Storage.ts

@@ -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.
+ */
+
+const KEY_PREFIX = '__DUBBO_KUBE_'
+
+export const STORAGE_KEY = {}

ui-vue3/src/base/http/request.ts

@@ -16,46 +16,51 @@
  */
 
 import type {
-    AxiosInstance,
-    AxiosInterceptorManager,
-    AxiosRequestHeaders,
-    AxiosResponse,
-    InternalAxiosRequestConfig
+  AxiosInstance,
+  AxiosInterceptorManager,
+  AxiosRequestHeaders,
+  AxiosResponse,
+  InternalAxiosRequestConfig
 } from 'axios'
 import axios from 'axios'
-import {message} from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import NProgress from 'nprogress'
 
 const service: AxiosInstance = axios.create({
-    //  change this to decide where to go
-    baseURL: '/mock',
-    timeout: 30 * 1000
+  //  change this to decide where to go
+  baseURL: '/mock',
+  timeout: 30 * 1000
 })
 const request: AxiosInterceptorManager<InternalAxiosRequestConfig> = service.interceptors.request
 const response: AxiosInterceptorManager<AxiosResponse> = service.interceptors.response
 
 request.use(
-    (config) => {
-        config.data = JSON.stringify(config.data) //数据转化,也可以使用qs转换
-        config.headers = <AxiosRequestHeaders>{
-            'Content-Type': 'application/json' //配置请求头
-        }
-        return config
-    },
-    (error) => {
-        Promise.reject(error)
+  (config) => {
+    config.data = JSON.stringify(config.data) //数据转化,也可以使用qs转换
+    config.headers = <AxiosRequestHeaders>{
+      'Content-Type': 'application/json' //配置请求头
     }
+    NProgress.start()
+    return config
+  },
+  (error) => {
+    Promise.reject(error)
+  }
 )
 
 response.use(
-    (response) => {
-        if (response.status === 200) {
-            return Promise.resolve(response.data)
-        }
-        return Promise.reject(response)
-    },
-    (error) => {
-        message.error(error.message)
-        return Promise.resolve(error.response)
+  (response) => {
+    NProgress.done()
+
+    if (response.status === 200) {
+      return Promise.resolve(response.data)
     }
+    return Promise.reject(response)
+  },
+  (error) => {
+    NProgress.done()
+    message.error(error.message)
+    return Promise.resolve(error.response)
+  }
 )
 export default service

ui-vue3/src/base/i18n/en.ts

@@ -14,7 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export default {
+
+import type { I18nType } from './type.ts'
+
+const words: I18nType = {
   service: 'Service',
   serviceSearch: 'Search Service',
   serviceGovernance: 'Routing Rule',
@@ -36,6 +39,7 @@ export default {
   serviceInfo: 'Service Info',
   providers: 'Providers',
   consumers: 'Consumers',
+  common: 'Common',
   version: 'Version',
   app: 'Application',
   services: 'Services',
@@ -255,5 +259,10 @@ export default {
   trafficAccesslog: 'Accesslog',
   trafficHost: 'Host',
   homePage: 'Cluster Overview',
-  serviceManagement: 'Dev & Test'
+  serviceManagement: 'Dev & Test',
+  resources: 'Resources',
+  applications: 'Applications',
+  instances: 'Instances'
 }
+
+export default words

ui-vue3/src/base/i18n/sortI18n.ts

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+// resort words in en.ts and zh.ts;
+// check words exist in en.ts and zh.ts;
+
+import EN_MAP from './en'
+import ZH_MAP from './zh'
+
+let sortArr: { label: string; value: any }[] = []
+let checkArr: string[] = []
+
+function mapToArr() {
+  for (let enKey in EN_MAP) {
+    sortArr.push({
+      label: enKey,
+      value: EN_MAP[enKey]
+    })
+    let zh = ZH_MAP[enKey]
+    if (!zh) {
+      checkArr.push(enKey)
+    }
+  }
+}
+
+mapToArr()
+console.log(sortArr.sort((a, b) => (a.label > b.label ? 1 : -1)))

ui-vue3/src/base/i18n/type.ts

@@ -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.
+ */
+
+export type I18nType = {
+  [key: string]: string | I18nType
+}