├── public
    ├── CNAME
    └── favicon.ico
├── commitlint.config.js
├── src
    ├── assets
    │   ├── logo.png
    │   └── img
    │   │   └── login-bg.jpg
    ├── store
    │   ├── modules
    │   │   ├── NumFactory
    │   │   │   ├── module.ts
    │   │   │   └── index.ts
    │   │   └── UserFactory
    │   │   │   ├── module.ts
    │   │   │   └── index.ts
    │   ├── module.ts
    │   └── index.ts
    ├── shims-vue.d.ts
    ├── views
    │   ├── stores
    │   │   └── PVPVC.vue
    │   ├── resource
    │   │   ├── Services.vue
    │   │   ├── Deployments.vue
    │   │   ├── StatefulSets.vue
    │   │   ├── PodInfo.vue
    │   │   └── Pod.vue
    │   ├── Stores.vue
    │   ├── Images.vue
    │   ├── Templeton.vue
    │   ├── rbac
    │   │   └── Namespaces.vue
    │   ├── Vuex.vue
    │   ├── Axios.vue
    │   ├── Xterm.vue
    │   ├── Resource.vue
    │   ├── Login.vue
    │   └── Home.vue
    ├── utils
    │   ├── import-ui-framework.ts
    │   └── axios.ts
    ├── main.ts
    ├── App.vue
    ├── style
    │   └── basic.styl
    ├── router
    │   └── index.ts
    └── components
    │   ├── Main.vue
    │   └── Header.vue
├── images
    └── README
    │   ├── image-20210608204425146.png
    │   ├── image-20210608204720670.png
    │   └── image-20210608204744563.png
├── .prettierrc
├── tests
    ├── Header.spec.ts
    └── Test.spec.ts
├── index.html
├── jest.config.js
├── .editorconfig
├── tsconfig.json
├── vite.config.ts
├── .gitignore
├── .eslintrc.js
├── README.md
├── .cz-config.js
└── package.json


/public/CNAME:
--------------------------------------------------------------------------------
1 | www.haozheyu.top
2 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = { extends: ['@commitlint/config-conventional'] }
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/haozheyu/k8s_dashboard/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/haozheyu/k8s_dashboard/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/img/login-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/haozheyu/k8s_dashboard/HEAD/src/assets/img/login-bg.jpg


--------------------------------------------------------------------------------
/src/store/modules/NumFactory/module.ts:
--------------------------------------------------------------------------------
1 | export default interface NumFactoryStateTypes {
2 |   name: string
3 |   count: number
4 | }
5 | 


--------------------------------------------------------------------------------
/images/README/image-20210608204425146.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/haozheyu/k8s_dashboard/HEAD/images/README/image-20210608204425146.png


--------------------------------------------------------------------------------
/images/README/image-20210608204720670.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/haozheyu/k8s_dashboard/HEAD/images/README/image-20210608204720670.png


--------------------------------------------------------------------------------
/images/README/image-20210608204744563.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/haozheyu/k8s_dashboard/HEAD/images/README/image-20210608204744563.png


--------------------------------------------------------------------------------
/src/store/modules/UserFactory/module.ts:
--------------------------------------------------------------------------------
1 | export default interface UserFactoryStateTypes {
2 |   username :string
3 |   IsLogin : boolean
4 | }
5 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { DefineComponent } from 'vue'
3 |   const component: DefineComponent<{}, {}, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/src/views/stores/PVPVC.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "PVPVC"
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | 
13 | </style>
14 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "useTabs": false,
 3 |   "tabWidth": 2,
 4 |   "printWidth": 88,
 5 |   "singleQuote": true,
 6 |   "trailingComma": "none",
 7 |   "bracketSpacing": true,
 8 |   "semi": false
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/utils/import-ui-framework.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue'
2 | import ElementPlus from 'element-plus'
3 | import 'element-plus/lib/theme-chalk/index.css'
4 | 
5 | export default function importUiFramework(app: App) {
6 |   app.use(ElementPlus)
7 |   return app
8 | }
9 | 


