kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(user-center): 官方认证面板 1:1 复刻参考主题视觉

Browse Source 
- 面板主体改为 Zibll 同款 colorful-bg hero 卡片（大图标/标题/状态区）
- 保留云认证 modal 流程与 data-* 功能钩子，13 个钩子一一对应
- 清理旧 uc-auth-card 面板样式与无引用的 uc-auth-upload/apply-detail 死样式
- 新增 #panel-auth 去壳样式，去除外层白卡使卡片成为唯一内容
This commit is contained in:
kate522
2026-09-16 18:06:48 +08:00
parent 098df7f921
commit fb5cdf247d
2 changed files with 88 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/user-center/settings.css
+11 -49
View File
@@ -504,43 +504,21 @@
/* ==================== 官方认证面板 ==================== */
.uc-auth-panel { overflow: hidden; }
.uc-auth-card {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
min-height: 210px;
overflow: hidden;
border-radius: 14px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), rgba(124, 92, 220, 0.08));
/* 面板内容为 Zibll 同款 colorful-bg hero 卡片（参考主题 1:1），去掉外层白卡壳 */
.uc-content #panel-auth.dashboard-panel {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.uc-auth-card__art {
display: grid;
place-items: center;
background: linear-gradient(150deg, #3988f4, #7567de);
color: #fff;
font-size: 46px;
/* 认证按钮（Zibll .but.jb-blue.padding-lg.btn-block 工具类） */
.uc-content #panel-auth .but[data-auth-modal-open] {
width: 100%;
margin: 20px 0 0;
}
.uc-auth-card__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 28px;
}
.uc-auth-card__content small { color: var(--color-primary); font-weight: 700; }
.uc-auth-card__content h2 { margin: 5px 0 9px; font-size: 24px; }
.uc-auth-card__content p,
.uc-auth-card__content time { margin: 0; color: var(--color-ink-4); font-size: 13px; line-height: 1.7; }
.uc-auth-card__notice { margin-top: 14px; color: var(--color-error, #dc2626); font-size: 13px; }
.uc-auth-apply-open { margin-top: 18px; min-width: 112px; }
.uc-auth-card--verified { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08)); }
.uc-auth-card--verified .uc-auth-card__art { background: linear-gradient(150deg, #20a77d, #3287df); }
.uc-auth-modal { z-index: 620; }
.uc-auth-modal__dialog { width: min(620px, calc(100vw - 28px)); max-width: 620px; max-height: min(760px, calc(100vh - 40px)); overflow: auto; background: var(--surface-1, #fff); }
.aksrt-identity-modal-shell .aksrt-modal-runtime__dialog { width: min(620px, calc(100vw - 28px)); max-width: 620px; }
.aksrt-identity-modal-shell .uc-auth-modal__dialog { width: auto; max-width: none; max-height: none; overflow: visible; background: transparent; }
@@ -556,30 +534,14 @@
.uc-auth-form textarea.form-control { resize: vertical; }
.uc-auth-consent { display: flex; align-items: flex-start; gap: 8px; color: var(--color-ink-3); font-size: 13px; font-weight: 400; line-height: 1.6; }
.uc-auth-consent input { flex: 0 0 auto; margin-top: 3px; }
.uc-auth-upload small { color: var(--color-ink-4); font-weight: 400; }
.uc-auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; }
.uc-auth-form__message { min-height: 18px; color: var(--color-error, #dc2626); font-size: 12px; text-align: center; }
.uc-auth-upload__previews { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-auth-upload__previews img,
.uc-auth-proof-list .preview-item { width: 82px; height: 82px; border-radius: 8px; overflow: hidden; object-fit: cover; }
.uc-auth-proof-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.uc-auth-proof-list img { width: 100%; height: 100%; object-fit: cover; }
.uc-auth-pending { text-align: center; padding: 4px 0 18px; }
.uc-auth-pending > span { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; background: rgba(245, 158, 11, 0.14); color: #a66e0b; font-size: 24px; }
.uc-auth-pending h3 { margin: 0 0 7px; }
.uc-auth-pending p { margin: 0; color: var(--color-ink-4); font-size: 13px; }
.uc-auth-apply-detail { display: grid; gap: 0; border-top: 1px solid var(--color-line-soft); }
.uc-auth-apply-detail dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); font-size: 13px; }
.uc-auth-apply-detail dt { color: var(--color-ink-4); }
.uc-auth-apply-detail dd { margin: 0; color: var(--color-ink-2); }
.uc-auth-modal__confirm { width: 100%; margin-top: 20px; }
@media (max-width: 640px) {
.uc-auth-card { grid-template-columns: 92px minmax(0, 1fr); min-height: 180px; }
.uc-auth-card__art { font-size: 34px; }
.uc-auth-card__content { padding: 20px 17px; }
.uc-auth-card__content h2 { font-size: 20px; }
.uc-auth-modal__dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 88vh; margin: 0; border-radius: 18px 18px 0 0; }
}
inc/helpers/user-center-renderers/profile-auth.php
+77 -66
View File
@@ -2,6 +2,11 @@
/**
* User center panel: cloud identity verification.
*
* Visible UI mirrors the reference theme (Zibll) `官方认证` panel:
* a `colorful-bg c-blue zib-widget` hero card with centered badge icon,
* panel title and a left-aligned status block. The cloud-apply modal flow
* lives in the `<template>` below and is driven by user-center-auth.js.
*
* @package AKSRT
*/
@@ -41,74 +46,80 @@ $config = [
'pollInterval' => max(5, (int) ($snapshot['poll_interval'] ?? 5)),
'snapshot' => class_exists(AuthApply::class) ? AuthApply::snapshot_view($user_id) : [],
];
$auth_icon = '<i class="fa fas fa-id-badge" aria-hidden="true"></i>';
?>
<div class="aksrt-user-auth-panel uc-auth-panel" data-identity-root data-identity-config="<?php echo esc_attr(wp_json_encode($config)); ?>">
<?php if ($status === 'verified') : ?>
<div class="uc-auth-card uc-auth-card--verified">
<span class="uc-auth-card__art"><i class="fa fas fa-check-circle" aria-hidden="true"></i></span>
<div class="uc-auth-card__content">
<small><?php esc_html_e('已通过云端实人认证', 'aksrt'); ?></small>
<h2><?php echo esc_html((string) ($info['name'] ?? __('官方认证', 'aksrt'))); ?></h2>
<?php if (!empty($info['time'])) : ?><time><?php printf(esc_html__('认证时间：%s', 'aksrt'), esc_html((string) $info['time'])); ?></time><?php endif; ?>
</div>
</div>
<?php else : ?>
<div class="uc-auth-card">
<span class="uc-auth-card__art"><i class="fa fas fa-id-badge" aria-hidden="true"></i></span>
<div class="uc-auth-card__content">
<small><?php esc_html_e('身份权益', 'aksrt'); ?></small>
<h2><?php esc_html_e('官方认证', 'aksrt'); ?></h2>
<p><?php echo esc_html((string) ($settings['desc'] ?? __('个人认证将进行人脸实人核身，企业认证还会核验企业主体与法定代表人关系。', 'aksrt'))); ?></p>
<?php if (!$can_apply) : ?>
<div class="uc-auth-card__notice"><?php echo wp_kses_post(nl2br(esc_html((string) ($settings['disable_desc'] ?? __('暂时不能申请身份认证', 'aksrt'))))); ?></div>
<?php elseif ($reason !== '') : ?>
<div class="uc-auth-card__notice"><?php echo nl2br(esc_html($reason)); ?></div>
<?php endif; ?>
<?php if ($can_apply) : ?><button type="button" class="btn-primary" data-auth-modal-open><?php echo $status === 'pending' ? esc_html__('查看认证进度', 'aksrt') : esc_html__('开始认证', 'aksrt'); ?></button><?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="colorful-bg c-blue flex jc zib-widget" style="padding: 40px 20px;" data-identity-root data-identity-config="<?php echo esc_attr(wp_json_encode($config)); ?>">
<div class="colorful-make"></div>
<div class="text-center">
<div class="em4x"><?php echo $auth_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div>
<div class="mt10 em14 padding-w10 font-bold mb40"><?php esc_html_e('官方认证', 'aksrt'); ?></div>
<?php if ($can_apply) : ?>
<template data-auth-modal-template>
<div class="uc-auth-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="uc-auth-modal-title">
<div class="aksrt-modal__header uc-auth-modal__header">
<div><span><i class="fa fas fa-id-badge" aria-hidden="true"></i></span><strong id="uc-auth-modal-title"><?php esc_html_e('身份认证', 'aksrt'); ?></strong></div>
<button type="button" class="aksrt-modal__close" data-aksrt-modal-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times" aria-hidden="true"></i></button>
</div>
<div class="aksrt-modal__body uc-auth-modal__body">
<div data-auth-status <?php echo !$locks_application ? 'hidden' : ''; ?>>
<div class="uc-auth-pending">
<span><i class="fa fas fa-shield-alt" aria-hidden="true"></i></span>
<h3 data-auth-stage><?php echo esc_html($stage ?: __('准备认证', 'aksrt')); ?></h3>
<p data-auth-status-message><?php esc_html_e('认证结果以服务端向云服务商主动查询为准。', 'aksrt'); ?></p>
</div>
<a class="btn-primary" data-auth-continue target="_blank" rel="noopener noreferrer" hidden><?php esc_html_e('打开云端核身页面', 'aksrt'); ?></a>
<button type="button" class="btn-primary" data-auth-refresh><?php esc_html_e('刷新结果', 'aksrt'); ?></button>
<?php if (!empty($settings['allow_manual_fallback'])) : ?><button type="button" class="button" data-auth-manual-open hidden><?php esc_html_e('上传材料转人工审核', 'aksrt'); ?></button><?php endif; ?>
</div>
<?php if ($status === 'verified') : ?>
<div class="text-left">
<div class="em12"><?php echo $auth_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><b class="ml6"><?php echo esc_html((string) ($info['name'] ?? __('官方认证', 'aksrt'))); ?></b></div>
<?php if (!empty($info['time'])) : ?>
<div class="muted-2-color mt10"><?php printf(esc_html__('认证时间：%s', 'aksrt'), esc_html((string) $info['time'])); ?></div>
<?php endif; ?>
</div>
<?php else : ?>
<div class="text-left">
<div class="em12 mb10"><?php echo $auth_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?><b class="ml6"><?php esc_html_e('申请认证', 'aksrt'); ?></b></div>
<?php if ($reason !== '') : ?>
<div class="c-red mb10"><i class="fa mr6 fa-info-circle" aria-hidden="true"></i><?php echo esc_html($reason); ?></div>
<?php endif; ?>
<?php if ($can_apply) : ?>
<div class="muted-color mb20"><?php echo esc_html((string) ($settings['desc'] ?? __('个人认证将进行人脸实人核身，企业认证还会核验企业主体与法定代表人关系。', 'aksrt'))); ?></div>
<button type="button" class="but jb-blue padding-lg btn-block mt20" data-auth-modal-open><?php echo $locks_application ? esc_html__('查看认证进度', 'aksrt') : esc_html__('申请认证', 'aksrt'); ?></button>
<?php else : ?>
<div class="c-red"><i class="fa mr6 fa-info-circle" aria-hidden="true"></i><?php esc_html_e('抱歉！暂时不能申请身份认证', 'aksrt'); ?></div>
<?php if (!empty($settings['disable_desc'])) : ?>
<div class="muted-color mt20"><?php echo nl2br(esc_html((string) $settings['disable_desc'])); ?></div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<form class="aksrt-user-auth-form uc-auth-form" data-auth-create <?php echo $locks_application ? 'hidden' : ''; ?>>
<label class="uc-auth-field"><span><?php esc_html_e('认证类型', 'aksrt'); ?></span><select class="form-control" name="type" required><option value="personal"><?php esc_html_e('个人认证', 'aksrt'); ?></option><option value="enterprise"><?php esc_html_e('企业认证', 'aksrt'); ?></option></select></label>
<div class="uc-auth-enterprise-fields" data-enterprise-fields hidden>
<label class="uc-auth-field"><span><?php esc_html_e('企业全称', 'aksrt'); ?></span><input class="form-control" name="company_name" maxlength="191"></label>
<label class="uc-auth-field"><span><?php esc_html_e('统一社会信用代码', 'aksrt'); ?></span><input class="form-control" name="company_code" maxlength="32" autocomplete="off"></label>
</div>
<label class="uc-auth-field"><span data-auth-person-label><?php esc_html_e('真实姓名', 'aksrt'); ?></span><input class="form-control" name="person_name" maxlength="50" required autocomplete="name"></label>
<label class="uc-auth-field"><span data-auth-id-label><?php esc_html_e('身份证号码', 'aksrt'); ?></span><input class="form-control" name="id_number" maxlength="18" pattern="[0-9]{15}|[0-9]{17}[0-9Xx]" required autocomplete="off"></label>
<label class="uc-auth-consent"><input type="checkbox" name="consent" value="1" required><span><?php esc_html_e('我同意为身份认证目的将必要身份信息提交给站点当前配置的云服务商；站点不保存人脸素材，并仅保留脱敏结果。', 'aksrt'); ?></span></label>
<input type="hidden" name="return_url" value="<?php echo esc_url(aksrt_get_user_center_tab_url('auth')); ?>">
<button type="submit" class="btn-primary uc-auth-submit"><?php esc_html_e('创建认证会话', 'aksrt'); ?></button>
<div class="uc-auth-form__message" data-auth-message role="status"></div>
</form>
<?php if ($can_apply) : ?>
<template data-auth-modal-template>
<div class="uc-auth-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="uc-auth-modal-title">
<div class="aksrt-modal__header uc-auth-modal__header">
<div><span><i class="fa fas fa-id-badge" aria-hidden="true"></i></span><strong id="uc-auth-modal-title"><?php esc_html_e('身份认证', 'aksrt'); ?></strong></div>
<button type="button" class="aksrt-modal__close" data-aksrt-modal-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times" aria-hidden="true"></i></button>
</div>
<div class="aksrt-modal__body uc-auth-modal__body">
<div data-auth-status <?php echo !$locks_application ? 'hidden' : ''; ?>>
<div class="uc-auth-pending">
<span><i class="fa fas fa-shield-alt" aria-hidden="true"></i></span>
<h3 data-auth-stage><?php echo esc_html($stage ?: __('准备认证', 'aksrt')); ?></h3>
<p data-auth-status-message><?php esc_html_e('认证结果以服务端向云服务商主动查询为准。', 'aksrt'); ?></p>
</div>
<a class="btn-primary" data-auth-continue target="_blank" rel="noopener noreferrer" hidden><?php esc_html_e('打开云端核身页面', 'aksrt'); ?></a>
<button type="button" class="btn-primary" data-auth-refresh><?php esc_html_e('刷新结果', 'aksrt'); ?></button>
<?php if (!empty($settings['allow_manual_fallback'])) : ?><button type="button" class="button" data-auth-manual-open hidden><?php esc_html_e('上传材料转人工审核', 'aksrt'); ?></button><?php endif; ?>
</div>
<form data-auth-manual hidden enctype="multipart/form-data">
<label><span><?php esc_html_e('证明材料', 'aksrt'); ?></span><input type="file" name="evidence[]" accept="image/jpeg,image/png,image/webp" multiple required></label>
<small><?php esc_html_e('最多 3 张，单张不超过 2MB。材料仅本人和身份审核管理员可查看。', 'aksrt'); ?></small>
<button type="submit" class="btn-primary"><?php esc_html_e('提交人工审核', 'aksrt'); ?></button>
</form>
</div>
</div>
</template>
<?php endif; ?>
<form class="aksrt-user-auth-form uc-auth-form" data-auth-create <?php echo $locks_application ? 'hidden' : ''; ?>>
<label class="uc-auth-field"><span><?php esc_html_e('认证类型', 'aksrt'); ?></span><select class="form-control" name="type" required><option value="personal"><?php esc_html_e('个人认证', 'aksrt'); ?></option><option value="enterprise"><?php esc_html_e('企业认证', 'aksrt'); ?></option></select></label>
<div class="uc-auth-enterprise-fields" data-enterprise-fields hidden>
<label class="uc-auth-field"><span><?php esc_html_e('企业全称', 'aksrt'); ?></span><input class="form-control" name="company_name" maxlength="191"></label>
<label class="uc-auth-field"><span><?php esc_html_e('统一社会信用代码', 'aksrt'); ?></span><input class="form-control" name="company_code" maxlength="32" autocomplete="off"></label>
</div>
<label class="uc-auth-field"><span data-auth-person-label><?php esc_html_e('真实姓名', 'aksrt'); ?></span><input class="form-control" name="person_name" maxlength="50" required autocomplete="name"></label>
<label class="uc-auth-field"><span data-auth-id-label><?php esc_html_e('身份证号码', 'aksrt'); ?></span><input class="form-control" name="id_number" maxlength="18" pattern="[0-9]{15}|[0-9]{17}[0-9Xx]" required autocomplete="off"></label>
<label class="uc-auth-consent"><input type="checkbox" name="consent" value="1" required><span><?php esc_html_e('我同意为身份认证目的将必要身份信息提交给站点当前配置的云服务商；站点不保存人脸素材，并仅保留脱敏结果。', 'aksrt'); ?></span></label>
<input type="hidden" name="return_url" value="<?php echo esc_url(aksrt_get_user_center_tab_url('auth')); ?>">
<button type="submit" class="btn-primary uc-auth-submit"><?php esc_html_e('创建认证会话', 'aksrt'); ?></button>
<div class="uc-auth-form__message" data-auth-message role="status"></div>
</form>
<form data-auth-manual hidden enctype="multipart/form-data">
<label><span><?php esc_html_e('证明材料', 'aksrt'); ?></span><input type="file" name="evidence[]" accept="image/jpeg,image/png,image/webp" multiple required></label>
<small><?php esc_html_e('最多 3 张，单张不超过 2MB。材料仅本人和身份审核管理员可查看。', 'aksrt'); ?></small>
<button type="submit" class="btn-primary"><?php esc_html_e('提交人工审核', 'aksrt'); ?></button>
</form>
</div>
</div>
</template>
<?php endif; ?>
</div>