refactor🎨: (阅读代码)：state..ts增加注释

webview/src/view/index.ts

@@ -1,26 +1,44 @@
-
+// 导入 redux 中的 Store 类型
 import type { Store } from 'redux';
+// 导入用于在 VSCode 中添加监听器的函数
 import { addListener } from '../vscode';
+// 从 actions 模块中导入所有的 action 创建函数
 import * as actions from './actions';
 
+// 导出 reducers 模块中的 reducer 函数
 export { reducer } from './reducers';
+// 导出 state 模块中的所有内容
 export * from './state';
+// 导出 actions 模块中的所有内容
 export { actions };
 
+/**
+ * 初始化 Redux 存储并添加一个监听器来处理来自 VSCode 的消息
+ * @param store - Redux 存储对象
+ */
 export function initStore(store: Store) {
+  // 使用 addListener 函数添加一个监听器，当接收到消息时，会调用回调函数
   addListener((msg) => {
+    // 从消息中提取 navigation 对象
     const { navigation } = msg;
+    // 根据 navigation 对象的 type 属性来判断消息类型，并分派相应的 action
     switch (navigation.type) {
+      // 如果消息类型是 'newconfig'，则分派 openNewConfig 动作
       case 'newconfig':
         return store.dispatch(actions.openNewConfig());
+      // 如果消息类型是 'editconfig'，则进一步处理
       case 'editconfig': {
+        // 从 navigation 对象中提取 config 属性
         let { config } = navigation;
+        // 如果 config 是一个数组，并且长度不为 1，则分派 openConfigLocator 动作
         if (Array.isArray(config)) {
           if (config.length !== 1) {
             return store.dispatch(actions.openConfigLocator(config, config[0].name));
           }
+          // 如果 config 是一个数组，并且长度为 1，则将 config 数组的第一个元素赋值给 config 变量
           config = config[0];
         }
+        // 最后，分派 openConfigEditor 动作
         return store.dispatch(actions.openConfigEditor(config));
       }
     }

webview/src/view/reducers.ts

@@ -1,43 +1,83 @@
+// 导入 vscode 模块中的 API 接口
 import { API } from '../vscode';
+// 导入 actions 模块中的 Action 和 ActionType 类型
 import { Action, ActionType } from './actions';
+// 导入 state 模块中的默认状态、配置编辑器状态、新配置状态和开始屏幕状态
 import { DEFAULT_STATE, IConfigEditorState, INewConfigState, IStartScreenState, IState } from './state';
 
+/**
+ * 设置当前视图并发送消息到 VSCode API
+ * @param state - 当前状态
+ * @returns 更新后的状态
+ */
 function setView(state: IState): IState {
+  // 向 VSCode API 发送消息，通知视图已更改
   API.postMessage({ type: 'navigated', view: state.view });
+  // 返回更新后的状态
   return state;
 }
 
+/**
+ * Redux reducer 函数，根据传入的动作类型更新状态
+ * @param state - 当前状态
+ * @param action - 要执行的动作
+ * @returns 更新后的状态
+ */
 export function reducer(state = DEFAULT_STATE, action: Action): IState {
+  // 根据动作类型进行状态更新
   switch (action.type) {
     // Startscreen
+    // 打开开始屏幕
     case ActionType.OPEN_STARTSCREEN: {
+      // 获取分组依据，默认为当前开始屏幕状态的分组依据
       const groupBy = action.groupBy || (state as IStartScreenState).groupBy || 'group';
+      // 设置视图为开始屏幕，并更新分组依据
       return setView({ ...state, view: 'startscreen', groupBy });
     }
     // New Config
+    // 打开新配置界面
     case ActionType.OPEN_NEWCONFIG: {
+      // 获取新配置的名称
       const { name } = action;
+      // 设置视图为新配置，并更新名称和位置
       return setView({ ...state, view: 'newconfig', name, location: undefined });
     }
+    // 设置新配置的名称
     case ActionType.NEWCONFIG_SETNAME:
+      // 更新新配置的名称
       return { ...state as INewConfigState, name: action.name };
+    // 设置新配置的位置
     case ActionType.NEWCONFIG_SETLOCATION:
+      // 更新新配置的位置
       return { ...state as INewConfigState, location: action.location };
     // ConfigEditor
+    // 打开配置编辑器
     case ActionType.OPEN_CONFIGEDITOR: {
+      // 获取要编辑的配置
       const { config } = action;
+      // 设置视图为配置编辑器，并更新旧配置和新配置
       return setView({ ...state, view: 'configeditor', oldConfig: config, newConfig: config });
     }
+    // 打开配置定位器
     case ActionType.OPEN_CONFIGLOCATOR: {
+      // 获取要搜索的配置名称和配置列表
       const { name, configs } = action;
+      // 设置视图为配置定位器，并更新名称和配置列表
       return setView({ ...state, view: 'configlocator', name, configs });
     }
+    // 设置配置编辑器中的新配置
     case ActionType.CONFIGEDITOR_SETNEWCONFIG:
+      // 更新配置编辑器中的新配置
       return { ...state as IConfigEditorState, newConfig: action.config };
+    // 设置配置编辑器的状态消息
     case ActionType.CONFIGEDITOR_SETSTATUSMESSAGE:
+      // 更新配置编辑器的状态消息
       return { ...state as IConfigEditorState, statusMessage: action.message };
   }
+  // 如果动作类型不匹配，返回当前状态
   return state;
 }
 
+// 导出默认的 reducer 函数
 export default reducer;
+

webview/src/view/state.ts

@@ -1,31 +1,76 @@
+// 导入 common/fileSystemConfig 模块中的 ConfigLocation 和 FileSystemConfig 类型
 import type { ConfigLocation, FileSystemConfig } from 'common/fileSystemConfig';
 
+/**
+ * 定义一个视图状态接口，包含视图类型
+ * @interface IViewState
+ * @template V - 视图类型，必须是字符串
+ */
 interface IViewState<V extends string> {
+  // 视图的类型
   view: V;
 }
 
+/**
+ * 定义开始屏幕状态接口，继承自 IViewState
+ * @interface IStartScreenState
+ * @extends IViewState<'startscreen'>
+ */
 export interface IStartScreenState extends IViewState<'startscreen'> {
+  // 分组依据，默认为 'group'
   groupBy: string;
 }
 
+/**
+ * 定义新配置状态接口，继承自 IViewState
+ * @interface INewConfigState
+ * @extends IViewState<'newconfig'>
+ */
 export interface INewConfigState extends IViewState<'newconfig'> {
+  // 配置的位置，可选
   location?: ConfigLocation;
+  // 配置的名称
   name: string;
 }
 
+/**
+ * 定义配置编辑器状态接口，继承自 IViewState
+ * @interface IConfigEditorState
+ * @extends IViewState<'configeditor'>
+ */
 export interface IConfigEditorState extends IViewState<'configeditor'> {
+  // 旧的配置
   oldConfig: FileSystemConfig;
+  // 新的配置
   newConfig: FileSystemConfig;
+  // 状态消息，可选
   statusMessage?: string;
 }
 
+/**
+ * 定义配置定位器状态接口，继承自 IViewState
+ * @interface IConfigLocatorState
+ * @extends IViewState<'configlocator'>
+ */
 export interface IConfigLocatorState extends IViewState<'configlocator'> {
+  // 配置列表
   configs: FileSystemConfig[];
+  // 搜索的配置名称
   name: string;
 }
 
+/**
+ * 定义一个状态类型，包含所有可能的视图状态
+ * @type IState
+ * @description 状态类型，可能是开始屏幕、新配置、配置编辑器或配置定位器状态
+ */
 export type IState = IStartScreenState | INewConfigState | IConfigEditorState | IConfigLocatorState;
 
+/**
+ * 默认状态，包含默认的分组依据和视图类型
+ * @const DEFAULT_STATE
+ * @type {IState}
+ */
 export const DEFAULT_STATE: IState = {
   groupBy: 'group',
   view: 'startscreen',