feat: 实现 Flags 多级存储管理与 UI 操作优化

- 支持 Global (用户级) 和 Workspace (工作区级) 双重存储作用域
- 在 Theme 编辑行添加地球图标，支持通过图标切换存储作用域（默认为 Global）
- 优化持久化逻辑，将工作区 Flags 直接同步到项目的 settings.json 文件中
- 新增 Flag 删除约束：若 Flag 下存在已配置的主题，则禁用删除按钮并置灰
- 优化 Webview 通信机制，通过事件驱动同步替代响应式全量同步，解决配置更新导致的页面闪烁问题

Author: sunzhongyi

extension.ts

@@ -10,7 +10,17 @@ interface WebviewState {
   currentView: 'form' | 'text' | 'flags'
   commitData: any
   textContent: string
-  flags?: Record<string, Record<string, { deadline?: string; docUrl?: string }>>
+}
+
+interface FlagConfig {
+  [theme: string]: {
+    deadline?: string
+    docUrl?: string
+  }
+}
+
+interface FlagsConfig {
+  [flag: string]: FlagConfig
 }
 
 // New interfaces for our settings structure
@@ -47,6 +57,17 @@ export function activate(context: vscode.ExtensionContext) {
       SettingsPanel.createOrShow(context)
     })
   )
+
+  // Listen for configuration changes
+  context.subscriptions.push(
+    vscode.workspace.onDidChangeConfiguration((e) => {
+      if (e.affectsConfiguration('commitAssistant.flags')) {
+        if (CommitEditorPanel.currentPanel) {
+          CommitEditorPanel.currentPanel.refreshConfig()
+        }
+      }
+    })
+  )
 }
 
 class CommitEditorPanel {
@@ -95,9 +116,15 @@ class CommitEditorPanel {
             vscode.window.showErrorMessage(message.text)
             return
           case 'saveState':
-            // Save all state to workspace state
-            this._context.workspaceState.update('state', message.state)
-            console.log('State saved to workspaceState:', message.state);
+            // Save UI state to workspace state
+            this._context.workspaceState.update('state', {
+              currentView: message.state.currentView,
+              commitData: message.state.commitData,
+              textContent: message.state.textContent
+            })
+            return
+          case 'updateFlags':
+            this._updateFlags(message.globalFlags, message.workspaceFlags)
             return
           case 'openSettings':
             vscode.commands.executeCommand('commitAssistant.openSettings')
@@ -128,6 +155,20 @@ class CommitEditorPanel {
     )
   }
 
+  private async _updateFlags(globalFlags: FlagsConfig, workspaceFlags: FlagsConfig) {
+    const config = vscode.workspace.getConfiguration('commitAssistant')
+    try {
+      await config.update('flags', globalFlags, vscode.ConfigurationTarget.Global)
+      await config.update('flags', workspaceFlags, vscode.ConfigurationTarget.Workspace)
+    } catch (error: any) {
+      vscode.window.showErrorMessage(`Failed to save flags: ${error.message}`)
+    }
+  }
+
+  public refreshConfig() {
+    this._sendConfig()
+  }
+
   private _saveCommitMessage(commitMessage: string) {
     const gitExtension = vscode.extensions.getExtension('vscode.git')?.exports
     const git = gitExtension?.getAPI(1)
@@ -267,24 +308,20 @@ class CommitEditorPanel {
 
     this._sendConfig()
 
-    // Load state from workspace and global storage
+    // Load UI state from workspace state
     const storedState = this._context.workspaceState.get<WebviewState>('state')
 
-    // Merge workspace state with global flags
     const mergedState = storedState
       ? {
           ...storedState,
-          flags: storedState.flags || {},
         }
       : {
           currentView: 'form',
           commitData: {},
           textContent: '',
-          flags: {},
         }
 
     // Send merged state to the webview
-    console.log('State sent to webview:', mergedState);
     this._panel.webview.postMessage({ command: 'loadState', state: mergedState })
   }
 
@@ -301,14 +338,36 @@ class CommitEditorPanel {
       ...commitTypesFromConfig
     ];
 
-    // We could also get flags from config in the future
+    const inspect = config.inspect<FlagsConfig>('flags')
+    const globalFlags = inspect?.globalValue || {}
+    const workspaceFlags = inspect?.workspaceValue || {}
+
+    // Merge flags for the webview UI, adding scope info to each theme
+    const mergedFlags: Record<string, Record<string, any>> = {}
+
+    // Add global flags
+    for (const [flag, themes] of Object.entries(globalFlags)) {
+      if (!mergedFlags[flag]) mergedFlags[flag] = {}
+      for (const [theme, data] of Object.entries(themes)) {
+        mergedFlags[flag][theme] = { ...data, scope: 'global' }
+      }
+    }
+
+    // Add workspace flags (overwrites or adds to global)
+    for (const [flag, themes] of Object.entries(workspaceFlags)) {
+      if (!mergedFlags[flag]) mergedFlags[flag] = {}
+      for (const [theme, data] of Object.entries(themes)) {
+        mergedFlags[flag][theme] = { ...data, scope: 'workspace' }
+      }
+    }
+
     this._panel.webview.postMessage({
       command: 'loadConfig',
       config: {
         commitTypes,
         themeDeadline,
         preference,
-        flags: {}, // Placeholder for future flag configuration
+        flags: mergedFlags,
       },
     })
   }

package.json

@@ -111,6 +111,28 @@
             }
           ],
           "description": "The list of commit types to display in the type selector. Override this in your user or workspace settings."
