Merge pull request #111 from Helltab/feature/ui/framework/vue3

Feature/UI/framework/vue3

ui-vue3/.eslintrc.cjs

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        'cypress/support/**/*.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

ui-vue3/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

ui-vue3/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

ui-vue3/README.md

@@ -0,0 +1,216 @@
+# dubbo-kube-ui
+
+## Feature
+
+`Vue3` `Vite` `TypeScript` `Ant Design Vue` `AntV|echarts` `lodash` `i18n` `colorful theme`
+
+## Introduction
+This project is the front-end of dubbo-kube.
+
+1. home
+2. services
+3. traffic
+4. test tools
+5. metrics
+6. kubernetes
+
+## Startup
+
+```shell
+# add vite vue project
+# https://vuejs.org/guide/scaling-up/tooling.html
+# Vue CLI is the official webpack-based toolchain for Vue. 
+# It is now in maintenance mode and we recommend starting new projects with Vite unless you rely on specific webpack-only features. 
+# Vite will provide superior developer experience in most cases.
+
+# note your env version
+# node v18.0.0
+# yarn 1.22.21
+
+npm create vue@latest
+
+yarn
+
+yarn format
+
+# run it
+yarn dev
+
+
+# main com
+yarn add [email protected]
+
+
+```
+
+## Develop
+1. todo
+> if a function is not complete but show the entry in your page, 
+> please use notification.todo to mark it
+```shell
+/**
+ * this function is showing some tips about our Q&A
+ * TODO
+ */
+function globalQuestion() {
+  devTool.todo("show Q&A tips")
+}
+```
+2. global css var 
+   ```js
+   // if you want use the global css var, such as primary color
+   // create a reactive reference to a var by 'ref'
+   export const PRIMARY_COLOR = ref('#17b392')
+
+   // In js
+   import {PRIMARY_COLOR} from '@/base/constants'
+
+   // In CSS, use __null for explicit reference to prevent being cleared by code formatting.
+   let __null = PRIMARY_COLOR
+
+   ```
+
+3. provide and inject
+
+   > must define in `ui-vue3/src/base/enums/ProvideInject.ts`
+
+4. icon: https://icones.js.org/
+
+   ```html
+   <Icon icon="svg-spinners:pulse-ring" />
+     
+   ```
+
+5. api
+
+   > Agreement: if your api's path starts with mock, you will get a mock result
+
+   1. Declear api
+
+      ```ts
+      
+      import request from '@/base/http/request'
+      
+      export const getClusterInfo = (params: any):Promise<any> => {
+          return request({
+              url: '/metrics/cluster',
+              method: 'get',
+              params
+          })
+      }
+      
+      ```
+
+      
+
+   2. Declear mock api
+
+      ```ts
+      // define a mock api
+      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)'),
+              versions: ["dubbo-golang-3.0.4"],
+              protocols: ["tri"],
+              rules: [],
+              configCenter: "127.0.0.1:2181",
+              registry: "127.0.0.1:2181",
+              metadataCenter: "127.0.0.1:2181",
+              grafana: "127.0.0.1:3000",
+              prometheus: "127.0.0.1:9090"
+          }
+      })
+      
+      // import in main.ts
+      import './api/mock/mockCluster.js'
+      
+      ```
+
+   3. invoke api
+
+      ```ts
+      
+      onMounted(async () => {
+        let {data} = await getClusterInfo({})
+      })
+      ```
+
+   4. decide where the request is to go : request.ts
+
+      ```ts
+      // request.ts
+      
+      const service: AxiosInstance = axios.create({
+          //  change this to decide where to go
+          baseURL: '/mock',
+          timeout: 30 * 1000
+      })
+      ```
+
+## i18n
+
+1. In html template
+
+   ```html
+   <div>
+     {{$t(stringVar)}}
+   </div>
+   ```
+
+2. In ts 
+
+   > if you want to make your var to i18n, make sure your var is a computed
+
+   ```ts
+   let label = 'foo'
+   let labelWithI18n = computed(() => globalProperties.$t(label))
+   ```
+
+   
+
+## Router
+
+1. Define a router
+
+   ```ts
+   // router/defaultRoutes
+   {
+     path: '/home',
+     name: 'homePage',
+     component: () => import('../views/home/index.vue'),
+     meta: {
+       icon: 'carbon:web-services-cluster'
+     }
+   }
+   ```
+
+   
+
+2. Config route meta
+
+   ```ts
+   // you can config your route with this struct
+   export interface RouterMeta extends RouteMeta {
+     icon?: string
+     hidden?: boolean
+     skip?: boolean
+   
+   
+   // icon:  Show as your menu prefix
+   // hidden:  Do not show as a menu include its children routes
+   // skip: Do not show this route as a menu, but display its child routes.
+   
+   ```
+
+   
+
+   
+
+   

ui-vue3/cypress.config.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 { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  }
+})

ui-vue3/cypress/e2e/example.cy.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+describe('My First Test', () => {
+  it('visits the app root url', () => {
+    cy.visit('/')
+    cy.contains('h1', 'You did it!')
+  })
+})

ui-vue3/cypress/e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["./**/*", "../support/**/*"],
+  "compilerOptions": {
+    "isolatedModules": false,
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  }
+}

ui-vue3/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

ui-vue3/cypress/support/commands.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 {}