refactor: 将 styleStore 中仅影响 ui 显示的字段移到 uiStore

- 将 showTime/showAccount 字段从 ViewSetting 迁移到 uiStore
- 为 uiStore 做了 localStorage 持久化
- 对旧版本的 project 做了兼容性处理

Author: FreecellRaid

src/components/common/MessageItem.vue

@@ -51,14 +51,14 @@
             <span class="message-name" :style="computedStyles.nameStyle">
                 {{ message.playerName }}
                 <span
-                    v-if="styleStore.viewSettings.showAccount"
+                    v-if="uiStore.showAccount"
                     class="message-account"
                 >
                     ({{ message.account }})
                 </span>
             </span>
 
-            <span class="message-time" v-if="styleStore.viewSettings.showTime">
+            <span class="message-time" v-if="uiStore.showTime">
                 {{ formatDate(message.time) }}
             </span>
         </div>
@@ -90,6 +90,7 @@ import { computed, ref, nextTick, watch } from 'vue';
 import type { Message } from '@/types/log';
 import { onClickOutside } from '@vueuse/core';
 import { useStyleStore } from '@/stores/styleStore';
+import { useUiStore } from '@/stores/uiStore';
 import { formatDate } from '@/utils/date';
 import { computeStyleForMessage } from '@/editor/styleEngine';
 import { Trash2, Plus, Scissors, ChevronsDown } from '@lucide/vue';
@@ -129,6 +130,7 @@ const emit = defineEmits<{
 }>();
 
 const styleStore = useStyleStore();
