Files
wordpress-theme-aksrt/assets/css/admin/native-ui.css
T
kate522andClaude Fable 5 9805a371d8 feat(admin): rebuild the payment center overview with ECharts analytics
- Overview page: realtime today vs. same time yesterday, 6 KPI cards with
  period-over-period deltas, trend (paid / net / refund curves + order count
  line), category curves, payment method donut, top 10 paid content,
  conversion / close / refund rates, todos and shortcuts
- Date presets, custom range and category filter via
  GET aksrt/v1/admin/pay-overview (manage_options + wp_rest nonce)
- Metrics: paid amount by paid date including later-refunded orders, refunds
  by refund date, net = paid - refund; CNY only, points and recharge excluded,
  foreign-currency orders listed separately; integer cents internally
- Daily records cached per month in transients (today/yesterday live),
  invalidated on order status change and on purge
- ECharts 6.1.0 subset bundled to assets/js/runtime/libs/echarts-pay.min.js
  (npm run build:pay-charts), loaded only on the overview page
- Split payment-attempt methods out of OrderRepositoryCore into
  OrderRepositoryAttempts; remove dead get_stats(), cash_decimal(),
  Order::get_stats() and the old .aksrt-native-links styles

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-11-01 00:22:44 +08:00

556 lines
19 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/*
* AKSRT 原生后台运营页共享 UI(支付中心 / 用户子菜单)。
*
* 只在 NativeUi::SLUGS 列出的页面入队,全部规则限定在 .aksrt-native 下,
* 不影响 WP 其它后台页。色板与圆角对齐 SPA 的 Naive UI 主题(App.vue)。
* 标记由 src/Admin/Native/NativeUi.php 输出。
*/
.aksrt-native {
--an-primary: #18a058;
--an-primary-hover: #36ad6a;
--an-primary-soft: #e8f6ee;
--an-info: #2080f0;
--an-warning: #f0a020;
--an-danger: #d03050;
--an-text: #1f2329;
--an-text-2: #4e5969;
--an-muted: #86909c;
--an-border: #e5e6eb;
--an-border-soft: #f0f1f4;
--an-bg-soft: #f7f8fa;
--an-card: #fff;
--an-radius: 12px;
--an-radius-sm: 8px;
--an-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
--an-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
margin-right: 20px;
color: var(--an-text-2);
font-size: 13px;
}
/* ---------- 页头 ---------- */
.aksrt-native-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
margin: 18px 0 16px;
}
.aksrt-native-header__main { min-width: 0; }
.aksrt-native .aksrt-native-header__title {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
color: var(--an-text);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.aksrt-native-header__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--an-primary);
background: var(--an-primary-soft);
border-radius: 10px;
}
.aksrt-native-header__icon.dashicons:before { font-size: 20px; line-height: 36px; }
.aksrt-native-header__icon.dashicons { width: 36px; height: 36px; }
.aksrt-native-header__desc { margin: 6px 0 0; color: var(--an-muted); }
.aksrt-native-header__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* WP 把 .notice 挪到首个 h1/h2 后;保持与卡片同宽同圆角。 */
.aksrt-native .notice { margin: 0 0 16px; border-radius: var(--an-radius-sm); box-shadow: var(--an-shadow); }
/* ---------- 标签导航(.subsubsub / .nav-tab-wrapper / .aksrt-native-tabs) ---------- */
.aksrt-native .subsubsub,
.aksrt-native-tabs {
display: inline-flex;
flex-wrap: wrap;
float: none;
gap: 4px;
margin: 0 0 16px;
padding: 4px;
color: var(--an-muted);
background: var(--an-card);
border-radius: 10px;
box-shadow: var(--an-shadow);
font-size: 13px;
}
.aksrt-native .subsubsub li { margin: 0; font-size: 0; }
.aksrt-native .subsubsub li > * { font-size: 13px; }
.aksrt-native .subsubsub a,
.aksrt-native-tabs a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
color: var(--an-text-2);
border-radius: 7px;
text-decoration: none;
line-height: 1.4;
transition: background .15s, color .15s;
}
.aksrt-native .subsubsub a:hover,
.aksrt-native-tabs a:hover { color: var(--an-primary); background: var(--an-bg-soft); }
.aksrt-native .subsubsub a.current,
.aksrt-native-tabs a.is-active,
.aksrt-native-tabs a[aria-current="page"] {
color: var(--an-primary);
background: var(--an-primary-soft);
font-weight: 600;
}
.aksrt-native .subsubsub a .count,
.aksrt-native-tabs .count {
padding: 0 6px;
color: inherit;
font-size: 12px;
font-weight: 400;
background: rgba(0, 0, 0, .05);
border-radius: 999px;
}
.aksrt-native .nav-tab-wrapper {
display: flex;
gap: 4px;
margin: 0 0 16px;
padding: 0;
border-bottom: 1px solid var(--an-border);
}
.aksrt-native .nav-tab {
margin: 0 0 -1px;
padding: 8px 14px;
color: var(--an-text-2);
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
font-weight: 500;
}
.aksrt-native .nav-tab:hover { color: var(--an-primary); background: transparent; }
.aksrt-native .nav-tab-active,
.aksrt-native .nav-tab-active:hover { color: var(--an-primary); border-bottom-color: var(--an-primary); background: transparent; }
.aksrt-native-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.aksrt-native-toolbar > .subsubsub,
.aksrt-native-toolbar > .aksrt-native-tabs { margin-bottom: 0; }
/* ---------- 统计卡 ---------- */
.aksrt-native-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
margin: 0 0 16px;
}
.aksrt-native-stat {
--an-tone: var(--an-primary);
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 16px 18px;
color: var(--an-text-2);
background: var(--an-card);
border-radius: var(--an-radius);
box-shadow: var(--an-shadow);
text-decoration: none;
overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
.aksrt-native-stat::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 72px;
height: 72px;
background: radial-gradient(circle at top right, color-mix(in srgb, var(--an-tone) 16%, transparent), transparent 70%);
pointer-events: none;
}
a.aksrt-native-stat:hover,
a.aksrt-native-stat:focus { color: var(--an-text-2); box-shadow: var(--an-shadow-hover); transform: translateY(-1px); }
a.aksrt-native-stat:focus { outline: 2px solid color-mix(in srgb, var(--an-tone) 40%, transparent); outline-offset: 1px; }
.aksrt-native-stat__label { display: flex; align-items: center; gap: 6px; color: var(--an-muted); font-size: 13px; }
.aksrt-native-stat__label .dashicons { width: 16px; height: 16px; color: var(--an-tone); font-size: 16px; }
.aksrt-native-stat__value {
color: var(--an-text);
font-size: 26px;
font-weight: 600;
line-height: 1.2;
font-variant-numeric: tabular-nums;
word-break: break-all;
}
.aksrt-native-stat__unit { margin-right: 2px; color: var(--an-muted); font-size: 14px; font-weight: 400; }
.aksrt-native-stat__hint { color: var(--an-muted); font-size: 12px; }
.aksrt-native-stat--success { --an-tone: var(--an-primary); }
.aksrt-native-stat--info { --an-tone: var(--an-info); }
.aksrt-native-stat--warning { --an-tone: var(--an-warning); }
.aksrt-native-stat--danger { --an-tone: var(--an-danger); }
.aksrt-native-stat--neutral { --an-tone: var(--an-muted); }
.aksrt-native-stat--warning .aksrt-native-stat__value { color: #c27c0e; }
.aksrt-native-stat--danger .aksrt-native-stat__value { color: var(--an-danger); }
/* ---------- 卡片 ---------- */
.aksrt-native-card {
margin: 0 0 16px;
background: var(--an-card);
border-radius: var(--an-radius);
box-shadow: var(--an-shadow);
}
.aksrt-native-card__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--an-border-soft);
}
.aksrt-native .aksrt-native-card__title {
position: relative;
margin: 0;
padding: 0 0 0 12px;
color: var(--an-text);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
.aksrt-native-card__title::before {
content: "";
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: 4px;
background: var(--an-primary);
border-radius: 4px;
}
.aksrt-native-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aksrt-native-card__body { padding: 16px 20px; }
.aksrt-native-card__body > :first-child { margin-top: 0; }
.aksrt-native-card__body > :last-child { margin-bottom: 0; }
.aksrt-native-card--flush > .aksrt-native-card__body { padding: 0; }
.aksrt-native-card__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--an-border-soft);
}
/* 折叠卡片:<details class="aksrt-native-card aksrt-native-collapse"><summary>… */
.aksrt-native-collapse > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
color: var(--an-text);
font-size: 14px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.aksrt-native-collapse > summary::-webkit-details-marker { display: none; }
.aksrt-native-collapse > summary::after {
content: "\f347";
margin-left: auto;
color: var(--an-muted);
font: normal 16px/1 dashicons;
transition: transform .2s;
}
.aksrt-native-collapse[open] > summary { border-bottom: 1px solid var(--an-border-soft); }
.aksrt-native-collapse[open] > summary::after { transform: rotate(180deg); }
.aksrt-native-collapse > summary .dashicons { color: var(--an-primary); }
/* ---------- 筛选栏 ---------- */
.aksrt-native-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
}
.aksrt-native-filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--an-muted); }
.aksrt-native-filters input[type="search"] { min-width: 220px; }
.aksrt-native-filters__spacer { flex: 1 1 auto; }
.aksrt-native-card__body > .aksrt-native-filters + .aksrt-native-filters { margin-top: 10px; }
/* ---------- 表单 ---------- */
.aksrt-native input[type="text"],
.aksrt-native input[type="search"],
.aksrt-native input[type="number"],
.aksrt-native input[type="date"],
.aksrt-native input[type="datetime-local"],
.aksrt-native input[type="email"],
.aksrt-native input[type="url"],
.aksrt-native input[type="password"],
.aksrt-native select,
.aksrt-native textarea {
min-height: 32px;
border-color: var(--an-border);
border-radius: var(--an-radius-sm);
box-shadow: none;
}
.aksrt-native select { padding-right: 28px; }
.aksrt-native input:focus,
.aksrt-native select:focus,
.aksrt-native textarea:focus {
border-color: var(--an-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--an-primary) 20%, transparent);
outline: 0;
}
.aksrt-native-form-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px 16px;
}
.aksrt-native-form-grid .is-wide { grid-column: 1 / -1; }
.aksrt-native-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aksrt-native-field__label { color: var(--an-text); font-weight: 500; }
.aksrt-native-field__hint { color: var(--an-muted); font-size: 12px; }
.aksrt-native-field input,
.aksrt-native-field select,
.aksrt-native-field textarea { width: 100%; max-width: none; }
.aksrt-native-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.aksrt-native .form-table th { color: var(--an-text); font-weight: 500; }
.aksrt-native .form-table td,
.aksrt-native .form-table th { padding-top: 12px; padding-bottom: 12px; }
/* ---------- 按钮 ---------- */
.aksrt-native .button,
.aksrt-native .page-title-action {
min-height: 32px;
padding: 0 14px;
color: var(--an-text-2);
line-height: 30px;
background: #fff;
border-color: var(--an-border);
border-radius: var(--an-radius-sm);
transition: border-color .15s, color .15s, background .15s;
}
.aksrt-native .page-title-action { top: 0; display: inline-flex; align-items: center; }
.aksrt-native .button:hover,
.aksrt-native .button:focus,
.aksrt-native .page-title-action:hover {
color: var(--an-primary);
background: #fff;
border-color: var(--an-primary);
box-shadow: none;
}
.aksrt-native .button-primary,
.aksrt-native .button.button-primary {
color: #fff;
background: var(--an-primary);
border-color: var(--an-primary);
}
.aksrt-native .button-primary:hover,
.aksrt-native .button-primary:focus,
.aksrt-native .button.button-primary:hover {
color: #fff;
background: var(--an-primary-hover);
border-color: var(--an-primary-hover);
}
.aksrt-native .button-small,
.aksrt-native .button.button-small { min-height: 26px; padding: 0 10px; font-size: 12px; line-height: 24px; }
.aksrt-native .button-link-delete,
.aksrt-native .button.is-danger { color: var(--an-danger); }
.aksrt-native .button.is-danger:hover { color: #fff; background: var(--an-danger); border-color: var(--an-danger); }
.aksrt-native .button .dashicons { width: 16px; height: 16px; margin: 0 4px 0 -2px; font-size: 16px; line-height: inherit; vertical-align: -1px; }
.aksrt-native .submit { margin: 0; padding: 0; }
/* 批量操作行:下拉与「应用」按钮锁定同一高度与字号。
WP 核心给 select 14px/line-height:2、给 .button 13px,且 782px 以下再把两者各自放大,
只设 min-height 时两者会因字号、行高和基线对齐不同而错位,这里显式给定。 */
.aksrt-native-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aksrt-native-bulk select,
.aksrt-native-bulk .button {
box-sizing: border-box;
height: 32px;
min-height: 32px;
margin: 0;
font-size: 13px;
line-height: 30px;
vertical-align: middle;
}
.aksrt-native-bulk select { width: auto; max-width: 12.5rem; }
/* ---------- 表格 ---------- */
.aksrt-native-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aksrt-native .widefat,
.aksrt-native .wp-list-table {
border: 0;
border-radius: 0;
box-shadow: none;
}
.aksrt-native .aksrt-native-card .widefat { background: transparent; }
.aksrt-native .widefat thead th,
.aksrt-native .widefat thead td,
.aksrt-native .widefat tfoot th,
.aksrt-native .widefat tfoot td {
padding: 10px 12px;
color: var(--an-muted);
font-size: 12px;
font-weight: 500;
background: var(--an-bg-soft);
border-bottom: 1px solid var(--an-border-soft);
}
.aksrt-native .widefat thead th a { color: var(--an-muted); }
.aksrt-native .widefat td,
.aksrt-native .widefat tbody th {
padding: 12px;
color: var(--an-text-2);
vertical-align: middle;
border-bottom: 1px solid var(--an-border-soft);
}
.aksrt-native .widefat tbody tr:last-child > td,
.aksrt-native .widefat tbody tr:last-child > th { border-bottom: 0; }
.aksrt-native .striped > tbody > :nth-child(odd) { background: transparent; }
.aksrt-native .widefat tbody tr { transition: background .15s; }
.aksrt-native .widefat tbody tr:hover { background: #fafbfc; }
.aksrt-native .widefat .check-column { width: 2.4em; padding: 12px 0 12px 12px; vertical-align: middle; }
.aksrt-native .widefat thead .check-column { padding-top: 10px; padding-bottom: 10px; }
.aksrt-native .widefat .check-column input { margin: 0; }
.aksrt-native .widefat code,
.aksrt-native-mono {
padding: 1px 6px;
color: var(--an-text);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
background: var(--an-bg-soft);
border-radius: 4px;
}
.aksrt-native .row-actions { color: var(--an-muted); }
.aksrt-native .row-title,
.aksrt-native .widefat strong { color: var(--an-text); }
.aksrt-native-card > .aksrt-native-card__body > .widefat:first-child thead th:first-child,
.aksrt-native-card--flush .widefat thead > tr > :first-child { padding-left: 20px; }
.aksrt-native-card--flush .widefat tbody > tr > :first-child { padding-left: 20px; }
.aksrt-native-card--flush .widefat thead > tr > :last-child,
.aksrt-native-card--flush .widefat tbody > tr > :last-child { padding-right: 20px; }
.aksrt-native-card--flush .widefat thead th:first-child,
.aksrt-native-card--flush .widefat thead td:first-child { border-top-left-radius: 0; }
/* 行内操作表单:单元格里的一组小控件 */
.aksrt-native-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
}
.aksrt-native-inline + .aksrt-native-inline { margin-top: 6px; }
.aksrt-native-inline input[type="text"] { min-width: 0; width: 140px; }
/* 用户单元格:头像 + 名称 + 次要信息 */
.aksrt-native-user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--an-text); text-decoration: none; }
.aksrt-native-user img { flex: none; border-radius: 50%; }
.aksrt-native-user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aksrt-native-user__meta { display: block; color: var(--an-muted); font-size: 12px; }
/* ---------- 徽标 ---------- */
.aksrt-native-badge {
--an-tone: var(--an-muted);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 1px 8px;
color: var(--an-tone);
font-size: 12px;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
background: color-mix(in srgb, var(--an-tone) 10%, #fff);
border-radius: 999px;
}
.aksrt-native-badge.has-dot::before {
content: "";
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
}
.aksrt-native-badge--success { --an-tone: var(--an-primary); }
.aksrt-native-badge--info { --an-tone: var(--an-info); }
.aksrt-native-badge--warning { --an-tone: #c27c0e; }
.aksrt-native-badge--danger { --an-tone: var(--an-danger); }
.aksrt-native-badge--neutral { --an-tone: #6b7785; }
.aksrt-native-badge--primary { --an-tone: #7c4dff; }
/* ---------- 空状态 / 提示 ---------- */
.aksrt-native-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 40px 16px;
color: var(--an-muted);
text-align: center;
}
.aksrt-native-empty .dashicons { width: 40px; height: 40px; color: #c9cdd4; font-size: 40px; }
.aksrt-native-empty__title { color: var(--an-text-2); font-size: 14px; font-weight: 500; }
.aksrt-native .widefat td.aksrt-native-empty-cell { padding: 0; }
.aksrt-native-muted,
.aksrt-native .description { color: var(--an-muted); }
.aksrt-native-text--success { color: var(--an-primary); }
.aksrt-native-text--info { color: var(--an-info); }
.aksrt-native-text--warning { color: #c27c0e; }
.aksrt-native-text--danger { color: var(--an-danger); }
.aksrt-native-amount { color: var(--an-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.aksrt-native-amount.is-positive { color: var(--an-primary); }
.aksrt-native-amount.is-negative { color: var(--an-danger); }
.aksrt-native-callout {
margin: 0 0 16px;
padding: 12px 16px;
color: var(--an-text-2);
background: var(--an-bg-soft);
border-left: 3px solid var(--an-info);
border-radius: var(--an-radius-sm);
}
.aksrt-native-callout.is-warning { background: #fff8eb; border-left-color: var(--an-warning); }
.aksrt-native-callout.is-danger { background: #fdf0f2; border-left-color: var(--an-danger); }
/* ---------- 分页条(AdminListPagination / paginate_links) ---------- */
.aksrt-native .tablenav { height: auto; margin: 0; padding: 12px 20px; }
.aksrt-native .aksrt-native-card .tablenav.bottom { border-top: 1px solid var(--an-border-soft); }
.aksrt-native .tablenav-pages { float: right; margin: 0; color: var(--an-muted); }
.aksrt-native .tablenav-pages .button,
.aksrt-native .tablenav-pages .page-numbers {
min-width: 30px;
min-height: 30px;
padding: 0 8px;
line-height: 28px;
text-align: center;
}
.aksrt-native .tablenav-pages .page-numbers {
display: inline-block;
color: var(--an-text-2);
border: 1px solid var(--an-border);
border-radius: var(--an-radius-sm);
text-decoration: none;
}
.aksrt-native .tablenav-pages .page-numbers.current { color: #fff; background: var(--an-primary); border-color: var(--an-primary); }
.aksrt-native .tablenav-pages .page-numbers.dots { border-color: transparent; }
.aksrt-native .tablenav-pages .button.disabled { color: #c9cdd4 !important; background: var(--an-bg-soft) !important; border-color: var(--an-border-soft) !important; }
.aksrt-native .tablenav .actions { padding: 0; }
.aksrt-native .tablenav::after { content: ""; display: table; clear: both; }
@media (max-width: 782px) {
.aksrt-native { margin-right: 10px; }
.aksrt-native-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aksrt-native-stat { padding: 12px 14px; }
.aksrt-native-stat__value { font-size: 20px; }
.aksrt-native-card__head,
.aksrt-native-card__body,
.aksrt-native-collapse > summary { padding-left: 14px; padding-right: 14px; }
.aksrt-native .tablenav { padding: 10px 14px; }
.aksrt-native .tablenav-pages { float: none; }
.aksrt-native-filters input[type="search"] { min-width: 0; flex: 1 1 100%; }
}