体积显示

src/editor/systemSettings.ts

@@ -21,6 +21,7 @@ export type SystemSettingsState = Pick<SettingsState,
   | 'tickWidth'
   | 'showAxisLabels'
   | 'unsavedChangesPrompt'
+  | 'showProjectSize'
   | 'axisColor'
 >
 
@@ -50,6 +51,7 @@ export function captureSystemSettings(settings: SettingsState): SystemSettingsSt
     tickWidth: settings.tickWidth,
     showAxisLabels: settings.showAxisLabels,
     unsavedChangesPrompt: settings.unsavedChangesPrompt,
+    showProjectSize: settings.showProjectSize,
     axisColor: settings.axisColor,
   }
 }
@@ -74,6 +76,7 @@ function normalizedSystemSettings(value: Partial<SystemSettingsState>, current:
     tickWidth: clamp(value.tickWidth, 1, 5, current.tickWidth),
     showAxisLabels: booleanValue('showAxisLabels'),
     unsavedChangesPrompt: booleanValue('unsavedChangesPrompt'),
+    showProjectSize: booleanValue('showProjectSize'),
     axisColor,
   }
 }

src/i18n/locales/de.json

@@ -76,6 +76,7 @@
     "axisColor": "Achsenfarbe",
     "showAxisLabels": "Skalenwert anzeigen",
     "unsavedPrompt": "Warnung bei ungespeicherten Änderungen",