+        },
+        "commitAssistant.flags": {
+          "type": "object",
+          "default": {},
+          "description": "Custom flags for commit messages. Can be configured at global or workspace level.",
+          "additionalProperties": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "object",
+              "properties": {
+                "deadline": {
+                  "type": "string",
+                  "format": "date",
+                  "description": "Optional deadline for this theme."
+                },
+                "docUrl": {
+                  "type": "string",
+                  "description": "Optional documentation URL for this theme."
+                }
+              }
+            }
+          }
         }
       }
     }

webviews/commit-editor/App.svelte

@@ -23,13 +23,38 @@
   }
 
   let textContent = ''
-  let flags: Record<string, Record<string, { deadline?: string; docUrl?: string }>> = {}
+  let flags: Record<string, Record<string, { deadline?: string; docUrl?: string; scope?: 'global' | 'workspace' }>> = {}
   let commitTypes: { value: string; label: string; description?: string }[] = []
   let themeDeadlineConfig: ThemeDeadlineConfig = DEFAULT_THEME_DEADLINE_CONFIG
   let preference = { loadingEffect: 'creative' };
   let preview = ''
   let isAiLoading = false
 
+  function syncFlags(currentFlags: typeof flags) {
+    const globalFlags: any = {}
+    const workspaceFlags: any = {}
+
+    for (const [flag, themes] of Object.entries(currentFlags)) {
+      for (const [theme, data] of Object.entries(themes)) {
+        const { scope, ...rest } = data
+        const target = scope === 'workspace' ? workspaceFlags : globalFlags
+        if (!target[flag]) target[flag] = {}
+        target[flag][theme] = rest
+      }
+    }
+
+    vscode.postMessage({
+      command: 'updateFlags',
+      globalFlags,
+      workspaceFlags
+    })
+  }
+
+  function handleFlagsChange(event: CustomEvent) {
+    flags = event.detail
+    syncFlags(flags)
+  }
+
   function generateCommitFromForm() {
     const { type, scope, description, body, footer, selectedFlags } = commitData
     if (!type || !description) return ''
@@ -107,7 +132,6 @@
             commitData.selectedFlags = loadedCommitData.selectedFlags || []
           }
           textContent = state.textContent || ''
-          flags = state.flags || {}
           break
         case 'loadConfig':
           flags = message.config.flags || {}
@@ -156,15 +180,13 @@
       }
       preview = message
     }
-    // This makes the block reactive to commitData and flags
+    // This makes the block reactive to commitData
     JSON.stringify(commitData)
-    JSON.stringify(flags)
 
-    // Post the state to the extension host
-    console.log('Saving state with flags:', flags);
+    // Post the state to the extension host (without flags)
     vscode.postMessage({
       command: 'saveState',
-      state: { currentView, commitData, textContent, flags },
+      state: { currentView, commitData, textContent },
     })
   }
 </script>
@@ -211,7 +233,7 @@
         on:openUrl={handleOpenUrl}
       />
     {:else if currentView === 'flags'}
-      <FlagsView bind:flags {themeDeadlineConfig} on:openUrl={handleOpenUrl} />
+      <FlagsView bind:flags {themeDeadlineConfig} on:openUrl={handleOpenUrl} on:change={handleFlagsChange} />
     {/if}
   </div>
 

webviews/commit-editor/components/FlagItem.svelte

@@ -57,19 +57,25 @@
 <div class="rounded-md" style="background-color: var(--vscode-sideBar-background);">
   <div class="flex justify-between items-center py-1.5 pl-2.5 pr-1">
     <h4 class="text-sm font-semibold">{flagName}</h4>
-    <button on:click={deleteFlag} class="delete-flag-button">
+    <button 
+      on:click={deleteFlag} 
+      class="delete-flag-button" 
+      disabled={Object.keys(themes).length > 0}
+      title={Object.keys(themes).length > 0 ? "Cannot delete flag with themes" : "Delete flag"}
+    >
       <Trash className="w-3.5 h-3.5" />
     </button>
   </div>
 
   <div class="pl-4 pr-1 pb-1.5">
     <div class="space-y-0.5">
