chaos/chaos_it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(devices): 实现设备管理页面与添加设备功能

Browse Source 
- 移除设备列表页面的溢出滚动样式
- 引入设备类型服务并获取设备类型选项
- 新增添加设备模态框与表单组件
- 实现设备创建接口与表单数据验证逻辑
- 添加网络接口与IP配置的动态表单管理
- 创建可复用的模态框组件支持表单提交交互
This commit is contained in:
Chaos
2025-12-01 07:08:20 +08:00
parent e2374571d7
commit f973284140
8 changed files with 541 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/lib/components/form/AddDevice.svelte Normal file
View File

@@ -0,0 +1,238 @@
<script lang="ts">
import type { CreateDeviceRequest, Options } from '$lib/types/api.ts';
import { log } from '$lib/log.ts';
let {
deviceTypeOptions = [],
open = $bindable(false)
} = $props<{ deviceTypeOptions: Options[] , open: boolean}>();
log.info('device type options',deviceTypeOptions);
let formData = $state<CreateDeviceRequest>({
name: '',
typeId: null,
model: '',
manufacturer: '',
purchaseDate: '',
interfaces: []
});
// 错误信息状态
let errors = $state<Record<string, string>>({});
function addInterface() {
formData.interfaces.push({
name: '',
type: 1,
addressConfigs: []
});
}
function removeInterface(index: number) {
formData.interfaces.splice(index, 1);
}
function addAddressConfig(interfaceIndex: number) {
formData.interfaces[interfaceIndex].addressConfigs.push({
isPrimary: false,
isDhcp: false,
ipAddress: ''
});
}
function removeAddressConfig(interfaceIndex: number, configIndex: number) {
formData.interfaces[interfaceIndex].addressConfigs.splice(configIndex, 1);
}
function validate(): boolean {
let newErrors: Record<string, string> = {};
let isValid = true;
const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
const ipRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
// 基础字段验证
if (!formData.name) newErrors['name'] = '设备名称不能为空';
if (!formData.typeId) newErrors['typeId'] = '设备类型ID不能为空';
if (!formData.model) newErrors['model'] = '设备型号不能为空';
if (!formData.manufacturer) newErrors['manufacturer'] = '厂商不能为空';
// 嵌套验证
formData.interfaces.forEach((iface, i) => {
if (!iface.name) newErrors[`iface_${i}_name`] = '接口名称不能为空';
if (iface.macAddress && !macRegex.test(iface.macAddress)) {
newErrors[`iface_${i}_mac`] = 'MAC地址格式错误';
}
iface.addressConfigs.forEach((addr, j) => {
if (addr.ipAddress && !ipRegex.test(addr.ipAddress)) {
newErrors[`iface_${i}_addr_${j}_ip`] = 'IP地址格式错误';
}
});
});
if (Object.keys(newErrors).length > 0) {
errors = newErrors;
isValid = false;
} else {
errors = {};
}
return isValid;
}
// --- 【关键】导出方法供父组件调用 ---
export function submitAndGetPayload(): CreateDeviceRequest | null {
if (validate()) {
// 返回深拷贝的数据，防止后续修改影响
return $state.snapshot(formData);
}
return null; // 验证失败
}
</script>
<div class="space-y-8">
<div class="card bg-base-100 shadow-md border border-base-200">
<div class="card-body">
<h2 class="card-title text-primary">基础信息</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="form-control w-full">
<div class="label"><span class="label-text">设备名称 *</span></div>
<input type="text" bind:value={formData.name} class="input input-bordered w-full {errors.name ? 'input-error' : ''}" />
{#if errors.name}<div class="label"><span class="label-text-alt text-error">{errors.name}</span></div>{/if}
</label>
<label class="form-control w-full">
<div class="label"><span class="label-text">厂商 *</span></div>
<input type="text" bind:value={formData.manufacturer} class="input input-bordered w-full {errors.manufacturer ? 'input-error' : ''}" />
</label>
<label class="form-control w-full">
<div class="label"><span class="label-text">型号 *</span></div>
<input type="text" bind:value={formData.model} class="input input-bordered w-full {errors.model ? 'input-error' : ''}" />
</label>
<label class="form-control w-full">
<div class="label"><span class="label-text">设备类型 *</span></div>
<select
bind:value={formData.typeId}
class="select select-bordered w-full {errors.typeId ? 'select-error' : ''}"
>
<option disabled selected value={null}>请选择设备类型</option>
{#each deviceTypeOptions as opt (opt.value)}
<option value={Number(opt.value)}>{opt.label}</option>
{/each}
</select>
{#if errors.typeId}
<div class="label"><span class="label-text-alt text-error">{errors.typeId}</span></div>
{/if}
</label>
<label class="form-control w-full">
<div class="label"><span class="label-text">采购日期</span></div>
<input type="date" bind:value={formData.purchaseDate} class="input input-bordered w-full" />
</label>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-md border border-base-200">
<div class="card-body">
<div class="flex justify-between items-center mb-4">
<h2 class="card-title text-secondary">网络接口 (Interfaces)</h2>
<button class="btn btn-sm btn-outline btn-secondary" onclick={addInterface}>+ 添加接口</button>
</div>
{#each formData.interfaces as iface, i (i)}
<div class="collapse collapse-arrow border border-base-300 bg-base-100 mb-2">
<input type="checkbox" checked={true} />
<div class="collapse-title text-lg font-medium flex justify-between pr-12">
<span>接口 #{i + 1}: {iface.name || '(未命名)'}</span>
<button class="btn btn-xs btn-error z-10" onclick={() => removeInterface(i)}>删除</button>
</div>
<div class="collapse-content space-y-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
<label class="form-control">
<span class="label-text mb-1">接口名称 *</span>
<input type="text" bind:value={iface.name} class="input input-bordered input-sm {errors[`iface_${i}_name`] ? 'input-error' : ''}" />
{#if errors[`iface_${i}_name`]}<span class="text-xs text-error mt-1">{errors[`iface_${i}_name`]}</span>{/if}
</label>
<label class="form-control">
<span class="label-text mb-1">接口类型</span>
<select bind:value={iface.type} class="select select-bordered select-sm">
<option value={1}>物理口</option>
<option value={2}>聚合口</option>
<option value={3}>虚拟口</option>
</select>
</label>
<label class="form-control">
<span class="label-text mb-1">MAC 地址</span>
<input type="text" bind:value={iface.macAddress} placeholder="XX:XX:XX..." class="input input-bordered input-sm {errors[`iface_${i}_mac`] ? 'input-error' : ''}" />
{#if errors[`iface_${i}_mac`]}<span class="text-xs text-error mt-1">{errors[`iface_${i}_mac`]}</span>{/if}
</label>
</div>
<div class="bg-base-200 p-4 rounded-lg">
<div class="flex justify-between items-center mb-2">
<h4 class="text-sm font-bold opacity-70">IP / VLAN 配置</h4>
<button class="btn btn-xs btn-neutral" onclick={() => addAddressConfig(i)}>+ 添加 IP</button>
</div>
{#if iface.addressConfigs.length === 0}
<div class="text-xs text-center opacity-50 py-2">暂无 IP 配置</div>
{/if}
{#each iface.addressConfigs as addr, j (j)}
<div class="grid grid-cols-1 md:grid-cols-12 gap-2 items-end mb-2 border-b border-base-300 pb-2 last:border-0">
<div class="md:col-span-1">
<label class="label-text text-xs">VLAN</label>
<input type="number" bind:value={addr.vlanId} class="input input-bordered input-xs w-full" />
</div>
<div class="md:col-span-3">
<label class="label-text text-xs">IP地址</label>
<input type="text" bind:value={addr.ipAddress} class="input input-bordered input-xs w-full {errors[`iface_${i}_addr_${j}_ip`] ? 'input-error' : ''}" />
</div>
<div class="md:col-span-3">
<label class="label-text text-xs">子网掩码</label>
<input type="text" bind:value={addr.subnetMask} class="input input-bordered input-xs w-full" />
</div>
<div class="md:col-span-2 flex flex-col gap-1">
<label class="label cursor-pointer justify-start gap-2 p-0 h-6">
<input type="checkbox" bind:checked={addr.isPrimary} class="checkbox checkbox-xs" />
<span class="label-text text-xs">主IP</span>
</label>
<label class="label cursor-pointer justify-start gap-2 p-0 h-6">
<input type="checkbox" bind:checked={addr.isDhcp} class="checkbox checkbox-xs" />
<span class="label-text text-xs">DHCP</span>
</label>
</div>
<div class="md:col-span-1 flex justify-end">
<button class="btn btn-square btn-xs btn-ghost text-error" onclick={() => removeAddressConfig(i, j)}>✕</button>
</div>
</div>
{/each}
</div>
</div>
</div>
{/each}
</div>
</div>
<div class="join flex justify-center" >
<button class="btn btn-error join-item" onclick={onreset}>重置</button>
<button class="btn join-item" onclick={draft}>保存草稿</button>
<button class="btn btn-primary btn-wide join-item" onclick={submit}>提交</button>
</div>
</div>