From 47bf9c8f0b477f8716efee35b9dadb1eefefb63d Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Sat, 26 Sep 2026 21:43:24 +0800
Subject: [PATCH] fix(float): use shared sticky save bar and place panel
 warnings after device tags

---
 .../components/floating/FloatBtnItemPanel.vue |   6 +-
 .../src/components/form/AksFormRenderer.vue   |  83 +-------------
 .../admin/src/components/form/AksSaveBar.vue  | 101 ++++++++++++++++++
 .../pages/content/FloatingButtonsSettings.vue |  25 +++--
 .../widget-system/admin-ui-contract.test.cjs  |   5 +-
 tools/admin-contract-report.json              |  12 +--
 6 files changed, 131 insertions(+), 101 deletions(-)
 create mode 100644 assets/admin/src/components/form/AksSaveBar.vue

diff --git a/assets/admin/src/components/floating/FloatBtnItemPanel.vue b/assets/admin/src/components/floating/FloatBtnItemPanel.vue
index 2ace262d..e845450a 100644
--- a/assets/admin/src/components/floating/FloatBtnItemPanel.vue
+++ b/assets/admin/src/components/floating/FloatBtnItemPanel.vue
@@ -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>
 
diff --git a/assets/admin/src/components/form/AksFormRenderer.vue b/assets/admin/src/components/form/AksFormRenderer.vue
index b87a79b5..9cf48e2c 100644
--- a/assets/admin/src/components/form/AksFormRenderer.vue
+++ b/assets/admin/src/components/form/AksFormRenderer.vue
@@ -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>
diff --git a/assets/admin/src/components/form/AksSaveBar.vue b/assets/admin/src/components/form/AksSaveBar.vue
new file mode 100644
index 00000000..ab63ca5b
--- /dev/null
+++ b/assets/admin/src/components/form/AksSaveBar.vue
@@ -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>
diff --git a/assets/admin/src/pages/content/FloatingButtonsSettings.vue b/assets/admin/src/pages/content/FloatingButtonsSettings.vue
index ed7a36a8..d07597e3 100644
--- a/assets/admin/src/pages/content/FloatingButtonsSettings.vue
+++ b/assets/admin/src/pages/content/FloatingButtonsSettings.vue
@@ -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 || '保存失败')
diff --git a/tests/widget-system/admin-ui-contract.test.cjs b/tests/widget-system/admin-ui-contract.test.cjs
index 11f744b3..5389184d 100644
--- a/tests/widget-system/admin-ui-contract.test.cjs
+++ b/tests/widget-system/admin-ui-contract.test.cjs
@@ -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', () => {
diff --git a/tools/admin-contract-report.json b/tools/admin-contract-report.json
index 9cb43866..f90f58df 100644
--- a/tools/admin-contract-report.json
+++ b/tools/admin-contract-report.json
@@ -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",