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

修复了一些问题

Browse Source
This commit is contained in:
kate522
2026-08-23 20:59:34 +08:00
parent af52f9e94d
commit d7634d1ff6
9 changed files with 316 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/src/components/form/AksField.vue
+10 -1
View File
@@ -215,6 +215,14 @@
@update:model-value="emit('update:modelValue', $event)"
/>
<!-- WordPress image gallery (attachment ID array) -->
<AksGalleryField
v-else-if="schema.type === 'gallery'"
:model-value="Array.isArray(modelValue) ? modelValue : []"
:title="schema.label || '选择图片'"
@update:model-value="emit('update:modelValue', $event)"
/>
<!-- Slider -->
<n-slider
v-else-if="schema.type === 'slider'"
@@ -603,12 +611,13 @@
* AksField — renders a single form field based on its schema definition.
*
* Supported types: switch, input/text, textarea, number, select, radio,
* checkbox, color, icon, media, slider, code, alert, fieldset, repeater (inline|list-modal), custom (slot).
* checkbox, color, icon, media, gallery, slider, code, alert, fieldset, repeater (inline|list-modal), custom (slot).
*/
import { computed, ref, onMounted, watch } from 'vue'
import FaIcon from './FaIcon.vue'
import FaIconPicker from './FaIconPicker.vue'
import AksMediaField from './AksMediaField.vue'
import AksGalleryField from './AksGalleryField.vue'
import AksCodeEditor from './AksCodeEditor.vue'
import api from '@/api'
assets/admin/src/components/form/AksGalleryField.vue
+234
View File
@@ -0,0 +1,234 @@
<template>
<div class="aksrt-gallery-field">
<div v-if="attachmentIds.length" class="aksrt-gallery-field__grid">
<article
v-for="(attachmentId, index) in attachmentIds"
:key="attachmentId"
class="aksrt-gallery-field__item"
>
<img
v-if="previews[attachmentId]?.url"
:src="previews[attachmentId].url"
:alt="previews[attachmentId].alt || `附件 ${attachmentId}`"
class="aksrt-gallery-field__image"
/>
<div v-else class="aksrt-gallery-field__placeholder">
<FaIcon icon="fa fas fa-image" :size="22" />
<span>#{{ attachmentId }}</span>
</div>
<div class="aksrt-gallery-field__actions">
<n-button
size="tiny"
quaternary
:disabled="index === 0"
aria-label="向前移动"
@click="move(index, -1)"
>
<FaIcon icon="fa fas fa-arrow-left" />
</n-button>
<n-button
size="tiny"
quaternary
:disabled="index === attachmentIds.length - 1"
aria-label="向后移动"
@click="move(index, 1)"
>
<FaIcon icon="fa fas fa-arrow-right" />
</n-button>
<n-button
size="tiny"
quaternary
type="error"
aria-label="移除图片"
@click="remove(attachmentId)"
>
<FaIcon icon="fa fas fa-trash-alt" />
</n-button>
</div>
</article>
</div>
<div v-else class="aksrt-gallery-field__empty">
<FaIcon icon="fa fas fa-images" :size="28" />
<span>尚未选择图片</span>
</div>
<div class="aksrt-gallery-field__buttons">
<n-button type="primary" secondary @click="openMediaLibrary">
<FaIcon icon="fa fas fa-plus" />
{{ attachmentIds.length ? '编辑图片' : '选择图片' }}
</n-button>
<n-button v-if="attachmentIds.length" type="error" quaternary @click="clear">
清空图片
</n-button>
</div>
<p v-if="mediaError" class="aksrt-gallery-field__error">{{ mediaError }}</p>
</div>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import FaIcon from './FaIcon.vue'
const props = defineProps({
modelValue: { type: Array, default: () => [] },
title: { type: String, default: '选择图片' },
})
const emit = defineEmits(['update:modelValue'])
const previews = ref({})
const mediaError = ref('')
let previewRequest = 0
const attachmentIds = computed(() => {
const seen = new Set()
return props.modelValue
.map(value => Number.parseInt(value, 10))
.filter(value => value > 0 && !seen.has(value) && seen.add(value))
})
function update(ids) {
emit('update:modelValue', [...ids])
}
function move(index, direction) {
const ids = [...attachmentIds.value]
const target = index + direction
if (target < 0 || target >= ids.length) return
;[ids[index], ids[target]] = [ids[target], ids[index]]
update(ids)
}
function remove(attachmentId) {
update(attachmentIds.value.filter(id => id !== attachmentId))
}
function clear() {
update([])
}
async function hydratePreviews() {
const request = ++previewRequest
const media = window.wp?.media
if (!media) return
const entries = await Promise.all(attachmentIds.value.map(async attachmentId => {
const attachment = media.attachment(attachmentId)
try {
if (!attachment.get('url')) await attachment.fetch()
} catch (error) {
return [attachmentId, null]
}
const sizes = attachment.get('sizes') || {}
return [attachmentId, {
url: sizes.thumbnail?.url || sizes.medium?.url || attachment.get('url') || '',
alt: attachment.get('alt') || attachment.get('title') || '',
}]
}))
if (request === previewRequest) {
previews.value = Object.fromEntries(entries.filter(([, preview]) => preview))
}
}
function openMediaLibrary() {
const media = window.wp?.media
if (!media) {
mediaError.value = '当前后台未加载 WordPress 媒体库。'
return
}
mediaError.value = ''
const frame = media({
title: props.title,
button: { text: '使用所选图片' },
library: { type: 'image' },
multiple: true,
})
frame.on('open', () => {
const selection = frame.state().get('selection')
attachmentIds.value.forEach(attachmentId => {
const attachment = media.attachment(attachmentId)
attachment.fetch()
selection.add(attachment)
})
})
frame.on('select', () => {
const ids = frame.state().get('selection').toJSON()
.map(attachment => Number.parseInt(attachment.id, 10))
.filter(attachmentId => attachmentId > 0)
update([...new Set(ids)])
})
frame.open()
}
watch(attachmentIds, hydratePreviews, { immediate: true })
</script>
<style scoped>
.aksrt-gallery-field__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 10px;
}
.aksrt-gallery-field__item {
overflow: hidden;
border: 1px solid var(--aksrt-color-border);
border-radius: 8px;
background: var(--aksrt-color-canvas);
}
.aksrt-gallery-field__image,
.aksrt-gallery-field__placeholder {
display: flex;
width: 100%;
aspect-ratio: 4 / 3;
align-items: center;
justify-content: center;
object-fit: cover;
}
.aksrt-gallery-field__placeholder {
flex-direction: column;
gap: 4px;
color: var(--aksrt-color-muted);
}
.aksrt-gallery-field__actions {
display: flex;
justify-content: center;
padding: 4px;
border-top: 1px solid var(--aksrt-color-border);
}
.aksrt-gallery-field__empty {
display: flex;
min-height: 116px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
border: 1px dashed var(--aksrt-color-border-strong);
border-radius: 8px;
color: var(--aksrt-color-muted);
}
.aksrt-gallery-field__buttons {
display: flex;
gap: 8px;
margin-top: 10px;
}
.aksrt-gallery-field__error {
margin: 8px 0 0;
color: #d03050;
font-size: 12px;
}
</style>
assets/css/routes/sign.css
+2 -1
View File
@@ -89,7 +89,8 @@
#u_sign.has-sign-img .modal-dialog { width: 800px; }
#u_sign .modal-content { position: relative; min-height: 300px; max-height: calc(100vh - 36px); overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 8px; background: var(--main-bg-color, #fff); box-shadow: 0 12px 50px rgba(0, 0, 0, .22); }
.auth-modal-close { position: absolute; top: 13px; right: 15px; z-index: 4; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .04); color: var(--muted-color, #777); cursor: pointer; }
.sign-img { position: absolute; inset: 0 55% 0 0; background-position: center; background-size: cover; }
.sign-img { position: absolute; inset: 0 55% 0 0; overflow: hidden; }
.sign-img img { display: block; width: 100%; height: 100%; border-radius: 8px 0 0 8px; object-fit: cover; }
.sign-img + .sign { max-width: unset; margin-left: 55%; padding: 34px 44px; }
.page-template-user-sign { min-height: 100vh; background: var(--body-bg-color, #f5f6f7); }
src/Admin/ControllerBase.php
+4
View File
@@ -92,6 +92,10 @@ abstract class ControllerBase {
case 'array':
$out[$key] = is_array($val) ? $val : [];
break;
case 'attachment_ids':
$ids = is_array($val) ? array_filter(array_map('absint', $val)) : [];
$out[$key] = array_values(array_unique($ids));
break;
default:
$out[$key] = sanitize_text_field($val);
}
src/Admin/SchemaProvider.php
+11
View File
@@ -443,6 +443,12 @@ class SchemaProvider {
private function sanitize_value($value, string $type) {
switch ($type) {
case 'attachment_ids':
if (!is_array($value)) {
return [];
}
$ids = array_values(array_filter(array_map('absint', $value)));
return array_values(array_unique($ids));
case 'html':
return wp_kses_post((string) $value);
case 'textarea':
@@ -488,6 +494,10 @@ class SchemaProvider {
return $this->sanitize_value($value, $sanitize_type);
}
if ($type === 'gallery') {
return $this->sanitize_value($value, 'attachment_ids');
}
if (in_array($type, ['fieldset', 'accordion'], true)) {
return $this->sanitize_object_fields($value, (array) ($field['fields'] ?? []));
}
@@ -658,6 +668,7 @@ class SchemaProvider {
'icon' => 'string',
'media' => 'url',
'upload' => 'url',
'gallery' => 'attachment_ids',
'code' => 'code',
];
src/Settings/AuthReader.php
+19 -8
View File
@@ -86,7 +86,7 @@ trait AuthReader {
$theme_mode = 'no';
}
return [
'background' => self::get_value('sign_page_background', []),
'background' => self::auth_gallery_ids('sign_page_background'),
'theme_mode' => $theme_mode,
'show_header' => (bool) self::get_value('sign_show_header', true),
'card_position' => in_array((string) self::get_value('sign_card_position', 'right'), ['left', 'center', 'right'], true)
@@ -99,16 +99,27 @@ trait AuthReader {
/** 弹窗 UI 配置数组 */
public static function modal_ui(): array {
return [
'background' => self::get_value('sign_modal_background', []),
'background' => self::auth_gallery_ids('sign_modal_background'),
'show_logo' => (bool) self::get_value('sign_modal_show_logo', false),
];
}
/** 认证图片库的唯一存储格式：正整数附件 ID 数组。 */
private static function auth_gallery_ids(string $key): array {
$value = self::get_value($key, []);
if (!is_array($value)) {
return [];
}
$ids = array_values(array_filter(array_map('absint', $value)));
return array_values(array_unique($ids));
}
/** 登录框日间 LOGO URL（空时回退全局 logo_url） */
public static function user_logo_url(): string {
$ids = self::get_value('user_logo', []);
if (is_array($ids) && !empty($ids)) {
$url = wp_get_attachment_url((int) $ids[0]);
$ids = self::auth_gallery_ids('user_logo');
if ($ids) {
$url = wp_get_attachment_image_url($ids[0], 'full');
if ($url) return $url;
}
return self::logo_url();
@@ -116,9 +127,9 @@ trait AuthReader {
/** 登录框夜间 LOGO URL（空时回退全局 logo_dark_url） */
public static function user_logo_dark_url(): string {
$ids = self::get_value('user_logo_dark', []);
if (is_array($ids) && !empty($ids)) {
$url = wp_get_attachment_url((int) $ids[0]);
$ids = self::auth_gallery_ids('user_logo_dark');
if ($ids) {
$url = wp_get_attachment_image_url($ids[0], 'full');
if ($url) return $url;
}
return self::logo_dark_url();
templates/pages/page-sign.php
+3 -5
View File
@@ -34,10 +34,8 @@ remove_action('wp_footer', 'aksrt_render_footer_tabbar', 20);
remove_action('wp_footer', 'aksrt_render_float_buttons', 30);
$ui = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::sign_page_ui() : [];
$images = $ui['background'] ?? [];
if (is_string($images)) {
$images = array_filter(array_map('absint', explode(',', $images)));
}
$background_url = is_array($images) && $images ? (string) wp_get_attachment_url((int) $images[array_rand($images)]) : '';
$background_id = $images ? (int) $images[array_rand($images)] : 0;
$background_url = $background_id > 0 ? (string) wp_get_attachment_image_url($background_id, 'full') : '';
$theme_mode = (string) ($ui['theme_mode'] ?? 'no');
$position = (string) ($ui['card_position'] ?? 'right');
$aksrt_auth_context = [
@@ -59,7 +57,7 @@ $aksrt_auth_context = [
</head>
<body <?php body_class('page-template-user-sign ' . ($theme_mode !== 'no' ? $theme_mode : '')); ?>>
<?php wp_body_open(); ?>
<div class="sign-page-background"<?php echo $background_url !== '' ? ' style="background-image:url(\'' . esc_url($background_url) . '\')"' : ''; ?>></div>
<?php if ($background_url !== '') : ?><div class="sign-page-background" style="background-image:url('<?php echo esc_url($background_url); ?>')"></div><?php endif; ?>
<?php if (!empty($ui['show_header']) && !$interim) : ?><header class="sign-topbar"><a href="<?php echo esc_url(home_url('/')); ?>"><?php echo esc_html(get_bloginfo('name')); ?></a><a href="<?php echo esc_url(home_url('/')); ?>"><?php esc_html_e('返回首页', 'aksrt'); ?></a></header><?php endif; ?>
<main class="sign-page sign-card-position-<?php echo esc_attr($position); ?>">
<div class="sign-page-card">
templates/parts/modal-auth.php
+9 -9
View File
@@ -13,13 +13,13 @@ if (is_user_logged_in() || (class_exists('\AKSRT\Settings\Settings') && \AKSRT\S
$modal_ui = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::modal_ui() : [];
$images = $modal_ui['background'] ?? [];
if (is_string($images)) {
$images = array_filter(array_map('absint', explode(',', $images)));
}
$image_url = '';
if (is_array($images) && $images) {
$image_url = (string) wp_get_attachment_url((int) $images[array_rand($images)]);
}
$image_id = $images ? (int) $images[array_rand($images)] : 0;
$image_html = $image_id > 0 ? wp_get_attachment_image($image_id, 'full', false, [
'class' => 'fit-cover radius8',
'alt' => get_bloginfo('name'),
'loading' => 'lazy',
'decoding' => 'async',
]) : '';
$auto = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::sign_modal_auto() : ['enabled' => false, 'waiting' => 5, 'expires' => 1];
$wechat = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_weixingzh_settings() : [];
$initial_tab = !empty($wechat['priority']) && class_exists('\AKSRT\Auth\WeixinGzh') && \AKSRT\Auth\WeixinGzh::is_enabled() ? 'oauth' : 'signin';
@@ -30,12 +30,12 @@ $aksrt_auth_context = [
'redirect_to' => home_url('/'),
];
?>
<div id="u_sign" class="aksrt-auth-modal<?php echo $image_url !== '' ? ' has-sign-img' : ''; ?>" aria-hidden="true" role="dialog" aria-modal="true" data-auth-modal data-auto="<?php echo !empty($auto['enabled']) ? '1' : '0'; ?>" data-auto-wait="<?php echo esc_attr((string) $auto['waiting']); ?>" data-auto-expires="<?php echo esc_attr((string) $auto['expires']); ?>">
<div id="u_sign" class="aksrt-auth-modal<?php echo $image_html !== '' ? ' has-sign-img' : ''; ?>" aria-hidden="true" role="dialog" aria-modal="true" data-auth-modal data-auto="<?php echo !empty($auto['enabled']) ? '1' : '0'; ?>" data-auto-wait="<?php echo esc_attr((string) $auto['waiting']); ?>" data-auto-expires="<?php echo esc_attr((string) $auto['expires']); ?>">
<div class="auth-modal-backdrop" data-auth-close></div>
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="auth-modal-close" data-auth-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times"></i></button>
<?php if ($image_url !== '') : ?><div class="sign-img" style="background-image:url('<?php echo esc_url($image_url); ?>')"></div><?php endif; ?>
<?php if ($image_html !== '') : ?><div class="sign-img"><?php echo $image_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div><?php endif; ?>
<?php require get_template_directory() . '/templates/parts/auth-content.php'; ?>
</div>
</div>
tests/widget-system/auth-source-contract.test.cjs
+24
View File
@@ -52,6 +52,30 @@ test('authentication settings use reference defaults and canonical keys', () =>
assert.doesNotMatch(all, /user_close_login|user_close_signup|nopas_first|password_first|nopas_only|referral_registration_enabled|referral_register_field/);
});
test('authentication galleries save attachment IDs and are consumed by both surfaces', () => {
const field = read('assets/admin/src/components/form/AksField.vue');
const gallery = read('assets/admin/src/components/form/AksGalleryField.vue');
const provider = read('src/Admin/SchemaProvider.php');
const reader = read('src/Settings/AuthReader.php');
const modal = read('templates/parts/modal-auth.php');
const page = read('templates/pages/page-sign.php');
const css = read('assets/css/routes/sign.css');
assert.match(field, /<AksGalleryField[\s\S]*?schema\.type === 'gallery'/);
assert.match(gallery, /multiple:\s*true/);
assert.match(gallery, /Number\.parseInt\(attachment\.id/);
assert.match(provider, /'gallery'\s*=>\s*'attachment_ids'/);
assert.match(provider, /case 'attachment_ids':[\s\S]*?array_map\('absint'/);
assert.match(reader, /auth_gallery_ids\('sign_modal_background'\)/);
assert.match(reader, /auth_gallery_ids\('sign_page_background'\)/);
assert.match(modal, /wp_get_attachment_image\(\$image_id, 'full'/);
assert.match(modal, /<div class="sign-img"><\?php echo \$image_html/);
assert.match(page, /wp_get_attachment_image_url\(\$background_id, 'full'\)/);
assert.match(page, /<div class="sign-page-background" style="background-image:url/);
assert.match(css, /\.sign-img img\s*\{[\s\S]*?object-fit:\s*cover/);
assert.doesNotMatch(modal + page, /is_string\(\$images\)|explode\(',', \$images\)/);
});
test('only the shared authentication REST routes and /sign/ renderer are registered', () => {
const controller = read('src/Admin/UserController.php');
const router = read('src/Auth/Router.php');