eisland-dev-add-guide-step

# Guide Step — 引导配置步骤创建 ## 概述 eIsland 引导配置窗口采用分步架构，每个步骤是一个独立模块，位于 `src/renderer/components/components/Guide/<stepName>/`。 ## 目录结构 每个步骤模块必须包含以下子目录（参考已有的 `language` 和 `smtc` 步骤）： ``` Guide/<stepName>/ ├── index.ts # 公共导出（仅导出主组件） ├── components/<StepName>.tsx # 步骤组件 ├── config/<stepName>Config.ts # 常量配置 ├── hooks/use<StepName>.ts # 逻辑 Hook ├── types/index.ts # 类型定义（Props 等） └── utils/ # 工具函数（可为空占位） ``` ## 创建步骤 ### 1. 创建目录与文件 在 `src/renderer/components/components/Guide/<stepName>/` 下创建完整模块结构。 ### 2. 类型定义 (`types/index.ts`) 所有步骤组件必须接受 `StepProps`，包含 `onNext` 和 `onPrev` 回调： ```typescript export interface XxxStepProps { onNext: () => void; onPrev: () => void; } ``` ### 3. Hook (`hooks/useXxx.ts`) 将业务逻辑抽离到 Hook 中，组件只负责渲染。Hook 返回状态和操作函数。 ### 4. 组件 (`components/XxxStep.tsx`) 组件使用标准布局结构： ```tsx export function XxxStep({ onNext, onPrev }: XxxStepProps): ReactElement { const { t } = useTranslation(); return ( <div className="guide-step"> <div className="guide-step-header"> <h2>{t('guide.xxx.title')}</h2> <p>{t('guide.xxx.subtitle')}</p> </div> {/* 步骤内容区域 */} <div className="guide-xxx-content"> {/* ... */} </div> <div className="guide-step-footer"> <button className="guide-prev-btn" onClick={onPrev}> {t('guide.actions.prev')} </button> <button className="guide-next-btn" onClick={onNext}> {t('guide.a...