--------------------------------------------------------------------------------
/src/store/module.ts:
--------------------------------------------------------------------------------
 1 | import NumFactoryStateTypes from './modules/NumFactory/module'
 2 | 
 3 | export default interface RootStateTypes {
 4 |   text: string
 5 | }
 6 | 
 7 | export interface AllStateTypes extends RootStateTypes {
 8 |   numFactoryModule: NumFactoryStateTypes
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/views/resource/Services.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | 
 6 | <script lang="ts">
 7 | 
 8 | import { defineComponent, getCurrentInstance, ref, onMounted } from 'vue'
 9 | export default defineComponent({
10 |   name: "Services",
11 | 
12 | })
13 | 
14 | </script>
15 | 
16 | <style scoped>
17 | 
18 | </style>


--------------------------------------------------------------------------------
/src/views/resource/Deployments.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | 
 6 | <script lang="ts">
 7 | 
 8 | import { defineComponent, getCurrentInstance, ref, onMounted } from 'vue'
 9 | export default defineComponent({
10 |   name: "Deployments",
11 | 
12 | })
13 | 
14 | </script>
15 | 
16 | <style scoped>
17 | 
18 | </style>


--------------------------------------------------------------------------------
/src/views/resource/StatefulSets.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 | </template>
 4 | 
 5 | 
 6 | <script lang="ts">
 7 | 
 8 | import { defineComponent, getCurrentInstance, ref, onMounted } from 'vue'
 9 | export default defineComponent({
10 |   name: "StatefulSets",
11 | 
12 | })
13 | 
14 | </script>
15 | 
16 | <style scoped>
17 | 
18 | </style>


--------------------------------------------------------------------------------
/tests/Header.spec.ts:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | // @ts-ignore
 3 | import Header from '../src/components/Header.vue'
 4 | 
 5 | describe('Header.vue', () => {
 6 |   it('renders', () => {
 7 |     const wrapper = mount(Header)
 8 |     expect(wrapper.html()).toContain('Vite2.x + Vue3.x + TypeScript Starter')
 9 |   })
10 | })
11 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>k8s_vite</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/tests/Test.spec.ts:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import Test from '../src/views/Test.vue'
 3 | 
 4 | test('Test.vue', async () => {
 5 |   const wrapper = mount(Test)
 6 |   expect(wrapper.html()).toContain('Unit Test Page')
 7 |   expect(wrapper.html()).toContain('count is: 0')
 8 |   await wrapper.find('button').trigger('click')
 9 |   expect(wrapper.html()).toContain('count is: 1')
10 | })
11 | 


--------------------------------------------------------------------------------
/src/views/Stores.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home-container page-container">
 3 |     <div class="page-title">存储管理</div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { defineComponent } from 'vue'
 9 | 
10 | export default defineComponent({
11 |   name: 'Stores'
12 | })
13 | </script>
14 | 
15 | <style scoped lang="stylus">
16 | .home-container {
17 |   .vue-element-plus-logo {
18 |     width 50%
19 |   }
20 | }
21 | </style>


--------------------------------------------------------------------------------
/src/views/Images.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home-container page-container">
 3 |     <div class="page-title">镜像管理</div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { defineComponent } from 'vue'
 9 | 
10 | export default defineComponent({
11 |   name: 'Images'
12 | })
13 | </script>
14 | 
15 | <style scoped lang="stylus">
16 | .home-container {
17 |   .vue-element-plus-logo {
18 |     width 50%
19 |   }
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/views/Templeton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home-container page-container">
 3 |     <div class="page-title">配置管理</div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { defineComponent } from 'vue'
 9 | 
10 | export default defineComponent({
11 |   name: 'Templeton'
12 | })
13 | </script>
14 | 
15 | <style scoped lang="stylus">
16 | .home-container {
17 |   .vue-element-plus-logo {
18 |     width 50%
19 |   }
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/views/rbac/Namespaces.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home-container page-container">
 3 |     <div class="page-title">租户管理</div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { defineComponent } from 'vue'
 9 | 
10 | export default defineComponent({
11 |   name: 'Namespace'
12 | })
13 | </script>
14 | 
15 | <style scoped lang="stylus">
16 | .home-container {
17 |   .vue-element-plus-logo {
18 |     width 50%
19 |   }
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: ['vue', 'js', 'ts'],
 3 |   preset: 'ts-jest',
 4 |   testEnvironment: 'jsdom',
 5 |   transform: {
 6 |     '^.+\\.vue$': 'vue-jest',
 7 |     '^.+\\.ts$': 'ts-jest'
 8 |   },
 9 |   // 匹配 __tests__ 目录下的 .js/.ts 文件 或 xx.test.js/ts xx.spec.js/ts
10 |   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$',
11 |   moduleNameMapper: {
12 |     '^@/(.*)$': '<rootDir>/src/$1' // 配置 jest 下 @ -> src
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import importUiFramework from '@/utils/import-ui-framework'
 3 | import router from '@/router/index'
 4 | import { key, store } from '@/store'
 5 | import App from './App.vue'
 6 | import '@/style/basic.styl'
 7 | // eslint-disable-next-line import/order
 8 | import * as echarts from 'echarts'
 9 | 
10 | const app = createApp(App)
11 | app.config.globalProperties.echarts = echarts
12 | importUiFramework(app).use(router).use(store, key).mount('#app')
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | 
 3 | # 表示最顶层的 EditorConfig 配置文件
 4 | root = true
 5 | 
 6 | [*] # 表示所有文件适用
 7 | charset = utf-8 # 设置文件字符集为 utf-8
 8 | indent_style = space # 缩进风格（tab | space）
 9 | indent_size = 2 # 缩进大小
10 | end_of_line = lf # 控制换行类型(lf | cr | crlf)
11 | trim_trailing_whitespace = true # 去除行首的任意空白字符
12 | insert_final_newline = true # 始终在文件末尾插入一个新行
13 | 
14 | [*.md] # 表示仅 md 文件适用以下规则
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "moduleResolution": "node",
 6 |     "strict": true,
 7 |     "jsx": "preserve",
 8 |     "sourceMap": true,
 9 |     "resolveJsonModule": true,
10 |     "esModuleInterop": true,
11 |     "lib": ["esnext", "dom"],
12 |     "types": ["vite/client", "jest"],
13 |     "baseUrl": "src",
14 |     "paths": {
15 |       "@/*": ["./*"]
16 |     }
17 |   },
18 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
19 | }
20 | 


--------------------------------------------------------------------------------
/src/store/modules/NumFactory/index.ts:
--------------------------------------------------------------------------------
 1 | import { Module } from 'vuex'
 2 | import NumFactoryStateTypes from './module'
 3 | import RootStateTypes from '../../module'
 4 | 
 5 | // Create a new store Modules.
 6 | const numFactoryModule: Module<NumFactoryStateTypes, RootStateTypes> = {
 7 |   namespaced: true,
 8 |   state: {
 9 |     name: 'numFactory-module',
10 |     count: 1
11 |   },
12 |   mutations: {
13 |     DOUBLE_COUNT(state: NumFactoryStateTypes) {
14 |       state.count *= 2
15 |     }
16 |   },
17 |   actions: {}
18 | }
19 | 
20 | export default numFactoryModule
21 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | // 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
 4 | import { resolve } from 'path'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [vue()],
 9 |   resolve: {
10 |     alias: {
11 |       '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
12 |     }
13 |   },
14 |   base: './', // 设置打包路径
15 |   server: {
16 |     port: 4500, // 设置服务启动端口号
17 |     open: true, // 设置服务启动时是否自动打开浏览器
18 |     cors: true // 允许跨域
19 |   }
20 | })
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Main />
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import { defineComponent } from 'vue'
 7 | import Main from '@/components/Main.vue'
 8 | 
 9 | export default defineComponent({
10 |   name: 'App',
11 |   components: {
12 |     Main
13 |   }
14 | })
15 | </script>
16 | 
17 | <style lang="stylus">
18 | #app {
19 |   font-family: Avenir, Helvetica, Arial, sans-serif;
20 |   -webkit-font-smoothing: antialiased;
21 |   -moz-osx-font-smoothing: grayscale;
22 |   box-sizing: border-box;
23 |   position: relative;
24 |   width: 100%;
25 |   height: 100%;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/style/basic.styl:
--------------------------------------------------------------------------------
 1 | $font-color = #2c3e50
 2 | $background-color = #fff
 3 | $second-background-color = #f1f1f1
 4 | 
 5 | html, body {
 6 |   position relative
 7 |   padding 0
 8 |   margin 0
 9 |   width 100%
10 |   height 100%
11 |   color $font-color
12 | }
13 | 
14 | ul,
15 | li,
16 | ol {
17 |   padding 0
18 |   margin 0
19 |   list-style none
20 | }
21 | 
22 | .flex-center {
23 |   display flex
24 |   justify-content center
25 |   align-items center
26 | }
27 | 
28 | .page-container {
29 |   width 100%
30 |   height 100%
31 |   box-sizing border-box
32 |   text-align center
33 | }
34 | 
35 | .page-title {
36 |   font-size 28px
37 |   font-weight bold
38 |   padding 20px
39 | }
40 | 


--------------------------------------------------------------------------------
/src/store/modules/UserFactory/index.ts:
--------------------------------------------------------------------------------
 1 | import { Module } from 'vuex'
 2 | import UserFactoryStateTypes from './module'
 3 | import RootStateTypes from '../../module'
 4 | 
 5 | // Create a new store Modules.
 6 | const UserFactoryModule: Module<UserFactoryStateTypes, RootStateTypes> = {
 7 |   namespaced: true,
 8 |   state: {
 9 |     username: "",
10 |     IsLogin: false,
11 |   },
12 |   mutations: {
13 |     IsLogin(state: UserFactoryStateTypes, name:string) {
14 |       state.username = name
15 |       state.IsLogin = true
16 |     },
17 |     LogOut(state: UserFactoryStateTypes){
18 |       state.username = ""
19 |       state.IsLogin = false
20 |     }
21 |   },
22 |   actions: {}
23 | }
24 | 
25 | export default UserFactoryModule
26 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { InjectionKey } from 'vue'
 2 | import { createStore, Store, useStore as baseUseStore } from 'vuex'
 3 | import RootStateTypes, { AllStateTypes } from './module'
 4 | 
 5 | import numFactoryModule from './modules/NumFactory'
 6 | import UserFactoryModule from "@/store/modules/UserFactory";
 7 | 
 8 | export const store = createStore<RootStateTypes>({
 9 |   state: {
10 |     text: 'This is Vuex Root.state.text'
11 |   },
12 |   getters: {},
13 |   mutations: {},
14 |   actions: {},
15 |   modules: {
16 |     numFactoryModule,
17 |     UserFactoryModule,
18 |   }
19 | })
20 | 
21 | export const key: InjectionKey<Store<RootStateTypes>> = Symbol('vue-store')
22 | 
23 | export function useStore<T = AllStateTypes>() {
24 |   return baseUseStore<T>(key)
25 | }
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /dist-ssr
 6 | /tmp
 7 | /out-tsc
 8 | 
 9 | # dependencies
10 | /node_modules
11 | *.local
12 | yarn.lock
13 | package-lock.json
14 | 
15 | # IDEs and editors
16 | /.idea
17 | .project
18 | .classpath
19 | .c9/
20 | *.launch
21 | .settings/
22 | *.sublime-workspace
23 | 
24 | # IDE - VSCode
25 | .vscode/*
26 | # !.vscode/settings.json
27 | # !.vscode/tasks.json
28 | # !.vscode/launch.json
29 | # !.vscode/extensions.json
30 | 
31 | # misc
32 | /.sass-cache
33 | /connect.lock
34 | /coverage
35 | /libpeerconnection.log
36 | npm-debug.log
37 | testem.log
38 | /typings
39 | 
40 | # e2e
41 | /e2e/src/*.js
42 | /e2e/src/*.map
43 | /cypress/screenshots
44 | 
45 | # System Files
46 | .DS_Store
47 | Thumbs.db
48 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es2021: true,
 5 |     node: true
 6 |   },
 7 |   extends: [
 8 |     'plugin:vue/essential',
 9 |     'airbnb-base',
10 |     'plugin:prettier/recommended',
11 |     'plugin:jest/recommended'
12 |   ],
13 |   parserOptions: {
14 |     ecmaVersion: 12,
15 |     parser: '@typescript-eslint/parser',
16 |     sourceType: 'module'
17 |   },
18 |   plugins: ['vue', '@typescript-eslint'],
19 |   rules: {
20 |     'import/no-unresolved': 'off',
21 |     'import/extensions': 'off',
22 |     'import/no-absolute-path': 'off',
23 |     'import/no-extraneous-dependencies': 'off',
24 |     'vue/no-multiple-template-root': 'off',
25 |     'no-param-reassign': [
26 |       'error',
27 |       {
28 |         props: true,
29 |         ignorePropertyModificationsFor: ['state', 'config']
30 |       }
31 |     ]
32 |   },
33 |   settings: {}
34 | }
35 | 


--------------------------------------------------------------------------------
/src/views/Vuex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vuex-container page-container">
 3 |     <div class="page-title">Vuex Test Page</div>
 4 |     <p>store Root is: {{ text }}</p>
 5 |     <p>store doubleCount is: {{ count }}</p>
 6 |     <el-button type="primary" @click="double">double</el-button>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import { defineComponent, reactive, computed, toRefs } from 'vue'
12 | import { useStore } from '../store'
13 | 
14 | export default defineComponent({
15 |   name: 'Vuex',
16 | 
17 |   setup() {
18 |     const store = useStore()
19 |     const reactiveData = reactive({
20 |       text: computed(() => store.state.text),
21 |       count: computed(() => store.state.numFactoryModule.count)
22 |     })
23 | 
24 |     const double = () => {
25 |       store.commit('numFactoryModule/DOUBLE_COUNT')
26 |     }
27 | 
28 |     return {
29 |       ...toRefs(reactiveData),
30 |       double
31 |     }
32 |   }
33 | })
34 | </script>
35 | 
36 | <style scoped lang="stylus"></style>
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vite2.x + Vue3.x + Xtermjs4
 2 | 
 3 | [在线体验地址](http://114.67.110.204:4500)
 4 | ## 相关信息
 5 | - 编程语言：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
 6 | - 构建工具：[Vite 2.x](https://cn.vitejs.dev/)
 7 | - 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
 8 | - 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
 9 | - 状态管理：[Vuex 4.x](https://next.vuex.vuejs.org/)
10 | - UI 框架：[Element Plus](https://element-plus.org/#/zh-CN)
11 | - CSS 预编译：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
12 | - HTTP 工具：[Axios](https://axios-http.com/)
13 | - 后端地址: [kube_web](https://github.com/haozheyu/kube_web)
14 | 
15 | ### 安装依赖
16 | 
17 | ```sh
18 | npm install
19 | # or
20 | yarn add
21 | ```
22 | 
23 | ### 启动项目
24 | 
25 | ```sh
26 | npm run dev
27 | ```
28 | 
29 | ### 项目打包
30 | 
31 | ```sh
32 | npm run build
33 | ```
34 | 
35 | ### 功能完成
36 | #### 2021/6/8
37 | pod 的ssh登录
38 | 
39 | ![image-20210608204425146](images/README/image-20210608204425146.png)
40 | 
41 | ![image-20210608204720670](images/README/image-20210608204720670.png)
42 | 
43 | ![image-20210608204744563](images/README/image-20210608204744563.png)
44 | 
45 | ![image-20210608204744563](images/README/image-20210608204744563.png)
46 | 


--------------------------------------------------------------------------------
/src/utils/axios.ts:
--------------------------------------------------------------------------------
 1 | import Axios, { AxiosInstance } from 'axios'
 2 | import { ElMessage } from 'element-plus'
 3 | 
 4 | const baseURL = 'http://114.67.110.204:9997'
 5 | 
 6 | const axios: AxiosInstance = Axios.create({
 7 |   baseURL,
 8 |   timeout: 20000 // 请求超时 20s
 9 | })
10 | 
11 | const addHeader = "Bearer "+localStorage.getItem('token')
12 | 
13 | // 前置拦截器（发起请求之前的拦截）
14 | axios.interceptors.request.use(
15 |   (config) => {
16 |     /**
17 |      * 根据你的项目实际情况来对 config 做处理
18 |      */
19 |     config.headers['Authorization'] = addHeader || ''
20 |     config.headers.post['Content-Type'] = 'application/json'
21 |     return config
22 |   },
23 |   (error) => {
24 |     return Promise.reject(error)
25 |   }
26 | )
27 | 
28 | // 后置拦截器（获取到响应时的拦截）
29 | axios.interceptors.response.use(
30 |   (response) => {
31 |     /**
32 |      * 根据你的项目实际情况来对 response 和 error 做处理
33 |      * 这里对 response 和 error 不做任何处理，直接返回
34 |      */
35 |     return response.data
36 |   },
37 |   (error) => {
38 |     if (error.response && error.response.data) {
39 |       const code = error.response.status
40 |       const msg = error.response.data.message
41 |       ElMessage.error(`Code: ${code}, Message: ${msg}`)
42 |       console.error(`[Axios Error]`, error.response)
43 |     } else {
44 |       ElMessage.error(`${error}`)
45 |     }
46 |     return Promise.reject(error)
47 |   }
48 | )
49 | 
50 | export default axios
51 | 