-      {#each Object.entries(themes) as [themeName, { deadline, docUrl }]}
+      {#each Object.entries(themes) as [themeName, data]}
         <ThemeItem
           {flagName}
           {themeName}
-          {deadline}
-          {docUrl}
+          deadline={data.deadline}
+          docUrl={data.docUrl}
+          scope={data.scope}
           {themeDeadlineConfig}
           on:updateTheme={updateTheme}
           on:deleteTheme={deleteTheme}
@@ -140,6 +146,13 @@
     background-color: rgba(var(--vscode-editor-foreground-rgb), 0.15);
     opacity: 0.8;
   }
+  .delete-flag-button:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+  .delete-flag-button:disabled:hover {
+    background-color: rgba(var(--vscode-editor-foreground-rgb), 0.1);
+  }
   .deadline-input {
     box-sizing: border-box;
     background-color: var(--vscode-input-background);

webviews/commit-editor/components/FlagsView.svelte

@@ -19,35 +19,40 @@
       flags[newFlagName] = {};
       flags = flags; // Trigger reactivity
       newFlagName = '';
+      dispatch('change', flags);
     }
   }
 
   function handleAddTheme(event: CustomEvent) {
-    const { flagName, themeName, deadline, docUrl } = event.detail;
+    const { flagName, themeName, deadline, docUrl, scope } = event.detail;
     if (themeName && !flags[flagName][themeName]) {
-      flags[flagName][themeName] = { deadline, docUrl };
+      flags[flagName][themeName] = { deadline, docUrl, scope: scope || 'global' };
       flags = { ...flags }; // Trigger reactivity
+      dispatch('change', flags);
     }
   }
 
   function handleUpdateTheme(event: CustomEvent) {
-    const { flagName, themeName, deadline, docUrl } = event.detail;
+    const { flagName, themeName, deadline, docUrl, scope } = event.detail;
     if (flags[flagName] && flags[flagName][themeName]) {
-      flags[flagName][themeName] = { ...flags[flagName][themeName], deadline, docUrl };
+      flags[flagName][themeName] = { ...flags[flagName][themeName], deadline, docUrl, scope };
       flags = { ...flags };
+      dispatch('change', flags);
     }
   }
 
   function handleDeleteTheme(event: CustomEvent) {
     const { flagName, themeName } = event.detail;
     delete flags[flagName][themeName];
     flags = { ...flags }; // Trigger reactivity
+    dispatch('change', flags);
   }
 
   function handleDeleteFlag(event: CustomEvent) {
     const flagName = event.detail;
     delete flags[flagName];
     flags = flags; // Trigger reactivity
+    dispatch('change', flags);
   }
 
   function handleOpenUrl(event: CustomEvent) {

webviews/commit-editor/components/ThemeItem.svelte

@@ -3,6 +3,7 @@
   import Minus from './icons/Minus.svelte';
   import Edit from './icons/Edit.svelte';
   import Check from './icons/Check.svelte';
+  import Globe from './icons/Globe.svelte';
   import {
     type ThemeDeadlineConfig,
     calculateDeadlineStatus,
@@ -13,6 +14,7 @@
   export let themeName: string;
   export let deadline: string | undefined;
   export let docUrl: string | undefined;
+  export let scope: 'global' | 'workspace' = 'global';
   export let themeDeadlineConfig: ThemeDeadlineConfig;
 
   const dispatch = createEventDispatcher();
@@ -25,7 +27,12 @@
   $: colors = getDeadlineColors(status, themeDeadlineConfig);
 
   function updateTheme() {
-    dispatch('updateTheme', { flagName, themeName, deadline: currentDeadline, docUrl });
+    dispatch('updateTheme', { flagName, themeName, deadline: currentDeadline, docUrl, scope });
+  }
+
+  function toggleScope() {
+    scope = scope === 'global' ? 'workspace' : 'global';
+    updateTheme();
   }
 
   function deleteTheme() {
@@ -101,6 +108,14 @@
       on:change={updateTheme}
     />
 
+    <button
+      on:click={toggleScope}
+      class="scope-toggle ml-1 {scope}"
+      title={scope === 'global' ? 'Global (User Settings)' : 'Workspace (settings.json)'}
+    >
+      <Globe className="w-3.5 h-3.5" />
+    </button>
+
     <button on:click={deleteTheme} class="delete-theme-button ml-1">
       <Minus className="w-3.5 h-3.5" />
     </button>
@@ -187,6 +202,18 @@
   .url-text-link:hover {
     opacity: 0.8;
   }
+  .scope-toggle {
+    color: var(--vscode-editor-foreground);
+    background-color: transparent;
+    opacity: 0.25;
+  }
+  .scope-toggle.global {
+    opacity: 0.9;
+  }
+  .scope-toggle:hover {
+    background-color: rgba(var(--vscode-editor-foreground-rgb), 0.1);
+    opacity: 1;
+  }
   .delete-theme-button {
     color: var(--vscode-editor-foreground);
     background-color: rgba(var(--vscode-editor-foreground-rgb), 0.1);