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

fix(float): use shared sticky save bar and place panel warnings after device tags

Browse Source
This commit is contained in:
kate522
2026-09-26 21:43:24 +08:00
parent f97614433c
commit 47bf9c8f0b
6 changed files with 131 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/src/components/floating/FloatBtnItemPanel.vue
+3 -3
View File
@@ -5,15 +5,15 @@
<i class="fa fas fa-arrows-alt-v" />
</button>
<strong class="float-btn-panel__title">{{ meta.title }}</strong>
<span v-if="meta.warn" class="float-btn-panel__warn">
<i class="fa fas fa-info-circle" /> {{ meta.warn }}
</span>
<template v-if="modelValue.type !== 'more'">
<n-tag v-if="modelValue.pc_s" size="small" type="info" :bordered="false">PC</n-tag>
<n-tag v-if="modelValue.m_s" size="small" type="warning" :bordered="false">移动</n-tag>
<n-tag v-if="!modelValue.pc_s && !modelValue.m_s" size="small" :bordered="false">未显示</n-tag>
</template>
<n-tag v-else size="small" :bordered="false">{{ modelValue.buttons.length }} 个</n-tag>
<span v-if="meta.warn" class="float-btn-panel__warn">
<i class="fa fas fa-info-circle" /> {{ meta.warn }}
</span>
<i class="fa fas float-btn-panel__arrow" :class="expanded ? 'fa-angle-up' : 'fa-angle-down'" />
</div>
assets/admin/src/components/form/AksFormRenderer.vue
+2 -81
View File
@@ -122,26 +122,7 @@
</div>
<!-- Sticky save bar -->
<div v-if="dirty" class="aksrt-form-renderer__save-bar">
<div class="aksrt-form-renderer__save-bar__inner">
<div class="aksrt-form-renderer__save-bar__info">
<FaIcon icon="fa fas fa-exclamation-circle" :size="14" />
<span>您有未保存的更改</span>
</div>
<div class="aksrt-form-renderer__save-bar__actions">
<n-button size="small" @click="$emit('reload')">放弃更改</n-button>
<n-button
size="small"
type="primary"
:loading="saving"
@click="$emit('save')"
>
<FaIcon v-if="!saving" icon="fa fas fa-save" :size="12" />
保存设置
</n-button>
</div>
</div>
</div>
<AksSaveBar :dirty="dirty" :saving="saving" @save="$emit('save')" @reload="$emit('reload')" />
</div>
</template>
@@ -159,6 +140,7 @@
*/
import { ref, computed, useSlots } from 'vue'
import FaIcon from './FaIcon.vue'
import AksSaveBar from './AksSaveBar.vue'
import AksFieldGroup from './AksFieldGroup.vue'
import AksField from './AksField.vue'
@@ -388,53 +370,6 @@ const filteredSchema = computed(() => {
font-size: 14px;
}
/* Sticky save bar */
.aksrt-form-renderer__save-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--aksrt-color-surface);
border-top: 1px solid var(--aksrt-color-border);
box-shadow: var(--aksrt-shadow-floating);
animation: slideUp 0.2s ease;
}
.aksrt-form-renderer__save-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
padding: 12px 28px;
gap: 16px;
}
.aksrt-form-renderer__save-bar__info {
display: flex;
align-items: center;
gap: 8px;
color: #d48806;
font-size: 13px;
}
.aksrt-form-renderer__save-bar__actions {
display: flex;
gap: 8px;
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Mobile */
@media (max-width: 768px) {
.aksrt-form-renderer__header {
@@ -446,19 +381,5 @@ const filteredSchema = computed(() => {
max-width: 100%;
width: 100%;
}
.aksrt-form-renderer__save-bar__inner {
flex-direction: column;
padding: 10px 14px;
gap: 8px;
}
.aksrt-form-renderer__save-bar__actions {
width: 100%;
}
.aksrt-form-renderer__save-bar__actions .n-button {
flex: 1;
}
}
</style>
assets/admin/src/components/form/AksSaveBar.vue
+101
View File
@@ -0,0 +1,101 @@
<template>
<div v-if="dirty" class="aksrt-form-renderer__save-bar">
<div class="aksrt-form-renderer__save-bar__inner">
<div class="aksrt-form-renderer__save-bar__info">
<FaIcon icon="fa fas fa-exclamation-circle" :size="14" />
<span>您有未保存的更改</span>
</div>
<div class="aksrt-form-renderer__save-bar__actions">
<n-button size="small" :disabled="saving" @click="emit('reload')">放弃更改</n-button>
<n-button
size="small"
type="primary"
:loading="saving"
@click="emit('save')"
>
<FaIcon v-if="!saving" icon="fa fas fa-save" :size="12" />
保存设置
</n-button>
</div>
</div>
</div>
</template>
<script setup>
/**
* AksSaveBar — the admin-wide sticky save bar (shown only when dirty).
* Shared by AksFormRenderer (schema pages) and custom settings pages.
*/
import FaIcon from './FaIcon.vue'
defineProps({
dirty: { type: Boolean, default: false },
saving: { type: Boolean, default: false },
})
const emit = defineEmits(['save', 'reload'])
</script>
<style scoped>
.aksrt-form-renderer__save-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--aksrt-color-surface);
border-top: 1px solid var(--aksrt-color-border);
box-shadow: var(--aksrt-shadow-floating);
animation: slideUp 0.2s ease;
}
.aksrt-form-renderer__save-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
padding: 12px 28px;
gap: 16px;
}
.aksrt-form-renderer__save-bar__info {
display: flex;
align-items: center;
gap: 8px;
color: #d48806;
font-size: 13px;
}
.aksrt-form-renderer__save-bar__actions {
display: flex;
gap: 8px;
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@media (max-width: 768px) {
.aksrt-form-renderer__save-bar__inner {
flex-direction: column;
padding: 10px 14px;
gap: 8px;
}
.aksrt-form-renderer__save-bar__actions {
width: 100%;
}
.aksrt-form-renderer__save-bar__actions .n-button {
flex: 1;
}
}
</style>
assets/admin/src/pages/content/FloatingButtonsSettings.vue
+15 -10
View File
@@ -1,10 +1,6 @@
<template>
<div class="aksrt-page-container content-page">
<PageHeader title="右侧悬浮按钮" desc="显示在页面右侧的悬浮按钮，支持排序及添加自定义按钮。">
<template #actions>
<n-button type="primary" :loading="saving" @click="handleSave">保存</n-button>
</template>
</PageHeader>
<PageHeader title="右侧悬浮按钮" desc="显示在页面右侧的悬浮按钮，支持排序及添加自定义按钮。" />
<n-spin :show="loading" style="width: 100%; min-height: 200px;">
<n-alert type="warning" :bordered="false" class="float-settings__notice">
@@ -67,20 +63,19 @@
</draggable>
</div>
</n-card>
<div class="aksrt-form-actions">
<n-button type="primary" :loading="saving" @click="handleSave">保存悬浮按钮配置</n-button>
</div>
</n-spin>
<AksSaveBar :dirty="dirty" :saving="saving" @save="handleSave" @reload="loadSettings" />
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { useMessage } from 'naive-ui'
import draggable from 'vuedraggable'
import api from '@/api'
import PageHeader from '@/components/PageHeader.vue'
import AksSaveBar from '@/components/form/AksSaveBar.vue'
import FloatBtnItemPanel from '@/components/floating/FloatBtnItemPanel.vue'
import { defaultSettings, normalizeItems } from '@/components/floating/floating-defaults.js'
@@ -89,6 +84,14 @@ const loading = ref(true)
const saving = ref(false)
const form = reactive(defaultSettings())
// 与全局保存栏一致：仅在有未保存更改时显示。以最近一次加载/保存的快照为基准。
const snapshot = ref('')
const serialize = () => JSON.stringify(form)
const dirty = computed(() => !loading.value && snapshot.value !== '' && serialize() !== snapshot.value)
function markClean() {
snapshot.value = serialize()
}
function updateItem(index, value) {
form.items.splice(index, 1, value)
}
@@ -108,6 +111,7 @@ async function loadSettings() {
try {
const res = await api.getFloatingButtons()
if (res.code === 'success') applySettings(res.data)
markClean()
} catch (error) {
console.error('[FloatingButtons] load failed:', error)
message.error('加载配置失败')
@@ -129,6 +133,7 @@ async function handleSave() {
})
if (res.code === 'success') {
if (res.data) applySettings(res.data)
markClean()
message.success(res.message || '保存成功')
} else {
message.error(res.message || '保存失败')
tests/widget-system/admin-ui-contract.test.cjs
+4 -1
View File
@@ -11,6 +11,7 @@ const styles = read('assets/admin/src/style.css')
const field = read('assets/admin/src/components/form/AksField.vue')
const fieldGroup = read('assets/admin/src/components/form/AksFieldGroup.vue')
const formRenderer = read('assets/admin/src/components/form/AksFormRenderer.vue')
const saveBar = read('assets/admin/src/components/form/AksSaveBar.vue')
const schemaProvider = read('src/Admin/SchemaProvider.php')
test('admin theme exposes the approved white, grey, and green tokens', () => {
@@ -52,7 +53,9 @@ test('shared forms use card surfaces and design tokens', () => {
assert.match(fieldGroup, /box-shadow:\s*var\(--aksrt-shadow-card\)/)
assert.match(field, /color:\s*var\(--aksrt-color-primary\)/)
assert.match(field, /background:\s*var\(--aksrt-color-primary-soft\)/)
assert.match(formRenderer, /background:\s*var\(--aksrt-color-surface\)/)
// Sticky save bar is shared by schema pages and custom settings pages.
assert.match(formRenderer, /<AksSaveBar /)
assert.match(saveBar, /background:\s*var\(--aksrt-color-surface\)/)
})
test('navigation, focus, responsive layout, and reduced motion are contracted', () => {
tools/admin-contract-report.json
+6 -6
View File
@@ -1,5 +1,5 @@
{
"generated_at": "2026-09-26T12:59:57+00:00",
"generated_at": "2026-09-26T13:42:28+00:00",
"errors": [],
"warnings": [
"customPage tools-update section 'tools/update' not in PHP schema (ok if pure operational page)",
@@ -232,24 +232,24 @@
"entry": true,
"missing_chunks": [],
"chunks": [
"SchemaPage.raPtoAxi.js",
"SchemaPage.CowEGY91.js",
"vendor-vue.BYzo-2I-.js",
"FaIcon.B3OOcphx.js",
"AksMediaField.DJPSTsh8.js",
"FaIconPicker.ZNRF6_J7.js",
"shared-api.D5VInyXf.js",
"AksMediaField.DTi5-IR5.js",
"vendor-misc.buu8cFA9.js",
"level.E3ANSDAX.js",
"badge.CKTsmH1z.js",
"vendor-naive.D3KCxD1U.js",
"DeferredPage.BR2FUrUF.js",
"NativeOpsRedirect.DMOc4MZt.js",
"FloatingButtonsSettings.CbTzuMvj.js",
"FloatingButtonsSettings.CLilEe8k.js",
"vendor-draggable.YNevSrwY.js",
"PageHeader.jmNZVzHG.js",
"FooterTabbarSettings.BFZnXJRS.js",
"PostPageSettings.CV4lCwlK.js",
"CommentSettings.DINI9YV7.js",
"PostPageSettings.DVS1TYjI.js",
"CommentSettings.CfVVYNWs.js",
"PermissionsCapabilities.Dwo7ED9D.js",
"CmsCredits.BeYe9Q4u.js",
"ThemeInfoPage.BEUFF9-H.js",