1879 lines
47 KiB
Vue
1879 lines
47 KiB
Vue
<template>
|
|
<div class="container-detail-container">
|
|
<div class="page-header">
|
|
<div class="left">
|
|
<h2 class="title">容器详情</h2>
|
|
<el-tag
|
|
:type="getStatusType(containerInfo.state)"
|
|
effect="dark"
|
|
class="status-tag"
|
|
>
|
|
<span class="status-dot" :class="getStatusDotClass(containerInfo.state)"></span>
|
|
{{ getStatusText(containerInfo.state) }}
|
|
</el-tag>
|
|
</div>
|
|
<div class="actions">
|
|
<el-button @click="goBack" :icon="Back">返回</el-button>
|
|
<el-button type="primary" @click="refreshData" :icon="Refresh">刷新数据</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 容器信息卡片 -->
|
|
<div class="container-info">
|
|
<div class="info-card main-info">
|
|
<div class="card-title">
|
|
<el-icon><Box /></el-icon>
|
|
<span>基本信息</span>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="info-item">
|
|
<div class="info-label">容器ID</div>
|
|
<div class="info-value">{{ containerInfo.container_id || '未知' }}</div>
|
|
</div>
|
|
<!-- <div class="info-item">
|
|
<div class="info-label">容器名称</div>
|
|
<div class="info-value">{{ containerInfo.name || '未知' }}</div>
|
|
</div> -->
|
|
<div class="info-item">
|
|
<div class="info-label">用户ID</div>
|
|
<div class="info-value">{{ containerInfo.user_id || '未知' }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">价格</div>
|
|
<div class="info-value highlight">{{ containerInfo.pay || '0' }} 元</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card server-info">
|
|
<div class="card-title">
|
|
<el-icon><Connection /></el-icon>
|
|
<span>服务器信息</span>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="info-item">
|
|
<div class="info-label">服务器IP</div>
|
|
<div class="info-value">{{ containerInfo.server_ip || '未知' }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">创建时间</div>
|
|
<div class="info-value">{{ containerInfo.created_at || '未知' }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">到期时间</div>
|
|
<div class="info-value highlight">{{ containerInfo.become_time || '未知' }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">所属套餐</div>
|
|
<div class="info-value">{{ containerInfo.plan_name || '未知' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card resource-info">
|
|
<div class="card-title">
|
|
<el-icon><CpuIcon /></el-icon>
|
|
<span>资源配置</span>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="info-item">
|
|
<div class="info-label">内存限制</div>
|
|
<div class="info-value">{{ containerInfo.memory_limit || '0' }} MB</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">CPU限制</div>
|
|
<div class="info-value">{{ containerInfo.cpu_limit || '0' }} 核</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">存储限制</div>
|
|
<div class="info-value">{{ containerInfo.storage_limit || '0' }} GB</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">带宽</div>
|
|
<div class="info-value">{{ containerInfo.network_mode || 'bridge' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="info-card access-info">
|
|
<div class="card-title">
|
|
<el-icon><Key /></el-icon>
|
|
<span>访问信息</span>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="info-item">
|
|
<div class="info-label">容器端口</div>
|
|
<div class="info-value">{{ containerInfo.container_port || '80' }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">主机端口</div>
|
|
<div class="info-value">{{ containerInfo.host_port || '8080' }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">访问地址</div>
|
|
<div class="info-value">
|
|
<span v-if="containerInfo.server_ip && containerInfo.host_port">
|
|
http://{{ containerInfo.server_ip }}:{{ containerInfo.host_port }}
|
|
</span>
|
|
<span v-else>未配置</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="info-card system-info">
|
|
<div class="card-title">
|
|
<el-icon><Setting /></el-icon>
|
|
<span>系统信息</span>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="info-item">
|
|
<div class="info-label">容器镜像</div>
|
|
<div class="info-value">{{ containerInfo.image || 'nginx:latest' }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">容器IP</div>
|
|
<div class="info-value">{{ containerInfo.container_ip || '未分配' }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">状态</div>
|
|
<div class="info-value">
|
|
<el-tag :type="getStatusType(containerInfo.state)">{{ getStatusText(containerInfo.state) }}</el-tag>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons">
|
|
<el-button
|
|
type="primary"
|
|
:disabled="!buttonLogic.canOpen(containerInfo.state)"
|
|
@click="handleOpen"
|
|
>
|
|
<el-icon><VideoPlay /></el-icon>开通
|
|
</el-button>
|
|
<el-button
|
|
type="success"
|
|
:disabled="!buttonLogic.canStart(containerInfo.state)"
|
|
@click="handleStart"
|
|
>
|
|
<el-icon><VideoPlay /></el-icon>开机
|
|
</el-button>
|
|
<el-button
|
|
type="warning"
|
|
:disabled="!buttonLogic.canStop(containerInfo.state)"
|
|
@click="handleStop"
|
|
>
|
|
<el-icon><VideoPause /></el-icon>关机
|
|
</el-button>
|
|
<el-button
|
|
type="info"
|
|
:disabled="!buttonLogic.canPause(containerInfo.state)"
|
|
@click="handlePause"
|
|
>
|
|
<el-icon><VideoPause /></el-icon>暂停
|
|
</el-button>
|
|
<el-button
|
|
type="info"
|
|
:disabled="!buttonLogic.canRestart(containerInfo.state)"
|
|
@click="handleRestart"
|
|
>
|
|
<el-icon><RefreshRight /></el-icon>重启
|
|
</el-button>
|
|
<el-button
|
|
type="warning"
|
|
:disabled="!buttonLogic.canReinstall(containerInfo.state)"
|
|
@click="openReinstallDialog"
|
|
>
|
|
<el-icon><Refresh /></el-icon>重装
|
|
</el-button>
|
|
<el-button
|
|
type="danger"
|
|
:disabled="!buttonLogic.canRemove(containerInfo.state)"
|
|
@click="handleRemove"
|
|
>
|
|
<el-icon><Delete /></el-icon>删除
|
|
</el-button>
|
|
<el-button
|
|
:disabled="!buttonLogic.canConsole(containerInfo.state)"
|
|
@click="handleConsole"
|
|
>
|
|
<el-icon><Monitor /></el-icon>连接控制台
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
:disabled="!buttonLogic.canFileManager(containerInfo.state)"
|
|
@click="handleFileManager"
|
|
>
|
|
<el-icon><Folder /></el-icon>文件管理
|
|
</el-button>
|
|
<el-button
|
|
type="warning"
|
|
:disabled="!buttonLogic.canClearTraffic(containerInfo.state)"
|
|
@click="handleClearTraffic"
|
|
>
|
|
<el-icon><DeleteFilled /></el-icon>清除流量
|
|
</el-button>
|
|
</div>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="content-wrapper">
|
|
<el-tabs type="border-card" class="main-tabs" v-model="containerActiveTabName" @tab-click="handleTabClick">
|
|
<!-- 容器操作日志 -->
|
|
<el-tab-pane label="容器操作日志" name="0">
|
|
<div class="tab-header">
|
|
<h3 class="tab-title">操作日志</h3>
|
|
</div>
|
|
|
|
<el-table
|
|
v-loading="logsLoading"
|
|
:data="logsList"
|
|
border
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column prop="log_id" label="ID" width="80" />
|
|
<el-table-column prop="action_type" label="操作类型" width="150" />
|
|
<el-table-column prop="created_at" label="时间" min-width="180" />
|
|
<el-table-column prop="action_info" label="操作详情" min-width="300" />
|
|
</el-table>
|
|
|
|
<el-empty v-if="logsList.length === 0" description="暂无日志数据" />
|
|
|
|
<div class="pagination-container" v-if="logsList.length > 0">
|
|
<el-pagination
|
|
background
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="logsTotal"
|
|
:current-page="logsPage"
|
|
:page-size="logsPageSize"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
@size-change="handleLogsSizeChange"
|
|
@current-change="handleLogsPageChange"
|
|
/>
|
|
</div>
|
|
</el-tab-pane>
|
|
|
|
<!-- 网络信息 -->
|
|
<el-tab-pane label="网络信息" name="1">
|
|
<div class="tab-header">
|
|
<h3 class="tab-title">网络信息</h3>
|
|
<el-button
|
|
type="primary"
|
|
@click="showAddNetworkDialog = true"
|
|
:icon="Plus"
|
|
:disabled="!buttonLogic.canAddNetwork(containerInfo.state)"
|
|
>
|
|
添加网络
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-table
|
|
v-loading="networkLoading"
|
|
:data="networkList"
|
|
border
|
|
style="width: 100%"
|
|
class="data-table"
|
|
>
|
|
<el-table-column prop="connect_id" label="ID" width="80" />
|
|
<el-table-column prop="connect_type" label="网络类型" width="120" />
|
|
<el-table-column prop="server_port" label="外部访问端口" width="140" />
|
|
<el-table-column prop="container_port" label="内部端口" width="120" />
|
|
<el-table-column prop="container_ip" label="容器IP" min-width="130" />
|
|
<el-table-column prop="floating_ip" label="浮动IP" min-width="130" />
|
|
<el-table-column prop="domain" label="域名" min-width="150" show-overflow-tooltip />
|
|
<el-table-column prop="created_at" label="创建时间" min-width="160" />
|
|
<el-table-column label="操作" width="120" fixed="right">
|
|
<template #default="scope">
|
|
<el-button
|
|
type="danger"
|
|
size="small"
|
|
@click="handleDeleteNetwork(scope.row)"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-empty v-if="networkList.length === 0" description="暂无数据" />
|
|
</el-tab-pane>
|
|
|
|
<!-- 数据卷信息 -->
|
|
<!-- <el-tab-pane label="数据卷信息" name="2">
|
|
<div class="tab-header">
|
|
<h3 class="tab-title">数据卷信息</h3>
|
|
</div>
|
|
|
|
<el-table
|
|
v-loading="volumeInfoLoading"
|
|
:data="volumeInfoList"
|
|
border
|
|
style="width: 100%"
|
|
class="data-table"
|
|
>
|
|
<el-table-column prop="id" label="ID" width="80" />
|
|
<el-table-column prop="size" label="空间大小(MB)" width="140">
|
|
<template #default="{ row }">
|
|
{{ row.size != null && row.size !== '' ? `${row.size} MB` : '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="mount_path" label="挂载路径" min-width="200" />
|
|
<el-table-column prop="created_at" label="创建时间" min-width="160" />
|
|
</el-table>
|
|
|
|
<el-empty v-if="volumeInfoList.length === 0" description="暂无数据" />
|
|
</el-tab-pane> -->
|
|
|
|
|
|
</el-tabs>
|
|
</div>
|
|
|
|
<!-- 添加网络对话框 -->
|
|
<el-dialog
|
|
v-model="showAddNetworkDialog"
|
|
title="添加网络配置"
|
|
width="600px"
|
|
destroy-on-close
|
|
>
|
|
<el-form :model="networkForm" label-width="120px" :rules="networkRules" ref="networkFormRef">
|
|
<el-form-item label="访问类型" prop="type">
|
|
<el-select v-model="networkForm.type" placeholder="请选择访问类型" @change="handleTypeChange">
|
|
<el-option label="端口转发 (port_forward)" value="port_forward" />
|
|
<el-option label="反向代理 (nginx)" value="nginx" />
|
|
<el-option label="浮动IP (floating_ip)" value="floating_ip" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<!-- port_forward 类型需要容器内部端口 -->
|
|
<el-form-item
|
|
v-if="networkForm.type === 'port_forward'"
|
|
label="容器内部端口"
|
|
prop="container_port"
|
|
>
|
|
<el-input-number
|
|
v-model="networkForm.container_port"
|
|
:min="1"
|
|
:max="65535"
|
|
placeholder="请输入容器内部端口"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<!-- nginx 类型需要容器内部端口和域名 -->
|
|
<template v-if="networkForm.type === 'nginx'">
|
|
<el-form-item label="容器内部端口" prop="container_port">
|
|
<el-input-number
|
|
v-model="networkForm.container_port"
|
|
:min="1"
|
|
:max="65535"
|
|
placeholder="请输入容器内部端口"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="域名" prop="domain">
|
|
<el-input v-model="networkForm.domain" placeholder="请输入域名" />
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<!-- floating_ip 类型不需要额外参数 -->
|
|
<el-alert
|
|
v-if="networkForm.type === 'floating_ip'"
|
|
title="浮动IP类型无需额外配置参数"
|
|
type="info"
|
|
:closable="false"
|
|
show-icon
|
|
/>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="showAddNetworkDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="submitAddNetwork" :loading="addingNetwork">
|
|
确认
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 重装容器对话框 -->
|
|
<el-dialog
|
|
v-model="showReinstallDialog"
|
|
title="重装容器"
|
|
width="600px"
|
|
destroy-on-close
|
|
>
|
|
<div class="reinstall-warning">
|
|
<el-alert
|
|
title="警告：重装将清除容器内所有数据，请确保已备份重要文件！"
|
|
type="error"
|
|
:closable="false"
|
|
show-icon
|
|
/>
|
|
</div>
|
|
|
|
<el-form label-width="120px" style="margin-top: 20px;">
|
|
<el-form-item label="当前镜像">
|
|
<el-input
|
|
v-model="containerInfo.image"
|
|
readonly
|
|
placeholder="当前使用的镜像"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="选择新镜像" required>
|
|
<el-select
|
|
v-model="selectedImageId"
|
|
placeholder="请选择要重装的镜像"
|
|
style="width: 100%"
|
|
:loading="mirrorLoading"
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="mirror in mirrorList"
|
|
:key="mirror.image_id"
|
|
:label="`${mirror.show_name}`"
|
|
:value="mirror.image_id"
|
|
>
|
|
<div class="mirror-option">
|
|
<div class="mirror-name">{{ mirror.show_name }}</div>
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="selectedImageId">
|
|
<el-alert
|
|
:title="`选中镜像: ${getMirrorDisplayName(selectedImageId)}`"
|
|
type="info"
|
|
:closable="false"
|
|
show-icon
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="showReinstallDialog = false">取消</el-button>
|
|
<el-button
|
|
type="danger"
|
|
@click="confirmReinstall"
|
|
:disabled="!selectedImageId"
|
|
>
|
|
确认重装
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
import {
|
|
Back,
|
|
Refresh,
|
|
Monitor,
|
|
Cpu as CpuIcon,
|
|
Setting,
|
|
VideoPlay,
|
|
VideoPause,
|
|
RefreshRight,
|
|
Delete,
|
|
Plus,
|
|
Key,
|
|
Connection,
|
|
Box,
|
|
Document,
|
|
Folder,
|
|
DeleteFilled,
|
|
Upload,
|
|
FolderAdd,
|
|
CloseBold,
|
|
DCaret,
|
|
CaretRight,
|
|
DocumentAdd,
|
|
DocumentChecked,
|
|
Download,
|
|
Grid,
|
|
List
|
|
} from '@element-plus/icons-vue';
|
|
import * as echarts from 'echarts';
|
|
import {
|
|
getOneContainer,
|
|
selectServerPlan,
|
|
selectServer,
|
|
getContainerStatus,
|
|
openContainer,
|
|
stopContainer,
|
|
startContainer,
|
|
pauseContainer,
|
|
reinstallC,
|
|
clearContainerTraffic,
|
|
restartContainer,
|
|
getContainerLog,
|
|
getNetworkList,
|
|
deleteContainerNetwork,
|
|
addNetwork,
|
|
deleteContainer,
|
|
getVolumeList,
|
|
connectConsole
|
|
|
|
} from '@/utils/acs/server'
|
|
|
|
import {
|
|
Mirrorinfo,
|
|
getMirrorList
|
|
} from '@/utils/acs/mirror'
|
|
import{
|
|
backUserContainer
|
|
} from '@/utils/acs/user'
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const containerInfo = ref({});
|
|
const loading = ref(false);
|
|
|
|
// 标签页相关
|
|
const containerActiveTabName = ref('0'); // 默认选中第一个标签
|
|
|
|
// 网络信息管理
|
|
const networkList = ref([]);
|
|
const networkLoading = ref(false);
|
|
const showAddNetworkDialog = ref(false);
|
|
|
|
// 数据卷信息管理
|
|
const volumeInfoList = ref([]);
|
|
const volumeInfoLoading = ref(false);
|
|
|
|
// 重装对话框管理
|
|
const showReinstallDialog = ref(false);
|
|
const mirrorList = ref([]);
|
|
const mirrorLoading = ref(false);
|
|
const selectedImageId = ref('');
|
|
|
|
|
|
|
|
|
|
// 处理标签页点击
|
|
const handleTabClick = (tab) => {
|
|
localStorage.setItem('containerDetailActiveTab', tab.index);
|
|
};
|
|
|
|
// 网络配置管理
|
|
const networkForm = reactive({
|
|
type: 'port_forward',
|
|
container_port: null,
|
|
domain: ''
|
|
});
|
|
|
|
// 动态验证规则
|
|
const networkRules = computed(() => {
|
|
const rules = {
|
|
type: [
|
|
{ required: true, message: '请选择访问类型', trigger: 'change' }
|
|
]
|
|
};
|
|
|
|
if (networkForm.type === 'port_forward' || networkForm.type === 'nginx') {
|
|
rules.container_port = [
|
|
{ required: true, message: '请输入容器内部端口', trigger: 'blur' },
|
|
{ type: 'number', min: 1, max: 65535, message: '请输入有效的端口(1-65535)', trigger: 'blur' }
|
|
];
|
|
}
|
|
|
|
if (networkForm.type === 'nginx') {
|
|
rules.domain = [
|
|
{ required: true, message: '请输入域名', trigger: 'blur' },
|
|
{ pattern: /^[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$/, message: '请输入有效的域名', trigger: 'blur' }
|
|
];
|
|
}
|
|
|
|
return rules;
|
|
});
|
|
const networkFormRef = ref(null);
|
|
const addingNetwork = ref(false);
|
|
|
|
// 处理访问类型变化
|
|
const handleTypeChange = (newType) => {
|
|
// 清空表单数据
|
|
networkForm.container_port = null;
|
|
networkForm.domain = '';
|
|
|
|
// 清除验证错误
|
|
if (networkFormRef.value) {
|
|
networkFormRef.value.clearValidate();
|
|
}
|
|
};
|
|
|
|
// 日志管理
|
|
const logsList = ref([]);
|
|
const logsLoading = ref(false);
|
|
const logsTotal = ref(0);
|
|
const logsPage = ref(1);
|
|
const logsPageSize = ref(10);
|
|
|
|
// 初始化数据
|
|
onMounted(() => {
|
|
if (route.query.container_id) {
|
|
// 恢复上次选中的标签页
|
|
const savedTab = localStorage.getItem('containerDetailActiveTab');
|
|
if (savedTab) {
|
|
containerActiveTabName.value = savedTab;
|
|
}
|
|
|
|
fetchContainerInfo();
|
|
fetchLogsList();
|
|
fetchNetworkList();
|
|
fetchVolumeInfoList();
|
|
} else {
|
|
ElMessage.error('缺少容器ID参数');
|
|
goBack();
|
|
}
|
|
});
|
|
|
|
// 获取容器信息
|
|
const fetchContainerInfo = async () => {
|
|
loading.value = true;
|
|
try {
|
|
//获取单个容器详情信息
|
|
const res = await getOneContainer({container_id:route.query.container_id})
|
|
console.log("获取容器信息",res)
|
|
if(res.data.code == 200){
|
|
//通过套餐id获取套餐名称
|
|
const planRes = await selectServerPlan({plan_id:res.data.data.plan_id,server_type:'dockerContainer'})
|
|
//查询服务器
|
|
const serverRes = await selectServer({server_id:res.data.data.server_id})
|
|
//获取容器状态
|
|
const statusRes = await getContainerStatus({container_id:route.query.container_id})
|
|
console.log("获取容器状态",statusRes)
|
|
//获取容器镜像
|
|
const imageRes = await Mirrorinfo({image_id:res.data.data.image_id,server_type:'dockerContainer'})
|
|
containerInfo.value = {
|
|
...res.data.data,
|
|
server_ip:serverRes.data.data.server_ip,
|
|
plan_name:planRes.data.data.name,
|
|
cpu_limit:planRes.data.data.cpu,
|
|
memory_limit:planRes.data.data.memory,
|
|
storage_limit:planRes.data.data.disk,
|
|
state:statusRes.data.data.data.state == false ? 6 : 5 || res.data.data.container_state,
|
|
network_mode:planRes.data.data.threshold_rx+'mbps'+'/'+planRes.data.data.threshold_tx+'mbps',
|
|
image:imageRes.data.data.show_name
|
|
}
|
|
}
|
|
|
|
ElMessage.success('容器信息加载成功');
|
|
} catch (error) {
|
|
console.error('获取容器信息出错:', error);
|
|
ElMessage.error('获取容器信息出错');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// 开通容器
|
|
const handleOpen = async () => {
|
|
const res = await openContainer({container_id:route.query.container_id})
|
|
console.log("开通容器",res)
|
|
if(res.data.code == 200){
|
|
ElMessage.success(res.data.data);
|
|
}else{
|
|
ElMessage.error(res.data.data);
|
|
}
|
|
}
|
|
|
|
// 获取网络信息
|
|
const fetchNetworkList = async () => {
|
|
networkLoading.value = true;
|
|
try {
|
|
const res = await getNetworkList(route.query.container_id);
|
|
console.log("获取网络信息",res);
|
|
if(res.status == 200){
|
|
networkList.value = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('获取网络信息出错:', error);
|
|
ElMessage.error('获取网络信息出错');
|
|
} finally {
|
|
networkLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 获取数据卷信息
|
|
const fetchVolumeInfoList = async () => {
|
|
volumeInfoLoading.value = true;
|
|
try {
|
|
const res = await getVolumeList({instance_id:route.query.container_id,page:1,count:10});
|
|
console.log("获取数据卷信息",res);
|
|
if(res.data.code == 200){
|
|
volumeInfoList.value = res.data.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('获取数据卷信息出错:', error);
|
|
ElMessage.error('获取数据卷信息出错');
|
|
} finally {
|
|
volumeInfoLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 获取镜像列表
|
|
const fetchMirrorList = async () => {
|
|
mirrorLoading.value = true;
|
|
console.log("获取镜像列表",containerInfo.value.server_id)
|
|
try {
|
|
const res = await getMirrorList(containerInfo.value.server_id);
|
|
console.log("获取镜像列表",res);
|
|
if(res.data.code == 200){
|
|
mirrorList.value = res.data.data;
|
|
// 默认选择当前镜像
|
|
// if (containerInfo.value.image_id) {
|
|
// selectedImageId.value = containerInfo.value.image_id;
|
|
// }
|
|
}
|
|
} catch (error) {
|
|
console.error('获取镜像列表出错:', error);
|
|
ElMessage.error('获取镜像列表出错');
|
|
} finally {
|
|
mirrorLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 获取日志列表
|
|
const fetchLogsList = async () => {
|
|
logsLoading.value = true;
|
|
try {
|
|
const res = await getContainerLog({container_id:route.query.container_id,page:logsPage.value,count:logsPageSize.value})
|
|
console.log("获取日志列表",res)
|
|
if(res.data.code == 200){
|
|
logsList.value = res.data.data
|
|
logsTotal.value = res.data.data.length
|
|
}
|
|
} catch (error) {
|
|
console.error('获取日志列表出错:', error);
|
|
ElMessage.error('获取日志列表出错');
|
|
} finally {
|
|
logsLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 处理日志分页
|
|
const handleLogsSizeChange = (size) => {
|
|
logsPageSize.value = size;
|
|
logsPage.value = 1;
|
|
fetchLogsList();
|
|
};
|
|
|
|
const handleLogsPageChange = (page) => {
|
|
logsPage.value = page;
|
|
fetchLogsList();
|
|
};
|
|
|
|
// 添加网络配置
|
|
const submitAddNetwork = async () => {
|
|
if (!networkFormRef.value) return;
|
|
|
|
await networkFormRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
addingNetwork.value = true;
|
|
try {
|
|
// 构建 proxy_data 参数
|
|
let proxy_data = [{
|
|
type: networkForm.type
|
|
}];
|
|
|
|
// 根据类型添加对应参数
|
|
if (networkForm.type === 'port_forward') {
|
|
proxy_data[0].container_port = networkForm.container_port;
|
|
proxy_data[0].container_id = route.query.container_id;
|
|
} else if (networkForm.type === 'nginx') {
|
|
proxy_data[0].container_port = networkForm.container_port;
|
|
proxy_data[0].container_id = route.query.container_id;
|
|
proxy_data[0].domain = networkForm.domain;
|
|
}
|
|
proxy_data = JSON.stringify(proxy_data)
|
|
// floating_ip 类型不需要额外参数
|
|
const res = await addNetwork({
|
|
container_id: route.query.container_id,
|
|
proxy_data: proxy_data
|
|
});
|
|
|
|
console.log("添加网络配置结果：", res);
|
|
if (res.data.code == 200) {
|
|
ElMessage.success(res.data.msg || '添加网络配置成功');
|
|
showAddNetworkDialog.value = false;
|
|
fetchNetworkList(); // 重新获取网络列表
|
|
|
|
// 重置表单
|
|
resetNetworkForm();
|
|
} else {
|
|
ElMessage.error(res.data.msg || '添加网络配置失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('添加网络配置出错:', error);
|
|
ElMessage.error('添加网络配置出错');
|
|
} finally {
|
|
addingNetwork.value = false;
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
// 重置网络表单
|
|
const resetNetworkForm = () => {
|
|
networkForm.type = 'port_forward';
|
|
networkForm.container_port = null;
|
|
networkForm.domain = '';
|
|
|
|
if (networkFormRef.value) {
|
|
networkFormRef.value.resetFields();
|
|
}
|
|
};
|
|
|
|
// 删除网络
|
|
const handleDeleteNetwork = async (network) => {
|
|
try {
|
|
ElMessageBox.confirm(`确定要删除该网络配置吗?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
const res = await deleteContainerNetwork({container_id: route.query.container_id,connect_id: String(network.connect_id)});
|
|
console.log("删除网络结果：", res);
|
|
if (res.data.code == 200) {
|
|
ElMessage.success(res.data.msg || '删除成功');
|
|
fetchNetworkList();
|
|
} else {
|
|
ElMessage.error(res.data.msg || '删除失败');
|
|
}
|
|
}).catch(() => {});
|
|
} catch (error) {
|
|
console.error('删除网络出错:', error);
|
|
ElMessage.error('删除网络出错');
|
|
}
|
|
};
|
|
|
|
// 返回上一页
|
|
const goBack = () => {
|
|
router.go(-1);
|
|
};
|
|
|
|
// 刷新数据
|
|
const refreshData = () => {
|
|
fetchContainerInfo();
|
|
fetchLogsList();
|
|
fetchNetworkList();
|
|
fetchVolumeInfoList();
|
|
};
|
|
|
|
// 启动容器
|
|
const handleStart = async () => {
|
|
try {
|
|
const res = await startContainer({container_id: route.query.container_id});
|
|
console.log("启动容器结果：", res);
|
|
if (res.data.code == 200) {
|
|
ElMessage.success(res.data.data || '启动指令已发送');
|
|
} else {
|
|
ElMessage.error(res.data.data || '启动失败');
|
|
}
|
|
setTimeout(() => {
|
|
fetchContainerInfo();
|
|
}, 2000);
|
|
} catch (error) {
|
|
console.error('启动容器出错:', error);
|
|
ElMessage.error('启动容器出错');
|
|
}
|
|
};
|
|
|
|
// 停止容器
|
|
const handleStop = async () => {
|
|
try {
|
|
ElMessageBox.confirm('确定要停止该容器吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
const res = await stopContainer({container_id: route.query.container_id});
|
|
console.log("停止容器结果：", res);
|
|
if (res.data.code == 200) {
|
|
ElMessage.success(res.data.data || '停止指令已发送');
|
|
} else {
|
|
ElMessage.error(res.data.data || '停止失败');
|
|
}
|
|
setTimeout(() => {
|
|
fetchContainerInfo();
|
|
}, 2000);
|
|
}).catch(() => {});
|
|
} catch (error) {
|
|
console.error('停止容器出错:', error);
|
|
ElMessage.error('停止容器出错');
|
|
}
|
|
};
|
|
|
|
// 重启容器
|
|
const handleRestart = async () => {
|
|
try {
|
|
ElMessageBox.confirm('确定要重启该容器吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
const res = await restartContainer({container_id: route.query.container_id});
|
|
console.log("重启容器结果：", res);
|
|
if (res.data.code == 200) {
|
|
ElMessage.success(res.data.data || '重启指令已发送');
|
|
} else {
|
|
ElMessage.error(res.data.data || '重启失败');
|
|
}
|
|
setTimeout(() => {
|
|
fetchContainerInfo();
|
|
}, 2000);
|
|
}).catch(() => {});
|
|
} catch (error) {
|
|
console.error('重启容器出错:', error);
|
|
ElMessage.error('重启容器出错');
|
|
}
|
|
};
|
|
|
|
// 暂停容器
|
|
const handlePause = async () => {
|
|
try {
|
|
ElMessageBox.confirm('确定要暂停该容器吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
const res = await pauseContainer({container_id: route.query.container_id});
|
|
console.log("暂停容器结果：", res);
|
|
if (res.data.code == 200) {
|
|
ElMessage.success(res.data.data || '暂停指令已发送');
|
|
} else {
|
|
ElMessage.error(res.data.data || '暂停失败');
|
|
}
|
|
setTimeout(() => {
|
|
fetchContainerInfo();
|
|
}, 2000);
|
|
}).catch(() => {});
|
|
} catch (error) {
|
|
console.error('暂停容器出错:', error);
|
|
ElMessage.error('暂停容器出错');
|
|
}
|
|
};
|
|
|
|
// 打开重装对话框
|
|
const openReinstallDialog = async () => {
|
|
try {
|
|
// 获取镜像列表
|
|
await fetchMirrorList();
|
|
showReinstallDialog.value = true;
|
|
} catch (error) {
|
|
console.error('打开重装对话框出错:', error);
|
|
ElMessage.error('获取镜像列表失败');
|
|
}
|
|
};
|
|
|
|
// 确认重装
|
|
const confirmReinstall = async () => {
|
|
if (!selectedImageId.value) {
|
|
ElMessage.error('请选择要重装的镜像');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
ElMessageBox.confirm('确定要重装该容器吗？此操作将清除容器内所有数据！', '警告', {
|
|
confirmButtonText: '确定重装',
|
|
cancelButtonText: '取消',
|
|
type: 'primary'
|
|
}).then(async () => {
|
|
await handleReinstall();
|
|
}).catch(() => {});
|
|
} catch (error) {
|
|
console.error('确认重装出错:', error);
|
|
ElMessage.error('操作失败');
|
|
}
|
|
};
|
|
|
|
// 重装容器
|
|
const handleReinstall = async () => {
|
|
try {
|
|
const res = await reinstallC({
|
|
container_id: route.query.container_id,
|
|
image_id: selectedImageId.value
|
|
});
|
|
console.log("重装容器结果：", res);
|
|
if (res.data.code == 200) {
|
|
ElMessage.success(res.data.data.msg || '重装指令已发送');
|
|
showReinstallDialog.value = false;
|
|
setTimeout(() => {
|
|
fetchContainerInfo();
|
|
}, 3000);
|
|
} else {
|
|
ElMessage.error(res.data.msg || '重装失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('重装容器出错:', error);
|
|
ElMessage.error('重装容器出错');
|
|
}
|
|
};
|
|
|
|
// 获取镜像显示名称
|
|
const getMirrorDisplayName = (imageId) => {
|
|
const mirror = mirrorList.value.find(m => m.image_id === imageId);
|
|
return mirror ? `${mirror.show_name}` : '未知镜像';
|
|
};
|
|
|
|
// 清除流量
|
|
const handleClearTraffic = async () => {
|
|
try {
|
|
ElMessageBox.confirm('确定要清除该容器的流量统计吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
const res = await clearContainerTraffic({container_id: route.query.container_id});
|
|
console.log("清除流量结果：", res);
|
|
if (res.data.code == 200) {
|
|
ElMessage.success(res.data.msg || '流量统计已清除');
|
|
} else {
|
|
ElMessage.error(res.data.msg || '清除流量失败');
|
|
}
|
|
}).catch(() => {});
|
|
} catch (error) {
|
|
console.error('清除流量出错:', error);
|
|
ElMessage.error('清除流量出错');
|
|
}
|
|
};
|
|
|
|
// 文件管理
|
|
const handleFileManager = async () => {
|
|
try {
|
|
window.open('/servers/container/files?container_id='+route.query.container_id,'_blank')
|
|
} catch (error) {
|
|
console.error('打开文件管理出错:', error);
|
|
ElMessage.error('打开文件管理出错');
|
|
}
|
|
};
|
|
|
|
|
|
// 删除容器
|
|
const handleRemove = async () => {
|
|
try {
|
|
ElMessageBox.confirm('确定要删除该容器吗？此操作不可恢复！', '警告', {
|
|
confirmButtonText: '确定删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
// 这里应该调用删除容器的API
|
|
|
|
//对接删除
|
|
const res = await deleteContainer({container_id: route.query.container_id});
|
|
console.log("删除容器结果：", res);
|
|
// if (res.data.code == 200) {
|
|
// ElMessage.success(res.data.msg || '删除成功');
|
|
// } else {
|
|
// ElMessage.error(res.data.data.msg || '删除失败');
|
|
// }
|
|
|
|
ElMessage.success('删除指令已发送');
|
|
setTimeout(() => {
|
|
goBack();
|
|
}, 2000);
|
|
}).catch(() => {});
|
|
} catch (error) {
|
|
console.error('删除容器出错:', error);
|
|
ElMessage.error('删除容器出错');
|
|
}
|
|
};
|
|
|
|
// 打开终端
|
|
const handleConsole = async () => {
|
|
const res = await connectConsole({container_id: route.query.container_id});
|
|
window.open(`/servers/container/console?token=${res.data.data.data.token}&server_addr=${res.data.data.data.console_port}`,`_blank`);
|
|
};
|
|
|
|
// 获取状态类型
|
|
const getStatusType = (state) => {
|
|
// 0未支付 1未构建 2已构建 3未知 4已删除 5运行中 6关机
|
|
switch (state) {
|
|
case 0:
|
|
return 'warning'; // 未支付 - 橙色警告
|
|
case 1:
|
|
return 'info'; // 未构建 - 蓝色信息
|
|
case 2:
|
|
return 'success'; // 已构建 - 绿色成功
|
|
case 3:
|
|
return 'info'; // 未知 - 蓝色信息
|
|
case 4:
|
|
return 'danger'; // 已删除 - 红色危险
|
|
case 5:
|
|
return 'success'; // 运行中 - 绿色成功
|
|
case 6:
|
|
return 'danger'; // 关机 - 红色危险
|
|
default:
|
|
return 'info';
|
|
}
|
|
};
|
|
|
|
// 按钮启用/禁用逻辑函数
|
|
const buttonLogic = {
|
|
// 开通按钮：未支付或未构建时可用
|
|
canOpen: (state) => state === 0 || state === 1,
|
|
|
|
// 开机按钮：已构建但未运行时可用（状态2已构建，状态6关机）
|
|
canStart: (state) => state === 2 || state === 6,
|
|
|
|
// 关机按钮：运行中时可用
|
|
canStop: (state) => state === 5,
|
|
|
|
// 暂停按钮：运行中时可用
|
|
canPause: (state) => state === 5,
|
|
|
|
// 重启按钮：运行中时可用
|
|
canRestart: (state) => state === 5,
|
|
|
|
// 重装按钮：已构建、运行中、关机状态时可用，未构建和已删除时不可用
|
|
canReinstall: (state) => state !== 1 && state !== 4,
|
|
|
|
// 删除按钮：已构建、运行中、关机状态时可用，未构建和已删除时不可用
|
|
canRemove: (state) => state !== 1 && state !== 4,
|
|
|
|
// 控制台按钮：运行中时可用
|
|
canConsole: (state) => state === 5,
|
|
|
|
// 文件管理按钮：运行中时可用
|
|
canFileManager: (state) => state === 5,
|
|
|
|
// 清除流量按钮：始终可用（除了已删除状态）
|
|
canClearTraffic: (state) => state !== 4,
|
|
|
|
// 网络配置按钮：运行中时可用
|
|
canAddNetwork: (state) => state === 5
|
|
};
|
|
|
|
// 获取状态文本
|
|
const getStatusText = (state) => {
|
|
// 0未支付 1未构建 2已构建 3未知 4已删除 5运行中 6关机
|
|
switch (state) {
|
|
case 0:
|
|
return '未支付';
|
|
case 1:
|
|
return '未构建';
|
|
case 2:
|
|
return '已构建';
|
|
case 3:
|
|
return '未知';
|
|
case 4:
|
|
return '已删除';
|
|
case 5:
|
|
return '开机';
|
|
case 6:
|
|
return '关机';
|
|
default:
|
|
return '未知状态';
|
|
}
|
|
};
|
|
|
|
// 获取状态点样式类
|
|
const getStatusDotClass = (state) => {
|
|
// 运行中状态显示为在线（绿色），其他状态显示为离线（红色）
|
|
return state === 5 ? 'online' : 'offline';
|
|
};
|
|
|
|
// 组件卸载前清理
|
|
onBeforeUnmount(() => {
|
|
// 移除事件监听
|
|
// window.removeEventListener('resize', resizeCharts); // 移除此行
|
|
|
|
// 销毁图表实例 // 移除此行
|
|
// cpuChartInstance && cpuChartInstance.dispose(); // 移除此行
|
|
// memoryChartInstance && memoryChartInstance.dispose(); // 移除此行
|
|
// diskChartInstance && diskChartInstance.dispose(); // 移除此行
|
|
// networkChartInstance && networkChartInstance.dispose(); // 移除此行
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container-detail-container {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
min-height: calc(100vh - 120px);
|
|
}
|
|
|
|
/* 页面标题区域 */
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.page-header .left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.page-header .title {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
|
|
.status-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-dot.online {
|
|
background-color: #67C23A;
|
|
box-shadow: 0 0 6px rgba(103, 194, 58, 0.8);
|
|
}
|
|
|
|
.status-dot.offline {
|
|
background-color: #F56C6C;
|
|
box-shadow: 0 0 6px rgba(245, 108, 108, 0.8);
|
|
}
|
|
|
|
/* 容器信息卡片 */
|
|
.container-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.info-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
padding: 0;
|
|
overflow: hidden;
|
|
transition: all 0.3s;
|
|
border: 1px solid #ebeef5;
|
|
}
|
|
|
|
.info-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.card-title {
|
|
background-color: #f5f7fa;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #ebeef5;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-title .el-icon {
|
|
font-size: 18px;
|
|
color: #409EFF;
|
|
}
|
|
|
|
.info-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.info-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 13px;
|
|
color: #909399;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 15px;
|
|
color: #303133;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.info-value.highlight {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #409EFF;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.action-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.action-buttons .el-button {
|
|
margin: 0;
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* 主要内容区域 */
|
|
.content-wrapper {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.tab-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tab-title {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
|
|
/* 分页容器 */
|
|
.pagination-container {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* 对话框样式 */
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* 重装对话框样式 */
|
|
.reinstall-warning {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.mirror-option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mirror-name {
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
|
|
.mirror-detail {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media screen and (max-width: 1200px) {
|
|
.container-info {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.info-card.system-info {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.page-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
}
|
|
|
|
.container-info {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.info-card.system-info {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.action-buttons .el-button {
|
|
width: 100%;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
|
|
/* 监控图表相关样式 */
|
|
.date-filter {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.monitor-charts {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.chart-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.chart {
|
|
height: 300px;
|
|
}
|
|
|
|
/* 文件管理对话框样式 */
|
|
.file-manager-dialog .el-dialog__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.file-manager-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 24px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.path-display {
|
|
margin-left: 20px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-right .el-button {
|
|
color: white;
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.header-right .el-button:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.file-manager-container {
|
|
height: 85vh;
|
|
display: flex;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
/* 左侧文件树 */
|
|
.file-sidebar {
|
|
width: 300px;
|
|
background: #ffffff;
|
|
border-right: 1px solid #e9ecef;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sidebar-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.file-tree-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 8px;
|
|
}
|
|
|
|
.file-tree .el-tree-node__content {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.file-tree .el-tree-node__content:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.file-tree .el-tree-node:focus > .el-tree-node__content {
|
|
background-color: #e3f2fd;
|
|
}
|
|
|
|
.tree-node-content {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.node-icon {
|
|
margin-right: 8px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.folder-icon {
|
|
color: #ffd54f;
|
|
}
|
|
|
|
.file-icon {
|
|
color: #90a4ae;
|
|
}
|
|
|
|
.node-label {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: #495057;
|
|
}
|
|
|
|
.node-actions {
|
|
display: flex;
|
|
gap: 2px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 右侧内容区域 */
|
|
.content-area {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.content-tabs {
|
|
height: 100%;
|
|
}
|
|
|
|
.editor-tabs {
|
|
height: 100%;
|
|
}
|
|
|
|
.editor-tabs .el-tabs__content {
|
|
height: calc(100% - 40px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editor-tabs .el-tab-pane {
|
|
height: 100%;
|
|
}
|
|
|
|
/* 文件编辑器 */
|
|
.file-editor {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.editor-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.toolbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.file-info {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.toolbar-right {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.editor-content {
|
|
flex: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
.code-editor {
|
|
height: 100%;
|
|
}
|
|
|
|
.code-editor .el-textarea__inner {
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
border: none;
|
|
border-radius: 0;
|
|
resize: none;
|
|
background: #ffffff;
|
|
color: #212529;
|
|
}
|
|
|
|
.code-editor .el-textarea__inner:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* 目录视图 */
|
|
.directory-view {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.directory-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.directory-header h3 {
|
|
margin: 0;
|
|
color: #495057;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.view-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* 网格视图 */
|
|
.grid-view {
|
|
flex: 1;
|
|
padding: 20px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 16px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 16px 8px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.file-item:hover {
|
|
background: #f8f9fa;
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
.file-item:active {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.file-icon-large {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.file-name {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #495057;
|
|
word-break: break-all;
|
|
line-height: 1.3;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.file-details {
|
|
font-size: 11px;
|
|
color: #6c757d;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 列表视图 */
|
|
.list-view {
|
|
flex: 1;
|
|
padding: 0 20px 20px;
|
|
}
|
|
|
|
.directory-table .el-table__row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.directory-table .el-table__row:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
/* 欢迎页 */
|
|
.welcome-view {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
}
|
|
|
|
.welcome-content {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
padding: 40px;
|
|
}
|
|
|
|
.welcome-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.welcome-header h2 {
|
|
margin: 16px 0 8px;
|
|
color: #495057;
|
|
font-size: 28px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.welcome-header p {
|
|
color: #6c757d;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
.quick-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.action-card {
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.action-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
|
border-color: #409EFF;
|
|
}
|
|
|
|
.action-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.action-content span {
|
|
font-weight: 500;
|
|
color: #495057;
|
|
}
|
|
|
|
.breadcrumb-clickable {
|
|
cursor: pointer;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.breadcrumb-clickable:hover {
|
|
color: white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media screen and (max-width: 1200px) {
|
|
.file-sidebar {
|
|
width: 250px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.file-manager-container {
|
|
height: 75vh;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.file-sidebar {
|
|
width: 100%;
|
|
height: 200px;
|
|
border-right: none;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.content-area {
|
|
height: calc(100% - 200px);
|
|
}
|
|
|
|
.header-left {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.path-display {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.header-right {
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.grid-view {
|
|
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
|
gap: 12px;
|
|
padding: 16px;
|
|
}
|
|
}
|
|
</style>
|