悬浮导航

src/views/particle-panel/ExportSettingsSection.vue

@@ -1,11 +1,11 @@
 <template>
-<!-- 7. 导出设置：当前阶段只维护参数，后续接入 JSON 生成。 -->
+<!-- 7. 导出资源：导出参数与资源输出操作。 -->
       <div class="group">
         <div class="group-head" @click="toggle('export')">
           <span class="caret">{{ collapsed.export ? '▸' : '▾' }}</span><span>{{ $t('export.title') }}</span>
           <button class="group-reset" :title="$t('export.reset')" @click.stop="resetModule('export')">{{ $t('common.reset') }}</button>
         </div>
-        <div class="group-body export-settings" v-show="!collapsed.export">
+        <div class="group-body export-settings" v-show="sectionOpen('export')">
           <label class="export-field">
             <span>{{ $t('export.imagesPath') }}</span>
             <input v-model.trim="exportSettings.imagesPath" class="inp export-input" type="text" placeholder="./images/" />
@@ -55,6 +55,9 @@
               <span class="switch-ui"></span><span>{{ $t('export.excludeEmpty') }}</span>
             </label>
           </div>
+          <div class="export-resource-actions">
+            <ParticleExportFooter />
+          </div>
         </div>
       </div>
 </template>
@@ -66,8 +69,9 @@ import ParticleAttributeControl from '../ParticleAttributeControl.vue'
 import ColorGradientEditor from '../ColorGradientEditor.vue'
 import ImageResourceCard from '../ImageResourceCard.vue'
 import SpineObjectPanel from '../../spine/SpineObjectPanel.vue'
+import ParticleExportFooter from './ParticleExportFooter.vue'
 import { useParticlePanelContext } from './particlePanelContext'
-const { exportSettings, collapsed, toggle, resetModule, normalizeExportFps, select } = useParticlePanelContext()
+const { exportSettings, collapsed, toggle, sectionOpen, resetModule, normalizeExportFps, select } = useParticlePanelContext()
 </script>
 
 <style scoped>
@@ -99,6 +103,7 @@ const { exportSettings, collapsed, toggle, resetModule, normalizeExportFps, sele
 .export-switches { display: grid; gap: 13px; margin: 4px 0 7px; padding-top: 2px; }
 .export-switch { font-weight: 600; }
 .export-switch-last { margin-top: 13px; }
+.export-resource-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid #2d3950; }
 .inp.tiny { width: 46px; flex: 0 0 46px; text-align: center; }
 .switch-row { display: flex; align-items: center; gap: 9px; color: #b8c1d5; font-size: 12px; cursor: pointer; }
 .switch-row input { position: absolute; opacity: 0; pointer-events: none; }