bing
3 years ago
24 changed files with 30859 additions and 1 deletions
@ -1,3 +1,24 @@ |
|||||
# zelda-frontend |
# zelda-frontend |
||||
|
|
||||
frontend for zelda |
## Project setup |
||||
|
``` |
||||
|
npm install |
||||
|
``` |
||||
|
|
||||
|
### Compiles and hot-reloads for development |
||||
|
``` |
||||
|
npm run serve |
||||
|
``` |
||||
|
|
||||
|
### Compiles and minifies for production |
||||
|
``` |
||||
|
npm run build |
||||
|
``` |
||||
|
|
||||
|
### Lints and fixes files |
||||
|
``` |
||||
|
npm run lint |
||||
|
``` |
||||
|
|
||||
|
### Customize configuration |
||||
|
See [Configuration Reference](https://cli.vuejs.org/config/). |
||||
|
@ -0,0 +1,3 @@ |
|||||
|
module.exports = { |
||||
|
presets: ["@vue/cli-plugin-babel/preset"], |
||||
|
}; |
File diff suppressed because it is too large
@ -0,0 +1,58 @@ |
|||||
|
{ |
||||
|
"name": "frontend", |
||||
|
"version": "0.1.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"build": "vue-cli-service build", |
||||
|
"lint": "vue-cli-service lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"core-js": "^3.6.5", |
||||
|
"naive-ui": "^2.24.1", |
||||
|
"vue": "^3.0.0", |
||||
|
"vue-class-component": "^8.0.0-0", |
||||
|
"vue-router": "^4.0.0-0", |
||||
|
"vuex": "^4.0.0-0" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@typescript-eslint/eslint-plugin": "^4.18.0", |
||||
|
"@typescript-eslint/parser": "^4.18.0", |
||||
|
"@vue/cli-plugin-babel": "~4.5.0", |
||||
|
"@vue/cli-plugin-eslint": "~4.5.0", |
||||
|
"@vue/cli-plugin-router": "~4.5.0", |
||||
|
"@vue/cli-plugin-typescript": "~4.5.0", |
||||
|
"@vue/cli-plugin-vuex": "~4.5.0", |
||||
|
"@vue/cli-service": "~4.5.0", |
||||
|
"@vue/compiler-sfc": "^3.0.0", |
||||
|
"@vue/eslint-config-prettier": "^6.0.0", |
||||
|
"@vue/eslint-config-typescript": "^7.0.0", |
||||
|
"eslint": "^6.7.2", |
||||
|
"eslint-plugin-prettier": "^3.3.1", |
||||
|
"eslint-plugin-vue": "^7.0.0", |
||||
|
"prettier": "^2.2.1", |
||||
|
"typescript": "~4.1.5" |
||||
|
}, |
||||
|
"eslintConfig": { |
||||
|
"root": true, |
||||
|
"env": { |
||||
|
"node": true |
||||
|
}, |
||||
|
"extends": [ |
||||
|
"plugin:vue/vue3-essential", |
||||
|
"eslint:recommended", |
||||
|
"@vue/typescript/recommended", |
||||
|
"@vue/prettier", |
||||
|
"@vue/prettier/@typescript-eslint" |
||||
|
], |
||||
|
"parserOptions": { |
||||
|
"ecmaVersion": 2020 |
||||
|
}, |
||||
|
"rules": {} |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions", |
||||
|
"not dead" |
||||
|
] |
||||
|
} |
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang=""> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
|
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<n-layout> |
||||
|
<n-layout-header> |
||||
|
<Menu :menu="menu" :mode="mode"></Menu> |
||||
|
</n-layout-header> |
||||
|
<n-layout-content> <router-view /></n-layout-content> |
||||
|
</n-layout> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { NLayoutHeader, NLayoutContent, NLayout } from "naive-ui"; |
||||
|
import { TopMenu } from "@/libs/menu.ts"; |
||||
|
import Menu from "@/components/Menu.vue"; // @ is an alias to /src |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
|
||||
|
@Options({ |
||||
|
components: { |
||||
|
Menu, |
||||
|
NLayoutHeader, |
||||
|
NLayoutContent, |
||||
|
NLayout, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
menu: TopMenu, |
||||
|
mode: "horizontal", |
||||
|
}; |
||||
|
}, |
||||
|
}) |
||||
|
export default class App extends Vue {} |
||||
|
</script> |
||||
|
<style> |
||||
|
#app { |
||||
|
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
text-align: center; |
||||
|
color: #2c3e50; |
||||
|
} |
||||
|
|
||||
|
#nav { |
||||
|
padding: 30px; |
||||
|
} |
||||
|
|
||||
|
#nav a { |
||||
|
font-weight: bold; |
||||
|
color: #2c3e50; |
||||
|
} |
||||
|
|
||||
|
#nav a.router-link-exact-active { |
||||
|
color: #42b983; |
||||
|
} |
||||
|
</style> |
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,36 @@ |
|||||
|
<template> |
||||
|
<div class="hello"> |
||||
|
<h1>{{ msg }}</h1> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
|
||||
|
@Options({ |
||||
|
props: { |
||||
|
msg: String, |
||||
|
}, |
||||
|
}) |
||||
|
export default class HelloWorld extends Vue { |
||||
|
msg!: string; |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||
|
<style scoped> |
||||
|
h3 { |
||||
|
margin: 40px 0 0; |
||||
|
} |
||||
|
ul { |
||||
|
list-style-type: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
li { |
||||
|
display: inline-block; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
a { |
||||
|
color: #42b983; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,41 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<n-menu |
||||
|
:options="menu" |
||||
|
v-model:value="activeKey" |
||||
|
:mode="mode" |
||||
|
class="menu" |
||||
|
></n-menu> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
import { NMenu } from "naive-ui"; |
||||
|
import { ref } from "vue"; |
||||
|
@Options({ |
||||
|
props: { |
||||
|
menu: Array, |
||||
|
mode: String, |
||||
|
}, |
||||
|
components: { |
||||
|
NMenu, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeKey: ref(null), |
||||
|
}; |
||||
|
}, |
||||
|
}) |
||||
|
export default class Menu extends Vue { |
||||
|
menu!: []; |
||||
|
mode!: "horizontal"; |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.menu { |
||||
|
text-align: left !important; |
||||
|
/* font: 1.5em sans-serif; */ |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,93 @@ |
|||||
|
import { h } from "vue"; |
||||
|
import { RouterLink } from "vue-router"; |
||||
|
|
||||
|
export const TopMenu = [ |
||||
|
{ |
||||
|
label: () => |
||||
|
h( |
||||
|
RouterLink, |
||||
|
{ |
||||
|
to: { |
||||
|
name: "Home", |
||||
|
params: { |
||||
|
lang: "zh-CN", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ default: () => "Zelda" } |
||||
|
), |
||||
|
key: "home", |
||||
|
// icon: renderIcon(HomeIcon)
|
||||
|
}, |
||||
|
{ |
||||
|
label: () => |
||||
|
h( |
||||
|
RouterLink, |
||||
|
{ |
||||
|
to: { |
||||
|
name: "Kubernetes", |
||||
|
params: { |
||||
|
lang: "zh-CN", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ default: () => "Kubernetes" } |
||||
|
), |
||||
|
key: "kubernetes", |
||||
|
// icon: renderIcon(WorkIcon)
|
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export const ZeldaSideMenu = [ |
||||
|
{ |
||||
|
label: () => |
||||
|
h( |
||||
|
RouterLink, |
||||
|
{ |
||||
|
to: { |
||||
|
name: "Home", |
||||
|
params: { |
||||
|
lang: "zh-CN", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ default: () => "概览" } |
||||
|
), |
||||
|
key: "home", |
||||
|
// icon: renderIcon(HomeIcon)
|
||||
|
}, |
||||
|
{ |
||||
|
label: () => |
||||
|
h( |
||||
|
RouterLink, |
||||
|
{ |
||||
|
to: { |
||||
|
name: "ZProject", |
||||
|
params: { |
||||
|
lang: "zh-CN", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ default: () => "项目" } |
||||
|
), |
||||
|
key: "zproject", |
||||
|
// icon: renderIcon(WorkIcon)
|
||||
|
}, |
||||
|
{ |
||||
|
label: () => |
||||
|
h( |
||||
|
RouterLink, |
||||
|
{ |
||||
|
to: { |
||||
|
name: "ZService", |
||||
|
params: { |
||||
|
lang: "zh-CN", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ default: () => "服务" } |
||||
|
), |
||||
|
key: "zservice", |
||||
|
// icon: renderIcon(WorkIcon)
|
||||
|
}, |
||||
|
]; |
@ -0,0 +1,15 @@ |
|||||
|
import { createApp } from "vue"; |
||||
|
import App from "./App.vue"; |
||||
|
import router from "./router"; |
||||
|
import store from "./store"; |
||||
|
import { |
||||
|
// create naive ui
|
||||
|
create, |
||||
|
// component
|
||||
|
NButton |
||||
|
} from 'naive-ui' |
||||
|
|
||||
|
const naive = create({ |
||||
|
components: [NButton] |
||||
|
}) |
||||
|
createApp(App).use(store).use(router).use(naive).mount("#app"); |
@ -0,0 +1,60 @@ |
|||||
|
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; |
||||
|
import Home from "../views/Home.vue"; |
||||
|
//zelda resource
|
||||
|
import ZGroup from "../views/zelda/ZGroup.vue"; |
||||
|
import ZService from "../views/zelda/ZService.vue"; |
||||
|
import ZProject from "../views/zelda/ZProject.vue"; |
||||
|
|
||||
|
//kubernetes resource
|
||||
|
import Kubernetes from "../views/Kubernetes.vue"; |
||||
|
//
|
||||
|
import Login from "@/views/Login.vue"; |
||||
|
|
||||
|
const routes: Array<RouteRecordRaw> = [ |
||||
|
{ |
||||
|
path: "/", |
||||
|
name: "Home", |
||||
|
component: Home, |
||||
|
}, |
||||
|
{ |
||||
|
path: "/resource", |
||||
|
name: "Resource", |
||||
|
component: Home, |
||||
|
children: [ |
||||
|
{ path: "/resource/zservice", name: "ZService", component: ZService }, |
||||
|
{ path: "/resource/zgroup", name: "ZGroup", component: ZGroup }, |
||||
|
{ path: "/resource/zproject", name: "ZProject", component: ZProject }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: "/kubernetes", |
||||
|
name: "Kubernetes", |
||||
|
component: Kubernetes, |
||||
|
children: [ |
||||
|
{ path: "/zservice", name: "Deployment", component: ZService }, |
||||
|
{ path: "/zgroup", name: "Pod", component: ZGroup }, |
||||
|
{ path: "/zproject", name: "Service", component: ZProject }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
path: "/about", |
||||
|
name: "About", |
||||
|
// route level code-splitting
|
||||
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||
|
// which is lazy-loaded when the route is visited.
|
||||
|
component: () => |
||||
|
import(/* webpackChunkName: "about" */ "../views/About.vue"), |
||||
|
}, |
||||
|
{ |
||||
|
path: "/login", |
||||
|
name: "Login", |
||||
|
component: Login, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const router = createRouter({ |
||||
|
history: createWebHistory(process.env.BASE_URL), |
||||
|
routes, |
||||
|
}); |
||||
|
|
||||
|
export default router; |
@ -0,0 +1,6 @@ |
|||||
|
/* eslint-disable */ |
||||
|
declare module '*.vue' { |
||||
|
import type { DefineComponent } from 'vue' |
||||
|
const component: DefineComponent<{}, {}, any> |
||||
|
export default component |
||||
|
} |
@ -0,0 +1,10 @@ |
|||||
|
import { createStore } from "vuex"; |
||||
|
|
||||
|
export default createStore({ |
||||
|
state: { |
||||
|
|
||||
|
}, |
||||
|
mutations: {}, |
||||
|
actions: {}, |
||||
|
modules: {}, |
||||
|
}); |
@ -0,0 +1,5 @@ |
|||||
|
<template> |
||||
|
<div class="about"> |
||||
|
<h1>This is an about page</h1> |
||||
|
</div> |
||||
|
</template> |
@ -0,0 +1,32 @@ |
|||||
|
<template> |
||||
|
<div class="home"> |
||||
|
<n-layout> |
||||
|
<n-layout has-sider> |
||||
|
<n-layout-sider><Menu :menu="menu"></Menu></n-layout-sider> |
||||
|
<n-layout-content><router-view /></n-layout-content> |
||||
|
</n-layout> |
||||
|
</n-layout> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
import { NLayout, NLayoutSider, NLayoutContent } from "naive-ui"; |
||||
|
import Menu from "@/components/Menu.vue"; |
||||
|
import { ZeldaSideMenu } from "@/libs/menu.ts"; |
||||
|
|
||||
|
@Options({ |
||||
|
components: { |
||||
|
NLayout, |
||||
|
NLayoutSider, |
||||
|
NLayoutContent, |
||||
|
Menu, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
menu: ZeldaSideMenu, |
||||
|
}; |
||||
|
}, |
||||
|
}) |
||||
|
export default class Home extends Vue {} |
||||
|
</script> |
@ -0,0 +1,14 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<h3>kubernetes</h3> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
// import { defineComponent } from "vue"; |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
|
||||
|
@Options({}) |
||||
|
export default class Kubernetes extends Vue {} |
||||
|
</script> |
||||
|
<style></style> |
@ -0,0 +1,20 @@ |
|||||
|
<template> |
||||
|
<div></div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
import { NLayout, NLayoutSider, NLayoutContent } from "naive-ui"; |
||||
|
|
||||
|
@Options({ |
||||
|
components: { |
||||
|
NLayout, |
||||
|
NLayoutSider, |
||||
|
NLayoutContent, |
||||
|
}, |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}) |
||||
|
export default class Login extends Vue {} |
||||
|
</script> |
@ -0,0 +1,14 @@ |
|||||
|
<template> |
||||
|
<div id="zgroup"> |
||||
|
<h3>zgroup</h3> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
// import { defineComponent } from "vue"; |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
|
||||
|
@Options({}) |
||||
|
export default class ZGroup extends Vue {} |
||||
|
</script> |
||||
|
<style></style> |
@ -0,0 +1,13 @@ |
|||||
|
<template> |
||||
|
<div id="zproject"> |
||||
|
<h3>zproject</h3> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
|
||||
|
@Options({}) |
||||
|
export default class ZGroup extends Vue {} |
||||
|
</script> |
||||
|
<style></style> |
@ -0,0 +1,13 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<h3>zervice</h3> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
|
||||
|
@Options({}) |
||||
|
export default class ZGroup extends Vue {} |
||||
|
</script> |
||||
|
<style></style> |
@ -0,0 +1,40 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"target": "esnext", |
||||
|
"module": "esnext", |
||||
|
"strict": true, |
||||
|
"jsx": "preserve", |
||||
|
"importHelpers": true, |
||||
|
"moduleResolution": "node", |
||||
|
"experimentalDecorators": true, |
||||
|
"skipLibCheck": true, |
||||
|
"esModuleInterop": true, |
||||
|
"allowSyntheticDefaultImports": true, |
||||
|
"sourceMap": true, |
||||
|
"baseUrl": ".", |
||||
|
"types": [ |
||||
|
"webpack-env" |
||||
|
], |
||||
|
"paths": { |
||||
|
"@/*": [ |
||||
|
"src/*" |
||||
|
] |
||||
|
}, |
||||
|
"lib": [ |
||||
|
"esnext", |
||||
|
"dom", |
||||
|
"dom.iterable", |
||||
|
"scripthost" |
||||
|
] |
||||
|
}, |
||||
|
"include": [ |
||||
|
"src/**/*.ts", |
||||
|
"src/**/*.tsx", |
||||
|
"src/**/*.vue", |
||||
|
"tests/**/*.ts", |
||||
|
"tests/**/*.tsx" |
||||
|
], |
||||
|
"exclude": [ |
||||
|
"node_modules" |
||||
|
] |
||||
|
} |
@ -0,0 +1,23 @@ |
|||||
|
module.exports = { |
||||
|
lintOnSave: false, |
||||
|
devServer: { |
||||
|
proxy: { |
||||
|
'^/api': { |
||||
|
target: 'http://192.168.0.31:30300', |
||||
|
changeOrigin: true, |
||||
|
pathRewrite: {} |
||||
|
}, |
||||
|
'^/auth': { |
||||
|
target: 'http://192.168.0.31:30300', |
||||
|
changeOrigin: true, |
||||
|
pathRewrite: {} |
||||
|
}, |
||||
|
'/git': { |
||||
|
target: 'http://192.168.0.31:30300', |
||||
|
changeOrigin: true, |
||||
|
pathRewrite: {} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
|
Loading…
Reference in new issue