From dd5f16ef6553d2cb807149aed7233f58957ba335 Mon Sep 17 00:00:00 2001 From: xue jiahao Date: Tue, 17 Mar 2026 13:38:24 +0800 Subject: [PATCH] ui fix --- AGENTS.md | 44 ++-- src/renderer/src/App.tsx | 14 +- .../components/DomainManager/DomainList.tsx | 2 +- .../DomainManager/DomainManager.tsx | 231 +++++++++--------- src/renderer/src/locales/en-US/common.json | 2 +- src/renderer/src/locales/ja-JP/common.json | 2 +- src/renderer/src/locales/zh-CN/common.json | 2 +- 7 files changed, 153 insertions(+), 144 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 8f5d869..aa585ad 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -53,12 +53,21 @@ src/ │ ├── main.tsx # React 入口 │ ├── App.tsx # 根组件 │ ├── components/ # React 组件 -│ └── stores/ # Zustand Stores +│ ├── stores/ # Zustand Stores +│ └── locales/ # i18n 翻译文件 └── tests/ # 测试配置 ├── setup.ts # 测试环境设置 └── mocks/ # Mock 文件 ``` +### 数据流 + +``` +Renderer (React) → Preload API → IPC → Main Process → Storage/Kintone API + ↓ + Result 返回 +``` + ## 3. 路径别名 | 别名 | 路径 | @@ -123,6 +132,7 @@ type Result = { success: true; data: T } | { success: false; error: string }; - IPC 调用使用 `invoke` 返回 `Result` - Preload 通过 `contextBridge.exposeInMainWorld` 暴露 API +- 所有 IPC handlers 集中在 `src/main/ipc-handlers.ts` ## 6. UI 组件规范 @@ -138,20 +148,27 @@ export const useStyles = createStyles(({ token, css }) => ({ })); ``` -- 国际化：使用日文默认 `import jaJP from 'antd/locale/ja_JP'` - 禁止使用 Tailwind +- **ESM Only**: LobeHub UI 仅支持 ESM -## 7. 安全规范 +## 7. 国际化 (i18n) + +- 支持语言: `en-US`, `ja-JP`, `zh-CN` +- 翻译文件位置: `src/renderer/src/locales/{locale}/{namespace}.json` +- 使用 `react-i18next` 进行翻译 +- Ant Design 默认使用日文: `import jaJP from 'antd/locale/ja_JP'` + +## 8. 安全规范 - 密码使用 `electron` 的 `safeStorage` 加密存储 - WebPreferences 必须：`contextIsolation: true`, `nodeIntegration: false`, `sandbox: false` -## 8. 错误处理 +## 9. 错误处理 - 所有 IPC 返回 `Result` 格式 - 渲染进程检查 `result.success` 处理错误 -## 9. fnm 环境配置 +## 10. fnm 环境配置 所有 npm/npx 命令需加载 fnm 环境： @@ -163,20 +180,19 @@ export const useStyles = createStyles(({ token, css }) => ({ eval "$(fnm env --use-on-cd)" && npm run dev ``` -## 10. 注意事项 +## 11. 技术栈约束 -1. **ESM Only**: LobeHub UI 仅支持 ESM -2. **React 19**: 使用 `@types/react@^19.0.0` -3. **CSS 方案**: 使用 `antd-style`，禁止 Tailwind -4. **禁止 `as any`**: 使用类型守卫或 `unknown` -5. **函数组件优先**: 禁止 class 组件 +1. **React 19**: 使用 `@types/react@^19.0.0` +2. **CSS 方案**: 使用 `antd-style`，禁止 Tailwind +3. **禁止 `as any`**: 使用类型守卫或 `unknown` +4. **函数组件优先**: 禁止 class 组件 -## 11. 沟通规范 +## 12. 沟通规范 1. **人设**: 在回答的末尾加上「🦐」，用于确认上下文是否被正确保留 2. **语言**: 使用中文进行回答 -## 12. MVP Phase - Breaking Changes +## 13. MVP Phase - Breaking Changes **This is MVP phase - breaking changes are acceptable for better design.** However, you MUST: @@ -202,7 +218,7 @@ eval "$(fnm env --use-on-cd)" && npm run dev 4. If significant, ask user for confirmation before implementing 5. Update related documentation after implementation -## 13. 测试规范 +## 14. 测试规范 ### 测试框架 diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index f5af189..a275ee9 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -35,8 +35,8 @@ const { Header, Content, Sider } = Layout; const { Title } = Typography; // Domain section heights -const DOMAIN_SECTION_COLLAPSED = 76; // 增加高度，避免按钮覆盖文字 -const DOMAIN_SECTION_EXPANDED = 240; +const DOMAIN_SECTION_COLLAPSED = 68; // 增加高度，避免按钮覆盖文字 +const DOMAIN_SECTION_EXPANDED = 260; const DEFAULT_SIDER_WIDTH = 320; const MIN_SIDER_WIDTH = 280; const MAX_SIDER_WIDTH = 500; @@ -61,13 +61,12 @@ const useStyles = createStyles(({ token, css }) => ({ overflow: hidden; `, logo: css` - height: 48px; - margin: 8px 16px; + height: 32px; + margin: ${token.paddingXS}px ${token.padding}px ${token.paddingXXS}px; display: flex; align-items: center; justify-content: space-between; gap: 8px; - border-bottom: 1px solid ${token.colorBorderSecondary}; `, logoText: css` color: ${token.colorText}; @@ -75,7 +74,7 @@ const useStyles = createStyles(({ token, css }) => ({ font-weight: 600; `, siderContent: css` - height: calc(100vh - 64px); + height: calc(100vh - 44px); display: flex; flex-direction: column; `, @@ -113,6 +112,7 @@ const useStyles = createStyles(({ token, css }) => ({ `, domainSection: css` border-bottom: 1px solid ${token.colorBorderSecondary}; + padding-bottom: ${token.paddingXS}px; overflow: hidden; transition: height 0.2s ease-in-out; `, @@ -216,7 +216,7 @@ const App: React.FC = () => { style={{ display: "flex", alignItems: "center", gap: 8 }} > - Kintone Manager + Kintone JS/CSS Manager + <> +
+
+
+ +
+

