535 lines
19 KiB
Vue
535 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<div class="vpn-server-config">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<!-- 左侧服务器列表 -->
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-card shadow="hover">
|
|||
|
|
<div class="server-list">
|
|||
|
|
<div
|
|||
|
|
v-for="server in serverList"
|
|||
|
|
:key="server.server_id"
|
|||
|
|
class="server-item"
|
|||
|
|
:class="{ active: selectedServer?.server_id === server.server_id }"
|
|||
|
|
@click="selectServer(server)"
|
|||
|
|
>
|
|||
|
|
<div class="server-info">
|
|||
|
|
<div class="server-name">{{ server.name }}</div>
|
|||
|
|
<div class="server-ip">{{ server.server_ip }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="server-actions">
|
|||
|
|
<el-button type="danger" size="small" text @click.stop="deleteServer(server.server_id)">
|
|||
|
|
删除
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-empty v-if="serverList.length === 0" description="暂无服务器配置" />
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<!-- 右侧编辑表单 -->
|
|||
|
|
<el-col :span="16">
|
|||
|
|
<el-card shadow="hover" v-if="selectedServer">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>编辑服务器配置</span>
|
|||
|
|
<el-button type="success" @click="saveConfig">保存配置</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<el-form :model="selectedServer" label-width="120px" size="default">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="服务器名称">
|
|||
|
|
<el-input v-model="selectedServer.name" placeholder="请输入服务器名称" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="服务器ID">
|
|||
|
|
<el-input v-model="selectedServer.server_id" placeholder="请输入服务器ID" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="服务器IP">
|
|||
|
|
<el-input v-model="selectedServer.server_ip" placeholder="请输入服务器IP" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="UDP端口">
|
|||
|
|
<el-input-number v-model="selectedServer.udp_port" :min="1" :max="65535" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="TCP端口">
|
|||
|
|
<el-input-number v-model="selectedServer.tcp_port" :min="1" :max="65535" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="协议类型">
|
|||
|
|
<el-select v-model="selectedServer.protocol" placeholder="请选择协议">
|
|||
|
|
<el-option label="TCP" :value="1" />
|
|||
|
|
<el-option label="UDP" :value="2" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="IP类型">
|
|||
|
|
<el-select v-model="selectedServer.ip_type" placeholder="请选择IP类型">
|
|||
|
|
<el-option label="IPv4" :value="4" />
|
|||
|
|
<el-option label="IPv6" :value="6" />
|
|||
|
|
<el-option label="IPv4/IPv6" :value="46" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="DNS服务器">
|
|||
|
|
<el-input v-model="selectedServer.dns_server" placeholder="请输入DNS服务器" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="加密算法">
|
|||
|
|
<el-select v-model="selectedServer.encryption" placeholder="请选择加密算法">
|
|||
|
|
<el-option label="AES-128-GCM" value="aes-128-gcm" />
|
|||
|
|
<el-option label="AES-192-GCM" value="aes-192-gcm" />
|
|||
|
|
<el-option label="AES-256-GCM" value="aes-256-gcm" />
|
|||
|
|
<el-option label="SM4-GCM" value="SM4-GCM" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="摘要算法">
|
|||
|
|
<el-select v-model="selectedServer.hash" placeholder="请选择摘要算法">
|
|||
|
|
<el-option label="SHA256" value="sha256" />
|
|||
|
|
<el-option label="SHA512" value="sha512" />
|
|||
|
|
<el-option label="MD5" value="md5" />
|
|||
|
|
<el-option label="SM3" value="sm3" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="最大设备数">
|
|||
|
|
<el-input-number v-model="selectedServer.user_max_device" :min="1" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="空闲时长(秒)">
|
|||
|
|
<el-input-number v-model="selectedServer.duration_time" :min="1" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-form-item label="IPv4地址池">
|
|||
|
|
<el-select
|
|||
|
|
v-model="selectedServer.ipv4_address_pool"
|
|||
|
|
placeholder="请选择IPv4地址池"
|
|||
|
|
clearable
|
|||
|
|
filterable
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="pool in addressPools"
|
|||
|
|
:key="pool.pool_name"
|
|||
|
|
:label="`${pool.pool_name} (${pool.config.ipv4_address_pool.start_ip} - ${pool.config.ipv4_address_pool.end_ip}/${pool.config.ipv4_address_pool.prefix})`"
|
|||
|
|
:value="pool.pool_name"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="IPv6地址池">
|
|||
|
|
<el-select
|
|||
|
|
v-model="selectedServer.ipv6_address_pool"
|
|||
|
|
placeholder="请选择IPv6地址池"
|
|||
|
|
clearable
|
|||
|
|
filterable
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="pool in addressPools"
|
|||
|
|
:key="pool.pool_name"
|
|||
|
|
:label="`${pool.pool_name} (${pool.config.ipv6_address_pool.start_ip} - ${pool.config.ipv6_address_pool.end_ip}/${pool.config.ipv6_address_pool.prefix})`"
|
|||
|
|
:value="pool.pool_name"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="隧道类型">
|
|||
|
|
<el-select
|
|||
|
|
v-model="selectedServer.tunnel"
|
|||
|
|
placeholder="请选择隧道类型"
|
|||
|
|
clearable
|
|||
|
|
filterable
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="tunnel in tunnelConfigs"
|
|||
|
|
:key="tunnel.tunnel_name"
|
|||
|
|
:label="`${tunnel.tunnel_name} (MTU: IPv4=${tunnel.config.ipv4_mtu}, IPv6=${tunnel.config.ipv6_mtu}, 限速: ↑${tunnel.config.upload_limit}Kbps/↓${tunnel.config.download_limit}Kbps)`"
|
|||
|
|
:value="tunnel.tunnel_name"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="服务器信息">
|
|||
|
|
<el-input
|
|||
|
|
v-model="selectedServer.server_info"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
placeholder="请输入服务器信息"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="允许用户">
|
|||
|
|
<el-select
|
|||
|
|
v-model="user_select_ids"
|
|||
|
|
placeholder="请选择允许的用户"
|
|||
|
|
multiple
|
|||
|
|
filterable
|
|||
|
|
collapse-tags
|
|||
|
|
collapse-tags-tooltip
|
|||
|
|
:max-collapse-tags="3"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="user in user_select_opts"
|
|||
|
|
:key="user.value"
|
|||
|
|
:label="user.label"
|
|||
|
|
:value="user.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<el-card shadow="hover" v-else>
|
|||
|
|
<el-empty description="请选择要编辑的服务器" />
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, reactive, onMounted } from 'vue';
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|||
|
|
import {getAllDefaultUsers} from '@/api/user';
|
|||
|
|
import { GetVPNServerConfigHandler, SetVPNServerConfigHandler, DeleteVPNServerHandler, GetVPNAddressPoolHandler, GetVPNTunnelConfigHandler } from '@/api/vpn';
|
|||
|
|
|
|||
|
|
interface UserID {
|
|||
|
|
id: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface StringValue {
|
|||
|
|
value: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface UserIDBindIP {
|
|||
|
|
user_id: number;
|
|||
|
|
ip: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface AddressPool {
|
|||
|
|
start_ip: string;
|
|||
|
|
end_ip: string;
|
|||
|
|
prefix: number;
|
|||
|
|
dns_ip: StringValue[];
|
|||
|
|
ip_bind: UserIDBindIP[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface AddressPoolConfig {
|
|||
|
|
ipv4_address_pool: AddressPool;
|
|||
|
|
ipv6_address_pool: AddressPool;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface AddressPoolRequest {
|
|||
|
|
pool_name: string;
|
|||
|
|
config: AddressPoolConfig;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface TunnelConfig {
|
|||
|
|
tunnel_name: string;
|
|||
|
|
auto_ipv4: boolean;
|
|||
|
|
auto_ipv6: boolean;
|
|||
|
|
ipv4_address: string;
|
|||
|
|
ipv6_address: string;
|
|||
|
|
ipv4_mtu: number;
|
|||
|
|
ipv6_mtu: number;
|
|||
|
|
upload_limit: number;
|
|||
|
|
download_limit: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface TunnelRequestAndResponse {
|
|||
|
|
tunnel_name: string;
|
|||
|
|
config: TunnelConfig;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface VPNRouter {
|
|||
|
|
network: string;
|
|||
|
|
gateway: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface ServerConfig {
|
|||
|
|
name: string;
|
|||
|
|
server_id: string;
|
|||
|
|
server_ip: string;
|
|||
|
|
server_info: string;
|
|||
|
|
udp_port: number;
|
|||
|
|
tcp_port: number;
|
|||
|
|
protocol: number;
|
|||
|
|
ip_type: number;
|
|||
|
|
ipv4_address_pool: string;
|
|||
|
|
ipv6_address_pool: string;
|
|||
|
|
dns_server: string;
|
|||
|
|
tunnel: string;
|
|||
|
|
allow_user_id: UserID[];
|
|||
|
|
encryption: string;
|
|||
|
|
hash: string;
|
|||
|
|
user_max_device: number;
|
|||
|
|
duration_time: number;
|
|||
|
|
ipv4_router: VPNRouter[];
|
|||
|
|
ipv6_router: VPNRouter[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const serverList = ref<ServerConfig[]>([]);
|
|||
|
|
const selectedServer = ref<ServerConfig | null>(null);
|
|||
|
|
const addressPools = ref<AddressPoolRequest[]>([]);
|
|||
|
|
const tunnelConfigs = ref<TunnelRequestAndResponse[]>([]);
|
|||
|
|
const user_select_opts = ref<Array<{value: number, label: string}>>([]);
|
|||
|
|
const user_select_ids = ref<number[]>([]);
|
|||
|
|
// 获取服务器配置列表
|
|||
|
|
const getServerConfigs = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await GetVPNServerConfigHandler();
|
|||
|
|
serverList.value = response.data;
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('获取服务器配置失败');
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取地址池列表
|
|||
|
|
const getAddressPools = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await GetVPNAddressPoolHandler();
|
|||
|
|
addressPools.value = response.data;
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('获取地址池列表失败');
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取隧道配置列表
|
|||
|
|
const getTunnelConfigs = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await GetVPNTunnelConfigHandler();
|
|||
|
|
tunnelConfigs.value = response.data;
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('获取隧道配置列表失败');
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 选择服务器
|
|||
|
|
const selectServer = (server: ServerConfig) => {
|
|||
|
|
selectedServer.value = { ...server };
|
|||
|
|
// 确保allow_user_id是用户ID数组
|
|||
|
|
if (server.allow_user_id && server.allow_user_id.length > 0) {
|
|||
|
|
/**
|
|||
|
|
* Extracts the id property from an item object
|
|||
|
|
* @param {Object} item - The item object containing an id property
|
|||
|
|
* @returns {*} The value of the item's id property
|
|||
|
|
*/
|
|||
|
|
user_select_ids.value = server.allow_user_id.map(item => item.id);
|
|||
|
|
} else {
|
|||
|
|
selectedServer.value.allow_user_id = [];
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 添加服务器
|
|||
|
|
const addServer = () => {
|
|||
|
|
const newServer: ServerConfig = {
|
|||
|
|
name: "新服务器",
|
|||
|
|
server_id: "",
|
|||
|
|
server_ip: "",
|
|||
|
|
server_info: "",
|
|||
|
|
udp_port: 1194,
|
|||
|
|
tcp_port: 443,
|
|||
|
|
protocol: 2,
|
|||
|
|
ip_type: 4,
|
|||
|
|
ipv4_address_pool: "10.8.0.0/24",
|
|||
|
|
ipv6_address_pool: "",
|
|||
|
|
dns_server: "8.8.8.8",
|
|||
|
|
tunnel: "tun",
|
|||
|
|
allow_user_id: [],
|
|||
|
|
encryption: "aes-256-gcm",
|
|||
|
|
hash: "sha256",
|
|||
|
|
user_max_device: 5,
|
|||
|
|
duration_time: 300,
|
|||
|
|
ipv4_router: [],
|
|||
|
|
ipv6_router: []
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
serverList.value.push(newServer);
|
|||
|
|
selectServer(newServer);
|
|||
|
|
ElMessage.success('已添加新服务器');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 删除服务器
|
|||
|
|
const deleteServer = async (serverId: string) => {
|
|||
|
|
try {
|
|||
|
|
await ElMessageBox.confirm('确定要删除此服务器配置吗？', '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
await DeleteVPNServerHandler({ server_id: serverId });
|
|||
|
|
|
|||
|
|
const index = serverList.value.findIndex(server => server.server_id === serverId);
|
|||
|
|
if (index > -1) {
|
|||
|
|
serverList.value.splice(index, 1);
|
|||
|
|
if (selectedServer.value?.server_id === serverId) {
|
|||
|
|
selectedServer.value = null;
|
|||
|
|
}
|
|||
|
|
ElMessage.success('删除成功');
|
|||
|
|
}
|
|||
|
|
} catch (error: any) {
|
|||
|
|
if (error !== 'cancel') {
|
|||
|
|
ElMessage.error('删除失败');
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 保存配置
|
|||
|
|
const saveConfig = async () => {
|
|||
|
|
if (!selectedServer.value) return;
|
|||
|
|
|
|||
|
|
// 转换数据格式，确保与后端API兼容
|
|||
|
|
const configData = { ...selectedServer.value };
|
|||
|
|
// 将allow_user_id转换为后端期望的格式
|
|||
|
|
configData.allow_user_id = user_select_ids.value.map(id => ({ id: id }));
|
|||
|
|
|
|||
|
|
let req = {
|
|||
|
|
server_id: selectedServer.value.server_id,
|
|||
|
|
server_ip: selectedServer.value.server_ip,
|
|||
|
|
server_info: selectedServer.value.server_info,
|
|||
|
|
config: configData
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
let resp = await SetVPNServerConfigHandler(req);
|
|||
|
|
if (resp["code"] !== 0) {
|
|||
|
|
ElMessage.error(resp["message"]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
ElMessage.success('配置保存成功');
|
|||
|
|
//获取最新数据
|
|||
|
|
getServerConfigs();
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('保存配置失败');
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const GetAllDefaultUsers = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await getAllDefaultUsers();
|
|||
|
|
if (response['code'] !== 0) {
|
|||
|
|
console.error('获取默认用户失败:', response["message"]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
user_select_opts.value.length = 0;
|
|||
|
|
for (let i = 0; i < response.data.length; i++) {
|
|||
|
|
let user = response.data[i];
|
|||
|
|
if (user.type === 0) {
|
|||
|
|
user_select_opts.value.push({
|
|||
|
|
value: user.id,
|
|||
|
|
label: user.name
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//console.log("user_select_opts:", user_select_opts.value);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取默认用户失败:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 组件挂载时获取数据
|
|||
|
|
onMounted(() => {
|
|||
|
|
getServerConfigs();
|
|||
|
|
getAddressPools();
|
|||
|
|
getTunnelConfigs();
|
|||
|
|
GetAllDefaultUsers();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.vpn-server-config {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server-list {
|
|||
|
|
max-height: 600px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 12px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
border: 1px solid #e4e7ed;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server-item:hover {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
border-color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server-item.active {
|
|||
|
|
background-color: #ecf5ff;
|
|||
|
|
border-color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server-name {
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server-ip {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server-actions {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-form {
|
|||
|
|
padding: 20px 0;
|
|||
|
|
}
|
|||
|
|
</style>
|