--------------------------------------------------------------------------------
/src/views/Axios.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="axios-container page-container">
 3 |     <div class="page-title">Axios Test Page</div>
 4 |     <div class="user-info-container">
 5 |       <el-card class="box-card">
 6 |         <template #header>
 7 |           <div class="card-header">
 8 |             <span>XPoet</span>
 9 |             <el-button class="button" type="text" @click="getUserInfo"
10 |               >点击获取XPoet信息
11 |             </el-button>
12 |           </div>
13 |         </template>
14 |         <div class="info-list-box" v-loading="loading">
15 |           <div class="text item">{{ userInfo }}</div>
16 |         </div>
17 |       </el-card>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script lang="ts">
23 | import { defineComponent, ref, Ref } from 'vue'
24 | import axios from '../utils/axios'
25 | 
26 | export default defineComponent({
27 |   name: 'Axios',
28 |   setup() {
29 |     const userInfo: Ref = ref(null)
30 |     const loading = ref(false)
31 | 
32 |     const getUserInfo = () => {
33 |       loading.value = true
34 |       axios
35 |         .get('/resource/namespace_list')
36 |         .then((response) => {
37 |           console.log('response: ', response.data)
38 |           userInfo.value = response.data
39 |           loading.value = true
40 |         })
41 |         .catch((error) => {
42 |           loading.value = false
43 |           console.error(error)
44 |         })
45 |     }
46 | 
47 |     return {
48 |       userInfo,
49 |       loading,
50 |       getUserInfo
51 |     }
52 |   }
53 | })
54 | </script>
55 | 
56 | <style scoped lang="stylus">
57 | 
58 | .axios-container {
59 | 
60 |   .user-info-container {
61 |     display flex
62 |     justify-content center
63 |     width 100%
64 | 
65 |     .info-list-box {
66 |       padding 10px
67 | 
68 |       .text {
69 |         font-size: 14px;
70 |       }
71 | 
72 |       .item {
73 |         margin-bottom: 18px;
74 |       }
75 | 
76 |     }
77 | 
78 |     .card-header {
79 |       display: flex;
80 |       justify-content: space-between;
81 |       align-items: center;
82 |     }
83 | 
84 |     .box-card {
85 |       width: 480px;
86 |     }
87 | 
88 |   }
89 | 
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory, Router, RouteRecordRaw } from 'vue-router'
 2 | import Home from '@/views/Home.vue'
 3 | import Vuex from '@/views/Vuex.vue'
 4 | import Resource from '@/views/Resource.vue'
 5 | import Pod from '@/views/resource/Pod.vue'
 6 | import Templeton from '@/views/Templeton.vue'
 7 | import Stores from '@/views/Stores.vue'
 8 | import Images from '@/views/Images.vue'
 9 | import PodInfo from '@/views/resource/PodInfo.vue'
10 | import webShell from '@/views/Xterm.vue'
11 | 
12 | const routes: Array<RouteRecordRaw> = [
13 |   {
14 |     path: '/',
15 |     name: 'Home',
16 |     component: Home,
17 |     props: true,
18 |   },
19 |   {
20 |     path: '/Resource',
21 |     name: '资源中心',
22 |     component: Resource
23 |   },
24 |   {
25 |     path: '/pod',
26 |     name: 'pod',
27 |     component: Pod,
28 |     props: true,
29 |     meta: { title: 'pod管理' }
30 |   },
31 |   {
32 |     path: '/podInfo',
33 |     name: 'podInfo',
34 |     component: PodInfo,
35 |     props: true,
36 |     meta: { title: 'pod详情页面' }
37 |   },
38 |   {
39 |     path: '/deployments',
40 |     name: 'deployments',
41 |     component: () => import('@/views/resource/Deployments.vue'),
42 |     props: true,
43 |     meta: { title: 'deployments' }
44 |   },
45 |   {
46 |     path: '/webShell',
47 |     name: 'webShell',
48 |     component: webShell,
49 |     props: true,
50 |     meta: { title: 'deployments' }
51 |   },
52 |   {
53 |     path: '/statefulSets',
54 |     name: 'statefulSets',
55 |     component: () => import('@/views/resource/StatefulSets.vue'),
56 |     props: true,
57 |     meta: { title: 'statefulSets' }
58 |   },
59 |   {
60 |     path: '/Stores',
61 |     name: '存储管理',
62 |     component: Stores
63 |   },
64 |   {
65 |     path: '/Templeton',
66 |     name: '配置管理',
67 |     component: Templeton
68 |   },
69 |   {
70 |     path: '/Images',
71 |     name: '镜像管理',
72 |     component: Images
73 |   },
74 |   {
75 |     path: '/vuex',
76 |     name: 'Vuex',
77 |     component: Vuex
78 |   },
79 |   {
80 |     path: '/axios',
81 |     name: 'Axios',
82 |     component: () => import('@/views/Axios.vue') // 懒加载 Axios 组件
83 |   },
84 |   {
85 |     path: '/login',
86 |     name: 'login',
87 |     component: () => import('@/views/Login.vue') // 懒加载 Axios 组件
88 |   }
89 | ]
90 | 
91 | const router: Router = createRouter({
92 |   // history: createWebHistory(),
93 |   history: createWebHashHistory(), // 带#
94 |   routes
95 | })
96 | 
97 | export default router
98 | 


--------------------------------------------------------------------------------
/.cz-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // type 类型（定义之后，可通过上下键选择）
 3 |   types: [
 4 |     { value: 'feat', name: 'feat:     新增功能' },
 5 |     { value: 'fix', name: 'fix:      修复 bug' },
 6 |     { value: 'docs', name: 'docs:     文档变更' },
 7 |     {
 8 |       value: 'style',
 9 |       name: 'style:    代码格式（不影响功能，例如空格、分号等格式修正）'
10 |     },
11 |     {
12 |       value: 'refactor',
13 |       name: 'refactor: 代码重构（不包括 bug 修复、功能新增）'
14 |     },
15 |     { value: 'perf', name: 'perf:     性能优化' },
16 |     { value: 'test', name: 'test:     添加、修改测试用例' },
17 |     {
18 |       value: 'build',
19 |       name:
20 |         'build:    构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）'
21 |     },
22 |     { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
23 |     {
24 |       value: 'chore',
25 |       name: 'chore:    对构建过程或辅助工具和库的更改（不影响源文件、测试用例）'
26 |     },
27 |     { value: 'revert', name: 'revert:   回滚 commit' }
28 |   ],
29 | 
30 |   // scope 类型（定义之后，可通过上下键选择）
31 |   scopes: [
32 |     ['components', '组件相关'],
33 |     ['hooks', 'hook 相关'],
34 |     ['utils', 'utils 相关'],
35 |     ['element-ui', '对 element-ui 的调整'],
36 |     ['styles', '样式相关'],
37 |     ['deps', '项目依赖'],
38 |     ['auth', '对 auth 修改'],
39 |     ['other', '其他修改'],
40 |     // 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true
41 |     ['custom', '以上都不是？我要自定义']
42 |   ].map(([value, description]) => {
43 |     return {
44 |       value,
45 |       name: `${value.padEnd(30)} (${description})`
46 |     }
47 |   }),
48 | 
49 |   // 是否允许自定义填写 scope，在 scope 选择的时候，会有 empty 和 custom 可以选择。
50 |   // allowCustomScopes: true,
51 | 
52 |   // allowTicketNumber: false,
53 |   // isTicketNumberRequired: false,
54 |   // ticketNumberPrefix: 'TICKET-',
55 |   // ticketNumberRegExp: '\\d{1,5}',
56 | 
57 |   // 针对每一个 type 去定义对应的 scopes，例如 fix
58 |   /*
59 |   scopeOverrides: {
60 |     fix: [
61 |       { name: 'merge' },
62 |       { name: 'style' },
63 |       { name: 'e2eTest' },
64 |       { name: 'unitTest' }
65 |     ]
66 |   },
67 |   */
68 | 
69 |   // 交互提示信息
70 |   messages: {
71 |     type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',
72 |     scope: '\n选择一个 scope（可选）：',
73 |     // 选择 scope: custom 时会出下面的提示
74 |     customScope: '请输入自定义的 scope：',
75 |     subject: '填写简短精炼的变更描述：\n',
76 |     body: '填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
77 |     breaking: '列举非兼容性重大的变更（可选）：\n',
78 |     footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
79 |     confirmCommit: '确认提交？'
80 |   },
81 | 
82 |   // 设置只有 type 选择了 feat 或 fix，才询问 breaking message
83 |   allowBreakingChanges: ['feat', 'fix'],
84 | 
85 |   // 跳过要询问的步骤
86 |   // skipQuestions: ['body', 'footer'],
87 | 
88 |   subjectLimit: 100, // subject 限制长度
89 |   breaklineChar: '|' // 换行符，支持 body 和 footer
90 |   // footerPrefix : 'ISSUES CLOSED:'
91 |   // askForBreakingChangeFirst : true,
92 | }
93 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "k8s_vite",
 3 |   "version": "0.0.1",
 4 |   "private": false,
 5 |   "description": "k8s_vite",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "build-tsc": "vue-tsc --noEmit && vite build",
