From 9f48020dfd3e29d1c0049a3da9df3203c40bc264 Mon Sep 17 00:00:00 2001
From: yeg <1347747024@qq.com>
Date: 星期三, 26 八月 2026 17:13:17 +0800
Subject: [PATCH] Revert "feat(device): use adapter discovery backend"
---
src/views/DeviceCabinet.vue | 373 +++++++++++++++++++++++++++++-----------------------
1 files changed, 206 insertions(+), 167 deletions(-)
diff --git a/src/views/DeviceCabinet.vue b/src/views/DeviceCabinet.vue
index f3bfa16..db4c83e 100644
--- a/src/views/DeviceCabinet.vue
+++ b/src/views/DeviceCabinet.vue
@@ -1,198 +1,237 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import {
- changeDeviceAdapterStatus, createDeviceAdapter, discoverDeviceAdapter,
- getDeviceAdapterChannels, getDeviceAdapters, updateDeviceAdapter,
- type DetectionChannelRecord, type DeviceAdapterPayload, type DeviceAdapterRecord,
-} from '@/api/deviceAdapters'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { changeDeviceCabinetStatus, deleteDeviceCabinets, getDeviceCabinetList } from '@/api/deviceCabinets'
+import type { CabinetOnlineStatus, CabinetStatus, CabinetTestStatus, DeviceCabinetRecord } from '@/stores/deviceCabinets'
-const adapters = ref<DeviceAdapterRecord[]>([])
-const channels = ref<DetectionChannelRecord[]>([])
+interface FilterState {
+ device: string
+ dateRange: [string, string] | null
+ onlineStatus: string
+ testStatus: string
+ status: string
+}
+
+const router = useRouter()
+const onlineStatuses: CabinetOnlineStatus[] = ['在线', '离线']
+const testStatuses: CabinetTestStatus[] = ['测试中', '空闲']
+const statuses: CabinetStatus[] = ['启用', '禁用']
+const filters = reactive<FilterState>({ device: '', dateRange: null, onlineStatus: '', testStatus: '', status: '' })
+const records = ref<DeviceCabinetRecord[]>([])
const total = ref(0)
-const pageNum = ref(1)
-const pageSize = 10
-const selectedId = ref<number | null>(null)
const loading = ref(false)
-const channelLoading = ref(false)
const submittingId = ref<number | null>(null)
-const dialogVisible = ref(false)
-const saving = ref(false)
-const editingId = ref<number | null>(null)
-const form = reactive<DeviceAdapterPayload>({
- adapterCode: '', adapterName: '', adapterType: 'BTS', host: '', port: 502,
- pollIntervalMs: 5000, timezoneId: 'Asia/Hong_Kong', readOnly: true, remark: '',
-})
+const currentPage = ref(1)
+const pageSize = ref(10)
-async function loadAdapters() {
+const onlineStatusValues: Record<CabinetOnlineStatus, string> = { 在线: '0', 离线: '1' }
+const testStatusValues: Record<CabinetTestStatus, string> = { 空闲: '0', 测试中: '1', 待检测: '0' }
+const statusValues: Record<CabinetStatus, string> = { 启用: '0', 禁用: '1' }
+
+async function loadRecords(showResult = false) {
loading.value = true
try {
- const result = await getDeviceAdapters(pageNum.value, pageSize)
- adapters.value = result.rows
+ const result = await getDeviceCabinetList({
+ pageNum: currentPage.value,
+ pageSize: pageSize.value,
+ device: filters.device.trim() || undefined,
+ beginCreateTime: filters.dateRange?.[0] ? `${filters.dateRange[0]} 00:00:00` : undefined,
+ endCreateTime: filters.dateRange?.[1] ? `${filters.dateRange[1]} 23:59:59` : undefined,
+ onlineStatus: filters.onlineStatus && filters.onlineStatus !== '全部' ? onlineStatusValues[filters.onlineStatus as CabinetOnlineStatus] : undefined,
+ testStatus: filters.testStatus && filters.testStatus !== '全部' ? testStatusValues[filters.testStatus as CabinetTestStatus] : undefined,
+ status: filters.status && filters.status !== '全部' ? statusValues[filters.status as CabinetStatus] : undefined,
+ })
+ records.value = result.rows
total.value = result.total
- if (selectedId.value && !result.rows.some(item => item.adapterId === selectedId.value)) selectedId.value = null
- if (!selectedId.value && result.rows.length) selectedId.value = result.rows[0].adapterId
- await loadChannels()
+ if (showResult) ElMessage.success(`共找到 ${result.total} 个检测柜`)
} catch (error) {
- adapters.value = []
- channels.value = []
- ElMessage.error(error instanceof Error ? error.message : '设备适配器加载失败')
- } finally { loading.value = false }
-}
-
-async function loadChannels() {
- if (!selectedId.value) { channels.value = []; return }
- channelLoading.value = true
- try { channels.value = await getDeviceAdapterChannels(selectedId.value) }
- catch (error) {
- channels.value = []
- ElMessage.error(error instanceof Error ? error.message : '检测柜通道加载失败')
- } finally { channelLoading.value = false }
-}
-
-function resetForm() {
- Object.assign(form, {
- adapterCode: '', adapterName: '', adapterType: 'BTS', host: '', port: 502,
- pollIntervalMs: 5000, timezoneId: 'Asia/Hong_Kong', readOnly: true, remark: '',
- })
- editingId.value = null
-}
-function openCreate() { resetForm(); dialogVisible.value = true }
-function openEdit(item: DeviceAdapterRecord) {
- editingId.value = item.adapterId
- Object.assign(form, {
- adapterId: item.adapterId, adapterCode: item.adapterCode, adapterName: item.adapterName,
- adapterType: 'BTS', host: item.host, port: item.port, pollIntervalMs: item.pollIntervalMs,
- timezoneId: item.timezoneId, readOnly: true, remark: item.remark || '',
- })
- dialogVisible.value = true
-}
-
-async function saveAdapter() {
- if (!form.adapterCode.trim() || !form.adapterName.trim() || !form.host.trim()) {
- ElMessage.warning('请填写适配器编码、名称和主机')
- return
+ records.value = []
+ total.value = 0
+ ElMessage.error(error instanceof Error ? error.message : '检测柜列表加载失败')
+ } finally {
+ loading.value = false
}
- saving.value = true
+}
+
+function applySearch() {
+ currentPage.value = 1
+ loadRecords(true)
+}
+
+function resetSearch() {
+ Object.assign(filters, { device: '', dateRange: null, onlineStatus: '', testStatus: '', status: '' })
+ currentPage.value = 1
+ loadRecords()
+}
+
+function handlePageChange(page: number) {
+ currentPage.value = page
+ loadRecords()
+}
+
+function handleSizeChange(size: number) {
+ pageSize.value = size
+ currentPage.value = 1
+ loadRecords()
+}
+
+function createCabinet() {
+ router.push('/device-cabinet/new')
+}
+
+function editCabinet(id: number) {
+ router.push(`/device-cabinet/${id}/edit`)
+}
+
+async function changeStatus(item: DeviceCabinetRecord) {
+ const nextStatus: CabinetStatus = item.status === '启用' ? '禁用' : '启用'
try {
- const payload = { ...form, adapterId: editingId.value || undefined }
- if (editingId.value) await updateDeviceAdapter(payload)
- else await createDeviceAdapter(payload)
- dialogVisible.value = false
- ElMessage.success(editingId.value ? '设备适配器已更新' : '设备适配器已新增')
- await loadAdapters()
- } catch (error) { ElMessage.error(error instanceof Error ? error.message : '设备适配器保存失败') }
- finally { saving.value = false }
-}
-
-async function toggleStatus(item: DeviceAdapterRecord, enabled: boolean) {
- submittingId.value = item.adapterId
- try {
- await changeDeviceAdapterStatus(item.adapterId, enabled)
- ElMessage.success(enabled ? '设备适配器已启用' : '设备适配器已停用')
- await loadAdapters()
- } catch (error) { ElMessage.error(error instanceof Error ? error.message : '启停操作失败') }
- finally { submittingId.value = null }
-}
-
-function handleStatusChange(item: DeviceAdapterRecord, value: string | number | boolean) {
- toggleStatus(item, Boolean(value))
-}
-
-function handlePageChange(value: number) {
- pageNum.value = value
- loadAdapters()
-}
-
-async function discover(item: DeviceAdapterRecord) {
- submittingId.value = item.adapterId
- selectedId.value = item.adapterId
- try {
- const result = await discoverDeviceAdapter(item.adapterId)
- ElMessage.success(`发现 ${result.data.channelCount} 个检测柜通道`)
- await loadAdapters()
+ await ElMessageBox.confirm(
+ `确认${nextStatus}检测柜“${item.name}”吗？`,
+ `${nextStatus}确认`,
+ { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' },
+ )
+ submittingId.value = item.id
+ await changeDeviceCabinetStatus(item.id, nextStatus)
+ ElMessage.success(`检测柜已${nextStatus}`)
+ await loadRecords()
} catch (error) {
- await loadAdapters()
- ElMessage.error(error instanceof Error ? error.message : '设备发现失败')
- } finally { submittingId.value = null }
+ if (error !== 'cancel' && error !== 'close') {
+ ElMessage.error(error instanceof Error ? error.message : `${nextStatus}检测柜失败`)
+ }
+ } finally {
+ submittingId.value = null
+ }
}
-function selectAdapter(item: DeviceAdapterRecord) { selectedId.value = item.adapterId; loadChannels() }
-function formatTime(value: string | null) { return value ? new Date(value).toLocaleString() : '-' }
-function connectionLabel(value: string) { return { CONNECTED: '已连接', ERROR: '连接异常', DISCONNECTED: '未连接' }[value] || value }
-function onlineLabel(value: string) { return { ONLINE: '在线', OFFLINE: '离线', UNKNOWN: '未知' }[value] || value }
-onMounted(loadAdapters)
+async function deleteCabinet(item: DeviceCabinetRecord) {
+ try {
+ await ElMessageBox.confirm(
+ `删除后无法恢复，确认删除检测柜“${item.name}”吗？`,
+ '删除确认',
+ { type: 'warning', confirmButtonText: '确认删除', cancelButtonText: '取消' },
+ )
+ submittingId.value = item.id
+ await deleteDeviceCabinets(item.id)
+ if (records.value.length === 1 && currentPage.value > 1) currentPage.value -= 1
+ ElMessage.success('检测柜已删除')
+ await loadRecords()
+ } catch (error) {
+ if (error !== 'cancel' && error !== 'close') {
+ ElMessage.error(error instanceof Error ? error.message : '删除检测柜失败')
+ }
+ } finally {
+ submittingId.value = null
+ }
+}
+
+function testStatusClass(status: CabinetTestStatus) {
+ return { '待检测': 'pending', '测试中': 'running', '空闲': 'idle' }[status]
+}
+
+onMounted(() => loadRecords())
</script>
<template>
- <div class="adapter-page">
- <section class="adapter-panel">
- <header class="panel-heading">
- <div><i></i><strong>设备适配器实例</strong><span>{{ total }} INSTANCES</span></div>
- <button class="primary-button" type="button" @click="openCreate"><el-icon><Plus /></el-icon>新增</button>
- </header>
+ <div class="cabinet-page">
+ <section class="filter-panel" aria-label="检测柜查询条件">
+ <header class="section-heading"><div><i></i><strong>查询条件</strong><span>FILTER CONDITIONS</span></div><small>共 {{ total }} 个检测柜</small></header>
+ <div class="filter-grid">
+ <label><span>设备</span><el-input v-model="filters.device" clearable placeholder="输入IP、设备编码、MAC或名称" @keyup.enter="applySearch" /></label>
+ <label class="date-filter"><span>创建时间</span><el-date-picker v-model="filters.dateRange" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" unlink-panels /></label>
+ <label><span>在线状态</span><el-select v-model="filters.onlineStatus" clearable placeholder="全部状态"><el-option label="全部" value="全部" /><el-option v-for="item in onlineStatuses" :key="item" :label="item" :value="item" /></el-select></label>
+ <label><span>测试状态</span><el-select v-model="filters.testStatus" clearable placeholder="全部状态"><el-option label="全部" value="全部" /><el-option v-for="item in testStatuses" :key="item" :label="item" :value="item" /></el-select></label>
+ <label><span>状态</span><el-select v-model="filters.status" clearable placeholder="全部状态"><el-option label="全部" value="全部" /><el-option v-for="item in statuses" :key="item" :label="item" :value="item" /></el-select></label>
+ <div class="filter-actions"><button class="primary-button" type="button" @click="applySearch"><el-icon><Search /></el-icon>查询</button><button class="secondary-button" type="button" @click="resetSearch"><el-icon><RefreshLeft /></el-icon>重置</button></div>
+ </div>
+ </section>
+
+ <section class="result-panel">
+ <div class="result-toolbar"><div><i></i><strong>检测柜列表</strong><span>{{ total }} RESULTS · 按创建时间倒序</span></div><button class="primary-button" type="button" @click="createCabinet"><el-icon><Plus /></el-icon>手动添加</button></div>
<div v-loading="loading" class="table-wrap">
- <table class="adapter-table">
- <thead><tr><th>实例</th><th>端点</th><th>轮询</th><th>时区</th><th>连接状态</th><th>最近观测</th><th>最近错误</th><th>启用</th><th>操作</th></tr></thead>
+ <table>
+ <thead><tr><th>设备编码</th><th>IP</th><th>MAC</th><th>名称</th><th>制造商</th><th>型号</th><th>通道数</th><th>规格/容量</th><th>备注</th><th>在线状态</th><th>测试状态</th><th>当前测试</th><th class="action-column">操作</th></tr></thead>
<tbody>
- <tr v-for="item in adapters" :key="item.adapterId" :class="{ selected: selectedId === item.adapterId }" @click="selectAdapter(item)">
- <td><strong>{{ item.adapterName }}</strong><small>{{ item.adapterCode }} · {{ item.adapterType }} · 只读</small></td>
- <td class="mono">{{ item.host }}:{{ item.port }}</td><td>{{ item.pollIntervalMs / 1000 }} 秒</td><td>{{ item.timezoneId }}</td>
- <td><span class="state" :class="item.connectionStatus.toLowerCase()"><i></i>{{ connectionLabel(item.connectionStatus) }}</span></td>
- <td>{{ formatTime(item.lastObservedAtUtc) }}</td>
- <td class="error-cell" :title="item.lastErrorMessage || ''"><span v-if="item.lastErrorCode">{{ item.lastErrorCode }} · {{ item.lastErrorMessage }}</span><span v-else>-</span></td>
- <td @click.stop><el-switch :model-value="item.status === '0'" :loading="submittingId === item.adapterId" @change="handleStatusChange(item, $event)" /></td>
- <td @click.stop><div class="row-actions"><el-tooltip content="发现设备" placement="top"><button type="button" :disabled="item.status !== '0' || submittingId !== null" aria-label="发现设备" @click="discover(item)"><el-icon><Refresh /></el-icon></button></el-tooltip><el-tooltip content="编辑配置" placement="top"><button type="button" aria-label="编辑配置" @click="openEdit(item)"><el-icon><EditPen /></el-icon></button></el-tooltip></div></td>
+ <tr v-for="item in records" :key="item.id">
+ <td class="code-cell">{{ item.deviceCode }}</td><td class="code-cell">{{ item.ip }}</td><td class="code-cell">{{ item.mac }}</td><td><strong>{{ item.name }}</strong></td><td>{{ item.manufacturer }}</td><td>{{ item.model }}</td><td>{{ item.channelCount }}</td><td :title="String(item.specs)">{{ item.specs }}</td><td :title="item.remark">{{ item.remark || '-' }}</td>
+ <td><span class="online-state" :class="item.onlineStatus === '在线' ? 'online' : 'offline'"><i></i>{{ item.onlineStatus }}</span></td>
+ <td><span class="test-state" :class="testStatusClass(item.testStatus)">{{ item.testStatus }}</span></td>
+ <td :title="item.currentTest">{{ item.currentTest || '-' }}</td>
+ <td class="action-column"><div class="row-actions"><button type="button" :disabled="submittingId !== null" :class="item.status === '启用' ? 'disable-action' : 'enable-action'" @click="changeStatus(item)">{{ submittingId === item.id ? '处理中' : item.status === '启用' ? '禁用' : '启用' }}</button><button type="button" :disabled="submittingId !== null" @click="editCabinet(item.id)">编辑</button><button class="delete-action" type="button" :disabled="submittingId !== null" @click="deleteCabinet(item)">删除</button></div></td>
</tr>
- <tr v-if="!loading && !adapters.length"><td class="empty" colspan="9">暂无设备适配器实例</td></tr>
+ <tr v-if="!loading && !records.length"><td colspan="13" class="empty-cell">暂无符合条件的检测柜</td></tr>
</tbody>
</table>
</div>
- <footer class="pagination"><span>显示 {{ adapters.length }} 条，共 {{ total }} 条</span><el-pagination :current-page="pageNum" :page-size="pageSize" :total="total" layout="prev, pager, next" background @current-change="handlePageChange" /></footer>
+ <footer class="pagination-bar"><span>显示 {{ records.length }} 条，共 {{ total }} 条</span><el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50]" :total="total" layout="sizes, prev, pager, next" background @current-change="handlePageChange" @size-change="handleSizeChange" /></footer>
</section>
-
- <section class="channel-panel">
- <header class="panel-heading"><div><i></i><strong>检测柜通道</strong><span>{{ channels.length }} CHANNELS</span></div><button class="icon-button" type="button" :disabled="!selectedId" aria-label="刷新通道" @click="loadChannels"><el-icon><Refresh /></el-icon></button></header>
- <div v-loading="channelLoading" class="table-wrap">
- <table class="channel-table">
- <thead><tr><th>通道身份</th><th>设备类型</th><th>设备号</th><th>单元号</th><th>通道号</th><th>在线状态</th><th>工作状态</th><th>最近观测</th></tr></thead>
- <tbody>
- <tr v-for="item in channels" :key="item.channelId"><td class="mono">{{ item.adapterId }} / {{ item.devtype }} / {{ item.devid }} / {{ item.subdevid }} / {{ item.chlid }}</td><td>{{ item.devtype }}</td><td>{{ item.devid }}</td><td>{{ item.subdevid }}</td><td>{{ item.chlid }}</td><td><span class="state" :class="item.onlineStatus.toLowerCase()"><i></i>{{ onlineLabel(item.onlineStatus) }}</span></td><td>{{ item.workStatus }}</td><td>{{ formatTime(item.lastSeenAtUtc) }}</td></tr>
- <tr v-if="!channelLoading && !channels.length"><td class="empty" colspan="8">暂无已发现的检测柜通道</td></tr>
- </tbody>
- </table>
- </div>
- </section>
-
- <el-dialog v-model="dialogVisible" :title="editingId ? '编辑设备适配器实例' : '新增设备适配器实例'" width="620px" destroy-on-close>
- <div class="config-grid">
- <label><span>实例编码</span><el-input v-model="form.adapterCode" :disabled="Boolean(editingId)" maxlength="64" /></label>
- <label><span>实例名称</span><el-input v-model="form.adapterName" maxlength="100" /></label>
- <label><span>类型</span><el-select v-model="form.adapterType"><el-option label="BTS" value="BTS" /></el-select></label>
- <label><span>只读能力</span><el-switch v-model="form.readOnly" disabled inline-prompt active-text="只读" /></label>
- <label class="wide"><span>主机</span><el-input v-model="form.host" maxlength="255" placeholder="IP 或主机名" /></label>
- <label><span>端口</span><el-input-number v-model="form.port" :min="1" :max="65535" controls-position="right" /></label>
- <label><span>轮询周期（毫秒）</span><el-input-number v-model="form.pollIntervalMs" :min="1000" :step="1000" controls-position="right" /></label>
- <label><span>时区</span><el-input v-model="form.timezoneId" maxlength="64" /></label>
- <label class="wide"><span>备注</span><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></label>
- </div>
- <template #footer><button class="secondary-button" type="button" @click="dialogVisible = false">取消</button><button class="primary-button" type="button" :disabled="saving" @click="saveAdapter"><el-icon><Check /></el-icon>{{ saving ? '保存中' : '保存' }}</button></template>
- </el-dialog>
</div>
</template>
<style scoped>
-.adapter-page { display: grid; gap: 16px; width: 100%; }
-.adapter-panel, .channel-panel { border: 1px solid #d8e1e9; background: #fff; }
-.panel-heading { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-bottom: 1px solid #d8e1e9; background: var(--surface-soft); }
-.panel-heading > div { display: flex; align-items: center; gap: 8px; }.panel-heading i { width: 3px; height: 16px; background: #2b78a3; }.panel-heading strong { color: var(--ink); font-size: 15px; }.panel-heading span { color: #81909d; font-size: 10px; }
-.primary-button, .secondary-button, .icon-button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid transparent; border-radius: 3px; font-size: 13px; cursor: pointer; }.primary-button { color: #fff; border-color: var(--blue); background: var(--blue); }.secondary-button, .icon-button { color: #52606d; border-color: var(--line-strong); background: #fff; }.icon-button { width: 34px; padding: 0; }button:disabled { opacity: .5; cursor: not-allowed; }
-.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; color: #52606d; font-size: 12px; table-layout: fixed; }.adapter-table { min-width: 1320px; }.channel-table { min-width: 980px; }
-th, td { height: 48px; padding: 0 11px; border-right: 1px solid #dde7f0; border-bottom: 1px solid #dde7f0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }th { height: 40px; color: #52606d; background: #eaf4ff; border-color: #c7e0ff; font-weight: 600; }th:last-child, td:last-child { border-right: 0; }
-.adapter-table th:first-child { width: 180px; }.adapter-table th:nth-child(2) { width: 150px; }.adapter-table th:nth-child(5) { width: 105px; }.adapter-table th:nth-child(6) { width: 165px; }.adapter-table th:nth-child(7) { width: 210px; }.adapter-table th:nth-child(8) { width: 70px; }.adapter-table th:last-child { width: 88px; }.channel-table th:first-child { width: 230px; }.channel-table th:last-child { width: 180px; }
-tbody tr.selected { background: #edf6ff; }tbody tr:hover { background: #f7fbff; }td strong, td small { display: block; overflow: hidden; text-overflow: ellipsis; }td strong { color: #26333f; font-size: 13px; }td small { margin-top: 3px; color: #7b8794; font-size: 10px; }.mono { font-family: 'Cascadia Mono', Consolas, monospace; }
-.state { display: inline-flex; align-items: center; gap: 6px; }.state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.state.connected, .state.online { color: #23865e; }.state.error, .state.offline { color: #a64a4a; }.state.disconnected, .state.unknown { color: #697682; }.error-cell { color: #a64a4a; }
-.row-actions { display: flex; justify-content: center; gap: 8px; }.row-actions button { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; color: var(--blue); background: transparent; cursor: pointer; }.empty { height: 120px; color: #8795a3; text-align: center; }
-.pagination { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }.pagination > span { color: #7b8794; font-size: 11px; }.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.config-grid label { min-width: 0; display: grid; gap: 7px; }.config-grid label > span { color: #52606d; font-size: 12px; font-weight: 500; }.config-grid .wide { grid-column: 1 / -1; }.config-grid :deep(.el-select), .config-grid :deep(.el-input-number) { width: 100%; }
-@media (max-width: 680px) { .panel-heading { padding: 0 12px; }.panel-heading span { display: none; }.pagination { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px 12px; }.config-grid { grid-template-columns: minmax(0, 1fr); }.config-grid .wide { grid-column: auto; } }
+.cabinet-page { width: 100%; }
+.primary-button, .secondary-button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid transparent; border-radius: 3px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
+.primary-button { color: #fff; background: var(--blue); border-color: var(--blue); }
+.primary-button:hover { background: #176fcb; border-color: #176fcb; }
+.secondary-button { color: #52606d; background: #fff; border-color: var(--line-strong); }
+.secondary-button:hover { color: var(--blue); border-color: #9dc8f5; }
+.filter-panel, .result-panel { background: #fff; border: 1px solid #d8e1e9; }
+.filter-panel { margin-bottom: 16px; }
+.section-heading, .result-toolbar { display: flex; align-items: center; justify-content: space-between; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
+.section-heading { height: 44px; padding: 0 16px; }
+.section-heading > div, .result-toolbar > div { display: flex; align-items: center; gap: 8px; }
+.section-heading > div > i, .result-toolbar > div:first-child > i { width: 3px; height: 16px; background: #2b78a3; }
+.section-heading strong, .result-toolbar strong { color: var(--ink); font-size: 15px; font-weight: 600; }
+.section-heading span, .result-toolbar span { color: #81909d; font-size: 10px; }
+.section-heading small { color: #647380; font-size: 11px; }
+.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; padding: 16px; }
+.filter-grid label { width: 100%; min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
+.filter-grid label > span { color: #52606d; font-size: 12px; font-weight: 500; }
+.filter-grid :deep(.el-select), .filter-grid :deep(.el-date-editor) { width: 100%; }
+.filter-grid :deep(.el-input__wrapper), .filter-grid :deep(.el-select__wrapper) { min-height: 34px; border-radius: 3px; box-shadow: 0 0 0 1px #d8e1e9 inset; background: #f8fafc; }
+.filter-actions { grid-column: -2 / -1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+.result-toolbar { height: 50px; padding: 0 16px; }
+.table-wrap { overflow-x: auto; }
+table { width: 100%; min-width: 1740px; table-layout: fixed; border-collapse: collapse; color: #52606d; font-size: 13px; }
+th, td { height: 50px; padding: 0 12px; border-right: 1px solid #dde7f0; border-bottom: 1px solid #dde7f0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+th { height: 40px; color: #52606d; background: #eaf4ff; border-color: #c7e0ff; font-size: 12px; font-weight: 600; }
+th:nth-child(1) { width: 115px; } th:nth-child(2) { width: 120px; } th:nth-child(3) { width: 130px; } th:nth-child(4) { width: 130px; }
+th:nth-child(5), th:nth-child(6) { width: 100px; } th:nth-child(7) { width: 80px; } th:nth-child(8) { width: 145px; } th:nth-child(9) { width: 145px; }
+th:nth-child(10), th:nth-child(11) { width: 100px; } th:nth-child(12) { width: 180px; } th:last-child { width: 180px; }
+th:last-child, td:last-child { border-right: 0; text-align: center; }
+.action-column { position: sticky; right: 0; z-index: 2; background: #fff; overflow: visible; border-left: 0; box-shadow: inset 1px 0 0 #b4c7d9, -8px 0 14px rgba(23, 49, 74, .12); }
+th.action-column { z-index: 3; background: #eaf4ff; }
+tbody tr:hover td.action-column { background: #f7fbff; }
+tbody tr:hover { background: #f7fbff; }
+tbody tr:last-child td { border-bottom: 0; }
+td strong { color: #26333f; font-weight: 600; }
+.code-cell { color: #647380; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
+.online-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
+.online-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.online-state.online { color: #23865e; }
+.online-state.offline { color: #a64a4a; }
+.test-state { display: inline-flex; padding: 4px 7px; border: 1px solid; font-size: 11px; line-height: 1; }
+.test-state.pending { color: #a96b16; background: #fff8e9; border-color: #efd59e; }
+.test-state.running { color: #176fcb; background: #edf6ff; border-color: #b8d9fb; }
+.test-state.idle { color: #697682; background: #f2f4f6; border-color: #ccd4da; }
+.row-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
+.row-actions button { border: 0; color: var(--blue); background: transparent; font-size: 12px; font-weight: 500; cursor: pointer; }
+.row-actions button:disabled { opacity: .55; cursor: not-allowed; }
+.row-actions .disable-action, .row-actions .delete-action { color: #ad4a4a; }
+.row-actions .enable-action { color: #23865e; }
+.empty-cell { height: 160px; color: #8795a3; text-align: center; }
+.pagination-bar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px 8px 16px; border-top: 1px solid var(--line); }
+.pagination-bar > span { color: #7b8794; font-size: 11px; }
+.pagination-bar :deep(.el-pagination) { --el-pagination-button-bg-color: #edf4fa; --el-pagination-hover-color: var(--blue); }
+@media (max-width: 1320px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 980px) { .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 680px) {
+ .filter-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
+ .filter-actions { justify-content: stretch; }
+ .filter-actions button { flex: 1; }
+ .section-heading, .result-toolbar { padding-left: 12px; }
+ .section-heading span, .result-toolbar span { display: none; }
+ .pagination-bar { align-items: flex-start; flex-direction: column; overflow-x: auto; }
+}
</style>
--
Gitblit v1.7.1