{t("domainManagement")}

+ +
+ +
+ +
+
+ +
+ {loading && domains.length === 0 ? ( +
+ +
+ ) : domains.length === 0 ? ( + + ) : ( + + )} +
- -
- {loading && domains.length === 0 ? ( -
- -
- ) : domains.length === 0 ? ( - - ) : ( - - )} -
- - + ); }; diff --git a/src/renderer/src/locales/en-US/common.json b/src/renderer/src/locales/en-US/common.json index 2d4f6d8..ab5af54 100644 --- a/src/renderer/src/locales/en-US/common.json +++ b/src/renderer/src/locales/en-US/common.json @@ -1,5 +1,5 @@ { - "appName": "Kintone Manager", + "appName": "Kintone JS/CSS Manager", "save": "Save", "cancel": "Cancel", "delete": "Delete", diff --git a/src/renderer/src/locales/ja-JP/common.json b/src/renderer/src/locales/ja-JP/common.json index 951c42d..a828102 100644 --- a/src/renderer/src/locales/ja-JP/common.json +++ b/src/renderer/src/locales/ja-JP/common.json @@ -1,5 +1,5 @@ { - "appName": "Kintone Manager", + "appName": "Kintone JS/CSS Manager", "save": "保存", "cancel": "キャンセル", "delete": "削除", diff --git a/src/renderer/src/locales/zh-CN/common.json b/src/renderer/src/locales/zh-CN/common.json index 051c848..add38d0 100644 --- a/src/renderer/src/locales/zh-CN/common.json +++ b/src/renderer/src/locales/zh-CN/common.json @@ -1,5 +1,5 @@ { - "appName": "Kintone Manager", + "appName": "Kintone JS/CSS Manager", "save": "保存", "cancel": "取消", "delete": "删除",