k8s管理系统项目前端-workflow
k8s管理系统项目前端-workflow<template>
<!-- 新的 div 容器，使用flex布局对齐内容 -->
<div class="deployment-header" style="flex: 1">
<div class="left-section">
<span>命名空间：</span>
<el-select v-model="selectedNamespace" placeholder="请选择">
<el-option
v-for="namespace in namespaces"
:key="namespace"
:label="namespace"
:value="namespace">
</el-option>
</el-select>
</div>
<!-- 移动的刷新按钮，保留在右 ...
k8s管理系统项目前端-user
k8s管理系统项目前端-user一、userView<template>
<div class="container">
<!-- 第一部分: 头部 -->
<div class="header shadow">
<div class="left-group">
<el-button disabled type="primary" @click="createUser">
<span style="vertical-align: middle"> 创建 </span>
</el-button>
<el-button type="primary" @click="transferDialogVisible = true">
<span style="vertical-align: middle"> 添加到组 </span>
</el-button>
&l ...
k8s管理系统项目前端-summary
k8s管理系统项目前端-summary<template>
<div class="demo-collapse">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="集群资源" name="1">
<el-row :gutter="20">
<el-col :span="8">
<el-card class="box-card" shadow="hover">
<div ref="echartsRefNode" class="echarts-container"></div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box- ...
k8s管理系统项目前端-storage
k8s管理系统项目前端-storage一、configmap<template>
<!-- 新的 div 容器，使用flex布局对齐内容 -->
<div class="deployment-header" style="flex: 1">
<div class="left-section">
<span>命名空间：</span>
<el-select v-model="selectedNamespace" placeholder="请选择">
<el-option
v-for="namespace in namespaces"
:key="namespace"
:label="namespace"
:value="namespace">
</el-option>
</el-select>
</div>
<!-- 移动的 ...
k8s管理系统项目前端-cluster
k8s管理系统项目前端-cluster一、namespace<template>
<div class="container">
<!-- 第一部分: 头部 -->
<div class="header shadow">
<div class="left-group">
<el-button type="primary" @click="goToCreateNamespace()">
<el-icon><EditPen /></el-icon>
<span style="vertical-align: middle"> 创建 </span>
</el-button>
<el-input placeholder="请输入内容" v-model="searchText" class="search-input" @input="handleInput">
<templ ...
k8s管理系统项目前端-loadbalance
k8s管理系统项目前端-loadbalance一、ingress开发<template>
<!-- 新的 div 容器，使用flex布局对齐内容 -->
<div class="deployment-header" style="flex: 1">
<div class="left-section">
<span>命名空间：</span>
<el-select v-model="selectedNamespace" placeholder="请选择">
<el-option
v-for="namespace in namespaces"
:key="namespace"
:label="namespace"
:value="namespace">
</el-option>
</el-select>
</div>
<!-- ...
k8s管理系统项目前端-1
k8s管理系统项目前端-1前端使用vue3框架以及element-plus组件完成，依赖以下组件：
xterm命令行终端模拟器
nprogress浏览器顶部的进度条
jwt token生成和校验组件
json-editor-vue3/codemirror-editor-vue3代码编辑器，用于编辑k8s资源YAML
echarts画图组件，如柱状图、饼图等
一、框架搭建1、初始化Vue项目1） 创建vue3项目
vue create k8s-platform-fe
2）关闭语法检查配置文件，关闭语法检测，设置端口号
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
devServer:{
host: '0.0.0.0',//监听地址
port: 3000, // 启动端口号
open: true // 启动后是否自动打开网页
},
transpileDependencies ...
k8s管理系统项目前端-1
k8s管理系统项目前端-1前端使用vue3框架以及element-plus组件完成，依赖以下组件：
xterm命令行终端模拟器
nprogress浏览器顶部的进度条
jwt token生成和校验组件
json-editor-vue3/codemirror-editor-vue3代码编辑器，用于编辑k8s资源YAML
echarts画图组件，如柱状图、饼图等
一、框架搭建1、初始化Vue项目1） 创建vue3项目
vue create k8s-platform-fe
2）关闭语法检查配置文件，关闭语法检测，设置端口号
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
devServer:{
host: '0.0.0.0',//监听地址
port: 3000, // 启动端口号
open: true // 启动后是否自动打开网页
},
transpileDependencies ...
vue3左侧菜单隐藏某选项
根据router显示左侧菜单栏隐藏某个菜单选项在写k8s管理平台的时候遇到一个问题，我的左侧菜单栏是通过route路径获取的
<el-menu class="aside-menu"
router
:default-active="$route.path"
:collapse="isCollapse"
background-color="#131b27"
text-color="#bfcbd9"
active-text-color="#20a0ff">
下面是我router目录下index.js的路由
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/login',
name: 'login',
component: LoginView,
...
Vue状态管理
Vue状态管理前端每个页面访问后端数据的时候都需要token，那么所有组件都需要依赖token这个数据，所以就需要将token找个一个共享的存储，让其他组件都能访问到它，和服务端的session功能类似，如何实现？
一、共享内存第一种方式最直接：共享内存，直接开辟一个变量，全局都可以访问到了，类似于后端的全局变量
1、全局注入使用到 provide() 函数注入到根实例, 从而提供全局变量功能
<script setup>
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "@/components/HelloWorld.vue";
import { ref, provide } from "vue";
// 如果的变量可以是响应式的
const count = ref(0);
provide(/* 注入名 */ "count", /* 值 */ count);
</script>
通过inject获取父组件注入的变量
<sc ...
