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

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>