+    "showProjectSize": "Speicherplatz der Konfigurationen anzeigen",
     "cacheNote": "Die gesamten Systemeinstellungen werden automatisch im aktuellen Browser gespeichert"
   },
   "config": {

src/i18n/locales/en.json

@@ -88,6 +88,7 @@
     "axisColor": "Axis color",
     "showAxisLabels": "Show tick values",
     "unsavedPrompt": "Prompt for unsaved changes",
+    "showProjectSize": "Show configuration storage usage",
     "cacheNote": "Settings are saved automatically in this browser"
   },
   "config": {

src/i18n/locales/es.json

@@ -76,6 +76,7 @@
     "axisColor": "color del eje",
     "showAxisLabels": "Mostrar valor de escala",
     "unsavedPrompt": "Avisar sobre cambios sin guardar",
+    "showProjectSize": "Mostrar espacio usado por las configuraciones",
     "cacheNote": "Toda la configuración del sistema se guarda automáticamente en el navegador actual."
   },
   "config": {

src/i18n/locales/fr.json

@@ -76,6 +76,7 @@
     "axisColor": "couleur de l'axe",
     "showAxisLabels": "Afficher la valeur de l'échelle",
     "unsavedPrompt": "Avertir des modifications non enregistrées",
+    "showProjectSize": "Afficher la taille des configurations",
     "cacheNote": "L'ensemble des paramètres du système sont automatiquement enregistrés dans le navigateur actuel"
   },
   "config": {

src/i18n/locales/ja.json

@@ -76,6 +76,7 @@
     "axisColor": "軸の色",
     "showAxisLabels": "表示スケール値",
     "unsavedPrompt": "未保存の変更を確認",
+    "showProjectSize": "設定の使用容量を表示",
     "cacheNote": "システム設定全体が現在のブラウザに自動的に保存されます"
   },
   "config": {

src/i18n/locales/ko.json

@@ -76,6 +76,7 @@
     "axisColor": "축 색상",
     "showAxisLabels": "표시 스케일 값",
     "unsavedPrompt": "저장되지 않은 변경 확인",
+    "showProjectSize": "설정 사용 공간 표시",
     "cacheNote": "전체 시스템 설정이 현재 브라우저에 자동으로 저장됩니다."
   },
   "config": {

src/i18n/locales/pt-BR.json

@@ -76,6 +76,7 @@
     "axisColor": "cor do eixo",
     "showAxisLabels": "Exibir valor da escala",
     "unsavedPrompt": "Avisar sobre alterações não salvas",
+    "showProjectSize": "Mostrar espaço usado pelas configurações",
     "cacheNote": "Todas as configurações do sistema são salvas automaticamente no navegador atual"
   },
   "config": {

src/i18n/locales/zh-CN.json

@@ -88,6 +88,7 @@
     "axisColor": "坐标轴颜色",
     "showAxisLabels": "显示刻度数值",
     "unsavedPrompt": "未保存提示",
+    "showProjectSize": "显示配置占用空间",
     "cacheNote": "整个系统设置会自动保存到当前浏览器"
   },
   "config": {

src/i18n/locales/zh-TW.json

@@ -76,6 +76,7 @@
     "axisColor": "座標軸顏色",
     "showAxisLabels": "顯示刻度數值",
     "unsavedPrompt": "未儲存提示",
+    "showProjectSize": "顯示設定佔用空間",
     "cacheNote": "整個系統設定會自動儲存到目前瀏覽器"
   },
   "config": {

src/store/particleStore.ts

@@ -67,6 +67,8 @@ export interface SettingsState {
   showAxisLabels: boolean
   /** 有未保存修改时，刷新或关闭页面前显示浏览器原生提示。 */
   unsavedChangesPrompt: boolean
+  /** 是否在配置列表中显示每条配置占用的空间。 */
+  showProjectSize: boolean
   /** 坐标轴数值颜色(#rrggbb) */
   axisColor: string
   /** 最大撤回操作数。 */
@@ -146,6 +148,7 @@ export const useParticleStore = defineStore('particle', {
       tickWidth: 1,
       showAxisLabels: true,
       unsavedChangesPrompt: false,
+      showProjectSize: false,
       axisColor: '#7a86ad',
       undoLimit: 20,
       backgroundX: 0,

src/views/StageSettingsPanel.vue

@@ -83,6 +83,14 @@ function normalizeBoneDebugSizes() {
         <b>{{ store.settings.unsavedChangesPrompt ? t('common.enabled') : t('common.disabled') }}</b>
       </span>
     </label>
+    <label class="sp-switch-row">
+      <span>{{ t('settings.showProjectSize') }}</span>
+      <span class="sp-switch-control">
+        <input type="checkbox" v-model="store.settings.showProjectSize" :aria-label="t('settings.showProjectSize')" />
+        <span class="sp-switch-ui" aria-hidden="true"></span>
+        <b>{{ store.settings.showProjectSize ? t('common.enabled') : t('common.disabled') }}</b>
+      </span>
+    </label>
     <div class="sp-cache-note">{{ t('settings.cacheNote') }}</div>
   </div>
 </template>
@@ -97,6 +105,7 @@ function normalizeBoneDebugSizes() {
 .sp-section-title { margin: 2px 0 8px; color: #8a93bb; font-size: 11px; }
 .sp-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #aab; }
 .sp-switch-row > span:first-child { min-width: 0; flex: 1; }
+.sp-switch-row + .sp-switch-row { margin-top: 9px; }
 .sp-switch-control { display: inline-flex; align-items: center; gap: 7px; }
 .sp-switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
 .sp-switch-ui { position: relative; width: 34px; height: 18px; border-radius: 999px; background: #39445a; cursor: pointer; transition: background .16s ease; }

src/views/particle-panel/ProjectConfigSection.vue

@@ -33,6 +33,7 @@
               @keydown.space.prevent="selectLocalProject(project)"
             >
               <span class="project-name">{{ project.name }}</span>
+              <span v-if="store.settings.showProjectSize" class="project-size">{{ formatProjectSize(project.size) }}</span>
               <div class="project-actions" @dblclick.stop>
                 <button type="button" @click.stop="removeLocalProject(project)">{{ $t('config.local.delete') }}</button>
                 <button type="button" @click.stop="downloadLocalProject(project)">{{ $t('config.local.download') }}</button>
@@ -89,6 +90,7 @@ import SpineObjectPanel from '../../spine/SpineObjectPanel.vue'
 import { useParticlePanelContext } from './particlePanelContext'
 import { resolvePresetDisplayName, type PresetOption } from './presetNames'
 const {
+  store,
   configFileInput, selectedPreset, presetOptions, presetLoading, configMessage, configError,
   localProjects, projectSaveOpen, projectNameDraft, projectSaveError, projectStorageBusy,
   saveConfig, closeProjectSaveDialog, confirmSaveConfig, loadLocalProject, downloadLocalProject,
@@ -97,6 +99,12 @@ const {
   loadSelectedPreset, collapsed, toggle, select,
 } = useParticlePanelContext()
 const { locale } = useI18n()
+function formatProjectSize(bytes: number) {
+  const kb = Math.max(1, bytes / 1024)
+  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`
+  const mb = kb / 1024
+  return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`
+}
 function presetDisplayName(preset: PresetOption) {
   return resolvePresetDisplayName(preset, locale.value)
 }
@@ -132,6 +140,7 @@ function presetDisplayName(preset: PresetOption) {
 .project-row.selected { background: #25264b; box-shadow: inset 2px 0 #8179ff; }
 .project-row:focus-visible { box-shadow: inset 0 0 0 1px #8179ff; }
 .project-name { min-width: 0; flex: 1; overflow: hidden; color: #c7d2e5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.project-size { flex: 0 0 62px; color: #7f8aa6; font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .project-actions { display: flex; flex: 0 0 auto; gap: 6px; }
 .project-actions button {
   display: inline-flex; height: 24px; align-items: center; padding: 0 7px; box-sizing: border-box;