进行了一些优化

2026-08-27 02:19:41 +08:00
parent 02d456b00b
commit c6e0423e46
2 changed files with 539 additions and 243 deletions
@@ -1,3 +1,13 @@
+/**
+ * AKSRT download / cashier modal.
+ *
+ * 下载弹窗走主题 design token（core/tokens.css）；收银台沿用参考实现的
+ * colorful-header 结构（pay-card 契约测试锁定的类名不可改动）。
+ */
+
+/* ============================================================
+ * 弹窗外壳
+ * ============================================================ */
 .aksrt-dl-modal {
  position: fixed;
  inset: 0;
@@ -14,13 +24,21 @@
 .aksrt-dl-modal__backdrop {
  position: absolute;
  inset: 0;
-  background: rgb(0 0 0 / 55%);
+  background: rgb(15 23 42 / 55%);
+}
+
+@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .aksrt-dl-modal__backdrop {
+    background: rgb(15 23 42 / 38%);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
 }

 .aksrt-dl-modal__dialog {
  position: relative;
  z-index: 1;
-  width: 400px;
+  width: 420px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
 }
@@ -33,173 +51,347 @@
  color: var(--main-color, #111827);
  background: var(--main-bg-color, #fff);
  border: 0;
-  border-radius: var(--main-radius, 8px);
-  box-shadow: 0 24px 56px rgb(15 23 42 / 24%);
+  border-radius: var(--radius-xl, 12px);
+  box-shadow: var(--shadow-lg, 0 12px 32px rgba(18, 18, 18, 0.1));
 }

-.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel {
-  padding: 26px 28px 24px;
+.aksrt-dl-modal.is-open .aksrt-dl-modal__dialog {
+  animation: aksrt-dl-modal-in 0.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
 }

+@keyframes aksrt-dl-modal-in {
+  from {
+    transform: translateY(10px) scale(0.97);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+/* 关闭按钮：下载视图中悬浮在渐变头部上 */
 .aksrt-dl-modal__close,
 .aksrt-cashier__close {
  appearance: none;
  position: absolute;
  z-index: 9;
-  top: 10px;
-  right: 12px;
+  top: 12px;
+  right: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
  padding: 0;
  color: var(--muted-color, #6b7280);
-  font: 400 24px/1 sans-serif;
+  font: 400 20px/1 sans-serif;
  background: transparent;
  border: 0;
+  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
 }

+.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close {
+  color: #fff;
+  background: rgb(255 255 255 / 22%);
+}
+
+.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close:hover {
+  background: rgb(255 255 255 / 34%);
+}
+
+.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close:focus-visible {
+  outline: 2px solid rgb(255 255 255 / 70%);
+  outline-offset: 1px;
+}
+
 .aksrt-dl-modal.is-cashier > .aksrt-dl-modal__dialog > .aksrt-dl-modal__panel > .aksrt-dl-modal__close {
  display: none;
 }

+/* ============================================================
+ * 主题化下载视图（成功 / 错误 / 扫码共用外壳）
+ * ============================================================ */
+.aksrt-dl-view {
+  /* 配色变量：按 dlv-* 修饰符整体换肤，按钮与阴影自动跟随 */
+  --dl-from: var(--color-primary, #f04494);
+  --dl-to: var(--color-accent, #18a058);
+  --dl-text: #fff;
+}
+
+.aksrt-dl-view.dlv-brand {
+  --dl-to: var(--aksrt-purple, #8b5cf6);
+}
+
+.aksrt-dl-view.dlv-info {
+  --dl-from: var(--aksrt-blue, #3b82f6);
+  --dl-to: var(--aksrt-cyan, #06b6d4);
+}
+
+.aksrt-dl-view.dlv-warn {
+  --dl-from: var(--color-warning, #f59e0b);
+  --dl-to: var(--aksrt-orange, #f97316);
+}
+
+.aksrt-dl-view.dlv-error {
+  --dl-from: var(--color-error, #ef4444);
+  --dl-to: #dc2626;
+}
+
+.aksrt-dl-view.dlv-vip {
+  --dl-from: var(--aksrt-vip-gold-2, #fda085);
+  --dl-to: var(--aksrt-vip-gold-1, #f6d365);
+  --dl-text: #6b4a12;
+}
+
+.aksrt-dl-modal__hero {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 26px 52px 22px;
+  overflow: hidden;
+  color: var(--dl-text);
+  text-align: center;
+  background: linear-gradient(135deg, var(--dl-from), var(--dl-to));
+}
+
+/* 装饰光斑（对应 pay-widget 的 orb 语言） */
+.aksrt-dl-modal__hero::before,
+.aksrt-dl-modal__hero::after {
+  position: absolute;
+  border-radius: 100%;
+  background: rgb(255 255 255 / 14%);
+  content: '';
+}
+
+.aksrt-dl-modal__hero::before {
+  top: -46px;
+  right: -34px;
+  width: 150px;
+  height: 150px;
+}
+
+.aksrt-dl-modal__hero::after {
+  bottom: -60px;
+  left: -40px;
+  width: 130px;
+  height: 130px;
+  opacity: 0.55;
+}
+
+.aksrt-dl-modal__hero-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  font-size: 25px;
+  background: rgb(255 255 255 / 22%);
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
+}
+
 .aksrt-dl-modal__title {
-  margin: 0 28px 18px 0;
-  color: var(--main-color, #111827);
-  font: 700 20px/1.3 inherit;
+  margin: 0;
+  color: inherit;
+  font: 800 20px/1.3 inherit;
+}
+
+.aksrt-dl-modal__subtitle {
+  margin: -2px 0 0;
+  font-size: 12.5px;
+  line-height: 1.55;
+  opacity: 0.82;
+}
+
+.aksrt-dl-modal__content {
+  padding: 18px 22px 22px;
 }

 .aksrt-dl-modal__msg {
-  margin: 0 0 18px;
-  color: var(--muted-color, #4b5563);
+  margin: 0 0 14px;
+  color: var(--muted-color, #777);
  font-size: 14px;
  line-height: 1.65;
 }

-.aksrt-dl-modal__msg--warn {
-  padding: 12px 0;
-  color: #92400e;
-  background: transparent;
-  border: 0;
-  border-top: 1px solid #fde68a;
-  border-bottom: 1px solid #fde68a;
-}
-
-.aksrt-dl-modal__row {
-  display: grid;
-  grid-template-columns: 64px minmax(0, 1fr) 72px;
-  gap: 12px;
-  align-items: center;
-  padding: 12px 0;
-  margin: 0 0 18px;
-  border-top: 1px solid var(--main-border-color, #e5e7eb);
-  border-bottom: 1px solid var(--main-border-color, #e5e7eb);
-}
-
-.aksrt-dl-modal__label {
-  color: var(--muted-color, #6b7280);
+.aksrt-dl-modal__alert {
+  margin: 0 0 14px;
+  padding: 11px 13px;
  font-size: 13px;
-  font-weight: 600;
-  white-space: nowrap;
+  line-height: 1.6;
+  border-radius: var(--radius, 8px);
+}
+
+.aksrt-dl-modal__alert--warn {
+  color: var(--color-warning-text, #ad6800);
+  background: var(--color-warning-bg, #fffbe6);
+  border: 1px solid #fde68a;
+}
+
+/* 提取码卡片 */
+.aksrt-dl-modal__code-card {
+  padding: 13px 15px;
+  margin: 0 0 14px;
+  background: var(--surface-2, rgba(0, 0, 0, 0.04));
+  border: 1px dashed var(--color-line-stronger, rgba(50, 50, 50, 0.12));
+  border-radius: 10px;
+}
+
+.aksrt-dl-modal__code-caption {
+  margin-bottom: 7px;
+  color: var(--muted-color, #777);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.aksrt-dl-modal__code-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
 }

 .aksrt-dl-modal__code {
  display: block;
  min-width: 0;
  overflow: hidden;
-  color: var(--main-color, #111827);
-  font: 800 18px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  letter-spacing: 0.06em;
+  color: var(--color-primary, #f04494);
+  font: 800 20px/1.25 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

+.aksrt-dl-modal__code--wrap {
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  word-break: break-all;
+  white-space: normal;
+}
+
 .aksrt-dl-modal__copy {
-  appearance: none !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 72px !important;
-  height: 32px !important;
-  padding: 0 !important;
-  overflow: visible !important;
-  color: #2563eb !important;
-  font-family: inherit !important;
-  font-size: 0 !important;
-  font-weight: 700 !important;
-  line-height: 1 !important;
-  text-indent: 0 !important;
-  white-space: nowrap !important;
-  cursor: pointer !important;
-  visibility: visible !important;
-  background: #eff6ff !important;
-  border: 1px solid #bfdbfe !important;
-  border-radius: 8px !important;
-  opacity: 1 !important;
-  -webkit-text-fill-color: #2563eb !important;
-}
-
-.aksrt-dl-modal__copy::before,
-.aksrt-dl-modal__copy::after {
-  display: none !important;
-  content: none !important;
-}
-
-.aksrt-dl-modal__copy:hover {
-  color: #1d4ed8 !important;
-  background: #dbeafe !important;
-  border-color: #93c5fd !important;
-  -webkit-text-fill-color: #1d4ed8 !important;
-}
-
-.aksrt-dl-modal__copy-text {
-  position: relative !important;
-  z-index: 2 !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  color: #2563eb !important;
-  font-family: inherit !important;
-  font-size: 13px !important;
-  font-weight: 700 !important;
-  line-height: 1 !important;
-  text-indent: 0 !important;
-  white-space: nowrap !important;
-  visibility: visible !important;
-  opacity: 1 !important;
-  -webkit-text-fill-color: #2563eb !important;
-}
-
-.aksrt-dl-modal__copy:hover .aksrt-dl-modal__copy-text {
-  color: #1d4ed8 !important;
-  -webkit-text-fill-color: #1d4ed8 !important;
-}
-
-.aksrt-dl-modal__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-  padding-top: 4px;
-}
-
-.aksrt-dl-modal__download {
+  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  min-height: 40px;
-  padding: 0 18px;
-  text-decoration: none;
-  cursor: pointer;
+  flex: 0 0 auto;
+  height: 30px;
+  padding: 0 14px;
+  color: var(--color-primary, #f04494);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  background: var(--color-primary-soft, rgba(240, 68, 148, 0.1));
  border: 0;
-  border-radius: 9px;
+  border-radius: 999px;
+  cursor: pointer;
 }

-.aksrt-dl-modal__balance {
-  margin-left: auto;
-  color: var(--muted-color, #6b7280);
-  font-size: 13px;
-  white-space: nowrap;
+.aksrt-dl-modal__copy:hover {
+  background: var(--focus-color-opacity3, rgba(240, 68, 148, 0.3));
 }

+.aksrt-dl-modal__copy:focus-visible {
+  outline: 2px solid var(--color-primary, #f04494);
+  outline-offset: 1px;
+}
+
+.aksrt-dl-modal__copy.is-done {
+  color: var(--color-success, #10b981);
+  background: var(--aksrt-green-soft, rgba(16, 185, 129, 0.12));
+}
+
+/* 信息 chips 行 */
+.aksrt-dl-modal__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 16px;
+}
+
+.aksrt-dl-modal__chip {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 5px 11px;
+  color: var(--muted-color, #777);
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--surface-2, rgba(0, 0, 0, 0.04));
+  border-radius: 999px;
+}
+
+.aksrt-dl-modal__chip i {
+  color: var(--color-primary, #f04494);
+  font-size: 12px;
+}
+
+/* 操作按钮 */
+.aksrt-dl-modal__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.aksrt-dl-modal__btn {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 18px;
+  color: var(--dl-text, #fff);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  text-decoration: none;
+  background: linear-gradient(135deg, var(--dl-from, var(--color-primary, #f04494)), var(--dl-to, var(--color-accent, #18a058)));
+  border: 0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
+}
+
+.aksrt-dl-modal__btn:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.05);
+}
+
+.aksrt-dl-modal__btn:active {
+  transform: scale(0.98);
+}
+
+.aksrt-dl-modal__btn:focus-visible {
+  outline: 2px solid var(--color-primary, #f04494);
+  outline-offset: 2px;
+}
+
+.aksrt-dl-modal__download {
+  min-height: 48px;
+  font-size: 15px;
+  box-shadow: 0 10px 20px -8px var(--dl-from, var(--color-primary, #f04494));
+}
+
+.aksrt-dl-modal__download:hover {
+  box-shadow: 0 12px 24px -8px var(--dl-from, var(--color-primary, #f04494));
+}
+
+/* ============================================================
+ * 收银台（参考实现契约结构）
+ * ============================================================ */
 .aksrt-dl-modal.is-cashier .aksrt-dl-modal__body {
  position: relative;
  min-height: 120px;
@@ -224,7 +416,7 @@
  align-items: center;
  justify-content: center;
  height: 120px;
-  border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
+  border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0;
 }

 .aksrt-dl-modal .colorful-bg > .colorful-make,
@@ -287,6 +479,7 @@
  text-align: center;
 }

+/* 收银台内部使用的工具类作用域 */
 .aksrt-dl-modal .text-center {
  text-align: center;
 }
@@ -421,7 +614,7 @@
 .aksrt-dl-modal .muted-box {
  padding: 10px;
  background: var(--muted-border-color, rgb(132 145 165 / 10%));
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
 }

 .aksrt-dl-modal .pay-tag {
@@ -431,7 +624,7 @@
  font-size: 12px;
  line-height: 1.4;
  background: rgb(41 151 247 / 10%);
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
 }

 .aksrt-cashier__price-row {
@@ -477,7 +670,7 @@
  line-height: 16px;
  vertical-align: 1px;
  background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
 }

 .aksrt-cashier__asset-icon {
@@ -492,7 +685,7 @@
  padding: 5px;
  text-align: center;
  border: 1px solid var(--main-border-color, rgb(132 145 165 / 20%));
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
 }

 .aksrt-dl-modal .payment-method-radio > * {
@@ -534,7 +727,7 @@
  font: inherit;
  background: var(--main-bg-color, #fff);
  border: 1px solid var(--main-border-color, #e5e7eb);
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
 }

 .aksrt-dl-modal .relative {
@@ -570,7 +763,7 @@
  line-height: 1.5;
  text-align: center;
  background: rgb(255 84 115 / 10%);
-  border-radius: 4px;
+  border-radius: var(--radius-sm, 4px);
 }

 .aksrt-dl-modal .but.initiate-pay {
@@ -600,6 +793,9 @@
  text-decoration: none;
 }

+/* ============================================================
+ * 页面内已购信息块（下载区，随本文件一起加载）
+ * ============================================================ */
 .resource-download-box__attrs {
  display: grid;
  gap: 6px;
@@ -665,38 +861,29 @@ body.aksrt-dl-modal-open {
 }

@media (max-width: 480px) {
-  .aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel {
-    padding: 24px 20px 22px;
+  .aksrt-dl-modal__hero {
+    padding: 24px 44px 20px;
  }

-  .aksrt-dl-modal__row {
-    grid-template-columns: 1fr 72px;
-    gap: 8px 12px;
-  }
-
-  .aksrt-dl-modal__label {
-    grid-column: 1 / -1;
+  .aksrt-dl-modal__content {
+    padding: 16px 16px 18px;
  }

  .aksrt-dl-modal__code {
-    font-size: 17px;
+    font-size: 18px;
  }

-  .aksrt-dl-modal__actions {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .aksrt-dl-modal__download {
-    width: 100%;
-  }
-
-  .aksrt-dl-modal__balance {
-    margin-left: 0;
+  .aksrt-dl-modal__chip {
+    padding: 4px 10px;
+    font-size: 11.5px;
  }
 }

@media (prefers-reduced-motion: reduce) {
+  .aksrt-dl-modal.is-open .aksrt-dl-modal__dialog {
+    animation: none;
+  }
+
  .aksrt-dl-modal .colorful-bg > .colorful-make {
    animation: none;
  }
@@ -6,6 +6,9 @@
 *   - 调 POST /aksrt/v1/download/request
 *   - 弹窗显示下载链接（含提取码）
 *
+ * 弹窗视觉走主题 design token（见 assets/css/frontend/cms-download.css），
+ * 付费收银台沿用参考实现的 colorful header 结构。
+ *
 * 依赖：
 *   - window.aksrtData.{ ajaxUrl, nonce, siteUrl }
 *   - 主题已加载 fetch (现代浏览器)
@@ -17,8 +20,6 @@
 	const REST_BASE = window.aksrtData.siteUrl ? window.aksrtData.siteUrl.replace(/\/$/, '') + '/wp-json/aksrt/v1' : '/wp-json/aksrt/v1';
 	const PAY_CONTENT_PATH = '/pay/content/';

-	function tt(key, zh) { return zh; }
-
 	function escapeHtml(value) {
 		return String(value == null ? '' : value)
 			.replace(/&/g, '&amp;')
@@ -78,7 +79,7 @@
 			'<div class="aksrt-dl-modal__backdrop" data-close></div>' +
 			'<div class="aksrt-dl-modal__dialog modal-mini">' +
 			'  <div class="aksrt-dl-modal__panel modal-content" role="document" tabindex="-1">' +
-			'    <button type="button" class="aksrt-dl-modal__close" aria-label="' + tt('close', '关闭') + '" data-close>×</button>' +
+			'    <button type="button" class="aksrt-dl-modal__close" aria-label="关闭" data-close>×</button>' +
 			'    <div class="aksrt-dl-modal__body" data-body></div>' +
 			'  </div>' +
 			'</div>';
@@ -136,52 +137,106 @@
 		lastFocusedElement = null;
 	}

+	// ===== 统一视图壳（下载 / 错误 / 扫码共用主题化外观） =====
+	// variant 决定 hero 渐变配色（对应 CSS 的 .dlv-* 修饰符）。
+	const DL_VIEWS = {
+		success:  { variant: 'success', icon: 'fa-cloud-download-alt', title: '下载已就绪' },
+		login:    { variant: 'info',    icon: 'fa-user-lock',          title: '请先登录' },
+		purchase: { variant: 'brand',   icon: 'fa-shopping-cart',      title: '请先购买' },
+		vip:      { variant: 'vip',     icon: 'fa-gem',                title: '会员专属' },
+		credits:  { variant: 'warn',    icon: 'fa-coins',              title: '积分不足' },
+		quota:    { variant: 'warn',    icon: 'fa-hourglass-half',     title: '今日免费额度已用完' },
+		captcha:  { variant: 'error',   icon: 'fa-shield-alt',         title: '验证失败' },
+		error:    { variant: 'error',   icon: 'fa-exclamation-circle', title: '下载失败' },
+		pay:      { variant: 'info',    icon: 'fa-qrcode',             title: '扫码支付' },
+	};
+
+	function dlActionButton(action) {
+		if (!action) return '';
+		const tag = action.kind === 'link' ? 'a' : 'button';
+		const cls = 'aksrt-dl-modal__btn' + (action.cls ? ' ' + action.cls : '');
+		const attrs = [
+			'class="' + cls + '"',
+			action.url ? 'href="' + escapeAttr(action.url) + '"' : '',
+			action.attrs || '',
+		].filter(Boolean).join(' ');
+		return '<' + tag + ' ' + attrs + '>' +
+			'<i class="fa fas ' + (action.icon || 'fa-arrow-circle-right') + '" aria-hidden="true"></i>' +
+			'<span>' + escapeHtml(action.label) + '</span>' +
+			'</' + tag + '>';
+	}
+
+	function dlView(viewKey, options) {
+		const meta = DL_VIEWS[viewKey] || DL_VIEWS.error;
+		options = options || {};
+		let html = '<div class="aksrt-dl-view dlv-' + meta.variant + '">';
+		html += '<div class="aksrt-dl-modal__hero">';
+		html += '<div class="aksrt-dl-modal__hero-icon"><i class="fa fas ' + meta.icon + '" aria-hidden="true"></i></div>';
+		html += '<h3 class="aksrt-dl-modal__title">' + (options.title || meta.title) + '</h3>';
+		if (options.subtitle) {
+			html += '<p class="aksrt-dl-modal__subtitle">' + escapeHtml(options.subtitle) + '</p>';
+		}
+		html += '</div>';
+		html += '<div class="aksrt-dl-modal__content">';
+		html += options.body || '';
+		if (options.actions && options.actions.length) {
+			html += '<div class="aksrt-dl-modal__actions">' +
+				options.actions.map(dlActionButton).join('') +
+				'</div>';
+		}
+		html += '</div></div>';
+		return html;
+	}
+
 	// ===== 错误提示渲染 =====
 	function renderError(msg, data, returnFocusEl, code) {
-		let title = tt('failed', '下载失败');
-		let extra = '';
+		let viewKey = 'error';
+		let subtitle = '';
+		let action = null;

-		if (code === 'aksrt_need_login' && data && data.login_url) {
-			title = tt('need_login', '请先登录');
-			msg = tt('login_hint', '登录后即可继续下载，访客不可使用此资源。');
-			extra = '<a class="btn-primary btn-sm" href="' + data.login_url + '">' + tt('go_login', '前往登录') + '</a>';
+		data = data || {};
+		msg = msg || '';
+
+		if (code === 'aksrt_need_login') {
+			viewKey = 'login';
+			msg = data.login_url ? '登录后即可继续下载，访客不可使用此资源。' : (msg || '无下载权限。');
+			if (data.login_url) action = { kind: 'link', url: data.login_url, label: '前往登录', icon: 'fa-sign-in-alt' };
 		} else if (code === 'aksrt_need_purchase') {
-			title = tt('need_purchase', '请先购买');
-			msg = msg || tt('purchase_hint', '请先完成购买后再下载该资源。');
-			extra = '<button type="button" class="btn-primary btn-sm" data-aksrt-open-cashier="' + escapeAttr((data && data.post_id) || '') + '">' + tt('go_buy', '去购买') + '</button>';
+			viewKey = 'purchase';
+			msg = msg || '请先完成购买后再下载该资源。';
+			if (data.post_id) {
+				action = { kind: 'button', label: '去购买', icon: 'fa-shopping-cart', attrs: 'type="button" data-aksrt-open-cashier="' + escapeAttr(data.post_id) + '"' };
+			}
 		} else if (code === 'aksrt_need_vip') {
-			title = tt('need_vip', '会员专属');
-			msg = msg || tt('vip_hint', '该资源仅限会员购买/下载。');
-			if (data && data.vip_url) {
-				extra = '<a class="btn-primary btn-sm" href="' + escapeAttr(data.vip_url) + '">' + tt('go_vip', '开通会员') + '</a>';
-			}
+			viewKey = 'vip';
+			msg = msg || '该资源仅限会员购买/下载。';
+			subtitle = '开通会员即可解锁本资源';
+			if (data.vip_url) action = { kind: 'link', url: data.vip_url, label: '开通会员', icon: 'fa-gem' };
 		} else if (code === 'aksrt_points_insufficient' || code === 'aksrt_balance_insufficient') {
-			title = tt('credit_low', '积分不够');
-			const balance = typeof (data && data.balance) === 'number' ? data.balance : 0;
-			const cost = typeof (data && data.cost) === 'number' ? data.cost : 0;
-			msg = tt('credit_hint',
-				'当前余额 ' + balance + ' 积分，需要 ' + cost + ' 积分。可通过签到、阅读、邀请好友等方式获取积分。'
-			);
-			if (data && data.credits_url) {
-				extra = '<a class="btn-primary btn-sm" href="' + escapeAttr(data.credits_url) + '">' + tt('my_points', '我的积分') + '</a>';
-			}
+			viewKey = 'credits';
+			const balance = typeof data.balance === 'number' ? data.balance : 0;
+			const cost = typeof data.cost === 'number' ? data.cost : 0;
+			msg = '当前余额 ' + balance + ' 积分，需要 ' + cost + ' 积分。可通过签到、阅读、邀请好友等方式获取积分。';
+			if (data.credits_url) action = { kind: 'link', url: data.credits_url, label: '我的积分', icon: 'fa-coins' };
 		} else if (code === 'aksrt_download_limit') {
-			title = tt('quota_over', '今日免费额度已用完');
-			msg = msg || tt('quota_hint', '您今日下载免费资源个数已超限，请明日再下载。');
-			if (data && data.allow_limit_over && data.post_id) {
-				extra = '<button type="button" class="btn-primary btn-sm" data-aksrt-open-cashier="' + escapeAttr(data.post_id) + '" data-price-type="download_limit_over">' + tt('buy_over', '立即购买') + '</button>';
+			viewKey = 'quota';
+			msg = msg || '您今日下载免费资源个数已超限，请明日再下载。';
+			if (data.allow_limit_over && data.post_id) {
+				action = { kind: 'button', label: '立即购买', icon: 'fa-shopping-cart', attrs: 'type="button" data-aksrt-open-cashier="' + escapeAttr(data.post_id) + '" data-price-type="download_limit_over"' };
 			}
 		} else if (code === 'aksrt_captcha_failed') {
-			title = tt('captcha_fail', '验证失败');
-			msg = msg || tt('captcha_retry', '人机验证失败，请重试。');
-		} else if (data && data.login_url) {
-			extra = '<a class="btn-primary btn-sm" href="' + data.login_url + '">' + tt('go_login', '前往登录') + '</a>';
+			viewKey = 'captcha';
+			msg = msg || '人机验证失败，请重试。';
+		} else if (!action && data.login_url) {
+			action = { kind: 'link', url: data.login_url, label: '前往登录', icon: 'fa-sign-in-alt' };
 		}

 		open(
-			'<h3 class="aksrt-dl-modal__title">' + title + '</h3>' +
-			'<p class="aksrt-dl-modal__msg">' + (msg || '') + '</p>' +
-			(extra ? '<div class="aksrt-dl-modal__actions">' + extra + '</div>' : ''),
+			dlView(viewKey, {
+				subtitle: subtitle,
+				body: msg ? '<p class="aksrt-dl-modal__msg">' + escapeHtml(msg) + '</p>' : '',
+				actions: action ? [action] : [],
+			}),
 			returnFocusEl
 		);

@@ -197,22 +252,60 @@
 	}

 	// ===== 成功渲染 =====
+	function metaChip(icon, label) {
+		return '<span class="aksrt-dl-modal__chip"><i class="fa fas ' + icon + '" aria-hidden="true"></i>' + escapeHtml(label) + '</span>';
+	}
+
 	function renderSuccess(payload, returnFocusEl) {
+		payload = payload || {};
 		const code = String(payload.extract_code || '').trim();
 		const has = !!payload.has_extract || code !== '';
 		const safeCode = escapeHtml(code);
 		const safeCodeAttr = escapeAttr(code);
-		const dlUrl = escapeAttr(payload.dl_url || '#');
-		const extractHtml = code !== ''
-			? '<div class="aksrt-dl-modal__row"><span class="aksrt-dl-modal__label">' + tt('extract', '提取码') + '</span><code class="aksrt-dl-modal__code">' + safeCode + '</code><button type="button" class="aksrt-dl-modal__copy" data-copy="' + safeCodeAttr + '"><span class="aksrt-dl-modal__copy-text">' + tt('copy', '复制') + '</span></button></div>'
-			: (has ? '<p class="aksrt-dl-modal__msg aksrt-dl-modal__msg--warn">' + tt('extract_missing', '下载源标记了提取码，但接口未返回具体内容，请检查资源下载源的 extract_code 字段。') + '</p>' : '');
+		const expiresIn = typeof payload.expires_in === 'number' && payload.expires_in > 0
+			? Math.max(1, Math.round(payload.expires_in / 60))
+			: 10;
+
+		let body = '';
+		if (code !== '') {
+			body +=
+				'<div class="aksrt-dl-modal__code-card">' +
+				'  <div class="aksrt-dl-modal__code-caption">网盘提取码</div>' +
+				'  <div class="aksrt-dl-modal__code-row">' +
+				'    <code class="aksrt-dl-modal__code">' + safeCode + '</code>' +
+				'    <button type="button" class="aksrt-dl-modal__copy" data-copy="' + safeCodeAttr + '"><span class="aksrt-dl-modal__copy-text">复制</span></button>' +
+				'  </div>' +
+				'</div>';
+		} else if (has) {
+			body += '<p class="aksrt-dl-modal__alert aksrt-dl-modal__alert--warn">下载源标记了提取码，但接口未返回具体内容，请检查资源下载源的 extract_code 字段。</p>';
+		} else {
+			body += '<p class="aksrt-dl-modal__msg">点击下方按钮开始下载，文件请及时保存到本地。</p>';
+		}
+
+		const chips = [];
+		const sourceLabel = String(payload.source_label || '').trim();
+		if (sourceLabel !== '') {
+			chips.push('<span class="aksrt-dl-modal__chip"><i class="fa fas fa-box" aria-hidden="true"></i>' + escapeHtml(sourceLabel) + '</span>');
+		}
+		chips.push(metaChip('fa-clock', '链接 ' + expiresIn + ' 分钟内有效'));
+		if (typeof payload.balance === 'number') {
+			chips.push(metaChip('fa-coins', '积分余额 ' + payload.balance));
+		}
+		body += '<div class="aksrt-dl-modal__meta">' + chips.join('') + '</div>';
+
 		open(
-			'<h3 class="aksrt-dl-modal__title">' + tt('ready', '下载已就绪') + '</h3>' +
-			(extractHtml || '<p class="aksrt-dl-modal__msg">' + tt('hint', '点击下方按钮开始下载，链接 10 分钟内有效。') + '</p>') +
-			'<div class="aksrt-dl-modal__actions">' +
-			'  <a class="btn-primary aksrt-dl-modal__download" href="' + dlUrl + '" target="_blank" rel="noopener noreferrer">' + tt('go', '立即下载') + '</a>' +
-			(typeof payload.balance === 'number' ? '  <span class="aksrt-dl-modal__balance">' + tt('balance', '余额：') + payload.balance + '</span>' : '') +
-			'</div>',
+			dlView('success', {
+				subtitle: '下载链接已生成，请及时将文件保存到本地。',
+				body: body,
+				actions: [{
+					kind: 'link',
+					url: payload.dl_url || '#',
+					label: '立即下载',
+					icon: 'fa-download',
+					cls: 'aksrt-dl-modal__download',
+					attrs: 'target="_blank" rel="noopener noreferrer"',
+				}],
+			}),
 			returnFocusEl
 		);

@@ -223,8 +316,12 @@
 				const label = btn.querySelector('.aksrt-dl-modal__copy-text') || btn;
 				if (navigator.clipboard) {
 					navigator.clipboard.writeText(text).then(function () {
-						label.textContent = tt('copied', '已复制');
-						setTimeout(function () { label.textContent = tt('copy', '复制'); }, 2000);
+						label.textContent = '已复制';
+						btn.classList.add('is-done');
+						setTimeout(function () {
+							label.textContent = '复制';
+							btn.classList.remove('is-done');
+						}, 2000);
 					});
 				}
 			});
@@ -259,11 +356,11 @@

 	function cashierHeader() {
 		return '<div class="modal-colorful-header colorful-bg jb-blue">' +
-			'<button type="button" class="close aksrt-cashier__close" aria-label="' + tt('close', '关闭') + '" data-close>×</button>' +
+			'<button type="button" class="close aksrt-cashier__close" aria-label="关闭" data-close>×</button>' +
 			'<div class="colorful-make"></div>' +
 			'<div class="text-center">' +
 			'  <div class="em2x"><i class="fa fas fa-cart-plus" aria-hidden="true"></i></div>' +
-			'  <div class="aksrt-cashier__title mt10 em12 padding-w10">' + tt('confirm_buy', '确认购买') + '</div>' +
+			'  <div class="aksrt-cashier__title mt10 em12 padding-w10">确认购买</div>' +
 			'</div>' +
 			'</div>';
 	}
@@ -285,7 +382,7 @@
 			if (window.console && console.warn) {
 				console.warn('[AKSRT] download captcha not ready');
 			}
-			alert(tt('captcha_loading', '验证码组件加载中，请稍候再试'));
+			alert('验证码组件加载中，请稍候再试');
 			return;
 		}
 		scene.verify(function () { callback(); });
@@ -300,7 +397,7 @@

 		button.disabled = true;
 		const original = button.innerHTML;
-		button.innerHTML = '<i class="fa fas fa-spinner fa-spin" aria-hidden="true"></i> ' + tt('processing', '处理中…');
+		button.innerHTML = '<i class="fa fas fa-spinner fa-spin" aria-hidden="true"></i> 处理中…';

 		const restNonce = window.aksrtData.restNonce || '';
 		const captchaPayload = collectCaptchaPayload(button);
@@ -323,7 +420,7 @@
 				button.disabled = false;
 				button.innerHTML = original;
 				if (!r.ok || (r.json && r.json.code)) {
-					renderError(r.json.message || tt('default_err', '请稍后重试'), r.json.data || {}, button, r.json.code);
+					renderError(r.json.message || '请稍后重试', r.json.data || {}, button, r.json.code);
 					// 验证码已被消费，重置以便用户重试
 					try {
 						const scene = window.AKSRTCaptchaState && window.AKSRTCaptchaState.scenes && window.AKSRTCaptchaState.scenes.download;
@@ -336,7 +433,7 @@
 			.catch(function () {
 				button.disabled = false;
 				button.innerHTML = original;
-				renderError(tt('network_err', '网络错误，请稍后重试'), {}, button);
+				renderError('网络错误，请稍后重试', {}, button);
 			});
 	}

@@ -410,7 +507,7 @@
 		priceType = priceType || '';
 		couponCode = couponCode || '';
 		openCashierContent(
-			'<p class="aksrt-cashier__loading muted-2-color">' + tt('loading', '加载中…') + '</p>',
+			'<p class="aksrt-cashier__loading muted-2-color">加载中…</p>',
 			returnFocusEl
 		);

@@ -427,11 +524,11 @@
 						renderError(r.json.message || '', data, returnFocusEl, 'aksrt_need_vip');
 						return;
 					}
-					if (code === 'aksrt_already_paid' || code === 'aksrt_already_followed') {
+					if (code === 'aksrt_already_paid') {
 						window.location.reload();
 						return;
 					}
-					renderError((r.json && r.json.message) || tt('default_err', '请稍后重试'), data, returnFocusEl, code);
+					renderError((r.json && r.json.message) || '请稍后重试', data, returnFocusEl, code);
 					return;
 				}
 				var prev = r.json || {};
@@ -440,7 +537,7 @@
 				renderCashier(prev, returnFocusEl);
 			})
 			.catch(function () {
-				renderError(tt('network_err', '网络错误，请稍后重试'), {}, returnFocusEl);
+				renderError('网络错误，请稍后重试', {}, returnFocusEl);
 			});
 	}

@@ -518,36 +615,36 @@
 			if (!isPoints && Number(preview.original) > Number(preview.base)) {
 				regularPrice = '<span class="original-price">' + formatAssetLabel(preview, preview.original) + '</span>' + regularPrice;
 			}
-			priceRows += cashierPriceRow(tt('price', '价格'), regularPrice, 'aksrt-cashier__regular-price');
+			priceRows += cashierPriceRow('价格', regularPrice, 'aksrt-cashier__regular-price');
 		}
 		if (preview.list_amount !== preview.base) {
 			priceRows += cashierPriceRow(
-				tt('vip_price', '会员价') + '<span class="aksrt-cashier__vip-mark">VIP' + escapeHtml(preview.vip_level || '') + '</span>',
+				'会员价<span class="aksrt-cashier__vip-mark">VIP' + escapeHtml(preview.vip_level || '') + '</span>',
 				'<span class="em14">' + listLabel + '</span>',
 				'c-red'
 			);
 		} else if (preview.amount !== preview.base && !preview.rebate_discount && !preview.coupon_discount) {
 			priceRows += cashierPriceRow(
-				tt('vip_price', '会员价') + '<span class="aksrt-cashier__vip-mark">VIP' + escapeHtml(preview.vip_level || '') + '</span>',
+				'会员价<span class="aksrt-cashier__vip-mark">VIP' + escapeHtml(preview.vip_level || '') + '</span>',
 				'<span class="em14">' + amountLabel + '</span>',
 				'c-red'
 			);
 		}
 		if (preview.rebate_discount > 0) {
 			priceRows += cashierPriceRow(
-				tt('rebate_discount', '推广折扣'),
+				'推广折扣',
 				'<span class="em14">' + escapeHtml(preview.rebate_discount_label || ('-' + preview.rebate_discount)) + '</span>'
 			);
 		}
 		if (preview.coupon_discount > 0) {
 			priceRows += cashierPriceRow(
-				tt('coupon_discount', '优惠码'),
+				'优惠码',
 				'<span class="em14">' + escapeHtml(preview.coupon_discount_label || ('-' + preview.coupon_discount)) + '</span>'
 			);
 		}
 		if (preview.amount !== preview.base || preview.rebate_discount > 0 || preview.coupon_discount > 0) {
 			priceRows += cashierPriceRow(
-				tt('pay_amount', '支付金额'),
+				'支付金额',
 				'<span class="em14">' + amountLabel + '</span>',
 				'font-bold c-red'
 			);
@@ -562,27 +659,27 @@
 		if (isPoints) {
 			body += '<div class="mb10 muted-box padding-h10">' +
 				'<div class="flex jsb ac"><span class="muted-2-color">' +
-				'<i class="fa fas fa-database aksrt-cashier__asset-icon" aria-hidden="true"></i>' + tt('my_points', '我的积分') +
+				'<i class="fa fas fa-database aksrt-cashier__asset-icon" aria-hidden="true"></i>我的积分' +
 				'</span><div class="c-green"><span class="em14">' + balance + '</span></div></div></div>';
 			if (!preview.balance_enough) {
-				body += '<div class="badg c-red btn-block mb20 aksrt-cashier__warn">' + tt('points_short', '抱歉，您的积分不足，暂时无法支付') + '</div>';
+				body += '<div class="badg c-red btn-block mb20 aksrt-cashier__warn">抱歉，您的积分不足，暂时无法支付</div>';
 				body += '<div class="modal-buts but-average">';
 				if (preview.credits_url) {
-					body += '<a class="but padding-lg" href="' + escapeAttr(preview.credits_url) + '">' + tt('my_points', '我的积分') + '</a>';
+					body += '<a class="but padding-lg" href="' + escapeAttr(preview.credits_url) + '">我的积分</a>';
 				}
 				body += '</div>';
 				openCashierContent(body, returnFocusEl);
 				return;
 			}
 			body += '<button type="button" class="mt6 but jb-red initiate-pay btn-block radius" data-aksrt-pay-submit data-mode="points" data-price-type="' + escapeAttr(priceType) + '">' +
-				tt('pay_now', '立即支付') + '<span class="pay-price-text ml10">' + amountLabel + '</span></button>';
+				'立即支付<span class="pay-price-text ml10">' + amountLabel + '</span></button>';
 		} else {
 			if (couponAllowed) {
 				body += '<div class="mb10 coupon-input-box">';
-				body += '<div class="muted-2-color em09 mb6">' + tt('use_coupon', '使用优惠码') + '</div>';
+				body += '<div class="muted-2-color em09 mb6">使用优惠码</div>';
 				body += '<div class="relative">';
-				body += '<input type="text" class="form-control coupon-input" name="aksrt_coupon_code" value="' + couponCodeVal + '" placeholder="' + escapeAttr(tt('enter_coupon', '请输入优惠码')) + '" autocomplete="off">';
-				body += '<span class="abs-right"><button type="button" class="but c-blue coupon-submit" data-aksrt-check-coupon>' + tt('check_coupon', '检查优惠码') + '</button></span>';
+				body += '<input type="text" class="form-control coupon-input" name="aksrt_coupon_code" value="' + couponCodeVal + '" placeholder="请输入优惠码" autocomplete="off">';
+				body += '<span class="abs-right"><button type="button" class="but c-blue coupon-submit" data-aksrt-check-coupon>检查优惠码</button></span>';
 				body += '</div>';
 				if (preview.coupon_desc) {
 					body += '<div class="muted-3-color px12 mt6 aksrt-cashier__coupon-desc">' + escapeHtml(preview.coupon_desc) + '</div>';
@@ -590,7 +687,7 @@
 				if (preview.coupon_error) {
 					body += '<div class="aksrt-cashier__warn">' + escapeHtml(preview.coupon_error) + '</div>';
 				} else if (preview.coupon_discount > 0) {
-					body += '<div class="aksrt-cashier__coupon-ok">' + tt('coupon_ok', '优惠码可用') + '</div>';
+					body += '<div class="aksrt-cashier__coupon-ok">优惠码可用</div>';
 				}
 				body += '</div>';
 			}
@@ -608,7 +705,7 @@
 					paymentMethodLogo(rawId) + '<div>' + name + '</div></div>';
 			});
 			if (methods.length > 1) {
-				body += '<div class="muted-2-color em09 mb6">' + tt('pay_method', '请选择支付方式') + '</div>' +
+				body += '<div class="muted-2-color em09 mb6">请选择支付方式</div>' +
 					'<div class="flex mb10 aksrt-cashier__methods" role="radiogroup">' + methodHtml + '</div>';
 			}
 			if (methods.length) {
@@ -618,23 +715,23 @@
 				const balanceSelected = methods[0] && methods[0].id === 'balance';
 				body += '<div class="mb10 muted-box padding-h10 aksrt-cashier__balance" data-aksrt-balance-box' + (balanceSelected ? '' : ' hidden') + '>' +
 					'<div class="flex jsb ac"><span class="muted-2-color">' +
-					'<i class="fa fas fa-wallet aksrt-cashier__asset-icon" aria-hidden="true"></i>' + tt('my_wallet', '我的余额') +
+					'<i class="fa fas fa-wallet aksrt-cashier__asset-icon" aria-hidden="true"></i>我的余额' +
 					'</span><div class="c-blue-2"><span class="em14">￥' + escapeHtml(walletBal) + '</span></div></div>';
 				if (preview.balance_enough === false) {
 					if (preview.credits_url) {
 						body += '<a class="but c-red block mt6 aksrt-cashier__recharge" href="' + escapeAttr(preview.credits_url) + '">' +
-							tt('wallet_short', '抱歉！余额不足，请先充值') + ' <i class="ml6 fa fa-angle-right em12" aria-hidden="true"></i></a>';
+							'抱歉！余额不足，请先充值 <i class="ml6 fa fa-angle-right em12" aria-hidden="true"></i></a>';
 					} else {
-						body += '<div class="c-red mt6 aksrt-cashier__recharge">' + tt('wallet_short', '抱歉！余额不足，请先充值') + '</div>';
+						body += '<div class="c-red mt6 aksrt-cashier__recharge">抱歉！余额不足，请先充值</div>';
 					}
 				}
 				body += '</div>';
 			}
 			if (methods.length) {
 				body += '<button type="button" class="mt6 but jb-red initiate-pay btn-block radius" data-aksrt-pay-submit data-mode="cash" data-price-type="' + escapeAttr(priceType) + '">' +
-					tt('pay_now', '立即支付') + '<span class="pay-price-text ml10">' + amountLabel + '</span></button>';
+					'立即支付<span class="pay-price-text ml10">' + amountLabel + '</span></button>';
 			} else {
-				body += '<div class="badg c-red btn-block aksrt-cashier__warn">' + tt('no_pay_method', '暂无可用支付方式，请联系站长配置收款接口') + '</div>';
+				body += '<div class="badg c-red btn-block aksrt-cashier__warn">暂无可用支付方式，请联系站长配置收款接口</div>';
 			}
 		}

@@ -652,13 +749,13 @@
 				}
 				checkBtn.disabled = true;
 				const old = checkBtn.innerHTML;
-				checkBtn.innerHTML = tt('checking', '检查中…');
+				checkBtn.innerHTML = '检查中…';
 				fetchPreview(preview.post_id, priceType, code)
 					.then(function (r) {
 						checkBtn.disabled = false;
 						checkBtn.innerHTML = old;
 						if (!r.ok || (r.json && r.json.code && !r.json.amount && r.json.amount !== 0)) {
-							renderError((r.json && r.json.message) || tt('default_err', '请稍后重试'), (r.json && r.json.data) || {}, returnFocusEl, (r.json && r.json.code) || '');
+							renderError((r.json && r.json.message) || '请稍后重试', (r.json && r.json.data) || {}, returnFocusEl, (r.json && r.json.code) || '');
 							return;
 						}
 						var prev = r.json || {};
@@ -669,7 +766,7 @@
 					.catch(function () {
 						checkBtn.disabled = false;
 						checkBtn.innerHTML = old;
-						renderError(tt('network_err', '网络错误，请稍后重试'), {}, returnFocusEl);
+						renderError('网络错误，请稍后重试', {}, returnFocusEl);
 					});
 			});
 		}
@@ -717,7 +814,7 @@
 		if (!postId) return;
 		const original = button.innerHTML;
 		button.disabled = true;
-		button.innerHTML = tt('processing', '处理中…');
+		button.innerHTML = '处理中…';

 		const payload = { mode: mode };
 		if (mode === 'cash') payload.payment_method = paymentMethod || 'balance';
@@ -741,11 +838,11 @@
 				if (!r.ok || (r.json && r.json.code && !r.json.success)) {
 					const code = r.json && r.json.code ? r.json.code : '';
 					const data = (r.json && r.json.data) || {};
-					if (code === 'aksrt_already_paid' || code === 'aksrt_already_followed') {
+					if (code === 'aksrt_already_paid') {
 						window.location.reload();
 						return;
 					}
-					renderError((r.json && r.json.message) || tt('default_err', '请稍后重试'), data, returnFocusEl, code);
+					renderError((r.json && r.json.message) || '请稍后重试', data, returnFocusEl, code);
 					return;
 				}
 				const data = (r.json && r.json.data) ? r.json.data : r.json;
@@ -754,15 +851,7 @@
 					if (data.payment_url) {
 						window.open(data.payment_url, '_blank');
 					}
-					open(
-						'<h3 class="aksrt-dl-modal__title">' + tt('scan_pay', '扫码支付') + '</h3>' +
-						'<p class="aksrt-dl-modal__msg">' + escapeHtml(data.message || tt('scan_hint', '请使用手机扫码完成支付，支付后刷新页面。')) + '</p>' +
-						(data.qr_content ? ('<p class="aksrt-dl-modal__msg"><code>' + escapeHtml(data.qr_content || '') + '</code></p>') : '') +
-						'<div class="aksrt-dl-modal__actions"><button type="button" class="btn-primary btn-sm" data-aksrt-reload>' + tt('paid_refresh', '我已支付') + '</button></div>',
-						returnFocusEl
-					);
-					const reloadBtn = document.querySelector('[data-aksrt-reload]');
-					if (reloadBtn) reloadBtn.addEventListener('click', function () { window.location.reload(); });
+					renderScanPay(data, returnFocusEl);
 					if (data.order_number) pollOrderPaid(data.order_number, returnFocusEl);
 					return;
 				}
@@ -771,10 +860,30 @@
 			.catch(function () {
 				button.disabled = false;
 				button.innerHTML = original;
-				renderError(tt('network_err', '网络错误，请稍后重试'), {}, returnFocusEl);
+				renderError('网络错误，请稍后重试', {}, returnFocusEl);
 			});
 	}

+	function renderScanPay(data, returnFocusEl) {
+		data = data || {};
+		let body = '';
+		if (data.qr_content) {
+			body += '<div class="aksrt-dl-modal__code-card"><div class="aksrt-dl-modal__code-caption">凭证内容</div>' +
+				'<code class="aksrt-dl-modal__code aksrt-dl-modal__code--wrap">' + escapeHtml(String(data.qr_content)) + '</code></div>';
+		}
+		body += '<p class="aksrt-dl-modal__msg">' + escapeHtml(data.message || '请使用手机扫码完成支付，支付后刷新页面。') + '</p>';
+		open(
+			dlView('pay', {
+				subtitle: '支付完成后页面会自动刷新',
+				body: body,
+				actions: [{ kind: 'button', label: '我已支付', icon: 'fa-sync-alt', attrs: 'type="button" data-aksrt-reload' }],
+			}),
+			returnFocusEl
+		);
+		const reloadBtn = document.querySelector('[data-aksrt-reload]');
+		if (reloadBtn) reloadBtn.addEventListener('click', function () { window.location.reload(); });
+	}
+
 	// ===== 事件绑定 =====
 	document.addEventListener('click', function (e) {
 		const lowBtn = e.target.closest('[data-action="aksrt-need-credits"]');