/* * SaaSShop Admin Components * 说明:用于承接 Blade 中零散的 inline style,便于后续统一美化与治理。 * * 美化方向:Ant Design Pro 风格(规整、企业中后台范式) */ /* Toast(渐进增强:配合 admin.js 展示更友好的反馈提示) */ .toast-container{ position:fixed; top:16px; right:16px; z-index:999; display:flex; flex-direction:column; gap:10px; width:min(420px, calc(100vw - 32px)); } .toast{ background:#111827; border:1px solid #334155; border-left-width:4px; border-radius:12px; padding:12px 12px; color:#e5e7eb; box-shadow:0 14px 30px rgba(0,0,0,.35); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .toast-success{border-left-color:#16a34a;} .toast-warning{border-left-color:#f59e0b;} .toast-error{border-left-color:#ef4444;} .toast-content{ font-size:13px; line-height:1.45; word-break:break-word; } .toast-close{ appearance:none; border:none; background:transparent; color:#94a3b8; font-size:18px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px; } .toast-close:hover{ background:#1f2937; color:#e5e7eb; } .form-inline-row{ display:flex; align-items:center; gap:8px; } .text-danger{ color:#b42318; } /* 平台订单:退款状态治理区块 */ .refund-governance-block{ margin-top:12px; border:1px dashed #fda29b; background:#fff1f3; } .refund-governance-title{ margin-bottom:6px; } .refund-governance-meta{ margin-bottom:8px; } /* 平台订单:治理提示块(用于 BMPA / 同步订阅 等动作前的安全阀说明) */ .governance-block{ margin-top:10px; width:100%; border:1px solid #f5c2c7; background:#fff5f5; } .governance-block-title{ margin:0; } .governance-block-body{ margin-top:6px; font-size:12px; line-height:1.5; } /* 可复用:治理提示块内的说明/脚注文本 */ .governance-block-footnote{ margin-top:6px; font-size:12px; line-height:1.5; } /* 可复用:折叠面板(参考 Ant Design Pro 的筛选区交互:可折叠、摘要做成一条可点 Header) */ /* 可复用:PageHeader(参考 Ant Design Pro:标题区 + 描述 + 右侧操作区) */ .page-header{ width:100%; padding:16px; border:1px solid #e5e7eb; border-radius:12px; background:#ffffff; } .page-header-main{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .page-header-title{ font-size:18px; font-weight:700; color:#0f172a; line-height:1.2; } .page-header-subtitle{ margin-top:6px; font-size:13px; color:#64748b; line-height:1.45; } .page-header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .page-header-meta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:12px; color:#64748b; font-size:12px; } /* 可复用:KPI 卡片栅格(参考 Ant Design Pro Analysis:第一行 4 个等宽卡片) */ .kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } @media (max-width: 1024px){ .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 640px){ .kpi-grid{ grid-template-columns:1fr; } } .stat-card-title{ font-size:12px; color:#64748b; } .stat-card-value{ margin-top:10px; font-size:22px; font-weight:800; color:#0f172a; letter-spacing:.2px; } .stat-card-footnote{ margin-top:8px; font-size:12px; color:#94a3b8; } .collapsible > summary{ list-style:none; cursor:pointer; } .collapsible > summary::-webkit-details-marker{ display:none; } .collapsible-summary{ user-select:none; } .collapsible-body{ margin-top:10px; } /* 平台订单:工具区(两列分组卡片化,避免表单散落) */ .tool-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; } @media (max-width: 768px){ .tool-grid{ grid-template-columns:1fr; } } .tool-group{ width:100%; } .tool-group-title{ font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin:0 0 10px; } .tool-group-subtitle{ margin:0 0 6px; } /* 平台订单列表:避免列太多导致内容挤压成“竖排/断字” */ .table-wrap{ width:100%; overflow-x:auto; } .table-wrap table.platform-orders-table{ min-width:1600px; } /* 平台订单列表:根据视图控制 min-width(精简视图更紧凑,full 视图更宽) */ .platform-orders-table.is-compact{ min-width:1400px; } .platform-orders-table.is-full{ min-width:2000px; } .table-nowrap th, .table-nowrap td{ white-space:nowrap; word-break:normal; } /* 平台订单列表:精简视图(默认隐藏部分列,避免列表过长) */ .platform-orders-table .col-optional{ display:none; } .platform-orders-table.is-full .col-optional{ display:table-cell; } /* 平台订单列表(精简视图):进一步收敛信息密度 */ .platform-orders-table.is-compact td{ padding-top:8px; padding-bottom:8px; } .platform-orders-table.is-compact .muted-xs{ font-size:12px; } /* 平台订单列表:二行辅助信息(例如 线索/订阅ID) */ .platform-orders-table .row-meta{ margin-top:2px; } /* 平台订单列表:行内治理提示(精简视图主要入口) */ .platform-orders-table .row-warn{ margin-top:4px; padding:4px 6px; border-left:3px solid #e06b67; background:#fff9f9; border-radius:4px; } .platform-orders-table .row-warn a.link{ color:#b52b27; text-decoration:underline; } .platform-orders-table .row-warn a.link:hover{ text-decoration:none; } .platform-orders-table .row-warn-prefix{ font-weight:600; display:inline-block; padding:1px 6px; border-radius:10px; background:#ffecec; color:#b52b27; margin-right:4px; } /* 平台订单列表:精简视图也要可达的治理提示(对账/退款不一致) */ .platform-orders-table .governance-hints{ margin-bottom:6px; } .platform-orders-table .governance-hint{ line-height:1.4; } /* 总台管理:顶部导航(顶部主菜单保留,但视觉对齐 Ant Design Pro Header) */ .sidebar.topnav{ white-space:normal; overflow-x:visible; background:var(--adm-bg-header, #0f172a); border-bottom:1px solid var(--adm-border-color, #22384f); box-shadow:var(--adm-shadow-header, none); } .topnav-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .topnav-brand{ display:inline-flex; align-items:center; font-weight:800; color:var(--adm-text, #e2e8f0); padding:8px 10px; border-radius:var(--adm-radius-sm, 10px); } .topnav-brand:hover{ text-decoration:none; background:rgba(15, 23, 42, .04); } .topnav-menu{ display:flex; align-items:center; gap:8px; flex:1; flex-wrap:wrap; } .topnav-link, .topnav-summary{ display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:var(--adm-radius-sm, 10px); color:var(--adm-text-secondary, #cbd5e1); } .topnav-link:hover, .topnav-summary:hover{ text-decoration:none; background:rgba(22, 119, 255, .08); color:var(--adm-text, #0f172a); } .topnav-item{ position:relative; } .topnav-item > summary::-webkit-details-marker{ display:none; } .topnav-item > summary{ list-style:none; cursor:pointer; user-select:none; } .topnav-dropdown{ position:absolute; top:calc(100% + 8px); left:0; min-width:180px; background:var(--adm-bg-container, #0f172a); border:1px solid var(--adm-border-color, #334155); border-radius:var(--adm-radius, 12px); padding:10px; box-shadow:0 12px 30px rgba(15, 23, 42, .18); z-index:100; } /* details 未展开时不展示下拉 */ .topnav-item:not([open]) .topnav-dropdown{ display:none; } .topnav-sub{ display:block; padding:9px 10px; border-radius:var(--adm-radius-sm, 10px); color:var(--adm-text, #0f172a); margin:0; } .topnav-sub:hover{ text-decoration:none; background:rgba(22, 119, 255, .08); } .topnav-actions{ display:flex; align-items:center; gap:10px; } .topnav-meta{ margin-top:6px; } /* 移动端:下拉改为文档流(避免 absolute 导致溢出) */ @media (max-width: 768px){ .topnav-row{gap:10px;} .topnav-dropdown{ position:static; min-width:auto; box-shadow:none; margin-top:6px; } } /* 兼容:旧的左侧导航二级分组样式(保留但不再作为主形态) */ .sidebar .nav-group{ margin:10px 0; } .sidebar .nav-group-title{ cursor:pointer; user-select:none; color:#94a3b8; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin:0 0 6px; list-style:none; } .sidebar .nav-group summary::-webkit-details-marker{ display:none; } .sidebar .nav-item--sub{ display:block; padding-left:12px; }