10 |     "serve": "vite preview",
11 |     "format": "prettier --write ./src",
12 |     "lint": "eslint ./src --ext .vue,.js,.ts",
13 |     "lint-fix": "eslint --fix ./src --ext .vue,.js,.ts",
14 |     "prepare": "husky install",
15 |     "test": "jest"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+ssh://git@github.com/XPoet/vite-vue3-starter.git"
20 |   },
21 |   "keywords": [
22 |     "Vite",
23 |     "Vue3",
24 |     "TypeScript",
25 |     "Starter"
26 |   ],
27 |   "author": "XPoet",
28 |   "license": "MIT",
29 |   "bugs": {
30 |     "url": "https://github.com/XPoet/vite-vue3-starter/issues"
31 |   },
32 |   "homepage": "https://github.com/XPoet/vite-vue3-starter#readme",
33 |   "lint-staged": {
34 |     "*.{vue,js,ts}": "eslint --fix"
35 |   },
36 |   "config": {
37 |     "commitizen": {
38 |       "path": "./node_modules/cz-customizable"
39 |     }
40 |   },
41 |   "dependencies": {
42 |     "axios": "^0.21.1",
43 |     "clipboard": "^2.0.8",
44 |     "csss": "^1.1.1",
45 |     "echarts": "^5.1.2",
46 |     "element-plus": "^1.0.2-beta.44",
47 |     "element3": "0.0.40",
48 |     "jt-storage": "0.0.2",
49 |     "pushstate-server": "^3.1.0",
50 |     "vue": "^3.0.5",
51 |     "vue-easy-form": "^1.8.4",
52 |     "vue-router": "^4.0.6",
53 |     "vuex": "^4.0.0",
54 |     "vuex-persistedstate": "^4.0.0-beta.3",
55 |     "xterm": "^4.12.0",
56 |     "xterm-addon-fit": "^0.5.0"
57 |   },
58 |   "devDependencies": {
59 |     "@commitlint/cli": "^12.1.1",
60 |     "@commitlint/config-conventional": "^12.1.1",
61 |     "@types/jest": "^26.0.22",
62 |     "@typescript-eslint/eslint-plugin": "^4.21.0",
63 |     "@typescript-eslint/parser": "^4.21.0",
64 |     "@vitejs/plugin-vue": "^1.2.1",
65 |     "@vue/compiler-sfc": "^3.0.5",
66 |     "@vue/test-utils": "^2.0.0-rc.4",
67 |     "commitizen": "^4.2.3",
68 |     "cz-conventional-changelog": "^3.3.0",
69 |     "cz-customizable": "^6.3.0",
70 |     "eslint": "^7.24.0",
71 |     "eslint-config-airbnb-base": "^14.2.1",
72 |     "eslint-config-prettier": "^8.1.0",
73 |     "eslint-plugin-import": "^2.22.1",
74 |     "eslint-plugin-jest": "^24.3.5",
75 |     "eslint-plugin-prettier": "^3.3.1",
76 |     "eslint-plugin-vue": "^7.8.0",
77 |     "husky": "^6.0.0",
78 |     "jest": "^26.6.3",
79 |     "lint-staged": "^10.5.4",
80 |     "prettier": "^2.2.1",
81 |     "sass": "^1.34.1",
82 |     "stylus": "^0.54.8",
83 |     "ts-jest": "^26.5.4",
84 |     "typescript": "^4.1.3",
85 |     "vite": "^2.1.5",
86 |     "vite-plugin-style-import": "^0.9.2",
87 |     "vue-jest": "^5.0.0-alpha.7",
88 |     "vue-tsc": "^0.0.15"
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/src/views/Xterm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div ref="terminal" id="terminal"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | import {defineComponent, onMounted, ref, onUnmounted} from 'vue'
 8 | import { useRouter } from 'vue-router'
 9 | import { Terminal } from 'xterm';
10 | import { FitAddon  } from 'xterm-addon-fit';
11 | import 'xterm/css/xterm.css'
12 | import { ElMessage } from 'element-plus'
13 | 
14 | export default defineComponent({
15 |   name: 'Xterm',
16 |   setup(){
17 |     //实例化路由
18 |     const shellWs = ref(null)
19 |     const rows = ref(null)
20 |     const cols = ref(null)
21 | 
22 |     const term = new Terminal({
23 |       rendererType: 'canvas',
24 |       cursorBlink: true,
25 |       convertEol: true,
26 |       scrollback: 800,
27 |       row: 70,
28 |       theme: {
29 |         foreground: 'white',
30 |         background: '#181E29'
31 |       }
32 |     })
33 |     const fitAddon = new FitAddon();
34 |     // canvas背景全屏
35 |     term.loadAddon(fitAddon);
36 |     fitAddon.fit();
37 |     const router = useRouter();
38 |     const podName = router.currentRoute.value.query.podName
39 |     const podNamespace = router.currentRoute.value.query.podNamespace
40 |     const containerName = router.currentRoute.value.query.containerName
41 |     const SHELL = router.currentRoute.value.query.shell
42 |     const querystring = "ws://114.67.110.204:9997/resource/websocket?" + "podNs="+ podNamespace + "&podName=" + podName + "&containerName=" + containerName + "&shell=" + SHELL
43 |     const ws = new WebSocket(querystring)
44 |     onMounted(()=>{
45 |       term.open(document.getElementById('terminal'));  //绑定dom节点
46 |       term.focus() // 取得输入焦点
47 |       term.writeln('Connecting...');  // 写一行测试
48 |       ws.onclose = function (e) {
49 |         ElMessage.warning({
50 |           message: '链接已关闭',
51 |           type: 'warning',
52 |           center: true,
53 |         });
54 |       }
55 |       ws.onmessage = function (e) { // 服务端ssh输出, 写到web shell展示
56 |         term.write(e.data)
57 |       }
58 |       ws.onerror = function (e) {
59 |         ElMessage.error({
60 |           message: '请更换，shell环境再试一下',
61 |           type: 'error',
62 |           center: true,
63 |         });
64 |       }
65 |       // 当浏览器窗口变化时, 重新适配终端
66 |       window.addEventListener("resize", function () {
67 |         fitAddon.fit();
68 |         // 把web终端的尺寸term.rows和term.cols发给服务端, 通知sshd调整输出宽度
69 |         var msg = {type: "resize", rows: term.rows, cols: term.cols}
70 |         ws.send(JSON.stringify(msg))
71 |       })
72 |       // 当向web终端敲入字符时候的回调
73 |       // term.onKey(e => {  //给后端发送数据
74 |       //   // 写给服务端, 由服务端发给container
75 |       //   console.log(e.key)
76 |       //   var msg = {type: "input", input: e.key }
77 |       //   ws.send(JSON.stringify(msg))
78 |       // })
79 |       // 支持输入与粘贴方法
80 |       term.onData(function(input) {
81 |         // 写给服务端, 由服务端发给container
82 |         var msg = {type: "input", input: input}
83 |         ws.send(JSON.stringify(msg))
84 |       })
85 |     })
86 |     onUnmounted(()=>{
87 |       ws.close()
88 |     })
89 |     return {
90 |       shellWs, term, rows, cols
91 |     }
92 |   },
93 | })
94 | </script>
95 | 
96 | <style>
97 | 
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/components/Main.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main class="main-container">
  3 |     <div class="top" v-if='state.showMenu'>
  4 |       <Header />
  5 |     </div>
  6 |     <div class="bottom">
  7 |       <div class="right">
  8 |         <div class="content">
  9 |             <router-view />
 10 |         </div>
 11 |       </div>
 12 |     </div>
 13 |   </main>
 14 | </template>
 15 | <script lang="ts">
 16 | import { defineComponent, onUnmounted, reactive, ref } from 'vue'
 17 | import Header from '@/components/Header.vue'
 18 | import { useRouter } from 'vue-router'
 19 | 
 20 | export default defineComponent({
 21 |   name: 'Main',
 22 |   components: {
 23 |     Header,
 24 |   },
 25 |   setup(){
 26 |     const router = useRouter()
 27 |     const state = reactive({
 28 |       showMenu: false
 29 |     })
 30 |     const islogin = router.beforeEach((to,from,next)=>{
 31 |       if (to.path == '/login') {
 32 |         // 如果路径是 /login 则正常执行
 33 |         next()
 34 |       } else {
 35 |         // 如果不是 /login，判断是否有 token
 36 |         if (!localStorage.getItem('token')) {
 37 |           state.showMenu = false
 38 |             // 如果没有，则跳至登录页面
 39 |           next({ path: '/login' })
 40 |         } else {
 41 |           // 否则继续执行
 42 |           state.showMenu = true
 43 |           next()
 44 |         }
 45 |       }
 46 |     })
 47 |     // 监听浏览器原生回退事件
 48 |     if (window.history && window.history.pushState) {
 49 |       history.pushState(null, null, document.URL);
 50 |       window.addEventListener('popstate', () => {
 51 |         if (!localStorage.getItem('token')) {
 52 |           state.showMenu = false
 53 |         }
 54 |       }, false);
 55 |     }
 56 | 
 57 |     onUnmounted(()=> {
 58 |       islogin()
 59 |     })
 60 |     return {
 61 |       state,
 62 |     }
 63 |   }
 64 | })
 65 | </script>
 66 | 
 67 | <style scoped lang="stylus">
 68 | 
 69 | @import "../style/basic.styl"
 70 | 
 71 | $top-height = 60px
 72 | $left-side-width = 80px
 73 | 
 74 | .main-container {
 75 |   position absolute
 76 |   left 0
 77 |   right 0
 78 |   top 0
 79 |   bottom 0
 80 |   width 100%
 81 |   height 100%
 82 |   background $second-background-color
 83 |   box-sizing border-box
 84 |   display flex
 85 |   flex-direction column
 86 |   justify-content space-between
 87 | 
 88 |   .top {
 89 |     position relative
 90 |     box-sizing border-box
 91 |     width 100%
 92 |     height $top-height
 93 |     margin-bottom 10px
 94 |   }
 95 | 
 96 |   .bottom {
 97 |     position relative
 98 |     box-sizing border-box
 99 |     width 100%
100 |     height 100%
101 |     display flex
102 |     justify-content space-between
103 | 
104 |     .left {
105 |       position relative
106 |       width $left-side-width
107 |       height 100%
108 |       box-sizing border-box
109 |     }
110 | 
111 |     .right {
112 |       position relative
113 |       width 100%
114 |       height 100%
115 |       box-sizing border-box
116 |       padding 0 10px 10px 10px
117 | 
118 |       .content {
119 |         position relative
120 |         width 100%
121 |         height 100%
122 |         background $background-color
123 |         border-radius 5px
124 |         box-sizing border-box
125 |         padding 10px
126 |       }
127 |     }
128 |   }
129 | }
130 | 
131 | .page-links {
132 |   a {
133 |     font-weight: bold;
134 |     margin: 0 20px;
135 |   }
136 | }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/src/views/Resource.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home-container page-container">
  3 |     <el-tabs v-model="activeName" @tab-click="handleClick">
  4 |     <el-table
  5 |     :data="itemRefs"
  6 |     style="width: 100%"
  7 |     :row-class-name="tableRowClassName">
  8 |           <el-table-column
  9 |             prop="name"
 10 |             label="Cluster Name"
 11 |             width="auto">
 12 |           </el-table-column>
 13 |           <el-table-column
 14 |             prop="osVersion"
 15 |             label="系统类型"
 16 |             width="auto">
 17 |           </el-table-column>
 18 |           <el-table-column
 19 |             prop="runtimeVersion"
 20 |             label="运行时"
 21 |             width="auto">
 22 |           </el-table-column>
 23 |           <el-table-column
 24 |             prop="kubeletVersion"
 25 |             label="控制器版本"
 26 |             width="auto">
 27 |           </el-table-column>
 28 |           <el-table-column
 29 |             prop="architecture"
 30 |             label="系统平台"
 31 |             width="auto">
 32 |           </el-table-column>
 33 |       </el-table>
 34 |     </el-tabs>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script lang="ts">
 39 | import {defineComponent, ref , onMounted, provide, reactive} from 'vue'
 40 | import axios from "@/utils/axios";
 41 | 
 42 | // interface ResourceStruct {
 43 | //   name : String,
 44 | //   osVersion : String,
 45 | //   runtimeVersion : String,
 46 | //   kubeletVersion : String,
 47 | //   architecture : String,
 48 | // }
 49 | // interface ResourceStructArr {
 50 | //   [index: number]: ResourceStruct
 51 | // }
 52 | 
 53 | export default defineComponent({
 54 |   name: 'Resource',
 55 |   methods: {
 56 |     tableRowClassName({ row, rowIndex }) {
 57 |       if (rowIndex === 1) {
 58 |         return 'warning-row'
 59 |       } else if (rowIndex === 3) {
 60 |         return 'success-row'
 61 |       }
 62 |       return ''
 63 |     },
 64 |   },
 65 |   setup() {
 66 |     const activeName = ref('second')
 67 |     const handleClick = (tab, event) => {
 68 |       console.log(tab, event)
 69 |     }
 70 |     const itemRefs = reactive<any[]>([])
 71 |     axios.get('/resource/node_list').then((res) => {
 72 |       for (var i = 0; i < res.data[0].items.length; i++) {
 73 |         itemRefs.push({
 74 |           name: res.data[0].items[i].metadata.name,
 75 |           osVersion: res.data[0].items[i].status.nodeInfo.osImage,
 76 |           runtimeVersion: res.data[0].items[i].status.nodeInfo.containerRuntimeVersion,
 77 |           kubeletVersion: res.data[0].items[i].status.nodeInfo.kubeletVersion,
 78 |           architecture: res.data[0].items[i].status.nodeInfo.architecture,
 79 |         })
 80 |       }
 81 |     })
 82 |     return {activeName, handleClick, itemRefs}
 83 |   }
 84 | })
 85 | </script>
 86 | 
 87 | <style scoped lang="stylus">
 88 | .home-container {
 89 |   .vue-element-plus-logo {
 90 |     width 50%
 91 |   }
 92 | }
 93 | 
 94 | .el-header, .el-footer {
 95 |   background-color: #B3C0D1;
 96 |   color: #333;
 97 |   text-align: center;
 98 |   line-height: 60px;
 99 | }
100 | 
101 | .el-aside {
102 |   background-color: #D3DCE6;
103 |   color: #333;
104 |   text-align: center;
105 |   line-height: 200px;
106 | }
107 | 
108 | .el-main {
109 |   background-color: #ffffff;
110 |   color: #333;
111 |   text-align: center;
112 |   line-height: 20px;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-wrap">
  3 |     <div class="ms-login">
  4 |       <div class="ms-title">k8s_vite</div>
  5 |       <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
  6 |         <el-form-item prop="username">
  7 |           <el-input v-model="param.username" placeholder="username">
  8 |             <template #prepend>
  9 |               <el-button icon="el-icon-user"></el-button>
 10 |             </template>
 11 |           </el-input>
 12 |         </el-form-item>
 13 |         <el-form-item prop="password">
 14 |           <el-input
 15 |             type="password"
 16 |             placeholder="password"
 17 |             v-model="param.password"
 18 |             @keyup.enter="submitForm"
 19 |           >
 20 |             <template #prepend>
 21 |               <el-button icon="el-icon-lock"></el-button>
 22 |             </template>
 23 |           </el-input>
 24 |         </el-form-item>
 25 |         <el-form-item prop="code">
 26 |           <el-input
 27 |             placeholder="code"
 28 |             v-model="param.code"
 29 |           >
 30 |             <template #prepend>
 31 |               <img style='height: 30px;' ref='picRef' id='picCodeId' @click="GetPic" />
 32 |             </template>
 33 |           </el-input>
 34 |         </el-form-item>
 35 |         <div class="login-btn">
 36 |           <el-button type="primary" @click="submitForm">登录</el-button>
 37 |         </div>
 38 |         <p class="login-tips">Tips : 用户名和密码随便填。</p>
 39 |       </el-form>
 40 |     </div>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import { useRouter } from 'vue-router'
 46 | import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
 47 | import { ElMessage } from 'element-plus'
 48 | import axios from '@/utils/axios'
 49 | 
 50 | export default {
 51 |   setup(){
 52 |     const router = useRouter()
 53 |     const login = ref(null)
 54 |     const picRef = ref(null)
 55 |     const picStatus = reactive({
 56 |       picUrl: '',
 57 |       picId : ''
 58 |     })
 59 |     const state = reactive({
 60 |       param: {
 61 |         username: 'admin',
 62 |         password: 'admin',
 63 |         code: '123123',
 64 |       },
 65 |       rules: {
 66 |         username: [
 67 |           { required: 'true', message: '账户不能为空', trigger: 'blur' }
 68 |         ],
 69 |         password: [
 70 |           { required: 'true', message: '密码不能为空', trigger: 'blur' }
 71 |         ],
 72 |         code: [
 73 |           { required: 'true', message: '验证码不能为空', trigger: 'blur' }
 74 |         ]
 75 |       }
 76 |     })
 77 |     const submitForm = () =>{
 78 |       login.value.validate(valid => {
 79 |         if (valid) {
 80 |           // send get user
 81 |           var params = new URLSearchParams()
 82 |           params.append('Id',picStatus.picId)
 83 |           params.append('Username', state.param.username)
 84 |           params.append('Password',state.param.password)
 85 |           params.append('Code',state.param.code)
 86 |           axios.post('v1/login', params).then((data) => {
 87 |             if ( data.status === 200 ) {
 88 |               ElMessage.success('登录成功')
 89 |               localStorage.setItem('token', data.data.token)
 90 |               localStorage.setItem('user', JSON.stringify(data.data.user))
 91 |               // 路由跳转带参数
 92 |               router.push({
 93 |                 path:"/",
 94 |                 // query:{
 95 |                 //   show : true
 96 |                 // }
 97 |               })
 98 |             }else {
 99 |               const repstr = "登录失败"+data.msg
100 |               ElMessage.warning(repstr)
101 |             }
102 |           }, (err)=> {
103 |             ElMessage.error(err)
104 |           })
105 |         } else {
106 |           ElMessage.warning('请核验输入的内容')
107 |           return false;
108 |         }
109 |       });
110 |     }
111 |     const GetPic = ()=>{
112 |       axios.get('v1/picCode').then((data) => {
113 |         picRef.value.src = data.data.base_64_blob
114 |         picStatus.picUrl = data.data.base_64_blob
115 |         picStatus.picId = data.data.id
116 |       })
117 |     }
118 |     // get code pic
119 |     onMounted(()=>{
120 |       GetPic()
121 |     })
122 |     return {
123 |       login,submitForm,...toRefs(state), GetPic,picRef
124 |     }
125 |   }
126 | };
127 | </script>
128 | 
129 | <style scoped>
130 | .login-wrap {
131 |   position: relative;
132 |   width: 100%;
133 |   height: 100%;
134 |   background-image: url(../assets/img/login-bg.jpg);
135 |   background-size: 100%;
136 | }
137 | .ms-title {
138 |   width: 100%;
139 |   line-height: 50px;
140 |   text-align: center;
141 |   font-size: 20px;
142 |   color: #fff;
143 |   border-bottom: 1px solid #ddd;
144 | }
145 | .ms-login {
146 |   position: absolute;
147 |   left: 50%;
148 |   top: 50%;
149 |   width: 350px;
150 |   margin: -190px 0 0 -175px;
151 |   border-radius: 5px;
152 |   background: rgba(255, 255, 255, 0.3);
153 |   overflow: hidden;
154 | }
155 | .ms-content {
156 |   padding: 30px 30px;
157 | }
158 | .login-btn {
159 |   text-align: center;
160 | }
161 | .login-btn button {
162 |   width: 100%;
163 |   height: 36px;
164 |   margin-bottom: 10px;
165 | }
166 | .login-tips {
167 |   font-size: 12px;
168 |   line-height: 30px;
169 |   color: #fff;
170 | }
171 | </style>
172 | 


--------------------------------------------------------------------------------
/src/views/resource/PodInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-row>
  3 |     <el-col :span="12">
  4 |       <el-form ref="form" :model="PodMetadata" label-width="80px">
  5 |         <el-form-item label="Pod名称">
  6 |           <el-input v-model="PodMetadata.namespace"></el-input>
  7 |         </el-form-item>
  8 |         <el-form-item label="namespace">
  9 |           <el-input v-model="PodMetadata.name"></el-input>
 10 |         </el-form-item>
 11 |         <el-form-item label="createTime">
 12 |           <el-input v-model="PodMetadata.creationTimestamp"></el-input>
 13 |         </el-form-item>
 14 |       </el-form>
 15 |       <el-form ref="form" :model="PodSpec" label-width="80px">
 16 |         <el-form-item label="nodeName">
 17 |           <el-input v-model="PodSpec.nodeName"></el-input>
 18 |         </el-form-item>
 19 |         <el-form-item label="serviceAccountName">
 20 |           <el-input v-model="PodSpec.serviceAccountName"></el-input>
 21 |         </el-form-item>
 22 |         <el-form-item label="volumes" v-for="item in PodSpec.volumes" :key="item.name">
 23 |           <el-input v-model="item.name"></el-input>
 24 |           <el-input v-model="item.mountPath"></el-input>
 25 |           <el-input v-model="item.readOnly"></el-input>
 26 |         </el-form-item>
 27 |         <el-form-item label="containers" v-for="item in PodSpec.containers" :key="item.name">
 28 |           <el-input v-model="item.name"></el-input>
 29 |           <el-input v-model="item.image"></el-input>
 30 |           <el-form-item label="volumeMounts" v-for="item1 in item.volumeMounts" :key="item1.name">
 31 |             <el-input v-model="item1.name"></el-input>
 32 |             <el-input v-model="item1.readOnly"></el-input>
 33 |             <el-input v-model="item1.mountPath"></el-input>
 34 |           </el-form-item>
 35 |         </el-form-item>
 36 |       </el-form>
 37 | 
 38 |       <el-form ref="form" :model="PodStatus" label-width="80px">
 39 |         <el-form-item label="运行状态">
 40 |           <el-input v-model="PodStatus.phase"></el-input>
 41 |         </el-form-item>
 42 |         <el-form-item label="podIp">
 43 |           <el-input v-model="PodStatus.podIP"></el-input>
 44 |         </el-form-item>
 45 |         <el-form-item label="启动时间">
 46 |           <el-input v-model="PodStatus.startTime"></el-input>
 47 |         </el-form-item>
 48 |         <el-form-item label="Qos">
 49 |           <el-input v-model="PodStatus.qosClass"></el-input>
 50 |         </el-form-item>
 51 |       </el-form>
 52 |     </el-col>
 53 |     <el-col :span="12">
 54 | 
 55 |     </el-col>
 56 |   </el-row>
 57 | </template>
 58 | 
 59 | <script lang="ts">
 60 | import {defineComponent, reactive, toRefs, onMounted, ref, markRaw, onBeforeUnmount, onUnmounted} from 'vue'
 61 | import { useRouter } from 'vue-router'
 62 | import axios from "@/utils/axios";
 63 | 
 64 | 
 65 | export interface Metadata {
 66 |     name: string;
 67 |     namespace: string;
 68 |     creationTimestamp: string;
 69 | }
 70 | export interface Spec {
 71 |   volumes: VolumeMount[];
 72 |   containers: Container[];
 73 |   serviceAccountName: string;
 74 |   nodeName: string;
 75 | }
 76 | export interface Container {
 77 |   name: string;
 78 |   image: string;
 79 |   volumeMounts: VolumeMount[];
 80 | }
 81 | export interface VolumeMount{
 82 |   name: string;
 83 |   readOnly: boolean;
 84 |   mountPath: string;
 85 | }
 86 | export interface Status {
 87 |   phase: string; //现阶段状态
 88 |   podIP: string;
 89 |   startTime: string;
 90 |   qosClass: string;
 91 | }
 92 | 
 93 | export default {
 94 |   name: "PodInfo",
 95 |   setup() {
 96 |     const router = useRouter()
 97 |     const podName = router.currentRoute.value.query.podName
 98 |     const podNamespace = router.currentRoute.value.query.podNamespace
 99 | 
100 |     const PodMetadata = reactive<Metadata>({name:'',namespace:'',creationTimestamp:''})
101 |     const PodSpec = reactive<Spec>({volumes:[],serviceAccountName:'',nodeName:'', containers:[]})
102 |     const PodStatus = reactive<Status>({phase:'',podIP:'',startTime:'',qosClass:''})
103 |     const Podcontainers = reactive<Container[]>([])
104 |     const PodVolumeMounts = reactive<VolumeMount[]>([])
105 | 
106 |     const querUrl = "/resource/pod?"+"namespace="+podNamespace+"&podName="+podName
107 |     axios.get(querUrl).then((res) => {
108 |       // console.log(res.data[0])
109 |       PodMetadata.name = res.data[0].metadata.name
110 |       PodMetadata.namespace = res.data[0].metadata.namespace
111 |       PodMetadata.creationTimestamp = res.data[0].metadata.creationTimestamp
112 |       for (var i = 0; i < res.data[0].spec.containers.length; i++) {
113 |         for (var j = 0; j < res.data[0].spec.containers[i].volumeMounts.length; j++) {
114 |           PodVolumeMounts.push({
115 |             name: res.data[0].spec.containers[i].volumeMounts[j].name,
116 |             readOnly: res.data[0].spec.containers[i].volumeMounts[j].readOnly,
117 |             mountPath: res.data[0].spec.containers[i].volumeMounts[j].mountPath,
118 |           })
119 |         }
120 |         Podcontainers.push({
121 |           name: res.data[0].spec.containers[i].name,
122 |           image: res.data[0].spec.containers[i].image,
123 |           volumeMounts: PodVolumeMounts
124 |         })
125 |       }
126 | 
127 |       PodSpec.nodeName = res.data[0].spec.nodeName
128 |       PodSpec.serviceAccountName = res.data[0].spec.serviceAccountName
129 |       PodSpec.volumes = PodVolumeMounts
130 |       PodSpec.containers = Podcontainers
131 |       PodStatus.phase = res.data[0].status.phase
132 |       PodStatus.podIP = res.data[0].status.podIP
133 |       PodStatus.qosClass = res.data[0].status.qosClass
134 |       PodStatus.startTime = res.data[0].status.startTime
135 |     })
136 |     console.log(PodMetadata,PodSpec,PodStatus)
137 |     return {
138 |       PodMetadata,PodSpec,PodStatus,
139 |     }
140 |   },
141 |   methods: {
142 |     onSubmit() {
143 |       console.log('submit!');
144 |     }
145 |   }
146 | }
147 | </script>
148 | 
149 | <style scoped>
150 | 
151 | </style>
152 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home-container page-container">
  3 |     <div class="page-title">
  4 |       <div id="clusterinfo" ref="myRef" class="clusterinfo" />
  5 |       <div class="grid-content bg-purple-light selfinfo" id="selfinfo" ref="myRef" />
  6 |     </div>
  7 |     <el-row class="carinfo" :gutter="32">
  8 |       <el-col class="carinfoitem" :span="4">
  9 |         <el-card shadow="hover"> node | {{ node }} </el-card>
 10 |       </el-col>
 11 |       <el-col class="carinfoitem" :span="4">
 12 |         <el-card shadow="hover"> Services | {{ Services }} </el-card>
 13 |       </el-col>
 14 |       <el-col class="carinfoitem" :span="4">
 15 |         <el-card shadow="hover"> Pods |{{ Pods }} </el-card>
 16 |       </el-col>
 17 |       <el-col class="carinfoitem" :span="4">
 18 |         <el-card shadow="hover"> DaemonSets |{{ DaemonSets }} </el-card>
 19 |       </el-col>
 20 |       <el-col class="carinfoitem" :span="4">
 21 |         <el-card shadow="hover"> Deployments | {{ Deployments }} </el-card>
 22 |       </el-col>
 23 |       <el-col class="carinfoitem" :span="4">
 24 |         <el-card shadow="hover"> StatefulSets |{{ StatefulSets }} </el-card>
 25 |       </el-col>
 26 |     </el-row>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script lang="ts">
 31 | import { defineComponent, ref, onMounted } from 'vue'
 32 | import axios from '@/utils/axios'
 33 | import * as echarts from 'echarts'
 34 | 
 35 | export default defineComponent({
 36 |   name: 'Home',
 37 |   setup() {
 38 |     const echart = echarts
 39 |     const node = ref<number>(0)
 40 |     const Services = ref<number>(0)
 41 |     const Pods = ref<number>(0)
 42 |     const DaemonSets = ref<number>(0)
 43 |     const Deployments = ref<number>(0)
 44 |     const StatefulSets = ref<number>(0)
 45 | 
 46 |     const initClusterInfo = () => {
 47 |       const myChart = echart.init(document.getElementById('clusterinfo'))
 48 |       axios.get('/resource/cluster_info').then((response) => {
 49 |         node.value = response.data[0].node
 50 |         Services.value = response.data[0].service
 51 |         Pods.value = response.data[0].pod
 52 |         DaemonSets.value = response.data[0].daemonset
 53 |         Deployments.value = response.data[0].deployment
 54 |         StatefulSets.value = response.data[0].statefulset
 55 |         myChart.setOption({
 56 |           title: {
 57 |             text: '资源类型占比',
 58 |             left: 'center'
 59 |           },
 60 |           tooltip: {
 61 |             trigger: 'item',
 62 |             formatter: '{a} <br/>{b} : {c} ({d}%)'
 63 |           },
 64 |           legend: {
 65 |             left: 'center',
 66 |             top: 'bottom',
 67 |             data: [
 68 |               'Nodes',
 69 |               'Services',
 70 |               'Pods',
 71 |               'DaemonSets',
 72 |               'Deployments',
 73 |               'StatefulSets'
 74 |             ]
 75 |           },
 76 |           toolbox: {
 77 |             show: true,
 78 |             feature: {
 79 |               mark: { show: true },
 80 |               dataView: { show: true, readOnly: false },
 81 |               restore: { show: true },
 82 |               saveAsImage: { show: true }
 83 |             }
 84 |           },
 85 |           series: [
 86 |             {
 87 |               name: '半径模式',
 88 |               type: 'pie',
 89 |               radius: [40, 150],
 90 |               center: ['45%', '50%'],
 91 |               roseType: 'radius',
 92 |               itemStyle: {
 93 |                 borderRadius: 5
 94 |               },
 95 |               label: {
 96 |                 show: false
 97 |               },
 98 |               emphasis: {
 99 |                 label: {
100 |                   show: true
101 |                 }
102 |               },
103 |               data: [
104 |                 { value: response.data[0].node, name: 'Nodes' },
105 |                 { value: response.data[0].service, name: 'Services' },
106 |                 { value: response.data[0].pod, name: 'Pods' },
107 |                 { value: response.data[0].daemonset, name: 'DaemonSets' },
108 |                 { value: response.data[0].deployment, name: 'Deployments' },
109 |                 { value: response.data[0].statefulset, name: 'StatefulSets' }
110 |               ]
111 |             }
112 |           ]
113 |         })
114 |       })
115 |     }
116 |     const initSelfInfo = () => {
117 |       const myChart = echart.init(document.getElementById('selfinfo'))
118 |       axios.get('/resource/system_info').then((response) => {
119 |         myChart.setOption({
120 |           xAxis: {
121 |             type: 'category',
122 |             data: ['cpu %', 'mem %']
123 |           },
124 |           yAxis: {
125 |             type: 'value'
126 |           },
127 |           series: [
128 |             {
129 |               data: [
130 |                 { value: response.data[0].cpu, itemStyle: { color: '#99CCFF' } },
131 |                 { value: response.data[0].mem, itemStyle: { color: '#FF9900' } }
132 |               ],
133 |               type: 'bar',
134 |               showBackground: true,
135 |               backgroundStyle: {
136 |                 color: 'rgba(180, 180, 180, 0.2)'
137 |               }
138 |             }
139 |           ]
140 |         })
141 |       })
142 |     }
143 | 
144 |     onMounted(() => {
145 |       initClusterInfo()
146 |       initSelfInfo()
147 |     })
148 |     return {
149 |       node,
150 |       Services,
151 |       Pods,
152 |       DaemonSets,
153 |       Deployments,
154 |       StatefulSets
155 |     }
156 |   }
157 | })
158 | </script>
159 | 
160 | <style scoped lang="stylus">
161 | .home-container {
162 |   .vue-element-plus-logo {
163 |     width 50%
164 |   }
165 | }
166 | .clusterinfo{
167 |   float:left;
168 |   width: 600px;
169 |   height: 400px;
170 |   margin:0 auto;
171 | }
172 | .selfinfo{
173 |   float:left;
174 |   width: 400px;
175 |   height: 400px;
176 |   margin:0 auto;
177 | }
178 | .carinfo{
179 |   top 100px;
180 |   float:left;
181 |   height 100px;
182 |   position: relative;
183 |   left: 10px;
184 |   bottom: 10px;
185 |   right: 10px;
186 | }
187 | .carinfoitem{
188 |   height 100px;
189 |   width 200px;
190 |   left 20px;
191 |   font-max-size 20px 20px;
192 |   font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
193 | }
194 | </style>
195 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="header">
  3 |     <div class="title" @click="router.push('/')">
  4 |       k8s_vite
  5 |     </div>
  6 |     <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  7 |       <el-menu-item index="1">集群状态</el-menu-item>
  8 |       <el-menu-item index="2">
  9 |         <el-submenu index="2-1">
 10 |         <template #title>资源管理</template>
 11 |         <el-menu-item index="2-2">pod</el-menu-item>
 12 |         <el-menu-item index="2-3">部署</el-menu-item>
 13 |         <el-menu-item index="2-4">有状态部署</el-menu-item>
 14 |         </el-submenu>
 15 |       </el-menu-item>
 16 |       <el-menu-item index="3">
 17 |         <el-submenu index="3-1">
 18 |           <template #title>授权管理</template>
 19 |           <el-menu-item index="3-2">用户管理</el-menu-item>
 20 |           <el-menu-item index="3-3">资源授权</el-menu-item>
 21 |         </el-submenu>
 22 |       </el-menu-item>
 23 |       <el-menu-item index="4">
 24 |         <el-submenu index="4-1">
 25 |           <template #title>存储管理</template>
 26 |           <el-menu-item index="4-2">pv_list</el-menu-item>
 27 |           <el-menu-item index="4-2">pvc_list</el-menu-item>
 28 |         </el-submenu>
 29 |       </el-menu-item>
 30 |       <el-menu-item index="5">镜像管理</el-menu-item>
 31 |     </el-menu>
 32 | 
 33 |     <div class="go-github" @click="goGitHub">
 34 |       <i class="icon el-icon-user"></i>
 35 |       <el-dropdown>
 36 |       <span class="el-dropdown-link">
 37 |         {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
 38 |       </span>
 39 |       <template #dropdown>
 40 |         <el-dropdown-menu>
 41 |           <el-dropdown-item>{{ sex }}</el-dropdown-item>
 42 |           <el-dropdown-item> {{ email }}</el-dropdown-item>
 43 |           <el-dropdown-item> {{ phone }}</el-dropdown-item>
 44 |           <el-dropdown-item @click='clickLogout'> logout</el-dropdown-item>
 45 |         </el-dropdown-menu>
 46 |       </template>
 47 |     </el-dropdown>
 48 |     </div>
 49 | 
 50 |     <div class="go-github" @click="goGitHub">
 51 |       <i class="icon el-icon-s-comment"></i> GitHub
 52 |     </div>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script lang="ts">
 57 | import { useRouter } from 'vue-router'
 58 | import { defineComponent, ref, reactive, toRefs, onMounted, watch } from 'vue'
 59 | export interface NavItem {
 60 |   path: string
 61 |   name: string
 62 |   isActive: boolean
 63 | }
 64 | export interface localUser {
 65 |   id: number;
 66 |   avatar: string;
 67 |   email: string;
 68 |   enabled: number;
 69 |   password: string;
 70 |   username: string;
 71 |   phone: string;
 72 |   nickName: string;
 73 |   sex: string;
 74 |   updateTime: string;
 75 |   createTime: string;
 76 |   isDel: number;
 77 | }
 78 | 
 79 | export default defineComponent({
 80 |   name: 'Header',
 81 |   methods: {
 82 |       goGitHub(){
 83 |         window.open('https://github.com/haozheyu')
 84 |       },
 85 |   },
 86 |   setup(){
 87 |     const activeIndex = ref('1')
 88 |     const router = useRouter()
 89 |     const userinfo = reactive<localUser>({
 90 |       avatar: '',
 91 |       createTime: '',
 92 |       email: '',
 93 |       enabled: 0,
 94 |       id: 0,
 95 |       isDel: 0,
 96 |       nickName: '',
 97 |       password: '',
 98 |       phone: '',
 99 |       sex: '',
100 |       updateTime: '',
101 |       username: ''
102 |     })
103 |     const initUser = ()=> {
104 |       var item = localStorage.getItem('user')
105 |       if (item != null){
106 |         var parse = JSON.parse(item)
107 |         userinfo.username = parse.username
108 |         userinfo.email = parse.email
109 |         userinfo.sex = parse.sex
110 |         userinfo.phone = parse.phone
111 |         userinfo.avatar = parse.avatar
112 |         userinfo.nickName = parse.nickName
113 |       }
114 |     }
115 |     const clickLogout = () => {
116 |       localStorage.removeItem('user')
117 |       localStorage.removeItem('token')
118 |       location.reload();
119 |     }
120 |     const handleSelect = (key:string) => {
121 |         // console.log(key, keyPath)
122 |        switch(key) {
123 |          case "1" : {
124 |           router.push("/")
125 |           break;
126 |          }
127 |          case "2" : {
128 |           router.push("/Resource")
129 |           break;
130 |          }
131 |          case "2-2" : {
132 |           router.push("/Pod")
133 |           break;
134 |          }
135 |          case "2-3" : {
136 |           router.push("/deployments")
137 |           break;
138 |          }
139 |          case "2-4" : {
140 |           router.push("/statefulSets")
141 |           break;
142 |          }
143 |          case "3" : {
144 |           router.push("/Templeton")
145 |           break;
146 |          }
147 |          case "4" : {
148 |           router.push("/Stores")
149 |           break;
150 |          }
151 |          case "5" : {
152 |           router.push("/Images")
153 |           break;
154 |          }
155 |        }
156 |     }
157 |     watch(
158 |       () => router.currentRoute.value,
159 |       (_n) => {
160 |          switch(_n.path) {
161 |          case "/" : {
162 |           activeIndex.value = "1"
163 |           break;
164 |          }
165 |          case "/Resource" : {
166 |           activeIndex.value = "2"
167 |           break;
168 |          }
169 |          case "/Resource/pod" : {
170 |           activeIndex.value = "2"
171 |           break;
172 |          }
173 |          case "/Resource/deployments" : {
174 |           activeIndex.value = "2"
175 |           break;
176 |          }
177 |          case "/Resource/statefulSets" : {
178 |           activeIndex.value = "2"
179 |           break;
180 |          }
181 |          case "/Templeton" : {
182 |           activeIndex.value = "3"
183 |           break;
184 |          }
185 |          case "/Stores" : {
186 |           activeIndex.value = "4"
187 |           break;
188 |          }
189 |          case "/Images" : {
190 |           activeIndex.value = "5"
191 |           break;
192 |          }
193 |        }
194 |       }
195 |     )
196 |     onMounted(()=>{
197 |       initUser()
198 |     })
199 |     return {
200 |       activeIndex,
201 |       handleSelect,
202 |       ...toRefs(userinfo),
203 |       clickLogout
204 |     }
205 |   }
206 | })
207 | 
208 | 
209 | </script>
210 | 
211 | <style scoped lang="stylus">
212 | 
213 | .header {
214 |   width 100%
215 |   height 100%
216 |   background #fff
217 |   display flex
218 |   justify-content space-between
219 |   align-items center
220 |   padding 0 40px
221 |   box-sizing border-box
222 |   font-weight bold
223 | 
224 |   .title {
225 |     font-size 20px
226 |     cursor pointer
227 |   }
228 | 
229 |   .go-github {
230 |     cursor pointer
231 |     font-size 16px
232 | 
233 |     .icon {
234 |       font-size 20px
235 |     }
236 |   }
237 | }
238 | </style>
239 | 


--------------------------------------------------------------------------------
/src/views/resource/Pod.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-select v-model="value" placeholder="default" @change="changeNamespace">
  3 |     <el-option
  4 |       v-for="item in Namespace_list"
  5 |       :key="item.value"
  6 |       :label="item.label"
  7 |       :value="item.value">
  8 |     </el-option>
  9 |   </el-select>
 10 | 
 11 |   <el-table
 12 |     :data="Pod_list"
 13 |     style="width: 100%">
 14 |     <el-table-column
 15 |       label="createTime">
 16 |       <template #default="scope">
 17 |         <i class="el-icon-time"></i>
 18 |         <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
 19 |       </template>
 20 |     </el-table-column>
 21 |     <el-table-column
 22 |       label="name">
 23 |       <template #default="scope">
 24 |         <el-popover effect="light" trigger="hover" placement="top">
 25 |           <template #default>
 26 |             <p>namespace: {{ scope.row.namespace }}</p>
 27 |           </template>
 28 |           <template #reference>
 29 |             <div class="name-wrapper">
 30 |               <el-tag @click="getPodName(scope.row)" size="medium">{{ scope.row.name }}</el-tag>
 31 |             </div>
 32 |           </template>
 33 |         </el-popover>
 34 |       </template>
 35 |     </el-table-column>
 36 |     <el-table-column
 37 |       label="status">
 38 |       <template #default="scope">
 39 |         <i class="el-icon-rank"></i>
 40 |         <span style="margin-left: 10px">{{ scope.row.status }}</span>
 41 |       </template>
 42 |     </el-table-column>
 43 |     <el-table-column
 44 |       label="qosClass">
 45 |       <template #default="scope">
 46 |         <i class="el-icon-aim"></i>
 47 |         <span style="margin-left: 10px">{{ scope.row.qosClass}}</span>
 48 |       </template>
 49 |     </el-table-column>
 50 | 
 51 |     <el-table-column
 52 |       label="podIP">
 53 |       <template #default="scope">
 54 |         <el-popover effect="light" trigger="hover"
 55 |                     v-if="scope.row.podIP">
 56 |           <template #default>
 57 |             <p>podIPs: {{ scope.row.podIP }}</p>
 58 |           </template>
 59 |           <template #reference>
 60 |             <div class="name-wrapper">
 61 |               <el-tag >{{ scope.row.podIP[0].ip }}</el-tag>
 62 |             </div>
 63 |           </template>
 64 |         </el-popover>
 65 |       </template>
 66 |     </el-table-column>
 67 | 
 68 |     <el-table-column type="expand" label="操作">
 69 |       <template #default="scope">
 70 |         <el-form label-position="top" inline class="demo-table-expand" v-for="info in scope.row.containerInfo" :key="info">
 71 |           <el-form-item label="Conn">
 72 |             <span>
 73 |               <el-button @click="handleConn(scope.row, info.name, shell)" type="warning" plain> conn </el-button>
 74 |             </span>
 75 |           </el-form-item>
 76 |           <el-form-item label="containerName">
 77 |             <span>conn :{{ info.name }}</span>
 78 |           </el-form-item>
 79 |           <el-form-item label="containerReady">
 80 |             <span>{{ info.ready }}</span>
 81 |           </el-form-item>
 82 |           <el-form-item label="restartCount">
 83 |             <span>{{ info.restartCount }}</span>
 84 |           </el-form-item>
 85 |           <el-form-item label="image">
 86 |             <span> {{ info.image }}</span>
 87 |           </el-form-item>
 88 |           <el-form-item label="link type">
 89 |             <el-radio v-model="shell" label="bash">bash</el-radio>
 90 |             <el-radio v-model="shell" label="sh">sh</el-radio>
 91 |           </el-form-item>
 92 |         </el-form>
 93 |       </template>
 94 |     </el-table-column>
 95 |   </el-table>
 96 | </template>
 97 | 
 98 | 
 99 | <script lang="ts">
100 | 
101 | import {defineComponent, getCurrentInstance, ref, onMounted, reactive, computed} from 'vue'
102 | import { useRouter } from "vue-router"
103 | import axios from "@/utils/axios";
104 | 
105 | interface NamespaceList {
106 |   value: string,
107 |   label: string,
108 | }
109 | interface PodList {
110 |   name : string,
111 |   namespace : string,
112 |   status : string,
113 |   startTime: string,
114 |   podIP : string[]|undefined,
115 |   containerInfo : any,
116 |   qosClass: string,
117 | }
118 | interface Container {
119 |   containerName: string,
120 |   containerReady: boolean,
121 |   containerRestartCount ?: number,
122 | }
123 | 
124 | export default defineComponent({
125 |   name: "Pod",
126 |   setup() {
127 |     const Pod_list = reactive<PodList[]>([])
128 |     const Namespace_list = reactive<NamespaceList[]>([])
129 |     const value = ref("")
130 |     const shell = ref("bash")
131 |     axios.get('/resource/pod_list').then((res) => {
132 |       for (var i = 0; i < res.data[0].items.length; i++) {
133 |         Pod_list.push({
134 |           name: res.data[0].items[i].metadata.name,
135 |           namespace: res.data[0].items[i].metadata.namespace,
136 |           status: res.data[0].items[i].status.phase,
137 |           startTime: res.data[0].items[i].status.startTime,
138 |           podIP: res.data[0].items[i].status.podIPs,
139 |           containerInfo: res.data[0].items[i].status.containerStatuses,
140 |           qosClass: res.data[0].items[i].status.qosClass,
141 |         })
142 |       }
143 |     })
144 |     axios.get('/resource/namespace_list').then((res) => {
145 |       for (var i = 0; i < res.data[0].items.length; i++) {
146 |         Namespace_list.push({
147 |           value: res.data[0].items[i].metadata.name,
148 |           label: res.data[0].items[i].metadata.name,
149 |         })
150 |       }
151 |     })
152 |     const router = useRouter()
153 |     const handleConn = (row, info, sh) => {
154 |       // 路由跳转带参数
155 |       router.push({
156 |         path:"/webShell",
157 |         query:{
158 |           podName : row.name,
159 |           podNamespace : row.namespace,
160 |           containerName : info,
161 |           shell: sh,
162 |         }
163 |       })
164 |     }
165 |     const changeNamespace = (value) => {
166 |       Pod_list.length = 0
167 |       axios.get('/resource/pod_list?namespace='+value).then((res) => {
168 |         for (var i = 0; i < res.data[0].items.length; i++) {
169 |           Pod_list.push({
170 |             name: res.data[0].items[i].metadata.name,
171 |             namespace: res.data[0].items[i].metadata.namespace,
172 |             status: res.data[0].items[i].status.phase,
173 |             startTime: res.data[0].items[i].status.startTime,
174 |             podIP: res.data[0].items[i].status.podIPs,
175 |             containerInfo: res.data[0].items[i].status.containerStatuses,
176 |             qosClass: res.data[0].items[i].status.qosClass,
177 |           })
178 |         }
179 |       })
180 |     }
181 |     const getPodName = (e)=> {
182 |       // 带参数路由
183 |       router.push({
184 |         path:"/podInfo",
185 |         query:{
186 |           podName : e.name,
187 |           podNamespace : e.namespace,
188 |         }
189 |       })
190 |     }
191 |     return {
192 |       Namespace_list,
193 |       Pod_list,
194 |       value,
195 |       handleConn,
196 |       shell,
197 |       changeNamespace,
198 |       getPodName,
199 |     }
200 |   }
201 | })
202 | 
203 | </script>
204 | 
205 | <style scoped>
206 | 
207 | </style>
208 | 


--------------------------------------------------------------------------------