feat(console): 添加控制台UI界面及功能组件
实现BLS项目控制台UI界面，包含以下主要功能： - 项目选择器组件，支持项目筛选和选择 - 控制台组件，支持命令输入和日志显示 - 调试区域组件，展示调试信息 - 响应式布局设计，适配PC和移动端 - 日志管理功能，限制最多1000条记录 - 更新路由配置和全局样式
This commit is contained in:
278
src/frontend/components/ProjectSelector.vue
Normal file
278
src/frontend/components/ProjectSelector.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div class="project-selector">
|
||||
<!-- 组件标题 -->
|
||||
<div class="selector-header">
|
||||
<h2>项目选择</h2>
|
||||
</div>
|
||||
|
||||
<!-- 项目列表 -->
|
||||
<div class="project-list">
|
||||
<div
|
||||
v-for="project in projects"
|
||||
:key="project.id"
|
||||
class="project-item"
|
||||
:class="{ 'project-selected': selectedProjectId === project.id }"
|
||||
@click="selectProject(project)"
|
||||
>
|
||||
<!-- 项目状态指示器 -->
|
||||
<div class="project-status" :class="`status-${project.status}`"></div>
|
||||
|
||||
<!-- 项目信息 -->
|
||||
<div class="project-info">
|
||||
<div class="project-name">{{ project.name }}</div>
|
||||
<div class="project-description">{{ project.description }}</div>
|
||||
<div class="project-meta">
|
||||
<span class="project-type" :class="`type-${project.type}`">
|
||||
{{ project.type === 'backend' ? '后端' : '前端' }}
|
||||
</span>
|
||||
<span class="project-status-text">{{ getStatusText(project.status) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择指示器 -->
|
||||
<div class="project-select-indicator" v-if="selectedProjectId === project.id">
|
||||
<span class="select-icon">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 定义props和emits
|
||||
const props = defineProps({
|
||||
selectedProjectId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['project-selected']);
|
||||
|
||||
// 模拟项目数据
|
||||
const projects = ref([
|
||||
{
|
||||
id: 'proj-1',
|
||||
name: '用户管理系统',
|
||||
type: 'backend',
|
||||
description: '基于Node.js的用户管理后端服务',
|
||||
status: 'running'
|
||||
},
|
||||
{
|
||||
id: 'proj-2',
|
||||
name: '数据可视化平台',
|
||||
type: 'frontend',
|
||||
description: '基于Vue.js的数据可视化前端应用',
|
||||
status: 'running'
|
||||
},
|
||||
{
|
||||
id: 'proj-3',
|
||||
name: '订单处理系统',
|
||||
type: 'backend',
|
||||
description: '高性能订单处理后端服务',
|
||||
status: 'stopped'
|
||||
},
|
||||
{
|
||||
id: 'proj-4',
|
||||
name: '移动端应用',
|
||||
type: 'frontend',
|
||||
description: '基于React Native的移动端应用',
|
||||
status: 'error'
|
||||
},
|
||||
{
|
||||
id: 'proj-5',
|
||||
name: 'API网关',
|
||||
type: 'backend',
|
||||
description: '微服务架构的API网关',
|
||||
status: 'running'
|
||||
},
|
||||
{
|
||||
id: 'proj-6',
|
||||
name: '管理后台',
|
||||
type: 'frontend',
|
||||
description: '基于Vue 3的管理后台系统',
|
||||
status: 'running'
|
||||
}
|
||||
]);
|
||||
|
||||
// 选择项目
|
||||
const selectProject = (project) => {
|
||||
emit('project-selected', project);
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
running: '运行中',
|
||||
stopped: '已停止',
|
||||
error: '错误'
|
||||
};
|
||||
return statusMap[status] || status;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
background-color: #252526;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #3e3e42;
|
||||
}
|
||||
|
||||
.selector-header h2 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 项目列表 */
|
||||
.project-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: #333333;
|
||||
border: 1px solid #444444;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.project-item:hover {
|
||||
background-color: #3a3a3a;
|
||||
border-color: #4285f4;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.project-item.project-selected {
|
||||
background-color: #2c3e50;
|
||||
border-color: #4285f4;
|
||||
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
|
||||
}
|
||||
|
||||
/* 项目状态指示器 */
|
||||
.project-status {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
background-color: #34a853;
|
||||
}
|
||||
|
||||
.status-stopped {
|
||||
background-color: #fbbc05;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: #ea4335;
|
||||
}
|
||||
|
||||
/* 项目信息 */
|
||||
.project-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
margin-bottom: 0.2rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: 0.8rem;
|
||||
color: #b0b0b0;
|
||||
margin-bottom: 0.3rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-type {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.type-backend {
|
||||
background-color: #1e3a2a;
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.type-frontend {
|
||||
background-color: #2d1b4e;
|
||||
color: #c084fc;
|
||||
}
|
||||
|
||||
.project-status-text {
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 选择指示器 */
|
||||
.project-select-indicator {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #4285f4;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
margin-left: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.project-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.project-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.project-list::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.project-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user