/* 响应式布局样式 */ @media (max-width: 640px) { /* 移动端:垂直布局 */ .form-row-flex { flex-direction: column !important; } .form-row-flex>div { width: 100% !important; } } /* 优化表单行布局 */ .form-row-flex { display: flex; gap: 12px; align-items: flex-start; } /* 单选框标签样式 */ #channelTypeRadios label, #keyStrategyRadios label { transition: all 0.2s ease; padding: 4px 4px; border-radius: 6px; } #channelTypeRadios label:hover, #keyStrategyRadios label:hover { background-color: var(--neutral-100); } #channelTypeRadios label:has(input:checked), #keyStrategyRadios label:has(input:checked) { color: var(--primary-700); font-weight: 500; } /* Toast动画 */ @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } /* 渠道统计徽章 */ .channel-stat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: var(--neutral-100); border: 1px solid var(--neutral-200); font-size: 12px; color: var(--neutral-700); line-height: 1.3; } .channel-stat-badge strong { color: var(--neutral-900); } .content-area > header .glass-card, .filter-bar { background: rgba(255, 255, 255, 0.97); border-color: rgba(148, 163, 184, 0.18); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); } .page-subtitle { color: var(--neutral-700); line-height: 1.6; font-weight: 500; } .page-subtitle b { color: var(--neutral-900); font-weight: 700; } .channel-page-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .channel-page-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .channel-page-action-btn { padding: 8px 16px; font-size: 14px; } .channel-filter-action-btn { padding: 8px 16px; font-size: 14px; } .channel-search-control { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } .channel-search-control .filter-combobox-wrapper { flex: 1 1 auto; min-width: 0; } .channel-editor-modal { width: 90vw; max-width: 90vw; height: 90vh; max-height: 90vh; padding: 14px 20px; display: flex; flex-direction: column; overflow: hidden; } .channel-editor-form { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow: visible; } .channel-editor-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: auto; } #channelModal .channel-editor-body, #channelModal .inline-table-container { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.45) transparent; } #channelModal .channel-editor-body::-webkit-scrollbar, #channelModal .inline-table-container::-webkit-scrollbar { width: 6px; height: 6px; } #channelModal .channel-editor-body::-webkit-scrollbar-track, #channelModal .inline-table-container::-webkit-scrollbar-track { background: transparent; } #channelModal .channel-editor-body::-webkit-scrollbar-thumb, #channelModal .inline-table-container::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 999px; } #channelModal .channel-editor-body::-webkit-scrollbar-thumb:hover, #channelModal .inline-table-container::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.55); } #channelModal .channel-editor-body::-webkit-scrollbar-button, #channelModal .inline-table-container::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .channel-editor-group { margin: 0; } .channel-editor-group--primary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, max-content); column-gap: 20px; row-gap: 2px; align-items: start; } .channel-editor-group--primary .channel-editor-primary-row { display: contents; } .channel-editor-primary-field { display: flex; align-items: center; gap: 6px; min-width: 0; } .channel-editor-primary-field--name, .channel-editor-primary-field--type { align-self: center; } .channel-editor-primary-field--type, .channel-editor-primary-field--mode { justify-content: flex-start; } .channel-editor-primary-field--transforms { flex-direction: column; align-items: flex-start; gap: 4px; } .channel-editor-inline-group { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .channel-editor-primary-field--name .channel-editor-input { flex: 1 1 auto; min-width: 0; } .channel-editor-inline-label { display: inline-flex; align-items: center; margin: 0; white-space: nowrap; } .channel-editor-inline-label--muted { font-size: 13px; color: var(--neutral-700); font-weight: 600; } .channel-editor-radio-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; } .channel-editor-radio-option { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 13px; min-width: 0; } .channel-editor-radio-option-copy { min-width: 0; } .channel-editor-radio-option-copy--with-hint { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .channel-editor-radio-option-text { white-space: nowrap; } .channel-editor-radio-hint { font-size: 12px; color: var(--neutral-500); line-height: 1.2; white-space: normal; } .channel-editor-section-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 360px; } .channel-editor-section-header { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 0; } .channel-editor-section-title { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .channel-editor-section-meta { margin: 0; font-weight: 500; white-space: nowrap; } .channel-editor-exact-url-hint { font-weight: 400; line-height: 1.35; white-space: normal; } .channel-editor-strategy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .channel-editor-section-title--key { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .channel-editor-section-title--key::-webkit-scrollbar { display: none; } .channel-editor-inline-strategy { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; } .channel-editor-section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; min-width: 0; flex: 0 1 auto; } .channel-editor-section-actions--keys, .channel-editor-section-actions--models { gap: 6px; } .channel-editor-action-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; } .channel-editor-action-btn, .channel-editor-section-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; white-space: nowrap; } .channel-editor-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; } .channel-editor-checkbox-label { margin: 0; display: inline-flex; align-items: center; gap: 8px; } .channel-editor-checkbox-label[hidden] { display: none !important; } .channel-editor-footer-fields { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } .channel-editor-inline-field { display: flex; align-items: center; gap: 6px; min-width: 0; } .channel-editor-inline-field[hidden] { display: none !important; } .channel-editor-inline-field--scheduled-model { flex: 0 1 auto; } .channel-editor-scheduled-model-control { width: 184px; min-width: 184px; max-width: 184px; } .channel-editor-scheduled-model-control .filter-select:disabled { color: var(--neutral-400); } .channel-editor-scheduled-model-control .filter-select { width: 100%; } .channel-editor-inline-field-input { display: inline-flex; align-items: center; gap: 6px; } .channel-editor-footer-actions { margin-left: auto; display: flex; justify-content: flex-end; gap: 10px; min-width: 0; } .channel-editor-group--footer { flex: 0 0 auto; padding: 8px 0 2px; margin: 0; border-top: 1px solid var(--neutral-200); } #channelModal .channel-editor-input { padding: 6px 8px; border-width: 1px; border-radius: 8px; font-size: 14px; } #channelModal .inline-table-container.tall { --channel-model-visible-rows: 8; --channel-editor-table-row-height: 36px; --channel-editor-table-header-height: 38px; min-height: 0; max-height: calc(var(--channel-editor-table-header-height) + (var(--channel-model-visible-rows) * var(--channel-editor-table-row-height))); } #channelModal .inline-table th { padding: 4px 8px; line-height: 1.2; } #channelModal .inline-table td { padding: 3px 6px; } .channel-editor-footer-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .channel-editor-footer-btn svg { flex: 0 0 auto; } .filter-label { font-size: 13px; font-weight: 600; color: var(--neutral-700); } .filter-info, .filter-info * { color: var(--neutral-700); font-weight: 500; } .channel-hover-clear-btn:hover { background: var(--neutral-100) !important; } .channel-hover-key-toggle-btn:hover { background: var(--neutral-50) !important; border-color: var(--neutral-400) !important; } .channel-hover-modal-close-btn:hover { background: var(--neutral-200) !important; } .channel-modal-close-btn { width: 28px; height: 28px; padding: 0; border-radius: 999px; background: var(--neutral-100); color: var(--neutral-600); } .table-container { background: rgba(255, 255, 255, 0.97); border-color: rgba(148, 163, 184, 0.18); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); } /* ===== 渠道表格布局 ===== */ .channel-table { table-layout: fixed; } .channel-table thead th, .channel-table td { font-size: 13px; line-height: 1.35; vertical-align: middle; box-sizing: border-box; } .channel-table thead th { height: 44px; padding: 8px 10px; white-space: nowrap; user-select: none; text-align: center; background: #eff1f7; color: var(--neutral-900); font-size: 13px; font-weight: 700; border-bottom: 1px solid #d9e0e7; } .channel-table td { padding: 6px 10px; color: var(--neutral-800); border-bottom: 1px solid #e3e8ee; } .channel-table td.ch-col-priority, .channel-table td.ch-col-duration, .channel-table td.ch-col-usage, .channel-table td.ch-col-cost, .channel-table td.ch-col-last-success { text-align: center; } .channel-table .ch-col-enabled { width: 76px; min-width: 76px; max-width: 76px; white-space: nowrap; text-align: center; } .channel-table tbody tr.channel-table-row, .channel-table tbody tr.channel-table-row > td { height: 90px; } .channel-table tbody tr { transition: background 0.15s ease; background: rgba(255, 255, 255, 0.98); } .channel-table tbody tr:nth-child(odd) { background: #ffffff; } .channel-table tbody tr:nth-child(even) { background: #f8fafc; } .channel-table tbody tr:last-child td { border-bottom: none; } .channel-table tbody tr:hover { background: #f0ece5; } /* 列宽定义 */ .ch-col-checkbox { width: 32px; min-width: 32px; max-width: 32px; text-align: center; box-sizing: border-box; } .ch-col-name { width: 480px; min-width: 480px; max-width: 480px; } .ch-col-priority { width: 90px; min-width: 90px; max-width: 90px; white-space: normal; text-align: center; } .ch-priority-stack { display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto; gap: 2px; line-height: 1.15; } .ch-priority-row { display: flex; align-items: center; justify-content: center; width: 100%; gap: 4px; min-width: 0; line-height: 1.15; } .ch-priority-editor-wrap { display: inline-block; max-width: 100%; } .ch-priority-editor { display: inline-flex; align-items: center; width: 56px; height: 30px; border: 1px solid var(--neutral-300); border-radius: 8px; background: #ffffff; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); } .ch-priority-editor-wrap.is-saving { opacity: 0.65; pointer-events: none; } .ch-priority-input { width: 56px; height: 30px; border: 0; background: #ffffff; color: var(--neutral-900); font-size: 13px; font-weight: 700; line-height: 30px; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; } .ch-priority-input::-webkit-outer-spin-button, .ch-priority-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .ch-priority-input:focus { outline: 2px solid rgba(59, 130, 246, 0.22); outline-offset: -2px; } .ch-priority-input.is-dirty { background: #fffbeb; } .ch-priority-label { color: var(--neutral-600); font-size: 13px; font-weight: 500; white-space: nowrap; text-align: left; flex: 0 0 auto; } .ch-priority-value { margin-left: auto; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ch-priority-base-value { color: var(--neutral-600); } .ch-priority-stale { color: var(--neutral-400); text-decoration: line-through; text-decoration-thickness: 1px; } .ch-priority-health-good { color: var(--success-600); } .ch-priority-health-bad { color: var(--error-600); } .ch-col-duration { width: 184px; min-width: 184px; max-width: 184px; white-space: normal; text-align: center; } .ch-col-usage { width: 100px; line-height: 1.35; text-align: center; } .ch-col-cost { width: 70px; min-width: 70px; max-width: 70px; white-space: nowrap; text-align: center; } .ch-col-last-success { width: 156px; min-width: 156px; max-width: 156px; white-space: normal; text-align: center; } .ch-last-status { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; color: var(--neutral-700); font-size: 12px; line-height: 1.25; } .ch-last-status--ok { color: var(--success-700); font-weight: 650; } .ch-last-status--empty { color: var(--neutral-500); font-weight: 600; } .ch-last-request { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; position: relative; padding: 4px 8px; border: 1px solid var(--error-200); border-radius: 6px; background: #fff7f7; color: var(--error-700); font-size: 12px; line-height: 1.25; } .ch-last-request__state { flex: 0 0 auto; color: var(--neutral-500); font-weight: 800; } .ch-last-request__time { flex: 0 0 auto; color: var(--neutral-500); font-weight: 650; } .ch-last-request__detail { position: relative; flex: 0 0 auto; min-width: 0; color: var(--error-700); } .ch-last-request__detail[open] { flex: 0 0 auto; order: 0; } .ch-last-request__detail summary { cursor: pointer; color: var(--neutral-400); font-size: 11px; font-weight: 700; white-space: nowrap; } .ch-last-request__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(420px, calc(100vw - 48px)); padding: 8px; border: 1px solid var(--error-200); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); } .ch-last-request__detail pre { box-sizing: border-box; max-height: 160px; width: 100%; margin: 0; padding: 8px; overflow: auto; border: 1px solid var(--error-200); border-radius: 6px; background: #fff; color: var(--error-800); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; } .ch-last-request__copy { display: inline-flex; align-items: center; flex: 0 0 auto; margin-top: 6px; padding: 1px 7px; border: 1px solid var(--error-200); border-radius: 5px; background: #fff; color: var(--error-700); font-size: 11px; font-weight: 700; line-height: 1.45; cursor: pointer; white-space: nowrap; } .ch-last-request__copy:hover { border-color: var(--error-300); color: var(--error-800); } .ch-col-actions { width: 136px; min-width: 136px; max-width: 136px; position: relative; white-space: nowrap; text-align: right; } .ch-actions-stack { display: flex; align-items: center; justify-content: flex-end; width: 100%; min-height: 32px; } .ch-action-statuses { position: absolute; top: 8px; right: 8px; display: flex; justify-content: flex-end; width: 100%; pointer-events: none; } .ch-action-statuses:empty { display: none; } .channel-enable-switch { position: relative; display: inline-flex; align-items: center; width: 42px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .channel-enable-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); } .channel-enable-switch__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24); transition: transform 0.18s ease; } .channel-enable-switch--on { background: #22c55e; border-color: #16a34a; } .channel-enable-switch--on .channel-enable-switch__knob { transform: translateX(18px); } .channel-enable-switch--off { background: #cbd5e1; border-color: #94a3b8; } /* 渠道名称行 */ .ch-name-cell { position: relative; display: block; width: 100%; min-width: 0; padding-right: 52px; } .ch-name-line { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; font-size: 13px; line-height: 1.3; } .ch-name-main { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; } .ch-name-statuses { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; } .ch-name-line strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--neutral-900); font-size: 13px; } .ch-url-line { color: var(--neutral-500); font-size: 13px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .ch-refresh-result-slot { margin-top: 5px; max-width: 100%; } .ch-refresh-result-slot:empty { display: none; } .ch-last-request-slot { margin-top: 5px; max-width: 100%; } .ch-last-request-slot:empty { display: none; } .ch-last-request-slot--desktop { display: block; } .ch-last-request-slot--mobile { display: none; } .ch-name-cell .ch-last-request-slot--desktop .ch-last-request { width: fit-content; max-width: 100%; } .channel-refresh-result { display: inline-flex; align-items: center; max-width: 100%; gap: 6px; padding: 3px 7px; border: 1px solid var(--neutral-200); border-radius: 6px; background: var(--neutral-50); font-size: 12px; line-height: 1.3; color: var(--neutral-700); vertical-align: top; } .channel-refresh-result--processing { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; } .channel-refresh-result--updated { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; } .channel-refresh-result--unchanged { border-color: #e2e8f0; background: #f8fafc; color: #475569; } .channel-refresh-result--failed { display: block; width: min(100%, 420px); border-color: #fecaca; background: #fef2f2; color: #b91c1c; } .channel-refresh-result__line { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; } .channel-refresh-result__status { flex: 0 0 auto; font-weight: 700; white-space: nowrap; } .channel-refresh-result__summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-refresh-result--failed .channel-refresh-result__summary { flex: 1 1 140px; } .channel-refresh-result__detail { flex: 0 0 auto; min-width: 0; } .channel-refresh-result__detail summary { cursor: pointer; color: #991b1b; font-weight: 600; list-style: none; white-space: nowrap; } .channel-refresh-result__detail summary::-webkit-details-marker { display: none; } .channel-refresh-result__detail pre { margin: 6px 0 0; max-height: 240px; overflow: auto; padding: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.75); border: 1px solid #fecaca; color: #7f1d1d; font-family: 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .channel-refresh-result-action { flex: 0 0 auto; padding: 1px 6px; border: 1px solid rgba(185, 28, 28, 0.26); border-radius: 5px; background: rgba(255, 255, 255, 0.72); color: #991b1b; font-size: 12px; line-height: 1.4; cursor: pointer; white-space: nowrap; } .channel-refresh-result-action:hover { background: #ffffff; border-color: rgba(185, 28, 28, 0.45); } .ch-timing { display: flex; flex-direction: column; align-items: stretch; width: max-content; max-width: 100%; margin: 0 auto; gap: 2px; line-height: 1.15; } .ch-timing-row, .ch-usage-row { display: flex; align-items: center; justify-content: flex-start; width: auto; gap: 6px; min-width: 0; line-height: 1.15; } .ch-timing-label, .ch-usage-label { color: var(--neutral-600); font-size: 13px; font-weight: 500; white-space: nowrap; text-align: left; flex: 0 0 auto; } .ch-timing-value, .ch-usage-value { margin-left: 0; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ch-cell-placeholder { color: var(--neutral-400); } .ch-usage-list { display: flex; flex-direction: column; align-items: stretch; width: max-content; max-width: 100%; margin: 0 auto; gap: 2px; } /* 模型文本 */ .ch-models-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; font-size: 13px; color: var(--neutral-700); line-height: 1.35; } /* 操作按钮组 - 横向排列 */ .ch-action-group { display: inline-flex; flex-wrap: nowrap; gap: 4px; align-items: center; } .ch-action-group .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; line-height: 0; white-space: nowrap; } .ch-action-group .btn-icon.btn-danger { color: var(--error-600); } .ch-action-group .btn-icon.btn-danger:hover { color: var(--error-700); border-color: var(--error-400); background: var(--error-50); } .channel-table-selection-toggle { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: 0; } .channel-table-selection-toggle #visibleSelectionToggleText { display: none; } .channel-table-selection-toggle #visibleSelectionCheckbox { width: 16px; height: 16px; margin: 0; } /* 行状态 */ .channel-table-row.channel-card-cooldown { position: static; border-color: inherit !important; } .channel-table tbody tr.channel-card-cooldown { background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%); } .channel-table tbody tr.channel-card-cooldown:hover { background: linear-gradient(135deg, #ffedd5 0%, #fef9c3 100%); } .channel-table-row.channel-card-cooldown::before { content: none; display: none; } .channel-table-row.channel-card-cooldown > td { background: transparent; } .channel-table-row.channel-card-cooldown:hover > td { background: transparent; } /* 健康指示器 - 表格内微调 */ .channel-table .health-indicator { margin-top: 2px; } .channel-card-top-row { display: flex; align-items: center; gap: 12px; } .channel-card-status { flex-shrink: 0; font-size: 0.875rem; color: var(--neutral-600); white-space: nowrap; } .channel-card-bottom-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--neutral-200); flex-wrap: wrap; } .channel-card-bottom-row>.channel-actions { margin-left: auto; } .channel-stats-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* 表格/图表视图切换按钮 */ .view-toggle-group { display: flex; gap: 4px; background: var(--neutral-100); padding: 4px; border-radius: 8px; } .view-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: transparent; color: var(--neutral-600); font-size: 13px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .view-toggle-btn:hover { color: var(--neutral-800); background: var(--neutral-200); } .view-toggle-btn.active { background: var(--white); color: var(--primary-600); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .view-toggle-btn svg { width: 16px; height: 16px; } /* 图表网格布局 */ .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 8px 0; } @media (max-width: 768px) { .charts-grid { grid-template-columns: 1fr; } } /* 图表卡片 */ .chart-card { background: var(--white); border: 1px solid var(--neutral-200); border-radius: 12px; padding: 16px; } .chart-title { font-size: 14px; font-weight: 600; color: var(--neutral-700); margin: 0 0 12px 0; text-align: center; } /* 饼图容器 */ .pie-chart-container { width: 100%; height: 280px; } /* Drag and Drop for Keys */ .draggable-key-row { cursor: move; transition: background-color 0.2s; } .draggable-key-row.dragging { opacity: 0.5; background-color: var(--neutral-100); } .draggable-key-row.drag-over { border-top: 2px solid var(--primary-500) !important; } /* 健康状态指示器 */ .health-indicator { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: nowrap; min-width: 0; } .health-track { display: grid; grid-template-columns: repeat(48, 6px); gap: 1px; width: 335px; min-width: 335px; max-width: 335px; flex: 0 0 335px; } .health-block { width: 100%; height: 12px; border-radius: 1px; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .health-block:hover { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 10; } .health-block.healthy { background: #22c55e; } .health-block.warning { background: #f59e0b; } .health-block.critical { background: #ef4444; } .health-block.unknown { background: #d1d5db; } .health-rate { margin-left: 0; font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } .channel-toolbar-actions { flex: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .channels-filter-controls .filter-group, .trend-filter-controls .filter-group { flex: 0 1 auto; } .trend-filter-controls > .filter-actions--page { margin-left: auto; } .channel-filter-summary { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .channel-filter-summary .filter-info { margin-left: 0; } /* 分页控件居中 */ .logs-pagination-card .pagination-container { display: flex; justify-content: center; align-items: center; } .logs-pagination-card .pagination-controls { justify-content: center; } .pagination-page-size-control { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--neutral-700); font-variant-numeric: tabular-nums; } .pagination-page-size-control select.logs-jump-input { width: 64px; padding-right: 4px; cursor: pointer; } .logs-pagination-card .logs-pagination-controls { gap: var(--space-1); flex-wrap: wrap; } .logs-pagination-card .logs-pagination-controls .btn-sm { padding: 2px; gap: 4px; font-size: var(--text-sm); } .logs-pagination-card .logs-pagination-controls svg { width: 14px; height: 14px; } .logs-pagination-card .logs-pagination-info { margin: 0 var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--neutral-700); font-variant-numeric: tabular-nums; } .logs-pagination-card .logs-pagination-info #channels_current_page, .logs-pagination-card .logs-pagination-info #channels_total_pages { display: inline-block; min-width: 3ch; text-align: center; font-weight: var(--font-semibold); color: var(--neutral-900); } .logs-pagination-card .logs-pagination-separator { margin-left: var(--space-1); color: var(--neutral-400); } .logs-pagination-card .logs-jump-input { width: 84px; padding: 4px 8px; border: 1px solid var(--neutral-300); border-radius: 4px; text-align: center; font-size: var(--text-sm); color: var(--neutral-900); background: rgba(255, 255, 255, 0.9); color-scheme: light; -webkit-text-fill-color: var(--neutral-900); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .logs-pagination-card .logs-jump-input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); background: white; } .logs-pagination-card .logs-jump-input::placeholder { color: var(--neutral-400); } .channel-selection-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--neutral-700); font-size: var(--text-sm); font-weight: 600; line-height: 1; cursor: pointer; user-select: none; transition: all var(--duration-fast); } .channel-selection-toggle:hover { color: var(--neutral-900); } .channel-selection-toggle.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .channel-selection-toggle span { white-space: nowrap; } .channel-test-inline-hint { margin-left: 8px; } .channel-test-textarea { min-height: 80px; resize: vertical; } .channel-test-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .channel-test-checkbox-label .control-checkbox { flex: 0 0 auto; } .channel-test-concurrency-input { width: 150px; } .channel-batch-progress { margin-top: 16px; padding: 16px; background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: 8px; } .channel-batch-progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; } .channel-batch-progress-title { color: var(--neutral-700); font-weight: 600; } .channel-batch-progress-counter, .channel-batch-progress-status { color: var(--neutral-600); } .channel-batch-progress-track { width: 100%; height: 8px; overflow: hidden; background: var(--neutral-200); border-radius: 4px; } .channel-batch-progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--primary-500), var(--primary-600)); transition: width 0.3s; } .channel-batch-progress-status { margin-top: 8px; font-size: 13px; } .channel-import-modal-body { padding: 5px; } .channel-export-modal-body { padding: 15px; } .channel-import-hint { color: var(--neutral-500); font-size: 13px; font-weight: 400; } .channel-import-textarea, .channel-export-preview { min-height: 150px; resize: vertical; font-size: 13px; font-family: 'Monaco', 'Menlo', 'Courier New', monospace; } .channel-import-textarea { min-height: 200px; } .channel-import-info { margin-bottom: 16px; padding: 12px; color: var(--neutral-700); font-size: 13px; background: var(--info-50); border: 1px solid var(--info-500); border-radius: 6px; } .channel-import-info--compact { padding: 2px; } .channel-import-info-row { display: flex; align-items: flex-start; gap: 8px; } .channel-import-info-icon { flex-shrink: 0; margin-top: 2px; } .channel-import-info-list { margin: 6px 0 0; padding-left: 16px; line-height: 1.6; } .channel-import-code { padding: 2px 4px; background: rgba(0, 0, 0, 0.05); border-radius: 3px; } .channel-import-preview { min-height: 44px; margin-bottom: 2px; } .channel-import-preview-content { padding: 12px; color: var(--success-600); background: var(--success-50); border: 1px solid var(--success-500); border-radius: 6px; } .channel-import-preview-row { display: flex; align-items: center; gap: 8px; font-weight: 600; } .channel-export-options { display: flex; gap: 20px; margin-top: 8px; } .channel-export-option { display: flex; align-items: center; gap: 6px; cursor: pointer; } .channel-export-actions { gap: 8px; } .channel-sort-modal { max-height: 85vh; overflow: hidden; } .channel-sort-modal-body { flex: 1; display: flex; flex-direction: column; padding: 20px; overflow: hidden; } .channel-sort-list { flex: 1; padding: 12px; overflow-y: auto; background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: 8px; } .channel-sort-actions { align-items: center; justify-content: space-between; gap: 16px; margin-top: 0; padding-top: 16px; } .channel-sort-hint { display: flex; align-items: center; gap: 8px; color: var(--neutral-600); font-size: 12px; } .channel-sort-hint-icon { flex-shrink: 0; color: var(--info-500); } .channel-sort-action-buttons { display: flex; gap: 12px; } .modal-inline-input { background: rgba(255, 255, 255, 0.9); color: var(--neutral-900); color-scheme: light; backdrop-filter: blur(8px); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .modal-inline-input:focus { outline: none; border-color: var(--primary-500) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); background: white; } .modal-inline-input::placeholder { color: var(--neutral-400); } .modal-inline-select { background: rgba(255, 255, 255, 0.9); color: var(--neutral-900); color-scheme: light; -webkit-text-fill-color: var(--neutral-900); backdrop-filter: blur(8px); } .modal-inline-select option { color: var(--neutral-900); background: white; } .inline-url-col-select { width: 70px; } .inline-url-table th { padding: 6px 5px; } .inline-url-table td { padding: 4px 4px; } .inline-url-col-url { width: auto; min-width: 0; } .inline-url-col-actions { width: 96px; white-space: nowrap; } .inline-url-col-status { width: 72px; white-space: nowrap; text-align: center; } .redirect-row { border-bottom: 1px solid var(--neutral-200); } .redirect-col-select, .redirect-col-model, .redirect-col-target, .redirect-col-actions { padding: 4px 10px; } .redirect-col-actions { text-align: center; } .redirect-row-select { display: flex; align-items: center; gap: 8px; } .redirect-row-checkbox { width: 16px; height: 16px; } .redirect-row-index { color: var(--neutral-600); font-size: 13px; font-weight: 500; } .redirect-model-field { display: flex; align-items: center; gap: 4px; } .redirect-model-field .modal-inline-input, .redirect-col-target .modal-inline-input { width: 100%; padding: 3px 6px; border: 1px solid var(--neutral-300); border-radius: 6px; font-size: 13px; font-family: 'Monaco', 'Menlo', 'Courier New', monospace; } .redirect-model-field .redirect-from-input { flex: 1 1 auto; min-width: 0; } .redirect-lowercase-btn, .redirect-delete-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--neutral-500); background: white; cursor: pointer; transition: all 0.2s; } .redirect-lowercase-btn { width: 22px; height: 22px; flex-shrink: 0; border: 1px solid var(--neutral-300); border-radius: 4px; } .redirect-delete-btn { width: 24px; height: 24px; border: 1px solid var(--neutral-200); border-radius: 6px; } .redirect-lowercase-btn:hover { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-600); } .redirect-delete-btn:hover { background: var(--error-50); border-color: var(--error-500); } .redirect-empty-cell { padding: 20px; color: var(--neutral-500); text-align: center; } .sort-item { margin-bottom: 8px; padding: 12px 16px; background: white; border: 1px solid var(--neutral-300); border-radius: 8px; cursor: move; transition: all 0.2s; } .sort-item-body, .sort-item-main, .sort-item-meta, .test-result-header, .response-section-header { display: flex; align-items: center; gap: 8px; } .sort-item-body, .response-section-header { justify-content: space-between; gap: 12px; } .sort-item-main { flex: 1; gap: 12px; min-width: 0; } .sort-item-handle { color: var(--neutral-400); flex-shrink: 0; } .sort-item-name { color: var(--neutral-900); font-weight: 600; } .sort-item-priority-label { color: var(--neutral-500); font-size: 13px; } .sort-item-priority-label { color: var(--neutral-600); } .sort-item-meta { gap: 8px; flex-wrap: wrap; } .sort-item-status-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; font-weight: 500; border-radius: 4px; } .sort-item-status-badge--disabled { background: var(--neutral-200); color: var(--neutral-600); } .sort-item-status-badge--cooldown { background: var(--error-100); color: var(--error-600); } .sort-item-status-badge--normal { background: var(--success-100); color: var(--success-600); } .sort-item.is-dragging { opacity: 0.5; } .sort-item.is-drop-before { border-top: 2px solid var(--primary-500); } .sort-item.is-drop-after { border-bottom: 2px solid var(--primary-500); } .sort-list-empty { padding: 40px; color: var(--neutral-500); text-align: center; } .test-result-header-icon { font-size: 18px; } .response-section-title { margin: 0; } .batch-fail-item { margin: 4px 0; } .batch-test-fail-list { margin: 8px 0; padding-left: 20px; } .batch-test-fail-title { margin-top: 12px; color: var(--error-600); } .batch-test-fail-note { margin-top: 8px; color: var(--error-600); } .batch-test-success-note { color: var(--success-600); } .inline-url-col-latency { width: 60px; white-space: nowrap; text-align: center; } .inline-url-col-requests { width: 68px; white-space: nowrap; text-align: center; } .inline-url-header { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .inline-url-header > span:first-child { white-space: nowrap; } .inline-url-header-hint { margin: 0; font-weight: 400; font-size: 12px; line-height: 1.35; } .channel-duplicate-hint { margin-top: 6px; padding: 7px 10px; border: 1px solid var(--warning-400); border-radius: 6px; background: var(--warning-50); color: var(--warning-600); font-size: 12px; line-height: 1.45; } .channel-duplicate-hint[hidden] { display: none !important; } .inline-url-cell-center { padding: 6px 6px !important; text-align: center; white-space: nowrap; } .inline-url-cell-metric { font-family: Monaco, Menlo, monospace; font-size: 12px; color: var(--neutral-600); } .inline-url-actions { display: flex; justify-content: center; gap: 6px; } .inline-url-status-placeholder { color: var(--neutral-400); font-size: 12px; } .inline-url-status-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 10px; font-size: 11px; font-weight: 500; line-height: 1.2; } .inline-url-status-badge--ok { background: #DCFCE7; color: #16A34A; } .inline-url-status-badge--cooldown { background: #FEE2E2; color: #DC2626; } .inline-url-status-badge--unknown { background: var(--neutral-100); color: var(--neutral-500); } .inline-url-status-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; } .inline-url-status-dot--ok { background: #16A34A; } .inline-url-status-dot--cooldown { background: #DC2626; } .inline-url-status-dot--unknown { background: var(--neutral-400); } .inline-url-status-badge--disabled { background: #FEF3C7; color: #D97706; } .inline-url-status-dot--disabled { background: #D97706; } .inline-url-toggle-btn { border: none; border-radius: 4px; padding: 3px 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s; } .inline-url-toggle-btn:hover { opacity: 0.8; } .inline-url-toggle-btn:disabled { opacity: 0.4; cursor: not-allowed; } .inline-url-toggle-btn--enabled { background: #DCFCE7; color: #16A34A; } .inline-url-toggle-btn--disabled { background: #FEE2E2; color: #DC2626; } .model-select { color: var(--neutral-900); background: rgba(255, 255, 255, 0.9); color-scheme: light; -webkit-text-fill-color: var(--neutral-900); } .model-select option { color: var(--neutral-900); background: white; } .channel-batch-float { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 14px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 110; max-width: calc(100vw - 32px); } .channel-batch-float.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .channel-batch-float__content { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-xl); background: #ffffff; box-shadow: var(--shadow-xl); } .channel-batch-float__header { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; } .channel-batch-selection { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .channel-batch-count-badge { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--primary-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; line-height: 1; flex-shrink: 0; } .channel-batch-selection-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .channel-batch-summary { color: var(--neutral-800); font-weight: 600; white-space: nowrap; font-size: var(--text-sm); line-height: 1.2; } .channel-batch-divider { width: 1px; height: 28px; background: var(--neutral-200); } .channel-batch-actions { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .channel-batch-action { border-radius: var(--radius-base); border: 1px solid var(--neutral-200); background: var(--white); color: var(--neutral-700); font-size: var(--text-sm); font-weight: 600; padding: 0 14px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; box-shadow: none; transition: all var(--duration-fast); } .channel-batch-action__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; line-height: 1; } .channel-batch-action:hover { border-color: var(--neutral-300); background: var(--neutral-50); } .channel-batch-action:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .channel-batch-action--enable { background: var(--primary-500); border-color: var(--primary-500); color: #fff; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3); } .channel-batch-action--enable:hover { background: var(--primary-600); border-color: var(--primary-600); } .channel-batch-action--disable { color: #dc2626; background: #fef2f2; border-color: #fecaca; } .channel-batch-action--disable:hover { background: #fee2e2; border-color: #fca5a5; } .channel-batch-action--delete { color: #fff; background: #dc2626; border-color: #dc2626; box-shadow: 0 1px 3px rgba(220, 38, 38, 0.28); } .channel-batch-action--delete:hover { background: #b91c1c; border-color: #b91c1c; } .channel-batch-action--refresh { color: var(--neutral-700); background: var(--white); border-color: var(--neutral-200); } .channel-batch-close { margin-left: 2px; width: 28px; height: 28px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--neutral-400); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .channel-batch-close:hover { background: var(--neutral-100); color: var(--neutral-600); } .channel-batch-close:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 768px) { .channel-page-hero { gap: 10px; } .content-area > header .glass-card { padding: var(--space-4) !important; } .channel-page-hero .page-subtitle { font-size: var(--text-sm); line-height: 1.5; } .channel-page-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .channel-page-action-btn { width: 100%; padding: 6px 8px; font-size: var(--text-xs); min-height: 36px; white-space: nowrap; } .channels-filter-controls .filter-label { font-size: 0.72rem; font-weight: 500; color: var(--neutral-600); } .channels-filter-controls .filter-select { font-size: 0.8rem; padding: 6px 10px; } .channels-filter-controls .channel-search-filter-group { order: 3; grid-column: auto; } .channels-filter-controls .channel-model-filter-group { order: 4; } .channel-search-control { display: flex; align-items: center; width: 100%; min-width: 0; } .channel-search-control .filter-combobox-wrapper { width: 100%; min-width: 0; max-width: none; } .channel-filter-summary #clearSearchBtn { width: auto; min-width: 0; flex: 0 0 auto; font-size: 0.8rem; padding: 6px 10px; white-space: nowrap; } .channel-filter-summary .channel-filter-action-btn { font-size: 0.8rem; padding: 6px 10px; } .channel-editor-modal { width: min(100%, calc(100vw - 16px)); max-width: none; margin: 8px; padding: 16px; min-height: calc(100vh - 16px); max-height: calc(100vh - 16px); font-size: 14px; } .channel-editor-form { gap: 12px; } .channel-editor-body { gap: 12px; flex: none; min-height: auto; overflow: visible; scrollbar-gutter: auto; } .channel-editor-group--primary { display: block; } .channel-editor-group--primary .channel-editor-primary-row { display: grid; grid-template-columns: 1fr; gap: 12px; } .channel-editor-group--primary .channel-editor-primary-row + .channel-editor-primary-row { margin-top: 12px; } .channel-editor-primary-field { flex-direction: row; align-items: center; gap: 6px; } .channel-editor-primary-field--type, .channel-editor-primary-field--mode, .channel-editor-primary-field--transforms { align-items: flex-start; } .channel-editor-inline-group { width: 100%; } .channel-editor-inline-label { white-space: nowrap; flex: 0 0 auto; } .channel-editor-primary-field .channel-editor-input { flex: 1 1 auto; min-width: 0; } .channel-editor-radio-group, .channel-editor-footer-fields { width: 100%; } .channel-editor-primary-field--type .channel-editor-radio-group, .channel-editor-primary-field--mode .channel-editor-radio-group, .channel-editor-radio-group--strategy { width: auto; flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .channel-editor-primary-field--type .channel-editor-radio-group::-webkit-scrollbar, .channel-editor-primary-field--mode .channel-editor-radio-group::-webkit-scrollbar, .channel-editor-radio-group--strategy::-webkit-scrollbar, .channel-editor-section-actions::-webkit-scrollbar, .channel-editor-section-actions .channel-editor-action-row::-webkit-scrollbar { display: none; } .channel-editor-radio-option { flex: 0 0 auto; justify-content: flex-start; } .channel-editor-radio-option-text { white-space: nowrap; } .channel-editor-section-header { flex-direction: column; align-items: stretch; } .channel-editor-section-header--inline { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; } .channel-editor-section-header--inline .channel-editor-section-title { width: auto; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; } .channel-editor-section-header--inline .channel-editor-section-actions { flex: 0 0 auto; width: auto; } .channel-editor-section-title, .channel-editor-section-stack, .channel-editor-strategy-row { width: 100%; } .channel-editor-section-stack { flex: none; } .channel-editor-section-actions { flex: none; } .channel-editor-strategy-row { flex-direction: column; align-items: stretch; gap: 8px; } .channel-editor-strategy-row { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; } .channel-editor-section-actions { width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; } .channel-editor-section-actions .channel-editor-action-row { width: auto; flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; } .channel-editor-section-actions .btn, .channel-editor-section-actions .channel-hover-key-toggle-btn, .channel-editor-section-actions .channel-editor-action-row .btn { flex: 0 0 auto; } .channel-editor-section-actions--keys .channel-hover-key-toggle-btn { align-self: center; } .channel-editor-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding-top: 12px; border-top: 1px solid var(--neutral-200); } #channelModal .channel-editor-checkbox-label { grid-column: 1; grid-row: 1; width: auto; align-self: center; white-space: nowrap; flex-shrink: 0; } .channel-editor-footer-fields { grid-column: 1 / -1; grid-row: 2; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .channel-editor-inline-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: stretch; gap: 8px; } .channel-editor-inline-field-input { justify-content: flex-start; gap: 4px; } .channel-editor-inline-field > .form-input, .channel-editor-inline-field-input { margin-left: 0; width: auto; min-width: 0; } .channel-editor-inline-field-input .form-input { margin-left: 0; } .channel-editor-inline-field > .form-input, .channel-editor-inline-field-input .form-input { width: 100% !important; min-width: 0; } #channelModal .channel-editor-footer-actions { grid-column: 2; grid-row: 1; width: auto; margin-left: 0; gap: 8px; align-self: center; } #channelModal.modal, #channelModal .channel-editor-modal { backdrop-filter: none; } #channelModal .channel-editor-modal { overflow-x: hidden; overflow-y: auto; } #channelForm.channel-editor-form { min-height: 0; padding-bottom: 220px; overflow: visible; } #channelModal .channel-editor-footer { position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 120; margin-top: 0; padding: 10px 12px 0; border: 1px solid var(--neutral-200); border-radius: 18px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08); } #channelModal .channel-editor-group--footer { position: static; margin: 0; padding: 0; background: transparent; box-shadow: none; border-top: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .channel-editor-footer-actions .btn { flex: 0 0 auto; min-width: 84px; padding: 9px 14px; } .channel-table-container { overflow-x: visible; border: none; background: transparent; box-shadow: none; padding: 0; } .channel-table { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; } .channel-table thead { display: block; margin-bottom: 8px; } .channel-table thead tr { display: block; } .channel-table thead th:not(.ch-col-checkbox) { display: none; } .channel-table thead th.ch-col-checkbox { display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0; border: none; background: transparent; text-align: left; } .channel-table-selection-toggle { justify-content: flex-start; gap: 8px; } .channel-table-selection-toggle #visibleSelectionToggleText { display: inline; } .channel-table tbody { display: grid; gap: 12px; } .channel-table tbody tr, .channel-table tbody tr.channel-table-row, .channel-table tbody tr.channel-table-row > td { height: auto; } .channel-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 16px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); position: relative; } .channel-table tbody td { display: block; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto; padding: 0; border: none; text-align: left !important; } .channel-table td[data-mobile-label]::before { content: attr(data-mobile-label); display: block; margin-bottom: 6px; color: var(--neutral-500); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .channel-table .ch-col-checkbox { position: absolute; top: 14px; right: 14px; width: auto !important; text-align: right; z-index: 1; } .channel-table .ch-col-checkbox input { width: 18px; height: 18px; margin: 0; } .channel-table .ch-col-name, .channel-table .ch-col-models, .channel-table .ch-col-actions { grid-column: 1 / -1; } .channel-table .ch-col-priority { order: 10; } .channel-table .ch-col-cost { order: 12; grid-column: 1 / -1; } .channel-table .ch-col-last-success { order: 13; grid-column: 1 / -1; } .channel-table .ch-col-duration { order: 20; } .channel-table .ch-col-usage { order: 21; } .channel-table .ch-col-enabled { order: 11; } .channel-table .ch-col-actions { order: 30; } .channel-table .ch-col-name { padding-right: 0; } .channel-table .ch-col-priority, .channel-table .ch-col-duration, .channel-table .ch-col-usage, .channel-table .ch-col-cost, .channel-table .ch-col-last-success, .channel-table .ch-col-enabled { background: rgba(248, 250, 252, 0.9); border: 1px solid var(--neutral-200); border-radius: 12px; padding: 10px 12px; } .channel-table .ch-col-priority, .channel-table .ch-col-cost, .channel-table .ch-col-last-success, .channel-table .ch-col-enabled { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .channel-table .ch-col-priority::before, .channel-table .ch-col-cost::before, .channel-table .ch-col-last-success::before, .channel-table .ch-col-enabled::before { margin-bottom: 0; flex: 0 0 auto; } .channel-table .ch-col-priority .ch-priority-stack, .channel-table .ch-col-cost .cost-stack { margin-left: auto; } .channel-table .ch-col-priority .ch-priority-editor-wrap { flex: 0 0 auto; } .channel-table .ch-col-last-success .ch-last-status { margin-left: 0; align-items: flex-end; max-width: min(100%, 420px); } .channel-table .ch-col-last-success .ch-last-request-slot { display: flex; justify-content: flex-end; min-width: 0; max-width: min(65%, 420px); margin-top: 0; margin-left: auto; } .channel-table .ch-last-request-slot--desktop { display: none; } .channel-table .ch-last-request-slot--mobile { display: flex; } .channel-table .ch-col-last-success .ch-last-request { max-width: 100%; min-width: 0; } .channel-table .ch-col-priority .ch-priority-stack { width: auto; min-width: 0; } .channel-table .ch-col-actions { display: flex; flex-direction: column; align-items: center; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--neutral-200); } .channel-table td.ch-col-actions::before { content: none; display: none; } .inline-key-table .inline-key-row { height: auto !important; } .inline-url-table tbody .mobile-inline-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 4px; } .inline-key-table tbody .mobile-inline-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; padding: 10px 12px; gap: 6px 8px; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-select, .inline-key-table tbody .mobile-inline-row td.inline-key-col-select { display: flex; align-items: center; justify-content: center; gap: 6px; grid-column: 1; grid-row: 1; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-url { order: 2; grid-column: 2; grid-row: 1; display: flex; align-items: center; min-width: 0; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-status { order: 10; grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 0; justify-content: flex-start; min-width: 0; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-latency { order: 11; grid-column: 3; grid-row: 2; display: flex; align-items: center; gap: 0; justify-content: flex-end; min-width: 0; text-align: right !important; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-requests { order: 12; grid-column: 4; grid-row: 2; display: flex; align-items: center; gap: 0; justify-content: flex-end; min-width: 0; text-align: right !important; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-latency, .inline-url-table tbody .mobile-inline-row td.inline-url-col-requests { min-width: 0; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-actions { order: 3; grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; padding-top: 0; border-top: none; text-align: right !important; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-toggle { order: 4; grid-column: 4; grid-row: 1; display: flex; align-items: center; justify-content: center; padding-top: 0; border-top: none; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-url::before, .inline-url-table tbody .mobile-inline-row td.inline-url-col-status::before, .inline-url-table tbody .mobile-inline-row td.inline-url-col-latency::before, .inline-url-table tbody .mobile-inline-row td.inline-url-col-requests::before, .inline-url-table tbody .mobile-inline-row td.inline-url-col-actions::before, .inline-url-table tbody .mobile-inline-row td.inline-url-col-toggle::before { content: none; display: none; } .inline-url-table tbody .mobile-inline-row td.inline-url-col-status .inline-url-status-badge { padding: 0; background: transparent; font-size: 0; line-height: 0; gap: 0; } .inline-url-table .inline-url-actions { justify-content: flex-end; flex-wrap: nowrap; overflow-x: auto; margin-left: auto; } .inline-key-table tbody .mobile-inline-row td.inline-key-col-key { order: 2; grid-column: 2 / 3; grid-row: 1; display: flex; align-items: center; min-width: 0; } .inline-key-table tbody .mobile-inline-row td.inline-key-col-status { order: 4; grid-column: 4; grid-row: 1; display: flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; min-width: 0; text-align: right !important; } .inline-key-table tbody .mobile-inline-row td.inline-key-col-actions { order: 3; grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; padding-top: 0; border-top: none; text-align: right !important; } .inline-key-table tbody .mobile-inline-row td.inline-key-col-key::before, .inline-key-table tbody .mobile-inline-row td.inline-key-col-status::before, .inline-key-table tbody .mobile-inline-row td.inline-key-col-actions::before { content: none; display: none; } .inline-key-table .inline-key-actions { justify-content: flex-end; flex-wrap: nowrap; overflow-x: auto; margin-left: auto; } .redirect-model-table tbody .mobile-inline-row { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; } .redirect-model-table .mobile-inline-row .redirect-col-select { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 6px; } .redirect-model-table .mobile-inline-row .redirect-col-model { order: 2; grid-column: 2 / 4; grid-row: 1; min-width: 0; } .redirect-model-table .mobile-inline-row .redirect-col-target { order: 3; grid-column: 2 / 3; grid-row: 2; display: block; min-width: 0; } .redirect-model-table .mobile-inline-row .redirect-col-actions { order: 10; grid-column: 3; grid-row: 2; justify-content: flex-end; padding-top: 0; border-top: none; text-align: right !important; } .inline-url-table .mobile-inline-row td[data-mobile-label]::before, .inline-key-table .mobile-inline-row td[data-mobile-label]::before, .redirect-model-table .mobile-inline-row td[data-mobile-label]::before { display: inline-flex; width: auto; margin: 0 8px 0 0; flex: 0 0 auto; white-space: nowrap; } .inline-url-table .mobile-inline-row .inline-url-col-url, .inline-key-table .mobile-inline-row .inline-key-col-key, .inline-key-table .mobile-inline-row .inline-key-col-status, .redirect-model-table .mobile-inline-row .redirect-col-model, .redirect-model-table .mobile-inline-row .redirect-col-target, .inline-url-table .mobile-inline-row .inline-url-col-actions, .inline-key-table .mobile-inline-row .inline-key-col-actions, .redirect-model-table .mobile-inline-row .redirect-col-actions { display: flex; align-items: center; gap: 8px; } .redirect-model-table .mobile-inline-row td.redirect-col-model[data-mobile-label]::before, .redirect-model-table .mobile-inline-row td.redirect-col-target[data-mobile-label]::before, .redirect-model-table .mobile-inline-row td.redirect-col-actions[data-mobile-label]::before { content: none; display: none; } .inline-url-table .mobile-inline-row .inline-url-col-url .modal-inline-input, .inline-key-table .mobile-inline-row .inline-key-col-key .modal-inline-input, .redirect-model-table .mobile-inline-row .redirect-col-target .modal-inline-input { display: block; width: 100% !important; min-width: 0; } .redirect-model-table .mobile-inline-row .redirect-col-model > div { flex: 1 1 auto; min-width: 0; } .redirect-model-table .mobile-inline-row .redirect-col-model .redirect-from-input { flex: 1 1 auto; min-width: 0; } .inline-url-table .mobile-inline-row .inline-url-col-actions .inline-url-actions, .inline-key-table .mobile-inline-row .inline-key-col-actions .inline-key-actions, .redirect-model-table .mobile-inline-row .redirect-col-actions .redirect-delete-btn { margin-left: auto; } .channel-table td.ch-mobile-empty { display: none; } .channel-table .ch-name-line { flex-wrap: wrap; align-items: flex-start; gap: 6px; } .channel-table .ch-name-statuses { margin-left: 0; width: 100%; } .channel-table .ch-url-line { white-space: normal; overflow: visible; text-overflow: unset; word-break: break-all; } .channel-table .channel-refresh-result { width: 100%; } .channel-table .channel-refresh-result__summary { white-space: normal; } .channel-table .ch-models-text { -webkit-line-clamp: 3; line-clamp: 3; word-break: break-word; } .channel-table .ch-action-group { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; justify-content: center; margin: 0 auto; max-width: 100%; } .channel-table .ch-actions-stack { flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 0; padding-top: 0; } .channel-table .ch-action-statuses { position: static; justify-content: center; pointer-events: auto; } .channel-table .ch-action-group::-webkit-scrollbar { display: none; } .channel-table .ch-action-group .btn-icon { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; } .channel-table .health-indicator { max-width: 100%; overflow: hidden; } .channel-table .health-track { width: min(100%, 335px); min-width: 0; flex: 1 1 auto; } .channel-filter-summary { order: 5; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .channel-filter-summary .filter-info { width: auto; min-width: 0; margin: 0; text-align: left; } .channel-toolbar-actions { justify-content: flex-end; flex-wrap: nowrap; } .channel-filter-summary .btn { width: auto; min-width: 0; white-space: nowrap; } .channel-selection-toggle { width: auto; justify-content: flex-start; } /* 移动端分页控件样式 */ .logs-pagination-card .pagination-controls { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; } .logs-pagination-card .logs-pagination-info { width: 100%; margin: 0; order: 3; justify-content: center; } .logs-pagination-card .logs-pagination-separator { display: none; } .pagination-page-size-control { order: 4; width: 100%; justify-content: center; margin-top: 4px; } .channel-batch-float { width: min(320px, calc(100vw - 16px)); max-width: calc(100vw - 16px); bottom: 10px; } .channel-batch-float__content { position: relative; flex-direction: column; gap: 8px; align-items: stretch; padding: 12px 12px 10px; border-radius: var(--radius-lg); } .channel-batch-float__header { width: 100%; min-width: 0; padding-right: 34px; } .channel-batch-selection { width: 100%; min-width: 0; } .channel-batch-count-badge { width: 24px; height: 24px; font-size: 0.8rem; } .channel-batch-summary { font-size: 0.85rem; } .channel-batch-divider { display: none; } .channel-batch-actions { width: 100%; align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .channel-batch-action { width: 100%; min-width: 0; min-height: 40px; padding: 8px 6px; font-size: 0.75rem; white-space: nowrap; text-align: center; line-height: 1.2; } .channel-batch-close { position: absolute; top: 10px; right: 10px; margin-left: 0; width: 26px; height: 26px; } } @media (max-width: 480px) { .channel-table tbody tr { gap: 8px 10px; padding: 12px; } } /* ============================================================ * 自定义请求规则(高级)模态框 * ============================================================ */ .custom-rules-modal { max-width: 760px; width: 92%; } .custom-rules-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color, #e2e8f0); margin-bottom: 12px; } .custom-rules-tab-button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; color: var(--text-600, #475569); font-size: 0.9rem; transition: color 0.15s, border-color 0.15s; } .custom-rules-tab-button:hover { color: var(--primary-600, #2563eb); } .custom-rules-tab-button.active { color: var(--primary-600, #2563eb); border-bottom-color: var(--primary-600, #2563eb); font-weight: 600; } .custom-rules-tab-count { font-size: 0.8rem; color: var(--text-500, #64748b); } .custom-rules-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; font-size: 0.72rem; font-weight: 600; line-height: 1; cursor: help; opacity: 0.6; transition: opacity 0.15s; } .custom-rules-help-icon:hover { opacity: 1; } .custom-rules-help-popup { position: relative; background: var(--info-50, #eff6ff); border: 1px solid var(--info-200, #bfdbfe); border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; font-size: 0.82rem; } .custom-rules-help-popup pre { margin: 0 0 8px 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 0.82rem; line-height: 1.55; color: var(--text-700, #334155); } .custom-rules-panel { display: flex; flex-direction: column; gap: 8px; } .custom-rules-panel.hidden { display: none; } .custom-rules-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; padding-right: 4px; } .custom-rules-empty { color: var(--text-500, #64748b); font-size: 0.85rem; padding: 18px 8px; text-align: center; border: 1px dashed var(--border-color, #e2e8f0); border-radius: 6px; } .custom-rules-row { display: grid; grid-template-columns: 110px 1fr 1.4fr 36px; gap: 6px; align-items: center; } .custom-rules-row .form-input { min-width: 0; } .custom-rules-value-disabled { background: var(--bg-disabled, #f1f5f9); color: var(--text-400, #94a3b8); cursor: not-allowed; } .custom-rules-remove-btn { padding: 6px 0; font-size: 1rem; line-height: 1; min-width: 36px; } .custom-rules-add-btn { align-self: flex-start; font-size: 0.85rem; } .custom-rules-error { background: var(--error-50, #fef2f2); color: var(--error-700, #b91c1c); border: 1px solid var(--error-200, #fecaca); border-radius: 6px; padding: 8px 12px; font-size: 0.82rem; line-height: 1.55; margin-bottom: 10px; } .custom-rules-anyrouter-hint { background: var(--info-50, #eff6ff); color: var(--info-700, #1d4ed8); border: 1px solid var(--info-200, #bfdbfe); border-radius: 6px; padding: 8px 12px; font-size: 0.82rem; line-height: 1.55; margin-bottom: 10px; } .custom-rules-anyrouter-hint-title { font-weight: 600; margin-bottom: 4px; } .custom-rules-anyrouter-hint-list { margin: 0; padding-left: 18px; } .custom-rules-anyrouter-hint-list li { margin-bottom: 2px; } .custom-rules-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } @media (max-width: 640px) { .custom-rules-modal .modal-title { font-size: 1rem; } .custom-rules-tab-button { font-size: 0.8rem; padding: 6px 10px; } .custom-rules-tab-count { font-size: 0.72rem; } .custom-rules-modal .form-input { font-size: 0.85rem; padding: 6px 10px; } .custom-rules-modal select.form-input { font-size: 0.85rem; } .custom-rules-help-popup, .custom-rules-help-popup pre { font-size: 0.75rem; } .custom-rules-empty { font-size: 0.78rem; } .custom-rules-add-btn, .custom-rules-footer .btn { font-size: 0.82rem; padding: 6px 14px; } .custom-rules-row { grid-template-columns: 1fr 1fr; grid-template-areas: "action remove" "primary primary" "value value"; gap: 6px; } .custom-rules-row .custom-rules-action { grid-area: action; } .custom-rules-row .custom-rules-primary { grid-area: primary; } .custom-rules-row .custom-rules-value { grid-area: value; } .custom-rules-row .custom-rules-remove-btn { grid-area: remove; justify-self: end; } }