修改标题，独立系统设置，可缓存

src/App.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="layout">
-    <!-- 左上:参数面板(宽度可拖) -->
-    <div class="left" :style="{ width: panelW + 'px' }">
+  <div class="layout" :class="{ 'panel-right': store.settings.parameterPanelOnRight }">
+    <!-- 参数面板：可在系统设置中切换左右位置，宽度可拖。 -->
+    <div class="parameter-panel" :style="{ width: panelW + 'px' }">
       <ParticlePanel />
     </div>
     <div class="resizer-col" @pointerdown="onPanelDrag"></div>
@@ -19,18 +19,25 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useParticleStore } from './store/particleStore'
+import { installSystemSettingsCache } from './editor/systemSettings'
 import Stage from './views/Stage.vue'
 import ParticlePanel from './views/ParticlePanel.vue'
 import Timeline from './views/Timeline.vue'
 
+const store = useParticleStore()
+installSystemSettingsCache(store)
 const panelW = ref(360)
 const timelineH = ref(180)
 
-// 左面板宽度拖拽
+// 参数面板宽度拖拽：面板在右侧时，从视口右边缘反向计算宽度。
 function onPanelDrag(e: PointerEvent) {
   e.preventDefault()
   const move = (ev: PointerEvent) => {
-    const w = Math.max(240, Math.min(ev.clientX, window.innerWidth - 200))
+    const pointerWidth = store.settings.parameterPanelOnRight
+      ? window.innerWidth - ev.clientX
+      : ev.clientX
+    const w = Math.max(240, Math.min(pointerWidth, window.innerWidth - 200))
     panelW.value = w
   }
   const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up) }
@@ -55,10 +62,13 @@ function onTimelineDrag(e: PointerEvent) {
 
 <style scoped>
 .layout { display: flex; width: 100%; height: 100%; min-height: 0; overflow: clip; }
-.left { flex-shrink: 0; height: 100%; min-height: 0; overflow: clip; }
+.parameter-panel { flex-shrink: 0; height: 100%; min-height: 0; overflow: clip; }
 .resizer-col { width: 5px; cursor: col-resize; background: #1c1c2a; border-left: 1px solid #2a2a3c; border-right: 1px solid #2a2a3c; flex-shrink: 0; }
 .resizer-col:hover { background: #3a5a8c; }
 .right { flex: 1; min-width: 0; height: 100%; min-height: 0; overflow: clip; display: flex; flex-direction: column; }
+.panel-right .right { order: 1; }
+.panel-right .resizer-col { order: 2; }
+.panel-right .parameter-panel { order: 3; }
 .stage-area { flex: 1; min-height: 0; overflow: clip; }
 .resizer-row { height: 4px; cursor: row-resize; background: #1c1c2a; border-top: 1px solid #2a2a3c; border-bottom: 1px solid #2a2a3c; flex-shrink: 0; }
 .resizer-row:hover { background: #3a5a8c; }