/* 通用实例管理:标签页、表单、操作区及图表容器。 */ /* 导入方:app/components/instance/CommonManage.vue、app/pages/servers/server.vue。 */ .common-manage[data-v-34fd3c5d] { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-lg); overflow: hidden; } .common-tabs[data-v-34fd3c5d] { border-bottom: 1px solid var(--p-content-border-color); gap: 8px; padding: 12px; display: flex; overflow: auto; } .common-tabs button[data-v-34fd3c5d] { white-space: nowrap; color: var(--p-text-muted-color); font: inherit; cursor: pointer; background: 0 0; border: 0; border-radius: var(--radius-md); padding: 10px 14px; } .common-tabs button.active[data-v-34fd3c5d] { background: var(--p-primary-50); color: var(--p-primary-color); } .common-body[data-v-34fd3c5d] { gap: 20px; padding: 24px; display: grid; } .common-body h3[data-v-34fd3c5d] { margin: 0; font-size: 16px; } .common-grid[data-v-34fd3c5d] { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin: 0; display: grid; } .common-grid dt[data-v-34fd3c5d], .muted[data-v-34fd3c5d] { color: var(--p-text-muted-color); } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .common-grid dd[data-v-34fd3c5d] { overflow-wrap: anywhere; margin: 8px 0 0; } .common-actions[data-v-34fd3c5d] { flex-wrap: wrap; gap: 12px; display: flex; } .common-form[data-v-34fd3c5d] { gap: 14px; display: grid; } .common-form p[data-v-34fd3c5d], .muted[data-v-34fd3c5d] { margin: 0; } .common-chart header[data-v-34fd3c5d] { justify-content: space-between; align-items: center; gap: 12px; display: flex; } .chart-canvas[data-v-34fd3c5d] { min-width: 0; height: 280px; } .common-body[data-v-34fd3c5d] .p-datatable { max-width: 100%; } /* 视口条件 (width<=640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=640px) { .common-body[data-v-34fd3c5d] { padding: 16px; } .common-chart header[data-v-34fd3c5d] { flex-direction: column; align-items: stretch; } }