fix(admin): unify settings save controls

assets/admin/src/pages/content/FooterTabbarSettings.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="jio-page-container content-page">
-    <PageHeader title="底部Tab配置" desc="自定义移动端底部导航栏的按钮，支持排序、图标配置和返回顶部功能。">
-      <template #actions>
-        <n-button type="primary" :loading="saving" @click="handleSave">保存</n-button>
-      </template>
-    </PageHeader>
+    <PageHeader title="底部Tab配置" desc="自定义移动端底部导航栏的按钮，支持排序、图标配置和返回顶部功能。" />
 
     <n-spin :show="loading" style="width: 100%; min-height: 200px;">
       <!-- 基础设置 -->
@@ -99,12 +95,10 @@
         </draggable>
         <n-empty v-else description="暂无Tab按钮，请点击上方按钮添加" />
       </n-card>
-
-      <div class="jio-form-actions">
-        <n-button type="primary" :loading="saving" @click="handleSave">保存底部Tab配置</n-button>
-      </div>
     </n-spin>
 
+    <JioSaveBar :dirty="dirty" :saving="saving" @save="handleSave" @reload="loadSettings" />
+
     <!-- 编辑弹窗 -->
     <n-modal
       v-model:show="showModal"
@@ -260,6 +254,7 @@ import { NButton, NTag, useDialog, useMessage } from 'naive-ui'
 import draggable from 'vuedraggable'
 import api from '@/api'
 import PageHeader from '@/components/PageHeader.vue'
+import JioSaveBar from '@/components/form/JioSaveBar.vue'
 import FaIconPicker from '@/components/form/FaIconPicker.vue'
 import IconValue from '@/components/form/IconValue.vue'
 import JioSortHandle from '@/components/form/JioSortHandle.vue'
@@ -280,6 +275,12 @@ const form = reactive({
   footer_tabbar_single: 'default',
   items: [],
 })
+const snapshot = ref('')
+const serialize = () => JSON.stringify(form)
+const dirty = computed(() => !loading.value && snapshot.value !== '' && serialize() !== snapshot.value)
+function markClean() {
+  snapshot.value = serialize()
+}
 
 const editingItem = reactive({
   id: '',
@@ -552,6 +553,7 @@ async function loadSettings() {
         add_items: Array.isArray(item.add_items) ? item.add_items : [],
         sort_order: item.sort_order ?? idx,
       }))
+      markClean()
     }
   } catch (e) {
     console.error('[FooterTabbar] load failed:', e)
@@ -581,6 +583,7 @@ async function handleSave() {
     }
     const res = await api.saveFooterTabbarSettings(payload)
     if (res.code === 'success') {
+      markClean()
       message.success(res.message || '保存成功')
     } else {
       message.error(res.message || '保存失败')