feat: 初始化 ConfTemplate 云原生配置文件生成器
- Vue 3 + Element Plus + Monaco Editor 技术栈 - 支持 NGINX、Redis、MySQL、K8s Deployment、K8s Service 五个组件 - 侧边栏搜索过滤、动态表单联动、实时代码预览 - 一键复制/下载/重置，localStorage 状态持久化 - 纯前端静态页面，零后端依赖
This commit is contained in:
cnbugs
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">
|
||||
<el-icon :size="28"><Setting /></el-icon>
|
||||
<h1>ConfTemplate</h1>
|
||||
</div>
|
||||
<p class="subtitle">云原生配置文件生成器</p>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索中间件..."
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
size="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="nav-list">
|
||||
<template v-for="cat in filteredCategories" :key="cat.name">
|
||||
<div class="nav-category">
|
||||
<el-icon><component :is="cat.icon" /></el-icon>
|
||||
<span>{{ cat.name }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="itemId in cat.items"
|
||||
:key="itemId"
|
||||
class="nav-item"
|
||||
:class="{ active: modelValue === itemId }"
|
||||
@click="$emit('update:modelValue', itemId)"
|
||||
>
|
||||
<el-icon><component :is="schemas[itemId].icon" /></el-icon>
|
||||
<div class="nav-item-info">
|
||||
<span class="nav-item-name">{{ schemas[itemId].name }}</span>
|
||||
<span class="nav-item-desc">{{ schemas[itemId].description }}</span>
|
||||
</div>
|
||||
<el-tag size="small" type="info">{{ schemas[itemId].format }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="filteredCategories.length === 0" class="no-results">
|
||||
<el-empty description="未找到匹配的中间件" :image-size="60" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<el-text size="small" type="info">v1.0.0 · 纯前端生成</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { schemas, categories } from '../schemas'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
})
|
||||
|
||||
defineEmits(['update:modelValue'])
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const filteredCategories = computed(() => {
|
||||
const q = searchQuery.value.toLowerCase().trim()
|
||||
if (!q) return categories
|
||||
|
||||
return categories
|
||||
.map((cat) => ({
|
||||
...cat,
|
||||
items: cat.items.filter((id) => {
|
||||
const s = schemas[id]
|
||||
return (
|
||||
s.name.toLowerCase().includes(q) ||
|
||||
s.description.toLowerCase().includes(q) ||
|
||||
s.category.toLowerCase().includes(q) ||
|
||||
id.toLowerCase().includes(q)
|
||||
)
|
||||
}),
|
||||
}))
|
||||
.filter((cat) => cat.items.length > 0)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
height: 100vh;
|
||||
background: #1a1a2e;
|
||||
color: #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 16px 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.search-box :deep(.el-input__wrapper) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-box :deep(.el-input__inner) {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.search-box :deep(.el-input__inner::placeholder) {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.nav-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.nav-list::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.nav-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 8px 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
margin: 2px 0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: rgba(102, 126, 234, 0.15);
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.nav-item.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 60%;
|
||||
background: #667eea;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.nav-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nav-item-name {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-item-name {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.nav-item-desc {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user