+const uiStore = useUiStore();
 
 const computedStyles = computed(function () {
     return computeStyleForMessage(props.message, styleStore.activeRules);

src/components/layout/SidebarLeft.vue

@@ -110,14 +110,14 @@
                         <label class="setting-item">
                             <input
                                 type="checkbox"
-                                v-model="styleStore.viewSettings.showTime"
+                                v-model="uiStore.showTime"
                             />
                             <span>显示消息时间</span>
                         </label>
                         <label class="setting-item">
                             <input
                                 type="checkbox"
-                                v-model="styleStore.viewSettings.showAccount"
+                                v-model="uiStore.showAccount"
                             />
                             <span>显示帐号</span>
                         </label>

src/io/localStorage/project.ts

@@ -107,8 +107,6 @@ export function cloneRules(rules: ColorRule[]): ColorRule[] {
 
 export function cloneViewSettings(viewSettings: ViewSettings): ViewSettings {
     return {
-        showTime: viewSettings.showTime,
-        showAccount: viewSettings.showAccount,
         hideOoc: viewSettings.hideOoc,
         hideCommand: viewSettings.hideCommand,
         enableMarkdown: viewSettings.enableMarkdown,
@@ -358,8 +356,6 @@ function normalizeRules(rawRules: unknown): ColorRule[] {
 
 function normalizeViewSettings(rawViewSettings: unknown): ViewSettings {
     const defaults: ViewSettings = {
-        showTime: true,
-        showAccount: true,
         hideOoc: false,
         hideCommand: false,
         enableMarkdown: false,
@@ -371,14 +367,6 @@ function normalizeViewSettings(rawViewSettings: unknown): ViewSettings {
     }
 
     return {
-        showTime:
-            typeof rawViewSettings.showTime === 'boolean'
-                ? rawViewSettings.showTime
-                : defaults.showTime,
-        showAccount:
-            typeof rawViewSettings.showAccount === 'boolean'
-                ? rawViewSettings.showAccount
-                : defaults.showAccount,
         hideOoc:
             typeof rawViewSettings.hideOoc === 'boolean'
                 ? rawViewSettings.hideOoc

src/stores/styleStore.ts

@@ -7,8 +7,6 @@ import { collectIdentityValues } from '@/editor/identity';
 
 function ruleStore() {
     const viewSettings = ref<ViewSettings>({
-        showTime: true,
-        showAccount: true,
         hideOoc: false,
         hideCommand: false,
         enableMarkdown: false,
@@ -202,8 +200,6 @@ function ruleStore() {
 
     function replaceViewSettings(newSettings: ViewSettings) {
         viewSettings.value = {
-            showTime: newSettings.showTime,
-            showAccount: newSettings.showAccount,
             hideOoc: newSettings.hideOoc,
             hideCommand: newSettings.hideCommand,
             enableMarkdown: newSettings.enableMarkdown,

src/stores/uiStore.ts

@@ -1,16 +1,70 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
 
 // 侧边栏面板布局常量
 export const PANEL_MIN_WIDTH = 150;
 export const PANEL_MAX_WIDTH = 600;
+const LEGACY_UI_SETTINGS_STORAGE_KEY = 'freecell-log-studio.ui-settings';
+
+interface StoredUiSettings {
+    showTime?: boolean;
+    showAccount?: boolean;
+}
+
+function readLegacyUiSettings(): StoredUiSettings {
+    try {
+        const raw = localStorage.getItem(LEGACY_UI_SETTINGS_STORAGE_KEY);
+        if (!raw) {
+            return {};
+        }
+
+        const parsed = JSON.parse(raw) as unknown;
+        if (typeof parsed !== 'object' || parsed === null) {
+            return {};
+        }
+
+        return {
+            showTime:
+                typeof (parsed as StoredUiSettings).showTime === 'boolean'
+                    ? (parsed as StoredUiSettings).showTime
+                    : undefined,
+            showAccount:
+                typeof (parsed as StoredUiSettings).showAccount === 'boolean'
+                    ? (parsed as StoredUiSettings).showAccount
+                    : undefined,
+        };
+    } catch {
+        return {};
+    }
+}
 
 function uiStore() {
-    const leftPanelWidth = ref(232);
-    const rightPanelWidth = ref(280);
+    const legacyUiSettings = readLegacyUiSettings();
+    const leftPanelWidth = useLocalStorage(
+        'freecell-log-studio.ui.leftPanelWidth',
+        232,
+    );
+    const rightPanelWidth = useLocalStorage(
+        'freecell-log-studio.ui.rightPanelWidth',
+        280,
+    );
+    const showTime = useLocalStorage(
+        'freecell-log-studio.ui.showTime',
+        legacyUiSettings.showTime ?? true,
+    );
+    const showAccount = useLocalStorage(
+        'freecell-log-studio.ui.showAccount',
+        legacyUiSettings.showAccount ?? true,
+    );
     // 深色模式
-    const isDarkMode = ref(detectSystemDark());
-    const followSystem = ref(true);
+    const isDarkMode = useLocalStorage(
+        'freecell-log-studio.ui.isDarkMode',
+        detectSystemDark(),
+    );
+    const followSystem = useLocalStorage(
+        'freecell-log-studio.ui.followSystem',
+        true,
+    );
 
     function detectSystemDark() {
         return (
@@ -44,19 +98,27 @@ function uiStore() {
         }
     }
     // 显示隐藏消息
-    const showHidden = ref(false);
+    const showHidden = useLocalStorage(
+        'freecell-log-studio.ui.showHidden',
+        false,
+    );
     function toggleShowHidden() {
         showHidden.value = !showHidden.value;
     }
 
-    const exportPreviewAlwaysWhite = ref(false);
+    const exportPreviewAlwaysWhite = useLocalStorage(
+        'freecell-log-studio.ui.exportPreviewAlwaysWhite',
+        false,
+    );
     function toggleExportPreviewAlwaysWhite() {
         exportPreviewAlwaysWhite.value = !exportPreviewAlwaysWhite.value;
     }
 
     return {
         leftPanelWidth,
         rightPanelWidth,
+        showTime,
+        showAccount,
         exportPreviewAlwaysWhite,
         isDarkMode,
         followSystem,

src/types/style.ts

@@ -16,8 +16,6 @@ export interface ColorRule {
 }
 
 export interface ViewSettings {
-    showTime: boolean;
-    showAccount: boolean;
     hideOoc: boolean;
     hideCommand: boolean;
     enableMarkdown: boolean;