From 3f5babf7b6de29f5e57829f7a154a42e77073e77 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Fri, 8 Aug 2025 19:13:22 +0800
Subject: [PATCH 01/66] feat(about): implement Phase 1 of dynamic component
 editor architecture

- Add dynamic component type definitions in lib/types/about-page-components.ts
- Implement data migration utilities in lib/utils/data-migration.ts
- Create migration scripts for converting legacy to dynamic structure
- Support backward compatibility with existing about page data
- Add comprehensive TypeScript interfaces for component system
---
 docs/DEVELOPER_TOOLCHAIN.md                | 321 +++++++
 docs/about-page-editor-integration-plan.md | 926 +++++++++++++++++++++
 lib/scripts/migrate-about-data.ts          | 309 +++++++
 lib/scripts/test-migration.ts              | 104 +++
 lib/types/about-page-components.ts         | 215 +++++
 lib/utils/data-migration.ts                | 322 +++++++
 package.json                               |   3 +-
 7 files changed, 2199 insertions(+), 1 deletion(-)
 create mode 100644 docs/DEVELOPER_TOOLCHAIN.md
 create mode 100644 docs/about-page-editor-integration-plan.md
 create mode 100644 lib/scripts/migrate-about-data.ts
 create mode 100644 lib/scripts/test-migration.ts
 create mode 100644 lib/types/about-page-components.ts
 create mode 100644 lib/utils/data-migration.ts

diff --git a/docs/DEVELOPER_TOOLCHAIN.md b/docs/DEVELOPER_TOOLCHAIN.md
new file mode 100644
index 00000000..648bcb4e
--- /dev/null
+++ b/docs/DEVELOPER_TOOLCHAIN.md
@@ -0,0 +1,321 @@
+好的，这是该开发工具链指南的中文翻译。
+
+这份文档详细说明了 AgentifUI 项目的开发工具、自动化流程和质量保证体系，旨在帮助贡献者高效地编写出高质量、风格一致且易于维护的代码。
+
+---
+
+## 📋 AgentifUI 开发者工具链指南 (中文翻译)
+
+### 概述
+
+本指南全面介绍了 AgentifUI 的开发工具链和自动化质量保证体系。作为一名贡献者，您将通过这些工具来确保代码的质量、一致性和可维护性。
+
+---
+
+### 🔧 核心开发工具
+
+#### TypeScript 配置
+
+**配置文件**: `tsconfig.json`
+
+**核心特性**:
+
+- ✅ **严格模式**: 通过严格的编译器设置实现全面的类型安全。
+- ✅ **路径映射**: 使用 `@/*`, `@lib/*`, `@components/*` 等别名实现清晰的模块导入。
+- ✅ **Next.js 集成**: 为 Next.js 15 的 App Router 进行了优化。
+- ✅ **Jest 支持**: 集成了测试环境所需的类型定义。
+
+**您会用到的命令**:
+
+```bash
+pnpm type-check     # 运行 TypeScript 编译器进行类型检查，但不生成 JS 文件
+```
+
+#### ESLint 配置
+
+**配置文件**: `eslint.config.mjs`
+
+**双重 Linting 策略**:
+
+1.  **Oxlint** (主要 - 速度极快)
+    - 基于 Rust 的 linter，性能卓越。
+    - 运行时间仅需毫秒级，而非秒级。
+    - 快速捕捉常见问题。
+
+2.  **ESLint** (次要 - 功能全面)
+    - 传统的 JavaScript/TypeScript 代码检查工具。
+    - 包含 Next.js 特定规则。
+    - 与 TypeScript 深度集成。
+
+**您会用到的命令**:
+
+```bash
+pnpm lint            # 同时运行 Oxlint 和 ESLint (推荐)
+pnpm lint:fast       # 仅运行 Oxlint (用于快速检查)
+pnpm lint:eslint     # 仅运行 ESLint
+pnpm lint:errors     # 只显示错误，不显示警告
+pnpm lint:complexity # 检查代码复杂度 (最大值为 15)
+pnpm fix:eslint      # 自动修复 ESLint 发现的问题
+```
+
+#### Prettier 代码格式化
+
+**配置文件**: `.prettierrc.json`
+
+**特性**:
+
+- 🎨 **自动导入排序**: 按照 React → Next.js → 外部库 → 内部模块的顺序排序。
+- 🎨 **Tailwind Class 排序**: 自动对 Tailwind CSS 的类名进行排序。
+- 🎨 **统一代码风格**: 80 字符行宽、单引号、使用分号。
+- 🎨 **智能忽略**: 自动忽略构建产物、数据库迁移文件和自动生成的文件。
+
+**您会用到的命令**:
+
+```bash
+pnpm format         # 格式化所有文件
+pnpm format:check   # 检查文件是否需要格式化
+pnpm format:files   # 格式化指定文件
+```
+
+---
+
+### 🔄 自动化 Git 钩子 (Husky)
+
+#### Pre-commit 钩子 (`.husky/pre-commit`)
+
+**当您提交代码时会发生什么**:
+
+1.  **🔍 TypeScript 检查**
+    - 验证所有 TypeScript 文件。
+    - 如果存在类型错误，提交将被中止。
+
+2.  **🎨 Lint-Staged 格式化**
+    - 仅对暂存区（staged）的文件运行 Prettier。
+    - 对暂存区的 JS/TS 文件运行 ESLint 并自动修复。
+    - 自动将格式化后的改动添加到暂存区。
+
+3.  **🧪 条件化测试**
+    - 智能执行测试。
+    - 仅对暂存区内匹配 `.test.` 或 `.spec.` 模式的测试文件运行测试。
+    - 如果本次提交没有涉及测试文件，则跳过测试步骤。
+
+#### Commit Message 钩子 (`.husky/commit-msg`)
+
+**提交信息验证**:
+使用 `commitlint` 工具进行验证。
+
+**要求格式** (约定式提交 Conventional Commits):
+
+```
+type(scope): subject
+
+示例:
+✅ feat(auth): add SSO login support (功能(登录): 增加 SSO 登录支持)
+✅ fix(chat): resolve message ordering issue (修复(聊天): 解决消息排序问题)
+✅ refactor(admin): optimize content management UI (重构(管理后台): 优化内容管理界面)
+❌ added new feature (错误示例: 增加了新功能)
+❌ fix bug (错误示例: 修复 bug)
+```
+
+**支持的类型**:
+
+- `feat`: 新功能
+- `fix`: Bug 修复
+- `refactor`: 代码重构
+- `style`: 代码风格改动
+- `docs`: 文档更新
+- `test`: 测试相关
+- `chore`: 构建过程或工具变动
+
+---
+
+### 🧪 测试框架
+
+**配置文件**: `jest.config.js`, `jest.setup.js`
+
+**Jest 配置特性**:
+
+- 🧪 **React Testing Library**: 提供组件测试的实用工具。
+- 🧪 **全面的模拟 (Mocks)**: 预设了 Next.js router、navigation、intl、images 等模块的模拟。
+- 🧪 **路径映射**: 与主应用共享相同的导入路径别名。
+- 🧪 **覆盖率报告**: 生成详细的测试覆盖率指标。
+- 🧪 **JSDOM 环境**: 提供类浏览器的测试环境。
+
+**预配置的 Mocks**:
+
+- `next/router` 和 `next/navigation`
+- `next/image` 和 `next/link`
+- `next-intl` (用于国际化)
+- `IntersectionObserver` 和 `ResizeObserver`
+- 全局 `fetch` API
+
+**您会用到的命令**:
+
+```bash
+pnpm test          # 运行所有测试
+pnpm test:watch    # 以观察模式运行测试
+pnpm test:coverage # 运行测试并生成覆盖率报告
+pnpm test:ci       # 运行为 CI 环境优化的测试
+```
+
+---
+
+### 🏗️ 构建和开发工具
+
+#### Next.js 配置 (`next.config.ts`)
+
+**核心特性**:
+
+1.  **打包文件分析**:
+    ```bash
+    ANALYZE=true pnpm build    # 生成打包文件体积分析报告
+    ```
+2.  **独立构建 (Standalone Builds)**:
+    ```bash
+    pnpm build:standalone     # 创建一个自包含的、可用于部署的构建版本
+    ```
+3.  **开发环境优化**:
+    - 跨域请求处理
+    - 热模块替换 (HMR)
+    - 使用 `--inspect` 进入调试模式
+4.  **生产环境优化**:
+    - 自动移除 `console.log` (保留 `error` 和 `warn`)
+    - 为服务器端依赖配置 Webpack externals
+    - 修复与 Supabase WebSocket 的兼容性问题
+
+#### Tailwind CSS 配置 (`tailwind.config.js`)
+
+**自定义特性**:
+
+- 🎨 **暗黑模式**: 支持基于 class 的暗黑模式。
+- 🎨 **排版**: 带有备用方案的全局 serif 字体系统。
+- 🎨 **自定义动画**: 包括滑动、淡入淡出、弹跳、闪烁等效果。
+- 🎨 **滚动条插件**: 支持自定义滚动条样式。
+
+---
+
+### 🌍 国际化 (i18n) 工具
+
+#### 验证脚本
+
+**基于 Python 的验证工具**:
+
+```bash
+pnpm i18n:check      # 快速检查所有语言文件结构的一致性
+pnpm i18n:validate   # 对翻译内容进行详细验证
+pnpm i18n:detect     # 检测代码中缺失的翻译 key
+```
+
+**这些脚本会检查**:
+
+- 📝 所有语言的翻译 key 结构是否一致。
+- 📝 任何语言文件中是否有缺失的翻译。
+- 📝 代码库中是否存在未被使用的翻译 key。
+- 📝 语言文件（JSON）是否存在格式错误。
+
+---
+
+### ⚡ 开发者工作流
+
+#### 日常开发流程
+
+1.  **启动开发环境**:
+    ```bash
+    pnpm dev         # 启动并开启调试模式
+    # 或
+    pnpm dev:clean   # 启动但不开启调试
+    ```
+2.  **编写代码**:
+    - 在完整的 TypeScript 支持下编辑代码。
+    - 如果 IDE 已配置，保存时会自动格式化。
+    - 实时类型检查。
+3.  **提交前验证**:
+    ```bash
+    pnpm type-check  # 手动进行类型检查
+    pnpm lint        # 手动进行代码检查
+    pnpm test        # 手动运行测试
+    ```
+4.  **提交代码**:
+    ```bash
+    git add .
+    git commit -m "feat(scope): description"
+    # 自动运行 pre-commit 钩子:
+    # - TypeScript 检查
+    # - Prettier 格式化
+    # - ESLint 修复
+    # - 测试执行 (如果暂存区有测试文件)
+    # - 提交信息验证
+    ```
+
+---
+
+### 🔍 质量门禁
+
+#### 提交质量门禁
+
+**提交前验证**:
+
+- ✅ TypeScript 编译通过
+- ✅ 所有暂存文件均已正确格式化
+- ✅ 满足所有 ESLint 规则
+- ✅ 暂存的测试文件全部通过
+- ✅ 提交信息遵循约定式规范
+
+#### 构建质量门禁
+
+**CI/生产环境要求**:
+
+- ✅ 无 TypeScript 错误
+- ✅ 所有测试通过
+- ✅ 构建成功完成
+- ✅ 无严重级别的 linting 错误
+- ✅ 打包文件体积在限制范围内
+
+---
+
+### 🛠️ 故障排查
+
+#### 常见问题
+
+**1. Pre-commit 钩子执行失败**
+
+```bash
+# 若是 TypeScript 错误
+pnpm type-check        # 查看具体错误信息
+
+# 若是格式化问题
+pnpm format            # 修复格式
+git add .              # 重新暂存格式化后的文件
+
+# 若是测试失败
+pnpm test [file]       # 运行指定的测试文件
+```
+
+**2. 构建错误**
+
+```bash
+# 清除 Next.js 缓存
+rm -rf .next
+
+# 重新安装依赖
+rm -rf node_modules pnpm-lock.yaml
+pnpm install
+
+# 检查 TypeScript 问题
+pnpm type-check
+```
+
+---
+
+### 🤝 贡献指南
+
+在为 AgentifUI 贡献代码时，请遵循以下准则：
+
+1.  **在推送代码前务必运行类型检查**。
+2.  **严格遵守提交信息规范**。
+3.  为新功能**编写测试用例**。
+4.  在添加新功能时**更新相关文档**。
+5.  **尊重自动化格式化**——不要和 Prettier “对着干”。
+6.  **使用项目提供的脚本**，而不是手动调用工具。
+
+这套工具链旨在**帮助您更快地编写出更优秀的代码**——请拥抱自动化，专注于构建卓越的功能！🚀
diff --git a/docs/about-page-editor-integration-plan.md b/docs/about-page-editor-integration-plan.md
new file mode 100644
index 00000000..ec06bfca
--- /dev/null
+++ b/docs/about-page-editor-integration-plan.md
@@ -0,0 +1,926 @@
+# 关于页面动态组件编辑器升级计划
+
+## 1. 项目概述
+
+### 1.1 目标
+
+将现有的固定结构关于页面编辑器升级为动态组件编辑器，从 about-page-standalone demo 中移植拖拽编辑、动态组件管理等核心功能，实现完全可视化的关于页面配置。
+
+### 1.2 现有系统分析
+
+AgentifUI 已有完整的关于页面编辑系统：
+
+- **AboutEditor** (`components/admin/content/about-editor.tsx`) - 基于固定结构的编辑器
+- **AboutPreview** (`components/admin/content/about-preview.tsx`) - 多设备预览组件
+- **ContentManagementPage** (`app/admin/content/page.tsx`) - 统一的内容管理界面
+- **TranslationService** - 完善的翻译数据管理服务
+
+### 1.3 升级策略
+
+**避免重复建设，就地升级现有组件：**
+
+- ✅ 保持现有文件路径和组件接口
+- ✅ 复用现有的 UI 组件和主题系统
+- ✅ 利用现有的 TranslationService 和管理界面
+- ✅ 在现有组件内部替换实现逻辑
+- ✅ 确保用户界面的平滑过渡
+
+**核心改变：**
+
+- 从**固定表单编辑** → **动态拖拽编辑**
+- 从**预定义结构** → **任意组件组合**
+- 从**有限卡片数量** → **无限制动态添加**
+
+### 1.4 Demo 项目分析总结
+
+经过详细分析，demo 项目实现了以下核心功能：
+
+#### 核心架构特点
+
+- **组件化数据结构**：采用 sections -> columns -> components 的层级结构
+- **智能拖拽系统**：支持拖拽创建多列布局、跨列移动组件、自动布局调整
+- **实时编辑预览**：左侧编辑面板 + 右侧实时预览
+- **属性编辑系统**：智能识别组件类型并显示相应的编辑控件
+- **多语言支持**：支持传统结构和组件化结构的数据格式
+
+#### 技术实现亮点
+
+- **react-beautiful-dnd**：拖拽交互实现
+- **StrictModeDroppable**：解决 React 18 严格模式兼容问题
+- **动态组件渲染**：通过 componentMap 实现组件动态渲染
+- **智能布局算法**：自动检测拖拽位置并调整布局类型
+- **深拷贝状态管理**：避免直接修改状态，确保数据一致性
+
+#### 支持的组件类型
+
+- **基础组件**：heading, paragraph, button, image, divider
+- **复合组件**：cards, feature-grid（支持动态数组编辑）
+- **布局支持**：单列、双列、三列、智能分栏
+
+## 2. 升级架构设计
+
+### 2.1 就地升级现有文件（保持目录结构）
+
+**升级现有组件而非创建新文件：**
+
+```
+app/admin/content/
+└── page.tsx                                 # ✅ 保持现有，扩展支持动态组件
+
+components/admin/content/
+├── about-editor.tsx                         # 🔄 升级：从固定表单 → 动态拖拽编辑器
+├── about-preview.tsx                        # 🔄 升级：从固定渲染 → 动态组件渲染
+├── component-renderer.tsx                   # ➕ 新增：动态组件渲染器（从demo移植）
+├── property-editor.tsx                      # ➕ 新增：组件属性编辑器（从demo移植）
+├── component-palette.tsx                    # ➕ 新增：组件拖拽面板（从demo移植）
+└── strict-mode-droppable.tsx                # ➕ 新增：拖拽兼容组件（从demo移植）
+
+lib/
+├── types/
+│   └── about-page-components.ts             # ➕ 新增：动态组件类型定义
+├── services/admin/content/
+│   └── translation-service.ts              # ✅ 保持现有（已有关于页面方法）
+└── stores/
+    └── about-editor-store.ts                # ➕ 新增：动态编辑器状态管理
+
+messages/
+└── *.json                                   # 🔄 升级：pages.about 数据结构
+```
+
+**关键升级点：**
+
+- 保持现有的文件路径和组件名称
+- 在现有组件内部实现动态化功能
+- 利用现有的 TranslationService 和管理界面
+- 扩展数据结构而非替换
+
+### 2.2 数据存储设计
+
+#### 完全替换为动态组件结构
+
+**新的动态组件结构将完全取代固定结构：**
+
+```json
+// messages/en-US.json - 新的完全动态结构
+{
+  "pages": {
+    "about": {
+      "sections": [
+        {
+          "id": "section-1",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1-1",
+                "type": "heading",
+                "props": {
+                  "content": "About AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1-2",
+                "type": "paragraph",
+                "props": {
+                  "content": "Connecting AI with enterprises, creating new experiences with large language models",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-2",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-2-1",
+                "type": "heading",
+                "props": {
+                  "content": "Our Mission",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-2-2",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI is committed to leveraging the power of large language models...",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-3",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-3-1",
+                "type": "heading",
+                "props": {
+                  "content": "Our Values",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-3-2",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Technical Innovation",
+                      "description": "Continuously integrate cutting-edge large model technologies..."
+                    },
+                    {
+                      "title": "Data Security",
+                      "description": "Support private deployment and strict data protection measures..."
+                    },
+                    {
+                      "title": "Flexible Customization",
+                      "description": "Provide highly customizable solutions..."
+                    },
+                    {
+                      "title": "Knowledge Enhancement",
+                      "description": "Integrate private knowledge bases through RAG technology..."
+                    }
+                    // 管理员可以动态添加/删除更多卡片
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-4",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-4-1",
+                "type": "button",
+                "props": {
+                  "text": "Start Exploring",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-5",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-5-1",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explore the future of large model applications.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ]
+    }
+  }
+}
+```
+
+**关键优势：**
+
+- ✅ 完全动态：管理员可以添加/删除任意数量的sections和组件
+- ✅ 灵活布局：支持单列、双列、三列等多种布局
+- ✅ 任意组件：可以在任何位置放置heading、paragraph、cards、button等组件
+- ✅ 拖拽排序：sections和组件都可以通过拖拽重新排序
+- ✅ 属性编辑：每个组件的props都可以独立编辑
+
+#### 内容数据结构示例
+
+```json
+{
+  "sections": [
+    {
+      "id": "section-1",
+      "layout": "single-column",
+      "columns": [
+        [
+          {
+            "id": "comp-1-1",
+            "type": "heading",
+            "props": {
+              "content": "About AgentifUI",
+              "level": 1,
+              "textAlign": "center"
+            }
+          }
+        ]
+      ]
+    }
+  ],
+  "metadata": {
+    "version": "1.0.0",
+    "lastModified": "2024-01-01T00:00:00Z",
+    "author": "admin"
+  }
+}
+```
+
+## 3. 升级实施计划
+
+### 阶段 1：基础架构和类型系统（第1周）
+
+#### 3.1 新增动态组件类型定义
+
+- [ ] 创建 `lib/types/about-page-components.ts`
+- [ ] 从 demo 移植 TypeScript 接口（ComponentType, PageSection, ComponentInstance等）
+- [ ] 扩展现有的 `AboutTranslationData` 接口以支持 sections
+
+#### 3.2 数据结构升级
+
+- [ ] 保持使用现有的 `TranslationService`（无需修改）
+- [ ] 创建一次性数据迁移脚本
+  - [ ] 读取现有的固定结构数据
+  - [ ] 转换为动态 sections 格式
+  - [ ] 备份原始数据并批量更新
+- [ ] 创建数据转换工具函数
+  - [ ] `migrateLegacyToSections()` - 固定结构转动态结构
+  - [ ] `generateUniqueIds()` - 为sections和组件生成ID
+
+### 阶段 2：核心组件移植和适配（第2-3周）
+
+#### 3.3 移植拖拽和组件系统
+
+- [ ] 新增 `components/admin/content/component-renderer.tsx`
+  - [ ] 从 demo 移植动态组件渲染逻辑
+  - [ ] 适配主项目的设计系统和主题
+  - [ ] 支持 heading、paragraph、cards、button、image、divider 等组件
+- [ ] 新增 `components/admin/content/strict-mode-droppable.tsx`
+  - [ ] 移植 React 18 兼容的拖拽组件
+- [ ] 新增 `components/admin/content/property-editor.tsx`
+  - [ ] 移植动态属性编辑器
+  - [ ] 适配主项目的 UI 组件（Select、Input等）
+- [ ] 新增 `components/admin/content/component-palette.tsx`
+  - [ ] 创建组件拖拽面板
+  - [ ] 集成到现有的编辑界面布局
+
+#### 3.4 升级现有编辑器组件
+
+- [ ] 升级 `about-editor.tsx`
+  - [ ] 保持现有接口兼容性
+  - [ ] 内部替换为动态拖拽编辑器
+  - [ ] 集成新的组件面板和属性编辑器
+  - [ ] 保持多语言选择功能
+- [ ] 升级 `about-preview.tsx`
+  - [ ] 保持现有设备预览功能
+  - [ ] 内部替换为动态组件渲染
+  - [ ] 保持响应式和主题适配
+
+#### 3.5 状态管理
+
+- [ ] 新增 `lib/stores/about-editor-store.ts`
+  - [ ] 实现 Zustand 状态管理
+  - [ ] 支持撤销/重做功能
+  - [ ] 集成到现有的编辑器组件
+
+### 阶段 3：系统集成和优化（第4周）
+
+#### 3.6 现有管理界面扩展
+
+- [ ] 保持 `app/admin/content/page.tsx` 现有功能
+- [ ] 扩展支持动态组件数据结构
+- [ ] 保持现有的保存/重置/预览功能
+- [ ] 确保与首页编辑器的兼容性
+
+#### 3.7 前端关于页面更新
+
+- [ ] 更新现有的关于页面组件以支持动态渲染
+- [ ] 保持现有的 URL 路径和 SEO 优化
+- [ ] 确保平滑过渡，无用户感知的变化
+
+### 阶段 4：优化和测试（第5周）
+
+#### 3.12 数据迁移
+
+- [ ] 创建一次性迁移脚本
+- [ ] 将所有语言的固定关于页面结构转换为动态sections格式
+- [ ] 备份原始数据文件
+- [ ] 验证迁移后的数据完整性和功能正常
+
+#### 3.13 性能优化
+
+- [ ] 实现组件懒加载
+- [ ] 优化拖拽性能
+- [ ] 添加防抖和节流
+- [ ] 实现虚拟滚动（如需要）
+
+#### 3.14 测试
+
+- [ ] 单元测试（组件渲染、属性编辑）
+- [ ] 集成测试（拖拽交互、数据保存）
+- [ ] E2E 测试（完整编辑工作流）
+- [ ] 性能测试
+- [ ] 用户验收测试
+
+## 4. 技术实现细节
+
+### 4.1 状态管理优化
+
+使用 Zustand 创建编辑器状态：
+
+```typescript
+// lib/stores/about-editor.ts
+interface AboutEditorState {
+  pageContent: PageContent | null;
+  selectedComponentId: string | null;
+  undoStack: PageContent[];
+  redoStack: PageContent[];
+  isDirty: boolean;
+  isLoading: boolean;
+
+  // Actions
+  setPageContent: (content: PageContent) => void;
+  setSelectedComponent: (id: string | null) => void;
+  updateComponentProps: (id: string, props: Record<string, any>) => void;
+  addComponent: (
+    sectionId: string,
+    columnIndex: number,
+    component: ComponentInstance
+  ) => void;
+  deleteComponent: (id: string) => void;
+  moveComponent: (result: DropResult) => void;
+  undo: () => void;
+  redo: () => void;
+  save: () => Promise<void>;
+  load: (language: string) => Promise<void>;
+}
+```
+
+### 4.2 组件注册系统
+
+实现可扩展的组件注册机制：
+
+```typescript
+// lib/services/component-registry.ts
+interface ComponentDefinition {
+  type: ComponentType;
+  name: string;
+  icon: string;
+  defaultProps: Record<string, any>;
+  propsSchema: JSONSchema;
+  component: React.ComponentType<any>;
+  category: 'basic' | 'layout' | 'content' | 'media';
+}
+
+class ComponentRegistry {
+  private components = new Map<ComponentType, ComponentDefinition>();
+
+  register(definition: ComponentDefinition) {
+    this.components.set(definition.type, definition);
+  }
+
+  get(type: ComponentType): ComponentDefinition | undefined {
+    return this.components.get(type);
+  }
+
+  getByCategory(category: string): ComponentDefinition[] {
+    return Array.from(this.components.values()).filter(
+      def => def.category === category
+    );
+  }
+}
+```
+
+### 4.3 主题集成
+
+适配主项目的设计系统：
+
+```typescript
+// components/admin/about-editor/theme.ts
+export const aboutEditorTheme = {
+  components: {
+    heading: {
+      1: 'text-3xl font-bold text-primary-900 dark:text-primary-100',
+      2: 'text-2xl font-semibold text-primary-800 dark:text-primary-200',
+      // ... 其他层级
+    },
+    paragraph:
+      'text-base leading-relaxed text-primary-600 dark:text-primary-300',
+    card: {
+      container:
+        'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm',
+      header: 'text-lg font-semibold text-primary-800 dark:text-primary-200',
+      content: 'text-primary-600 dark:text-primary-300',
+    },
+    // ... 其他组件样式
+  },
+  editor: {
+    sidebar:
+      'w-80 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700',
+    canvas: 'flex-1 bg-white dark:bg-gray-800 p-6',
+    dropZone:
+      'border-2 border-dashed border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/20',
+    // ... 编辑器样式
+  },
+};
+```
+
+### 4.4 性能优化策略
+
+#### 虚拟化处理
+
+```typescript
+// 对于大型页面内容，实现虚拟滚动
+import { FixedSizeList as List } from 'react-window';
+
+const VirtualizedSectionList: React.FC<{sections: PageSection[]}> = ({ sections }) => {
+  const renderSection = ({ index, style }: { index: number; style: React.CSSProperties }) => (
+    <div style={style}>
+      <SectionRenderer section={sections[index]} />
+    </div>
+  );
+
+  return (
+    <List
+      height={600}
+      itemCount={sections.length}
+      itemSize={200}
+    >
+      {renderSection}
+    </List>
+  );
+};
+```
+
+#### 防抖和节流
+
+```typescript
+// 使用 lodash.debounce 优化属性更新
+import { debounce } from 'lodash-es';
+
+const debouncedSave = useMemo(
+  () =>
+    debounce((content: PageContent) => {
+      // 自动保存逻辑
+      aboutEditorStore.save();
+    }, 2000),
+  []
+);
+```
+
+## 5. 数据迁移策略
+
+### 5.1 迁移工具实现
+
+```typescript
+// lib/utils/data-migration.ts
+interface LegacyAboutData {
+  title: string;
+  subtitle: string;
+  mission: { title: string; description: string };
+  values: {
+    title: string;
+    items: Array<{ title: string; description: string }>;
+  };
+  buttonText: string;
+  copyright: { prefix: string; linkText: string; suffix: string };
+}
+
+function migrateLegacyToComponentStructure(
+  legacy: LegacyAboutData
+): PageContent {
+  return {
+    sections: [
+      // 标题区域
+      {
+        id: generateId(),
+        layout: 'single-column',
+        columns: [
+          [
+            {
+              id: generateId(),
+              type: 'heading',
+              props: { content: legacy.title, level: 1, textAlign: 'center' },
+            },
+            {
+              id: generateId(),
+              type: 'paragraph',
+              props: { content: legacy.subtitle, textAlign: 'center' },
+            },
+          ],
+        ],
+      },
+      // 使命区域
+      {
+        id: generateId(),
+        layout: 'single-column',
+        columns: [
+          [
+            {
+              id: generateId(),
+              type: 'heading',
+              props: {
+                content: legacy.mission.title,
+                level: 2,
+                textAlign: 'left',
+              },
+            },
+            {
+              id: generateId(),
+              type: 'paragraph',
+              props: { content: legacy.mission.description, textAlign: 'left' },
+            },
+          ],
+        ],
+      },
+      // 价值观区域
+      {
+        id: generateId(),
+        layout: 'single-column',
+        columns: [
+          [
+            {
+              id: generateId(),
+              type: 'heading',
+              props: {
+                content: legacy.values.title,
+                level: 2,
+                textAlign: 'left',
+              },
+            },
+            {
+              id: generateId(),
+              type: 'cards',
+              props: { layout: 'grid', items: legacy.values.items },
+            },
+          ],
+        ],
+      },
+      // 按钮区域
+      {
+        id: generateId(),
+        layout: 'single-column',
+        columns: [
+          [
+            {
+              id: generateId(),
+              type: 'button',
+              props: {
+                text: legacy.buttonText,
+                variant: 'primary',
+                action: 'link',
+                url: '#',
+              },
+            },
+          ],
+        ],
+      },
+    ],
+  };
+}
+```
+
+### 5.2 向后兼容
+
+```typescript
+// 使用现有的 TranslationService 进行动态数据管理
+// lib/services/admin/content/translation-service.ts (已存在)
+// 在编辑器中的使用示例：
+import { TranslationService } from '@/lib/services/admin/content/translation-service';
+import {
+  ComponentInstance,
+  PageContent,
+  PageSection,
+} from '@/lib/types/about-page';
+
+export class AboutPageDataManager {
+  // 获取所有语言的动态关于页面内容
+  async getAboutPageContent(): Promise<Record<string, PageContent>> {
+    const translations = await TranslationService.getAboutPageTranslations();
+    return translations;
+  }
+
+  // 批量更新所有语言的关于页面sections
+  async updateAboutPageContent(
+    updates: Record<string, PageContent>,
+    mode: 'merge' | 'replace' = 'replace' // 动态结构建议使用replace模式
+  ) {
+    return await TranslationService.updateAboutPageTranslations(updates, mode);
+  }
+
+  // 生成新组件的默认数据
+  createDefaultComponent(type: ComponentType): ComponentInstance {
+    const id = `comp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    const defaultProps = {
+      heading: { content: 'New Heading', level: 2, textAlign: 'left' },
+      paragraph: { content: 'New paragraph text', textAlign: 'left' },
+      button: {
+        text: 'New Button',
+        variant: 'primary',
+        action: 'link',
+        url: '#',
+      },
+      cards: { layout: 'grid', items: [] },
+      image: { src: '', alt: '', width: 'auto', height: 'auto' },
+      divider: { style: 'solid', color: 'gray' },
+    };
+
+    return {
+      id,
+      type,
+      props: defaultProps[type] || {},
+    };
+  }
+
+  // 生成新section的默认数据
+  createDefaultSection(
+    layout: 'single-column' | 'two-column' | 'three-column' = 'single-column'
+  ): PageSection {
+    const id = `section-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const columnCount =
+      layout === 'single-column' ? 1 : layout === 'two-column' ? 2 : 3;
+
+    return {
+      id,
+      layout,
+      columns: Array(columnCount)
+        .fill([])
+        .map(() => []),
+    };
+  }
+}
+```
+
+## 6. 测试策略
+
+### 6.1 单元测试
+
+```typescript
+// __tests__/components/ComponentRenderer.test.tsx
+import { render, screen } from '@testing-library/react';
+import ComponentRenderer from '@/components/admin/about-editor/ComponentRenderer';
+
+describe('ComponentRenderer', () => {
+  it('renders heading component correctly', () => {
+    const component: ComponentInstance = {
+      id: 'test-1',
+      type: 'heading',
+      props: { content: 'Test Heading', level: 1, textAlign: 'center' }
+    };
+
+    render(<ComponentRenderer component={component} colors={mockColors} />);
+
+    const heading = screen.getByRole('heading', { level: 1 });
+    expect(heading).toHaveTextContent('Test Heading');
+    expect(heading).toHaveClass('text-center');
+  });
+});
+```
+
+### 6.2 集成测试
+
+```typescript
+// __tests__/integration/about-editor.test.tsx
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AboutPageEditor from '@/components/admin/about-editor/AboutPageEditor';
+
+describe('AboutPageEditor Integration', () => {
+  it('allows dragging component from palette to canvas', async () => {
+    const user = userEvent.setup();
+    render(<AboutPageEditor />);
+
+    // 从组件面板拖拽标题组件到画布
+    const headingComponent = screen.getByText('heading');
+    const canvas = screen.getByTestId('editor-canvas');
+
+    await user.dragAndDrop(headingComponent, canvas);
+
+    // 验证组件已添加到画布
+    await waitFor(() => {
+      expect(screen.getByText('New Heading')).toBeInTheDocument();
+    });
+  });
+});
+```
+
+### 6.3 E2E 测试
+
+```typescript
+// e2e/about-page-editor.spec.ts
+import { expect, test } from '@playwright/test';
+
+test('complete editing workflow', async ({ page }) => {
+  // 登录管理员账户
+  await page.goto('/admin/login');
+  await page.fill('[name=email]', 'admin@test.com');
+  await page.fill('[name=password]', 'password');
+  await page.click('button[type=submit]');
+
+  // 导航到关于页面编辑器
+  await page.goto('/admin/about/edit');
+
+  // 添加新组件
+  await page.dragAndDrop(
+    '[data-testid=component-heading]',
+    '[data-testid=editor-canvas]'
+  );
+
+  // 编辑组件属性
+  await page.click('[data-testid=added-component]');
+  await page.fill('[name=content]', 'Updated Heading');
+
+  // 保存更改
+  await page.click('[data-testid=save-button]');
+
+  // 验证保存成功
+  await expect(page.locator('[data-testid=success-toast]')).toBeVisible();
+
+  // 验证前端显示
+  await page.goto('/about');
+  await expect(page.locator('h1')).toContainText('Updated Heading');
+});
+```
+
+## 7. 风险评估与缓解
+
+### 7.1 技术风险
+
+| 风险项               | 影响级别 | 概率 | 缓解措施                                    |
+| -------------------- | -------- | ---- | ------------------------------------------- |
+| 拖拽库兼容性问题     | 中       | 低   | 使用经过验证的 StrictModeDroppable 解决方案 |
+| 性能问题（大型页面） | 高       | 中   | 实现虚拟滚动、懒加载、分页加载              |
+| 数据迁移失败         | 高       | 低   | 充分测试、提供回滚机制、分步迁移            |
+| 浏览器兼容性         | 中       | 低   | 使用现代浏览器支持的 API，添加 polyfill     |
+
+### 7.2 业务风险
+
+| 风险项         | 影响级别 | 概率 | 缓解措施                           |
+| -------------- | -------- | ---- | ---------------------------------- |
+| 用户学习成本高 | 中       | 中   | 提供详细文档、视频教程、渐进式引导 |
+| 现有工作流中断 | 高       | 低   | 保持向后兼容、分阶段推出           |
+| 数据丢失       | 高       | 极低 | 定期备份、版本控制、原子操作       |
+
+### 7.3 项目风险
+
+| 风险项       | 影响级别 | 概率 | 缓解措施                           |
+| ------------ | -------- | ---- | ---------------------------------- |
+| 开发时间超期 | 中       | 中   | 合理估算、分阶段交付、核心功能优先 |
+| 资源不足     | 中       | 低   | 合理分配任务、寻求技术支持         |
+| 需求变更     | 低       | 中   | 灵活的架构设计、模块化实现         |
+
+## 8. 成功指标
+
+### 8.1 功能指标
+
+- [ ] 支持所有 demo 中的组件类型（7种）
+- [ ] 支持多列布局（单列、双列、三列）
+- [ ] 拖拽交互响应时间 < 100ms
+- [ ] 属性编辑实时生效
+- [ ] 数据迁移成功率 100%
+
+### 8.2 性能指标
+
+- [ ] 页面加载时间 < 2秒
+- [ ] 组件渲染延迟 < 50ms
+- [ ] 支持 100+ 组件的页面编辑
+- [ ] 内存使用量 < 100MB
+
+### 8.3 用户体验指标
+
+- [ ] 管理员能够在 15 分钟内完成页面编辑
+- [ ] 错误率 < 1%
+- [ ] 用户满意度 > 4.5/5
+
+### 8.4 技术指标
+
+- [ ] 代码覆盖率 > 85%
+- [ ] 无严重安全漏洞
+- [ ] 通过所有 E2E 测试
+- [ ] 符合主项目代码规范
+
+## 9. 交付清单
+
+### 9.1 代码交付
+
+- [ ] 所有源代码文件
+- [ ] 类型定义文件
+- [ ] 测试文件
+- [ ] 配置文件
+- [ ] 数据库迁移文件
+
+### 9.2 文档交付
+
+- [ ] 技术实现文档
+- [ ] API 文档
+- [ ] 用户使用手册
+- [ ] 开发者指南
+- [ ] 数据迁移指南
+
+### 9.3 测试交付
+
+- [ ] 单元测试套件
+- [ ] 集成测试套件
+- [ ] E2E 测试套件
+- [ ] 性能测试报告
+- [ ] 安全测试报告
+
+### 9.4 部署交付
+
+- [ ] 部署脚本
+- [ ] 环境配置指南
+- [ ] 监控配置
+- [ ] 备份恢复方案
+- [ ] 回滚方案
+
+## 10. 时间线
+
+| 阶段                   | 持续时间 | 关键里程碑             | 交付物                               |
+| ---------------------- | -------- | ---------------------- | ------------------------------------ |
+| 阶段 1：基础架构和类型 | 1 周     | 类型系统和数据迁移完成 | 动态组件类型定义、数据迁移脚本       |
+| 阶段 2：核心组件移植   | 2 周     | 动态编辑器功能完成     | 拖拽编辑器、组件渲染系统、属性编辑器 |
+| 阶段 3：系统集成       | 1 周     | 现有界面升级完成       | 升级后的编辑器和预览组件             |
+| 阶段 4：优化和测试     | 1 周     | 所有测试通过           | 性能优化、完整测试套件、文档         |
+| **总计**               | **5 周** | **升级完成**           | **动态可视化编辑系统**               |
+
+## 11. 后续优化建议
+
+### 11.1 功能扩展
+
+1. **模板系统**：预设页面模板，快速创建
+2. **版本控制**：内容版本管理、历史记录、对比功能
+3. **协作编辑**：多人同时编辑、冲突解决
+4. **A/B 测试**：支持多个版本的页面内容
+5. **SEO 优化**：自动生成 meta 标签、结构化数据
+
+### 11.2 技术优化
+
+1. **缓存策略**：Redis 缓存、CDN 集成
+2. **实时同步**：WebSocket 实时预览
+3. **移动端优化**：响应式编辑器、触摸操作
+4. **无障碍支持**：键盘导航、屏幕阅读器支持
+5. **国际化增强**：RTL 支持、字体优化
+
+### 11.3 分析和监控
+
+1. **使用分析**：编辑器使用统计、热力图
+2. **性能监控**：Real User Monitoring、错误追踪
+3. **内容分析**：页面访问统计、用户行为分析
+4. **质量监控**：自动化测试、代码质量检查
+
+---
+
+_本计划文档将随着项目进展持续更新和完善。_
diff --git a/lib/scripts/migrate-about-data.ts b/lib/scripts/migrate-about-data.ts
new file mode 100644
index 00000000..cdf1b303
--- /dev/null
+++ b/lib/scripts/migrate-about-data.ts
@@ -0,0 +1,309 @@
+/**
+ * 一次性数据迁移脚本
+ *
+ * 将现有的固定结构关于页面数据迁移为动态组件结构
+ *
+ * 使用方式：
+ * 1. 开发环境: npm run migrate:about-data
+ * 2. 代码中调用: import { runMigration } from '@/lib/scripts/migrate-about-data'
+ */
+import {
+  AboutTranslationData,
+  batchMigrateTranslations,
+  createBackupData,
+  validateMigratedData,
+} from '@lib/utils/data-migration';
+import fs from 'fs/promises';
+import path from 'path';
+
+// 配置文件路径
+const MESSAGES_DIR = path.join(process.cwd(), 'messages');
+const BACKUP_DIR = path.join(process.cwd(), 'backup', 'translations');
+
+// 支持的语言列表
+const SUPPORTED_LOCALES = [
+  'en-US',
+  'zh-CN',
+  'es-ES',
+  'zh-TW',
+  'ja-JP',
+  'de-DE',
+  'fr-FR',
+  'ru-RU',
+  'it-IT',
+  'pt-PT',
+];
+
+// 日志工具
+const logger = {
+  info: (message: string) =>
+    console.log(`[INFO] ${new Date().toISOString()} - ${message}`),
+  warn: (message: string) =>
+    console.warn(`[WARN] ${new Date().toISOString()} - ${message}`),
+  error: (message: string) =>
+    console.error(`[ERROR] ${new Date().toISOString()} - ${message}`),
+  success: (message: string) =>
+    console.log(`[SUCCESS] ${new Date().toISOString()} - ${message}`),
+};
+
+// 确保目录存在
+async function ensureDir(dirPath: string): Promise<void> {
+  try {
+    await fs.access(dirPath);
+  } catch {
+    await fs.mkdir(dirPath, { recursive: true });
+  }
+}
+
+// 读取消息文件
+async function readMessageFile(
+  locale: string
+): Promise<Record<string, unknown> | null> {
+  const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
+
+  try {
+    const content = await fs.readFile(filePath, 'utf-8');
+    return JSON.parse(content);
+  } catch (error) {
+    logger.warn(`Failed to read message file for ${locale}: ${error}`);
+    return null;
+  }
+}
+
+// 写入消息文件
+async function writeMessageFile(
+  locale: string,
+  data: Record<string, unknown>
+): Promise<void> {
+  const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
+
+  try {
+    await fs.writeFile(filePath, JSON.stringify(data, null, 2), 'utf-8');
+  } catch (error) {
+    throw new Error(`Failed to write message file for ${locale}: ${error}`);
+  }
+}
+
+// 创建备份
+async function createBackup(
+  locale: string,
+  data: Record<string, unknown>
+): Promise<void> {
+  await ensureDir(BACKUP_DIR);
+
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const backupPath = path.join(BACKUP_DIR, `${locale}-${timestamp}.json`);
+
+  const pages = data as { pages?: { about?: AboutTranslationData } };
+  const backupData = createBackupData(pages.pages?.about || {});
+
+  try {
+    await fs.writeFile(
+      backupPath,
+      JSON.stringify(backupData, null, 2),
+      'utf-8'
+    );
+    logger.info(`Created backup for ${locale}: ${backupPath}`);
+  } catch (error) {
+    throw new Error(`Failed to create backup for ${locale}: ${error}`);
+  }
+}
+
+// 检查是否需要迁移
+function needsMigration(aboutData: AboutTranslationData): boolean {
+  // 如果已经有sections，说明已经迁移过了
+  if (aboutData.sections && aboutData.sections.length > 0) {
+    return false;
+  }
+
+  // 如果有旧的固定结构数据，需要迁移
+  return Boolean(
+    aboutData.title ||
+      aboutData.subtitle ||
+      aboutData.mission ||
+      aboutData.values ||
+      aboutData.buttonText
+  );
+}
+
+// 迁移单个语言的数据
+async function migrateLocaleData(locale: string): Promise<{
+  success: boolean;
+  skipped?: boolean;
+  error?: string;
+}> {
+  try {
+    logger.info(`Starting migration for ${locale}`);
+
+    // 读取现有数据
+    const messageData = await readMessageFile(locale);
+    if (!messageData) {
+      return { success: false, error: 'Failed to read message file' };
+    }
+
+    // 检查是否有关于页面数据
+    const msgPages = messageData as {
+      pages?: { about?: AboutTranslationData };
+    };
+    const aboutData = msgPages.pages?.about;
+    if (!aboutData) {
+      logger.warn(`No about page data found for ${locale}`);
+      return { success: true, skipped: true };
+    }
+
+    // 检查是否需要迁移
+    if (!needsMigration(aboutData)) {
+      logger.info(`${locale} already migrated, skipping`);
+      return { success: true, skipped: true };
+    }
+
+    // 创建备份
+    await createBackup(locale, messageData);
+
+    // 执行迁移
+    const migratedData = batchMigrateTranslations({ [locale]: aboutData });
+    const newAboutData = migratedData[locale];
+
+    // 验证迁移后的数据
+    const validation = validateMigratedData(newAboutData);
+    if (!validation.isValid) {
+      logger.error(`Migration validation failed for ${locale}:`);
+      validation.errors.forEach((error: string) =>
+        logger.error(`  - ${error}`)
+      );
+      return { success: false, error: 'Migration validation failed' };
+    }
+
+    // 更新消息数据
+    if (!msgPages.pages) msgPages.pages = {};
+    msgPages.pages.about = newAboutData;
+
+    // 写入新数据
+    await writeMessageFile(locale, messageData);
+
+    logger.success(`Successfully migrated ${locale}`);
+    return { success: true };
+  } catch (error) {
+    logger.error(`Migration failed for ${locale}: ${error}`);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+// 主迁移函数
+export async function runMigration(
+  options: {
+    dryRun?: boolean;
+    locales?: string[];
+  } = {}
+): Promise<{
+  success: boolean;
+  results: Record<
+    string,
+    { success: boolean; skipped?: boolean; error?: string }
+  >;
+  summary: {
+    total: number;
+    migrated: number;
+    skipped: number;
+    failed: number;
+  };
+}> {
+  const { dryRun = false, locales = SUPPORTED_LOCALES } = options;
+
+  logger.info(
+    `Starting about page data migration${dryRun ? ' (DRY RUN)' : ''}`
+  );
+  logger.info(`Target locales: ${locales.join(', ')}`);
+
+  const results: Record<
+    string,
+    { success: boolean; skipped?: boolean; error?: string }
+  > = {};
+  const summary = {
+    total: locales.length,
+    migrated: 0,
+    skipped: 0,
+    failed: 0,
+  };
+
+  for (const locale of locales) {
+    if (dryRun) {
+      // 在干运行模式下，只检查是否需要迁移
+      const messageData = await readMessageFile(locale);
+      const pages = messageData as {
+        pages?: { about?: AboutTranslationData };
+      } | null;
+      const aboutData = pages?.pages?.about;
+
+      if (!aboutData) {
+        results[locale] = { success: true, skipped: true };
+        summary.skipped++;
+      } else if (needsMigration(aboutData)) {
+        logger.info(`${locale} needs migration`);
+        results[locale] = { success: true };
+        summary.migrated++;
+      } else {
+        logger.info(`${locale} already migrated`);
+        results[locale] = { success: true, skipped: true };
+        summary.skipped++;
+      }
+    } else {
+      // 执行实际迁移
+      const result = await migrateLocaleData(locale);
+      results[locale] = result;
+
+      if (result.success) {
+        if (result.skipped) {
+          summary.skipped++;
+        } else {
+          summary.migrated++;
+        }
+      } else {
+        summary.failed++;
+      }
+    }
+  }
+
+  // 打印总结
+  logger.info('Migration Summary:');
+  logger.info(`  Total locales: ${summary.total}`);
+  logger.info(`  Migrated: ${summary.migrated}`);
+  logger.info(`  Skipped: ${summary.skipped}`);
+  logger.info(`  Failed: ${summary.failed}`);
+
+  const overallSuccess = summary.failed === 0;
+
+  if (overallSuccess) {
+    logger.success('Migration completed successfully!');
+  } else {
+    logger.error('Migration completed with errors!');
+  }
+
+  return {
+    success: overallSuccess,
+    results,
+    summary,
+  };
+}
+
+// CLI 执行入口
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  const dryRun = args.includes('--dry-run');
+  const localesArg = args.find(arg => arg.startsWith('--locales='));
+  const locales = localesArg
+    ? localesArg.split('=')[1].split(',')
+    : SUPPORTED_LOCALES;
+
+  runMigration({ dryRun, locales })
+    .then(result => {
+      process.exit(result.success ? 0 : 1);
+    })
+    .catch(error => {
+      logger.error(`Migration script failed: ${error}`);
+      process.exit(1);
+    });
+}
diff --git a/lib/scripts/test-migration.ts b/lib/scripts/test-migration.ts
new file mode 100644
index 00000000..54ada896
--- /dev/null
+++ b/lib/scripts/test-migration.ts
@@ -0,0 +1,104 @@
+/**
+ * 数据迁移功能测试脚本
+ *
+ * 用于验证数据迁移工具的正确性
+ */
+import {
+  AboutTranslationData,
+  LegacyAboutData,
+  createDefaultComponent,
+  createDefaultSection,
+  generateUniqueId,
+  migrateLegacyToSections,
+  validateMigratedData,
+} from '@lib/utils/data-migration';
+
+// 测试数据
+const testLegacyData: LegacyAboutData = {
+  title: 'Test About AgentifUI',
+  subtitle: 'Connecting AI with enterprises for testing',
+  mission: {
+    description: 'This is a test mission description for validation.',
+  },
+  values: {
+    items: [
+      {
+        title: 'Test Innovation',
+        description: 'Test description for innovation',
+      },
+      {
+        title: 'Test Security',
+        description: 'Test description for security',
+      },
+    ],
+  },
+  buttonText: 'Test Button',
+  copyright: {
+    prefix: '© {year} ',
+    linkText: 'Test Company',
+    suffix: '. All rights reserved.',
+  },
+};
+
+// 执行测试
+function runTests() {
+  console.log('🧪 开始数据迁移功能测试...\n');
+
+  // 测试1: ID生成
+  console.log('📝 测试 1: ID 生成功能');
+  const sectionId = generateUniqueId('section');
+  const componentId = generateUniqueId('comp');
+  console.log(`  生成的 Section ID: ${sectionId}`);
+  console.log(`  生成的 Component ID: ${componentId}`);
+  console.log(`  ✅ ID 生成测试通过\n`);
+
+  // 测试2: 默认组件创建
+  console.log('📝 测试 2: 默认组件创建');
+  const headingComponent = createDefaultComponent('heading', 'Test Heading');
+  console.log(`  标题组件: ${JSON.stringify(headingComponent, null, 2)}`);
+  console.log(`  ✅ 默认组件创建测试通过\n`);
+
+  // 测试3: 默认段落创建
+  console.log('📝 测试 3: 默认段落创建');
+  const section = createDefaultSection('single-column');
+  console.log(`  段落结构: ${JSON.stringify(section, null, 2)}`);
+  console.log(`  ✅ 默认段落创建测试通过\n`);
+
+  // 测试4: 数据迁移
+  console.log('📝 测试 4: 固定结构到动态结构迁移');
+  const migratedContent = migrateLegacyToSections(testLegacyData);
+  console.log(`  迁移后的数据结构:`);
+  console.log(`  - 段落数量: ${migratedContent.sections.length}`);
+  console.log(
+    `  - 第一个段落的组件数量: ${migratedContent.sections[0]?.columns[0]?.length || 0}`
+  );
+  console.log(`  ✅ 数据迁移测试通过\n`);
+
+  // 测试5: 数据验证
+  console.log('📝 测试 5: 迁移数据验证');
+  const testData: AboutTranslationData = {
+    sections: migratedContent.sections,
+    metadata: migratedContent.metadata,
+  };
+
+  const validation = validateMigratedData(testData);
+  console.log(`  验证结果: ${validation.isValid ? '✅ 有效' : '❌ 无效'}`);
+  if (!validation.isValid) {
+    console.log(`  错误列表:`);
+    validation.errors.forEach(error => console.log(`    - ${error}`));
+  }
+  console.log(`  ✅ 数据验证测试通过\n`);
+
+  // 测试6: 完整的数据结构打印
+  console.log('📝 测试 6: 完整迁移数据结构展示');
+  console.log(JSON.stringify(migratedContent, null, 2));
+
+  console.log('\n🎉 所有测试通过！数据迁移功能正常工作。');
+}
+
+// 如果直接运行此脚本
+if (require.main === module) {
+  runTests();
+}
+
+export { runTests };
diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
new file mode 100644
index 00000000..4cc57206
--- /dev/null
+++ b/lib/types/about-page-components.ts
@@ -0,0 +1,215 @@
+/**
+ * 动态关于页面组件类型定义
+ *
+ * 这个文件定义了动态组件编辑器所需的所有类型，包括：
+ * - 组件类型枚举
+ * - 布局类型枚举
+ * - 组件实例结构
+ * - 页面段落结构
+ * - 页面内容结构
+ * - 各种组件的 props 接口定义
+ */
+
+// 支持的布局类型
+export type LayoutType = 'single-column' | 'two-column' | 'three-column';
+
+// 支持的组件类型
+export type ComponentType =
+  | 'heading'
+  | 'paragraph'
+  | 'cards'
+  | 'button'
+  | 'image'
+  | 'divider';
+
+// 组件实例接口
+export interface ComponentInstance {
+  id: string;
+  type: ComponentType;
+  props: Record<string, unknown>;
+}
+
+// 页面段落接口
+export interface PageSection {
+  id: string;
+  layout: LayoutType;
+  columns: ComponentInstance[][];
+  shouldDelete?: boolean;
+}
+
+// 页面内容接口
+export interface PageContent {
+  sections: PageSection[];
+  metadata?: {
+    version?: string;
+    lastModified?: string;
+    author?: string;
+  };
+}
+
+// === 组件 Props 接口定义 ===
+
+// 标题组件 Props
+export interface HeadingProps {
+  content: string;
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  textAlign: 'left' | 'center' | 'right';
+}
+
+// 段落组件 Props
+export interface ParagraphProps {
+  content: string;
+  textAlign: 'left' | 'center' | 'right';
+}
+
+// 卡片组件 Props
+export interface CardsProps {
+  layout: 'grid' | 'list';
+  items: Array<{
+    title: string;
+    description: string;
+    icon?: string;
+  }>;
+}
+
+// 按钮组件 Props
+export interface ButtonProps {
+  text: string;
+  variant: 'primary' | 'secondary' | 'outline';
+  action: 'link' | 'submit' | 'external';
+  url?: string;
+}
+
+// 图片组件 Props
+export interface ImageProps {
+  src: string;
+  alt: string;
+  caption?: string;
+  alignment: 'left' | 'center' | 'right';
+  width?: string | number;
+  height?: string | number;
+}
+
+// 分隔线组件 Props
+export interface DividerProps {
+  style: 'solid' | 'dashed' | 'dotted';
+  color?: string;
+  thickness?: 'thin' | 'medium' | 'thick';
+}
+
+// 组件 Props 联合类型
+export type ComponentProps =
+  | HeadingProps
+  | ParagraphProps
+  | CardsProps
+  | ButtonProps
+  | ImageProps
+  | DividerProps;
+
+// 组件定义接口 (用于组件注册系统)
+export interface ComponentDefinition {
+  type: ComponentType;
+  name: string;
+  icon: string;
+  defaultProps: Record<string, unknown>;
+  category: 'basic' | 'layout' | 'content' | 'media';
+  description?: string;
+}
+
+// 编辑器状态接口
+export interface AboutEditorState {
+  pageContent: PageContent | null;
+  selectedComponentId: string | null;
+  undoStack: PageContent[];
+  redoStack: PageContent[];
+  isDirty: boolean;
+  isLoading: boolean;
+}
+
+// 拖拽结果接口 (来自 react-beautiful-dnd)
+export interface DragResult {
+  draggableId: string;
+  type: string;
+  source: {
+    droppableId: string;
+    index: number;
+  };
+  destination?: {
+    droppableId: string;
+    index: number;
+  } | null;
+}
+
+// ID 生成相关类型
+export type IdPrefix = 'section' | 'comp';
+
+// 数据迁移相关接口
+export interface LegacyAboutData {
+  title?: string;
+  subtitle?: string;
+  mission?: {
+    description?: string;
+  };
+  values?: {
+    items?: Array<{
+      title: string;
+      description: string;
+    }>;
+  };
+  buttonText?: string;
+  copyright?: {
+    prefix?: string;
+    linkText?: string;
+    suffix?: string;
+  };
+}
+
+// 扩展的 About 翻译数据接口，支持动态组件结构
+export interface AboutTranslationData {
+  // 新的动态组件结构
+  sections?: PageSection[];
+
+  // 向后兼容：保留原有的固定结构 (用于数据迁移)
+  title?: string;
+  subtitle?: string;
+  mission?: {
+    description?: string;
+  };
+  values?: {
+    items?: Array<{
+      title: string;
+      description: string;
+    }>;
+  };
+  buttonText?: string;
+  copyright?: {
+    prefix?: string;
+    linkText?: string;
+    suffix?: string;
+  };
+
+  // 元数据
+  metadata?: {
+    version?: string;
+    lastModified?: string;
+    author?: string;
+    migrated?: boolean; // 标记是否已从固定结构迁移到动态结构
+  };
+}
+
+// 检查数据是否为新的动态格式
+export function isDynamicFormat(data: AboutTranslationData): boolean {
+  return Boolean(data.sections && data.sections.length > 0);
+}
+
+// 检查数据是否为旧的固定格式
+export function isLegacyFormat(data: AboutTranslationData): boolean {
+  return Boolean(
+    !data.sections &&
+      (data.title ||
+        data.subtitle ||
+        data.mission ||
+        data.values ||
+        data.buttonText)
+  );
+}
diff --git a/lib/utils/data-migration.ts b/lib/utils/data-migration.ts
new file mode 100644
index 00000000..4abebe36
--- /dev/null
+++ b/lib/utils/data-migration.ts
@@ -0,0 +1,322 @@
+/**
+ * 数据迁移工具
+ *
+ * 提供从固定结构到动态组件结构的迁移功能
+ */
+import {
+  AboutTranslationData,
+  ComponentInstance,
+  ComponentType,
+  IdPrefix,
+  LegacyAboutData,
+  PageContent,
+  PageSection,
+} from '@lib/types/about-page-components';
+
+// 重新导出类型，以便其他模块使用
+export type {
+  LegacyAboutData,
+  AboutTranslationData,
+  PageContent,
+  PageSection,
+  ComponentInstance,
+  ComponentType,
+  IdPrefix,
+} from '@lib/types/about-page-components';
+
+// ID 生成函数
+export function generateUniqueId(prefix: IdPrefix): string {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).substr(2, 9);
+  return `${prefix}-${timestamp}-${random}`;
+}
+
+// 生成多个唯一ID
+export function generateUniqueIds(prefix: IdPrefix, count: number): string[] {
+  return Array.from({ length: count }, () => generateUniqueId(prefix));
+}
+
+// 创建默认组件实例
+export function createDefaultComponent(
+  type: ComponentType,
+  content?: string
+): ComponentInstance {
+  const id = generateUniqueId('comp');
+
+  const defaultProps: Record<ComponentType, Record<string, unknown>> = {
+    heading: {
+      content: content || 'New Heading',
+      level: 2,
+      textAlign: 'left',
+    },
+    paragraph: {
+      content: content || 'New paragraph text',
+      textAlign: 'left',
+    },
+    button: {
+      text: content || 'New Button',
+      variant: 'primary',
+      action: 'link',
+      url: '#',
+    },
+    cards: {
+      layout: 'grid',
+      items: [],
+    },
+    image: {
+      src: '',
+      alt: content || 'Image',
+      alignment: 'center',
+      width: 'auto',
+      height: 'auto',
+    },
+    divider: {
+      style: 'solid',
+      color: 'gray',
+      thickness: 'medium',
+    },
+  };
+
+  return {
+    id,
+    type,
+    props: defaultProps[type] || {},
+  };
+}
+
+// 创建默认段落
+export function createDefaultSection(
+  layout: 'single-column' | 'two-column' | 'three-column' = 'single-column'
+): PageSection {
+  const id = generateUniqueId('section');
+  const columnCount =
+    layout === 'single-column' ? 1 : layout === 'two-column' ? 2 : 3;
+
+  return {
+    id,
+    layout,
+    columns: Array(columnCount)
+      .fill([])
+      .map(() => []),
+  };
+}
+
+// 从固定结构迁移到动态组件结构
+export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
+  const sections: PageSection[] = [];
+
+  // 标题和副标题段落
+  if (legacy.title || legacy.subtitle) {
+    const titleComponents: ComponentInstance[] = [];
+
+    if (legacy.title) {
+      titleComponents.push(createDefaultComponent('heading', legacy.title));
+      titleComponents[titleComponents.length - 1].props.level = 1;
+      titleComponents[titleComponents.length - 1].props.textAlign = 'center';
+    }
+
+    if (legacy.subtitle) {
+      titleComponents.push(
+        createDefaultComponent('paragraph', legacy.subtitle)
+      );
+      titleComponents[titleComponents.length - 1].props.textAlign = 'center';
+    }
+
+    if (titleComponents.length > 0) {
+      sections.push({
+        id: generateUniqueId('section'),
+        layout: 'single-column',
+        columns: [titleComponents],
+      });
+    }
+  }
+
+  // 使命段落
+  if (legacy.mission?.description) {
+    sections.push({
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [
+        [
+          createDefaultComponent('heading', 'Our Mission'),
+          createDefaultComponent('paragraph', legacy.mission.description),
+        ],
+      ],
+    });
+  }
+
+  // 价值观段落
+  if (legacy.values?.items && legacy.values.items.length > 0) {
+    const valuesSection: PageSection = {
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [[createDefaultComponent('heading', 'Our Values')]],
+    };
+
+    // 添加卡片组件
+    const cardsComponent = createDefaultComponent('cards');
+    cardsComponent.props = {
+      layout: 'grid',
+      items: legacy.values.items,
+    };
+
+    valuesSection.columns[0].push(cardsComponent);
+    sections.push(valuesSection);
+  }
+
+  // 按钮段落
+  if (legacy.buttonText) {
+    const buttonComponent = createDefaultComponent('button', legacy.buttonText);
+    sections.push({
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [[buttonComponent]],
+    });
+  }
+
+  // 版权段落
+  if (legacy.copyright) {
+    const copyrightText = [
+      legacy.copyright.prefix?.replace(
+        '{year}',
+        new Date().getFullYear().toString()
+      ) || '',
+      legacy.copyright.linkText || '',
+      legacy.copyright.suffix || '',
+    ].join('');
+
+    if (copyrightText.trim()) {
+      const copyrightComponent = createDefaultComponent(
+        'paragraph',
+        copyrightText
+      );
+      copyrightComponent.props.textAlign = 'center';
+
+      sections.push({
+        id: generateUniqueId('section'),
+        layout: 'single-column',
+        columns: [[copyrightComponent]],
+      });
+    }
+  }
+
+  return {
+    sections,
+    metadata: {
+      version: '1.0.0',
+      lastModified: new Date().toISOString(),
+      author: 'system-migration',
+    },
+  };
+}
+
+// 迁移完整的翻译数据
+export function migrateAboutTranslationData(
+  legacy: AboutTranslationData
+): AboutTranslationData {
+  // 如果已经是动态格式，直接返回
+  if (legacy.sections && legacy.sections.length > 0) {
+    return legacy;
+  }
+
+  // 迁移固定结构到动态结构
+  const pageContent = migrateLegacyToSections(legacy);
+
+  return {
+    sections: pageContent.sections,
+    metadata: {
+      ...legacy.metadata,
+      ...pageContent.metadata,
+      migrated: true,
+    },
+  };
+}
+
+// 批量迁移多语言数据
+export function batchMigrateTranslations(
+  translations: Record<string, AboutTranslationData>
+): Record<string, AboutTranslationData> {
+  const migratedTranslations: Record<string, AboutTranslationData> = {};
+
+  for (const [locale, data] of Object.entries(translations)) {
+    migratedTranslations[locale] = migrateAboutTranslationData(data);
+  }
+
+  return migratedTranslations;
+}
+
+// 验证迁移后的数据完整性
+export function validateMigratedData(data: AboutTranslationData): {
+  isValid: boolean;
+  errors: string[];
+} {
+  const errors: string[] = [];
+
+  // 检查是否有sections
+  if (!data.sections || data.sections.length === 0) {
+    errors.push('迁移后的数据缺少sections');
+  }
+
+  // 检查每个section的完整性
+  data.sections?.forEach((section: PageSection, index: number) => {
+    if (!section.id) {
+      errors.push(`Section ${index} 缺少ID`);
+    }
+
+    if (!section.layout) {
+      errors.push(`Section ${index} 缺少布局配置`);
+    }
+
+    if (!section.columns || !Array.isArray(section.columns)) {
+      errors.push(`Section ${index} 缺少或无效的columns`);
+    }
+
+    // 检查组件完整性
+    section.columns?.forEach(
+      (column: ComponentInstance[], columnIndex: number) => {
+        if (!Array.isArray(column)) {
+          errors.push(`Section ${index}, Column ${columnIndex} 不是数组`);
+          return;
+        }
+
+        column.forEach((component, componentIndex) => {
+          if (!component.id) {
+            errors.push(
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少ID`
+            );
+          }
+
+          if (!component.type) {
+            errors.push(
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少类型`
+            );
+          }
+
+          if (!component.props) {
+            errors.push(
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少props`
+            );
+          }
+        });
+      }
+    );
+  });
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}
+
+// 创建备份数据
+export function createBackupData(data: AboutTranslationData): {
+  data: AboutTranslationData;
+  timestamp: string;
+  version: string;
+} {
+  return {
+    data: JSON.parse(JSON.stringify(data)), // 深拷贝
+    timestamp: new Date().toISOString(),
+    version: '1.0.0',
+  };
+}
diff --git a/package.json b/package.json
index 5ad82ca1..f41f35bf 100644
--- a/package.json
+++ b/package.json
@@ -133,5 +133,6 @@
     "**/*.ts?(x)": [
       "eslint --fix"
     ]
-  }
+  },
+  "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad"
 }

From 11d1d38f1b4cd39b3f129bbb4cb6937468fcbb5e Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Fri, 8 Aug 2025 19:58:35 +0800
Subject: [PATCH 02/66] feat(about): implement Phase 2 of dynamic component
 editor architecture

- Add drag-and-drop editing with component palette and property editor
- Upgrade AboutEditor to dynamic visual editor with real-time preview
- Upgrade AboutPreview to support dynamic component rendering
- Implement Zustand state management with undo/redo functionality
- Add core components: ComponentRenderer, PropertyEditor, ComponentPalette
- Add React 18 compatible drag-and-drop with StrictModeDroppable
- Install react-beautiful-dnd and @radix-ui/react-separator dependencies
- Maintain backward compatibility with existing translation data
- Support multi-language editing and responsive device preview
- Add demo projects to .gitignore to exclude from version control
- Fix all ESLint code quality issues and TypeScript type errors
---
 .gitignore                                    |   5 +-
 app/admin/content/page.tsx                    |  51 +-
 components/admin/content/about-editor.tsx     | 747 +++++++++---------
 components/admin/content/about-preview.tsx    | 379 ++++-----
 .../admin/content/component-palette.tsx       | 227 ++++++
 .../admin/content/component-renderer.tsx      | 254 ++++++
 components/admin/content/property-editor.tsx  | 320 ++++++++
 .../admin/content/strict-mode-droppable.tsx   |  36 +
 components/ui/separator.tsx                   |  32 +
 lib/stores/about-editor-store.ts              | 380 +++++++++
 lib/types/about-page-components.ts            |  12 +
 package.json                                  |   3 +
 pnpm-lock.yaml                                | 148 ++++
 13 files changed, 1962 insertions(+), 632 deletions(-)
 create mode 100644 components/admin/content/component-palette.tsx
 create mode 100644 components/admin/content/component-renderer.tsx
 create mode 100644 components/admin/content/property-editor.tsx
 create mode 100644 components/admin/content/strict-mode-droppable.tsx
 create mode 100644 components/ui/separator.tsx
 create mode 100644 lib/stores/about-editor-store.ts

diff --git a/.gitignore b/.gitignore
index b1c694d7..2d3af037 100644
--- a/.gitignore
+++ b/.gitignore
@@ -54,4 +54,7 @@ scripts/*
 docs/security
 
 # pm2
-pm2-logs/
\ No newline at end of file
+pm2-logs/
+
+# demo projects
+about-page-standalone/
\ No newline at end of file
diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index b88a4e02..9308a758 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -22,21 +22,6 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
 
-interface ValueCard {
-  id: string;
-  title: string;
-  description: string;
-}
-
-interface AboutPageConfig {
-  title: string;
-  subtitle: string;
-  mission: string;
-  valueCards: ValueCard[];
-  buttonText: string;
-  copyrightText: string;
-}
-
 interface FeatureCard {
   title: string;
   description: string;
@@ -217,31 +202,6 @@ export default function ContentManagementPage() {
     };
   }
 
-  const transformToAboutPreviewConfig = (
-    translations: Record<SupportedLocale, AboutTranslationData> | null,
-    locale: SupportedLocale
-  ): AboutPageConfig | null => {
-    const t = translations?.[locale];
-    if (!t) return null;
-
-    return {
-      title: t.title || '',
-      subtitle: t.subtitle || '',
-      mission: t.mission?.description || '',
-      valueCards: (t.values?.items || []).map(
-        (item: { title: string; description: string }, index: number) => ({
-          id: `value-${index}`,
-          title: item.title,
-          description: item.description,
-        })
-      ),
-      buttonText: t.buttonText || '',
-      copyrightText: t.copyright
-        ? `${(t.copyright.prefix || '').replace('{year}', new Date().getFullYear().toString())}${t.copyright.linkText || ''}${t.copyright.suffix || ''}`
-        : '',
-    };
-  };
-
   interface HomeTranslationData {
     title?: string;
     subtitle?: string;
@@ -278,10 +238,6 @@ export default function ContentManagementPage() {
     };
   };
 
-  const aboutPreviewConfig = transformToAboutPreviewConfig(
-    aboutTranslations,
-    currentLocale
-  );
   const homePreviewConfig = transformToHomePreviewConfig(
     homeTranslations,
     currentLocale
@@ -322,9 +278,10 @@ export default function ContentManagementPage() {
 
   const renderPreview = () => {
     if (activeTab === 'about') {
-      return aboutPreviewConfig ? (
+      const currentTranslation = aboutTranslations?.[currentLocale];
+      return currentTranslation ? (
         <AboutPreview
-          config={aboutPreviewConfig}
+          translation={currentTranslation}
           previewDevice={previewDevice}
         />
       ) : (
@@ -577,7 +534,7 @@ export default function ContentManagementPage() {
                 >
                   {t('fullscreenPreview')} -
                   {activeTab === 'about'
-                    ? aboutPreviewConfig?.title
+                    ? aboutTranslations?.[currentLocale]?.title || 'About'
                     : homePreviewConfig?.title}
                 </span>
               </div>
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index e86b5d45..1e0115ca 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -1,5 +1,8 @@
 'use client';
 
+import { Badge } from '@components/ui/badge';
+import { Button } from '@components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
 import {
   Select,
   SelectContent,
@@ -7,46 +10,35 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@components/ui/select';
+import { Separator } from '@components/ui/separator';
 import type { SupportedLocale } from '@lib/config/language-config';
 import { getLanguageInfo } from '@lib/config/language-config';
-import { useTheme } from '@lib/hooks/use-theme';
+import { useAboutEditorStore } from '@lib/stores/about-editor-store';
+import {
+  AboutTranslationData,
+  PageContent,
+  isDynamicFormat,
+  migrateAboutTranslationData,
+} from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
-import { Plus, Trash2 } from 'lucide-react';
+import { Plus, Redo2, RotateCcw, Save, Trash2, Undo2 } from 'lucide-react';
+import { DragDropContext, Draggable } from 'react-beautiful-dnd';
 
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-interface ValueItem {
-  title: string;
-  description: string;
-}
-
-interface Copyright {
-  prefix?: string;
-  linkText?: string;
-  suffix?: string;
-}
-
-interface AboutTranslation {
-  title?: string;
-  subtitle?: string;
-  mission?: {
-    description?: string;
-  };
-  values?: {
-    items?: ValueItem[];
-  };
-  buttonText?: string;
-  copyright?: Copyright;
-}
+import ComponentPalette from './component-palette';
+import ComponentRenderer from './component-renderer';
+import PropertyEditor from './property-editor';
+import StrictModeDroppable from './strict-mode-droppable';
 
 interface AboutEditorProps {
-  translations: Record<SupportedLocale, AboutTranslation>;
+  translations: Record<SupportedLocale, AboutTranslationData>;
   currentLocale: SupportedLocale;
   supportedLocales: SupportedLocale[];
   onTranslationsChange: (
-    newTranslations: Record<SupportedLocale, AboutTranslation>
+    newTranslations: Record<SupportedLocale, AboutTranslationData>
   ) => void;
   onLocaleChange: (newLocale: SupportedLocale) => void;
 }
@@ -58,359 +50,402 @@ export function AboutEditor({
   onTranslationsChange,
   onLocaleChange,
 }: AboutEditorProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.admin.content.editor');
-  const currentTranslation = translations[currentLocale] || {};
-
-  const handleFieldChange = (field: string, value: string | ValueItem[]) => {
-    const newTranslations = JSON.parse(JSON.stringify(translations)) as Record<
-      SupportedLocale,
-      AboutTranslation
-    >;
-    const fieldParts = field.split('.');
-    let current = newTranslations[currentLocale] as any;
-
-    for (let i = 0; i < fieldParts.length - 1; i++) {
-      if (!current[fieldParts[i]]) {
-        current[fieldParts[i]] = {};
+
+  // Zustand store
+  const {
+    pageContent,
+    selectedComponentId,
+    undoStack,
+    redoStack,
+    isDirty,
+    setPageContent,
+    setSelectedComponent,
+    updateComponentProps,
+    deleteComponent,
+    handleDragEnd,
+    addSection,
+    undo,
+    redo,
+    setCurrentLanguage,
+  } = useAboutEditorStore();
+
+  // Get current translation and ensure it's in dynamic format
+  const currentTranslation = useMemo(() => {
+    let translation = translations[currentLocale] || {};
+
+    // If it's not already in dynamic format, migrate it
+    if (!isDynamicFormat(translation)) {
+      translation = migrateAboutTranslationData(translation);
+    }
+
+    return translation;
+  }, [translations, currentLocale]);
+
+  // Get selected component from page content
+  const selectedComponent = useMemo(() => {
+    if (!pageContent || !selectedComponentId) return null;
+
+    for (const section of pageContent.sections) {
+      for (const column of section.columns) {
+        const component = column.find(comp => comp.id === selectedComponentId);
+        if (component) return component;
       }
-      current = current[fieldParts[i]];
     }
+    return null;
+  }, [pageContent, selectedComponentId]);
 
-    current[fieldParts[fieldParts.length - 1]] = value;
-    onTranslationsChange(newTranslations);
+  // Load current translation into editor when locale changes
+  useEffect(() => {
+    if (currentTranslation.sections) {
+      const content: PageContent = {
+        sections: currentTranslation.sections,
+        metadata: currentTranslation.metadata || {
+          version: '1.0.0',
+          lastModified: new Date().toISOString(),
+          author: 'admin',
+        },
+      };
+      setPageContent(content);
+    }
+    setCurrentLanguage(currentLocale);
+  }, [currentLocale, currentTranslation, setPageContent, setCurrentLanguage]);
+
+  // Handle property changes
+  const handlePropsChange = (newProps: Record<string, unknown>) => {
+    if (selectedComponentId) {
+      updateComponentProps(selectedComponentId, newProps);
+    }
   };
 
-  const handleValueCardChange = (
-    index: number,
-    field: 'title' | 'description',
-    value: string
-  ) => {
-    const newItems = [...(currentTranslation.values?.items || [])];
-    newItems[index] = { ...newItems[index], [field]: value };
-    handleFieldChange('values.items', newItems);
+  // Handle component deletion
+  const handleDeleteComponent = () => {
+    if (selectedComponentId) {
+      deleteComponent(selectedComponentId);
+    }
   };
 
-  const addValueCard = () => {
-    const newItems = [
-      ...(currentTranslation.values?.items || []),
-      { title: '', description: '' },
-    ];
-    handleFieldChange('values.items', newItems);
+  // Handle component selection
+  const handleComponentClick = (componentId: string) => {
+    setSelectedComponent(componentId);
   };
 
-  const removeValueCard = (index: number) => {
-    const newItems = (currentTranslation.values?.items || []).filter(
-      (_: ValueItem, i: number) => i !== index
-    );
-    handleFieldChange('values.items', newItems);
+  // Save changes back to translations
+  const handleSave = () => {
+    if (!pageContent) return;
+
+    const updatedTranslation: AboutTranslationData = {
+      sections: pageContent.sections,
+      metadata: {
+        ...pageContent.metadata,
+        lastModified: new Date().toISOString(),
+      },
+    };
+
+    const newTranslations = {
+      ...translations,
+      [currentLocale]: updatedTranslation,
+    };
+
+    onTranslationsChange(newTranslations);
   };
 
-  return (
-    <div className="space-y-6">
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('common.editLanguage')}
-        </label>
-        <Select
-          value={currentLocale}
-          onValueChange={value => onLocaleChange(value as SupportedLocale)}
-        >
-          <SelectTrigger
-            className={cn(
-              'w-full transition-all duration-200 focus:ring-2 focus:ring-offset-2',
-              isDark
-                ? 'border-stone-600 bg-stone-800 text-stone-100 hover:border-stone-500 hover:bg-stone-700 focus:ring-stone-400'
-                : 'border-stone-300 bg-white text-stone-900 hover:border-stone-400 hover:bg-stone-50 focus:ring-stone-500'
-            )}
-          >
-            <SelectValue>
-              <div className="flex items-center gap-2">
-                <span className="text-xs opacity-60">
-                  {getLanguageInfo(currentLocale).code}
-                </span>
-                <span className="font-medium">
-                  {getLanguageInfo(currentLocale).nativeName}
-                </span>
-              </div>
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent
-            className={cn(
-              'border shadow-lg',
-              isDark
-                ? 'border-stone-600 bg-stone-800'
-                : 'border-stone-200 bg-white'
-            )}
-          >
-            {supportedLocales.map(locale => {
-              const langInfo = getLanguageInfo(locale);
-              return (
-                <SelectItem
-                  key={locale}
-                  value={locale}
-                  className={cn(
-                    'cursor-pointer transition-colors',
-                    isDark
-                      ? 'hover:bg-stone-700 focus:bg-stone-700'
-                      : 'hover:bg-stone-100 focus:bg-stone-100'
-                  )}
-                >
-                  <div className="flex w-full items-center justify-between">
-                    <span className="font-medium">{langInfo.nativeName}</span>
-                    <span className="ml-2 text-xs opacity-60">
-                      {langInfo.code}
-                    </span>
-                  </div>
-                </SelectItem>
-              );
-            })}
-          </SelectContent>
-        </Select>
-      </div>
+  // Handle reset
+  const handleReset = () => {
+    if (currentTranslation.sections) {
+      const content: PageContent = {
+        sections: currentTranslation.sections,
+        metadata: currentTranslation.metadata || {
+          version: '1.0.0',
+          lastModified: new Date().toISOString(),
+          author: 'admin',
+        },
+      };
+      setPageContent(content);
+    }
+  };
 
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.pageTitle')}
-        </label>
-        <input
-          type="text"
-          value={currentTranslation.title || ''}
-          onChange={e => handleFieldChange('title', e.target.value)}
-          className={cn(
-            'w-full rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
-          )}
-        />
+  if (!pageContent) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-muted-foreground">Loading editor...</p>
       </div>
+    );
+  }
 
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.subtitle')}
-        </label>
-        <input
-          type="text"
-          value={currentTranslation.subtitle || ''}
-          onChange={e => handleFieldChange('subtitle', e.target.value)}
-          className={cn(
-            'w-full rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
-          )}
-        />
-      </div>
+  return (
+    <DragDropContext onDragEnd={handleDragEnd}>
+      <div className="flex h-full flex-col">
+        {/* Header */}
+        <div className="bg-card space-y-4 border-b p-4">
+          {/* Language Selector */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <label className="text-sm font-medium">
+                {t('common.editLanguage')}
+              </label>
+              <Select
+                value={currentLocale}
+                onValueChange={value =>
+                  onLocaleChange(value as SupportedLocale)
+                }
+              >
+                <SelectTrigger className="w-64">
+                  <SelectValue>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs opacity-60">
+                        {getLanguageInfo(currentLocale).code}
+                      </span>
+                      <span className="font-medium">
+                        {getLanguageInfo(currentLocale).nativeName}
+                      </span>
+                    </div>
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {supportedLocales.map(locale => {
+                    const langInfo = getLanguageInfo(locale);
+                    return (
+                      <SelectItem key={locale} value={locale}>
+                        <div className="flex w-full items-center justify-between">
+                          <span className="font-medium">
+                            {langInfo.nativeName}
+                          </span>
+                          <span className="ml-2 text-xs opacity-60">
+                            {langInfo.code}
+                          </span>
+                        </div>
+                      </SelectItem>
+                    );
+                  })}
+                </SelectContent>
+              </Select>
+            </div>
 
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.mission')}
-        </label>
-        <textarea
-          value={currentTranslation.mission?.description || ''}
-          onChange={e =>
-            handleFieldChange('mission.description', e.target.value)
-          }
-          rows={4}
-          className={cn(
-            'w-full resize-none rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
-          )}
-        />
-      </div>
+            {/* Status Badges */}
+            <div className="flex items-center gap-2">
+              {isDirty && <Badge variant="secondary">Unsaved</Badge>}
+              <Badge variant="outline">
+                {pageContent.sections.length} sections
+              </Badge>
+            </div>
+          </div>
 
-      <div>
-        <div className="mb-3 flex items-center justify-between">
-          <label
-            className={cn(
-              'block text-sm font-medium',
-              isDark ? 'text-stone-300' : 'text-stone-700'
-            )}
-          >
-            {t('about.values')}
-          </label>
-          <button
-            onClick={addValueCard}
-            className={cn(
-              'rounded p-1 transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-300 hover:bg-stone-600'
-                : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
-            )}
-          >
-            <Plus className="h-4 w-4" />
-          </button>
-        </div>
+          {/* Action Buttons */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={undo}
+                disabled={undoStack.length === 0}
+              >
+                <Undo2 className="mr-2 h-4 w-4" />
+                Undo
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={redo}
+                disabled={redoStack.length === 0}
+              >
+                <Redo2 className="mr-2 h-4 w-4" />
+                Redo
+              </Button>
+              <Separator orientation="vertical" className="h-8" />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => addSection('single-column')}
+              >
+                <Plus className="mr-2 h-4 w-4" />
+                Add Section
+              </Button>
+            </div>
 
-        <div className="space-y-4">
-          {(currentTranslation.values?.items || []).map(
-            (card: ValueItem, index: number) => (
-              <div
-                key={index}
-                className={cn(
-                  'rounded-lg border p-4',
-                  isDark ? 'border-stone-600' : 'border-stone-200'
-                )}
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleReset}
+                disabled={!isDirty}
               >
-                <div className="flex items-center justify-between">
-                  <p
-                    className={cn(
-                      'text-sm font-medium',
-                      isDark ? 'text-stone-300' : 'text-stone-700'
-                    )}
-                  >
-                    {t('common.cardNumber', { number: index + 1 })}
-                  </p>
-                  <button
-                    onClick={() => removeValueCard(index)}
-                    className={cn(
-                      'rounded p-1 text-red-500 transition-colors',
-                      isDark ? 'hover:bg-red-900/50' : 'hover:bg-red-100'
-                    )}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
+                <RotateCcw className="mr-2 h-4 w-4" />
+                Reset
+              </Button>
+              <Button onClick={handleSave} disabled={!isDirty}>
+                <Save className="mr-2 h-4 w-4" />
+                Save
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex min-h-0 flex-1">
+          {/* Left Panel - Components & Properties */}
+          <div className="bg-background w-80 space-y-6 overflow-y-auto border-r p-4">
+            {/* Component Palette */}
+            <ComponentPalette />
+
+            {/* Property Editor */}
+            <PropertyEditor
+              component={selectedComponent}
+              onPropsChange={handlePropsChange}
+              onDeleteComponent={handleDeleteComponent}
+            />
+          </div>
+
+          {/* Right Panel - Canvas */}
+          <div className="flex-1 overflow-y-auto">
+            <div className="space-y-6 p-6">
+              {pageContent.sections.map((section, sectionIndex) => (
+                <div key={section.id} className="space-y-4">
+                  {/* Section Drop Zone (before each section) */}
+                  {sectionIndex > 0 && (
+                    <StrictModeDroppable
+                      droppableId={`section-drop-${sectionIndex}`}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          {...provided.droppableProps}
+                          ref={provided.innerRef}
+                          className={cn(
+                            'rounded-lg border-2 border-dashed transition-all duration-200',
+                            snapshot.isDraggingOver
+                              ? 'h-16 border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-950'
+                              : 'h-2 border-transparent'
+                          )}
+                        >
+                          {snapshot.isDraggingOver && (
+                            <div className="flex h-full items-center justify-center text-sm font-medium text-blue-600 dark:text-blue-400">
+                              Drop here to create new section
+                            </div>
+                          )}
+                          {provided.placeholder}
+                        </div>
+                      )}
+                    </StrictModeDroppable>
+                  )}
+
+                  {/* Section Content */}
+                  <Card className="border">
+                    <CardHeader className="pb-3">
+                      <div className="flex items-center justify-between">
+                        <CardTitle className="text-muted-foreground text-sm">
+                          Section {sectionIndex + 1} • {section.layout}
+                        </CardTitle>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => {
+                            // Delete section logic here
+                          }}
+                          className="text-destructive hover:text-destructive h-6 w-6 p-0"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div
+                        className={cn(
+                          'grid gap-4',
+                          section.layout === 'single-column' && 'grid-cols-1',
+                          section.layout === 'two-column' && 'grid-cols-2',
+                          section.layout === 'three-column' && 'grid-cols-3'
+                        )}
+                      >
+                        {section.columns.map((column, columnIndex) => (
+                          <StrictModeDroppable
+                            key={`${section.id}-${columnIndex}`}
+                            droppableId={`section-${section.id}-${columnIndex}`}
+                          >
+                            {(provided, snapshot) => (
+                              <div
+                                {...provided.droppableProps}
+                                ref={provided.innerRef}
+                                className={cn(
+                                  'min-h-24 rounded-lg border-2 border-dashed p-3 transition-colors',
+                                  snapshot.isDraggingOver
+                                    ? 'border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-950'
+                                    : 'border-border bg-muted/30'
+                                )}
+                              >
+                                {column.length === 0 &&
+                                  !snapshot.isDraggingOver && (
+                                    <div className="text-muted-foreground flex h-16 items-center justify-center text-sm">
+                                      Drop components here
+                                    </div>
+                                  )}
+
+                                {column.map((component, componentIndex) => (
+                                  <Draggable
+                                    key={component.id}
+                                    draggableId={component.id}
+                                    index={componentIndex}
+                                  >
+                                    {(provided, snapshot) => (
+                                      <div
+                                        ref={provided.innerRef}
+                                        {...provided.draggableProps}
+                                        {...provided.dragHandleProps}
+                                        onClick={() =>
+                                          handleComponentClick(component.id)
+                                        }
+                                        className={cn(
+                                          'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                          selectedComponentId === component.id
+                                            ? 'border-blue-500 bg-blue-50 dark:bg-blue-950'
+                                            : 'border-border bg-card hover:border-blue-200 hover:bg-blue-50/50',
+                                          snapshot.isDragging &&
+                                            'rotate-2 shadow-lg'
+                                        )}
+                                      >
+                                        <ComponentRenderer
+                                          component={component}
+                                        />
+                                      </div>
+                                    )}
+                                  </Draggable>
+                                ))}
+                                {provided.placeholder}
+                              </div>
+                            )}
+                          </StrictModeDroppable>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
                 </div>
+              ))}
 
-                <div className="mt-4 space-y-3">
-                  <input
-                    type="text"
-                    placeholder={t('about.valueTitle')}
-                    value={card.title}
-                    onChange={e =>
-                      handleValueCardChange(index, 'title', e.target.value)
-                    }
+              {/* Final Drop Zone */}
+              <StrictModeDroppable droppableId="section-drop-final">
+                {(provided, snapshot) => (
+                  <div
+                    {...provided.droppableProps}
+                    ref={provided.innerRef}
                     className={cn(
-                      'w-full rounded-md border px-3 py-1.5 text-sm',
-                      isDark
-                        ? 'border-stone-500 bg-stone-600 text-stone-100'
-                        : 'border-stone-300 bg-white text-stone-900'
+                      'rounded-lg border-2 border-dashed transition-all duration-200',
+                      snapshot.isDraggingOver
+                        ? 'h-16 border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-950'
+                        : 'h-8 border-transparent'
                     )}
-                  />
-                  <textarea
-                    placeholder={t('about.valueDescription')}
-                    value={card.description}
-                    onChange={e =>
-                      handleValueCardChange(
-                        index,
-                        'description',
-                        e.target.value
-                      )
-                    }
-                    rows={3}
-                    className={cn(
-                      'w-full resize-none rounded-md border px-3 py-1.5 text-sm',
-                      isDark
-                        ? 'border-stone-500 bg-stone-600 text-stone-100'
-                        : 'border-stone-300 bg-white text-stone-900'
+                  >
+                    {snapshot.isDraggingOver && (
+                      <div className="flex h-full items-center justify-center text-sm font-medium text-blue-600 dark:text-blue-400">
+                        Drop here to create new section
+                      </div>
                     )}
-                  />
-                </div>
-              </div>
-            )
-          )}
-        </div>
-      </div>
-
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.buttonText')}
-        </label>
-        <input
-          type="text"
-          value={currentTranslation.buttonText || ''}
-          onChange={e => handleFieldChange('buttonText', e.target.value)}
-          className={cn(
-            'w-full rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
-          )}
-        />
-      </div>
-
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.copyright')}
-        </label>
-        <div className="space-y-3">
-          <input
-            type="text"
-            placeholder={t('about.copyrightPrefix')}
-            value={currentTranslation.copyright?.prefix || ''}
-            onChange={e =>
-              handleFieldChange('copyright.prefix', e.target.value)
-            }
-            className={cn(
-              'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
-            )}
-          />
-          <input
-            type="text"
-            placeholder={t('about.copyrightLinkText')}
-            value={currentTranslation.copyright?.linkText || ''}
-            onChange={e =>
-              handleFieldChange('copyright.linkText', e.target.value)
-            }
-            className={cn(
-              'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
-            )}
-          />
-          <input
-            type="text"
-            placeholder={t('about.copyrightSuffix')}
-            value={currentTranslation.copyright?.suffix || ''}
-            onChange={e =>
-              handleFieldChange('copyright.suffix', e.target.value)
-            }
-            className={cn(
-              'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
-            )}
-          />
+                    {provided.placeholder}
+                  </div>
+                )}
+              </StrictModeDroppable>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    </DragDropContext>
   );
 }
diff --git a/components/admin/content/about-preview.tsx b/components/admin/content/about-preview.tsx
index 932ec01d..a5034ebd 100644
--- a/components/admin/content/about-preview.tsx
+++ b/components/admin/content/about-preview.tsx
@@ -1,163 +1,140 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
+import {
+  AboutTranslationData,
+  PageContent,
+  isDynamicFormat,
+  migrateAboutTranslationData,
+} from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
 
 import React from 'react';
 
-export interface ValueCard {
-  id: string;
-  title: string;
-  description: string;
-}
-
-export interface AboutPageConfig {
-  title: string;
-  subtitle: string;
-  mission: string;
-  valueCards: ValueCard[];
-  buttonText: string;
-  copyrightText: string;
-}
+import ComponentRenderer from './component-renderer';
 
 interface AboutPreviewProps {
-  config: AboutPageConfig;
+  /**
+   * Translation data for the about page
+   * Can be either legacy or dynamic format
+   */
+  translation: AboutTranslationData;
+  /**
+   * Preview device type for responsive preview
+   */
   previewDevice: 'desktop' | 'tablet' | 'mobile';
 }
 
-export function AboutPreview({ config, previewDevice }: AboutPreviewProps) {
-  const { isDark } = useTheme();
-
-  const getColors = () => {
-    if (isDark) {
-      return {
-        titleGradient: 'from-stone-300 to-stone-500',
-        textColor: 'text-gray-300',
-        headingColor: 'text-gray-100',
-        paragraphColor: 'text-gray-400',
-        cardBg: 'bg-stone-700',
-        cardBorder: 'border-stone-600',
-        cardShadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.3)]',
-        cardHeadingColor: 'text-stone-300',
-        cardTextColor: 'text-gray-400',
-        buttonClass:
-          'bg-stone-600 hover:bg-stone-500 text-gray-100 cursor-pointer hover:scale-105',
-      };
-    } else {
-      return {
-        titleGradient: 'from-stone-700 to-stone-900',
-        textColor: 'text-stone-700',
-        headingColor: 'text-stone-800',
-        paragraphColor: 'text-stone-600',
-        cardBg: 'bg-stone-100',
-        cardBorder: 'border-stone-200',
-        cardShadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.1)]',
-        cardHeadingColor: 'text-stone-700',
-        cardTextColor: 'text-stone-600',
-        buttonClass:
-          'bg-stone-800 hover:bg-stone-700 text-gray-100 cursor-pointer hover:scale-105',
-      };
+/**
+ * About Page Preview Component
+ *
+ * Displays a preview of the about page with responsive device frames
+ * Supports both legacy and dynamic component formats
+ */
+export function AboutPreview({
+  translation,
+  previewDevice,
+}: AboutPreviewProps) {
+  // Ensure translation is in dynamic format
+  const dynamicTranslation = React.useMemo(() => {
+    if (!isDynamicFormat(translation)) {
+      return migrateAboutTranslationData(translation);
     }
-  };
-
-  const colors = getColors();
-
+    return translation;
+  }, [translation]);
+
+  // Create page content from translation
+  const pageContent: PageContent = React.useMemo(() => {
+    return {
+      sections: dynamicTranslation.sections || [],
+      metadata: dynamicTranslation.metadata || {
+        version: '1.0.0',
+        lastModified: new Date().toISOString(),
+        author: 'preview',
+      },
+    };
+  }, [dynamicTranslation]);
+
+  /**
+   * Get device-specific container styles
+   */
   const getDeviceStyles = () => {
     switch (previewDevice) {
       case 'mobile':
         return {
           container: 'mx-auto bg-black rounded-[2rem] p-2 shadow-2xl',
           screen:
-            'w-[375px] h-[667px] bg-white rounded-[1.75rem] overflow-hidden relative',
+            'w-[375px] h-[667px] bg-white dark:bg-gray-900 rounded-[1.75rem] overflow-hidden relative',
           content: 'h-full overflow-y-auto',
           mainClass: 'min-h-full w-full py-4 px-4',
           innerContainer: 'w-full',
+          maxWidth: 'max-w-none',
         };
       case 'tablet':
         return {
-          container: 'mx-auto bg-black rounded-xl p-3 shadow-2xl mt-50',
+          container: 'mx-auto bg-black rounded-xl p-3 shadow-2xl',
           screen:
-            'w-[768px] h-[1024px] bg-white rounded-lg overflow-hidden relative',
+            'w-[768px] h-[1024px] bg-white dark:bg-gray-900 rounded-lg overflow-hidden relative',
           content: 'h-full overflow-y-auto',
           mainClass: 'min-h-full w-full py-6 px-6',
           innerContainer: 'max-w-2xl mx-auto',
+          maxWidth: 'max-w-2xl',
         };
       case 'desktop':
       default:
         return {
           container: 'w-full h-full',
-          screen: 'w-full h-full overflow-hidden relative',
+          screen: 'w-full h-full overflow-hidden relative bg-background',
           content: 'h-full overflow-y-auto',
           mainClass:
             'min-h-screen w-full py-6 px-4 sm:px-6 lg:px-8 overflow-x-hidden',
           innerContainer: 'max-w-5xl mx-auto',
+          maxWidth: 'max-w-5xl',
         };
     }
   };
 
   const deviceStyles = getDeviceStyles();
 
-  const getResponsiveClasses = () => {
-    switch (previewDevice) {
-      case 'mobile':
-        return {
-          title: 'text-3xl font-bold mb-4 leading-tight py-1',
-          subtitle: 'text-base font-light',
-          missionTitle: 'text-xl font-bold mb-4',
-          missionContent: 'text-sm',
-          valuesTitle: 'text-xl font-bold mb-4',
-          cardTitle: 'text-base font-semibold mb-2',
-          cardContent: 'text-sm',
-          button: 'px-6 py-2 text-sm font-medium rounded-lg',
-          copyright: 'text-xs',
-          spacing: {
-            section: 'mb-6',
-            missionPadding: 'p-4',
-            cardPadding: 'p-4',
-            cardGap: 'gap-4',
-          },
-        };
-      case 'tablet':
-        return {
-          title: 'text-4xl md:text-4xl font-bold mb-4 leading-tight py-1',
-          subtitle: 'text-lg font-light',
-          missionTitle: 'text-2xl font-bold mb-4',
-          missionContent: 'text-base',
-          valuesTitle: 'text-2xl font-bold mb-4',
-          cardTitle: 'text-lg font-semibold mb-2',
-          cardContent: 'text-sm',
-          button: 'px-6 py-2.5 text-base font-medium rounded-lg',
-          copyright: 'text-sm',
-          spacing: {
-            section: 'mb-8',
-            missionPadding: 'p-6',
-            cardPadding: 'p-5',
-            cardGap: 'gap-5',
-          },
-        };
-      case 'desktop':
-      default:
-        return {
-          title: 'text-4xl md:text-5xl font-bold mb-6 leading-tight py-2',
-          subtitle: 'text-xl font-light',
-          missionTitle: 'text-2xl font-bold mb-6',
-          missionContent: 'text-lg',
-          valuesTitle: 'text-2xl font-bold mb-6',
-          cardTitle: 'text-lg font-semibold mb-2',
-          cardContent: '',
-          button: 'px-8 py-3 text-base font-medium rounded-lg',
-          copyright: 'text-sm',
-          spacing: {
-            section: 'mb-10',
-            missionPadding: '',
-            cardPadding: 'p-6',
-            cardGap: 'gap-6',
-          },
-        };
+  /**
+   * Render page sections with responsive layout
+   */
+  const renderSections = () => {
+    if (!pageContent.sections || pageContent.sections.length === 0) {
+      return (
+        <div className="text-muted-foreground flex h-64 items-center justify-center">
+          <p>No content to preview</p>
+        </div>
+      );
     }
-  };
 
-  const responsive = getResponsiveClasses();
+    return (
+      <div className="space-y-8 md:space-y-12">
+        {pageContent.sections.map(section => (
+          <section key={section.id} className="w-full">
+            <div
+              className={cn(
+                'grid gap-4 md:gap-6',
+                section.layout === 'single-column' && 'grid-cols-1',
+                section.layout === 'two-column' && 'grid-cols-1 md:grid-cols-2',
+                section.layout === 'three-column' &&
+                  'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+              )}
+            >
+              {section.columns.map((column, columnIndex) => (
+                <div key={columnIndex} className="space-y-4">
+                  {column.map(component => (
+                    <div key={component.id}>
+                      <ComponentRenderer component={component} />
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    );
+  };
 
   return (
     <div
@@ -167,122 +144,11 @@ export function AboutPreview({ config, previewDevice }: AboutPreviewProps) {
       )}
     >
       <div className={deviceStyles.container}>
-        <div
-          className={cn(
-            deviceStyles.screen,
-            previewDevice === 'desktop'
-              ? isDark
-                ? 'bg-stone-900'
-                : 'bg-stone-50'
-              : isDark
-                ? 'bg-stone-800'
-                : 'bg-white'
-          )}
-        >
+        <div className={deviceStyles.screen}>
           <div className={deviceStyles.content}>
             <main className={deviceStyles.mainClass}>
               <div className={deviceStyles.innerContainer}>
-                <section
-                  className={cn('text-center', responsive.spacing.section)}
-                >
-                  <h1
-                    className={cn(
-                      responsive.title,
-                      `bg-gradient-to-r ${colors.titleGradient} bg-clip-text text-transparent`
-                    )}
-                  >
-                    {config.title}
-                  </h1>
-                  <p
-                    className={cn(
-                      responsive.subtitle,
-                      colors.textColor,
-                      'mx-auto max-w-3xl'
-                    )}
-                  >
-                    {config.subtitle}
-                  </p>
-                </section>
-
-                <section className={responsive.spacing.section}>
-                  <p
-                    className={cn(
-                      responsive.missionContent,
-                      colors.paragraphColor
-                    )}
-                  >
-                    {config.mission}
-                  </p>
-                </section>
-
-                <section className={responsive.spacing.section}>
-                  <div
-                    className={cn(
-                      'grid',
-                      previewDevice === 'mobile'
-                        ? 'grid-cols-1'
-                        : previewDevice === 'tablet'
-                          ? 'grid-cols-1 sm:grid-cols-2'
-                          : 'grid-cols-1 md:grid-cols-2',
-                      responsive.spacing.cardGap
-                    )}
-                  >
-                    {config.valueCards.map(value => (
-                      <div
-                        key={value.id}
-                        className={cn(
-                          colors.cardBg,
-                          colors.cardShadow,
-                          'border',
-                          colors.cardBorder,
-                          'rounded-xl',
-                          responsive.spacing.cardPadding
-                        )}
-                      >
-                        <h3
-                          className={cn(
-                            responsive.cardTitle,
-                            colors.cardHeadingColor
-                          )}
-                        >
-                          {value.title}
-                        </h3>
-                        <p
-                          className={cn(
-                            responsive.cardContent,
-                            colors.cardTextColor
-                          )}
-                        >
-                          {value.description}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </section>
-
-                <section
-                  className={cn('text-center', responsive.spacing.section)}
-                >
-                  <button
-                    className={cn(
-                      responsive.button,
-                      colors.buttonClass,
-                      'h-auto transition-all duration-200'
-                    )}
-                  >
-                    {config.buttonText}
-                  </button>
-                </section>
-
-                <div
-                  className={cn(
-                    'text-center',
-                    colors.textColor,
-                    responsive.copyright
-                  )}
-                >
-                  <p>{config.copyrightText}</p>
-                </div>
+                {renderSections()}
               </div>
             </main>
           </div>
@@ -291,3 +157,60 @@ export function AboutPreview({ config, previewDevice }: AboutPreviewProps) {
     </div>
   );
 }
+
+/**
+ * Legacy interface for backward compatibility
+ * This is for existing components that still use the old preview format
+ */
+export interface ValueCard {
+  id: string;
+  title: string;
+  description: string;
+}
+
+export interface AboutPageConfig {
+  title: string;
+  subtitle: string;
+  mission: string;
+  valueCards: ValueCard[];
+  buttonText: string;
+  copyrightText: string;
+}
+
+/**
+ * Legacy preview component for backward compatibility
+ * @deprecated Use AboutPreview with dynamic translation data instead
+ */
+export function LegacyAboutPreview({
+  config,
+  previewDevice,
+}: {
+  config: AboutPageConfig;
+  previewDevice: 'desktop' | 'tablet' | 'mobile';
+}) {
+  // Convert legacy config to new format
+  const legacyTranslation: AboutTranslationData = {
+    title: config.title,
+    subtitle: config.subtitle,
+    mission: { description: config.mission },
+    values: {
+      items: config.valueCards.map(card => ({
+        title: card.title,
+        description: card.description,
+      })),
+    },
+    buttonText: config.buttonText,
+    copyright: {
+      prefix: config.copyrightText,
+      linkText: '',
+      suffix: '',
+    },
+  };
+
+  return (
+    <AboutPreview
+      translation={legacyTranslation}
+      previewDevice={previewDevice}
+    />
+  );
+}
diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
new file mode 100644
index 00000000..ad7acf6e
--- /dev/null
+++ b/components/admin/content/component-palette.tsx
@@ -0,0 +1,227 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { ComponentType } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import {
+  AlignLeft,
+  Grid3x3,
+  Image as ImageIcon,
+  Minus,
+  MousePointer,
+  Palette,
+  Type,
+} from 'lucide-react';
+import { Draggable } from 'react-beautiful-dnd';
+
+import React from 'react';
+
+import StrictModeDroppable from './strict-mode-droppable';
+
+/**
+ * Available component definitions for the palette
+ */
+interface ComponentDefinition {
+  type: ComponentType;
+  name: string;
+  icon: React.ReactNode;
+  description: string;
+  defaultProps: Record<string, unknown>;
+  category: 'basic' | 'content' | 'media' | 'layout';
+}
+
+const availableComponents: ComponentDefinition[] = [
+  {
+    type: 'heading',
+    name: 'Heading',
+    icon: <Type className="h-4 w-4" />,
+    description: 'Add headings (H1-H6)',
+    defaultProps: {
+      content: 'New Heading',
+      level: 2,
+      textAlign: 'left',
+    },
+    category: 'basic',
+  },
+  {
+    type: 'paragraph',
+    name: 'Paragraph',
+    icon: <AlignLeft className="h-4 w-4" />,
+    description: 'Add paragraph text',
+    defaultProps: {
+      content: 'New paragraph text.',
+      textAlign: 'left',
+    },
+    category: 'basic',
+  },
+  {
+    type: 'button',
+    name: 'Button',
+    icon: <MousePointer className="h-4 w-4" />,
+    description: 'Interactive button',
+    defaultProps: {
+      text: 'Click me',
+      variant: 'primary',
+      action: 'link',
+      url: '#',
+    },
+    category: 'content',
+  },
+  {
+    type: 'cards',
+    name: 'Cards',
+    icon: <Grid3x3 className="h-4 w-4" />,
+    description: 'Grid or list of cards',
+    defaultProps: {
+      layout: 'grid',
+      items: [
+        { title: 'Card 1', description: 'Description for card 1' },
+        { title: 'Card 2', description: 'Description for card 2' },
+      ],
+    },
+    category: 'content',
+  },
+  {
+    type: 'image',
+    name: 'Image',
+    icon: <ImageIcon className="h-4 w-4" />,
+    description: 'Add images with captions',
+    defaultProps: {
+      src: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=400&h=200&fit=crop',
+      alt: 'Placeholder Image',
+      caption: '',
+      alignment: 'center',
+      width: 'auto',
+      height: 'auto',
+    },
+    category: 'media',
+  },
+  {
+    type: 'divider',
+    name: 'Divider',
+    icon: <Minus className="h-4 w-4" />,
+    description: 'Horizontal divider line',
+    defaultProps: {
+      style: 'solid',
+      thickness: 'thin',
+      color: 'gray',
+    },
+    category: 'layout',
+  },
+];
+
+/**
+ * Component categories for organization
+ */
+const categories = [
+  { id: 'basic' as const, name: 'Basic', icon: <Type className="h-4 w-4" /> },
+  {
+    id: 'content' as const,
+    name: 'Content',
+    icon: <Grid3x3 className="h-4 w-4" />,
+  },
+  {
+    id: 'media' as const,
+    name: 'Media',
+    icon: <ImageIcon className="h-4 w-4" />,
+  },
+  {
+    id: 'layout' as const,
+    name: 'Layout',
+    icon: <Palette className="h-4 w-4" />,
+  },
+];
+
+interface ComponentPaletteProps {
+  className?: string;
+}
+
+/**
+ * Component Palette
+ *
+ * Displays available components that can be dragged to the editor
+ */
+const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
+  return (
+    <Card className={cn('h-full', className)}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Palette className="h-5 w-5" />
+          Components
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <StrictModeDroppable
+          droppableId="component-palette"
+          isDropDisabled={true}
+        >
+          {provided => (
+            <div
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+              className="space-y-6 px-4 pb-4"
+            >
+              {categories.map(category => {
+                const categoryComponents = availableComponents.filter(
+                  comp => comp.category === category.id
+                );
+
+                if (categoryComponents.length === 0) return null;
+
+                return (
+                  <div key={category.id} className="space-y-2">
+                    <h3 className="text-muted-foreground flex items-center gap-2 text-sm font-medium">
+                      {category.icon}
+                      {category.name}
+                    </h3>
+                    <div className="space-y-2">
+                      {categoryComponents.map(comp => {
+                        const globalIndex = availableComponents.indexOf(comp);
+
+                        return (
+                          <Draggable
+                            key={comp.type}
+                            draggableId={comp.type}
+                            index={globalIndex}
+                          >
+                            {(provided, snapshot) => (
+                              <div
+                                ref={provided.innerRef}
+                                {...provided.draggableProps}
+                                {...provided.dragHandleProps}
+                                className={cn(
+                                  'bg-card hover:bg-accent hover:text-accent-foreground flex cursor-grab items-center gap-3 rounded-md border p-3 transition-colors active:cursor-grabbing',
+                                  snapshot.isDragging && 'opacity-50 shadow-lg'
+                                )}
+                              >
+                                <div className="text-muted-foreground flex-shrink-0">
+                                  {comp.icon}
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                  <p className="truncate text-sm font-medium">
+                                    {comp.name}
+                                  </p>
+                                  <p className="text-muted-foreground truncate text-xs">
+                                    {comp.description}
+                                  </p>
+                                </div>
+                              </div>
+                            )}
+                          </Draggable>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+              {provided.placeholder}
+            </div>
+          )}
+        </StrictModeDroppable>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ComponentPalette;
+export { availableComponents };
diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
new file mode 100644
index 00000000..d8bc14b3
--- /dev/null
+++ b/components/admin/content/component-renderer.tsx
@@ -0,0 +1,254 @@
+'use client';
+
+import { Button } from '@components/ui/button';
+import {
+  CardsProps,
+  ComponentInstance,
+  DividerProps,
+  ButtonProps as DynamicButtonProps,
+  HeadingProps,
+  ImageProps,
+  ParagraphProps,
+} from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+
+import React from 'react';
+
+/**
+ * Heading component renderer
+ *
+ * Renders heading elements with proper styling and alignment
+ */
+const Heading: React.FC<HeadingProps> = ({ content, level, textAlign }) => {
+  const textAlignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  const alignmentClass = textAlignClasses[textAlign];
+
+  // Define font sizes for different heading levels with responsive design
+  const sizeClasses = {
+    1: 'text-3xl sm:text-4xl md:text-5xl',
+    2: 'text-2xl sm:text-3xl md:text-4xl',
+    3: 'text-xl sm:text-2xl md:text-3xl',
+    4: 'text-lg sm:text-xl md:text-2xl',
+    5: 'text-base sm:text-lg md:text-xl',
+    6: 'text-sm sm:text-base md:text-lg',
+  };
+
+  return React.createElement(
+    `h${level}`,
+    {
+      className: cn(
+        'text-foreground mb-4 font-bold sm:mb-6',
+        sizeClasses[level],
+        alignmentClass
+      ),
+    },
+    content
+  );
+};
+
+/**
+ * Paragraph component renderer
+ *
+ * Renders paragraph text with proper styling and alignment
+ */
+const Paragraph: React.FC<ParagraphProps> = ({ content, textAlign }) => {
+  const textAlignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  return (
+    <p
+      className={cn(
+        'text-foreground/80 mb-4 text-sm leading-relaxed sm:text-base lg:text-lg',
+        textAlignClasses[textAlign]
+      )}
+    >
+      {content}
+    </p>
+  );
+};
+
+/**
+ * Cards component renderer
+ *
+ * Renders a grid or list of cards with title and description
+ */
+const Cards: React.FC<CardsProps> = ({ items, layout }) => {
+  const gridClass = layout === 'grid' ? 'md:grid-cols-2' : 'grid-cols-1';
+
+  return (
+    <div className={cn('mb-6 grid grid-cols-1 gap-4 sm:gap-6', gridClass)}>
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className="border-border bg-card rounded-xl border p-4 shadow-sm transition-shadow duration-200 hover:shadow-md sm:p-6"
+        >
+          <h3 className="text-card-foreground mb-2 text-base font-semibold sm:text-lg">
+            {item.title}
+          </h3>
+          <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
+            {item.description}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Button component renderer
+ *
+ * Renders interactive buttons with different variants
+ */
+const DynamicButton: React.FC<DynamicButtonProps> = ({
+  text,
+  variant,
+  action,
+  url,
+}) => {
+  const handleClick = (e: React.MouseEvent) => {
+    if (action === 'link' && url === '#') {
+      e.preventDefault();
+      // In preview mode, prevent default action
+    }
+  };
+
+  const variantMap = {
+    primary: 'default' as const,
+    secondary: 'secondary' as const,
+    outline: 'outline' as const,
+  };
+
+  return (
+    <div className="mb-6 text-center">
+      <Button variant={variantMap[variant]} size="lg" asChild>
+        <a href={url || '#'} onClick={handleClick} className="inline-block">
+          {text}
+        </a>
+      </Button>
+    </div>
+  );
+};
+
+/**
+ * Image component renderer
+ *
+ * Renders images with captions and alignment
+ */
+const Image: React.FC<ImageProps> = ({
+  src,
+  alt,
+  caption,
+  alignment,
+  width,
+  height,
+}) => {
+  const alignmentClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  const imageStyle: React.CSSProperties = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+    maxWidth: '100%',
+  };
+
+  return (
+    <div className={cn('mb-6', alignmentClasses[alignment])}>
+      <img
+        src={src}
+        alt={alt}
+        style={imageStyle}
+        className="rounded-lg shadow-sm"
+      />
+      {caption && (
+        <p className="text-muted-foreground mt-2 text-sm italic">{caption}</p>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Divider component renderer
+ *
+ * Renders horizontal dividers with different styles
+ */
+const Divider: React.FC<DividerProps> = ({ style, thickness, color }) => {
+  let borderStyle = 'border-solid';
+  if (style === 'dashed') borderStyle = 'border-dashed';
+  if (style === 'dotted') borderStyle = 'border-dotted';
+
+  let borderThickness = 'border-t';
+  if (thickness === 'medium') borderThickness = 'border-t-2';
+  if (thickness === 'thick') borderThickness = 'border-t-4';
+
+  const borderColor = color ? `border-${color}-300` : 'border-border';
+
+  return (
+    <hr className={cn(borderStyle, borderThickness, borderColor, 'my-6')} />
+  );
+};
+
+/**
+ * Component type to React component mapping
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const componentMap: Record<string, React.FC<any>> = {
+  heading: Heading,
+  paragraph: Paragraph,
+  cards: Cards,
+  button: DynamicButton,
+  image: Image,
+  divider: Divider,
+};
+
+/**
+ * Main component renderer
+ *
+ * Dynamically renders components based on their type
+ */
+interface ComponentRendererProps {
+  component: ComponentInstance;
+  className?: string;
+}
+
+const ComponentRenderer: React.FC<ComponentRendererProps> = ({
+  component,
+  className,
+}) => {
+  const Component = componentMap[component.type];
+
+  if (!Component) {
+    // Fallback for unregistered components
+    return (
+      <div
+        className={cn(
+          'border-destructive/50 bg-destructive/10 text-destructive rounded-lg border p-4 text-center',
+          className
+        )}
+      >
+        <p className="font-medium">
+          Component type &quot;{component.type}&quot; not found.
+        </p>
+        <p className="text-sm">Please check the component registration.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <Component {...component.props} />
+    </div>
+  );
+};
+
+export default ComponentRenderer;
diff --git a/components/admin/content/property-editor.tsx b/components/admin/content/property-editor.tsx
new file mode 100644
index 00000000..48fd9a1f
--- /dev/null
+++ b/components/admin/content/property-editor.tsx
@@ -0,0 +1,320 @@
+'use client';
+
+import { Button } from '@components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Input } from '@components/ui/input';
+import { Label } from '@components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@components/ui/select';
+import { Textarea } from '@components/ui/textarea';
+import { ComponentInstance } from '@lib/types/about-page-components';
+import { Plus, Trash2 } from 'lucide-react';
+
+import React from 'react';
+
+interface PropertyEditorProps {
+  component: ComponentInstance | null;
+  onPropsChange: (newProps: Record<string, unknown>) => void;
+  onDeleteComponent?: () => void;
+}
+
+/**
+ * Array Property Editor Component
+ *
+ * Handles editing of array properties like cards items
+ */
+interface ArrayPropertyEditorProps {
+  items: Array<Record<string, unknown>>;
+  onItemsChange: (newItems: Array<Record<string, unknown>>) => void;
+}
+
+const ArrayPropertyEditor: React.FC<ArrayPropertyEditorProps> = ({
+  items,
+  onItemsChange,
+}) => {
+  const handleItemChange = (index: number, key: string, value: unknown) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [key]: value };
+    onItemsChange(newItems);
+  };
+
+  const handleAddItem = () => {
+    // Default structure for new card items
+    const newItem = {
+      title: 'New Item',
+      description: 'Add description here',
+    };
+    onItemsChange([...items, newItem]);
+  };
+
+  const handleRemoveItem = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index);
+    onItemsChange(newItems);
+  };
+
+  return (
+    <div className="space-y-3">
+      {items.map((item, index) => (
+        <Card key={index} className="border">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm">Item {index + 1}</CardTitle>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => handleRemoveItem(index)}
+                className="text-destructive hover:text-destructive h-8 w-8 p-0"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {Object.entries(item).map(([key, value]) => (
+              <div key={key} className="space-y-2">
+                <Label
+                  htmlFor={`item-${index}-${key}`}
+                  className="text-sm capitalize"
+                >
+                  {key}
+                </Label>
+                <Textarea
+                  id={`item-${index}-${key}`}
+                  value={String(value || '')}
+                  onChange={e => handleItemChange(index, key, e.target.value)}
+                  className="min-h-[60px] text-sm"
+                  placeholder={`Enter ${key}`}
+                />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      ))}
+      <Button
+        type="button"
+        variant="outline"
+        onClick={handleAddItem}
+        className="w-full"
+      >
+        <Plus className="mr-2 h-4 w-4" />
+        Add Item
+      </Button>
+    </div>
+  );
+};
+
+/**
+ * Property Editor Component
+ *
+ * Main property editor that renders appropriate inputs based on component type and properties
+ */
+const PropertyEditor: React.FC<PropertyEditorProps> = ({
+  component,
+  onPropsChange,
+  onDeleteComponent,
+}) => {
+  if (!component) {
+    return (
+      <div className="text-muted-foreground flex h-32 items-center justify-center">
+        <p>Select a component to edit its properties</p>
+      </div>
+    );
+  }
+
+  const handleInputChange = (name: string, value: unknown) => {
+    onPropsChange({ ...component.props, [name]: value });
+  };
+
+  const renderPropertyField = (key: string, value: unknown) => {
+    const fieldId = `prop-${key}`;
+
+    // Array properties (cards items)
+    if (key === 'items' && component.type === 'cards') {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="capitalize">
+            {key}
+          </Label>
+          <ArrayPropertyEditor
+            items={value as Array<Record<string, unknown>>}
+            onItemsChange={newItems => handleInputChange(key, newItems)}
+          />
+        </div>
+      );
+    }
+
+    // Select fields
+    const selectFields: Record<
+      string,
+      Array<{ value: string; label: string }>
+    > = {
+      layout: [
+        { value: 'grid', label: 'Grid' },
+        { value: 'list', label: 'List' },
+      ],
+      thickness: [
+        { value: 'thin', label: 'Thin' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'thick', label: 'Thick' },
+      ],
+      style: [
+        { value: 'solid', label: 'Solid' },
+        { value: 'dashed', label: 'Dashed' },
+        { value: 'dotted', label: 'Dotted' },
+      ],
+      alignment: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+        { value: 'right', label: 'Right' },
+      ],
+      textAlign: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+        { value: 'right', label: 'Right' },
+      ],
+      action: [
+        { value: 'link', label: 'Link' },
+        { value: 'submit', label: 'Submit' },
+        { value: 'external', label: 'External' },
+      ],
+      variant: [
+        { value: 'primary', label: 'Primary' },
+        { value: 'secondary', label: 'Secondary' },
+        { value: 'outline', label: 'Outline' },
+      ],
+      level: [
+        { value: '1', label: 'H1' },
+        { value: '2', label: 'H2' },
+        { value: '3', label: 'H3' },
+        { value: '4', label: 'H4' },
+        { value: '5', label: 'H5' },
+        { value: '6', label: 'H6' },
+      ],
+    };
+
+    if (selectFields[key]) {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="capitalize">
+            {key}
+          </Label>
+          <Select
+            value={String(value || '')}
+            onValueChange={newValue =>
+              handleInputChange(
+                key,
+                key === 'level' ? Number(newValue) : newValue
+              )
+            }
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={`Select ${key}`} />
+            </SelectTrigger>
+            <SelectContent>
+              {selectFields[key].map(option => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      );
+    }
+
+    // Multi-line text fields
+    if (
+      key === 'content' &&
+      (component.type === 'paragraph' || component.type === 'heading')
+    ) {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="capitalize">
+            {key}
+          </Label>
+          <Textarea
+            id={fieldId}
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, e.target.value)}
+            placeholder={`Enter ${key}`}
+            className="min-h-[80px]"
+          />
+        </div>
+      );
+    }
+
+    // Number fields
+    if (typeof value === 'number') {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="capitalize">
+            {key}
+          </Label>
+          <Input
+            id={fieldId}
+            type="number"
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, Number(e.target.value) || 0)}
+            placeholder={`Enter ${key}`}
+          />
+        </div>
+      );
+    }
+
+    // String fields
+    if (typeof value === 'string') {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="capitalize">
+            {key}
+          </Label>
+          <Input
+            id={fieldId}
+            type="text"
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, e.target.value)}
+            placeholder={`Enter ${key}`}
+          />
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg capitalize">
+            {component.type} Properties
+          </CardTitle>
+          {onDeleteComponent && (
+            <Button
+              type="button"
+              variant="destructive"
+              size="sm"
+              onClick={onDeleteComponent}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Delete
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {Object.entries(component.props).map(([key, value]) =>
+          renderPropertyField(key, value)
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default PropertyEditor;
diff --git a/components/admin/content/strict-mode-droppable.tsx b/components/admin/content/strict-mode-droppable.tsx
new file mode 100644
index 00000000..41aaca95
--- /dev/null
+++ b/components/admin/content/strict-mode-droppable.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { Droppable, DroppableProps } from 'react-beautiful-dnd';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * StrictModeDroppable Component
+ *
+ * Wrapper around react-beautiful-dnd's Droppable component that works
+ * properly with React 18's StrictMode. Prevents hydration issues by
+ * deferring the rendering until after the initial render.
+ *
+ * This is necessary because react-beautiful-dnd was not designed for
+ * React 18's double-rendering in development mode.
+ */
+const StrictModeDroppable: React.FC<DroppableProps> = props => {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+
+  if (!enabled) {
+    return null;
+  }
+
+  return <Droppable {...props} />;
+};
+
+export default StrictModeDroppable;
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 00000000..eec50090
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { cn } from '@lib/utils';
+
+import * as React from 'react';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
new file mode 100644
index 00000000..52d9f16f
--- /dev/null
+++ b/lib/stores/about-editor-store.ts
@@ -0,0 +1,380 @@
+import { availableComponents } from '@components/admin/content/component-palette';
+import {
+  ComponentInstance,
+  PageContent,
+  createDefaultSection,
+  generateUniqueId,
+} from '@lib/types/about-page-components';
+import { DropResult } from 'react-beautiful-dnd';
+import { create } from 'zustand';
+
+/**
+ * About Editor State Interface
+ *
+ * Manages the state of the dynamic about page editor
+ */
+interface AboutEditorState {
+  // Current page content being edited
+  pageContent: PageContent | null;
+  // ID of the currently selected component
+  selectedComponentId: string | null;
+  // Undo stack for history management
+  undoStack: PageContent[];
+  // Redo stack for history management
+  redoStack: PageContent[];
+  // Whether there are unsaved changes
+  isDirty: boolean;
+  // Whether the editor is loading
+  isLoading: boolean;
+  // Current language being edited
+  currentLanguage: string;
+
+  // Actions
+  // Set the entire page content
+  setPageContent: (content: PageContent) => void;
+  // Set the currently selected component
+  setSelectedComponent: (id: string | null) => void;
+  // Update properties of a specific component
+  updateComponentProps: (id: string, props: Record<string, unknown>) => void;
+  // Add a new component to a specific section and column
+  addComponent: (
+    sectionId: string,
+    columnIndex: number,
+    component: ComponentInstance
+  ) => void;
+  // Delete a component by ID
+  deleteComponent: (id: string) => void;
+  // Handle drag and drop operations
+  handleDragEnd: (result: DropResult) => void;
+  // Create a new section
+  addSection: (
+    layout?: 'single-column' | 'two-column' | 'three-column'
+  ) => void;
+  // Delete a section by ID
+  deleteSection: (sectionId: string) => void;
+  // Undo last change
+  undo: () => void;
+  // Redo last undone change
+  redo: () => void;
+  // Set loading state
+  setLoading: (loading: boolean) => void;
+  // Set dirty state
+  setDirty: (dirty: boolean) => void;
+  // Set current language
+  setCurrentLanguage: (language: string) => void;
+  // Reset editor to initial state
+  reset: () => void;
+}
+
+/**
+ * About Editor Store
+ *
+ * Zustand store for managing the dynamic about page editor state
+ */
+export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
+  // Initial state
+  pageContent: null,
+  selectedComponentId: null,
+  undoStack: [],
+  redoStack: [],
+  isDirty: false,
+  isLoading: false,
+  currentLanguage: 'en-US',
+
+  // Set page content
+  setPageContent: (content: PageContent) => {
+    set({
+      pageContent: content,
+      selectedComponentId: null,
+      isDirty: false,
+    });
+  },
+
+  // Set selected component
+  setSelectedComponent: (id: string | null) => {
+    set({ selectedComponentId: id });
+  },
+
+  // Update component properties
+  updateComponentProps: (id: string, props: Record<string, unknown>) => {
+    const { pageContent } = get();
+    if (!pageContent) return;
+
+    // Create deep copy of page content
+    const newPageContent = JSON.parse(
+      JSON.stringify(pageContent)
+    ) as PageContent;
+
+    // Find and update the component
+    let updated = false;
+    for (const section of newPageContent.sections) {
+      for (const column of section.columns) {
+        const componentIndex = column.findIndex(comp => comp.id === id);
+        if (componentIndex !== -1) {
+          column[componentIndex].props = {
+            ...column[componentIndex].props,
+            ...props,
+          };
+          updated = true;
+          break;
+        }
+      }
+      if (updated) break;
+    }
+
+    if (updated) {
+      // Save current state to undo stack before updating
+      set(state => ({
+        pageContent: newPageContent,
+        undoStack: [...state.undoStack, pageContent].slice(-20), // Keep last 20 states
+        redoStack: [], // Clear redo stack on new change
+        isDirty: true,
+      }));
+    }
+  },
+
+  // Add component
+  addComponent: (
+    sectionId: string,
+    columnIndex: number,
+    component: ComponentInstance
+  ) => {
+    const state = get();
+    if (!state.pageContent) return;
+
+    const newPageContent = JSON.parse(
+      JSON.stringify(state.pageContent)
+    ) as PageContent;
+
+    const section = newPageContent.sections.find(s => s.id === sectionId);
+    if (section && section.columns[columnIndex]) {
+      section.columns[columnIndex].push(component);
+
+      // Save to undo stack
+      set(state => ({
+        pageContent: newPageContent,
+        undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+        redoStack: [],
+        isDirty: true,
+      }));
+    }
+  },
+
+  // Delete component
+  deleteComponent: (id: string) => {
+    const state = get();
+    if (!state.pageContent) return;
+
+    const newPageContent = JSON.parse(
+      JSON.stringify(state.pageContent)
+    ) as PageContent;
+    let deleted = false;
+
+    // Find and remove the component
+    for (const section of newPageContent.sections) {
+      for (const column of section.columns) {
+        const componentIndex = column.findIndex(comp => comp.id === id);
+        if (componentIndex !== -1) {
+          column.splice(componentIndex, 1);
+          deleted = true;
+          break;
+        }
+      }
+      if (deleted) break;
+    }
+
+    // Clean up empty sections
+    const cleanedSections = newPageContent.sections.filter(section =>
+      section.columns.some(column => column.length > 0)
+    );
+
+    if (deleted) {
+      set(state => ({
+        pageContent: { ...newPageContent, sections: cleanedSections },
+        undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+        redoStack: [],
+        selectedComponentId:
+          state.selectedComponentId === id ? null : state.selectedComponentId,
+        isDirty: true,
+      }));
+    }
+  },
+
+  // Handle drag and drop
+  handleDragEnd: (result: DropResult) => {
+    const { destination, source, draggableId } = result;
+
+    if (!destination) return;
+
+    const state = get();
+    if (!state.pageContent) return;
+
+    const newPageContent = JSON.parse(
+      JSON.stringify(state.pageContent)
+    ) as PageContent;
+
+    // Handle dragging from component palette
+    if (source.droppableId === 'component-palette') {
+      const componentDef = availableComponents.find(
+        comp => comp.type === draggableId
+      );
+      if (!componentDef) return;
+
+      // Parse destination
+      const [type, sectionId, columnIndex] = destination.droppableId.split('-');
+
+      if (type === 'section' && sectionId && columnIndex !== undefined) {
+        const section = newPageContent.sections.find(s => s.id === sectionId);
+        if (section && section.columns[parseInt(columnIndex)]) {
+          const newComponent: ComponentInstance = {
+            id: generateUniqueId('comp'),
+            type: componentDef.type,
+            props: { ...componentDef.defaultProps },
+          };
+
+          section.columns[parseInt(columnIndex)].splice(
+            destination.index,
+            0,
+            newComponent
+          );
+        }
+      }
+    } else {
+      // Handle moving existing components
+      const [sourceType, sourceSectionId, sourceColumnIndex] =
+        source.droppableId.split('-');
+      const [destType, destSectionId, destColumnIndex] =
+        destination.droppableId.split('-');
+
+      if (sourceType === 'section' && destType === 'section') {
+        const sourceSection = newPageContent.sections.find(
+          s => s.id === sourceSectionId
+        );
+        const destSection = newPageContent.sections.find(
+          s => s.id === destSectionId
+        );
+
+        if (sourceSection && destSection) {
+          const sourceColumn =
+            sourceSection.columns[parseInt(sourceColumnIndex)];
+          const destColumn = destSection.columns[parseInt(destColumnIndex)];
+
+          if (sourceColumn && destColumn) {
+            // Remove from source
+            const [removed] = sourceColumn.splice(source.index, 1);
+            // Add to destination
+            destColumn.splice(destination.index, 0, removed);
+          }
+        }
+      }
+    }
+
+    // Clean up empty sections
+    const cleanedSections = newPageContent.sections.filter(section =>
+      section.columns.some(column => column.length > 0)
+    );
+
+    // Save changes
+    set(state => ({
+      pageContent: { ...newPageContent, sections: cleanedSections },
+      undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+      redoStack: [],
+      isDirty: true,
+    }));
+  },
+
+  // Add new section
+  addSection: (layout = 'single-column') => {
+    const { pageContent } = get();
+    if (!pageContent) return;
+
+    const newSection = createDefaultSection(layout);
+    const newPageContent = {
+      ...pageContent,
+      sections: [...pageContent.sections, newSection],
+    };
+
+    set(state => ({
+      pageContent: newPageContent,
+      undoStack: [...state.undoStack, pageContent].slice(-20),
+      redoStack: [],
+      isDirty: true,
+    }));
+  },
+
+  // Delete section
+  deleteSection: (sectionId: string) => {
+    const { pageContent } = get();
+    if (!pageContent) return;
+
+    const newSections = pageContent.sections.filter(s => s.id !== sectionId);
+    const newPageContent = { ...pageContent, sections: newSections };
+
+    set(state => ({
+      pageContent: newPageContent,
+      undoStack: [...state.undoStack, pageContent].slice(-20),
+      redoStack: [],
+      isDirty: true,
+    }));
+  },
+
+  // Undo
+  undo: () => {
+    const state = get();
+    if (state.undoStack.length === 0 || !state.pageContent) return;
+
+    const previousState = state.undoStack[state.undoStack.length - 1];
+    const newUndoStack = state.undoStack.slice(0, -1);
+
+    set({
+      pageContent: previousState,
+      undoStack: newUndoStack,
+      redoStack: [state.pageContent, ...state.redoStack].slice(0, 20),
+      selectedComponentId: null,
+    });
+  },
+
+  // Redo
+  redo: () => {
+    const state = get();
+    if (state.redoStack.length === 0 || !state.pageContent) return;
+
+    const nextState = state.redoStack[0];
+    const newRedoStack = state.redoStack.slice(1);
+
+    set({
+      pageContent: nextState,
+      undoStack: [...state.undoStack, state.pageContent].slice(-20),
+      redoStack: newRedoStack,
+      selectedComponentId: null,
+    });
+  },
+
+  // Set loading state
+  setLoading: (loading: boolean) => {
+    set({ isLoading: loading });
+  },
+
+  // Set dirty state
+  setDirty: (dirty: boolean) => {
+    set({ isDirty: dirty });
+  },
+
+  // Set current language
+  setCurrentLanguage: (language: string) => {
+    set({ currentLanguage: language });
+  },
+
+  // Reset editor
+  reset: () => {
+    set({
+      pageContent: null,
+      selectedComponentId: null,
+      undoStack: [],
+      redoStack: [],
+      isDirty: false,
+      isLoading: false,
+      currentLanguage: 'en-US',
+    });
+  },
+}));
diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
index 4cc57206..ba1b3e8f 100644
--- a/lib/types/about-page-components.ts
+++ b/lib/types/about-page-components.ts
@@ -213,3 +213,15 @@ export function isLegacyFormat(data: AboutTranslationData): boolean {
         data.buttonText)
   );
 }
+
+// Re-export utility functions from data-migration for convenience
+export {
+  generateUniqueId,
+  createDefaultComponent,
+  createDefaultSection,
+  migrateLegacyToSections,
+  migrateAboutTranslationData,
+  batchMigrateTranslations,
+  validateMigratedData,
+  createBackupData,
+} from '@lib/utils/data-migration';
diff --git a/package.json b/package.json
index f41f35bf..3e42b345 100644
--- a/package.json
+++ b/package.json
@@ -54,12 +54,14 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@supabase/ssr": "^0.6.1",
     "@supabase/supabase-js": "^2.53.0",
     "@types/prismjs": "^1.26.5",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/uuid": "^10.0.0",
     "bufferutil": "^4.0.9",
     "class-variance-authority": "^0.7.1",
@@ -77,6 +79,7 @@
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.1",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^19.1.1",
     "react-easy-crop": "^5.5.0",
     "react-icons": "^5.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9906a85b..6b04389d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       '@radix-ui/react-select':
         specifier: ^2.2.5
         version: 2.2.5(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-slot':
         specifier: ^1.2.3
         version: 1.2.3(@types/react@19.1.9)(react@19.1.1)
@@ -41,6 +44,9 @@ importers:
       '@types/prismjs':
         specifier: ^1.26.5
         version: 1.26.5
+      '@types/react-beautiful-dnd':
+        specifier: ^13.1.8
+        version: 13.1.8
       '@types/uuid':
         specifier: ^10.0.0
         version: 10.0.0
@@ -92,6 +98,9 @@ importers:
       react:
         specifier: ^19.1.1
         version: 19.1.1
+      react-beautiful-dnd:
+        specifier: ^13.1.1
+        version: 13.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react-dom:
         specifier: ^19.1.1
         version: 19.1.1(react@19.1.1)
@@ -1161,6 +1170,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -1513,6 +1535,11 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
+  '@types/hoist-non-react-statics@3.3.7':
+    resolution: {integrity: sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==}
+    peerDependencies:
+      '@types/react': '*'
+
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
@@ -1555,11 +1582,17 @@ packages:
   '@types/prismjs@1.26.5':
     resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
 
+  '@types/react-beautiful-dnd@13.1.8':
+    resolution: {integrity: sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==}
+
   '@types/react-dom@19.1.7':
     resolution: {integrity: sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==}
     peerDependencies:
       '@types/react': ^19.0.0
 
+  '@types/react-redux@7.1.34':
+    resolution: {integrity: sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==}
+
   '@types/react@19.1.9':
     resolution: {integrity: sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==}
 
@@ -2126,6 +2159,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-box-model@1.2.1:
+    resolution: {integrity: sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -2743,6 +2779,9 @@ packages:
   hastscript@9.0.1:
     resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
 
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
@@ -3463,6 +3502,9 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
+  memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
@@ -3967,6 +4009,16 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  raf-schd@4.0.3:
+    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
+
+  react-beautiful-dnd@13.1.1:
+    resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==}
+    deprecated: 'react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672'
+    peerDependencies:
+      react: ^16.8.5 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
+
   react-dom@19.1.1:
     resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
     peerDependencies:
@@ -3998,6 +4050,18 @@ packages:
       '@types/react': '>=18'
       react: '>=18'
 
+  react-redux@7.2.9:
+    resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
+    peerDependencies:
+      react: ^16.8.3 || ^17 || ^18
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -4036,6 +4100,9 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
+  redux@4.2.1:
+    resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -4399,6 +4466,9 @@ packages:
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   tinyexec@1.0.1:
     resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
@@ -4562,6 +4632,11 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
 
+  use-memo-one@1.1.3:
+    resolution: {integrity: sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -5838,6 +5913,15 @@ snapshots:
       '@types/react': 19.1.9
       '@types/react-dom': 19.1.7(@types/react@19.1.9)
 
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.9
+      '@types/react-dom': 19.1.7(@types/react@19.1.9)
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.9)(react@19.1.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.9)(react@19.1.1)
@@ -6184,6 +6268,11 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/hoist-non-react-statics@3.3.7(@types/react@19.1.9)':
+    dependencies:
+      '@types/react': 19.1.9
+      hoist-non-react-statics: 3.3.2
+
   '@types/istanbul-lib-coverage@2.0.6': {}
 
   '@types/istanbul-lib-report@3.0.3':
@@ -6227,10 +6316,21 @@ snapshots:
 
   '@types/prismjs@1.26.5': {}
 
+  '@types/react-beautiful-dnd@13.1.8':
+    dependencies:
+      '@types/react': 19.1.9
+
   '@types/react-dom@19.1.7(@types/react@19.1.9)':
     dependencies:
       '@types/react': 19.1.9
 
+  '@types/react-redux@7.1.34':
+    dependencies:
+      '@types/hoist-non-react-statics': 3.3.7(@types/react@19.1.9)
+      '@types/react': 19.1.9
+      hoist-non-react-statics: 3.3.2
+      redux: 4.2.1
+
   '@types/react@19.1.9':
     dependencies:
       csstype: 3.1.3
@@ -6826,6 +6926,10 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-box-model@1.2.1:
+    dependencies:
+      tiny-invariant: 1.3.3
+
   css.escape@1.5.1: {}
 
   cssstyle@4.6.0:
@@ -7628,6 +7732,10 @@ snapshots:
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
 
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
   html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
@@ -8637,6 +8745,8 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
+  memoize-one@5.2.1: {}
+
   meow@12.1.1: {}
 
   merge-stream@2.0.0: {}
@@ -9166,6 +9276,22 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  raf-schd@4.0.3: {}
+
+  react-beautiful-dnd@13.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      '@babel/runtime': 7.28.2
+      css-box-model: 1.2.1
+      memoize-one: 5.2.1
+      raf-schd: 4.0.3
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-redux: 7.2.9(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      redux: 4.2.1
+      use-memo-one: 1.1.3(react@19.1.1)
+    transitivePeerDependencies:
+      - react-native
+
   react-dom@19.1.1(react@19.1.1):
     dependencies:
       react: 19.1.1
@@ -9206,6 +9332,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  react-redux@7.2.9(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      '@babel/runtime': 7.28.2
+      '@types/react-redux': 7.1.34
+      hoist-non-react-statics: 3.3.2
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.1.1
+      react-is: 17.0.2
+    optionalDependencies:
+      react-dom: 19.1.1(react@19.1.1)
+
   react-remove-scroll-bar@2.3.8(@types/react@19.1.9)(react@19.1.1):
     dependencies:
       react: 19.1.1
@@ -9240,6 +9378,10 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
+  redux@4.2.1:
+    dependencies:
+      '@babel/runtime': 7.28.2
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -9702,6 +9844,8 @@ snapshots:
 
   through@2.3.8: {}
 
+  tiny-invariant@1.3.3: {}
+
   tinyexec@1.0.1: {}
 
   tinyglobby@0.2.14:
@@ -9913,6 +10057,10 @@ snapshots:
       intl-messageformat: 10.7.16
       react: 19.1.1
 
+  use-memo-one@1.1.3(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
   use-sidecar@1.1.3(@types/react@19.1.9)(react@19.1.1):
     dependencies:
       detect-node-es: 1.1.0

From 8eedfbcc078e8d7e29fb36c06954acc28ee74d2c Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Fri, 8 Aug 2025 20:15:14 +0800
Subject: [PATCH 03/66] feat(about): implement Phase 3 of dynamic component
 editor integration

- Add DynamicAboutRenderer component for frontend dynamic rendering
- Update about page to support both legacy and dynamic component formats
- Maintain backward compatibility with existing translation structure
- Add automatic data migration from legacy to dynamic format
- Preserve all existing functionality including URL paths and SEO
- Ensure smooth user transition without noticeable changes
- Fix admin content page type imports and remove duplicate interfaces
- Add comprehensive component rendering for all supported types
- Support responsive layouts and device-specific rendering
- Integrate with existing theme system and user authentication
---
 app/about/page.tsx                          | 193 ++--------
 app/admin/content/page.tsx                  |  14 +-
 components/about/dynamic-about-renderer.tsx | 367 ++++++++++++++++++++
 3 files changed, 399 insertions(+), 175 deletions(-)
 create mode 100644 components/about/dynamic-about-renderer.tsx

diff --git a/app/about/page.tsx b/app/about/page.tsx
index ffe269ac..bd6d0ed7 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import { Button } from '@components/ui/button';
+import { DynamicAboutRenderer } from '@components/about/dynamic-about-renderer';
 import { PageLoader } from '@components/ui/page-loader';
 import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
 import { useTheme } from '@lib/hooks/use-theme';
 import { createClient } from '@lib/supabase/client';
-import { cn } from '@lib/utils';
-import { motion } from 'framer-motion';
+import type { AboutTranslationData } from '@lib/types/about-page-components';
 
 import { useEffect, useState } from 'react';
 
@@ -109,168 +108,38 @@ export default function AboutPage() {
     return <PageLoader />;
   }
 
-  // Extract value cards data from translations (using static raw method for array data)
-  const valueCards = staticT.raw('values.items') as Array<{
-    title: string;
-    description: string;
-  }>;
+  // Create translation data object for the dynamic renderer
+  const translationData: AboutTranslationData = {
+    // Try to get dynamic sections first
+    sections: dynamicT('sections', 'pages.about') || undefined,
+
+    // Fallback to legacy format for backward compatibility
+    title: t('title'),
+    subtitle: t('subtitle'),
+    mission: {
+      description: t('mission.description'),
+    },
+    values: {
+      items: staticT.raw('values.items') as Array<{
+        title: string;
+        description: string;
+      }>,
+    },
+    buttonText: t('buttonText'),
+    copyright: {
+      prefix: t('copyright.prefix', { year: new Date().getFullYear() }),
+      linkText: t('copyright.linkText'),
+      suffix: t('copyright.suffix'),
+    },
+  };
 
   return (
     <main className="min-h-screen w-full overflow-x-hidden px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
-      <div className="mx-auto max-w-5xl">
-        {/* title */}
-        <motion.section
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6 }}
-          className="mb-6 text-center sm:mb-8 lg:mb-10"
-        >
-          <motion.h1
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-            className={cn(
-              'bg-gradient-to-r bg-clip-text py-2 leading-tight font-bold text-transparent',
-              'mb-4 text-3xl sm:mb-6 sm:text-4xl md:text-5xl',
-              `${colors.titleGradient}`
-            )}
-          >
-            {t('title')}
-          </motion.h1>
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            className={cn(
-              'mx-auto max-w-3xl font-light',
-              'text-base sm:text-lg lg:text-xl',
-              colors.textColor
-            )}
-          >
-            {t('subtitle')}
-          </motion.p>
-        </motion.section>
-
-        {/* mission */}
-        <motion.section
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.3 }}
-          className="mb-6 sm:mb-8 lg:mb-10"
-        >
-          <h2
-            className={cn(
-              'mb-4 font-bold sm:mb-6',
-              'text-xl sm:text-2xl',
-              colors.headingColor
-            )}
-          >
-            {t('mission.title')}
-          </h2>
-          <p
-            className={cn(
-              'text-sm leading-relaxed sm:text-base lg:text-lg',
-              colors.paragraphColor
-            )}
-          >
-            {t('mission.description')}
-          </p>
-        </motion.section>
-
-        {/* values */}
-        <motion.section
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
-          className="mb-6 sm:mb-8 lg:mb-10"
-        >
-          <h2
-            className={cn(
-              'mb-4 font-bold sm:mb-6',
-              'text-xl sm:text-2xl',
-              colors.headingColor
-            )}
-          >
-            {t('values.title')}
-          </h2>
-          <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2">
-            {valueCards.map((value, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.5 + index * 0.1 }}
-                className={cn(
-                  'rounded-xl border',
-                  'p-4 sm:p-6',
-                  colors.cardBg,
-                  colors.cardShadow,
-                  colors.cardBorder
-                )}
-              >
-                <h3
-                  className={cn(
-                    'mb-2 font-semibold',
-                    'text-base sm:text-lg',
-                    colors.cardHeadingColor
-                  )}
-                >
-                  {value.title}
-                </h3>
-                <p
-                  className={cn(
-                    'text-sm leading-relaxed sm:text-base',
-                    colors.cardTextColor
-                  )}
-                >
-                  {value.description}
-                </p>
-              </motion.div>
-            ))}
-          </div>
-        </motion.section>
-
-        {/* join us */}
-        <motion.section
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.6 }}
-          className="mb-6 text-center sm:mb-8 lg:mb-10"
-        >
-          <Button
-            size="lg"
-            className={cn(
-              'h-auto rounded-lg font-medium transition-all duration-200',
-              'px-6 py-2 text-sm sm:px-8 sm:py-3 sm:text-base',
-              colors.buttonClass
-            )}
-            onClick={handleExploreClick}
-          >
-            {t('buttonText')}
-          </Button>
-        </motion.section>
-
-        {/* bottom info */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.8 }}
-          className={cn('text-center', 'text-xs sm:text-sm', colors.textColor)}
-        >
-          <p>
-            {t('copyright.prefix', { year: new Date().getFullYear() })}
-            <a
-              href="https://github.com/ifLabX/AgentifUI"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-all duration-200 hover:underline hover:opacity-80"
-            >
-              {t('copyright.linkText')}
-            </a>
-            {t('copyright.suffix')}
-          </p>
-        </motion.div>
-      </div>
+      <DynamicAboutRenderer
+        translationData={translationData}
+        colors={colors}
+        onButtonClick={handleExploreClick}
+      />
     </main>
   );
 }
diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index 9308a758..1de030d1 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -13,6 +13,7 @@ import { getCurrentLocaleFromCookie } from '@lib/config/language-config';
 import { clearTranslationCache } from '@lib/hooks/use-dynamic-translations';
 import { useTheme } from '@lib/hooks/use-theme';
 import { TranslationService } from '@lib/services/admin/content/translation-service';
+import type { AboutTranslationData } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
 import { Eye } from 'lucide-react';
 import { toast } from 'sonner';
@@ -189,19 +190,6 @@ export default function ContentManagementPage() {
     setShowFullscreenPreview(false);
   };
 
-  interface AboutTranslationData {
-    title?: string;
-    subtitle?: string;
-    mission?: { description?: string };
-    values?: { items?: Array<{ title: string; description: string }> };
-    buttonText?: string;
-    copyright?: {
-      prefix?: string;
-      linkText?: string;
-      suffix?: string;
-    };
-  }
-
   interface HomeTranslationData {
     title?: string;
     subtitle?: string;
diff --git a/components/about/dynamic-about-renderer.tsx b/components/about/dynamic-about-renderer.tsx
new file mode 100644
index 00000000..89d349a6
--- /dev/null
+++ b/components/about/dynamic-about-renderer.tsx
@@ -0,0 +1,367 @@
+'use client';
+
+import { Button } from '@components/ui/button';
+import { createClient } from '@lib/supabase/client';
+import type {
+  AboutTranslationData,
+  ComponentInstance,
+  PageContent,
+  PageSection,
+} from '@lib/types/about-page-components';
+import {
+  isDynamicFormat,
+  migrateAboutTranslationData,
+} from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import { motion } from 'framer-motion';
+
+import React from 'react';
+
+import { useRouter } from 'next/navigation';
+
+interface DynamicAboutRendererProps {
+  /**
+   * Translation data for the about page (legacy or dynamic format)
+   */
+  translationData: AboutTranslationData;
+  /**
+   * Theme colors object
+   */
+  colors: {
+    titleGradient: string;
+    textColor: string;
+    headingColor: string;
+    paragraphColor: string;
+    cardBg: string;
+    cardBorder: string;
+    cardShadow: string;
+    cardHeadingColor: string;
+    cardTextColor: string;
+    buttonClass: string;
+  };
+  /**
+   * Handle button click action
+   */
+  onButtonClick?: (url?: string) => void;
+}
+
+/**
+ * Dynamic About Page Renderer
+ *
+ * Renders about page content using dynamic component structure
+ * Falls back to legacy structure if dynamic data is not available
+ */
+export function DynamicAboutRenderer({
+  translationData,
+  colors,
+  onButtonClick,
+}: DynamicAboutRendererProps) {
+  const router = useRouter();
+
+  // Ensure we have dynamic format data
+  const dynamicData = React.useMemo(() => {
+    if (!isDynamicFormat(translationData)) {
+      return migrateAboutTranslationData(translationData);
+    }
+    return translationData;
+  }, [translationData]);
+
+  // Create page content from translation data
+  const pageContent: PageContent = React.useMemo(() => {
+    return {
+      sections: dynamicData.sections || [],
+      metadata: dynamicData.metadata || {
+        version: '1.0.0',
+        lastModified: new Date().toISOString(),
+        author: 'frontend',
+      },
+    };
+  }, [dynamicData]);
+
+  /**
+   * Handle button component clicks
+   */
+  const handleButtonClick = (component: ComponentInstance) => {
+    const { action, url } = component.props;
+
+    if (onButtonClick) {
+      onButtonClick(url as string);
+      return;
+    }
+
+    // Default button behavior based on action type
+    if (action === 'external' && url) {
+      window.open(url as string, '_blank', 'noopener,noreferrer');
+    } else if (action === 'link' && url) {
+      router.push(url as string);
+    } else {
+      // Default "Start Exploring" behavior - call the provided handler or navigate to chat
+      handleExploreClick();
+    }
+  };
+
+  // Default explore click handler
+  const handleExploreClick = async () => {
+    try {
+      const supabase = createClient();
+      const {
+        data: { user },
+      } = await supabase.auth.getUser();
+
+      if (user) {
+        router.push('/chat');
+      } else {
+        router.push('/login');
+      }
+    } catch (error) {
+      console.error('check login status failed:', error);
+      router.push('/login');
+    }
+  };
+
+  /**
+   * Render individual component based on type
+   */
+  const renderComponent = (component: ComponentInstance, index: number) => {
+    const { type, props } = component;
+
+    const baseAnimation = {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.6, delay: index * 0.1 },
+    };
+
+    switch (type) {
+      case 'heading':
+        const level = (props.level as number) || 1;
+        const HeadingTag = `h${level}` as
+          | 'h1'
+          | 'h2'
+          | 'h3'
+          | 'h4'
+          | 'h5'
+          | 'h6';
+        const headingSize = {
+          1: 'text-3xl sm:text-4xl md:text-5xl font-bold',
+          2: 'text-xl sm:text-2xl font-bold',
+          3: 'text-lg sm:text-xl font-semibold',
+          4: 'text-base sm:text-lg font-semibold',
+          5: 'text-sm sm:text-base font-medium',
+          6: 'text-xs sm:text-sm font-medium',
+        };
+
+        return (
+          <motion.div key={component.id} {...baseAnimation}>
+            <HeadingTag
+              className={cn(
+                headingSize[level as keyof typeof headingSize] ||
+                  headingSize[2],
+                level === 1 &&
+                  `bg-gradient-to-r bg-clip-text text-transparent ${colors.titleGradient}`,
+                level > 1 && colors.headingColor,
+                `text-${props.textAlign || 'left'}`,
+                level === 1 ? 'mb-4 sm:mb-6' : 'mb-4'
+              )}
+            >
+              {props.content as string}
+            </HeadingTag>
+          </motion.div>
+        );
+
+      case 'paragraph':
+        return (
+          <motion.p
+            key={component.id}
+            {...baseAnimation}
+            className={cn(
+              'text-sm leading-relaxed sm:text-base lg:text-lg',
+              colors.paragraphColor,
+              `text-${props.textAlign || 'left'}`
+            )}
+          >
+            {props.content as string}
+          </motion.p>
+        );
+
+      case 'cards':
+        const items =
+          (props.items as Array<{ title: string; description: string }>) || [];
+        return (
+          <motion.div
+            key={component.id}
+            {...baseAnimation}
+            className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2"
+          >
+            {items.map((item, cardIndex) => (
+              <motion.div
+                key={cardIndex}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.5 + cardIndex * 0.1 }}
+                className={cn(
+                  'rounded-xl border p-4 sm:p-6',
+                  colors.cardBg,
+                  colors.cardShadow,
+                  colors.cardBorder
+                )}
+              >
+                <h3
+                  className={cn(
+                    'mb-2 text-base font-semibold sm:text-lg',
+                    colors.cardHeadingColor
+                  )}
+                >
+                  {item.title}
+                </h3>
+                <p
+                  className={cn(
+                    'text-sm leading-relaxed sm:text-base',
+                    colors.cardTextColor
+                  )}
+                >
+                  {item.description}
+                </p>
+              </motion.div>
+            ))}
+          </motion.div>
+        );
+
+      case 'button':
+        return (
+          <motion.div
+            key={component.id}
+            {...baseAnimation}
+            className={cn(
+              props.textAlign === 'center' && 'text-center',
+              props.textAlign === 'right' && 'text-right'
+            )}
+          >
+            <Button
+              size="lg"
+              className={cn(
+                'h-auto rounded-lg font-medium transition-all duration-200',
+                'px-6 py-2 text-sm sm:px-8 sm:py-3 sm:text-base',
+                colors.buttonClass
+              )}
+              onClick={() => handleButtonClick(component)}
+            >
+              {props.text as string}
+            </Button>
+          </motion.div>
+        );
+
+      case 'image':
+        return (
+          <motion.div
+            key={component.id}
+            {...baseAnimation}
+            className={cn(
+              'flex flex-col',
+              props.alignment === 'center' && 'items-center',
+              props.alignment === 'right' && 'items-end'
+            )}
+          >
+            <img
+              src={props.src as string}
+              alt={props.alt as string}
+              className="rounded-lg shadow-lg"
+              style={{
+                width:
+                  props.width !== 'auto'
+                    ? (props.width as string | number)
+                    : undefined,
+                height:
+                  props.height !== 'auto'
+                    ? (props.height as string | number)
+                    : undefined,
+              }}
+            />
+            {typeof props.caption === 'string' && props.caption && (
+              <p className={cn('mt-2 text-sm', colors.paragraphColor)}>
+                {props.caption}
+              </p>
+            )}
+          </motion.div>
+        );
+
+      case 'divider':
+        return (
+          <motion.hr
+            key={component.id}
+            {...baseAnimation}
+            className={cn(
+              'my-6 border-0',
+              props.thickness === 'thin' && 'h-px',
+              props.thickness === 'medium' && 'h-0.5',
+              props.thickness === 'thick' && 'h-1',
+              props.style === 'dashed' && 'border-t border-dashed',
+              props.style === 'dotted' && 'border-t border-dotted',
+              props.color === 'gray' && 'bg-gray-300 dark:bg-gray-600',
+              !props.color && 'bg-gray-300 dark:bg-gray-600'
+            )}
+          />
+        );
+
+      default:
+        return (
+          <motion.div
+            key={component.id}
+            {...baseAnimation}
+            className="rounded-lg border border-red-200 bg-red-50 p-4 text-center text-red-600 dark:border-red-700 dark:bg-red-900/20 dark:text-red-400"
+          >
+            <p>Unknown component type: {type}</p>
+          </motion.div>
+        );
+    }
+  };
+
+  /**
+   * Render section with responsive layout
+   */
+  const renderSection = (section: PageSection, sectionIndex: number) => {
+    return (
+      <motion.section
+        key={section.id}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: sectionIndex * 0.1 }}
+        className="mb-6 sm:mb-8 lg:mb-10"
+      >
+        <div
+          className={cn(
+            'grid gap-4 md:gap-6',
+            section.layout === 'single-column' && 'grid-cols-1',
+            section.layout === 'two-column' && 'grid-cols-1 md:grid-cols-2',
+            section.layout === 'three-column' &&
+              'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+          )}
+        >
+          {section.columns.map((column, columnIndex) => (
+            <div key={columnIndex} className="space-y-4">
+              {column.map((component, componentIndex) =>
+                renderComponent(component, sectionIndex + componentIndex)
+              )}
+            </div>
+          ))}
+        </div>
+      </motion.section>
+    );
+  };
+
+  // Render all sections
+  if (!pageContent.sections || pageContent.sections.length === 0) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className={cn('text-lg', colors.textColor)}>No content available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl">
+      {pageContent.sections.map((section, index) =>
+        renderSection(section, index)
+      )}
+    </div>
+  );
+}

From 1d5371367b4e049c5e976fd1495d8f4c6e427f7d Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Fri, 8 Aug 2025 21:48:21 +0800
Subject: [PATCH 04/66] feat(about): complete Phase 4 of dynamic component
 editor integration

- Fix react-beautiful-dnd configuration issues with required boolean props
- Add isCombineEnabled={false} to all StrictModeDroppable components
- Add isDropDisabled prop (false for drop zones, true for component palette)
- Add ignoreContainerClipping={false} for proper container handling
- Ensure all drag-and-drop functionality works correctly
- Complete Phase 4: Advanced Features & Performance integration
---
 .../about/dynamic-about-renderer.test.tsx     | 382 ++++++++++++++++++
 __tests__/utils/data-migration.test.ts        | 344 ++++++++++++++++
 .../2025-08-08T12-23-05-484Z/de-DE.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/en-US.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/es-ES.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/fr-FR.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/it-IT.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/ja-JP.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/pt-PT.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/ru-RU.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/zh-CN.json       |  42 ++
 .../2025-08-08T12-23-05-484Z/zh-TW.json       |  42 ++
 components/about/dynamic-about-renderer.tsx   |  21 +-
 components/admin/content/about-editor.tsx     |  53 ++-
 .../admin/content/component-palette.tsx       |   2 +
 lib/stores/about-editor-store.ts              |  13 +-
 lib/types/about-page-components.ts            |   2 +-
 lib/utils/data-migration.ts                   |   1 +
 lib/utils/performance.ts                      | 270 +++++++++++++
 messages/de-DE.json                           | 171 ++++++--
 messages/en-US.json                           | 171 ++++++--
 messages/es-ES.json                           | 171 ++++++--
 messages/fr-FR.json                           | 171 ++++++--
 messages/it-IT.json                           | 171 ++++++--
 messages/ja-JP.json                           | 171 ++++++--
 messages/pt-PT.json                           | 171 ++++++--
 messages/ru-RU.json                           | 171 ++++++--
 messages/zh-CN.json                           | 171 ++++++--
 messages/zh-TW.json                           | 171 ++++++--
 29 files changed, 2863 insertions(+), 355 deletions(-)
 create mode 100644 __tests__/components/about/dynamic-about-renderer.test.tsx
 create mode 100644 __tests__/utils/data-migration.test.ts
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
 create mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json
 create mode 100644 lib/utils/performance.ts

diff --git a/__tests__/components/about/dynamic-about-renderer.test.tsx b/__tests__/components/about/dynamic-about-renderer.test.tsx
new file mode 100644
index 00000000..1fae3d0d
--- /dev/null
+++ b/__tests__/components/about/dynamic-about-renderer.test.tsx
@@ -0,0 +1,382 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DynamicAboutRenderer } from '@components/about/dynamic-about-renderer';
+import type { AboutTranslationData } from '@lib/types/about-page-components';
+// Skip NextIntl for testing
+
+// Mock next-intl
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+// Mock next/navigation
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+// Mock Supabase client
+jest.mock('@lib/supabase/client', () => ({
+  createClient: () => ({
+    auth: {
+      getUser: jest.fn().mockResolvedValue({ data: { user: null } }),
+    },
+  }),
+}));
+
+// Mock framer-motion
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+    section: ({ children, ...props }: any) => <section {...props}>{children}</section>,
+    p: ({ children, ...props }: any) => <p {...props}>{children}</p>,
+    hr: ({ children, ...props }: any) => <hr {...props}>{children}</hr>,
+  },
+}));
+
+// Mock messages
+const messages = {
+  pages: {
+    about: {
+      title: 'About Us',
+      subtitle: 'Test subtitle',
+      buttonText: 'Get Started',
+    },
+  },
+};
+
+const mockColors = {
+  titleGradient: 'from-blue-600 to-purple-600',
+  textColor: 'text-gray-900',
+  headingColor: 'text-gray-900',
+  paragraphColor: 'text-gray-700',
+  cardBg: 'bg-white',
+  cardBorder: 'border-gray-200',
+  cardShadow: 'shadow-lg',
+  cardHeadingColor: 'text-gray-900',
+  cardTextColor: 'text-gray-700',
+  buttonClass: 'bg-blue-600 hover:bg-blue-700 text-white',
+};
+
+const createMockTranslationData = (isDynamic = true): AboutTranslationData => {
+  if (isDynamic) {
+    return {
+      sections: [
+        {
+          id: 'section-1',
+          layout: 'single-column',
+          columns: [
+            [
+              {
+                id: 'comp-1',
+                type: 'heading',
+                props: {
+                  content: 'Test Heading',
+                  level: 1,
+                  textAlign: 'center',
+                },
+              },
+              {
+                id: 'comp-2',
+                type: 'paragraph',
+                props: {
+                  content: 'Test paragraph content',
+                  textAlign: 'left',
+                },
+              },
+            ],
+          ],
+        },
+        {
+          id: 'section-2',
+          layout: 'two-column',
+          columns: [
+            [
+              {
+                id: 'comp-3',
+                type: 'cards',
+                props: {
+                  layout: 'grid',
+                  items: [
+                    {
+                      title: 'Card 1',
+                      description: 'Card 1 description',
+                    },
+                    {
+                      title: 'Card 2',
+                      description: 'Card 2 description',
+                    },
+                  ],
+                },
+              },
+            ],
+            [
+              {
+                id: 'comp-4',
+                type: 'button',
+                props: {
+                  text: 'Click Me',
+                  variant: 'primary',
+                  action: 'link',
+                  url: '/test',
+                },
+              },
+            ],
+          ],
+        },
+      ],
+      metadata: {
+        version: '1.0.0',
+        lastModified: '2024-01-01T00:00:00.000Z',
+        author: 'test',
+      },
+    };
+  }
+
+  // Legacy format
+  return {
+    title: 'Legacy Title',
+    subtitle: 'Legacy Subtitle',
+    mission: {
+      description: 'Legacy mission description',
+    },
+    values: {
+      items: [
+        {
+          title: 'Value 1',
+          description: 'Value 1 description',
+        },
+      ],
+    },
+    buttonText: 'Legacy Button',
+    copyright: {
+      prefix: '© 2024',
+      linkText: 'Company',
+      suffix: '. All rights reserved.',
+    },
+  } as any;
+};
+
+const renderWithIntl = (component: React.ReactNode) => {
+  return render(component);
+};
+
+describe('DynamicAboutRenderer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Component Rendering', () => {
+    it('renders heading components correctly', () => {
+      const translationData = createMockTranslationData(true);
+      
+      renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+        />
+      );
+
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Heading');
+      expect(screen.getByRole('heading', { level: 1 })).toHaveClass('text-center');
+    });
+
+    it('renders paragraph components correctly', () => {
+      const translationData = createMockTranslationData(true);
+      
+      renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+        />
+      );
+
+      expect(screen.getByText('Test paragraph content')).toBeInTheDocument();
+    });
+
+    it('renders card components correctly', () => {
+      const translationData = createMockTranslationData(true);
+      
+      renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+        />
+      );
+
+      expect(screen.getByText('Card 1')).toBeInTheDocument();
+      expect(screen.getByText('Card 1 description')).toBeInTheDocument();
+      expect(screen.getByText('Card 2')).toBeInTheDocument();
+      expect(screen.getByText('Card 2 description')).toBeInTheDocument();
+    });
+
+    it('renders button components correctly', () => {
+      const translationData = createMockTranslationData(true);
+      
+      renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+        />
+      );
+
+      const button = screen.getByRole('button', { name: 'Click Me' });
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveClass('bg-blue-600');
+    });
+  });
+
+  describe('Layout Rendering', () => {
+    it('renders single-column layout correctly', () => {
+      const translationData = createMockTranslationData(true);
+      
+      const { container } = renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+        />
+      );
+
+      const singleColumnSection = container.querySelector('.grid-cols-1');
+      expect(singleColumnSection).toBeInTheDocument();
+    });
+
+    it('renders two-column layout correctly', () => {
+      const translationData = createMockTranslationData(true);
+      
+      const { container } = renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+        />
+      );
+
+      const twoColumnSection = container.querySelector('.md\\:grid-cols-2');
+      expect(twoColumnSection).toBeInTheDocument();
+    });
+  });
+
+  describe('Legacy Data Migration', () => {
+    it('handles legacy format data correctly', () => {
+      const legacyData = createMockTranslationData(false);
+      
+      renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={legacyData}
+          colors={mockColors}
+        />
+      );
+
+      // Should migrate and render legacy data
+      expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+      expect(screen.getByText('Legacy Subtitle')).toBeInTheDocument();
+      expect(screen.getByText('Legacy mission description')).toBeInTheDocument();
+    });
+  });
+
+  describe('Button Interactions', () => {
+    it('calls onButtonClick when button is clicked', async () => {
+      const mockOnButtonClick = jest.fn();
+      const translationData = createMockTranslationData(true);
+      
+      renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+          onButtonClick={mockOnButtonClick}
+        />
+      );
+
+      const button = screen.getByRole('button', { name: 'Click Me' });
+      fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(mockOnButtonClick).toHaveBeenCalledWith('/test');
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing content gracefully', () => {
+      const emptyData: AboutTranslationData = {
+        sections: [],
+        metadata: {
+          version: '1.0.0',
+          lastModified: '2024-01-01T00:00:00.000Z',
+          author: 'test',
+        },
+      };
+      
+      renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={emptyData}
+          colors={mockColors}
+        />
+      );
+
+      expect(screen.getByText('No content available')).toBeInTheDocument();
+    });
+
+    it('handles unknown component types gracefully', () => {
+      const invalidData: AboutTranslationData = {
+        sections: [
+          {
+            id: 'section-1',
+            layout: 'single-column',
+            columns: [
+              [
+                {
+                  id: 'comp-1',
+                  type: 'unknown' as any,
+                  props: {
+                    content: 'Test content',
+                  },
+                },
+              ],
+            ],
+          },
+        ],
+        metadata: {
+          version: '1.0.0',
+          lastModified: '2024-01-01T00:00:00.000Z',
+          author: 'test',
+        },
+      };
+      
+      renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={invalidData}
+          colors={mockColors}
+        />
+      );
+
+      expect(screen.getByText('Unknown component type: unknown')).toBeInTheDocument();
+    });
+  });
+
+  describe('Performance Optimizations', () => {
+    it('uses memoized component rendering', () => {
+      const translationData = createMockTranslationData(true);
+      
+      const { rerender } = renderWithIntl(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+        />
+      );
+
+      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+
+      // Rerender with same data should use memoized components
+      rerender(
+        <DynamicAboutRenderer
+          translationData={translationData}
+          colors={mockColors}
+        />
+      );
+
+      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/__tests__/utils/data-migration.test.ts b/__tests__/utils/data-migration.test.ts
new file mode 100644
index 00000000..4a3819c6
--- /dev/null
+++ b/__tests__/utils/data-migration.test.ts
@@ -0,0 +1,344 @@
+import {
+  generateUniqueId,
+  createDefaultComponent,
+  migrateLegacyToSections,
+  validateMigratedData,
+  migrateAboutTranslationData,
+} from '@lib/utils/data-migration';
+import {
+  isDynamicFormat,
+} from '@lib/types/about-page-components';
+import type {
+  LegacyAboutData,
+  AboutTranslationData,
+  ComponentInstance,
+  PageContent,
+} from '@lib/types/about-page-components';
+
+describe('Data Migration Utilities', () => {
+  describe('generateUniqueId', () => {
+    it('generates unique IDs with correct prefix', () => {
+      const id1 = generateUniqueId('comp');
+      const id2 = generateUniqueId('comp');
+      
+      expect(id1).toMatch(/^comp-\d+-[a-z0-9]+$/);
+      expect(id2).toMatch(/^comp-\d+-[a-z0-9]+$/);
+      expect(id1).not.toBe(id2);
+    });
+
+    it('generates IDs with different prefixes', () => {
+      const compId = generateUniqueId('comp');
+      const sectionId = generateUniqueId('section');
+      
+      expect(compId).toMatch(/^comp-/);
+      expect(sectionId).toMatch(/^section-/);
+    });
+  });
+
+  describe('createDefaultComponent', () => {
+    it('creates default heading component', () => {
+      const component = createDefaultComponent('heading', 'Test Heading');
+      
+      expect(component.type).toBe('heading');
+      expect(component.props.content).toBe('Test Heading');
+      expect(component.props.level).toBe(2);
+      expect(component.props.textAlign).toBe('left');
+      expect(component.id).toMatch(/^comp-/);
+    });
+
+    it('creates default paragraph component', () => {
+      const component = createDefaultComponent('paragraph', 'Test paragraph');
+      
+      expect(component.type).toBe('paragraph');
+      expect(component.props.content).toBe('Test paragraph');
+      expect(component.props.textAlign).toBe('left');
+    });
+
+    it('creates default button component', () => {
+      const component = createDefaultComponent('button', 'Click Me');
+      
+      expect(component.type).toBe('button');
+      expect(component.props.text).toBe('Click Me');
+      expect(component.props.variant).toBe('primary');
+      expect(component.props.action).toBe('link');
+      expect(component.props.url).toBe('#');
+    });
+
+    it('creates default cards component', () => {
+      const component = createDefaultComponent('cards');
+      
+      expect(component.type).toBe('cards');
+      expect(component.props.layout).toBe('grid');
+      expect(component.props.items).toEqual([]);
+    });
+
+    it('uses fallback content when no content provided', () => {
+      const component = createDefaultComponent('heading');
+      
+      expect(component.props.content).toBe('New Heading');
+    });
+  });
+
+  describe('isDynamicFormat', () => {
+    it('identifies dynamic format correctly', () => {
+      const dynamicData: AboutTranslationData = {
+        sections: [
+          {
+            id: 'section-1',
+            layout: 'single-column',
+            columns: [[]],
+          },
+        ],
+        metadata: {
+          version: '1.0.0',
+          lastModified: '2024-01-01T00:00:00.000Z',
+          author: 'test',
+        },
+      };
+
+      expect(isDynamicFormat(dynamicData)).toBe(true);
+    });
+
+    it('identifies legacy format correctly', () => {
+      const legacyData = {
+        title: 'Legacy Title',
+        subtitle: 'Legacy Subtitle',
+        mission: { description: 'Mission' },
+        values: { items: [] },
+        buttonText: 'Button',
+        copyright: { prefix: '', linkText: '', suffix: '' },
+      };
+
+      expect(isDynamicFormat(legacyData as any)).toBe(false);
+    });
+
+    it('handles empty/null data', () => {
+      expect(isDynamicFormat(null as any)).toBe(false);
+      expect(isDynamicFormat({} as any)).toBe(false);
+      expect(isDynamicFormat({ sections: [] } as any)).toBe(false);
+    });
+  });
+
+  describe('migrateLegacyToSections', () => {
+    const createLegacyData = (): LegacyAboutData => ({
+      title: 'About Our Company',
+      subtitle: 'Innovation and Excellence',
+      mission: {
+        description: 'To provide excellent services to our customers.',
+      },
+      values: {
+        items: [
+          { title: 'Quality', description: 'We deliver high-quality products' },
+          { title: 'Innovation', description: 'We embrace new technologies' },
+        ],
+      },
+      buttonText: 'Get Started',
+      copyright: {
+        prefix: `© ${new Date().getFullYear()} `,
+        linkText: 'Company Name',
+        suffix: '. All rights reserved.',
+      },
+    });
+
+    it('migrates title and subtitle correctly', () => {
+      const legacy = createLegacyData();
+      const migrated = migrateLegacyToSections(legacy);
+
+      expect(migrated.sections).toHaveLength(5); // title, mission, values, button, copyright
+      
+      const titleSection = migrated.sections[0];
+      expect(titleSection.layout).toBe('single-column');
+      expect(titleSection.columns[0]).toHaveLength(2); // title + subtitle
+      
+      expect(titleSection.columns[0][0].type).toBe('heading');
+      expect(titleSection.columns[0][0].props.content).toBe('About Our Company');
+      expect(titleSection.columns[0][0].props.level).toBe(1);
+      expect(titleSection.columns[0][0].props.textAlign).toBe('center');
+      
+      expect(titleSection.columns[0][1].type).toBe('paragraph');
+      expect(titleSection.columns[0][1].props.content).toBe('Innovation and Excellence');
+      expect(titleSection.columns[0][1].props.textAlign).toBe('center');
+    });
+
+    it('migrates mission section correctly', () => {
+      const legacy = createLegacyData();
+      const migrated = migrateLegacyToSections(legacy);
+
+      const missionSection = migrated.sections[1];
+      expect(missionSection.columns[0]).toHaveLength(2); // heading + paragraph
+      
+      expect(missionSection.columns[0][0].type).toBe('heading');
+      expect(missionSection.columns[0][0].props.content).toBe('Our Mission');
+      
+      expect(missionSection.columns[0][1].type).toBe('paragraph');
+      expect(missionSection.columns[0][1].props.content).toBe('To provide excellent services to our customers.');
+    });
+
+    it('migrates values section with cards correctly', () => {
+      const legacy = createLegacyData();
+      const migrated = migrateLegacyToSections(legacy);
+
+      const valuesSection = migrated.sections[2];
+      expect(valuesSection.columns[0]).toHaveLength(2); // heading + cards
+      
+      expect(valuesSection.columns[0][0].type).toBe('heading');
+      expect(valuesSection.columns[0][0].props.content).toBe('Our Values');
+      
+      expect(valuesSection.columns[0][1].type).toBe('cards');
+      expect(valuesSection.columns[0][1].props.items).toEqual([
+        { title: 'Quality', description: 'We deliver high-quality products' },
+        { title: 'Innovation', description: 'We embrace new technologies' },
+      ]);
+    });
+
+    it('migrates button section correctly', () => {
+      const legacy = createLegacyData();
+      const migrated = migrateLegacyToSections(legacy);
+
+      const buttonSection = migrated.sections[3];
+      expect(buttonSection.columns[0]).toHaveLength(1);
+      
+      const buttonComponent = buttonSection.columns[0][0];
+      expect(buttonComponent.type).toBe('button');
+      expect(buttonComponent.props.text).toBe('Get Started');
+      expect(buttonComponent.props.textAlign).toBe('center');
+    });
+
+    it('migrates copyright section correctly', () => {
+      const legacy = createLegacyData();
+      const migrated = migrateLegacyToSections(legacy);
+
+      const copyrightSection = migrated.sections[4];
+      expect(copyrightSection.columns[0]).toHaveLength(1);
+      
+      const copyrightComponent = copyrightSection.columns[0][0];
+      expect(copyrightComponent.type).toBe('paragraph');
+      expect(copyrightComponent.props.content).toContain(new Date().getFullYear().toString()); // Current year
+      expect(copyrightComponent.props.content).toContain('Company Name');
+      expect(copyrightComponent.props.textAlign).toBe('center');
+    });
+
+    it('handles missing optional fields', () => {
+      const minimal: LegacyAboutData = {
+        title: 'Title Only',
+        subtitle: '',
+        mission: { description: '' },
+        values: { items: [] },
+        buttonText: '',
+        copyright: { prefix: '', linkText: '', suffix: '' },
+      };
+
+      const migrated = migrateLegacyToSections(minimal);
+      
+      // Should only create title section (other sections should be skipped for empty content)
+      expect(migrated.sections).toHaveLength(1);
+      expect(migrated.sections[0].columns[0][0].props.content).toBe('Title Only');
+    });
+
+    it('includes proper metadata', () => {
+      const legacy = createLegacyData();
+      const migrated = migrateLegacyToSections(legacy);
+
+      expect(migrated.metadata?.version).toBe('1.0.0');
+      expect(migrated.metadata?.author).toBe('system-migration');
+      expect(migrated.metadata?.lastModified).toBeDefined();
+    });
+  });
+
+  describe('validateMigratedData', () => {
+    const createValidData = (): AboutTranslationData => ({
+      sections: [
+        {
+          id: 'section-1',
+          layout: 'single-column',
+          columns: [
+            [
+              {
+                id: 'comp-1',
+                type: 'heading',
+                props: { content: 'Test', level: 1 },
+              },
+            ],
+          ],
+        },
+      ],
+      metadata: {
+        version: '1.0.0',
+        lastModified: '2024-01-01T00:00:00.000Z',
+        author: 'test',
+      },
+    });
+
+    it('validates correct data successfully', () => {
+      const data = createValidData();
+      const result = validateMigratedData(data);
+
+      expect(result.isValid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+
+    it('detects missing sections', () => {
+      const data = { sections: [], metadata: {} } as AboutTranslationData;
+      const result = validateMigratedData(data);
+
+      expect(result.isValid).toBe(false);
+      expect(result.errors).toContain('迁移后的数据缺少sections');
+    });
+
+    it('detects missing section ID', () => {
+      const data = createValidData();
+      delete (data.sections?.[0] as any).id;
+      
+      const result = validateMigratedData(data);
+
+      expect(result.isValid).toBe(false);
+      expect(result.errors).toContain('Section 0 缺少ID');
+    });
+
+    it('detects missing component properties', () => {
+      const data = createValidData();
+      delete (data.sections?.[0]?.columns[0][0] as any).props;
+      
+      const result = validateMigratedData(data);
+
+      expect(result.isValid).toBe(false);
+      expect(result.errors).toContain('Section 0, Column 0, Component 0 缺少props');
+    });
+  });
+
+  describe('migrateAboutTranslationData', () => {
+    it('returns dynamic data unchanged', () => {
+      const dynamicData: AboutTranslationData = {
+        sections: [
+          {
+            id: 'section-1',
+            layout: 'single-column',
+            columns: [[]],
+          },
+        ],
+        metadata: { version: '1.0.0', lastModified: '2024-01-01', author: 'test' },
+      };
+
+      const result = migrateAboutTranslationData(dynamicData);
+      
+      expect(result).toBe(dynamicData); // Should return same object
+    });
+
+    it('migrates legacy data to dynamic format', () => {
+      const legacyData = {
+        title: 'Test Title',
+        subtitle: 'Test Subtitle',
+        mission: { description: 'Test mission' },
+        values: { items: [{ title: 'Value', description: 'Description' }] },
+        buttonText: 'Button',
+        copyright: { prefix: '© ', linkText: 'Test', suffix: '' },
+      } as any;
+
+      const result = migrateAboutTranslationData(legacyData);
+      
+      expect(result.sections).toBeDefined();
+      expect(result.sections!.length).toBeGreaterThan(0);
+      expect(result.metadata?.migrated).toBe(true);
+    });
+  });
+});
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
new file mode 100644
index 00000000..06eec1c9
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "de-DE.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.497Z",
+  "data": {
+    "title": "Über AgentifUI",
+    "subtitle": "KI mit Unternehmen verbinden, neue Erfahrungen mit großen Sprachmodellen schaffen",
+    "loading": "Laden...",
+    "mission": {
+      "title": "Unsere Mission",
+      "description": "AgentifUI ist bestrebt, die Kraft großer Sprachmodelle zu nutzen, um innovative Anwendungslösungen für Unternehmen bereitzustellen. Wir integrieren Fähigkeiten von mehreren Modellanbietern und bieten stabile, zuverlässige Dienste basierend auf Dify-Backend, um Organisationen dabei zu helfen, den Wert der KI-Technologie voll auszuschöpfen."
+    },
+    "values": {
+      "title": "Unsere Werte",
+      "items": [
+        {
+          "title": "Technische Innovation",
+          "description": "Kontinuierliche Integration von Spitzentechnologien großer Modelle, um führende KI-Lösungen für Unternehmen bereitzustellen"
+        },
+        {
+          "title": "Datensicherheit",
+          "description": "Unterstützung für private Bereitstellung und strenge Datenschutzmaßnahmen, um die Sicherheit und Privatsphäre von Unternehmensdaten zu gewährleisten"
+        },
+        {
+          "title": "Flexible Anpassung",
+          "description": "Bereitstellung hochgradig anpassbarer Lösungen, um spezifische Anforderungen verschiedener Branchen und Szenarien zu erfüllen"
+        },
+        {
+          "title": "Wissenserweiterung",
+          "description": "Integration privater Wissensdatenbanken durch RAG-Technologie, um die kontextuelle Wahrnehmungsfähigkeiten des Modells zu verbessern"
+        }
+      ]
+    },
+    "buttonText": "Entdeckung beginnen",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". Die Zukunft großer Modellanwendungen erkunden."
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.497Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
new file mode 100644
index 00000000..df6caf50
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "en-US.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.489Z",
+  "data": {
+    "title": "About AgentifUI",
+    "subtitle": "Connecting AI with enterprises, creating new experiences with large language models",
+    "loading": "Loading...",
+    "mission": {
+      "title": "Our Mission",
+      "description": "AgentifUI is committed to leveraging the power of large language models to provide innovative application solutions for enterprises. We integrate capabilities from multiple model providers and provide stable, reliable services based on Dify backend, helping organizations fully utilize the value of AI technology."
+    },
+    "values": {
+      "title": "Our Values",
+      "items": [
+        {
+          "title": "Technical Innovation",
+          "description": "Continuously integrate cutting-edge large model technologies to provide leading AI solutions for enterprises"
+        },
+        {
+          "title": "Data Security",
+          "description": "Support private deployment and strict data protection measures to ensure the security and privacy of enterprise data"
+        },
+        {
+          "title": "Flexible Customization",
+          "description": "Provide highly customizable solutions to meet specific needs of different industries and scenarios"
+        },
+        {
+          "title": "Knowledge Enhancement",
+          "description": "Integrate private knowledge bases through RAG technology to enhance model's contextual awareness capabilities"
+        }
+      ]
+    },
+    "buttonText": "Start Exploring",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". Explore the future of large model applications."
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.489Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
new file mode 100644
index 00000000..db523006
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "es-ES.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.507Z",
+  "data": {
+    "title": "Acerca de AgentifUI",
+    "subtitle": "Conectando IA con empresas, creando nuevas experiencias con modelos de lenguaje grandes",
+    "loading": "Cargando...",
+    "mission": {
+      "title": "Nuestra Misión",
+      "description": "AgentifUI se compromete a aprovechar el poder de los modelos de lenguaje grandes para proporcionar soluciones de aplicación innovadoras para empresas. Integramos capacidades de múltiples proveedores de modelos y proporcionamos servicios estables y confiables basados en backend Dify, ayudando a las organizaciones a utilizar completamente el valor de la tecnología IA."
+    },
+    "values": {
+      "title": "Nuestros Valores",
+      "items": [
+        {
+          "title": "Innovación Técnica",
+          "description": "Integrar continuamente tecnologías de modelos grandes de vanguardia para proporcionar soluciones IA líderes para empresas"
+        },
+        {
+          "title": "Seguridad de Datos",
+          "description": "Soporte para despliegue privado y medidas estrictas de protección de datos para garantizar la seguridad y privacidad de los datos empresariales"
+        },
+        {
+          "title": "Personalización Flexible",
+          "description": "Proporcionar soluciones altamente personalizables para satisfacer necesidades específicas de diferentes industrias y escenarios"
+        },
+        {
+          "title": "Mejora de Conocimiento",
+          "description": "Integrar bases de conocimiento privadas a través de tecnología RAG para mejorar las capacidades de conciencia contextual del modelo"
+        }
+      ]
+    },
+    "buttonText": "Comenzar a Explorar",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". Explora el futuro de las aplicaciones de modelos grandes."
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.507Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
new file mode 100644
index 00000000..ddd9954c
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "fr-FR.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.498Z",
+  "data": {
+    "title": "À propos d'AgentifUI",
+    "subtitle": "Connecter l'IA aux entreprises, créer de nouvelles expériences avec les grands modèles de langage",
+    "loading": "Chargement...",
+    "mission": {
+      "title": "Notre mission",
+      "description": "AgentifUI s'engage à exploiter la puissance des grands modèles de langage pour fournir des solutions applicatives innovantes aux entreprises. Nous intégrons les capacités de plusieurs fournisseurs de modèles et fournissons des services stables et fiables basés sur le backend Dify, aidant les organisations à utiliser pleinement la valeur de la technologie IA."
+    },
+    "values": {
+      "title": "Nos valeurs",
+      "items": [
+        {
+          "title": "Innovation technique",
+          "description": "Intégrer en continu les technologies de pointe des grands modèles pour fournir des solutions IA de premier plan aux entreprises"
+        },
+        {
+          "title": "Sécurité des données",
+          "description": "Soutenir le déploiement privé et des mesures strictes de protection des données pour garantir la sécurité et la confidentialité des données de l'entreprise"
+        },
+        {
+          "title": "Personnalisation flexible",
+          "description": "Fournir des solutions hautement personnalisables pour répondre aux besoins spécifiques des différentes industries et scénarios"
+        },
+        {
+          "title": "Amélioration des connaissances",
+          "description": "Intégrer des bases de connaissances privées via la technologie RAG pour améliorer les capacités de conscience contextuelle du modèle"
+        }
+      ]
+    },
+    "buttonText": "Commencer à explorer",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". Explorez l'avenir des applications de grands modèles."
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.498Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
new file mode 100644
index 00000000..de046438
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "it-IT.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.502Z",
+  "data": {
+    "title": "Informazioni su AgentifUI",
+    "subtitle": "Connettere l'IA con le imprese, creando nuove esperienze con grandi modelli linguistici",
+    "loading": "Caricamento...",
+    "mission": {
+      "title": "La Nostra Missione",
+      "description": "AgentifUI si impegna a sfruttare la potenza dei grandi modelli linguistici per fornire soluzioni applicative innovative per le imprese. Integriamo le capacità di più fornitori di modelli e forniamo servizi stabili e affidabili basati sul backend di Dify, aiutando le organizzazioni a utilizzare appieno il valore della tecnologia IA."
+    },
+    "values": {
+      "title": "I Nostri Valori",
+      "items": [
+        {
+          "title": "Innovazione Tecnica",
+          "description": "Integrare continuamente tecnologie all'avanguardia di grandi modelli per fornire soluzioni IA leader per le imprese"
+        },
+        {
+          "title": "Sicurezza dei Dati",
+          "description": "Supportare la distribuzione privata e rigorose misure di protezione dei dati per garantire la sicurezza e la privacy dei dati aziendali"
+        },
+        {
+          "title": "Personalizzazione Flessibile",
+          "description": "Fornire soluzioni altamente personalizzabili per soddisfare le esigenze specifiche di diversi settori e scenari"
+        },
+        {
+          "title": "Miglioramento della Conoscenza",
+          "description": "Integrare basi di conoscenza private tramite la tecnologia RAG per migliorare le capacità di consapevolezza contestuale del modello"
+        }
+      ]
+    },
+    "buttonText": "Inizia a Esplorare",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". Esplora il futuro delle applicazioni di grandi modelli."
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.502Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
new file mode 100644
index 00000000..367fc3c0
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "ja-JP.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.495Z",
+  "data": {
+    "title": "AgentifUIについて",
+    "subtitle": "AIと企業を繋ぎ、大規模言語モデルで新しい体験を創造",
+    "loading": "読み込み中...",
+    "mission": {
+      "title": "私たちの使命",
+      "description": "AgentifUIは大規模言語モデルの力を活用し、企業に革新的なアプリケーションソリューションを提供することに取り組んでいます。複数のモデルプロバイダーの能力を統合し、Difyバックエンドに基づく安定した信頼性の高いサービスを提供し、組織がAI技術の価値を最大限に活用できるよう支援します。"
+    },
+    "values": {
+      "title": "私たちの価値観",
+      "items": [
+        {
+          "title": "技術革新",
+          "description": "最先端の大規模モデル技術を継続的に統合し、企業に最先端のAIソリューションを提供"
+        },
+        {
+          "title": "データセキュリティ",
+          "description": "プライベート展開と厳格なデータ保護措置をサポートし、企業データのセキュリティとプライバシーを保証"
+        },
+        {
+          "title": "柔軟なカスタマイズ",
+          "description": "高度にカスタマイズ可能なソリューションを提供し、異なる業界とシナリオの特定のニーズに対応"
+        },
+        {
+          "title": "知識強化",
+          "description": "RAG技術を通じてプライベート知識ベースを統合し、モデルのコンテキスト認識能力を強化"
+        }
+      ]
+    },
+    "buttonText": "探索を始める",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": "。大規模モデルアプリケーションの未来を探求。"
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.495Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
new file mode 100644
index 00000000..dd58cbe7
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "pt-PT.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.503Z",
+  "data": {
+    "title": "Sobre o AgentifUI",
+    "subtitle": "A conectar a IA com empresas, criando novas experiências com modelos de linguagem grandes",
+    "loading": "A carregar...",
+    "mission": {
+      "title": "A Nossa Missão",
+      "description": "O AgentifUI está empenhado em alavancar o poder dos modelos de linguagem grandes para fornecer soluções de aplicação inovadoras para empresas. Integramos capacidades de múltiplos fornecedores de modelos e fornecemos serviços estáveis e fiáveis baseados no backend Dify, ajudando as organizações a utilizar plenamente o valor da tecnologia de IA."
+    },
+    "values": {
+      "title": "Os Nossos Valores",
+      "items": [
+        {
+          "title": "Inovação Tecnológica",
+          "description": "Integrar continuamente tecnologias de ponta de modelos grandes para fornecer soluções de IA líderes para empresas"
+        },
+        {
+          "title": "Segurança de Dados",
+          "description": "Suportar implementação privada e medidas rigorosas de proteção de dados para garantir a segurança e privacidade dos dados empresariais"
+        },
+        {
+          "title": "Personalização Flexível",
+          "description": "Fornecer soluções altamente personalizáveis para satisfazer as necessidades específicas de diferentes indústrias e cenários"
+        },
+        {
+          "title": "Melhoria de Conhecimento",
+          "description": "Integrar bases de conhecimento privadas através da tecnologia RAG para melhorar as capacidades de consciência contextual do modelo"
+        }
+      ]
+    },
+    "buttonText": "Começar a Explorar",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". Explore o futuro das aplicações de modelos grandes."
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.503Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
new file mode 100644
index 00000000..80711e01
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "ru-RU.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.500Z",
+  "data": {
+    "title": "О AgentifUI",
+    "subtitle": "Соединяем ИИ с предприятиями, создаем новые впечатления с помощью больших языковых моделей",
+    "loading": "Загрузка...",
+    "mission": {
+      "title": "Наша миссия",
+      "description": "AgentifUI стремится использовать мощь больших языковых моделей для предоставления инновационных прикладных решений для предприятий. Мы интегрируем возможности нескольких поставщиков моделей и предоставляем стабильные, надежные услуги на базе бэкенда Dify, помогая организациям в полной мере использовать ценность технологий ИИ."
+    },
+    "values": {
+      "title": "Наши ценности",
+      "items": [
+        {
+          "title": "Технологические инновации",
+          "description": "Постоянно интегрируем передовые технологии больших моделей, чтобы предоставлять ведущие ИИ-решения для предприятий"
+        },
+        {
+          "title": "Безопасность данных",
+          "description": "Поддерживаем частное развертывание и строгие меры защиты данных для обеспечения безопасности и конфиденциальности данных предприятия"
+        },
+        {
+          "title": "Гибкая настройка",
+          "description": "Предоставляем высоко настраиваемые решения для удовлетворения конкретных потребностей различных отраслей и сценариев"
+        },
+        {
+          "title": "Улучшение знаний",
+          "description": "Интегрируем частные базы знаний с помощью технологии RAG для улучшения контекстной осведомленности модели"
+        }
+      ]
+    },
+    "buttonText": "Начать исследование",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". Исследуйте будущее приложений больших моделей."
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.500Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
new file mode 100644
index 00000000..a7f352b9
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "zh-CN.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.491Z",
+  "data": {
+    "title": "关于 AgentifUI",
+    "subtitle": "连接 AI 与企业，打造大模型应用新体验",
+    "loading": "加载中...",
+    "mission": {
+      "title": "我们的使命",
+      "description": "AgentifUI 致力于利用大型语言模型的力量，为企业提供创新的应用解决方案。我们整合了多种模型供应商的能力，并基于 Dify 后端提供稳定、可靠的服务，帮助团队充分利用 AI 技术的价值。"
+    },
+    "values": {
+      "title": "我们的价值观",
+      "items": [
+        {
+          "title": "技术创新",
+          "description": "持续集成前沿的大模型技术，为企业提供领先的 AI 解决方案"
+        },
+        {
+          "title": "数据安全",
+          "description": "支持私有化部署和严格的数据保护措施，确保企业数据的安全与隐私"
+        },
+        {
+          "title": "灵活定制",
+          "description": "提供高度可定制的解决方案，满足不同行业和场景的特定需求"
+        },
+        {
+          "title": "知识增强",
+          "description": "通过 RAG 技术实现私有知识库的整合，增强模型的上下文感知能力"
+        }
+      ]
+    },
+    "buttonText": "开始探索",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". 探索大模型应用的未来。"
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.491Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json
new file mode 100644
index 00000000..aad8ff1e
--- /dev/null
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json
@@ -0,0 +1,42 @@
+{
+  "originalFile": "zh-TW.json",
+  "migrationTimestamp": "2025-08-08T12:23:05.493Z",
+  "data": {
+    "title": "關於 AgentifUI",
+    "subtitle": "連接 AI 與企業，打造大模型應用新體驗",
+    "loading": "載入中...",
+    "mission": {
+      "title": "我們的使命",
+      "description": "AgentifUI 致力於利用大型語言模型的力量，為企業提供創新的應用解決方案。我們整合了多種模型供應商的能力，並基於 Dify 後端提供穩定、可靠的服務，幫助組織充分利用 AI 技術的價值。"
+    },
+    "values": {
+      "title": "我們的價值觀",
+      "items": [
+        {
+          "title": "技術創新",
+          "description": "持續整合前沿的大模型技術，為企業提供領先的 AI 解決方案"
+        },
+        {
+          "title": "資料安全",
+          "description": "支援私有化部署和嚴格的資料保護措施，確保企業資料的安全與隱私"
+        },
+        {
+          "title": "靈活客製",
+          "description": "提供高度可客製的解決方案，滿足不同行業和情境的特定需求"
+        },
+        {
+          "title": "知識增強",
+          "description": "透過 RAG 技術實現私有知識庫的整合，增強模型的上下文感知能力"
+        }
+      ]
+    },
+    "buttonText": "開始探索",
+    "copyright": {
+      "prefix": "© {year} ",
+      "linkText": "AgentifUI",
+      "suffix": ". 探索大模型應用的未來。"
+    }
+  },
+  "timestamp": "2025-08-08T12:23:05.493Z",
+  "version": "1.0.0"
+}
\ No newline at end of file
diff --git a/components/about/dynamic-about-renderer.tsx b/components/about/dynamic-about-renderer.tsx
index 89d349a6..fc4f6db8 100644
--- a/components/about/dynamic-about-renderer.tsx
+++ b/components/about/dynamic-about-renderer.tsx
@@ -15,7 +15,7 @@ import {
 import { cn } from '@lib/utils';
 import { motion } from 'framer-motion';
 
-import React from 'react';
+import React, { lazy, memo, useMemo, Suspense } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -119,10 +119,21 @@ export function DynamicAboutRenderer({
     }
   };
 
+  /**
+   * Memoized component loader for better performance
+   */
+  const ComponentLoader = memo<{ component: ComponentInstance; index: number }>(
+    ({ component, index }) => {
+      return renderComponentInternal(component, index, colors);
+    }
+  );
+
+  ComponentLoader.displayName = 'ComponentLoader';
+
   /**
    * Render individual component based on type
    */
-  const renderComponent = (component: ComponentInstance, index: number) => {
+  const renderComponentInternal = (component: ComponentInstance, index: number, colors: any) => {
     const { type, props } = component;
 
     const baseAnimation = {
@@ -339,7 +350,11 @@ export function DynamicAboutRenderer({
           {section.columns.map((column, columnIndex) => (
             <div key={columnIndex} className="space-y-4">
               {column.map((component, componentIndex) =>
-                renderComponent(component, sectionIndex + componentIndex)
+                <ComponentLoader
+                  key={component.id}
+                  component={component}
+                  index={sectionIndex + componentIndex}
+                />
               )}
             </div>
           ))}
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 1e0115ca..1f15d568 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -21,10 +21,11 @@ import {
   migrateAboutTranslationData,
 } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
+import { useDebouncedCallback, useThrottledCallback } from '@lib/utils/performance';
 import { Plus, Redo2, RotateCcw, Save, Trash2, Undo2 } from 'lucide-react';
 import { DragDropContext, Draggable } from 'react-beautiful-dnd';
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { useTranslations } from 'next-intl';
 
@@ -111,12 +112,44 @@ export function AboutEditor({
     setCurrentLanguage(currentLocale);
   }, [currentLocale, currentTranslation, setPageContent, setCurrentLanguage]);
 
+  // Debounced auto-save function
+  const debouncedSave = useDebouncedCallback(
+    useCallback(() => {
+      if (!pageContent) return;
+
+      const updatedTranslation: AboutTranslationData = {
+        sections: pageContent.sections,
+        metadata: {
+          ...pageContent.metadata,
+          lastModified: new Date().toISOString(),
+        },
+      };
+
+      const newTranslations = {
+        ...translations,
+        [currentLocale]: updatedTranslation,
+      };
+      
+      onTranslationsChange(newTranslations);
+    }, [pageContent, translations, currentLocale, onTranslationsChange]),
+    1000, // 1 second delay
+    [pageContent, translations, currentLocale]
+  );
+
+  // Throttled property change handler for better performance
+  const throttledPropsChange = useThrottledCallback(
+    useCallback((newProps: Record<string, unknown>) => {
+      if (selectedComponentId) {
+        updateComponentProps(selectedComponentId, newProps);
+        debouncedSave(); // Auto-save after prop changes
+      }
+    }, [selectedComponentId, updateComponentProps, debouncedSave]),
+    100, // 100ms throttle
+    [selectedComponentId, updateComponentProps]
+  );
+
   // Handle property changes
-  const handlePropsChange = (newProps: Record<string, unknown>) => {
-    if (selectedComponentId) {
-      updateComponentProps(selectedComponentId, newProps);
-    }
-  };
+  const handlePropsChange = throttledPropsChange;
 
   // Handle component deletion
   const handleDeleteComponent = () => {
@@ -305,6 +338,9 @@ export function AboutEditor({
                   {sectionIndex > 0 && (
                     <StrictModeDroppable
                       droppableId={`section-drop-${sectionIndex}`}
+                      isCombineEnabled={false}
+                      isDropDisabled={false}
+                      ignoreContainerClipping={false}
                     >
                       {(provided, snapshot) => (
                         <div
@@ -360,6 +396,9 @@ export function AboutEditor({
                           <StrictModeDroppable
                             key={`${section.id}-${columnIndex}`}
                             droppableId={`section-${section.id}-${columnIndex}`}
+                            isCombineEnabled={false}
+                            isDropDisabled={false}
+                            ignoreContainerClipping={false}
                           >
                             {(provided, snapshot) => (
                               <div
@@ -421,7 +460,7 @@ export function AboutEditor({
               ))}
 
               {/* Final Drop Zone */}
-              <StrictModeDroppable droppableId="section-drop-final">
+              <StrictModeDroppable droppableId="section-drop-final" isCombineEnabled={false} isDropDisabled={false} ignoreContainerClipping={false}>
                 {(provided, snapshot) => (
                   <div
                     {...provided.droppableProps}
diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
index ad7acf6e..ea728578 100644
--- a/components/admin/content/component-palette.tsx
+++ b/components/admin/content/component-palette.tsx
@@ -154,6 +154,8 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
         <StrictModeDroppable
           droppableId="component-palette"
           isDropDisabled={true}
+          isCombineEnabled={false}
+          ignoreContainerClipping={false}
         >
           {provided => (
             <div
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index 52d9f16f..cc58420e 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -200,7 +200,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     }
   },
 
-  // Handle drag and drop
+  // Handle drag and drop (optimized with performance considerations)
   handleDragEnd: (result: DropResult) => {
     const { destination, source, draggableId } = result;
 
@@ -209,9 +209,14 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     const state = get();
     if (!state.pageContent) return;
 
-    const newPageContent = JSON.parse(
-      JSON.stringify(state.pageContent)
-    ) as PageContent;
+    // More efficient cloning - only clone what we need to modify
+    const newPageContent: PageContent = {
+      ...state.pageContent,
+      sections: state.pageContent.sections.map(section => ({
+        ...section,
+        columns: section.columns.map(column => [...column])
+      }))
+    };
 
     // Handle dragging from component palette
     if (source.droppableId === 'component-palette') {
diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
index ba1b3e8f..ffc9f83a 100644
--- a/lib/types/about-page-components.ts
+++ b/lib/types/about-page-components.ts
@@ -199,7 +199,7 @@ export interface AboutTranslationData {
 
 // 检查数据是否为新的动态格式
 export function isDynamicFormat(data: AboutTranslationData): boolean {
-  return Boolean(data.sections && data.sections.length > 0);
+  return Boolean(data && data.sections && data.sections.length > 0);
 }
 
 // 检查数据是否为旧的固定格式
diff --git a/lib/utils/data-migration.ts b/lib/utils/data-migration.ts
index 4abebe36..c91c6695 100644
--- a/lib/utils/data-migration.ts
+++ b/lib/utils/data-migration.ts
@@ -167,6 +167,7 @@ export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
   // 按钮段落
   if (legacy.buttonText) {
     const buttonComponent = createDefaultComponent('button', legacy.buttonText);
+    buttonComponent.props.textAlign = 'center';
     sections.push({
       id: generateUniqueId('section'),
       layout: 'single-column',
diff --git a/lib/utils/performance.ts b/lib/utils/performance.ts
new file mode 100644
index 00000000..b6176785
--- /dev/null
+++ b/lib/utils/performance.ts
@@ -0,0 +1,270 @@
+/**
+ * Performance optimization utilities
+ * 
+ * Provides debouncing, throttling, and lazy loading utilities
+ * for better performance in dynamic component editing.
+ */
+
+import React from 'react';
+
+/**
+ * Debounce function - delays execution until after delay period of inactivity
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    
+    timeoutId = setTimeout(() => {
+      func(...args);
+      timeoutId = null;
+    }, delay);
+  };
+}
+
+/**
+ * Throttle function - limits execution to at most once per delay period
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let lastCall = 0;
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return (...args: Parameters<T>) => {
+    const now = Date.now();
+    
+    if (now - lastCall >= delay) {
+      lastCall = now;
+      func(...args);
+    } else if (!timeoutId) {
+      timeoutId = setTimeout(() => {
+        lastCall = Date.now();
+        func(...args);
+        timeoutId = null;
+      }, delay - (now - lastCall));
+    }
+  };
+}
+
+/**
+ * Create a debounced callback using React hooks
+ */
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number,
+  deps: React.DependencyList
+): T {
+  const debouncedCallback = React.useMemo(
+    () => debounce(callback, delay),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    deps
+  );
+
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => {
+      // Cancel any pending debounced calls
+      const debouncedFn = debouncedCallback as any;
+      if (debouncedFn.cancel) {
+        debouncedFn.cancel();
+      }
+    };
+  }, [debouncedCallback]);
+
+  return debouncedCallback as T;
+}
+
+/**
+ * Throttled callback hook
+ */
+export function useThrottledCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number,
+  deps: React.DependencyList
+): T {
+  const throttledCallback = React.useMemo(
+    () => throttle(callback, delay),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    deps
+  );
+
+  return throttledCallback as T;
+}
+
+/**
+ * Virtual scrolling helper for large lists
+ */
+export interface VirtualScrollOptions {
+  itemHeight: number;
+  containerHeight: number;
+  overscan?: number;
+}
+
+export interface VirtualScrollResult {
+  startIndex: number;
+  endIndex: number;
+  offsetY: number;
+  totalHeight: number;
+}
+
+export function calculateVirtualScroll(
+  scrollTop: number,
+  itemCount: number,
+  options: VirtualScrollOptions
+): VirtualScrollResult {
+  const { itemHeight, containerHeight, overscan = 2 } = options;
+  
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(
+    itemCount - 1,
+    Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
+  );
+  
+  return {
+    startIndex,
+    endIndex,
+    offsetY: startIndex * itemHeight,
+    totalHeight: itemCount * itemHeight,
+  };
+}
+
+/**
+ * Intersection Observer hook for lazy loading
+ */
+export function useIntersectionObserver(
+  ref: React.RefObject<Element>,
+  options: IntersectionObserverInit = {}
+) {
+  const [isIntersecting, setIsIntersecting] = React.useState(false);
+  const [hasIntersected, setHasIntersected] = React.useState(false);
+
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      const isElementIntersecting = entry.isIntersecting;
+      setIsIntersecting(isElementIntersecting);
+      
+      if (isElementIntersecting && !hasIntersected) {
+        setHasIntersected(true);
+      }
+    }, options);
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [ref, options, hasIntersected]);
+
+  return { isIntersecting, hasIntersected };
+}
+
+/**
+ * Performance monitoring utilities
+ */
+export class PerformanceMonitor {
+  private static measurements = new Map<string, number>();
+  
+  static startMeasurement(name: string): void {
+    this.measurements.set(name, performance.now());
+  }
+  
+  static endMeasurement(name: string): number | null {
+    const startTime = this.measurements.get(name);
+    if (!startTime) return null;
+    
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+    
+    this.measurements.delete(name);
+    
+    // Log slow operations in development
+    if (process.env.NODE_ENV === 'development' && duration > 16) {
+      console.warn(`Slow operation detected: ${name} took ${duration.toFixed(2)}ms`);
+    }
+    
+    return duration;
+  }
+  
+  static measureAsync<T>(name: string, fn: () => Promise<T>): Promise<T> {
+    this.startMeasurement(name);
+    return fn().finally(() => {
+      this.endMeasurement(name);
+    });
+  }
+  
+  static measure<T>(name: string, fn: () => T): T {
+    this.startMeasurement(name);
+    try {
+      return fn();
+    } finally {
+      this.endMeasurement(name);
+    }
+  }
+}
+
+/**
+ * Memoization utilities
+ */
+export function createMemoizedSelector<T, R>(
+  selector: (input: T) => R,
+  areEqual: (a: T, b: T) => boolean = Object.is
+): (input: T) => R {
+  let lastInput: T;
+  let lastResult: R;
+  let hasResult = false;
+
+  return (input: T): R => {
+    if (!hasResult || !areEqual(input, lastInput)) {
+      lastInput = input;
+      lastResult = selector(input);
+      hasResult = true;
+    }
+    return lastResult;
+  };
+}
+
+/**
+ * Deep comparison for React dependency arrays
+ */
+export function useDeepCompareMemoize<T>(value: T): T {
+  const ref = React.useRef<T>(value);
+  const signalRef = React.useRef<number>(0);
+
+  if (!deepEqual(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useMemo(() => ref.current, [signalRef.current]);
+}
+
+/**
+ * Simple deep equality check
+ */
+function deepEqual(a: any, b: any): boolean {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== 'object') return a === b;
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false;
+    if (!deepEqual(a[key], b[key])) return false;
+  }
+
+  return true;
+}
\ No newline at end of file
diff --git a/messages/de-DE.json b/messages/de-DE.json
index e011aab0..596d8255 100644
--- a/messages/de-DE.json
+++ b/messages/de-DE.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "Über AgentifUI",
-      "subtitle": "KI mit Unternehmen verbinden, neue Erfahrungen mit großen Sprachmodellen schaffen",
-      "loading": "Laden...",
-      "mission": {
-        "title": "Unsere Mission",
-        "description": "AgentifUI ist bestrebt, die Kraft großer Sprachmodelle zu nutzen, um innovative Anwendungslösungen für Unternehmen bereitzustellen. Wir integrieren Fähigkeiten von mehreren Modellanbietern und bieten stabile, zuverlässige Dienste basierend auf Dify-Backend, um Organisationen dabei zu helfen, den Wert der KI-Technologie voll auszuschöpfen."
-      },
-      "values": {
-        "title": "Unsere Werte",
-        "items": [
-          {
-            "title": "Technische Innovation",
-            "description": "Kontinuierliche Integration von Spitzentechnologien großer Modelle, um führende KI-Lösungen für Unternehmen bereitzustellen"
-          },
-          {
-            "title": "Datensicherheit",
-            "description": "Unterstützung für private Bereitstellung und strenge Datenschutzmaßnahmen, um die Sicherheit und Privatsphäre von Unternehmensdaten zu gewährleisten"
-          },
-          {
-            "title": "Flexible Anpassung",
-            "description": "Bereitstellung hochgradig anpassbarer Lösungen, um spezifische Anforderungen verschiedener Branchen und Szenarien zu erfüllen"
-          },
-          {
-            "title": "Wissenserweiterung",
-            "description": "Integration privater Wissensdatenbanken durch RAG-Technologie, um die kontextuelle Wahrnehmungsfähigkeiten des Modells zu verbessern"
-          }
-        ]
-      },
-      "buttonText": "Entdeckung beginnen",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Die Zukunft großer Modellanwendungen erkunden."
+      "sections": [
+        {
+          "id": "section-1754655785523-melks92kj",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-1mt7ry2h1",
+                "type": "heading",
+                "props": {
+                  "content": "Über AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785523-bsuhbox61",
+                "type": "paragraph",
+                "props": {
+                  "content": "KI mit Unternehmen verbinden, neue Erfahrungen mit großen Sprachmodellen schaffen",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785523-ryaz5ht6j",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-6gq22iobt",
+                "type": "heading",
+                "props": {
+                  "content": "Unsere Mission",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785523-c0x35q9wh",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI ist bestrebt, die Kraft großer Sprachmodelle zu nutzen, um innovative Anwendungslösungen für Unternehmen bereitzustellen. Wir integrieren Fähigkeiten von mehreren Modellanbietern und bieten stabile, zuverlässige Dienste basierend auf Dify-Backend, um Organisationen dabei zu helfen, den Wert der KI-Technologie voll auszuschöpfen.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785523-8ohef4opd",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-kvs53j5t5",
+                "type": "heading",
+                "props": {
+                  "content": "Unsere Werte",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785523-w07dgvlu8",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Technische Innovation",
+                      "description": "Kontinuierliche Integration von Spitzentechnologien großer Modelle, um führende KI-Lösungen für Unternehmen bereitzustellen"
+                    },
+                    {
+                      "title": "Datensicherheit",
+                      "description": "Unterstützung für private Bereitstellung und strenge Datenschutzmaßnahmen, um die Sicherheit und Privatsphäre von Unternehmensdaten zu gewährleisten"
+                    },
+                    {
+                      "title": "Flexible Anpassung",
+                      "description": "Bereitstellung hochgradig anpassbarer Lösungen, um spezifische Anforderungen verschiedener Branchen und Szenarien zu erfüllen"
+                    },
+                    {
+                      "title": "Wissenserweiterung",
+                      "description": "Integration privater Wissensdatenbanken durch RAG-Technologie, um die kontextuelle Wahrnehmungsfähigkeiten des Modells zu verbessern"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785523-cpif88jjm",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-vzki74h7g",
+                "type": "button",
+                "props": {
+                  "text": "Entdeckung beginnen",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785523-gdsjspvrz",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-yqfx2g011",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Die Zukunft großer Modellanwendungen erkunden.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.523Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.523Z",
+        "locale": "de-DE"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/en-US.json b/messages/en-US.json
index 5751d0c3..524ca975 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "About AgentifUI",
-      "subtitle": "Connecting AI with enterprises, creating new experiences with large language models",
-      "loading": "Loading...",
-      "mission": {
-        "title": "Our Mission",
-        "description": "AgentifUI is committed to leveraging the power of large language models to provide innovative application solutions for enterprises. We integrate capabilities from multiple model providers and provide stable, reliable services based on Dify backend, helping organizations fully utilize the value of AI technology."
-      },
-      "values": {
-        "title": "Our Values",
-        "items": [
-          {
-            "title": "Technical Innovation",
-            "description": "Continuously integrate cutting-edge large model technologies to provide leading AI solutions for enterprises"
-          },
-          {
-            "title": "Data Security",
-            "description": "Support private deployment and strict data protection measures to ensure the security and privacy of enterprise data"
-          },
-          {
-            "title": "Flexible Customization",
-            "description": "Provide highly customizable solutions to meet specific needs of different industries and scenarios"
-          },
-          {
-            "title": "Knowledge Enhancement",
-            "description": "Integrate private knowledge bases through RAG technology to enhance model's contextual awareness capabilities"
-          }
-        ]
-      },
-      "buttonText": "Start Exploring",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore the future of large model applications."
+      "sections": [
+        {
+          "id": "section-1754655785510-hi9o34kms",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-9wmd3qfbr",
+                "type": "heading",
+                "props": {
+                  "content": "About AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785510-8kgg6bug1",
+                "type": "paragraph",
+                "props": {
+                  "content": "Connecting AI with enterprises, creating new experiences with large language models",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-4gy9xxu1j",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-wmcqou18g",
+                "type": "heading",
+                "props": {
+                  "content": "Our Mission",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785510-422a30k5a",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI is committed to leveraging the power of large language models to provide innovative application solutions for enterprises. We integrate capabilities from multiple model providers and provide stable, reliable services based on Dify backend, helping organizations fully utilize the value of AI technology.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-ftxgzp8bp",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-trc6k02bt",
+                "type": "heading",
+                "props": {
+                  "content": "Our Values",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785510-rat1vf5ow",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Technical Innovation",
+                      "description": "Continuously integrate cutting-edge large model technologies to provide leading AI solutions for enterprises"
+                    },
+                    {
+                      "title": "Data Security",
+                      "description": "Support private deployment and strict data protection measures to ensure the security and privacy of enterprise data"
+                    },
+                    {
+                      "title": "Flexible Customization",
+                      "description": "Provide highly customizable solutions to meet specific needs of different industries and scenarios"
+                    },
+                    {
+                      "title": "Knowledge Enhancement",
+                      "description": "Integrate private knowledge bases through RAG technology to enhance model's contextual awareness capabilities"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-ul1fhhk7e",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-ac4fm11q8",
+                "type": "button",
+                "props": {
+                  "text": "Start Exploring",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-7dkmyp6wa",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-8fd66745a",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explore the future of large model applications.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.510Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.510Z",
+        "locale": "en-US"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/es-ES.json b/messages/es-ES.json
index 5e073ff8..082ee46d 100644
--- a/messages/es-ES.json
+++ b/messages/es-ES.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "Acerca de AgentifUI",
-      "subtitle": "Conectando IA con empresas, creando nuevas experiencias con modelos de lenguaje grandes",
-      "loading": "Cargando...",
-      "mission": {
-        "title": "Nuestra Misión",
-        "description": "AgentifUI se compromete a aprovechar el poder de los modelos de lenguaje grandes para proporcionar soluciones de aplicación innovadoras para empresas. Integramos capacidades de múltiples proveedores de modelos y proporcionamos servicios estables y confiables basados en backend Dify, ayudando a las organizaciones a utilizar completamente el valor de la tecnología IA."
-      },
-      "values": {
-        "title": "Nuestros Valores",
-        "items": [
-          {
-            "title": "Innovación Técnica",
-            "description": "Integrar continuamente tecnologías de modelos grandes de vanguardia para proporcionar soluciones IA líderes para empresas"
-          },
-          {
-            "title": "Seguridad de Datos",
-            "description": "Soporte para despliegue privado y medidas estrictas de protección de datos para garantizar la seguridad y privacidad de los datos empresariales"
-          },
-          {
-            "title": "Personalización Flexible",
-            "description": "Proporcionar soluciones altamente personalizables para satisfacer necesidades específicas de diferentes industrias y escenarios"
-          },
-          {
-            "title": "Mejora de Conocimiento",
-            "description": "Integrar bases de conocimiento privadas a través de tecnología RAG para mejorar las capacidades de conciencia contextual del modelo"
-          }
-        ]
-      },
-      "buttonText": "Comenzar a Explorar",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explora el futuro de las aplicaciones de modelos grandes."
+      "sections": [
+        {
+          "id": "section-1754655785539-c19suif9u",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-i1ftzar4w",
+                "type": "heading",
+                "props": {
+                  "content": "Acerca de AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785539-b2qh6e8dc",
+                "type": "paragraph",
+                "props": {
+                  "content": "Conectando IA con empresas, creando nuevas experiencias con modelos de lenguaje grandes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785539-ukusawm02",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-8n5zs2eaz",
+                "type": "heading",
+                "props": {
+                  "content": "Nuestra Misión",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785539-npz3qmgyg",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI se compromete a aprovechar el poder de los modelos de lenguaje grandes para proporcionar soluciones de aplicación innovadoras para empresas. Integramos capacidades de múltiples proveedores de modelos y proporcionamos servicios estables y confiables basados en backend Dify, ayudando a las organizaciones a utilizar completamente el valor de la tecnología IA.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785539-u1p9lrnhb",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-bd7il5wtx",
+                "type": "heading",
+                "props": {
+                  "content": "Nuestros Valores",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785539-au21wwllc",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Innovación Técnica",
+                      "description": "Integrar continuamente tecnologías de modelos grandes de vanguardia para proporcionar soluciones IA líderes para empresas"
+                    },
+                    {
+                      "title": "Seguridad de Datos",
+                      "description": "Soporte para despliegue privado y medidas estrictas de protección de datos para garantizar la seguridad y privacidad de los datos empresariales"
+                    },
+                    {
+                      "title": "Personalización Flexible",
+                      "description": "Proporcionar soluciones altamente personalizables para satisfacer necesidades específicas de diferentes industrias y escenarios"
+                    },
+                    {
+                      "title": "Mejora de Conocimiento",
+                      "description": "Integrar bases de conocimiento privadas a través de tecnología RAG para mejorar las capacidades de conciencia contextual del modelo"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785539-0435zlw1u",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-d19fs9aut",
+                "type": "button",
+                "props": {
+                  "text": "Comenzar a Explorar",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785539-e0s3c1c3j",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-sxxoy6s4k",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explora el futuro de las aplicaciones de modelos grandes.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.539Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.539Z",
+        "locale": "es-ES"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/fr-FR.json b/messages/fr-FR.json
index 6ad15bbd..36cf77e0 100644
--- a/messages/fr-FR.json
+++ b/messages/fr-FR.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "À propos d'AgentifUI",
-      "subtitle": "Connecter l'IA aux entreprises, créer de nouvelles expériences avec les grands modèles de langage",
-      "loading": "Chargement...",
-      "mission": {
-        "title": "Notre mission",
-        "description": "AgentifUI s'engage à exploiter la puissance des grands modèles de langage pour fournir des solutions applicatives innovantes aux entreprises. Nous intégrons les capacités de plusieurs fournisseurs de modèles et fournissons des services stables et fiables basés sur le backend Dify, aidant les organisations à utiliser pleinement la valeur de la technologie IA."
-      },
-      "values": {
-        "title": "Nos valeurs",
-        "items": [
-          {
-            "title": "Innovation technique",
-            "description": "Intégrer en continu les technologies de pointe des grands modèles pour fournir des solutions IA de premier plan aux entreprises"
-          },
-          {
-            "title": "Sécurité des données",
-            "description": "Soutenir le déploiement privé et des mesures strictes de protection des données pour garantir la sécurité et la confidentialité des données de l'entreprise"
-          },
-          {
-            "title": "Personnalisation flexible",
-            "description": "Fournir des solutions hautement personnalisables pour répondre aux besoins spécifiques des différentes industries et scénarios"
-          },
-          {
-            "title": "Amélioration des connaissances",
-            "description": "Intégrer des bases de connaissances privées via la technologie RAG pour améliorer les capacités de conscience contextuelle du modèle"
-          }
-        ]
-      },
-      "buttonText": "Commencer à explorer",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explorez l'avenir des applications de grands modèles."
+      "sections": [
+        {
+          "id": "section-1754655785527-9372afg5u",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-r5env4t5w",
+                "type": "heading",
+                "props": {
+                  "content": "À propos d'AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785527-l8xn5ixxl",
+                "type": "paragraph",
+                "props": {
+                  "content": "Connecter l'IA aux entreprises, créer de nouvelles expériences avec les grands modèles de langage",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785527-3m5genq0l",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-r4aulvhjk",
+                "type": "heading",
+                "props": {
+                  "content": "Notre mission",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785527-uo6h0hoog",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI s'engage à exploiter la puissance des grands modèles de langage pour fournir des solutions applicatives innovantes aux entreprises. Nous intégrons les capacités de plusieurs fournisseurs de modèles et fournissons des services stables et fiables basés sur le backend Dify, aidant les organisations à utiliser pleinement la valeur de la technologie IA.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785527-zm5tcp7tt",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-vvejqx8sf",
+                "type": "heading",
+                "props": {
+                  "content": "Nos valeurs",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785527-ex4409e7y",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Innovation technique",
+                      "description": "Intégrer en continu les technologies de pointe des grands modèles pour fournir des solutions IA de premier plan aux entreprises"
+                    },
+                    {
+                      "title": "Sécurité des données",
+                      "description": "Soutenir le déploiement privé et des mesures strictes de protection des données pour garantir la sécurité et la confidentialité des données de l'entreprise"
+                    },
+                    {
+                      "title": "Personnalisation flexible",
+                      "description": "Fournir des solutions hautement personnalisables pour répondre aux besoins spécifiques des différentes industries et scénarios"
+                    },
+                    {
+                      "title": "Amélioration des connaissances",
+                      "description": "Intégrer des bases de connaissances privées via la technologie RAG pour améliorer les capacités de conscience contextuelle du modèle"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785527-y4yiipyyk",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-1r3lxt6xc",
+                "type": "button",
+                "props": {
+                  "text": "Commencer à explorer",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785527-i2m407ojn",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-m8l8x5hm2",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explorez l'avenir des applications de grands modèles.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.527Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.527Z",
+        "locale": "fr-FR"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/it-IT.json b/messages/it-IT.json
index e0693e93..4bbdd859 100644
--- a/messages/it-IT.json
+++ b/messages/it-IT.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "Informazioni su AgentifUI",
-      "subtitle": "Connettere l'IA con le imprese, creando nuove esperienze con grandi modelli linguistici",
-      "loading": "Caricamento...",
-      "mission": {
-        "title": "La Nostra Missione",
-        "description": "AgentifUI si impegna a sfruttare la potenza dei grandi modelli linguistici per fornire soluzioni applicative innovative per le imprese. Integriamo le capacità di più fornitori di modelli e forniamo servizi stabili e affidabili basati sul backend di Dify, aiutando le organizzazioni a utilizzare appieno il valore della tecnologia IA."
-      },
-      "values": {
-        "title": "I Nostri Valori",
-        "items": [
-          {
-            "title": "Innovazione Tecnica",
-            "description": "Integrare continuamente tecnologie all'avanguardia di grandi modelli per fornire soluzioni IA leader per le imprese"
-          },
-          {
-            "title": "Sicurezza dei Dati",
-            "description": "Supportare la distribuzione privata e rigorose misure di protezione dei dati per garantire la sicurezza e la privacy dei dati aziendali"
-          },
-          {
-            "title": "Personalizzazione Flessibile",
-            "description": "Fornire soluzioni altamente personalizzabili per soddisfare le esigenze specifiche di diversi settori e scenari"
-          },
-          {
-            "title": "Miglioramento della Conoscenza",
-            "description": "Integrare basi di conoscenza private tramite la tecnologia RAG per migliorare le capacità di consapevolezza contestuale del modello"
-          }
-        ]
-      },
-      "buttonText": "Inizia a Esplorare",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Esplora il futuro delle applicazioni di grandi modelli."
+      "sections": [
+        {
+          "id": "section-1754655785533-eloh11o61",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-z38dxe2cr",
+                "type": "heading",
+                "props": {
+                  "content": "Informazioni su AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785533-qnxmx4ycv",
+                "type": "paragraph",
+                "props": {
+                  "content": "Connettere l'IA con le imprese, creando nuove esperienze con grandi modelli linguistici",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785533-0c0tqr23z",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-dc7y75lx4",
+                "type": "heading",
+                "props": {
+                  "content": "La Nostra Missione",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785533-uokca1y3i",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI si impegna a sfruttare la potenza dei grandi modelli linguistici per fornire soluzioni applicative innovative per le imprese. Integriamo le capacità di più fornitori di modelli e forniamo servizi stabili e affidabili basati sul backend di Dify, aiutando le organizzazioni a utilizzare appieno il valore della tecnologia IA.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785533-jwrlxby40",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-nw7469jtw",
+                "type": "heading",
+                "props": {
+                  "content": "I Nostri Valori",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785533-j6hungucq",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Innovazione Tecnica",
+                      "description": "Integrare continuamente tecnologie all'avanguardia di grandi modelli per fornire soluzioni IA leader per le imprese"
+                    },
+                    {
+                      "title": "Sicurezza dei Dati",
+                      "description": "Supportare la distribuzione privata e rigorose misure di protezione dei dati per garantire la sicurezza e la privacy dei dati aziendali"
+                    },
+                    {
+                      "title": "Personalizzazione Flessibile",
+                      "description": "Fornire soluzioni altamente personalizzabili per soddisfare le esigenze specifiche di diversi settori e scenari"
+                    },
+                    {
+                      "title": "Miglioramento della Conoscenza",
+                      "description": "Integrare basi di conoscenza private tramite la tecnologia RAG per migliorare le capacità di consapevolezza contestuale del modello"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785533-0o4u0z1ex",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-79q1kzcs2",
+                "type": "button",
+                "props": {
+                  "text": "Inizia a Esplorare",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785533-68esngg0h",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-7piv2dhg7",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Esplora il futuro delle applicazioni di grandi modelli.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.533Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.533Z",
+        "locale": "it-IT"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/ja-JP.json b/messages/ja-JP.json
index fd6173fe..178a04da 100644
--- a/messages/ja-JP.json
+++ b/messages/ja-JP.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "AgentifUIについて",
-      "subtitle": "AIと企業を繋ぎ、大規模言語モデルで新しい体験を創造",
-      "loading": "読み込み中...",
-      "mission": {
-        "title": "私たちの使命",
-        "description": "AgentifUIは大規模言語モデルの力を活用し、企業に革新的なアプリケーションソリューションを提供することに取り組んでいます。複数のモデルプロバイダーの能力を統合し、Difyバックエンドに基づく安定した信頼性の高いサービスを提供し、組織がAI技術の価値を最大限に活用できるよう支援します。"
-      },
-      "values": {
-        "title": "私たちの価値観",
-        "items": [
-          {
-            "title": "技術革新",
-            "description": "最先端の大規模モデル技術を継続的に統合し、企業に最先端のAIソリューションを提供"
-          },
-          {
-            "title": "データセキュリティ",
-            "description": "プライベート展開と厳格なデータ保護措置をサポートし、企業データのセキュリティとプライバシーを保証"
-          },
-          {
-            "title": "柔軟なカスタマイズ",
-            "description": "高度にカスタマイズ可能なソリューションを提供し、異なる業界とシナリオの特定のニーズに対応"
-          },
-          {
-            "title": "知識強化",
-            "description": "RAG技術を通じてプライベート知識ベースを統合し、モデルのコンテキスト認識能力を強化"
-          }
-        ]
-      },
-      "buttonText": "探索を始める",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": "。大規模モデルアプリケーションの未来を探求。"
+      "sections": [
+        {
+          "id": "section-1754655785520-817etyg0d",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-22626u94f",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUIについて",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785520-9e9qre6gq",
+                "type": "paragraph",
+                "props": {
+                  "content": "AIと企業を繋ぎ、大規模言語モデルで新しい体験を創造",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785520-lt84rggrn",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-tdp6yjlmz",
+                "type": "heading",
+                "props": {
+                  "content": "私たちの使命",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785520-9vsha3qtk",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUIは大規模言語モデルの力を活用し、企業に革新的なアプリケーションソリューションを提供することに取り組んでいます。複数のモデルプロバイダーの能力を統合し、Difyバックエンドに基づく安定した信頼性の高いサービスを提供し、組織がAI技術の価値を最大限に活用できるよう支援します。",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785520-rp9u08tjy",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-yldbhhn6i",
+                "type": "heading",
+                "props": {
+                  "content": "私たちの価値観",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785520-9lcaoqkek",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "技術革新",
+                      "description": "最先端の大規模モデル技術を継続的に統合し、企業に最先端のAIソリューションを提供"
+                    },
+                    {
+                      "title": "データセキュリティ",
+                      "description": "プライベート展開と厳格なデータ保護措置をサポートし、企業データのセキュリティとプライバシーを保証"
+                    },
+                    {
+                      "title": "柔軟なカスタマイズ",
+                      "description": "高度にカスタマイズ可能なソリューションを提供し、異なる業界とシナリオの特定のニーズに対応"
+                    },
+                    {
+                      "title": "知識強化",
+                      "description": "RAG技術を通じてプライベート知識ベースを統合し、モデルのコンテキスト認識能力を強化"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785520-3s050qgmy",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-a3uo1m6lo",
+                "type": "button",
+                "props": {
+                  "text": "探索を始める",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785520-sfsoc34ab",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-sukotrhas",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI。大規模モデルアプリケーションの未来を探求。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.520Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.520Z",
+        "locale": "ja-JP"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/pt-PT.json b/messages/pt-PT.json
index a40b540f..1acfa0e4 100644
--- a/messages/pt-PT.json
+++ b/messages/pt-PT.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "Sobre o AgentifUI",
-      "subtitle": "A conectar a IA com empresas, criando novas experiências com modelos de linguagem grandes",
-      "loading": "A carregar...",
-      "mission": {
-        "title": "A Nossa Missão",
-        "description": "O AgentifUI está empenhado em alavancar o poder dos modelos de linguagem grandes para fornecer soluções de aplicação inovadoras para empresas. Integramos capacidades de múltiplos fornecedores de modelos e fornecemos serviços estáveis e fiáveis baseados no backend Dify, ajudando as organizações a utilizar plenamente o valor da tecnologia de IA."
-      },
-      "values": {
-        "title": "Os Nossos Valores",
-        "items": [
-          {
-            "title": "Inovação Tecnológica",
-            "description": "Integrar continuamente tecnologias de ponta de modelos grandes para fornecer soluções de IA líderes para empresas"
-          },
-          {
-            "title": "Segurança de Dados",
-            "description": "Suportar implementação privada e medidas rigorosas de proteção de dados para garantir a segurança e privacidade dos dados empresariais"
-          },
-          {
-            "title": "Personalização Flexível",
-            "description": "Fornecer soluções altamente personalizáveis para satisfazer as necessidades específicas de diferentes indústrias e cenários"
-          },
-          {
-            "title": "Melhoria de Conhecimento",
-            "description": "Integrar bases de conhecimento privadas através da tecnologia RAG para melhorar as capacidades de consciência contextual do modelo"
-          }
-        ]
-      },
-      "buttonText": "Começar a Explorar",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore o futuro das aplicações de modelos grandes."
+      "sections": [
+        {
+          "id": "section-1754655785536-fggk34aml",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-no51c4iks",
+                "type": "heading",
+                "props": {
+                  "content": "Sobre o AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785536-p51acxm7s",
+                "type": "paragraph",
+                "props": {
+                  "content": "A conectar a IA com empresas, criando novas experiências com modelos de linguagem grandes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785536-bjqx7y3hq",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-srdun3d41",
+                "type": "heading",
+                "props": {
+                  "content": "A Nossa Missão",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785536-99r6172ti",
+                "type": "paragraph",
+                "props": {
+                  "content": "O AgentifUI está empenhado em alavancar o poder dos modelos de linguagem grandes para fornecer soluções de aplicação inovadoras para empresas. Integramos capacidades de múltiplos fornecedores de modelos e fornecemos serviços estáveis e fiáveis baseados no backend Dify, ajudando as organizações a utilizar plenamente o valor da tecnologia de IA.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785536-rs6murtq2",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-q26j7prhd",
+                "type": "heading",
+                "props": {
+                  "content": "Os Nossos Valores",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785536-vjc6a0pp2",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Inovação Tecnológica",
+                      "description": "Integrar continuamente tecnologias de ponta de modelos grandes para fornecer soluções de IA líderes para empresas"
+                    },
+                    {
+                      "title": "Segurança de Dados",
+                      "description": "Suportar implementação privada e medidas rigorosas de proteção de dados para garantir a segurança e privacidade dos dados empresariais"
+                    },
+                    {
+                      "title": "Personalização Flexível",
+                      "description": "Fornecer soluções altamente personalizáveis para satisfazer as necessidades específicas de diferentes indústrias e cenários"
+                    },
+                    {
+                      "title": "Melhoria de Conhecimento",
+                      "description": "Integrar bases de conhecimento privadas através da tecnologia RAG para melhorar as capacidades de consciência contextual do modelo"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785536-wzk6bznx9",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-8jkrh1ax0",
+                "type": "button",
+                "props": {
+                  "text": "Começar a Explorar",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785536-dwv0bz2jy",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-ihwp8sjl9",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explore o futuro das aplicações de modelos grandes.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.536Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.536Z",
+        "locale": "pt-PT"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/ru-RU.json b/messages/ru-RU.json
index efec4095..49d557d7 100644
--- a/messages/ru-RU.json
+++ b/messages/ru-RU.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "О AgentifUI",
-      "subtitle": "Соединяем ИИ с предприятиями, создаем новые впечатления с помощью больших языковых моделей",
-      "loading": "Загрузка...",
-      "mission": {
-        "title": "Наша миссия",
-        "description": "AgentifUI стремится использовать мощь больших языковых моделей для предоставления инновационных прикладных решений для предприятий. Мы интегрируем возможности нескольких поставщиков моделей и предоставляем стабильные, надежные услуги на базе бэкенда Dify, помогая организациям в полной мере использовать ценность технологий ИИ."
-      },
-      "values": {
-        "title": "Наши ценности",
-        "items": [
-          {
-            "title": "Технологические инновации",
-            "description": "Постоянно интегрируем передовые технологии больших моделей, чтобы предоставлять ведущие ИИ-решения для предприятий"
-          },
-          {
-            "title": "Безопасность данных",
-            "description": "Поддерживаем частное развертывание и строгие меры защиты данных для обеспечения безопасности и конфиденциальности данных предприятия"
-          },
-          {
-            "title": "Гибкая настройка",
-            "description": "Предоставляем высоко настраиваемые решения для удовлетворения конкретных потребностей различных отраслей и сценариев"
-          },
-          {
-            "title": "Улучшение знаний",
-            "description": "Интегрируем частные базы знаний с помощью технологии RAG для улучшения контекстной осведомленности модели"
-          }
-        ]
-      },
-      "buttonText": "Начать исследование",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Исследуйте будущее приложений больших моделей."
+      "sections": [
+        {
+          "id": "section-1754655785530-fmrppai9k",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-zy13p3of7",
+                "type": "heading",
+                "props": {
+                  "content": "О AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785530-zm2ujx2vd",
+                "type": "paragraph",
+                "props": {
+                  "content": "Соединяем ИИ с предприятиями, создаем новые впечатления с помощью больших языковых моделей",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785530-918ad1vth",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-mp1j070s1",
+                "type": "heading",
+                "props": {
+                  "content": "Наша миссия",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785530-zyx3fzq2n",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI стремится использовать мощь больших языковых моделей для предоставления инновационных прикладных решений для предприятий. Мы интегрируем возможности нескольких поставщиков моделей и предоставляем стабильные, надежные услуги на базе бэкенда Dify, помогая организациям в полной мере использовать ценность технологий ИИ.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785530-7kef2520w",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-bd5nzxcyi",
+                "type": "heading",
+                "props": {
+                  "content": "Наши ценности",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785530-fegb2e1cp",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Технологические инновации",
+                      "description": "Постоянно интегрируем передовые технологии больших моделей, чтобы предоставлять ведущие ИИ-решения для предприятий"
+                    },
+                    {
+                      "title": "Безопасность данных",
+                      "description": "Поддерживаем частное развертывание и строгие меры защиты данных для обеспечения безопасности и конфиденциальности данных предприятия"
+                    },
+                    {
+                      "title": "Гибкая настройка",
+                      "description": "Предоставляем высоко настраиваемые решения для удовлетворения конкретных потребностей различных отраслей и сценариев"
+                    },
+                    {
+                      "title": "Улучшение знаний",
+                      "description": "Интегрируем частные базы знаний с помощью технологии RAG для улучшения контекстной осведомленности модели"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785530-3x3l6zpn1",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-t40laywew",
+                "type": "button",
+                "props": {
+                  "text": "Начать исследование",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785530-jumlsf7aa",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-ewyln1yz7",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Исследуйте будущее приложений больших моделей.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.530Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.530Z",
+        "locale": "ru-RU"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index 0d039ef2..05114a7e 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "关于 AgentifUI",
-      "subtitle": "连接 AI 与企业，打造大模型应用新体验",
-      "loading": "加载中...",
-      "mission": {
-        "title": "我们的使命",
-        "description": "AgentifUI 致力于利用大型语言模型的力量，为企业提供创新的应用解决方案。我们整合了多种模型供应商的能力，并基于 Dify 后端提供稳定、可靠的服务，帮助团队充分利用 AI 技术的价值。"
-      },
-      "values": {
-        "title": "我们的价值观",
-        "items": [
-          {
-            "title": "技术创新",
-            "description": "持续集成前沿的大模型技术，为企业提供领先的 AI 解决方案"
-          },
-          {
-            "title": "数据安全",
-            "description": "支持私有化部署和严格的数据保护措施，确保企业数据的安全与隐私"
-          },
-          {
-            "title": "灵活定制",
-            "description": "提供高度可定制的解决方案，满足不同行业和场景的特定需求"
-          },
-          {
-            "title": "知识增强",
-            "description": "通过 RAG 技术实现私有知识库的整合，增强模型的上下文感知能力"
-          }
-        ]
-      },
-      "buttonText": "开始探索",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索大模型应用的未来。"
+      "sections": [
+        {
+          "id": "section-1754655785513-1coqlomn8",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-drqxj9u2y",
+                "type": "heading",
+                "props": {
+                  "content": "关于 AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785513-9ofzcdpsf",
+                "type": "paragraph",
+                "props": {
+                  "content": "连接 AI 与企业，打造大模型应用新体验",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-9prn2le6b",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-tx96kmz4r",
+                "type": "heading",
+                "props": {
+                  "content": "我们的使命",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785513-kjjf0b6zo",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI 致力于利用大型语言模型的力量，为企业提供创新的应用解决方案。我们整合了多种模型供应商的能力，并基于 Dify 后端提供稳定、可靠的服务，帮助团队充分利用 AI 技术的价值。",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-s2cs5yr9y",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-ldeft2c7k",
+                "type": "heading",
+                "props": {
+                  "content": "我们的价值观",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785513-igu96ir94",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "技术创新",
+                      "description": "持续集成前沿的大模型技术，为企业提供领先的 AI 解决方案"
+                    },
+                    {
+                      "title": "数据安全",
+                      "description": "支持私有化部署和严格的数据保护措施，确保企业数据的安全与隐私"
+                    },
+                    {
+                      "title": "灵活定制",
+                      "description": "提供高度可定制的解决方案，满足不同行业和场景的特定需求"
+                    },
+                    {
+                      "title": "知识增强",
+                      "description": "通过 RAG 技术实现私有知识库的整合，增强模型的上下文感知能力"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-2pmrtihgq",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-3l83pa52m",
+                "type": "button",
+                "props": {
+                  "text": "开始探索",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-byfail2zl",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-ip1qbopuu",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. 探索大模型应用的未来。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.513Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.513Z",
+        "locale": "zh-CN"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/messages/zh-TW.json b/messages/zh-TW.json
index a911e156..3b2963e6 100644
--- a/messages/zh-TW.json
+++ b/messages/zh-TW.json
@@ -1916,39 +1916,142 @@
       }
     },
     "about": {
-      "title": "關於 AgentifUI",
-      "subtitle": "連接 AI 與企業，打造大模型應用新體驗",
-      "loading": "載入中...",
-      "mission": {
-        "title": "我們的使命",
-        "description": "AgentifUI 致力於利用大型語言模型的力量，為企業提供創新的應用解決方案。我們整合了多種模型供應商的能力，並基於 Dify 後端提供穩定、可靠的服務，幫助組織充分利用 AI 技術的價值。"
-      },
-      "values": {
-        "title": "我們的價值觀",
-        "items": [
-          {
-            "title": "技術創新",
-            "description": "持續整合前沿的大模型技術，為企業提供領先的 AI 解決方案"
-          },
-          {
-            "title": "資料安全",
-            "description": "支援私有化部署和嚴格的資料保護措施，確保企業資料的安全與隱私"
-          },
-          {
-            "title": "靈活客製",
-            "description": "提供高度可客製的解決方案，滿足不同行業和情境的特定需求"
-          },
-          {
-            "title": "知識增強",
-            "description": "透過 RAG 技術實現私有知識庫的整合，增強模型的上下文感知能力"
-          }
-        ]
-      },
-      "buttonText": "開始探索",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索大模型應用的未來。"
+      "sections": [
+        {
+          "id": "section-1754655785516-0gtnyowfz",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-arpgn8u9r",
+                "type": "heading",
+                "props": {
+                  "content": "關於 AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785516-kwyablkrd",
+                "type": "paragraph",
+                "props": {
+                  "content": "連接 AI 與企業，打造大模型應用新體驗",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785516-cmmopg4cw",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-5ie7wbie9",
+                "type": "heading",
+                "props": {
+                  "content": "我們的使命",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785516-h6vlfnfvd",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI 致力於利用大型語言模型的力量，為企業提供創新的應用解決方案。我們整合了多種模型供應商的能力，並基於 Dify 後端提供穩定、可靠的服務，幫助組織充分利用 AI 技術的價值。",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785516-cxcotoc0i",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-4ajdcbfpz",
+                "type": "heading",
+                "props": {
+                  "content": "我們的價值觀",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785516-qkn65c0pz",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "技術創新",
+                      "description": "持續整合前沿的大模型技術，為企業提供領先的 AI 解決方案"
+                    },
+                    {
+                      "title": "資料安全",
+                      "description": "支援私有化部署和嚴格的資料保護措施，確保企業資料的安全與隱私"
+                    },
+                    {
+                      "title": "靈活客製",
+                      "description": "提供高度可客製的解決方案，滿足不同行業和情境的特定需求"
+                    },
+                    {
+                      "title": "知識增強",
+                      "description": "透過 RAG 技術實現私有知識庫的整合，增強模型的上下文感知能力"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785516-u3wi14baf",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-5fomxvrls",
+                "type": "button",
+                "props": {
+                  "text": "開始探索",
+                  "variant": "primary",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785516-sty7g2pgd",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-4wtktv1bg",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. 探索大模型應用的未來。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.516Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.516Z",
+        "locale": "zh-TW"
       }
     }
   },
@@ -2321,4 +2424,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file

From fd1aada297b4b06eb0349f1aa24422ad01cbdff9 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sat, 9 Aug 2025 17:04:18 +0800
Subject: [PATCH 05/66] fix(admin): resolve canvas scrolling issues in content
 management page

- Fix preview canvas scrolling when split view is enabled
- Fix editor canvas scrolling when preview is disabled
- Change desktop preview min-height from min-h-screen to min-h-0
- Add overflow-hidden to prevent page-level scrolling conflicts
---
 app/admin/content/page.tsx                 | 4 ++--
 components/admin/content/about-preview.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index 1de030d1..9d35b611 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -423,7 +423,7 @@ export default function ContentManagementPage() {
                   onPreviewToggle={() => setShowPreview(!showPreview)}
                   onFullscreenPreview={handleFullscreenPreview}
                 />
-                <div className="min-h-0 flex-1 overflow-auto">
+                <div className="min-h-0 flex-1 overflow-hidden">
                   {renderPreview()}
                 </div>
               </div>
@@ -432,7 +432,7 @@ export default function ContentManagementPage() {
         ) : (
           <div
             className={cn(
-              'relative flex-1',
+              'relative flex-1 overflow-hidden',
               isDark ? 'bg-stone-900' : 'bg-white'
             )}
           >
diff --git a/components/admin/content/about-preview.tsx b/components/admin/content/about-preview.tsx
index a5034ebd..0b2da112 100644
--- a/components/admin/content/about-preview.tsx
+++ b/components/admin/content/about-preview.tsx
@@ -86,7 +86,7 @@ export function AboutPreview({
           screen: 'w-full h-full overflow-hidden relative bg-background',
           content: 'h-full overflow-y-auto',
           mainClass:
-            'min-h-screen w-full py-6 px-4 sm:px-6 lg:px-8 overflow-x-hidden',
+            'min-h-0 w-full py-6 px-4 sm:px-6 lg:px-8 overflow-x-hidden',
           innerContainer: 'max-w-5xl mx-auto',
           maxWidth: 'max-w-5xl',
         };

From 0c3c295d9d3cc3660bcd45f3971ca9faf975fc06 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sat, 9 Aug 2025 17:22:24 +0800
Subject: [PATCH 06/66] refactor(admin): migrate from react-beautiful-dnd to
 @dnd-kit

Migrate drag and drop functionality from deprecated react-beautiful-dnd
to modern @dnd-kit library to resolve technical debt and improve React 18
compatibility.

Key changes:
- Replace react-beautiful-dnd with @dnd-kit/core, @dnd-kit/sortable,
  @dnd-kit/utilities
- Create DndContextWrapper and unified dnd-components with Droppable,
  Draggable, Sortable
- Update about-editor-store to use DragEndEvent instead of DropResult
- Implement arrayMove for sortable functionality within containers
- Remove StrictModeDroppable wrapper (no longer needed with @dnd-kit)
- Update component-palette and about-editor to use new drag system

Benefits:
- React 18 StrictMode compatibility out of the box
- Better TypeScript support and modern API
- Improved performance with built-in optimizations
- Active maintenance and future-proof architecture
---
 components/admin/content/about-editor.tsx     | 189 +++++++----------
 .../admin/content/component-palette.tsx       | 115 +++++-----
 components/admin/content/dnd-components.tsx   | 198 ++++++++++++++++++
 components/admin/content/dnd-context.tsx      |  77 +++++++
 .../admin/content/strict-mode-droppable.tsx   |  36 ----
 lib/stores/about-editor-store.ts              | 156 ++++++++++----
 package.json                                  |   5 +-
 pnpm-lock.yaml                                | 179 +++++-----------
 8 files changed, 570 insertions(+), 385 deletions(-)
 create mode 100644 components/admin/content/dnd-components.tsx
 create mode 100644 components/admin/content/dnd-context.tsx
 delete mode 100644 components/admin/content/strict-mode-droppable.tsx

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 1f15d568..ef3d169f 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -21,9 +21,11 @@ import {
   migrateAboutTranslationData,
 } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
-import { useDebouncedCallback, useThrottledCallback } from '@lib/utils/performance';
+import {
+  useDebouncedCallback,
+  useThrottledCallback,
+} from '@lib/utils/performance';
 import { Plus, Redo2, RotateCcw, Save, Trash2, Undo2 } from 'lucide-react';
-import { DragDropContext, Draggable } from 'react-beautiful-dnd';
 
 import React, { useCallback, useEffect, useMemo } from 'react';
 
@@ -31,8 +33,9 @@ import { useTranslations } from 'next-intl';
 
 import ComponentPalette from './component-palette';
 import ComponentRenderer from './component-renderer';
+import { Droppable, Sortable, SortableContainer } from './dnd-components';
+import { DndContextWrapper } from './dnd-context';
 import PropertyEditor from './property-editor';
-import StrictModeDroppable from './strict-mode-droppable';
 
 interface AboutEditorProps {
   translations: Record<SupportedLocale, AboutTranslationData>;
@@ -129,7 +132,7 @@ export function AboutEditor({
         ...translations,
         [currentLocale]: updatedTranslation,
       };
-      
+
       onTranslationsChange(newTranslations);
     }, [pageContent, translations, currentLocale, onTranslationsChange]),
     1000, // 1 second delay
@@ -138,12 +141,15 @@ export function AboutEditor({
 
   // Throttled property change handler for better performance
   const throttledPropsChange = useThrottledCallback(
-    useCallback((newProps: Record<string, unknown>) => {
-      if (selectedComponentId) {
-        updateComponentProps(selectedComponentId, newProps);
-        debouncedSave(); // Auto-save after prop changes
-      }
-    }, [selectedComponentId, updateComponentProps, debouncedSave]),
+    useCallback(
+      (newProps: Record<string, unknown>) => {
+        if (selectedComponentId) {
+          updateComponentProps(selectedComponentId, newProps);
+          debouncedSave(); // Auto-save after prop changes
+        }
+      },
+      [selectedComponentId, updateComponentProps, debouncedSave]
+    ),
     100, // 100ms throttle
     [selectedComponentId, updateComponentProps]
   );
@@ -207,7 +213,7 @@ export function AboutEditor({
   }
 
   return (
-    <DragDropContext onDragEnd={handleDragEnd}>
+    <DndContextWrapper onDragEnd={handleDragEnd}>
       <div className="flex h-full flex-col">
         {/* Header */}
         <div className="bg-card space-y-4 border-b p-4">
@@ -336,32 +342,14 @@ export function AboutEditor({
                 <div key={section.id} className="space-y-4">
                   {/* Section Drop Zone (before each section) */}
                   {sectionIndex > 0 && (
-                    <StrictModeDroppable
-                      droppableId={`section-drop-${sectionIndex}`}
-                      isCombineEnabled={false}
-                      isDropDisabled={false}
-                      ignoreContainerClipping={false}
+                    <Droppable
+                      id={`section-drop-${sectionIndex}`}
+                      className="h-2 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-blue-300 hover:bg-blue-50 dark:hover:border-blue-600 dark:hover:bg-blue-950"
                     >
-                      {(provided, snapshot) => (
-                        <div
-                          {...provided.droppableProps}
-                          ref={provided.innerRef}
-                          className={cn(
-                            'rounded-lg border-2 border-dashed transition-all duration-200',
-                            snapshot.isDraggingOver
-                              ? 'h-16 border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-950'
-                              : 'h-2 border-transparent'
-                          )}
-                        >
-                          {snapshot.isDraggingOver && (
-                            <div className="flex h-full items-center justify-center text-sm font-medium text-blue-600 dark:text-blue-400">
-                              Drop here to create new section
-                            </div>
-                          )}
-                          {provided.placeholder}
-                        </div>
-                      )}
-                    </StrictModeDroppable>
+                      <div className="flex h-full items-center justify-center text-sm font-medium text-blue-600 opacity-0 hover:opacity-100 dark:text-blue-400">
+                        Drop here to create new section
+                      </div>
+                    </Droppable>
                   )}
 
                   {/* Section Content */}
@@ -392,67 +380,47 @@ export function AboutEditor({
                           section.layout === 'three-column' && 'grid-cols-3'
                         )}
                       >
-                        {section.columns.map((column, columnIndex) => (
-                          <StrictModeDroppable
-                            key={`${section.id}-${columnIndex}`}
-                            droppableId={`section-${section.id}-${columnIndex}`}
-                            isCombineEnabled={false}
-                            isDropDisabled={false}
-                            ignoreContainerClipping={false}
-                          >
-                            {(provided, snapshot) => (
-                              <div
-                                {...provided.droppableProps}
-                                ref={provided.innerRef}
-                                className={cn(
-                                  'min-h-24 rounded-lg border-2 border-dashed p-3 transition-colors',
-                                  snapshot.isDraggingOver
-                                    ? 'border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-950'
-                                    : 'border-border bg-muted/30'
-                                )}
-                              >
-                                {column.length === 0 &&
-                                  !snapshot.isDraggingOver && (
-                                    <div className="text-muted-foreground flex h-16 items-center justify-center text-sm">
-                                      Drop components here
-                                    </div>
+                        {section.columns.map((column, columnIndex) => {
+                          const columnItems = column.map(comp => comp.id);
+                          return (
+                            <SortableContainer
+                              key={`${section.id}-${columnIndex}`}
+                              id={`section-${section.id}-${columnIndex}`}
+                              items={columnItems}
+                              className={cn(
+                                'min-h-24 rounded-lg border-2 border-dashed p-3 transition-colors',
+                                'border-border bg-muted/30'
+                              )}
+                            >
+                              {column.length === 0 && (
+                                <div className="text-muted-foreground flex h-16 items-center justify-center text-sm">
+                                  Drop components here
+                                </div>
+                              )}
+
+                              {column.map(component => (
+                                <Sortable
+                                  key={component.id}
+                                  id={component.id}
+                                  className={cn(
+                                    'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                    selectedComponentId === component.id
+                                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-950'
+                                      : 'border-border bg-card hover:border-blue-200 hover:bg-blue-50/50'
                                   )}
-
-                                {column.map((component, componentIndex) => (
-                                  <Draggable
-                                    key={component.id}
-                                    draggableId={component.id}
-                                    index={componentIndex}
+                                >
+                                  <div
+                                    onClick={() =>
+                                      handleComponentClick(component.id)
+                                    }
                                   >
-                                    {(provided, snapshot) => (
-                                      <div
-                                        ref={provided.innerRef}
-                                        {...provided.draggableProps}
-                                        {...provided.dragHandleProps}
-                                        onClick={() =>
-                                          handleComponentClick(component.id)
-                                        }
-                                        className={cn(
-                                          'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
-                                          selectedComponentId === component.id
-                                            ? 'border-blue-500 bg-blue-50 dark:bg-blue-950'
-                                            : 'border-border bg-card hover:border-blue-200 hover:bg-blue-50/50',
-                                          snapshot.isDragging &&
-                                            'rotate-2 shadow-lg'
-                                        )}
-                                      >
-                                        <ComponentRenderer
-                                          component={component}
-                                        />
-                                      </div>
-                                    )}
-                                  </Draggable>
-                                ))}
-                                {provided.placeholder}
-                              </div>
-                            )}
-                          </StrictModeDroppable>
-                        ))}
+                                    <ComponentRenderer component={component} />
+                                  </div>
+                                </Sortable>
+                              ))}
+                            </SortableContainer>
+                          );
+                        })}
                       </div>
                     </CardContent>
                   </Card>
@@ -460,31 +428,18 @@ export function AboutEditor({
               ))}
 
               {/* Final Drop Zone */}
-              <StrictModeDroppable droppableId="section-drop-final" isCombineEnabled={false} isDropDisabled={false} ignoreContainerClipping={false}>
-                {(provided, snapshot) => (
-                  <div
-                    {...provided.droppableProps}
-                    ref={provided.innerRef}
-                    className={cn(
-                      'rounded-lg border-2 border-dashed transition-all duration-200',
-                      snapshot.isDraggingOver
-                        ? 'h-16 border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-950'
-                        : 'h-8 border-transparent'
-                    )}
-                  >
-                    {snapshot.isDraggingOver && (
-                      <div className="flex h-full items-center justify-center text-sm font-medium text-blue-600 dark:text-blue-400">
-                        Drop here to create new section
-                      </div>
-                    )}
-                    {provided.placeholder}
-                  </div>
-                )}
-              </StrictModeDroppable>
+              <Droppable
+                id="section-drop-final"
+                className="h-8 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-blue-300 hover:bg-blue-50 dark:hover:border-blue-600 dark:hover:bg-blue-950"
+              >
+                <div className="flex h-full items-center justify-center text-sm font-medium text-blue-600 opacity-0 hover:opacity-100 dark:text-blue-400">
+                  Drop here to create new section
+                </div>
+              </Droppable>
             </div>
           </div>
         </div>
       </div>
-    </DragDropContext>
+    </DndContextWrapper>
   );
 }
diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
index ea728578..58dad8d2 100644
--- a/components/admin/content/component-palette.tsx
+++ b/components/admin/content/component-palette.tsx
@@ -12,11 +12,10 @@ import {
   Palette,
   Type,
 } from 'lucide-react';
-import { Draggable } from 'react-beautiful-dnd';
 
 import React from 'react';
 
-import StrictModeDroppable from './strict-mode-droppable';
+import { Draggable, Droppable } from './dnd-components';
 
 /**
  * Available component definitions for the palette
@@ -151,75 +150,57 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
         </CardTitle>
       </CardHeader>
       <CardContent className="p-0">
-        <StrictModeDroppable
-          droppableId="component-palette"
-          isDropDisabled={true}
-          isCombineEnabled={false}
-          ignoreContainerClipping={false}
+        <Droppable
+          id="component-palette"
+          disabled={true}
+          className="space-y-6 px-4 pb-4"
         >
-          {provided => (
-            <div
-              {...provided.droppableProps}
-              ref={provided.innerRef}
-              className="space-y-6 px-4 pb-4"
-            >
-              {categories.map(category => {
-                const categoryComponents = availableComponents.filter(
-                  comp => comp.category === category.id
-                );
+          {categories.map(category => {
+            const categoryComponents = availableComponents.filter(
+              comp => comp.category === category.id
+            );
 
-                if (categoryComponents.length === 0) return null;
+            if (categoryComponents.length === 0) return null;
 
-                return (
-                  <div key={category.id} className="space-y-2">
-                    <h3 className="text-muted-foreground flex items-center gap-2 text-sm font-medium">
-                      {category.icon}
-                      {category.name}
-                    </h3>
-                    <div className="space-y-2">
-                      {categoryComponents.map(comp => {
-                        const globalIndex = availableComponents.indexOf(comp);
+            return (
+              <div key={category.id} className="space-y-2">
+                <h3 className="text-muted-foreground flex items-center gap-2 text-sm font-medium">
+                  {category.icon}
+                  {category.name}
+                </h3>
+                <div className="space-y-2">
+                  {categoryComponents.map(comp => {
+                    const componentPreview = (
+                      <div className="bg-card hover:bg-accent hover:text-accent-foreground flex cursor-grab items-center gap-3 rounded-md border p-3 transition-colors active:cursor-grabbing">
+                        <div className="text-muted-foreground flex-shrink-0">
+                          {comp.icon}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-sm font-medium">
+                            {comp.name}
+                          </p>
+                          <p className="text-muted-foreground truncate text-xs">
+                            {comp.description}
+                          </p>
+                        </div>
+                      </div>
+                    );
 
-                        return (
-                          <Draggable
-                            key={comp.type}
-                            draggableId={comp.type}
-                            index={globalIndex}
-                          >
-                            {(provided, snapshot) => (
-                              <div
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                                className={cn(
-                                  'bg-card hover:bg-accent hover:text-accent-foreground flex cursor-grab items-center gap-3 rounded-md border p-3 transition-colors active:cursor-grabbing',
-                                  snapshot.isDragging && 'opacity-50 shadow-lg'
-                                )}
-                              >
-                                <div className="text-muted-foreground flex-shrink-0">
-                                  {comp.icon}
-                                </div>
-                                <div className="min-w-0 flex-1">
-                                  <p className="truncate text-sm font-medium">
-                                    {comp.name}
-                                  </p>
-                                  <p className="text-muted-foreground truncate text-xs">
-                                    {comp.description}
-                                  </p>
-                                </div>
-                              </div>
-                            )}
-                          </Draggable>
-                        );
-                      })}
-                    </div>
-                  </div>
-                );
-              })}
-              {provided.placeholder}
-            </div>
-          )}
-        </StrictModeDroppable>
+                    return (
+                      <Draggable
+                        key={comp.type}
+                        id={`palette-${comp.type}`}
+                        preview={componentPreview}
+                      >
+                        {componentPreview}
+                      </Draggable>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </Droppable>
       </CardContent>
     </Card>
   );
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
new file mode 100644
index 00000000..1a20d76d
--- /dev/null
+++ b/components/admin/content/dnd-components.tsx
@@ -0,0 +1,198 @@
+'use client';
+
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import {
+  SortableContext,
+  SortingStrategy,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '@lib/utils';
+
+import React from 'react';
+
+// Re-export arrayMove for convenience
+export { arrayMove };
+
+// Droppable component interface
+interface DroppableProps {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+/**
+ * DndKit Droppable Component
+ *
+ * Replaces react-beautiful-dnd's Droppable
+ */
+export function Droppable({
+  id,
+  children,
+  className,
+  disabled = false,
+}: DroppableProps) {
+  const { isOver, setNodeRef } = useDroppable({
+    id,
+    disabled,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        className,
+        isOver && 'ring-opacity-50 ring-2 ring-blue-500'
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Draggable component interface
+interface DraggableProps {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  preview?: React.ReactNode;
+}
+
+/**
+ * DndKit Draggable Component
+ *
+ * Replaces react-beautiful-dnd's Draggable
+ */
+export function Draggable({
+  id,
+  children,
+  className,
+  disabled = false,
+  preview,
+}: DraggableProps) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id,
+      disabled,
+      data: {
+        preview,
+      },
+    });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        className,
+        isDragging && 'opacity-50',
+        !disabled && 'cursor-grab active:cursor-grabbing'
+      )}
+      {...listeners}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Sortable component for within containers
+interface SortableProps {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+/**
+ * DndKit Sortable Component
+ *
+ * For sortable items within containers
+ */
+export function Sortable({
+  id,
+  children,
+  className,
+  disabled = false,
+}: SortableProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id,
+    disabled,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        className,
+        isDragging && 'z-50 opacity-50',
+        !disabled && 'cursor-grab active:cursor-grabbing'
+      )}
+      {...listeners}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Sortable Container
+interface SortableContainerProps {
+  id: string;
+  items: string[];
+  children: React.ReactNode;
+  className?: string;
+  strategy?: SortingStrategy;
+}
+
+/**
+ * DndKit Sortable Container
+ *
+ * Provides sortable context for child components
+ */
+export function SortableContainer({
+  id,
+  items,
+  children,
+  className,
+  strategy = verticalListSortingStrategy,
+}: SortableContainerProps) {
+  const { isOver, setNodeRef } = useDroppable({
+    id,
+  });
+
+  return (
+    <SortableContext items={items} strategy={strategy}>
+      <div
+        ref={setNodeRef}
+        className={cn(
+          className,
+          isOver && 'ring-opacity-50 ring-2 ring-blue-500'
+        )}
+      >
+        {children}
+      </div>
+    </SortableContext>
+  );
+}
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
new file mode 100644
index 00000000..14e841b9
--- /dev/null
+++ b/components/admin/content/dnd-context.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { createPortal } from 'react-dom';
+
+import React, { useState } from 'react';
+
+interface DndContextWrapperProps {
+  children: React.ReactNode;
+  onDragEnd: (event: DragEndEvent) => void;
+}
+
+/**
+ * DndKit Context Wrapper
+ *
+ * Provides drag and drop context using @dnd-kit/core
+ * Replaces react-beautiful-dnd's DragDropContext
+ */
+export function DndContextWrapper({
+  children,
+  onDragEnd,
+}: DndContextWrapperProps) {
+  const [activeItem, setActiveItem] = useState<{
+    id: string;
+    content: React.ReactNode;
+  } | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    setActiveItem({
+      id: String(active.id),
+      content: active.data.current?.preview || String(active.id),
+    });
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setActiveItem(null);
+    onDragEnd(event);
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      {children}
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <DragOverlay>
+            {activeItem ? (
+              <div className="rounded-lg border bg-white p-2 shadow-lg dark:bg-gray-800">
+                {activeItem.content}
+              </div>
+            ) : null}
+          </DragOverlay>,
+          document.body
+        )}
+    </DndContext>
+  );
+}
diff --git a/components/admin/content/strict-mode-droppable.tsx b/components/admin/content/strict-mode-droppable.tsx
deleted file mode 100644
index 41aaca95..00000000
--- a/components/admin/content/strict-mode-droppable.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client';
-
-import { Droppable, DroppableProps } from 'react-beautiful-dnd';
-
-import { useEffect, useState } from 'react';
-
-/**
- * StrictModeDroppable Component
- *
- * Wrapper around react-beautiful-dnd's Droppable component that works
- * properly with React 18's StrictMode. Prevents hydration issues by
- * deferring the rendering until after the initial render.
- *
- * This is necessary because react-beautiful-dnd was not designed for
- * React 18's double-rendering in development mode.
- */
-const StrictModeDroppable: React.FC<DroppableProps> = props => {
-  const [enabled, setEnabled] = useState(false);
-
-  useEffect(() => {
-    const animation = requestAnimationFrame(() => setEnabled(true));
-
-    return () => {
-      cancelAnimationFrame(animation);
-      setEnabled(false);
-    };
-  }, []);
-
-  if (!enabled) {
-    return null;
-  }
-
-  return <Droppable {...props} />;
-};
-
-export default StrictModeDroppable;
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index cc58420e..db585180 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -1,11 +1,12 @@
 import { availableComponents } from '@components/admin/content/component-palette';
+import { arrayMove } from '@components/admin/content/dnd-components';
+import { DragEndEvent } from '@dnd-kit/core';
 import {
   ComponentInstance,
   PageContent,
   createDefaultSection,
   generateUniqueId,
 } from '@lib/types/about-page-components';
-import { DropResult } from 'react-beautiful-dnd';
 import { create } from 'zustand';
 
 /**
@@ -45,7 +46,7 @@ interface AboutEditorState {
   // Delete a component by ID
   deleteComponent: (id: string) => void;
   // Handle drag and drop operations
-  handleDragEnd: (result: DropResult) => void;
+  handleDragEnd: (event: DragEndEvent) => void;
   // Create a new section
   addSection: (
     layout?: 'single-column' | 'two-column' | 'three-column'
@@ -201,10 +202,10 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
   },
 
   // Handle drag and drop (optimized with performance considerations)
-  handleDragEnd: (result: DropResult) => {
-    const { destination, source, draggableId } = result;
+  handleDragEnd: (event: DragEndEvent) => {
+    const { active, over } = event;
 
-    if (!destination) return;
+    if (!over) return;
 
     const state = get();
     if (!state.pageContent) return;
@@ -214,19 +215,45 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       ...state.pageContent,
       sections: state.pageContent.sections.map(section => ({
         ...section,
-        columns: section.columns.map(column => [...column])
-      }))
+        columns: section.columns.map(column => [...column]),
+      })),
     };
 
+    const activeId = String(active.id);
+    const overId = String(over.id);
+
     // Handle dragging from component palette
-    if (source.droppableId === 'component-palette') {
+    if (activeId.startsWith('palette-')) {
+      const componentType = activeId.replace('palette-', '');
       const componentDef = availableComponents.find(
-        comp => comp.type === draggableId
+        comp => comp.type === componentType
       );
       if (!componentDef) return;
 
-      // Parse destination
-      const [type, sectionId, columnIndex] = destination.droppableId.split('-');
+      // Parse destination - handle both direct drops on containers and on components
+      let targetContainerId = overId;
+
+      // If dropping on a component, get its container
+      if (!overId.startsWith('section-')) {
+        // Find which container this component belongs to
+        for (const section of newPageContent.sections) {
+          for (
+            let colIndex = 0;
+            colIndex < section.columns.length;
+            colIndex++
+          ) {
+            const componentExists = section.columns[colIndex].find(
+              comp => comp.id === overId
+            );
+            if (componentExists) {
+              targetContainerId = `section-${section.id}-${colIndex}`;
+              break;
+            }
+          }
+        }
+      }
+
+      const [type, sectionId, columnIndex] = targetContainerId.split('-');
 
       if (type === 'section' && sectionId && columnIndex !== undefined) {
         const section = newPageContent.sections.find(s => s.id === sectionId);
@@ -237,38 +264,87 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
             props: { ...componentDef.defaultProps },
           };
 
-          section.columns[parseInt(columnIndex)].splice(
-            destination.index,
-            0,
-            newComponent
-          );
+          // Add to the end of the column
+          section.columns[parseInt(columnIndex)].push(newComponent);
         }
       }
     } else {
-      // Handle moving existing components
-      const [sourceType, sourceSectionId, sourceColumnIndex] =
-        source.droppableId.split('-');
-      const [destType, destSectionId, destColumnIndex] =
-        destination.droppableId.split('-');
-
-      if (sourceType === 'section' && destType === 'section') {
-        const sourceSection = newPageContent.sections.find(
-          s => s.id === sourceSectionId
-        );
-        const destSection = newPageContent.sections.find(
-          s => s.id === destSectionId
-        );
-
-        if (sourceSection && destSection) {
-          const sourceColumn =
-            sourceSection.columns[parseInt(sourceColumnIndex)];
-          const destColumn = destSection.columns[parseInt(destColumnIndex)];
-
-          if (sourceColumn && destColumn) {
-            // Remove from source
-            const [removed] = sourceColumn.splice(source.index, 1);
-            // Add to destination
-            destColumn.splice(destination.index, 0, removed);
+      // Handle moving existing components within or between containers
+      const activeContainer = active.data.current?.sortable?.containerId;
+      const overContainer = over.data.current?.sortable?.containerId || overId;
+
+      if (activeContainer && overContainer) {
+        if (activeContainer === overContainer) {
+          // Reordering within the same container
+          const [containerType, sectionId, columnIndex] =
+            activeContainer.split('-');
+
+          if (
+            containerType === 'section' &&
+            sectionId &&
+            columnIndex !== undefined
+          ) {
+            const section = newPageContent.sections.find(
+              s => s.id === sectionId
+            );
+            if (section && section.columns[parseInt(columnIndex)]) {
+              const column = section.columns[parseInt(columnIndex)];
+              const activeIndex = column.findIndex(
+                comp => comp.id === activeId
+              );
+              const overIndex = column.findIndex(comp => comp.id === overId);
+
+              if (
+                activeIndex !== -1 &&
+                overIndex !== -1 &&
+                activeIndex !== overIndex
+              ) {
+                // Use arrayMove to reorder within the same container
+                section.columns[parseInt(columnIndex)] = arrayMove(
+                  column,
+                  activeIndex,
+                  overIndex
+                );
+              }
+            }
+          }
+        } else {
+          // Moving between containers
+          const [sourceType, sourceSectionId, sourceColumnIndex] =
+            activeContainer.split('-');
+          const [destType, destSectionId, destColumnIndex] =
+            overContainer.split('-');
+
+          if (sourceType === 'section' && destType === 'section') {
+            const sourceSection = newPageContent.sections.find(
+              s => s.id === sourceSectionId
+            );
+            const destSection = newPageContent.sections.find(
+              s => s.id === destSectionId
+            );
+
+            if (sourceSection && destSection) {
+              const sourceColumn =
+                sourceSection.columns[parseInt(sourceColumnIndex)];
+              const destColumn = destSection.columns[parseInt(destColumnIndex)];
+
+              if (sourceColumn && destColumn) {
+                // Find and move the component
+                const componentIndex = sourceColumn.findIndex(
+                  comp => comp.id === activeId
+                );
+                if (componentIndex !== -1) {
+                  const [removed] = sourceColumn.splice(componentIndex, 1);
+                  // Insert at the position of the over item, or at the end
+                  const overIndex = over.data.current?.sortable?.index;
+                  if (typeof overIndex === 'number') {
+                    destColumn.splice(overIndex, 0, removed);
+                  } else {
+                    destColumn.push(removed);
+                  }
+                }
+              }
+            }
           }
         }
       }
diff --git a/package.json b/package.json
index 3e42b345..809815e5 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,9 @@
     }
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-popover": "^1.1.14",
@@ -61,7 +64,6 @@
     "@supabase/ssr": "^0.6.1",
     "@supabase/supabase-js": "^2.53.0",
     "@types/prismjs": "^1.26.5",
-    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/uuid": "^10.0.0",
     "bufferutil": "^4.0.9",
     "class-variance-authority": "^0.7.1",
@@ -79,7 +81,6 @@
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.1",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^19.1.1",
     "react-easy-crop": "^5.5.0",
     "react-icons": "^5.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b04389d..9a2f1c23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,15 @@ importers:
 
   .:
     dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.1.1)
       '@heroicons/react':
         specifier: ^2.2.0
         version: 2.2.0(react@19.1.1)
@@ -44,9 +53,6 @@ importers:
       '@types/prismjs':
         specifier: ^1.26.5
         version: 1.26.5
-      '@types/react-beautiful-dnd':
-        specifier: ^13.1.8
-        version: 13.1.8
       '@types/uuid':
         specifier: ^10.0.0
         version: 10.0.0
@@ -98,9 +104,6 @@ importers:
       react:
         specifier: ^19.1.1
         version: 19.1.1
-      react-beautiful-dnd:
-        specifier: ^13.1.1
-        version: 13.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react-dom:
         specifier: ^19.1.1
         version: 19.1.1(react@19.1.1)
@@ -522,6 +525,28 @@ packages:
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   '@emnapi/core@1.4.5':
     resolution: {integrity: sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==}
 
@@ -1535,11 +1560,6 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
-  '@types/hoist-non-react-statics@3.3.7':
-    resolution: {integrity: sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==}
-    peerDependencies:
-      '@types/react': '*'
-
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
@@ -1582,17 +1602,11 @@ packages:
   '@types/prismjs@1.26.5':
     resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
 
-  '@types/react-beautiful-dnd@13.1.8':
-    resolution: {integrity: sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==}
-
   '@types/react-dom@19.1.7':
     resolution: {integrity: sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==}
     peerDependencies:
       '@types/react': ^19.0.0
 
-  '@types/react-redux@7.1.34':
-    resolution: {integrity: sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==}
-
   '@types/react@19.1.9':
     resolution: {integrity: sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==}
 
@@ -2159,9 +2173,6 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  css-box-model@1.2.1:
-    resolution: {integrity: sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==}
-
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -2779,9 +2790,6 @@ packages:
   hastscript@9.0.1:
     resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
 
-  hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-
   html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
@@ -3502,9 +3510,6 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
-  memoize-one@5.2.1:
-    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
-
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
@@ -4009,16 +4014,6 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  raf-schd@4.0.3:
-    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
-
-  react-beautiful-dnd@13.1.1:
-    resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==}
-    deprecated: 'react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672'
-    peerDependencies:
-      react: ^16.8.5 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
-
   react-dom@19.1.1:
     resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
     peerDependencies:
@@ -4050,18 +4045,6 @@ packages:
       '@types/react': '>=18'
       react: '>=18'
 
-  react-redux@7.2.9:
-    resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
-    peerDependencies:
-      react: ^16.8.3 || ^17 || ^18
-      react-dom: '*'
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -4100,9 +4083,6 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
-  redux@4.2.1:
-    resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
-
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -4466,9 +4446,6 @@ packages:
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
-  tiny-invariant@1.3.3:
-    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
-
   tinyexec@1.0.1:
     resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
@@ -4632,11 +4609,6 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
 
-  use-memo-one@1.1.3:
-    resolution: {integrity: sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -5186,6 +5158,31 @@ snapshots:
 
   '@discoveryjs/json-ext@0.5.7': {}
 
+  '@dnd-kit/accessibility@3.1.1(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.1.1)
+      '@dnd-kit/utilities': 3.2.2(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@dnd-kit/utilities': 3.2.2(react@19.1.1)
+      react: 19.1.1
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+      tslib: 2.8.1
+
   '@emnapi/core@1.4.5':
     dependencies:
       '@emnapi/wasi-threads': 1.0.4
@@ -6268,11 +6265,6 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/hoist-non-react-statics@3.3.7(@types/react@19.1.9)':
-    dependencies:
-      '@types/react': 19.1.9
-      hoist-non-react-statics: 3.3.2
-
   '@types/istanbul-lib-coverage@2.0.6': {}
 
   '@types/istanbul-lib-report@3.0.3':
@@ -6316,21 +6308,10 @@ snapshots:
 
   '@types/prismjs@1.26.5': {}
 
-  '@types/react-beautiful-dnd@13.1.8':
-    dependencies:
-      '@types/react': 19.1.9
-
   '@types/react-dom@19.1.7(@types/react@19.1.9)':
     dependencies:
       '@types/react': 19.1.9
 
-  '@types/react-redux@7.1.34':
-    dependencies:
-      '@types/hoist-non-react-statics': 3.3.7(@types/react@19.1.9)
-      '@types/react': 19.1.9
-      hoist-non-react-statics: 3.3.2
-      redux: 4.2.1
-
   '@types/react@19.1.9':
     dependencies:
       csstype: 3.1.3
@@ -6926,10 +6907,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  css-box-model@1.2.1:
-    dependencies:
-      tiny-invariant: 1.3.3
-
   css.escape@1.5.1: {}
 
   cssstyle@4.6.0:
@@ -7732,10 +7709,6 @@ snapshots:
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
 
-  hoist-non-react-statics@3.3.2:
-    dependencies:
-      react-is: 16.13.1
-
   html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
@@ -8745,8 +8718,6 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
-  memoize-one@5.2.1: {}
-
   meow@12.1.1: {}
 
   merge-stream@2.0.0: {}
@@ -9276,22 +9247,6 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  raf-schd@4.0.3: {}
-
-  react-beautiful-dnd@13.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
-    dependencies:
-      '@babel/runtime': 7.28.2
-      css-box-model: 1.2.1
-      memoize-one: 5.2.1
-      raf-schd: 4.0.3
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      react-redux: 7.2.9(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      redux: 4.2.1
-      use-memo-one: 1.1.3(react@19.1.1)
-    transitivePeerDependencies:
-      - react-native
-
   react-dom@19.1.1(react@19.1.1):
     dependencies:
       react: 19.1.1
@@ -9332,18 +9287,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-redux@7.2.9(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
-    dependencies:
-      '@babel/runtime': 7.28.2
-      '@types/react-redux': 7.1.34
-      hoist-non-react-statics: 3.3.2
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 19.1.1
-      react-is: 17.0.2
-    optionalDependencies:
-      react-dom: 19.1.1(react@19.1.1)
-
   react-remove-scroll-bar@2.3.8(@types/react@19.1.9)(react@19.1.1):
     dependencies:
       react: 19.1.1
@@ -9378,10 +9321,6 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
-  redux@4.2.1:
-    dependencies:
-      '@babel/runtime': 7.28.2
-
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -9844,8 +9783,6 @@ snapshots:
 
   through@2.3.8: {}
 
-  tiny-invariant@1.3.3: {}
-
   tinyexec@1.0.1: {}
 
   tinyglobby@0.2.14:
@@ -10057,10 +9994,6 @@ snapshots:
       intl-messageformat: 10.7.16
       react: 19.1.1
 
-  use-memo-one@1.1.3(react@19.1.1):
-    dependencies:
-      react: 19.1.1
-
   use-sidecar@1.1.3(@types/react@19.1.9)(react@19.1.1):
     dependencies:
       detect-node-es: 1.1.0

From fd2f28059f6a391f0f83025adde01892a26e9b9f Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sat, 9 Aug 2025 17:44:13 +0800
Subject: [PATCH 07/66] style(admin): unify /admin/content components with
 stone theme

Replace modern design system with classic stone color scheme to match
original project styling. Remove Card components in favor of
stone-themed div structures.

Key changes:
- Remove Card, CardHeader, CardContent, CardTitle imports
- Replace with stone color palette (stone-50 to stone-900)
- Update about-editor: sections, containers, and sortable components
- Update component-palette: category headers and component previews
- Update property-editor: array items and main container
- Maintain dark/light mode compatibility with stone variants
- Preserve all drag-and-drop and interactive functionality

Visual improvements:
- Header: bg-white dark:bg-stone-800
- Left panel: bg-stone-50 dark:bg-stone-900
- Components: border-stone-200 dark:border-stone-700
- Hover states: hover:bg-stone-50 dark:hover:bg-stone-700
- Text: text-stone-900 dark:text-stone-100
---
 components/admin/content/about-editor.tsx     | 153 ++++++++++--------
 .../admin/content/component-palette.tsx       |  64 ++++++--
 components/admin/content/property-editor.tsx  | 102 ++++++++----
 3 files changed, 207 insertions(+), 112 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index ef3d169f..c98905c9 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -2,7 +2,6 @@
 
 import { Badge } from '@components/ui/badge';
 import { Button } from '@components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
 import {
   Select,
   SelectContent,
@@ -216,7 +215,12 @@ export function AboutEditor({
     <DndContextWrapper onDragEnd={handleDragEnd}>
       <div className="flex h-full flex-col">
         {/* Header */}
-        <div className="bg-card space-y-4 border-b p-4">
+        <div
+          className={cn(
+            'space-y-4 border-b p-4',
+            'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
+          )}
+        >
           {/* Language Selector */}
           <div className="flex items-center justify-between">
             <div className="space-y-1">
@@ -323,7 +327,12 @@ export function AboutEditor({
         {/* Main Content */}
         <div className="flex min-h-0 flex-1">
           {/* Left Panel - Components & Properties */}
-          <div className="bg-background w-80 space-y-6 overflow-y-auto border-r p-4">
+          <div
+            className={cn(
+              'w-80 space-y-6 overflow-y-auto border-r p-4',
+              'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-900'
+            )}
+          >
             {/* Component Palette */}
             <ComponentPalette />
 
@@ -353,77 +362,91 @@ export function AboutEditor({
                   )}
 
                   {/* Section Content */}
-                  <Card className="border">
-                    <CardHeader className="pb-3">
+                  <div
+                    className={cn(
+                      'rounded-lg border p-4',
+                      'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
+                    )}
+                  >
+                    <div className="pb-3">
                       <div className="flex items-center justify-between">
-                        <CardTitle className="text-muted-foreground text-sm">
+                        <h3
+                          className={cn(
+                            'text-sm font-medium',
+                            'text-stone-600 dark:text-stone-400'
+                          )}
+                        >
                           Section {sectionIndex + 1} • {section.layout}
-                        </CardTitle>
-                        <Button
-                          variant="ghost"
-                          size="sm"
+                        </h3>
+                        <button
                           onClick={() => {
                             // Delete section logic here
                           }}
-                          className="text-destructive hover:text-destructive h-6 w-6 p-0"
+                          className={cn(
+                            'h-6 w-6 rounded p-0 text-red-500 transition-colors',
+                            'hover:bg-red-100 dark:hover:bg-red-900/50'
+                          )}
                         >
                           <Trash2 className="h-3 w-3" />
-                        </Button>
+                        </button>
                       </div>
-                    </CardHeader>
-                    <CardContent>
-                      <div
-                        className={cn(
-                          'grid gap-4',
-                          section.layout === 'single-column' && 'grid-cols-1',
-                          section.layout === 'two-column' && 'grid-cols-2',
-                          section.layout === 'three-column' && 'grid-cols-3'
-                        )}
-                      >
-                        {section.columns.map((column, columnIndex) => {
-                          const columnItems = column.map(comp => comp.id);
-                          return (
-                            <SortableContainer
-                              key={`${section.id}-${columnIndex}`}
-                              id={`section-${section.id}-${columnIndex}`}
-                              items={columnItems}
-                              className={cn(
-                                'min-h-24 rounded-lg border-2 border-dashed p-3 transition-colors',
-                                'border-border bg-muted/30'
-                              )}
-                            >
-                              {column.length === 0 && (
-                                <div className="text-muted-foreground flex h-16 items-center justify-center text-sm">
-                                  Drop components here
-                                </div>
-                              )}
-
-                              {column.map(component => (
-                                <Sortable
-                                  key={component.id}
-                                  id={component.id}
-                                  className={cn(
-                                    'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
-                                    selectedComponentId === component.id
-                                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-950'
-                                      : 'border-border bg-card hover:border-blue-200 hover:bg-blue-50/50'
-                                  )}
+                    </div>
+                    <div
+                      className={cn(
+                        'grid gap-4',
+                        section.layout === 'single-column' && 'grid-cols-1',
+                        section.layout === 'two-column' && 'grid-cols-2',
+                        section.layout === 'three-column' && 'grid-cols-3'
+                      )}
+                    >
+                      {section.columns.map((column, columnIndex) => {
+                        const columnItems = column.map(comp => comp.id);
+                        return (
+                          <SortableContainer
+                            key={`${section.id}-${columnIndex}`}
+                            id={`section-${section.id}-${columnIndex}`}
+                            items={columnItems}
+                            className={cn(
+                              'min-h-24 rounded-md border-2 border-dashed p-3 transition-colors',
+                              'border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-700/50'
+                            )}
+                          >
+                            {column.length === 0 && (
+                              <div
+                                className={cn(
+                                  'flex h-16 items-center justify-center text-sm',
+                                  'text-stone-500 dark:text-stone-400'
+                                )}
+                              >
+                                Drop components here
+                              </div>
+                            )}
+
+                            {column.map(component => (
+                              <Sortable
+                                key={component.id}
+                                id={component.id}
+                                className={cn(
+                                  'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                  selectedComponentId === component.id
+                                    ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
+                                    : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
+                                )}
+                              >
+                                <div
+                                  onClick={() =>
+                                    handleComponentClick(component.id)
+                                  }
                                 >
-                                  <div
-                                    onClick={() =>
-                                      handleComponentClick(component.id)
-                                    }
-                                  >
-                                    <ComponentRenderer component={component} />
-                                  </div>
-                                </Sortable>
-                              ))}
-                            </SortableContainer>
-                          );
-                        })}
-                      </div>
-                    </CardContent>
-                  </Card>
+                                  <ComponentRenderer component={component} />
+                                </div>
+                              </Sortable>
+                            ))}
+                          </SortableContainer>
+                        );
+                      })}
+                    </div>
+                  </div>
                 </div>
               ))}
 
diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
index 58dad8d2..2e237315 100644
--- a/components/admin/content/component-palette.tsx
+++ b/components/admin/content/component-palette.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
 import { ComponentType } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
 import {
@@ -142,14 +141,25 @@ interface ComponentPaletteProps {
  */
 const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
   return (
-    <Card className={cn('h-full', className)}>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
+    <div
+      className={cn(
+        'h-full rounded-lg border',
+        'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800',
+        className
+      )}
+    >
+      <div className="border-b border-stone-200 p-4 dark:border-stone-700">
+        <h3
+          className={cn(
+            'flex items-center gap-2 text-lg font-medium',
+            'text-stone-900 dark:text-stone-100'
+          )}
+        >
           <Palette className="h-5 w-5" />
           Components
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="p-0">
+        </h3>
+      </div>
+      <div className="p-0">
         <Droppable
           id="component-palette"
           disabled={true}
@@ -164,22 +174,48 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
 
             return (
               <div key={category.id} className="space-y-2">
-                <h3 className="text-muted-foreground flex items-center gap-2 text-sm font-medium">
+                <h3
+                  className={cn(
+                    'flex items-center gap-2 text-sm font-medium',
+                    'text-stone-600 dark:text-stone-400'
+                  )}
+                >
                   {category.icon}
                   {category.name}
                 </h3>
                 <div className="space-y-2">
                   {categoryComponents.map(comp => {
                     const componentPreview = (
-                      <div className="bg-card hover:bg-accent hover:text-accent-foreground flex cursor-grab items-center gap-3 rounded-md border p-3 transition-colors active:cursor-grabbing">
-                        <div className="text-muted-foreground flex-shrink-0">
+                      <div
+                        className={cn(
+                          'flex cursor-grab items-center gap-3 rounded-md border p-3 transition-colors active:cursor-grabbing',
+                          'border-stone-200 bg-stone-50 hover:border-stone-300 hover:bg-stone-100',
+                          'dark:border-stone-600 dark:bg-stone-700 dark:hover:border-stone-500 dark:hover:bg-stone-600'
+                        )}
+                      >
+                        <div
+                          className={cn(
+                            'flex-shrink-0',
+                            'text-stone-600 dark:text-stone-400'
+                          )}
+                        >
                           {comp.icon}
                         </div>
                         <div className="min-w-0 flex-1">
-                          <p className="truncate text-sm font-medium">
+                          <p
+                            className={cn(
+                              'truncate text-sm font-medium',
+                              'text-stone-900 dark:text-stone-100'
+                            )}
+                          >
                             {comp.name}
                           </p>
-                          <p className="text-muted-foreground truncate text-xs">
+                          <p
+                            className={cn(
+                              'truncate text-xs',
+                              'text-stone-600 dark:text-stone-400'
+                            )}
+                          >
                             {comp.description}
                           </p>
                         </div>
@@ -201,8 +237,8 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
             );
           })}
         </Droppable>
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 };
 
diff --git a/components/admin/content/property-editor.tsx b/components/admin/content/property-editor.tsx
index 48fd9a1f..b30cb405 100644
--- a/components/admin/content/property-editor.tsx
+++ b/components/admin/content/property-editor.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import { Button } from '@components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
 import { Input } from '@components/ui/input';
 import { Label } from '@components/ui/label';
 import {
@@ -13,6 +11,7 @@ import {
 } from '@components/ui/select';
 import { Textarea } from '@components/ui/textarea';
 import { ComponentInstance } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
 import { Plus, Trash2 } from 'lucide-react';
 
 import React from 'react';
@@ -60,22 +59,36 @@ const ArrayPropertyEditor: React.FC<ArrayPropertyEditorProps> = ({
   return (
     <div className="space-y-3">
       {items.map((item, index) => (
-        <Card key={index} className="border">
-          <CardHeader className="pb-2">
+        <div
+          key={index}
+          className={cn(
+            'rounded-lg border p-4',
+            'border-stone-200 bg-white dark:border-stone-600 dark:bg-stone-800'
+          )}
+        >
+          <div className="pb-2">
             <div className="flex items-center justify-between">
-              <CardTitle className="text-sm">Item {index + 1}</CardTitle>
-              <Button
+              <h4
+                className={cn(
+                  'text-sm font-medium',
+                  'text-stone-900 dark:text-stone-100'
+                )}
+              >
+                Item {index + 1}
+              </h4>
+              <button
                 type="button"
-                variant="ghost"
-                size="sm"
                 onClick={() => handleRemoveItem(index)}
-                className="text-destructive hover:text-destructive h-8 w-8 p-0"
+                className={cn(
+                  'h-8 w-8 rounded p-0 text-red-500 transition-colors',
+                  'hover:bg-red-100 dark:hover:bg-red-900/50'
+                )}
               >
                 <Trash2 className="h-4 w-4" />
-              </Button>
+              </button>
             </div>
-          </CardHeader>
-          <CardContent className="space-y-3">
+          </div>
+          <div className="space-y-3">
             {Object.entries(item).map(([key, value]) => (
               <div key={key} className="space-y-2">
                 <Label
@@ -93,18 +106,22 @@ const ArrayPropertyEditor: React.FC<ArrayPropertyEditorProps> = ({
                 />
               </div>
             ))}
-          </CardContent>
-        </Card>
+          </div>
+        </div>
       ))}
-      <Button
+      <button
         type="button"
-        variant="outline"
         onClick={handleAddItem}
-        className="w-full"
+        className={cn(
+          'w-full rounded-md border px-4 py-2 text-sm font-medium transition-colors',
+          'border-stone-300 bg-white text-stone-900 hover:bg-stone-50',
+          'dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:hover:bg-stone-700',
+          'flex items-center justify-center gap-2'
+        )}
       >
-        <Plus className="mr-2 h-4 w-4" />
+        <Plus className="h-4 w-4" />
         Add Item
-      </Button>
+      </button>
     </div>
   );
 };
@@ -121,7 +138,12 @@ const PropertyEditor: React.FC<PropertyEditorProps> = ({
 }) => {
   if (!component) {
     return (
-      <div className="text-muted-foreground flex h-32 items-center justify-center">
+      <div
+        className={cn(
+          'flex h-32 items-center justify-center',
+          'text-stone-500 dark:text-stone-400'
+        )}
+      >
         <p>Select a component to edit its properties</p>
       </div>
     );
@@ -289,31 +311,45 @@ const PropertyEditor: React.FC<PropertyEditorProps> = ({
   };
 
   return (
-    <Card className="w-full">
-      <CardHeader>
+    <div
+      className={cn(
+        'w-full rounded-lg border',
+        'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
+      )}
+    >
+      <div className="border-b border-stone-200 p-4 dark:border-stone-700">
         <div className="flex items-center justify-between">
-          <CardTitle className="text-lg capitalize">
+          <h3
+            className={cn(
+              'text-lg font-medium capitalize',
+              'text-stone-900 dark:text-stone-100'
+            )}
+          >
             {component.type} Properties
-          </CardTitle>
+          </h3>
           {onDeleteComponent && (
-            <Button
+            <button
               type="button"
-              variant="destructive"
-              size="sm"
               onClick={onDeleteComponent}
+              className={cn(
+                'rounded px-3 py-1.5 text-sm font-medium transition-colors',
+                'bg-red-600 text-white hover:bg-red-700',
+                'dark:bg-red-500 dark:hover:bg-red-600',
+                'flex items-center gap-2'
+              )}
             >
-              <Trash2 className="mr-2 h-4 w-4" />
+              <Trash2 className="h-4 w-4" />
               Delete
-            </Button>
+            </button>
           )}
         </div>
-      </CardHeader>
-      <CardContent className="space-y-4">
+      </div>
+      <div className="space-y-4 p-4">
         {Object.entries(component.props).map(([key, value]) =>
           renderPropertyField(key, value)
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 };
 

From c12c10a8637c0c586ab960cc8f8011bfc9ec50b4 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sat, 9 Aug 2025 19:23:01 +0800
Subject: [PATCH 08/66] fix(admin): fix property editing interface with
 right-click context menu

- Replace left sidebar property panel with right-click context menu
- Fix input rebound issue by preventing data flow conflicts
- Implement dynamic component data retrieval for real-time updates
- Remove property-editor.tsx and create context-menu.tsx
- Optimize layout by reducing left panel width to 256px for component palette only

BREAKING CHANGES:
- Property editing now uses right-click context menu instead of left sidebar
- Layout reduced from 320px to 256px left panel width
---
 components/admin/content/about-editor.tsx    | 108 +++++-
 components/admin/content/context-menu.tsx    | 371 +++++++++++++++++++
 components/admin/content/property-editor.tsx | 356 ------------------
 3 files changed, 459 insertions(+), 376 deletions(-)
 create mode 100644 components/admin/content/context-menu.tsx
 delete mode 100644 components/admin/content/property-editor.tsx

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index c98905c9..3ee937e3 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -15,6 +15,7 @@ import { getLanguageInfo } from '@lib/config/language-config';
 import { useAboutEditorStore } from '@lib/stores/about-editor-store';
 import {
   AboutTranslationData,
+  ComponentInstance,
   PageContent,
   isDynamicFormat,
   migrateAboutTranslationData,
@@ -32,9 +33,9 @@ import { useTranslations } from 'next-intl';
 
 import ComponentPalette from './component-palette';
 import ComponentRenderer from './component-renderer';
+import { ContextMenu } from './context-menu';
 import { Droppable, Sortable, SortableContainer } from './dnd-components';
 import { DndContextWrapper } from './dnd-context';
-import PropertyEditor from './property-editor';
 
 interface AboutEditorProps {
   translations: Record<SupportedLocale, AboutTranslationData>;
@@ -55,6 +56,13 @@ export function AboutEditor({
 }: AboutEditorProps) {
   const t = useTranslations('pages.admin.content.editor');
 
+  // Context menu state
+  const [contextMenu, setContextMenu] = React.useState<{
+    x: number;
+    y: number;
+    componentId: string;
+  } | null>(null);
+
   // Zustand store
   const {
     pageContent,
@@ -85,7 +93,8 @@ export function AboutEditor({
     return translation;
   }, [translations, currentLocale]);
 
-  // Get selected component from page content
+  // Get selected component from page content (currently unused but kept for future use)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const selectedComponent = useMemo(() => {
     if (!pageContent || !selectedComponentId) return null;
 
@@ -98,7 +107,22 @@ export function AboutEditor({
     return null;
   }, [pageContent, selectedComponentId]);
 
-  // Load current translation into editor when locale changes
+  // Get context menu component (dynamically updated)
+  const contextMenuComponent = useMemo(() => {
+    if (!pageContent || !contextMenu?.componentId) return null;
+
+    for (const section of pageContent.sections) {
+      for (const column of section.columns) {
+        const component = column.find(
+          comp => comp.id === contextMenu.componentId
+        );
+        if (component) return component;
+      }
+    }
+    return null;
+  }, [pageContent, contextMenu?.componentId]);
+
+  // Initial load and locale change handling
   useEffect(() => {
     if (currentTranslation.sections) {
       const content: PageContent = {
@@ -112,7 +136,8 @@ export function AboutEditor({
       setPageContent(content);
     }
     setCurrentLanguage(currentLocale);
-  }, [currentLocale, currentTranslation, setPageContent, setCurrentLanguage]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentLocale, setPageContent, setCurrentLanguage]); // Only reload on locale change, not on translation data updates
 
   // Debounced auto-save function
   const debouncedSave = useDebouncedCallback(
@@ -153,14 +178,14 @@ export function AboutEditor({
     [selectedComponentId, updateComponentProps]
   );
 
-  // Handle property changes
+  // Handle property changes (currently unused but kept for future use)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const handlePropsChange = throttledPropsChange;
 
   // Handle component deletion
-  const handleDeleteComponent = () => {
-    if (selectedComponentId) {
-      deleteComponent(selectedComponentId);
-    }
+  const handleDeleteComponent = (componentId: string) => {
+    deleteComponent(componentId);
+    setContextMenu(null);
   };
 
   // Handle component selection
@@ -168,6 +193,42 @@ export function AboutEditor({
     setSelectedComponent(componentId);
   };
 
+  // Handle right-click context menu
+  const handleContextMenu = (e: React.MouseEvent, componentId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Find the component
+    let targetComponent: ComponentInstance | null = null;
+    for (const section of pageContent?.sections || []) {
+      for (const column of section.columns) {
+        const component = column.find(comp => comp.id === componentId);
+        if (component) {
+          targetComponent = component;
+          break;
+        }
+      }
+      if (targetComponent) break;
+    }
+
+    if (targetComponent) {
+      setSelectedComponent(componentId); // Set as selected when right-clicking
+      setContextMenu({
+        x: e.clientX,
+        y: e.clientY,
+        componentId: componentId,
+      });
+    }
+  };
+
+  // Handle context menu props change
+  const handleContextMenuPropsChange = (newProps: Record<string, unknown>) => {
+    if (contextMenu?.componentId) {
+      updateComponentProps(contextMenu.componentId, newProps);
+      debouncedSave(); // Auto-save after prop changes
+    }
+  };
+
   // Save changes back to translations
   const handleSave = () => {
     if (!pageContent) return;
@@ -326,25 +387,17 @@ export function AboutEditor({
 
         {/* Main Content */}
         <div className="flex min-h-0 flex-1">
-          {/* Left Panel - Components & Properties */}
+          {/* Left Panel - Component Palette */}
           <div
             className={cn(
-              'w-80 space-y-6 overflow-y-auto border-r p-4',
+              'w-64 overflow-y-auto border-r p-4',
               'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-900'
             )}
           >
-            {/* Component Palette */}
             <ComponentPalette />
-
-            {/* Property Editor */}
-            <PropertyEditor
-              component={selectedComponent}
-              onPropsChange={handlePropsChange}
-              onDeleteComponent={handleDeleteComponent}
-            />
           </div>
 
-          {/* Right Panel - Canvas */}
+          {/* Canvas */}
           <div className="flex-1 overflow-y-auto">
             <div className="space-y-6 p-6">
               {pageContent.sections.map((section, sectionIndex) => (
@@ -437,6 +490,9 @@ export function AboutEditor({
                                   onClick={() =>
                                     handleComponentClick(component.id)
                                   }
+                                  onContextMenu={e =>
+                                    handleContextMenu(e, component.id)
+                                  }
                                 >
                                   <ComponentRenderer component={component} />
                                 </div>
@@ -463,6 +519,18 @@ export function AboutEditor({
           </div>
         </div>
       </div>
+
+      {/* Context Menu */}
+      {contextMenu && contextMenuComponent && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          component={contextMenuComponent}
+          onPropsChange={handleContextMenuPropsChange}
+          onDelete={handleDeleteComponent}
+          onClose={() => setContextMenu(null)}
+        />
+      )}
     </DndContextWrapper>
   );
 }
diff --git a/components/admin/content/context-menu.tsx b/components/admin/content/context-menu.tsx
new file mode 100644
index 00000000..17fb9d0c
--- /dev/null
+++ b/components/admin/content/context-menu.tsx
@@ -0,0 +1,371 @@
+'use client';
+
+import { Input } from '@components/ui/input';
+import { Label } from '@components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@components/ui/select';
+import { Textarea } from '@components/ui/textarea';
+import { ComponentInstance } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import { Plus, Trash2, X } from 'lucide-react';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  component: ComponentInstance | null;
+  onPropsChange: (newProps: Record<string, unknown>) => void;
+  onDelete: (componentId: string) => void;
+  onClose: () => void;
+}
+
+/**
+ * Context Menu Component
+ *
+ * Right-click context menu that directly shows property editor
+ */
+export const ContextMenu: React.FC<ContextMenuProps> = ({
+  x,
+  y,
+  component,
+  onPropsChange,
+  onDelete,
+  onClose,
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x, y });
+
+  useEffect(() => {
+    if (modalRef.current) {
+      const modal = modalRef.current;
+      const rect = modal.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let newX = x;
+      let newY = y;
+
+      // Adjust position if modal would go outside viewport
+      if (x + rect.width > viewportWidth) {
+        newX = viewportWidth - rect.width - 20;
+      }
+      if (y + rect.height > viewportHeight) {
+        newY = viewportHeight - rect.height - 20;
+      }
+      if (newX < 20) newX = 20;
+      if (newY < 20) newY = 20;
+
+      setPosition({ x: newX, y: newY });
+    }
+  }, [x, y]);
+
+  const handleInputChange = (name: string, value: unknown) => {
+    if (!component) return;
+    onPropsChange({ ...component.props, [name]: value });
+  };
+
+  const handleItemsChange = (newItems: Array<Record<string, unknown>>) => {
+    handleInputChange('items', newItems);
+  };
+
+  const handleItemChange = (index: number, key: string, value: unknown) => {
+    if (!component) return;
+    const items = component.props.items as Array<Record<string, unknown>>;
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [key]: value };
+    handleItemsChange(newItems);
+  };
+
+  const handleAddItem = () => {
+    if (!component) return;
+    const items =
+      (component.props.items as Array<Record<string, unknown>>) || [];
+    const newItem = {
+      title: 'New Item',
+      description: 'Add description here',
+    };
+    handleItemsChange([...items, newItem]);
+  };
+
+  const handleRemoveItem = (index: number) => {
+    if (!component) return;
+    const items = component.props.items as Array<Record<string, unknown>>;
+    const newItems = items.filter((_, i) => i !== index);
+    handleItemsChange(newItems);
+  };
+
+  const handleDelete = () => {
+    if (component) {
+      onDelete(component.id);
+      onClose();
+    }
+  };
+
+  if (!component) return null;
+
+  const renderPropertyField = (key: string, value: unknown) => {
+    const fieldId = `prop-${key}`;
+
+    // Array properties (cards items)
+    if (key === 'items' && component.type === 'cards') {
+      const items = value as Array<Record<string, unknown>>;
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="capitalize">
+            {key}
+          </Label>
+          <div className="max-h-48 space-y-2 overflow-y-auto">
+            {items.map((item, index) => (
+              <div
+                key={index}
+                className={cn(
+                  'rounded-lg border p-3',
+                  'border-stone-200 bg-stone-50 dark:border-stone-600 dark:bg-stone-700'
+                )}
+              >
+                <div className="flex items-center justify-between pb-2">
+                  <h5 className="text-xs font-medium text-stone-600 dark:text-stone-400">
+                    Item {index + 1}
+                  </h5>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveItem(index)}
+                    className="h-6 w-6 rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </button>
+                </div>
+                <div className="space-y-2">
+                  {Object.entries(item).map(([itemKey, itemValue]) => (
+                    <div key={itemKey}>
+                      <Label className="text-xs capitalize">{itemKey}</Label>
+                      <Textarea
+                        value={String(itemValue || '')}
+                        onChange={e =>
+                          handleItemChange(index, itemKey, e.target.value)
+                        }
+                        className="min-h-[40px] text-xs"
+                        placeholder={`Enter ${itemKey}`}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+            <button
+              type="button"
+              onClick={handleAddItem}
+              className={cn(
+                'w-full rounded-md border px-3 py-2 text-xs font-medium transition-colors',
+                'border-stone-300 bg-white text-stone-900 hover:bg-stone-50',
+                'dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:hover:bg-stone-700',
+                'flex items-center justify-center gap-2'
+              )}
+            >
+              <Plus className="h-3 w-3" />
+              Add Item
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    // Select fields
+    const selectFields: Record<
+      string,
+      Array<{ value: string; label: string }>
+    > = {
+      layout: [
+        { value: 'grid', label: 'Grid' },
+        { value: 'list', label: 'List' },
+      ],
+      thickness: [
+        { value: 'thin', label: 'Thin' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'thick', label: 'Thick' },
+      ],
+      style: [
+        { value: 'solid', label: 'Solid' },
+        { value: 'dashed', label: 'Dashed' },
+        { value: 'dotted', label: 'Dotted' },
+      ],
+      alignment: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+        { value: 'right', label: 'Right' },
+      ],
+      textAlign: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+        { value: 'right', label: 'Right' },
+      ],
+      action: [
+        { value: 'link', label: 'Link' },
+        { value: 'submit', label: 'Submit' },
+        { value: 'external', label: 'External' },
+      ],
+      variant: [
+        { value: 'primary', label: 'Primary' },
+        { value: 'secondary', label: 'Secondary' },
+        { value: 'outline', label: 'Outline' },
+      ],
+      level: [
+        { value: '1', label: 'H1' },
+        { value: '2', label: 'H2' },
+        { value: '3', label: 'H3' },
+        { value: '4', label: 'H4' },
+        { value: '5', label: 'H5' },
+        { value: '6', label: 'H6' },
+      ],
+    };
+
+    if (selectFields[key]) {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="text-sm capitalize">
+            {key}
+          </Label>
+          <Select
+            value={String(value || '')}
+            onValueChange={newValue =>
+              handleInputChange(
+                key,
+                key === 'level' ? Number(newValue) : newValue
+              )
+            }
+          >
+            <SelectTrigger className="h-8 text-sm">
+              <SelectValue placeholder={`Select ${key}`} />
+            </SelectTrigger>
+            <SelectContent>
+              {selectFields[key].map(option => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      );
+    }
+
+    // Multi-line text fields
+    if (
+      key === 'content' &&
+      (component.type === 'paragraph' || component.type === 'heading')
+    ) {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="text-sm capitalize">
+            {key}
+          </Label>
+          <Textarea
+            id={fieldId}
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, e.target.value)}
+            placeholder={`Enter ${key}`}
+            className="min-h-[60px] text-sm"
+          />
+        </div>
+      );
+    }
+
+    // Number fields
+    if (typeof value === 'number') {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="text-sm capitalize">
+            {key}
+          </Label>
+          <Input
+            id={fieldId}
+            type="number"
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, Number(e.target.value) || 0)}
+            placeholder={`Enter ${key}`}
+            className="h-8 text-sm"
+          />
+        </div>
+      );
+    }
+
+    // String fields
+    if (typeof value === 'string') {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="text-sm capitalize">
+            {key}
+          </Label>
+          <Input
+            id={fieldId}
+            type="text"
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, e.target.value)}
+            placeholder={`Enter ${key}`}
+            className="h-8 text-sm"
+          />
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-40 bg-black/20" onClick={onClose} />
+
+      {/* Property Editor Modal */}
+      <div
+        ref={modalRef}
+        className={cn(
+          'fixed z-50 max-h-96 w-80 overflow-y-auto',
+          'rounded-lg border shadow-lg',
+          'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
+        )}
+        style={{
+          left: position.x,
+          top: position.y,
+        }}
+      >
+        <div className="border-b border-stone-200 p-3 dark:border-stone-700">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-medium text-stone-900 capitalize dark:text-stone-100">
+              {component.type} Properties
+            </h3>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleDelete}
+                className="h-6 w-6 rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+                title="Delete Component"
+              >
+                <Trash2 className="h-3 w-3" />
+              </button>
+              <button
+                type="button"
+                onClick={onClose}
+                className="h-6 w-6 rounded p-0 text-stone-500 transition-colors hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-700"
+                title="Close"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-3 p-3">
+          {Object.entries(component.props).map(([key, value]) =>
+            renderPropertyField(key, value)
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/components/admin/content/property-editor.tsx b/components/admin/content/property-editor.tsx
deleted file mode 100644
index b30cb405..00000000
--- a/components/admin/content/property-editor.tsx
+++ /dev/null
@@ -1,356 +0,0 @@
-'use client';
-
-import { Input } from '@components/ui/input';
-import { Label } from '@components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@components/ui/select';
-import { Textarea } from '@components/ui/textarea';
-import { ComponentInstance } from '@lib/types/about-page-components';
-import { cn } from '@lib/utils';
-import { Plus, Trash2 } from 'lucide-react';
-
-import React from 'react';
-
-interface PropertyEditorProps {
-  component: ComponentInstance | null;
-  onPropsChange: (newProps: Record<string, unknown>) => void;
-  onDeleteComponent?: () => void;
-}
-
-/**
- * Array Property Editor Component
- *
- * Handles editing of array properties like cards items
- */
-interface ArrayPropertyEditorProps {
-  items: Array<Record<string, unknown>>;
-  onItemsChange: (newItems: Array<Record<string, unknown>>) => void;
-}
-
-const ArrayPropertyEditor: React.FC<ArrayPropertyEditorProps> = ({
-  items,
-  onItemsChange,
-}) => {
-  const handleItemChange = (index: number, key: string, value: unknown) => {
-    const newItems = [...items];
-    newItems[index] = { ...newItems[index], [key]: value };
-    onItemsChange(newItems);
-  };
-
-  const handleAddItem = () => {
-    // Default structure for new card items
-    const newItem = {
-      title: 'New Item',
-      description: 'Add description here',
-    };
-    onItemsChange([...items, newItem]);
-  };
-
-  const handleRemoveItem = (index: number) => {
-    const newItems = items.filter((_, i) => i !== index);
-    onItemsChange(newItems);
-  };
-
-  return (
-    <div className="space-y-3">
-      {items.map((item, index) => (
-        <div
-          key={index}
-          className={cn(
-            'rounded-lg border p-4',
-            'border-stone-200 bg-white dark:border-stone-600 dark:bg-stone-800'
-          )}
-        >
-          <div className="pb-2">
-            <div className="flex items-center justify-between">
-              <h4
-                className={cn(
-                  'text-sm font-medium',
-                  'text-stone-900 dark:text-stone-100'
-                )}
-              >
-                Item {index + 1}
-              </h4>
-              <button
-                type="button"
-                onClick={() => handleRemoveItem(index)}
-                className={cn(
-                  'h-8 w-8 rounded p-0 text-red-500 transition-colors',
-                  'hover:bg-red-100 dark:hover:bg-red-900/50'
-                )}
-              >
-                <Trash2 className="h-4 w-4" />
-              </button>
-            </div>
-          </div>
-          <div className="space-y-3">
-            {Object.entries(item).map(([key, value]) => (
-              <div key={key} className="space-y-2">
-                <Label
-                  htmlFor={`item-${index}-${key}`}
-                  className="text-sm capitalize"
-                >
-                  {key}
-                </Label>
-                <Textarea
-                  id={`item-${index}-${key}`}
-                  value={String(value || '')}
-                  onChange={e => handleItemChange(index, key, e.target.value)}
-                  className="min-h-[60px] text-sm"
-                  placeholder={`Enter ${key}`}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-      <button
-        type="button"
-        onClick={handleAddItem}
-        className={cn(
-          'w-full rounded-md border px-4 py-2 text-sm font-medium transition-colors',
-          'border-stone-300 bg-white text-stone-900 hover:bg-stone-50',
-          'dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:hover:bg-stone-700',
-          'flex items-center justify-center gap-2'
-        )}
-      >
-        <Plus className="h-4 w-4" />
-        Add Item
-      </button>
-    </div>
-  );
-};
-
-/**
- * Property Editor Component
- *
- * Main property editor that renders appropriate inputs based on component type and properties
- */
-const PropertyEditor: React.FC<PropertyEditorProps> = ({
-  component,
-  onPropsChange,
-  onDeleteComponent,
-}) => {
-  if (!component) {
-    return (
-      <div
-        className={cn(
-          'flex h-32 items-center justify-center',
-          'text-stone-500 dark:text-stone-400'
-        )}
-      >
-        <p>Select a component to edit its properties</p>
-      </div>
-    );
-  }
-
-  const handleInputChange = (name: string, value: unknown) => {
-    onPropsChange({ ...component.props, [name]: value });
-  };
-
-  const renderPropertyField = (key: string, value: unknown) => {
-    const fieldId = `prop-${key}`;
-
-    // Array properties (cards items)
-    if (key === 'items' && component.type === 'cards') {
-      return (
-        <div key={key} className="space-y-2">
-          <Label htmlFor={fieldId} className="capitalize">
-            {key}
-          </Label>
-          <ArrayPropertyEditor
-            items={value as Array<Record<string, unknown>>}
-            onItemsChange={newItems => handleInputChange(key, newItems)}
-          />
-        </div>
-      );
-    }
-
-    // Select fields
-    const selectFields: Record<
-      string,
-      Array<{ value: string; label: string }>
-    > = {
-      layout: [
-        { value: 'grid', label: 'Grid' },
-        { value: 'list', label: 'List' },
-      ],
-      thickness: [
-        { value: 'thin', label: 'Thin' },
-        { value: 'medium', label: 'Medium' },
-        { value: 'thick', label: 'Thick' },
-      ],
-      style: [
-        { value: 'solid', label: 'Solid' },
-        { value: 'dashed', label: 'Dashed' },
-        { value: 'dotted', label: 'Dotted' },
-      ],
-      alignment: [
-        { value: 'left', label: 'Left' },
-        { value: 'center', label: 'Center' },
-        { value: 'right', label: 'Right' },
-      ],
-      textAlign: [
-        { value: 'left', label: 'Left' },
-        { value: 'center', label: 'Center' },
-        { value: 'right', label: 'Right' },
-      ],
-      action: [
-        { value: 'link', label: 'Link' },
-        { value: 'submit', label: 'Submit' },
-        { value: 'external', label: 'External' },
-      ],
-      variant: [
-        { value: 'primary', label: 'Primary' },
-        { value: 'secondary', label: 'Secondary' },
-        { value: 'outline', label: 'Outline' },
-      ],
-      level: [
-        { value: '1', label: 'H1' },
-        { value: '2', label: 'H2' },
-        { value: '3', label: 'H3' },
-        { value: '4', label: 'H4' },
-        { value: '5', label: 'H5' },
-        { value: '6', label: 'H6' },
-      ],
-    };
-
-    if (selectFields[key]) {
-      return (
-        <div key={key} className="space-y-2">
-          <Label htmlFor={fieldId} className="capitalize">
-            {key}
-          </Label>
-          <Select
-            value={String(value || '')}
-            onValueChange={newValue =>
-              handleInputChange(
-                key,
-                key === 'level' ? Number(newValue) : newValue
-              )
-            }
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={`Select ${key}`} />
-            </SelectTrigger>
-            <SelectContent>
-              {selectFields[key].map(option => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      );
-    }
-
-    // Multi-line text fields
-    if (
-      key === 'content' &&
-      (component.type === 'paragraph' || component.type === 'heading')
-    ) {
-      return (
-        <div key={key} className="space-y-2">
-          <Label htmlFor={fieldId} className="capitalize">
-            {key}
-          </Label>
-          <Textarea
-            id={fieldId}
-            value={String(value || '')}
-            onChange={e => handleInputChange(key, e.target.value)}
-            placeholder={`Enter ${key}`}
-            className="min-h-[80px]"
-          />
-        </div>
-      );
-    }
-
-    // Number fields
-    if (typeof value === 'number') {
-      return (
-        <div key={key} className="space-y-2">
-          <Label htmlFor={fieldId} className="capitalize">
-            {key}
-          </Label>
-          <Input
-            id={fieldId}
-            type="number"
-            value={String(value || '')}
-            onChange={e => handleInputChange(key, Number(e.target.value) || 0)}
-            placeholder={`Enter ${key}`}
-          />
-        </div>
-      );
-    }
-
-    // String fields
-    if (typeof value === 'string') {
-      return (
-        <div key={key} className="space-y-2">
-          <Label htmlFor={fieldId} className="capitalize">
-            {key}
-          </Label>
-          <Input
-            id={fieldId}
-            type="text"
-            value={String(value || '')}
-            onChange={e => handleInputChange(key, e.target.value)}
-            placeholder={`Enter ${key}`}
-          />
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <div
-      className={cn(
-        'w-full rounded-lg border',
-        'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
-      )}
-    >
-      <div className="border-b border-stone-200 p-4 dark:border-stone-700">
-        <div className="flex items-center justify-between">
-          <h3
-            className={cn(
-              'text-lg font-medium capitalize',
-              'text-stone-900 dark:text-stone-100'
-            )}
-          >
-            {component.type} Properties
-          </h3>
-          {onDeleteComponent && (
-            <button
-              type="button"
-              onClick={onDeleteComponent}
-              className={cn(
-                'rounded px-3 py-1.5 text-sm font-medium transition-colors',
-                'bg-red-600 text-white hover:bg-red-700',
-                'dark:bg-red-500 dark:hover:bg-red-600',
-                'flex items-center gap-2'
-              )}
-            >
-              <Trash2 className="h-4 w-4" />
-              Delete
-            </button>
-          )}
-        </div>
-      </div>
-      <div className="space-y-4 p-4">
-        {Object.entries(component.props).map(([key, value]) =>
-          renderPropertyField(key, value)
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default PropertyEditor;

From e92013be0b680f12433af7372fe9cd14436059c3 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sat, 9 Aug 2025 20:03:29 +0800
Subject: [PATCH 09/66] refactor(admin): clean up duplicate Save/Reset buttons
 and unused code

- Remove non-functional upper Save/Reset buttons from content management page
- Keep only the working lower Save/Reset buttons
- Clean up unused handleSave/handleReset functions in about-editor
- Remove unused icon imports (Save, RotateCcw) from about-editor
- Maintain all existing functionality while eliminating code duplication
---
 app/admin/content/page.tsx                | 57 -----------------------
 components/admin/content/about-editor.tsx | 53 +--------------------
 2 files changed, 1 insertion(+), 109 deletions(-)

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index 9d35b611..99cc4c35 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -437,63 +437,6 @@ export default function ContentManagementPage() {
             )}
           >
             <div className="h-full overflow-auto p-6">{renderEditor()}</div>
-            <div
-              className={cn(
-                'absolute right-0 bottom-0 left-0 p-4',
-                isDark ? 'bg-stone-900/80' : 'bg-white/80',
-                'backdrop-blur-sm'
-              )}
-            >
-              <div className="flex items-center justify-between">
-                <div>
-                  {hasChanges && (
-                    <div
-                      className={cn(
-                        'flex items-center gap-2 text-sm',
-                        isDark ? 'text-stone-400' : 'text-stone-500'
-                      )}
-                    >
-                      <div className="h-2 w-2 rounded-full bg-orange-500" />
-                      <span>{t('saveActions.hasChanges')}</span>
-                    </div>
-                  )}
-                </div>
-                <div className="flex items-center gap-3">
-                  <button
-                    onClick={handleReset}
-                    disabled={!hasChanges || isSaving}
-                    className={cn(
-                      'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
-                      !hasChanges || isSaving
-                        ? 'cursor-not-allowed text-stone-500'
-                        : isDark
-                          ? 'text-stone-300 hover:bg-stone-800'
-                          : 'text-stone-600 hover:bg-stone-100'
-                    )}
-                  >
-                    {t('saveActions.reset')}
-                  </button>
-                  <button
-                    onClick={handleSave}
-                    disabled={!hasChanges || isSaving}
-                    className={cn(
-                      'rounded-lg px-6 py-2 text-sm font-medium shadow-sm transition-colors',
-                      !hasChanges || isSaving
-                        ? isDark
-                          ? 'cursor-not-allowed bg-stone-700 text-stone-400'
-                          : 'cursor-not-allowed bg-stone-300 text-stone-500'
-                        : isDark
-                          ? 'bg-stone-100 text-stone-900 hover:bg-white'
-                          : 'bg-stone-900 text-white hover:bg-stone-800'
-                    )}
-                  >
-                    {isSaving
-                      ? t('saveActions.saving_')
-                      : t('saveActions.save')}
-                  </button>
-                </div>
-              </div>
-            </div>
           </div>
         )}
       </div>
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 3ee937e3..b886c748 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -25,7 +25,7 @@ import {
   useDebouncedCallback,
   useThrottledCallback,
 } from '@lib/utils/performance';
-import { Plus, Redo2, RotateCcw, Save, Trash2, Undo2 } from 'lucide-react';
+import { Plus, Redo2, Trash2, Undo2 } from 'lucide-react';
 
 import React, { useCallback, useEffect, useMemo } from 'react';
 
@@ -229,41 +229,6 @@ export function AboutEditor({
     }
   };
 
-  // Save changes back to translations
-  const handleSave = () => {
-    if (!pageContent) return;
-
-    const updatedTranslation: AboutTranslationData = {
-      sections: pageContent.sections,
-      metadata: {
-        ...pageContent.metadata,
-        lastModified: new Date().toISOString(),
-      },
-    };
-
-    const newTranslations = {
-      ...translations,
-      [currentLocale]: updatedTranslation,
-    };
-
-    onTranslationsChange(newTranslations);
-  };
-
-  // Handle reset
-  const handleReset = () => {
-    if (currentTranslation.sections) {
-      const content: PageContent = {
-        sections: currentTranslation.sections,
-        metadata: currentTranslation.metadata || {
-          version: '1.0.0',
-          lastModified: new Date().toISOString(),
-          author: 'admin',
-        },
-      };
-      setPageContent(content);
-    }
-  };
-
   if (!pageContent) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -366,22 +331,6 @@ export function AboutEditor({
                 Add Section
               </Button>
             </div>
-
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleReset}
-                disabled={!isDirty}
-              >
-                <RotateCcw className="mr-2 h-4 w-4" />
-                Reset
-              </Button>
-              <Button onClick={handleSave} disabled={!isDirty}>
-                <Save className="mr-2 h-4 w-4" />
-                Save
-              </Button>
-            </div>
           </div>
         </div>
 

From 4b18edef2e3f4dc295697e831e5dd2a279a5d084 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sat, 9 Aug 2025 20:21:19 +0800
Subject: [PATCH 10/66] revert(admin): fix infinite loop by reverting
 problematic Reset changes

- Revert useEffect changes that monitored currentTranslation
- Remove complex isLoading state management that caused loops
- Restore stable editing functionality with simple data flow
- Keep working preview sync with 100ms debounce delay
- Reset button functionality temporarily disabled to prevent loops

Fixes editing interface "flickering" and infinite update cycles
---
 app/admin/content/page.tsx                | 1 +
 components/admin/content/about-editor.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index 99cc4c35..972b8708 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -266,6 +266,7 @@ export default function ContentManagementPage() {
 
   const renderPreview = () => {
     if (activeTab === 'about') {
+      // Use the most up-to-date translation data that includes real-time edits
       const currentTranslation = aboutTranslations?.[currentLocale];
       return currentTranslation ? (
         <AboutPreview
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index b886c748..b3596739 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -159,10 +159,17 @@ export function AboutEditor({
 
       onTranslationsChange(newTranslations);
     }, [pageContent, translations, currentLocale, onTranslationsChange]),
-    1000, // 1 second delay
+    100, // 100ms delay for near real-time sync
     [pageContent, translations, currentLocale]
   );
 
+  // Auto-save when pageContent changes
+  useEffect(() => {
+    if (pageContent) {
+      debouncedSave();
+    }
+  }, [pageContent, debouncedSave]);
+
   // Throttled property change handler for better performance
   const throttledPropsChange = useThrottledCallback(
     useCallback(

From 970da5546b0319cd6435d3a58a8261af7bbc980d Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sun, 10 Aug 2025 10:21:05 +0800
Subject: [PATCH 11/66] fix(admin): improve drag and drop functionality with
 better target detection

- Enhanced SortableContainer with improved visual feedback and data passing
- Reduced drag activation distance from 8px to 5px for better responsiveness
- Added support for dropping components on section drop zones to create new sections
- Improved component insertion logic with proper index handling
- Added comprehensive debug logging for troubleshooting drag operations
- Enhanced visual states for dragging (opacity, scaling) and drop targets
---
 components/admin/content/about-editor.tsx   |  5 +-
 components/admin/content/dnd-components.tsx | 15 +++-
 components/admin/content/dnd-context.tsx    |  2 +-
 lib/stores/about-editor-store.ts            | 83 ++++++++++++++++++---
 4 files changed, 90 insertions(+), 15 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index b3596739..ce2a6836 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -416,8 +416,9 @@ export function AboutEditor({
                             id={`section-${section.id}-${columnIndex}`}
                             items={columnItems}
                             className={cn(
-                              'min-h-24 rounded-md border-2 border-dashed p-3 transition-colors',
-                              'border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-700/50'
+                              'min-h-24 rounded-md border-2 border-dashed p-3 transition-all duration-200',
+                              'border-stone-300 bg-stone-50 hover:border-stone-400 hover:bg-stone-100',
+                              'dark:border-stone-600 dark:bg-stone-700/50 dark:hover:border-stone-500 dark:hover:bg-stone-600/50'
                             )}
                           >
                             {column.length === 0 && (
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index 1a20d76d..beea56e8 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -79,6 +79,7 @@ export function Draggable({
       id,
       disabled,
       data: {
+        type: id.startsWith('palette-') ? 'palette-item' : 'component',
         preview,
       },
     });
@@ -93,7 +94,7 @@ export function Draggable({
       style={style}
       className={cn(
         className,
-        isDragging && 'opacity-50',
+        isDragging && 'scale-95 opacity-50',
         !disabled && 'cursor-grab active:cursor-grabbing'
       )}
       {...listeners}
@@ -133,6 +134,9 @@ export function Sortable({
   } = useSortable({
     id,
     disabled,
+    data: {
+      type: 'component',
+    },
   });
 
   const style = {
@@ -146,7 +150,7 @@ export function Sortable({
       style={style}
       className={cn(
         className,
-        isDragging && 'z-50 opacity-50',
+        isDragging && 'z-50 scale-105 opacity-60',
         !disabled && 'cursor-grab active:cursor-grabbing'
       )}
       {...listeners}
@@ -180,6 +184,10 @@ export function SortableContainer({
 }: SortableContainerProps) {
   const { isOver, setNodeRef } = useDroppable({
     id,
+    data: {
+      type: 'container',
+      accepts: ['component', 'palette-item'],
+    },
   });
 
   return (
@@ -188,7 +196,8 @@ export function SortableContainer({
         ref={setNodeRef}
         className={cn(
           className,
-          isOver && 'ring-opacity-50 ring-2 ring-blue-500'
+          isOver &&
+            'ring-opacity-75 bg-blue-50/50 ring-2 ring-blue-400 dark:bg-blue-900/20'
         )}
       >
         {children}
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index 14e841b9..f975eada 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -36,7 +36,7 @@ export function DndContextWrapper({
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        distance: 8,
+        distance: 5,
       },
     })
   );
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index db585180..dcca6648 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -222,31 +222,86 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     const activeId = String(active.id);
     const overId = String(over.id);
 
+    console.log('Drag End - Active:', activeId, 'Over:', overId);
+    console.log('Active data:', active.data.current);
+    console.log('Over data:', over.data.current);
+
     // Handle dragging from component palette
     if (activeId.startsWith('palette-')) {
       const componentType = activeId.replace('palette-', '');
       const componentDef = availableComponents.find(
         comp => comp.type === componentType
       );
-      if (!componentDef) return;
+      if (!componentDef) {
+        console.log('Component definition not found for:', componentType);
+        return;
+      }
 
-      // Parse destination - handle both direct drops on containers and on components
+      // Parse destination - handle direct drops on containers
       let targetContainerId = overId;
+      let insertIndex = -1; // -1 means append to end
+
+      // Handle dropping on section drop zones (creates new section)
+      if (overId.startsWith('section-drop-')) {
+        console.log('Dropping on section drop zone:', overId);
+
+        // Create a new section
+        const newSection = createDefaultSection('single-column');
+        const newComponent: ComponentInstance = {
+          id: generateUniqueId('comp'),
+          type: componentDef.type,
+          props: { ...componentDef.defaultProps },
+        };
+
+        // Add component to the new section
+        newSection.columns[0].push(newComponent);
+
+        // Handle different drop zones
+        if (overId === 'section-drop-final') {
+          // Add to the end
+          newPageContent.sections.push(newSection);
+        } else {
+          // Parse the drop zone index to insert at the right position
+          const dropIndex = parseInt(overId.replace('section-drop-', ''));
+          newPageContent.sections.splice(dropIndex, 0, newSection);
+        }
+
+        console.log('New section created with component:', newComponent.id);
 
-      // If dropping on a component, get its container
-      if (!overId.startsWith('section-')) {
-        // Find which container this component belongs to
+        // Save changes and exit early
+        set(state => ({
+          pageContent: newPageContent,
+          undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+          redoStack: [],
+          isDirty: true,
+        }));
+        return;
+      }
+
+      // Check if we're dropping directly on a container
+      if (overId.startsWith('section-')) {
+        targetContainerId = overId;
+        console.log('Dropping on container:', targetContainerId);
+      } else {
+        // Find which container this component belongs to and get insert position
         for (const section of newPageContent.sections) {
           for (
             let colIndex = 0;
             colIndex < section.columns.length;
             colIndex++
           ) {
-            const componentExists = section.columns[colIndex].find(
+            const componentIndex = section.columns[colIndex].findIndex(
               comp => comp.id === overId
             );
-            if (componentExists) {
+            if (componentIndex !== -1) {
               targetContainerId = `section-${section.id}-${colIndex}`;
+              insertIndex = componentIndex; // Insert before this component
+              console.log(
+                'Dropping before component:',
+                overId,
+                'at index:',
+                insertIndex
+              );
               break;
             }
           }
@@ -264,8 +319,18 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
             props: { ...componentDef.defaultProps },
           };
 
-          // Add to the end of the column
-          section.columns[parseInt(columnIndex)].push(newComponent);
+          // Insert at the specified position or append to end
+          if (insertIndex === -1) {
+            section.columns[parseInt(columnIndex)].push(newComponent);
+          } else {
+            section.columns[parseInt(columnIndex)].splice(
+              insertIndex,
+              0,
+              newComponent
+            );
+          }
+
+          console.log('Component added successfully:', newComponent.id);
         }
       }
     } else {

From 73680f9131cace1f24ea739d9d26b7e477cee059 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Sun, 10 Aug 2025 15:15:53 +0800
Subject: [PATCH 12/66] feat(admin): enhance drag and drop with component
 cloning and animations

- Add component cloning that follows mouse during drag from palette
- Implement visual feedback for valid/invalid drop zones with color changes
- Create smooth return animation for components dropped in invalid areas
- Add appear animation with pulse effect for successfully placed components
- Enhance drag overlay with rotation and improved styling
- Add drop zone validation to prevent invalid placements
- Improve component selection and highlighting after successful drops
---
 app/globals.css                               |  59 ++++++++
 components/admin/content/about-editor.tsx     |   4 +-
 .../admin/content/component-palette.tsx       |   4 +-
 components/admin/content/dnd-context.tsx      | 133 +++++++++++++++---
 lib/stores/about-editor-store.ts              |  50 ++++++-
 5 files changed, 227 insertions(+), 23 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 0c56f49d..0b86dde3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -755,3 +755,62 @@ body.default-page {
 .dark .loop-node:hover::after {
   background: #78716c; /* stone-500 */
 }
+
+/* Component drag and drop animations for admin content editor */
+@keyframes componentAppear {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.95);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translateY(-4px) scale(1.02);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes componentPulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
+  }
+}
+
+/* Component appear animation */
+.animate-component-appear {
+  animation:
+    componentAppear 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards,
+    componentPulse 600ms ease-in-out 400ms;
+}
+
+/* Component target container for animation */
+.animate-component-target {
+  transition: all 200ms ease-out;
+}
+
+/* Enhanced drop zone styling for better visual feedback */
+.drop-zone-active {
+  background: linear-gradient(
+    135deg,
+    rgba(34, 197, 94, 0.1),
+    rgba(16, 185, 129, 0.15)
+  );
+  border: 2px dashed rgba(34, 197, 94, 0.6);
+  box-shadow: inset 0 2px 8px rgba(34, 197, 94, 0.1);
+}
+
+.dark .drop-zone-active {
+  background: linear-gradient(
+    135deg,
+    rgba(34, 197, 94, 0.15),
+    rgba(16, 185, 129, 0.2)
+  );
+  border: 2px dashed rgba(34, 197, 94, 0.7);
+  box-shadow: inset 0 2px 8px rgba(34, 197, 94, 0.15);
+}
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index ce2a6836..18f3bfe6 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -437,19 +437,21 @@ export function AboutEditor({
                                 key={component.id}
                                 id={component.id}
                                 className={cn(
-                                  'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                  'mb-3 cursor-pointer rounded-lg border p-3 transition-all duration-300',
                                   selectedComponentId === component.id
                                     ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
                                     : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
                                 )}
                               >
                                 <div
+                                  data-component-id={component.id}
                                   onClick={() =>
                                     handleComponentClick(component.id)
                                   }
                                   onContextMenu={e =>
                                     handleContextMenu(e, component.id)
                                   }
+                                  className="animate-component-target"
                                 >
                                   <ComponentRenderer component={component} />
                                 </div>
diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
index 2e237315..dc24f320 100644
--- a/components/admin/content/component-palette.tsx
+++ b/components/admin/content/component-palette.tsx
@@ -228,7 +228,9 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
                         id={`palette-${comp.type}`}
                         preview={componentPreview}
                       >
-                        {componentPreview}
+                        <div data-dnd-id={`palette-${comp.type}`}>
+                          {componentPreview}
+                        </div>
                       </Draggable>
                     );
                   })}
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index f975eada..c63223fa 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -3,6 +3,7 @@
 import {
   DndContext,
   DragEndEvent,
+  DragOverEvent,
   DragOverlay,
   DragStartEvent,
   PointerSensor,
@@ -11,27 +12,33 @@ import {
 } from '@dnd-kit/core';
 import { createPortal } from 'react-dom';
 
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 interface DndContextWrapperProps {
   children: React.ReactNode;
   onDragEnd: (event: DragEndEvent) => void;
 }
 
+interface DragState {
+  id: string;
+  content: React.ReactNode;
+  isPaletteItem: boolean;
+  isValidDrop: boolean;
+  originalRect?: DOMRect;
+}
+
 /**
  * DndKit Context Wrapper
  *
- * Provides drag and drop context using @dnd-kit/core
- * Replaces react-beautiful-dnd's DragDropContext
+ * Enhanced drag and drop with component cloning, drop validation, and animations
  */
 export function DndContextWrapper({
   children,
   onDragEnd,
 }: DndContextWrapperProps) {
-  const [activeItem, setActiveItem] = useState<{
-    id: string;
-    content: React.ReactNode;
-  } | null>(null);
+  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [isAnimatingReturn, setIsAnimatingReturn] = useState(false);
+  const dragOverlayRef = useRef<HTMLDivElement>(null);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -41,32 +48,122 @@ export function DndContextWrapper({
     })
   );
 
-  const handleDragStart = (event: DragStartEvent) => {
+  const handleDragStart = useCallback((event: DragStartEvent) => {
     const { active } = event;
-    setActiveItem({
+    const isPaletteItem = String(active.id).startsWith('palette-');
+
+    // Get original element position for return animation
+    let originalRect: DOMRect | undefined;
+    if (isPaletteItem) {
+      const element =
+        document.querySelector(
+          `[data-rbd-drag-handle-draggable-id="${active.id}"]`
+        ) || document.querySelector(`[data-dnd-id="${active.id}"]`);
+      if (element) {
+        originalRect = element.getBoundingClientRect();
+      }
+    }
+
+    setDragState({
       id: String(active.id),
       content: active.data.current?.preview || String(active.id),
+      isPaletteItem,
+      isValidDrop: false,
+      originalRect,
+    });
+  }, []);
+
+  const handleDragOver = useCallback((event: DragOverEvent) => {
+    const { over } = event;
+
+    setDragState(prev => {
+      if (!prev) return prev;
+
+      // Check if current position is a valid drop zone
+      const isValidDrop =
+        over &&
+        (String(over.id).startsWith('section-') ||
+          String(over.id).includes('drop'));
+
+      return {
+        ...prev,
+        isValidDrop: Boolean(isValidDrop),
+      };
     });
-  };
+  }, []);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      const isPaletteItem = String(active.id).startsWith('palette-');
+      const isValidDrop =
+        over &&
+        (String(over.id).startsWith('section-') ||
+          String(over.id).includes('drop'));
+
+      if (isPaletteItem && !isValidDrop && dragState?.originalRect) {
+        // Animate return to original position
+        setIsAnimatingReturn(true);
 
-  const handleDragEnd = (event: DragEndEvent) => {
-    setActiveItem(null);
-    onDragEnd(event);
-  };
+        // Start return animation
+        const overlay = dragOverlayRef.current;
+        if (overlay) {
+          const currentRect = overlay.getBoundingClientRect();
+          const deltaX = dragState.originalRect.left - currentRect.left;
+          const deltaY = dragState.originalRect.top - currentRect.top;
+
+          overlay.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;
+          overlay.style.transition =
+            'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)';
+
+          // Clean up after animation
+          setTimeout(() => {
+            setDragState(null);
+            setIsAnimatingReturn(false);
+          }, 300);
+        } else {
+          // Fallback if no overlay ref
+          setTimeout(() => {
+            setDragState(null);
+            setIsAnimatingReturn(false);
+          }, 100);
+        }
+      } else {
+        // Normal drag end handling
+        setDragState(null);
+        setIsAnimatingReturn(false);
+        onDragEnd(event);
+      }
+    },
+    [dragState, onDragEnd]
+  );
 
   return (
     <DndContext
       sensors={sensors}
       onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
       onDragEnd={handleDragEnd}
     >
       {children}
       {typeof document !== 'undefined' &&
         createPortal(
-          <DragOverlay>
-            {activeItem ? (
-              <div className="rounded-lg border bg-white p-2 shadow-lg dark:bg-gray-800">
-                {activeItem.content}
+          <DragOverlay dropAnimation={null}>
+            {dragState ? (
+              <div
+                ref={dragOverlayRef}
+                className={`rounded-lg border p-2 shadow-xl transition-all duration-200 ${
+                  dragState.isValidDrop
+                    ? 'scale-105 border-emerald-200 bg-emerald-50 shadow-emerald-200/50 dark:border-emerald-700 dark:bg-emerald-900/20'
+                    : dragState.isPaletteItem
+                      ? 'border-stone-200 bg-white shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-800'
+                      : 'border-stone-200 bg-white shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-800'
+                } ${isAnimatingReturn ? 'pointer-events-none' : ''} `}
+                style={{
+                  transform: isAnimatingReturn ? undefined : 'rotate(5deg)',
+                }}
+              >
+                {dragState.content}
               </div>
             ) : null}
           </DragOverlay>,
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index dcca6648..030fbf73 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -201,7 +201,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     }
   },
 
-  // Handle drag and drop (optimized with performance considerations)
+  // Handle drag and drop with enhanced animations and validation
   handleDragEnd: (event: DragEndEvent) => {
     const { active, over } = event;
 
@@ -241,11 +241,22 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       let targetContainerId = overId;
       let insertIndex = -1; // -1 means append to end
 
+      // Validate drop zone - only allow drops on valid targets
+      const isValidDropZone =
+        overId.startsWith('section-drop-') ||
+        overId.startsWith('section-') ||
+        over.data.current?.type === 'container';
+
+      if (!isValidDropZone) {
+        console.log('Invalid drop zone:', overId);
+        return;
+      }
+
       // Handle dropping on section drop zones (creates new section)
       if (overId.startsWith('section-drop-')) {
         console.log('Dropping on section drop zone:', overId);
 
-        // Create a new section
+        // Create a new section with animation-ready component
         const newSection = createDefaultSection('single-column');
         const newComponent: ComponentInstance = {
           id: generateUniqueId('comp'),
@@ -268,13 +279,25 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
 
         console.log('New section created with component:', newComponent.id);
 
-        // Save changes and exit early
+        // Save changes with animation trigger
         set(state => ({
           pageContent: newPageContent,
           undoStack: [...state.undoStack, state.pageContent!].slice(-20),
           redoStack: [],
           isDirty: true,
+          selectedComponentId: newComponent.id, // Highlight the new component
         }));
+
+        // Trigger component appear animation
+        setTimeout(() => {
+          const element = document.querySelector(
+            `[data-component-id="${newComponent.id}"]`
+          );
+          if (element) {
+            element.classList.add('animate-component-appear');
+          }
+        }, 50);
+
         return;
       }
 
@@ -331,6 +354,27 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
           }
 
           console.log('Component added successfully:', newComponent.id);
+
+          // Set the new component as selected and trigger appear animation
+          set(state => ({
+            pageContent: newPageContent,
+            undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+            redoStack: [],
+            isDirty: true,
+            selectedComponentId: newComponent.id,
+          }));
+
+          // Trigger component appear animation
+          setTimeout(() => {
+            const element = document.querySelector(
+              `[data-component-id="${newComponent.id}"]`
+            );
+            if (element) {
+              element.classList.add('animate-component-appear');
+            }
+          }, 50);
+
+          return;
         }
       }
     } else {

From d738719b08a2ae61a74910417d069580b27ce846 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sun, 10 Aug 2025 19:44:37 +0800
Subject: [PATCH 13/66] refactor(admin): simplify drag and drop highlighting
 with native events

Replace complex useDroppable dual-zone system with native event listeners
using rectangle collision detection. This fixes section highlighting issues
when dragging components over existing content areas while maintaining all
existing drop functionality with significantly reduced code complexity.
---
 app/globals.css                             |  5 ++
 components/admin/content/about-editor.tsx   | 68 ++++++++++++++++++++-
 components/admin/content/dnd-components.tsx |  2 +-
 components/admin/content/dnd-context.tsx    | 12 +++-
 lib/stores/about-editor-store.ts            |  9 ++-
 5 files changed, 88 insertions(+), 8 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 0b86dde3..679ae0fd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -814,3 +814,8 @@ body.default-page {
   border: 2px dashed rgba(34, 197, 94, 0.7);
   box-shadow: inset 0 2px 8px rgba(34, 197, 94, 0.15);
 }
+
+/* Simple visual indicator for palette dragging state */
+.palette-dragging {
+  cursor: grabbing !important;
+}
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 18f3bfe6..4b330326 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -47,6 +47,67 @@ interface AboutEditorProps {
   onLocaleChange: (newLocale: SupportedLocale) => void;
 }
 
+// Section Drop Zone Component for visual feedback - simplified approach
+function SectionDropZone({
+  sectionId,
+  children,
+  className,
+}: {
+  sectionId: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const [isHighlighted, setIsHighlighted] = React.useState(false);
+  const sectionRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const handleDragOver = (e: DragEvent) => {
+      // Only handle palette item drags
+      if (!document.body.classList.contains('palette-dragging')) {
+        setIsHighlighted(false);
+        return;
+      }
+
+      if (sectionRef.current) {
+        const rect = sectionRef.current.getBoundingClientRect();
+        const isInside =
+          e.clientX >= rect.left &&
+          e.clientX <= rect.right &&
+          e.clientY >= rect.top &&
+          e.clientY <= rect.bottom;
+
+        setIsHighlighted(isInside);
+      }
+    };
+
+    const handleDragEnd = () => {
+      setIsHighlighted(false);
+    };
+
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('dragend', handleDragEnd);
+
+    return () => {
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('dragend', handleDragEnd);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={sectionRef}
+      data-section-id={sectionId}
+      className={cn(
+        className,
+        isHighlighted &&
+          'ring-opacity-75 bg-blue-50/30 ring-2 ring-blue-400 dark:bg-blue-900/30 dark:ring-blue-300'
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
 export function AboutEditor({
   translations,
   currentLocale,
@@ -371,9 +432,10 @@ export function AboutEditor({
                   )}
 
                   {/* Section Content */}
-                  <div
+                  <SectionDropZone
+                    sectionId={section.id}
                     className={cn(
-                      'rounded-lg border p-4',
+                      'rounded-lg border p-4 transition-all duration-200',
                       'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
                     )}
                   >
@@ -461,7 +523,7 @@ export function AboutEditor({
                         );
                       })}
                     </div>
-                  </div>
+                  </SectionDropZone>
                 </div>
               ))}
 
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index beea56e8..24429bed 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -197,7 +197,7 @@ export function SortableContainer({
         className={cn(
           className,
           isOver &&
-            'ring-opacity-75 bg-blue-50/50 ring-2 ring-blue-400 dark:bg-blue-900/20'
+            'ring-opacity-75 bg-blue-50/70 shadow-lg ring-2 ring-blue-400 dark:bg-blue-900/30 dark:ring-blue-300'
         )}
       >
         {children}
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index c63223fa..165e63c6 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -62,6 +62,9 @@ export function DndContextWrapper({
       if (element) {
         originalRect = element.getBoundingClientRect();
       }
+
+      // Add CSS class to disable pointer events on sortable components during palette drag
+      document.body.classList.add('palette-dragging');
     }
 
     setDragState({
@@ -83,7 +86,8 @@ export function DndContextWrapper({
       const isValidDrop =
         over &&
         (String(over.id).startsWith('section-') ||
-          String(over.id).includes('drop'));
+          String(over.id).includes('drop') ||
+          over.data.current?.type === 'container');
 
       return {
         ...prev,
@@ -99,7 +103,8 @@ export function DndContextWrapper({
       const isValidDrop =
         over &&
         (String(over.id).startsWith('section-') ||
-          String(over.id).includes('drop'));
+          String(over.id).includes('drop') ||
+          over.data.current?.type === 'container');
 
       if (isPaletteItem && !isValidDrop && dragState?.originalRect) {
         // Animate return to original position
@@ -134,6 +139,9 @@ export function DndContextWrapper({
         setIsAnimatingReturn(false);
         onDragEnd(event);
       }
+
+      // Always remove the palette-dragging class
+      document.body.classList.remove('palette-dragging');
     },
     [dragState, onDragEnd]
   );
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index 030fbf73..f2220045 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -245,7 +245,8 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       const isValidDropZone =
         overId.startsWith('section-drop-') ||
         overId.startsWith('section-') ||
-        over.data.current?.type === 'container';
+        over.data.current?.type === 'container' ||
+        over.data.current?.accepts?.includes('palette-item');
 
       if (!isValidDropZone) {
         console.log('Invalid drop zone:', overId);
@@ -302,9 +303,13 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       }
 
       // Check if we're dropping directly on a container
-      if (overId.startsWith('section-')) {
+      if (overId.startsWith('section-') && !overId.includes('drop')) {
         targetContainerId = overId;
         console.log('Dropping on container:', targetContainerId);
+      } else if (over.data.current?.type === 'container') {
+        // Handle drops on SortableContainer components
+        targetContainerId = overId;
+        console.log('Dropping on sortable container:', targetContainerId);
       } else {
         // Find which container this component belongs to and get insert position
         for (const section of newPageContent.sections) {

From e2fcd5d846a107107d076156ba0e9c9ea6b6b46e Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Sun, 10 Aug 2025 21:14:06 +0800
Subject: [PATCH 14/66] refactor(admin): improve drag and drop with section
 highlighting and property inheritance

---
 .../about/dynamic-about-renderer.test.tsx     |  54 +++---
 __tests__/utils/data-migration.test.ts        |  94 ++++++----
 .../2025-08-08T12-23-05-484Z/de-DE.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/en-US.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/es-ES.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/fr-FR.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/it-IT.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/ja-JP.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/pt-PT.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/ru-RU.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/zh-CN.json       |   2 +-
 .../2025-08-08T12-23-05-484Z/zh-TW.json       |   2 +-
 components/about/dynamic-about-renderer.tsx   |  12 +-
 components/admin/content/about-editor.tsx     |  55 ++----
 components/admin/content/about-preview.tsx    |   5 +-
 .../admin/content/component-renderer.tsx      |  12 +-
 components/admin/content/dnd-components.tsx   |   2 +
 components/admin/content/dnd-context.tsx      |  89 +++++----
 lib/stores/about-editor-store.ts              | 172 +++++++++++-------
 lib/types/about-page-components.ts            |  82 +++++++++
 lib/utils/data-migration.ts                   |  12 ++
 lib/utils/performance.ts                      |  48 ++---
 messages/de-DE.json                           |   2 +-
 messages/en-US.json                           |   2 +-
 messages/es-ES.json                           |   2 +-
 messages/fr-FR.json                           |   2 +-
 messages/it-IT.json                           |   2 +-
 messages/ja-JP.json                           |   2 +-
 messages/pt-PT.json                           |   2 +-
 messages/ru-RU.json                           |   2 +-
 messages/zh-CN.json                           |   2 +-
 messages/zh-TW.json                           |   2 +-
 32 files changed, 431 insertions(+), 246 deletions(-)

diff --git a/__tests__/components/about/dynamic-about-renderer.test.tsx b/__tests__/components/about/dynamic-about-renderer.test.tsx
index 1fae3d0d..64a85805 100644
--- a/__tests__/components/about/dynamic-about-renderer.test.tsx
+++ b/__tests__/components/about/dynamic-about-renderer.test.tsx
@@ -1,7 +1,8 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
 import { DynamicAboutRenderer } from '@components/about/dynamic-about-renderer';
 import type { AboutTranslationData } from '@lib/types/about-page-components';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
 // Skip NextIntl for testing
 
 // Mock next-intl
@@ -29,7 +30,9 @@ jest.mock('@lib/supabase/client', () => ({
 jest.mock('framer-motion', () => ({
   motion: {
     div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-    section: ({ children, ...props }: any) => <section {...props}>{children}</section>,
+    section: ({ children, ...props }: any) => (
+      <section {...props}>{children}</section>
+    ),
     p: ({ children, ...props }: any) => <p {...props}>{children}</p>,
     hr: ({ children, ...props }: any) => <hr {...props}>{children}</hr>,
   },
@@ -170,7 +173,7 @@ describe('DynamicAboutRenderer', () => {
   describe('Component Rendering', () => {
     it('renders heading components correctly', () => {
       const translationData = createMockTranslationData(true);
-      
+
       renderWithIntl(
         <DynamicAboutRenderer
           translationData={translationData}
@@ -178,13 +181,17 @@ describe('DynamicAboutRenderer', () => {
         />
       );
 
-      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Heading');
-      expect(screen.getByRole('heading', { level: 1 })).toHaveClass('text-center');
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+        'Test Heading'
+      );
+      expect(screen.getByRole('heading', { level: 1 })).toHaveClass(
+        'text-center'
+      );
     });
 
     it('renders paragraph components correctly', () => {
       const translationData = createMockTranslationData(true);
-      
+
       renderWithIntl(
         <DynamicAboutRenderer
           translationData={translationData}
@@ -197,7 +204,7 @@ describe('DynamicAboutRenderer', () => {
 
     it('renders card components correctly', () => {
       const translationData = createMockTranslationData(true);
-      
+
       renderWithIntl(
         <DynamicAboutRenderer
           translationData={translationData}
@@ -213,7 +220,7 @@ describe('DynamicAboutRenderer', () => {
 
     it('renders button components correctly', () => {
       const translationData = createMockTranslationData(true);
-      
+
       renderWithIntl(
         <DynamicAboutRenderer
           translationData={translationData}
@@ -230,7 +237,7 @@ describe('DynamicAboutRenderer', () => {
   describe('Layout Rendering', () => {
     it('renders single-column layout correctly', () => {
       const translationData = createMockTranslationData(true);
-      
+
       const { container } = renderWithIntl(
         <DynamicAboutRenderer
           translationData={translationData}
@@ -244,7 +251,7 @@ describe('DynamicAboutRenderer', () => {
 
     it('renders two-column layout correctly', () => {
       const translationData = createMockTranslationData(true);
-      
+
       const { container } = renderWithIntl(
         <DynamicAboutRenderer
           translationData={translationData}
@@ -260,7 +267,7 @@ describe('DynamicAboutRenderer', () => {
   describe('Legacy Data Migration', () => {
     it('handles legacy format data correctly', () => {
       const legacyData = createMockTranslationData(false);
-      
+
       renderWithIntl(
         <DynamicAboutRenderer
           translationData={legacyData}
@@ -271,7 +278,9 @@ describe('DynamicAboutRenderer', () => {
       // Should migrate and render legacy data
       expect(screen.getByText('Legacy Title')).toBeInTheDocument();
       expect(screen.getByText('Legacy Subtitle')).toBeInTheDocument();
-      expect(screen.getByText('Legacy mission description')).toBeInTheDocument();
+      expect(
+        screen.getByText('Legacy mission description')
+      ).toBeInTheDocument();
     });
   });
 
@@ -279,7 +288,7 @@ describe('DynamicAboutRenderer', () => {
     it('calls onButtonClick when button is clicked', async () => {
       const mockOnButtonClick = jest.fn();
       const translationData = createMockTranslationData(true);
-      
+
       renderWithIntl(
         <DynamicAboutRenderer
           translationData={translationData}
@@ -307,12 +316,9 @@ describe('DynamicAboutRenderer', () => {
           author: 'test',
         },
       };
-      
+
       renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={emptyData}
-          colors={mockColors}
-        />
+        <DynamicAboutRenderer translationData={emptyData} colors={mockColors} />
       );
 
       expect(screen.getByText('No content available')).toBeInTheDocument();
@@ -343,7 +349,7 @@ describe('DynamicAboutRenderer', () => {
           author: 'test',
         },
       };
-      
+
       renderWithIntl(
         <DynamicAboutRenderer
           translationData={invalidData}
@@ -351,14 +357,16 @@ describe('DynamicAboutRenderer', () => {
         />
       );
 
-      expect(screen.getByText('Unknown component type: unknown')).toBeInTheDocument();
+      expect(
+        screen.getByText('Unknown component type: unknown')
+      ).toBeInTheDocument();
     });
   });
 
   describe('Performance Optimizations', () => {
     it('uses memoized component rendering', () => {
       const translationData = createMockTranslationData(true);
-      
+
       const { rerender } = renderWithIntl(
         <DynamicAboutRenderer
           translationData={translationData}
@@ -379,4 +387,4 @@ describe('DynamicAboutRenderer', () => {
       expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/__tests__/utils/data-migration.test.ts b/__tests__/utils/data-migration.test.ts
index 4a3819c6..b575a806 100644
--- a/__tests__/utils/data-migration.test.ts
+++ b/__tests__/utils/data-migration.test.ts
@@ -1,26 +1,24 @@
-import {
-  generateUniqueId,
-  createDefaultComponent,
-  migrateLegacyToSections,
-  validateMigratedData,
-  migrateAboutTranslationData,
-} from '@lib/utils/data-migration';
-import {
-  isDynamicFormat,
-} from '@lib/types/about-page-components';
+import { isDynamicFormat } from '@lib/types/about-page-components';
 import type {
-  LegacyAboutData,
   AboutTranslationData,
   ComponentInstance,
+  LegacyAboutData,
   PageContent,
 } from '@lib/types/about-page-components';
+import {
+  createDefaultComponent,
+  generateUniqueId,
+  migrateAboutTranslationData,
+  migrateLegacyToSections,
+  validateMigratedData,
+} from '@lib/utils/data-migration';
 
 describe('Data Migration Utilities', () => {
   describe('generateUniqueId', () => {
     it('generates unique IDs with correct prefix', () => {
       const id1 = generateUniqueId('comp');
       const id2 = generateUniqueId('comp');
-      
+
       expect(id1).toMatch(/^comp-\d+-[a-z0-9]+$/);
       expect(id2).toMatch(/^comp-\d+-[a-z0-9]+$/);
       expect(id1).not.toBe(id2);
@@ -29,7 +27,7 @@ describe('Data Migration Utilities', () => {
     it('generates IDs with different prefixes', () => {
       const compId = generateUniqueId('comp');
       const sectionId = generateUniqueId('section');
-      
+
       expect(compId).toMatch(/^comp-/);
       expect(sectionId).toMatch(/^section-/);
     });
@@ -38,7 +36,7 @@ describe('Data Migration Utilities', () => {
   describe('createDefaultComponent', () => {
     it('creates default heading component', () => {
       const component = createDefaultComponent('heading', 'Test Heading');
-      
+
       expect(component.type).toBe('heading');
       expect(component.props.content).toBe('Test Heading');
       expect(component.props.level).toBe(2);
@@ -48,7 +46,7 @@ describe('Data Migration Utilities', () => {
 
     it('creates default paragraph component', () => {
       const component = createDefaultComponent('paragraph', 'Test paragraph');
-      
+
       expect(component.type).toBe('paragraph');
       expect(component.props.content).toBe('Test paragraph');
       expect(component.props.textAlign).toBe('left');
@@ -56,7 +54,7 @@ describe('Data Migration Utilities', () => {
 
     it('creates default button component', () => {
       const component = createDefaultComponent('button', 'Click Me');
-      
+
       expect(component.type).toBe('button');
       expect(component.props.text).toBe('Click Me');
       expect(component.props.variant).toBe('primary');
@@ -66,7 +64,7 @@ describe('Data Migration Utilities', () => {
 
     it('creates default cards component', () => {
       const component = createDefaultComponent('cards');
-      
+
       expect(component.type).toBe('cards');
       expect(component.props.layout).toBe('grid');
       expect(component.props.items).toEqual([]);
@@ -74,7 +72,7 @@ describe('Data Migration Utilities', () => {
 
     it('uses fallback content when no content provided', () => {
       const component = createDefaultComponent('heading');
-      
+
       expect(component.props.content).toBe('New Heading');
     });
   });
@@ -145,18 +143,22 @@ describe('Data Migration Utilities', () => {
       const migrated = migrateLegacyToSections(legacy);
 
       expect(migrated.sections).toHaveLength(5); // title, mission, values, button, copyright
-      
+
       const titleSection = migrated.sections[0];
       expect(titleSection.layout).toBe('single-column');
       expect(titleSection.columns[0]).toHaveLength(2); // title + subtitle
-      
+
       expect(titleSection.columns[0][0].type).toBe('heading');
-      expect(titleSection.columns[0][0].props.content).toBe('About Our Company');
+      expect(titleSection.columns[0][0].props.content).toBe(
+        'About Our Company'
+      );
       expect(titleSection.columns[0][0].props.level).toBe(1);
       expect(titleSection.columns[0][0].props.textAlign).toBe('center');
-      
+
       expect(titleSection.columns[0][1].type).toBe('paragraph');
-      expect(titleSection.columns[0][1].props.content).toBe('Innovation and Excellence');
+      expect(titleSection.columns[0][1].props.content).toBe(
+        'Innovation and Excellence'
+      );
       expect(titleSection.columns[0][1].props.textAlign).toBe('center');
     });
 
@@ -166,12 +168,14 @@ describe('Data Migration Utilities', () => {
 
       const missionSection = migrated.sections[1];
       expect(missionSection.columns[0]).toHaveLength(2); // heading + paragraph
-      
+
       expect(missionSection.columns[0][0].type).toBe('heading');
       expect(missionSection.columns[0][0].props.content).toBe('Our Mission');
-      
+
       expect(missionSection.columns[0][1].type).toBe('paragraph');
-      expect(missionSection.columns[0][1].props.content).toBe('To provide excellent services to our customers.');
+      expect(missionSection.columns[0][1].props.content).toBe(
+        'To provide excellent services to our customers.'
+      );
     });
 
     it('migrates values section with cards correctly', () => {
@@ -180,10 +184,10 @@ describe('Data Migration Utilities', () => {
 
       const valuesSection = migrated.sections[2];
       expect(valuesSection.columns[0]).toHaveLength(2); // heading + cards
-      
+
       expect(valuesSection.columns[0][0].type).toBe('heading');
       expect(valuesSection.columns[0][0].props.content).toBe('Our Values');
-      
+
       expect(valuesSection.columns[0][1].type).toBe('cards');
       expect(valuesSection.columns[0][1].props.items).toEqual([
         { title: 'Quality', description: 'We deliver high-quality products' },
@@ -197,7 +201,7 @@ describe('Data Migration Utilities', () => {
 
       const buttonSection = migrated.sections[3];
       expect(buttonSection.columns[0]).toHaveLength(1);
-      
+
       const buttonComponent = buttonSection.columns[0][0];
       expect(buttonComponent.type).toBe('button');
       expect(buttonComponent.props.text).toBe('Get Started');
@@ -210,10 +214,12 @@ describe('Data Migration Utilities', () => {
 
       const copyrightSection = migrated.sections[4];
       expect(copyrightSection.columns[0]).toHaveLength(1);
-      
+
       const copyrightComponent = copyrightSection.columns[0][0];
       expect(copyrightComponent.type).toBe('paragraph');
-      expect(copyrightComponent.props.content).toContain(new Date().getFullYear().toString()); // Current year
+      expect(copyrightComponent.props.content).toContain(
+        new Date().getFullYear().toString()
+      ); // Current year
       expect(copyrightComponent.props.content).toContain('Company Name');
       expect(copyrightComponent.props.textAlign).toBe('center');
     });
@@ -229,10 +235,12 @@ describe('Data Migration Utilities', () => {
       };
 
       const migrated = migrateLegacyToSections(minimal);
-      
+
       // Should only create title section (other sections should be skipped for empty content)
       expect(migrated.sections).toHaveLength(1);
-      expect(migrated.sections[0].columns[0][0].props.content).toBe('Title Only');
+      expect(migrated.sections[0].columns[0][0].props.content).toBe(
+        'Title Only'
+      );
     });
 
     it('includes proper metadata', () => {
@@ -288,7 +296,7 @@ describe('Data Migration Utilities', () => {
     it('detects missing section ID', () => {
       const data = createValidData();
       delete (data.sections?.[0] as any).id;
-      
+
       const result = validateMigratedData(data);
 
       expect(result.isValid).toBe(false);
@@ -298,11 +306,13 @@ describe('Data Migration Utilities', () => {
     it('detects missing component properties', () => {
       const data = createValidData();
       delete (data.sections?.[0]?.columns[0][0] as any).props;
-      
+
       const result = validateMigratedData(data);
 
       expect(result.isValid).toBe(false);
-      expect(result.errors).toContain('Section 0, Column 0, Component 0 缺少props');
+      expect(result.errors).toContain(
+        'Section 0, Column 0, Component 0 缺少props'
+      );
     });
   });
 
@@ -316,11 +326,15 @@ describe('Data Migration Utilities', () => {
             columns: [[]],
           },
         ],
-        metadata: { version: '1.0.0', lastModified: '2024-01-01', author: 'test' },
+        metadata: {
+          version: '1.0.0',
+          lastModified: '2024-01-01',
+          author: 'test',
+        },
       };
 
       const result = migrateAboutTranslationData(dynamicData);
-      
+
       expect(result).toBe(dynamicData); // Should return same object
     });
 
@@ -335,10 +349,10 @@ describe('Data Migration Utilities', () => {
       } as any;
 
       const result = migrateAboutTranslationData(legacyData);
-      
+
       expect(result.sections).toBeDefined();
       expect(result.sections!.length).toBeGreaterThan(0);
       expect(result.metadata?.migrated).toBe(true);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
index 06eec1c9..4d100ed8 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.497Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
index df6caf50..3e5f5192 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.489Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
index db523006..d299da6f 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.507Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
index ddd9954c..fbdc43b9 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.498Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
index de046438..3b1cba6c 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.502Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
index 367fc3c0..d69bed6a 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.495Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
index dd58cbe7..6717a12a 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.503Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
index 80711e01..20b6f51a 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.500Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
index a7f352b9..87f19b49 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.491Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json
index aad8ff1e..4ab0aad5 100644
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json
+++ b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json
@@ -39,4 +39,4 @@
   },
   "timestamp": "2025-08-08T12:23:05.493Z",
   "version": "1.0.0"
-}
\ No newline at end of file
+}
diff --git a/components/about/dynamic-about-renderer.tsx b/components/about/dynamic-about-renderer.tsx
index fc4f6db8..1e694ae8 100644
--- a/components/about/dynamic-about-renderer.tsx
+++ b/components/about/dynamic-about-renderer.tsx
@@ -15,7 +15,7 @@ import {
 import { cn } from '@lib/utils';
 import { motion } from 'framer-motion';
 
-import React, { lazy, memo, useMemo, Suspense } from 'react';
+import React, { Suspense, lazy, memo, useMemo } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -133,7 +133,11 @@ export function DynamicAboutRenderer({
   /**
    * Render individual component based on type
    */
-  const renderComponentInternal = (component: ComponentInstance, index: number, colors: any) => {
+  const renderComponentInternal = (
+    component: ComponentInstance,
+    index: number,
+    colors: any
+  ) => {
     const { type, props } = component;
 
     const baseAnimation = {
@@ -349,13 +353,13 @@ export function DynamicAboutRenderer({
         >
           {section.columns.map((column, columnIndex) => (
             <div key={columnIndex} className="space-y-4">
-              {column.map((component, componentIndex) =>
+              {column.map((component, componentIndex) => (
                 <ComponentLoader
                   key={component.id}
                   component={component}
                   index={sectionIndex + componentIndex}
                 />
-              )}
+              ))}
             </div>
           ))}
         </div>
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 4b330326..a1304afb 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -35,7 +35,7 @@ import ComponentPalette from './component-palette';
 import ComponentRenderer from './component-renderer';
 import { ContextMenu } from './context-menu';
 import { Droppable, Sortable, SortableContainer } from './dnd-components';
-import { DndContextWrapper } from './dnd-context';
+import { DndContextWrapper, useDragState } from './dnd-context';
 
 interface AboutEditorProps {
   translations: Record<SupportedLocale, AboutTranslationData>;
@@ -47,7 +47,7 @@ interface AboutEditorProps {
   onLocaleChange: (newLocale: SupportedLocale) => void;
 }
 
-// Section Drop Zone Component for visual feedback - simplified approach
+// Section Drop Zone Component using @dnd-kit drag state
 function SectionDropZone({
   sectionId,
   children,
@@ -57,50 +57,21 @@ function SectionDropZone({
   children: React.ReactNode;
   className?: string;
 }) {
-  const [isHighlighted, setIsHighlighted] = React.useState(false);
-  const sectionRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    const handleDragOver = (e: DragEvent) => {
-      // Only handle palette item drags
-      if (!document.body.classList.contains('palette-dragging')) {
-        setIsHighlighted(false);
-        return;
-      }
-
-      if (sectionRef.current) {
-        const rect = sectionRef.current.getBoundingClientRect();
-        const isInside =
-          e.clientX >= rect.left &&
-          e.clientX <= rect.right &&
-          e.clientY >= rect.top &&
-          e.clientY <= rect.bottom;
-
-        setIsHighlighted(isInside);
-      }
-    };
-
-    const handleDragEnd = () => {
-      setIsHighlighted(false);
-    };
-
-    document.addEventListener('dragover', handleDragOver);
-    document.addEventListener('dragend', handleDragEnd);
+  // Use the drag state from DndContext to determine if this section should be highlighted
+  const dragState = useDragState();
 
-    return () => {
-      document.removeEventListener('dragover', handleDragOver);
-      document.removeEventListener('dragend', handleDragEnd);
-    };
-  }, []);
+  const isHighlighted = React.useMemo(() => {
+    if (!dragState?.isPaletteItem) return false;
+    return dragState.hoveredSectionId === sectionId;
+  }, [dragState, sectionId]);
 
   return (
     <div
-      ref={sectionRef}
       data-section-id={sectionId}
       className={cn(
         className,
         isHighlighted &&
-          'ring-opacity-75 bg-blue-50/30 ring-2 ring-blue-400 dark:bg-blue-900/30 dark:ring-blue-300'
+          'ring-opacity-75 bg-blue-50/30 ring-2 ring-blue-400 transition-all duration-200 dark:bg-blue-900/30 dark:ring-blue-300'
       )}
     >
       {children}
@@ -137,6 +108,7 @@ export function AboutEditor({
     deleteComponent,
     handleDragEnd,
     addSection,
+    deleteSection,
     undo,
     redo,
     setCurrentLanguage,
@@ -451,7 +423,7 @@ export function AboutEditor({
                         </h3>
                         <button
                           onClick={() => {
-                            // Delete section logic here
+                            deleteSection(section.id);
                           }}
                           className={cn(
                             'h-6 w-6 rounded p-0 text-red-500 transition-colors',
@@ -515,7 +487,10 @@ export function AboutEditor({
                                   }
                                   className="animate-component-target"
                                 >
-                                  <ComponentRenderer component={component} />
+                                  <ComponentRenderer
+                                    component={component}
+                                    sectionCommonProps={section.commonProps}
+                                  />
                                 </div>
                               </Sortable>
                             ))}
diff --git a/components/admin/content/about-preview.tsx b/components/admin/content/about-preview.tsx
index 0b2da112..64708e8c 100644
--- a/components/admin/content/about-preview.tsx
+++ b/components/admin/content/about-preview.tsx
@@ -124,7 +124,10 @@ export function AboutPreview({
                 <div key={columnIndex} className="space-y-4">
                   {column.map(component => (
                     <div key={component.id}>
-                      <ComponentRenderer component={component} />
+                      <ComponentRenderer
+                        component={component}
+                        sectionCommonProps={section.commonProps}
+                      />
                     </div>
                   ))}
                 </div>
diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index d8bc14b3..98a19782 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -9,6 +9,8 @@ import {
   HeadingProps,
   ImageProps,
   ParagraphProps,
+  SectionCommonProps,
+  getResolvedComponentProps,
 } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
 
@@ -219,11 +221,13 @@ const componentMap: Record<string, React.FC<any>> = {
 interface ComponentRendererProps {
   component: ComponentInstance;
   className?: string;
+  sectionCommonProps?: SectionCommonProps;
 }
 
 const ComponentRenderer: React.FC<ComponentRendererProps> = ({
   component,
   className,
+  sectionCommonProps,
 }) => {
   const Component = componentMap[component.type];
 
@@ -244,9 +248,15 @@ const ComponentRenderer: React.FC<ComponentRendererProps> = ({
     );
   }
 
+  // 获取合并后的最终属性 (包含属性继承逻辑)
+  const resolvedProps = getResolvedComponentProps(
+    component,
+    sectionCommonProps
+  );
+
   return (
     <div className={className}>
-      <Component {...component.props} />
+      <Component {...resolvedProps} />
     </div>
   );
 };
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index 24429bed..3b562473 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -147,6 +147,7 @@ export function Sortable({
   return (
     <div
       ref={setNodeRef}
+      data-sortable
       style={style}
       className={cn(
         className,
@@ -194,6 +195,7 @@ export function SortableContainer({
     <SortableContext items={items} strategy={strategy}>
       <div
         ref={setNodeRef}
+        data-sortable
         className={cn(
           className,
           isOver &&
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index 165e63c6..278fcd46 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -25,6 +25,14 @@ interface DragState {
   isPaletteItem: boolean;
   isValidDrop: boolean;
   originalRect?: DOMRect;
+  hoveredSectionId?: string;
+}
+
+// Export the drag state context to share with other components
+export const DragStateContext = React.createContext<DragState | null>(null);
+
+export function useDragState() {
+  return React.useContext(DragStateContext);
 }
 
 /**
@@ -89,9 +97,26 @@ export function DndContextWrapper({
           String(over.id).includes('drop') ||
           over.data.current?.type === 'container');
 
+      // Extract section ID from the over.id (e.g., "section-abc123-0" -> "abc123")
+      let hoveredSectionId: string | undefined;
+      if (prev.isPaletteItem) {
+        if (over) {
+          const overId = String(over.id);
+          if (overId.startsWith('section-')) {
+            // Extract section ID from patterns like "section-abc123-0" or "section-drop-abc123"
+            const match = overId.match(/section-(?:drop-)?([^-]+)/);
+            if (match) {
+              hoveredSectionId = match[1];
+            }
+          }
+        }
+        // If not over any section, clear the hoveredSectionId
+      }
+
       return {
         ...prev,
         isValidDrop: Boolean(isValidDrop),
+        hoveredSectionId,
       };
     });
   }, []);
@@ -147,36 +172,38 @@ export function DndContextWrapper({
   );
 
   return (
-    <DndContext
-      sensors={sensors}
-      onDragStart={handleDragStart}
-      onDragOver={handleDragOver}
-      onDragEnd={handleDragEnd}
-    >
-      {children}
-      {typeof document !== 'undefined' &&
-        createPortal(
-          <DragOverlay dropAnimation={null}>
-            {dragState ? (
-              <div
-                ref={dragOverlayRef}
-                className={`rounded-lg border p-2 shadow-xl transition-all duration-200 ${
-                  dragState.isValidDrop
-                    ? 'scale-105 border-emerald-200 bg-emerald-50 shadow-emerald-200/50 dark:border-emerald-700 dark:bg-emerald-900/20'
-                    : dragState.isPaletteItem
-                      ? 'border-stone-200 bg-white shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-800'
-                      : 'border-stone-200 bg-white shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-800'
-                } ${isAnimatingReturn ? 'pointer-events-none' : ''} `}
-                style={{
-                  transform: isAnimatingReturn ? undefined : 'rotate(5deg)',
-                }}
-              >
-                {dragState.content}
-              </div>
-            ) : null}
-          </DragOverlay>,
-          document.body
-        )}
-    </DndContext>
+    <DragStateContext.Provider value={dragState}>
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+      >
+        {children}
+        {typeof document !== 'undefined' &&
+          createPortal(
+            <DragOverlay dropAnimation={null}>
+              {dragState ? (
+                <div
+                  ref={dragOverlayRef}
+                  className={`rounded-lg border p-2 shadow-xl transition-all duration-200 ${
+                    dragState.isValidDrop
+                      ? 'scale-105 border-emerald-200 bg-emerald-50 shadow-emerald-200/50 dark:border-emerald-700 dark:bg-emerald-900/20'
+                      : dragState.isPaletteItem
+                        ? 'border-stone-200 bg-white shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-800'
+                        : 'border-stone-200 bg-white shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-800'
+                  } ${isAnimatingReturn ? 'pointer-events-none' : ''} `}
+                  style={{
+                    transform: isAnimatingReturn ? undefined : 'rotate(5deg)',
+                  }}
+                >
+                  {dragState.content}
+                </div>
+              ) : null}
+            </DragOverlay>,
+            document.body
+          )}
+      </DndContext>
+    </DragStateContext.Provider>
   );
 }
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index f2220045..d9dffab0 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -387,75 +387,119 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       const activeContainer = active.data.current?.sortable?.containerId;
       const overContainer = over.data.current?.sortable?.containerId || overId;
 
-      if (activeContainer && overContainer) {
-        if (activeContainer === overContainer) {
-          // Reordering within the same container
-          const [containerType, sectionId, columnIndex] =
-            activeContainer.split('-');
-
-          if (
-            containerType === 'section' &&
-            sectionId &&
-            columnIndex !== undefined
-          ) {
-            const section = newPageContent.sections.find(
-              s => s.id === sectionId
+      console.log('Container IDs:', {
+        activeContainer,
+        overContainer,
+        overId,
+        activeData: active.data.current,
+        overData: over.data.current,
+      });
+
+      // 检查是否是同一个容器内的排序
+      // 如果activeContainer和overContainer相同，说明在同一个SortableContext内
+      if (
+        activeContainer &&
+        overContainer &&
+        activeContainer === overContainer
+      ) {
+        // 通过组件ID找到它们所在的section和column
+        let activeSectionId = '';
+        let activeColumnIndex = -1;
+        let overSectionId = '';
+        let overColumnIndex = -1;
+
+        // 查找activeId所在的位置
+        for (const section of newPageContent.sections) {
+          for (let colIdx = 0; colIdx < section.columns.length; colIdx++) {
+            const activeIdx = section.columns[colIdx].findIndex(
+              comp => comp.id === activeId
             );
-            if (section && section.columns[parseInt(columnIndex)]) {
-              const column = section.columns[parseInt(columnIndex)];
-              const activeIndex = column.findIndex(
-                comp => comp.id === activeId
+            if (activeIdx !== -1) {
+              activeSectionId = section.id;
+              activeColumnIndex = colIdx;
+            }
+
+            const overIdx = section.columns[colIdx].findIndex(
+              comp => comp.id === overId
+            );
+            if (overIdx !== -1) {
+              overSectionId = section.id;
+              overColumnIndex = colIdx;
+            }
+          }
+        }
+
+        // 确保两个组件在同一个section的同一列中
+        if (
+          activeSectionId === overSectionId &&
+          activeColumnIndex === overColumnIndex &&
+          activeSectionId !== '' &&
+          activeColumnIndex !== -1
+        ) {
+          const section = newPageContent.sections.find(
+            s => s.id === activeSectionId
+          );
+          if (section && section.columns[activeColumnIndex]) {
+            const column = section.columns[activeColumnIndex];
+            const activeIndex = column.findIndex(comp => comp.id === activeId);
+            const overIndex = column.findIndex(comp => comp.id === overId);
+
+            if (
+              activeIndex !== -1 &&
+              overIndex !== -1 &&
+              activeIndex !== overIndex
+            ) {
+              console.log('Reordering components within same container:', {
+                sectionId: activeSectionId,
+                columnIndex: activeColumnIndex,
+                activeIndex,
+                overIndex,
+                activeId,
+                overId,
+              });
+
+              section.columns[activeColumnIndex] = arrayMove(
+                column,
+                activeIndex,
+                overIndex
               );
-              const overIndex = column.findIndex(comp => comp.id === overId);
-
-              if (
-                activeIndex !== -1 &&
-                overIndex !== -1 &&
-                activeIndex !== overIndex
-              ) {
-                // Use arrayMove to reorder within the same container
-                section.columns[parseInt(columnIndex)] = arrayMove(
-                  column,
-                  activeIndex,
-                  overIndex
-                );
-              }
+              console.log('Components reordered successfully');
             }
           }
-        } else {
-          // Moving between containers
-          const [sourceType, sourceSectionId, sourceColumnIndex] =
-            activeContainer.split('-');
-          const [destType, destSectionId, destColumnIndex] =
-            overContainer.split('-');
-
-          if (sourceType === 'section' && destType === 'section') {
-            const sourceSection = newPageContent.sections.find(
-              s => s.id === sourceSectionId
-            );
-            const destSection = newPageContent.sections.find(
-              s => s.id === destSectionId
-            );
+        }
+      } else if (activeContainer && overContainer) {
+        // Moving between containers
+        const [sourceType, sourceSectionId, sourceColumnIndex] =
+          activeContainer.split('-');
+        const [destType, destSectionId, destColumnIndex] =
+          overContainer.split('-');
+
+        if (sourceType === 'section' && destType === 'section') {
+          const sourceSection = newPageContent.sections.find(
+            s => s.id === sourceSectionId
+          );
+          const destSection = newPageContent.sections.find(
+            s => s.id === destSectionId
+          );
 
-            if (sourceSection && destSection) {
-              const sourceColumn =
-                sourceSection.columns[parseInt(sourceColumnIndex)];
-              const destColumn = destSection.columns[parseInt(destColumnIndex)];
-
-              if (sourceColumn && destColumn) {
-                // Find and move the component
-                const componentIndex = sourceColumn.findIndex(
-                  comp => comp.id === activeId
-                );
-                if (componentIndex !== -1) {
-                  const [removed] = sourceColumn.splice(componentIndex, 1);
-                  // Insert at the position of the over item, or at the end
-                  const overIndex = over.data.current?.sortable?.index;
-                  if (typeof overIndex === 'number') {
-                    destColumn.splice(overIndex, 0, removed);
-                  } else {
-                    destColumn.push(removed);
-                  }
+          if (sourceSection && destSection) {
+            const sourceColumn =
+              sourceSection.columns[parseInt(sourceColumnIndex)];
+            const destColumn = destSection.columns[parseInt(destColumnIndex)];
+
+            if (sourceColumn && destColumn) {
+              // Find and move the component
+              const componentIndex = sourceColumn.findIndex(
+                comp => comp.id === activeId
+              );
+              if (componentIndex !== -1) {
+                const [removed] = sourceColumn.splice(componentIndex, 1);
+                // Insert at the position of the over item, or at the end
+                const overIndex = over.data.current?.sortable?.index;
+                if (typeof overIndex === 'number') {
+                  destColumn.splice(overIndex, 0, removed);
+                } else {
+                  destColumn.push(removed);
                 }
               }
             }
diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
index ffc9f83a..aa5369b4 100644
--- a/lib/types/about-page-components.ts
+++ b/lib/types/about-page-components.ts
@@ -27,6 +27,32 @@ export interface ComponentInstance {
   id: string;
   type: ComponentType;
   props: Record<string, unknown>;
+  // 是否继承section的共享属性 (默认true)
+  inheritFromSection?: boolean;
+  // 要覆盖的section属性键名列表
+  overrideProps?: string[];
+}
+
+// Section共享属性接口
+export interface SectionCommonProps {
+  // 样式主题
+  theme?: 'light' | 'dark' | 'auto';
+  // 间距设置
+  spacing?: 'compact' | 'normal' | 'spacious';
+  // 文本对齐
+  textAlign?: 'left' | 'center' | 'right';
+  // 动画效果
+  animation?: 'fade' | 'slide' | 'none';
+  // 是否可交互
+  interactive?: boolean;
+  // 拖拽行为
+  dragBehavior?: 'inherit' | 'custom';
+  // 背景样式
+  backgroundColor?: string;
+  // 边框样式
+  borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
+  // 自定义属性扩展
+  [key: string]: unknown;
 }
 
 // 页面段落接口
@@ -35,6 +61,8 @@ export interface PageSection {
   layout: LayoutType;
   columns: ComponentInstance[][];
   shouldDelete?: boolean;
+  // 新增：section级别的共享属性
+  commonProps?: SectionCommonProps;
 }
 
 // 页面内容接口
@@ -225,3 +253,57 @@ export {
   validateMigratedData,
   createBackupData,
 } from '@lib/utils/data-migration';
+
+// === 属性继承工具函数 ===
+
+/**
+ * 合并section公共属性和组件特有属性
+ *
+ * @param sectionCommonProps - Section级别的公共属性
+ * @param componentProps - 组件特有属性
+ * @param overrideProps - 要覆盖的公共属性键名列表
+ * @returns 合并后的最终属性对象
+ */
+export function mergeComponentProps(
+  sectionCommonProps: SectionCommonProps = {},
+  componentProps: Record<string, unknown> = {},
+  overrideProps: string[] = []
+): Record<string, unknown> {
+  // 创建section属性副本
+  const inherited = { ...sectionCommonProps };
+
+  // 移除被覆盖的属性
+  overrideProps.forEach(key => {
+    delete inherited[key];
+  });
+
+  // 组件特有属性优先级更高
+  return {
+    ...inherited,
+    ...componentProps,
+  };
+}
+
+/**
+ * 获取组件的最终属性 (包含继承逻辑)
+ *
+ * @param component - 组件实例
+ * @param sectionCommonProps - Section的公共属性
+ * @returns 解析后的最终属性对象
+ */
+export function getResolvedComponentProps(
+  component: ComponentInstance,
+  sectionCommonProps?: SectionCommonProps
+): Record<string, unknown> {
+  // 如果不继承或没有section公共属性，直接返回组件props
+  if (component.inheritFromSection === false || !sectionCommonProps) {
+    return component.props;
+  }
+
+  // 合并属性 (默认继承)
+  return mergeComponentProps(
+    sectionCommonProps,
+    component.props,
+    component.overrideProps || []
+  );
+}
diff --git a/lib/utils/data-migration.ts b/lib/utils/data-migration.ts
index c91c6695..0d6e049f 100644
--- a/lib/utils/data-migration.ts
+++ b/lib/utils/data-migration.ts
@@ -81,6 +81,9 @@ export function createDefaultComponent(
     id,
     type,
     props: defaultProps[type] || {},
+    // 默认继承section属性
+    inheritFromSection: true,
+    overrideProps: [],
   };
 }
 
@@ -98,6 +101,15 @@ export function createDefaultSection(
     columns: Array(columnCount)
       .fill([])
       .map(() => []),
+    // 默认的section公共属性
+    commonProps: {
+      theme: 'auto',
+      spacing: 'normal',
+      textAlign: 'left',
+      animation: 'none',
+      interactive: true,
+      dragBehavior: 'inherit',
+    },
   };
 }
 
diff --git a/lib/utils/performance.ts b/lib/utils/performance.ts
index b6176785..f18d7940 100644
--- a/lib/utils/performance.ts
+++ b/lib/utils/performance.ts
@@ -1,10 +1,9 @@
 /**
  * Performance optimization utilities
- * 
+ *
  * Provides debouncing, throttling, and lazy loading utilities
  * for better performance in dynamic component editing.
  */
-
 import React from 'react';
 
 /**
@@ -20,7 +19,7 @@ export function debounce<T extends (...args: any[]) => any>(
     if (timeoutId) {
       clearTimeout(timeoutId);
     }
-    
+
     timeoutId = setTimeout(() => {
       func(...args);
       timeoutId = null;
@@ -40,16 +39,19 @@ export function throttle<T extends (...args: any[]) => any>(
 
   return (...args: Parameters<T>) => {
     const now = Date.now();
-    
+
     if (now - lastCall >= delay) {
       lastCall = now;
       func(...args);
     } else if (!timeoutId) {
-      timeoutId = setTimeout(() => {
-        lastCall = Date.now();
-        func(...args);
-        timeoutId = null;
-      }, delay - (now - lastCall));
+      timeoutId = setTimeout(
+        () => {
+          lastCall = Date.now();
+          func(...args);
+          timeoutId = null;
+        },
+        delay - (now - lastCall)
+      );
     }
   };
 }
@@ -121,13 +123,13 @@ export function calculateVirtualScroll(
   options: VirtualScrollOptions
 ): VirtualScrollResult {
   const { itemHeight, containerHeight, overscan = 2 } = options;
-  
+
   const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
   const endIndex = Math.min(
     itemCount - 1,
     Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
   );
-  
+
   return {
     startIndex,
     endIndex,
@@ -153,7 +155,7 @@ export function useIntersectionObserver(
     const observer = new IntersectionObserver(([entry]) => {
       const isElementIntersecting = entry.isIntersecting;
       setIsIntersecting(isElementIntersecting);
-      
+
       if (isElementIntersecting && !hasIntersected) {
         setHasIntersected(true);
       }
@@ -172,35 +174,37 @@ export function useIntersectionObserver(
  */
 export class PerformanceMonitor {
   private static measurements = new Map<string, number>();
-  
+
   static startMeasurement(name: string): void {
     this.measurements.set(name, performance.now());
   }
-  
+
   static endMeasurement(name: string): number | null {
     const startTime = this.measurements.get(name);
     if (!startTime) return null;
-    
+
     const endTime = performance.now();
     const duration = endTime - startTime;
-    
+
     this.measurements.delete(name);
-    
+
     // Log slow operations in development
     if (process.env.NODE_ENV === 'development' && duration > 16) {
-      console.warn(`Slow operation detected: ${name} took ${duration.toFixed(2)}ms`);
+      console.warn(
+        `Slow operation detected: ${name} took ${duration.toFixed(2)}ms`
+      );
     }
-    
+
     return duration;
   }
-  
+
   static measureAsync<T>(name: string, fn: () => Promise<T>): Promise<T> {
     this.startMeasurement(name);
     return fn().finally(() => {
       this.endMeasurement(name);
     });
   }
-  
+
   static measure<T>(name: string, fn: () => T): T {
     this.startMeasurement(name);
     try {
@@ -267,4 +271,4 @@ function deepEqual(a: any, b: any): boolean {
   }
 
   return true;
-}
\ No newline at end of file
+}
diff --git a/messages/de-DE.json b/messages/de-DE.json
index 596d8255..4bac237e 100644
--- a/messages/de-DE.json
+++ b/messages/de-DE.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/en-US.json b/messages/en-US.json
index 524ca975..80b7d84f 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/es-ES.json b/messages/es-ES.json
index 082ee46d..58dead30 100644
--- a/messages/es-ES.json
+++ b/messages/es-ES.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/fr-FR.json b/messages/fr-FR.json
index 36cf77e0..b15b21f3 100644
--- a/messages/fr-FR.json
+++ b/messages/fr-FR.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/it-IT.json b/messages/it-IT.json
index 4bbdd859..39eabac8 100644
--- a/messages/it-IT.json
+++ b/messages/it-IT.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/ja-JP.json b/messages/ja-JP.json
index 178a04da..9d3ea7c3 100644
--- a/messages/ja-JP.json
+++ b/messages/ja-JP.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/pt-PT.json b/messages/pt-PT.json
index 1acfa0e4..3132e8d8 100644
--- a/messages/pt-PT.json
+++ b/messages/pt-PT.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/ru-RU.json b/messages/ru-RU.json
index 49d557d7..5d2e4bea 100644
--- a/messages/ru-RU.json
+++ b/messages/ru-RU.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index 05114a7e..9fc5738c 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/zh-TW.json b/messages/zh-TW.json
index 3b2963e6..7ef58b95 100644
--- a/messages/zh-TW.json
+++ b/messages/zh-TW.json
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

From adedd4f64a16b9d2b372537000cd6cac107d9fe7 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 09:34:09 +0800
Subject: [PATCH 15/66] Revert "feat(admin): enhance drag and drop with
 component cloning and animations"

This reverts commit 73680f9131cace1f24ea739d9d26b7e477cee059.
---
 app/globals.css                               |  59 --------
 components/admin/content/about-editor.tsx     |   4 +-
 .../admin/content/component-palette.tsx       |   4 +-
 components/admin/content/dnd-context.tsx      | 133 +++---------------
 lib/stores/about-editor-store.ts              |  50 +------
 5 files changed, 23 insertions(+), 227 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 0b86dde3..0c56f49d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -755,62 +755,3 @@ body.default-page {
 .dark .loop-node:hover::after {
   background: #78716c; /* stone-500 */
 }
-
-/* Component drag and drop animations for admin content editor */
-@keyframes componentAppear {
-  0% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
-  }
-  50% {
-    opacity: 0.8;
-    transform: translateY(-4px) scale(1.02);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes componentPulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
-  }
-  50% {
-    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
-  }
-}
-
-/* Component appear animation */
-.animate-component-appear {
-  animation:
-    componentAppear 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards,
-    componentPulse 600ms ease-in-out 400ms;
-}
-
-/* Component target container for animation */
-.animate-component-target {
-  transition: all 200ms ease-out;
-}
-
-/* Enhanced drop zone styling for better visual feedback */
-.drop-zone-active {
-  background: linear-gradient(
-    135deg,
-    rgba(34, 197, 94, 0.1),
-    rgba(16, 185, 129, 0.15)
-  );
-  border: 2px dashed rgba(34, 197, 94, 0.6);
-  box-shadow: inset 0 2px 8px rgba(34, 197, 94, 0.1);
-}
-
-.dark .drop-zone-active {
-  background: linear-gradient(
-    135deg,
-    rgba(34, 197, 94, 0.15),
-    rgba(16, 185, 129, 0.2)
-  );
-  border: 2px dashed rgba(34, 197, 94, 0.7);
-  box-shadow: inset 0 2px 8px rgba(34, 197, 94, 0.15);
-}
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 18f3bfe6..ce2a6836 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -437,21 +437,19 @@ export function AboutEditor({
                                 key={component.id}
                                 id={component.id}
                                 className={cn(
-                                  'mb-3 cursor-pointer rounded-lg border p-3 transition-all duration-300',
+                                  'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
                                   selectedComponentId === component.id
                                     ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
                                     : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
                                 )}
                               >
                                 <div
-                                  data-component-id={component.id}
                                   onClick={() =>
                                     handleComponentClick(component.id)
                                   }
                                   onContextMenu={e =>
                                     handleContextMenu(e, component.id)
                                   }
-                                  className="animate-component-target"
                                 >
                                   <ComponentRenderer component={component} />
                                 </div>
diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
index dc24f320..2e237315 100644
--- a/components/admin/content/component-palette.tsx
+++ b/components/admin/content/component-palette.tsx
@@ -228,9 +228,7 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
                         id={`palette-${comp.type}`}
                         preview={componentPreview}
                       >
-                        <div data-dnd-id={`palette-${comp.type}`}>
-                          {componentPreview}
-                        </div>
+                        {componentPreview}
                       </Draggable>
                     );
                   })}
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index c63223fa..f975eada 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -3,7 +3,6 @@
 import {
   DndContext,
   DragEndEvent,
-  DragOverEvent,
   DragOverlay,
   DragStartEvent,
   PointerSensor,
@@ -12,33 +11,27 @@ import {
 } from '@dnd-kit/core';
 import { createPortal } from 'react-dom';
 
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 interface DndContextWrapperProps {
   children: React.ReactNode;
   onDragEnd: (event: DragEndEvent) => void;
 }
 
-interface DragState {
-  id: string;
-  content: React.ReactNode;
-  isPaletteItem: boolean;
-  isValidDrop: boolean;
-  originalRect?: DOMRect;
-}
-
 /**
  * DndKit Context Wrapper
  *
- * Enhanced drag and drop with component cloning, drop validation, and animations
+ * Provides drag and drop context using @dnd-kit/core
+ * Replaces react-beautiful-dnd's DragDropContext
  */
 export function DndContextWrapper({
   children,
   onDragEnd,
 }: DndContextWrapperProps) {
-  const [dragState, setDragState] = useState<DragState | null>(null);
-  const [isAnimatingReturn, setIsAnimatingReturn] = useState(false);
-  const dragOverlayRef = useRef<HTMLDivElement>(null);
+  const [activeItem, setActiveItem] = useState<{
+    id: string;
+    content: React.ReactNode;
+  } | null>(null);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -48,122 +41,32 @@ export function DndContextWrapper({
     })
   );
 
-  const handleDragStart = useCallback((event: DragStartEvent) => {
+  const handleDragStart = (event: DragStartEvent) => {
     const { active } = event;
-    const isPaletteItem = String(active.id).startsWith('palette-');
-
-    // Get original element position for return animation
-    let originalRect: DOMRect | undefined;
-    if (isPaletteItem) {
-      const element =
-        document.querySelector(
-          `[data-rbd-drag-handle-draggable-id="${active.id}"]`
-        ) || document.querySelector(`[data-dnd-id="${active.id}"]`);
-      if (element) {
-        originalRect = element.getBoundingClientRect();
-      }
-    }
-
-    setDragState({
+    setActiveItem({
       id: String(active.id),
       content: active.data.current?.preview || String(active.id),
-      isPaletteItem,
-      isValidDrop: false,
-      originalRect,
-    });
-  }, []);
-
-  const handleDragOver = useCallback((event: DragOverEvent) => {
-    const { over } = event;
-
-    setDragState(prev => {
-      if (!prev) return prev;
-
-      // Check if current position is a valid drop zone
-      const isValidDrop =
-        over &&
-        (String(over.id).startsWith('section-') ||
-          String(over.id).includes('drop'));
-
-      return {
-        ...prev,
-        isValidDrop: Boolean(isValidDrop),
-      };
     });
-  }, []);
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      const isPaletteItem = String(active.id).startsWith('palette-');
-      const isValidDrop =
-        over &&
-        (String(over.id).startsWith('section-') ||
-          String(over.id).includes('drop'));
-
-      if (isPaletteItem && !isValidDrop && dragState?.originalRect) {
-        // Animate return to original position
-        setIsAnimatingReturn(true);
+  };
 
-        // Start return animation
-        const overlay = dragOverlayRef.current;
-        if (overlay) {
-          const currentRect = overlay.getBoundingClientRect();
-          const deltaX = dragState.originalRect.left - currentRect.left;
-          const deltaY = dragState.originalRect.top - currentRect.top;
-
-          overlay.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;
-          overlay.style.transition =
-            'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)';
-
-          // Clean up after animation
-          setTimeout(() => {
-            setDragState(null);
-            setIsAnimatingReturn(false);
-          }, 300);
-        } else {
-          // Fallback if no overlay ref
-          setTimeout(() => {
-            setDragState(null);
-            setIsAnimatingReturn(false);
-          }, 100);
-        }
-      } else {
-        // Normal drag end handling
-        setDragState(null);
-        setIsAnimatingReturn(false);
-        onDragEnd(event);
-      }
-    },
-    [dragState, onDragEnd]
-  );
+  const handleDragEnd = (event: DragEndEvent) => {
+    setActiveItem(null);
+    onDragEnd(event);
+  };
 
   return (
     <DndContext
       sensors={sensors}
       onDragStart={handleDragStart}
-      onDragOver={handleDragOver}
       onDragEnd={handleDragEnd}
     >
       {children}
       {typeof document !== 'undefined' &&
         createPortal(
-          <DragOverlay dropAnimation={null}>
-            {dragState ? (
-              <div
-                ref={dragOverlayRef}
-                className={`rounded-lg border p-2 shadow-xl transition-all duration-200 ${
-                  dragState.isValidDrop
-                    ? 'scale-105 border-emerald-200 bg-emerald-50 shadow-emerald-200/50 dark:border-emerald-700 dark:bg-emerald-900/20'
-                    : dragState.isPaletteItem
-                      ? 'border-stone-200 bg-white shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-800'
-                      : 'border-stone-200 bg-white shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-800'
-                } ${isAnimatingReturn ? 'pointer-events-none' : ''} `}
-                style={{
-                  transform: isAnimatingReturn ? undefined : 'rotate(5deg)',
-                }}
-              >
-                {dragState.content}
+          <DragOverlay>
+            {activeItem ? (
+              <div className="rounded-lg border bg-white p-2 shadow-lg dark:bg-gray-800">
+                {activeItem.content}
               </div>
             ) : null}
           </DragOverlay>,
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index 030fbf73..dcca6648 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -201,7 +201,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     }
   },
 
-  // Handle drag and drop with enhanced animations and validation
+  // Handle drag and drop (optimized with performance considerations)
   handleDragEnd: (event: DragEndEvent) => {
     const { active, over } = event;
 
@@ -241,22 +241,11 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       let targetContainerId = overId;
       let insertIndex = -1; // -1 means append to end
 
-      // Validate drop zone - only allow drops on valid targets
-      const isValidDropZone =
-        overId.startsWith('section-drop-') ||
-        overId.startsWith('section-') ||
-        over.data.current?.type === 'container';
-
-      if (!isValidDropZone) {
-        console.log('Invalid drop zone:', overId);
-        return;
-      }
-
       // Handle dropping on section drop zones (creates new section)
       if (overId.startsWith('section-drop-')) {
         console.log('Dropping on section drop zone:', overId);
 
-        // Create a new section with animation-ready component
+        // Create a new section
         const newSection = createDefaultSection('single-column');
         const newComponent: ComponentInstance = {
           id: generateUniqueId('comp'),
@@ -279,25 +268,13 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
 
         console.log('New section created with component:', newComponent.id);
 
-        // Save changes with animation trigger
+        // Save changes and exit early
         set(state => ({
           pageContent: newPageContent,
           undoStack: [...state.undoStack, state.pageContent!].slice(-20),
           redoStack: [],
           isDirty: true,
-          selectedComponentId: newComponent.id, // Highlight the new component
         }));
-
-        // Trigger component appear animation
-        setTimeout(() => {
-          const element = document.querySelector(
-            `[data-component-id="${newComponent.id}"]`
-          );
-          if (element) {
-            element.classList.add('animate-component-appear');
-          }
-        }, 50);
-
         return;
       }
 
@@ -354,27 +331,6 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
           }
 
           console.log('Component added successfully:', newComponent.id);
-
-          // Set the new component as selected and trigger appear animation
-          set(state => ({
-            pageContent: newPageContent,
-            undoStack: [...state.undoStack, state.pageContent!].slice(-20),
-            redoStack: [],
-            isDirty: true,
-            selectedComponentId: newComponent.id,
-          }));
-
-          // Trigger component appear animation
-          setTimeout(() => {
-            const element = document.querySelector(
-              `[data-component-id="${newComponent.id}"]`
-            );
-            if (element) {
-              element.classList.add('animate-component-appear');
-            }
-          }, 50);
-
-          return;
         }
       }
     } else {

From 42c4230f2279987d5a91cd8ba3eab2d150fe62dd Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 10:57:53 +0800
Subject: [PATCH 16/66] fix(admin): resolve section delete button and component
 reordering issues

- Fix section delete button functionality by connecting deleteSection action
- Resolve drag-and-drop conflicts between palette and existing components
- Fix component reordering state persistence using position-based detection
- Add comprehensive DnD event logging for debugging
- Implement conditional rendering to prevent palette/component event conflicts

Technical changes:
- Add isDraggingFromPalette state management in DndContext
- Render Sortable components as plain divs during palette dragging (hooks compliance)
- Replace container ID parsing with direct component position detection
- Add deleteSection import and implementation in about-editor
---
 components/admin/content/about-editor.tsx   |  3 +-
 components/admin/content/dnd-components.tsx | 62 ++++++++++++++++-
 components/admin/content/dnd-context.tsx    | 77 +++++++++++++++------
 lib/stores/about-editor-store.ts            | 73 ++++++++++++++++---
 4 files changed, 180 insertions(+), 35 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index ce2a6836..0631c57a 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -74,6 +74,7 @@ export function AboutEditor({
     setSelectedComponent,
     updateComponentProps,
     deleteComponent,
+    deleteSection,
     handleDragEnd,
     addSection,
     undo,
@@ -389,7 +390,7 @@ export function AboutEditor({
                         </h3>
                         <button
                           onClick={() => {
-                            // Delete section logic here
+                            deleteSection(section.id);
                           }}
                           className={cn(
                             'h-6 w-6 rounded p-0 text-red-500 transition-colors',
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index beea56e8..fad1fd90 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -13,6 +13,8 @@ import { cn } from '@lib/utils';
 
 import React from 'react';
 
+import { useDndState } from './dnd-context';
+
 // Re-export arrayMove for convenience
 export { arrayMove };
 
@@ -124,6 +126,11 @@ export function Sortable({
   className,
   disabled = false,
 }: SortableProps) {
+  const { isDraggingFromPalette } = useDndState();
+
+  // Normal sortable behavior - always call hooks at the top level
+  const shouldDisable = disabled;
+
   const {
     attributes,
     listeners,
@@ -131,14 +138,53 @@ export function Sortable({
     transform,
     transition,
     isDragging,
+    isOver,
   } = useSortable({
     id,
-    disabled,
+    disabled: shouldDisable,
     data: {
       type: 'component',
     },
   });
 
+  // Conditional rendering after all hooks are called
+  if (isDraggingFromPalette) {
+    console.log('🚫 SORTABLE RENDERED AS PLAIN DIV:', {
+      componentId: id,
+      isDraggingFromPalette,
+      reason: 'palette dragging - avoiding drop conflicts',
+    });
+
+    return (
+      <div
+        className={cn(className, 'pointer-events-none')}
+        style={{ opacity: 0.5 }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  // Log component dragging state
+  if (isDragging) {
+    console.log('🔥 COMPONENT BEING DRAGGED:', {
+      componentId: id,
+      isDragging,
+      transform,
+      isDraggingFromPalette,
+    });
+  }
+
+  // Log if somehow this component is still receiving hover events
+  if (isDraggingFromPalette && isOver) {
+    console.log('⚠️ SORTABLE STILL HOVERING (Should not happen!):', {
+      componentId: id,
+      isOver,
+      shouldDisable,
+      isDraggingFromPalette,
+    });
+  }
+
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -151,7 +197,7 @@ export function Sortable({
       className={cn(
         className,
         isDragging && 'z-50 scale-105 opacity-60',
-        !disabled && 'cursor-grab active:cursor-grabbing'
+        !shouldDisable && 'cursor-grab active:cursor-grabbing'
       )}
       {...listeners}
       {...attributes}
@@ -182,6 +228,8 @@ export function SortableContainer({
   className,
   strategy = verticalListSortingStrategy,
 }: SortableContainerProps) {
+  const { isDraggingFromPalette } = useDndState();
+
   const { isOver, setNodeRef } = useDroppable({
     id,
     data: {
@@ -190,6 +238,16 @@ export function SortableContainer({
     },
   });
 
+  // Log hover events when dragging from palette
+  if (isDraggingFromPalette && isOver) {
+    console.log('📦 CONTAINER HOVER:', {
+      containerId: id,
+      isOver,
+      isDraggingFromPalette,
+      itemCount: items.length,
+    });
+  }
+
   return (
     <SortableContext items={items} strategy={strategy}>
       <div
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index f975eada..be397bb1 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -11,13 +11,23 @@ import {
 } from '@dnd-kit/core';
 import { createPortal } from 'react-dom';
 
-import React, { useState } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 
 interface DndContextWrapperProps {
   children: React.ReactNode;
   onDragEnd: (event: DragEndEvent) => void;
 }
 
+interface DndStateContextValue {
+  isDraggingFromPalette: boolean;
+}
+
+const DndStateContext = createContext<DndStateContextValue>({
+  isDraggingFromPalette: false,
+});
+
+export const useDndState = () => useContext(DndStateContext);
+
 /**
  * DndKit Context Wrapper
  *
@@ -33,6 +43,8 @@ export function DndContextWrapper({
     content: React.ReactNode;
   } | null>(null);
 
+  const [isDraggingFromPalette, setIsDraggingFromPalette] = useState(false);
+
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -43,35 +55,58 @@ export function DndContextWrapper({
 
   const handleDragStart = (event: DragStartEvent) => {
     const { active } = event;
+    const activeId = String(active.id);
+
+    // Check if dragging from palette
+    const isFromPalette = activeId.startsWith('palette-');
+    setIsDraggingFromPalette(isFromPalette);
+
+    console.log('🚀 DND START:', {
+      activeId,
+      isFromPalette,
+      isDraggingFromPalette: isFromPalette,
+      activeData: active.data.current,
+    });
+
     setActiveItem({
-      id: String(active.id),
-      content: active.data.current?.preview || String(active.id),
+      id: activeId,
+      content: active.data.current?.preview || activeId,
     });
   };
 
   const handleDragEnd = (event: DragEndEvent) => {
+    console.log('🏁 DND END:', {
+      activeId: event.active.id,
+      overId: event.over?.id,
+      overData: event.over?.data.current,
+      isDraggingFromPalette,
+    });
+
     setActiveItem(null);
+    setIsDraggingFromPalette(false);
     onDragEnd(event);
   };
 
   return (
-    <DndContext
-      sensors={sensors}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      {children}
-      {typeof document !== 'undefined' &&
-        createPortal(
-          <DragOverlay>
-            {activeItem ? (
-              <div className="rounded-lg border bg-white p-2 shadow-lg dark:bg-gray-800">
-                {activeItem.content}
-              </div>
-            ) : null}
-          </DragOverlay>,
-          document.body
-        )}
-    </DndContext>
+    <DndStateContext.Provider value={{ isDraggingFromPalette }}>
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        {children}
+        {typeof document !== 'undefined' &&
+          createPortal(
+            <DragOverlay>
+              {activeItem ? (
+                <div className="rounded-lg border bg-white p-2 shadow-lg dark:bg-gray-800">
+                  {activeItem.content}
+                </div>
+              ) : null}
+            </DragOverlay>,
+            document.body
+          )}
+      </DndContext>
+    </DndStateContext.Provider>
   );
 }
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index dcca6648..42c87ad9 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -338,38 +338,89 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       const activeContainer = active.data.current?.sortable?.containerId;
       const overContainer = over.data.current?.sortable?.containerId || overId;
 
+      console.log('🔄 COMPONENT REORDERING:', {
+        activeId,
+        overId,
+        activeContainer,
+        overContainer,
+        activeData: active.data.current,
+        overData: over.data.current,
+      });
+
       if (activeContainer && overContainer) {
         if (activeContainer === overContainer) {
           // Reordering within the same container
-          const [containerType, sectionId, columnIndex] =
-            activeContainer.split('-');
+          console.log('📋 SAME CONTAINER REORDER - ORIGINAL:', {
+            activeContainer,
+            overContainer,
+          });
+
+          // DndKit generates container IDs automatically, need to map them back to our section IDs
+          // Find the section and column based on the component positions
+          let targetSectionId = null;
+          let targetColumnIndex = null;
+
+          // Search through all sections to find where these components are located
+          for (const section of newPageContent.sections) {
+            for (
+              let colIndex = 0;
+              colIndex < section.columns.length;
+              colIndex++
+            ) {
+              const column = section.columns[colIndex];
+              if (
+                column.some(comp => comp.id === activeId) &&
+                column.some(comp => comp.id === overId)
+              ) {
+                targetSectionId = section.id;
+                targetColumnIndex = colIndex;
+                break;
+              }
+            }
+            if (targetSectionId) break;
+          }
 
-          if (
-            containerType === 'section' &&
-            sectionId &&
-            columnIndex !== undefined
-          ) {
+          console.log('📋 FOUND TARGET LOCATION:', {
+            targetSectionId,
+            targetColumnIndex,
+          });
+
+          if (targetSectionId && targetColumnIndex !== null) {
             const section = newPageContent.sections.find(
-              s => s.id === sectionId
+              s => s.id === targetSectionId
             );
-            if (section && section.columns[parseInt(columnIndex)]) {
-              const column = section.columns[parseInt(columnIndex)];
+            if (section && section.columns[targetColumnIndex]) {
+              const column = section.columns[targetColumnIndex];
               const activeIndex = column.findIndex(
                 comp => comp.id === activeId
               );
               const overIndex = column.findIndex(comp => comp.id === overId);
 
+              console.log('🎯 REORDER INDICES:', {
+                activeIndex,
+                overIndex,
+                columnLength: column.length,
+                targetSectionId,
+                targetColumnIndex,
+              });
+
               if (
                 activeIndex !== -1 &&
                 overIndex !== -1 &&
                 activeIndex !== overIndex
               ) {
                 // Use arrayMove to reorder within the same container
-                section.columns[parseInt(columnIndex)] = arrayMove(
+                const originalColumn = [...column];
+                section.columns[targetColumnIndex] = arrayMove(
                   column,
                   activeIndex,
                   overIndex
                 );
+
+                console.log('✅ REORDER APPLIED:', {
+                  before: originalColumn.map(c => c.id),
+                  after: section.columns[targetColumnIndex].map(c => c.id),
+                });
               }
             }
           }

From 70d2cc16ff289fe3939b567834b153adece21ed8 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 11:42:17 +0800
Subject: [PATCH 17/66] feat(admin): enhance drag preview and fix empty section
 drop functionality

- Add component preview support to DragOverlay for better visual feedback
- Fix container ID parsing issue that prevented drops into empty sections
- Improve drag-and-drop debugging with comprehensive logging

Key improvements:
- Components now show actual appearance when dragged (not just ID)
- Empty sections can now receive components from palette correctly
- Enhanced ID parsing handles hyphenated section IDs properly
- Added detailed logging for debugging drag-and-drop operations

Technical changes:
- Add preview prop to Sortable interface and implementation
- Generate component preview with proper styling for drag overlay
- Fix targetContainerId parsing with slice-based approach
- Add comprehensive logging at each step of drop process
---
 components/admin/content/about-editor.tsx   | 52 +++++++++++++--------
 components/admin/content/dnd-components.tsx |  3 ++
 lib/stores/about-editor-store.ts            | 46 +++++++++++++++++-
 3 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 0631c57a..276ef19c 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -433,29 +433,43 @@ export function AboutEditor({
                               </div>
                             )}
 
-                            {column.map(component => (
-                              <Sortable
-                                key={component.id}
-                                id={component.id}
-                                className={cn(
-                                  'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
-                                  selectedComponentId === component.id
-                                    ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
-                                    : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
-                                )}
-                              >
+                            {column.map(component => {
+                              const componentPreview = (
                                 <div
-                                  onClick={() =>
-                                    handleComponentClick(component.id)
-                                  }
-                                  onContextMenu={e =>
-                                    handleContextMenu(e, component.id)
-                                  }
+                                  className={cn(
+                                    'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                    'border-stone-200 bg-white dark:border-stone-600 dark:bg-stone-800'
+                                  )}
                                 >
                                   <ComponentRenderer component={component} />
                                 </div>
-                              </Sortable>
-                            ))}
+                              );
+
+                              return (
+                                <Sortable
+                                  key={component.id}
+                                  id={component.id}
+                                  preview={componentPreview}
+                                  className={cn(
+                                    'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                    selectedComponentId === component.id
+                                      ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
+                                      : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
+                                  )}
+                                >
+                                  <div
+                                    onClick={() =>
+                                      handleComponentClick(component.id)
+                                    }
+                                    onContextMenu={e =>
+                                      handleContextMenu(e, component.id)
+                                    }
+                                  >
+                                    <ComponentRenderer component={component} />
+                                  </div>
+                                </Sortable>
+                              );
+                            })}
                           </SortableContainer>
                         );
                       })}
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index fad1fd90..866535ca 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -113,6 +113,7 @@ interface SortableProps {
   children: React.ReactNode;
   className?: string;
   disabled?: boolean;
+  preview?: React.ReactNode;
 }
 
 /**
@@ -125,6 +126,7 @@ export function Sortable({
   children,
   className,
   disabled = false,
+  preview,
 }: SortableProps) {
   const { isDraggingFromPalette } = useDndState();
 
@@ -144,6 +146,7 @@ export function Sortable({
     disabled: shouldDisable,
     data: {
       type: 'component',
+      preview,
     },
   });
 
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index 42c87ad9..c0584f5b 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -237,6 +237,12 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
         return;
       }
 
+      console.log('🎨 PALETTE DROP DETECTED:', {
+        componentType,
+        overId,
+        overData: over.data.current,
+      });
+
       // Parse destination - handle direct drops on containers
       let targetContainerId = overId;
       let insertIndex = -1; // -1 means append to end
@@ -308,10 +314,29 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
         }
       }
 
-      const [type, sectionId, columnIndex] = targetContainerId.split('-');
+      const targetParts = targetContainerId.split('-');
+      // Format is: section-{sectionId}-{columnIndex}
+      // But sectionId might contain hyphens, so we need to handle this carefully
+      const type = targetParts[0];
+      const columnIndex = targetParts[targetParts.length - 1];
+      const sectionId = targetParts.slice(1, -1).join('-'); // Everything between type and columnIndex
+
+      console.log('🔍 PARSING TARGET CONTAINER:', {
+        targetContainerId,
+        targetParts,
+        parsed: { type, sectionId, columnIndex },
+        insertIndex,
+      });
 
       if (type === 'section' && sectionId && columnIndex !== undefined) {
         const section = newPageContent.sections.find(s => s.id === sectionId);
+
+        console.log('🎯 FOUND SECTION:', {
+          section: section?.id,
+          hasColumn: section?.columns[parseInt(columnIndex)] !== undefined,
+          columnLength: section?.columns[parseInt(columnIndex)]?.length,
+        });
+
         if (section && section.columns[parseInt(columnIndex)]) {
           const newComponent: ComponentInstance = {
             id: generateUniqueId('comp'),
@@ -330,8 +355,25 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
             );
           }
 
-          console.log('Component added successfully:', newComponent.id);
+          console.log('✅ COMPONENT ADDED SUCCESSFULLY:', {
+            componentId: newComponent.id,
+            sectionId,
+            columnIndex,
+            newColumnLength: section.columns[parseInt(columnIndex)].length,
+          });
+        } else {
+          console.log('❌ FAILED TO FIND SECTION OR COLUMN:', {
+            sectionFound: !!section,
+            columnExists: !!section?.columns[parseInt(columnIndex)],
+          });
         }
+      } else {
+        console.log('❌ INVALID TARGET CONTAINER FORMAT:', {
+          type,
+          sectionId,
+          columnIndex,
+          targetContainerId,
+        });
       }
     } else {
       // Handle moving existing components within or between containers

From 67136fc67291c741dcb195cecc6c1bc7273c38b9 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 12:29:05 +0800
Subject: [PATCH 18/66] fix(admin): resolve misleading drag animation on
 successful component drops

When dragging components from palette to canvas sections, the drag overlay
still showed "return to palette" animation even on successful drops.

Changes:
- DndContextWrapper now tracks drop success and animates accordingly
- handleDragEnd in about-editor-store returns boolean success status
- SortableContainer shows green success feedback on successful drops
- Successful drops fade out in place, failed drops return to origin

This provides clear visual confirmation that drag operations succeeded.
---
 components/admin/content/dnd-components.tsx |  20 +++-
 components/admin/content/dnd-context.tsx    |  42 ++++++-
 lib/stores/about-editor-store.ts            | 122 ++++++++++++++++----
 3 files changed, 155 insertions(+), 29 deletions(-)

diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index 866535ca..a7a993a1 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -232,6 +232,7 @@ export function SortableContainer({
   strategy = verticalListSortingStrategy,
 }: SortableContainerProps) {
   const { isDraggingFromPalette } = useDndState();
+  const [recentDrop, setRecentDrop] = React.useState(false);
 
   const { isOver, setNodeRef } = useDroppable({
     id,
@@ -251,6 +252,15 @@ export function SortableContainer({
     });
   }
 
+  // Show success feedback when items are added
+  React.useEffect(() => {
+    if (items.length > 0 && isDraggingFromPalette && isOver) {
+      setRecentDrop(true);
+      const timer = setTimeout(() => setRecentDrop(false), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [items.length, isDraggingFromPalette, isOver]);
+
   return (
     <SortableContext items={items} strategy={strategy}>
       <div
@@ -258,10 +268,18 @@ export function SortableContainer({
         className={cn(
           className,
           isOver &&
-            'ring-opacity-75 bg-blue-50/50 ring-2 ring-blue-400 dark:bg-blue-900/20'
+            'ring-opacity-75 bg-blue-50/50 ring-2 ring-blue-400 dark:bg-blue-900/20',
+          recentDrop &&
+            'ring-opacity-75 animate-pulse bg-green-50/50 ring-2 ring-green-400 dark:bg-green-900/20'
         )}
       >
         {children}
+        {recentDrop && (
+          <div className="animate-fadeIn absolute top-2 right-2 flex items-center gap-1 rounded-full bg-green-500 px-2 py-1 text-xs text-white">
+            <span>✓</span>
+            <span>Added</span>
+          </div>
+        )}
       </div>
     </SortableContext>
   );
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index be397bb1..573a7a19 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -15,7 +15,7 @@ import React, { createContext, useContext, useState } from 'react';
 
 interface DndContextWrapperProps {
   children: React.ReactNode;
-  onDragEnd: (event: DragEndEvent) => void;
+  onDragEnd: (event: DragEndEvent) => boolean; // Return true if drop was successful
 }
 
 interface DndStateContextValue {
@@ -44,6 +44,8 @@ export function DndContextWrapper({
   } | null>(null);
 
   const [isDraggingFromPalette, setIsDraggingFromPalette] = useState(false);
+  const [dropWasSuccessful, setDropWasSuccessful] = useState(false);
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -82,9 +84,28 @@ export function DndContextWrapper({
       isDraggingFromPalette,
     });
 
-    setActiveItem(null);
-    setIsDraggingFromPalette(false);
-    onDragEnd(event);
+    // Call the store's drag end handler and get success status
+    const wasSuccessful = onDragEnd(event);
+    setDropWasSuccessful(wasSuccessful);
+
+    if (wasSuccessful && activeItem) {
+      // For successful drops, animate out in place
+      setIsAnimatingOut(true);
+
+      // Clear the item after animation completes
+      setTimeout(() => {
+        setActiveItem(null);
+        setIsDraggingFromPalette(false);
+        setDropWasSuccessful(false);
+        setIsAnimatingOut(false);
+      }, 200); // 200ms fade out animation
+    } else {
+      // For failed drops, clear immediately (allows default return animation)
+      setActiveItem(null);
+      setIsDraggingFromPalette(false);
+      setDropWasSuccessful(false);
+      setIsAnimatingOut(false);
+    }
   };
 
   return (
@@ -97,9 +118,18 @@ export function DndContextWrapper({
         {children}
         {typeof document !== 'undefined' &&
           createPortal(
-            <DragOverlay>
+            <DragOverlay dropAnimation={dropWasSuccessful ? null : undefined}>
               {activeItem ? (
-                <div className="rounded-lg border bg-white p-2 shadow-lg dark:bg-gray-800">
+                <div
+                  className={`rounded-lg border bg-white p-2 shadow-lg transition-all duration-200 dark:bg-gray-800 ${
+                    isAnimatingOut
+                      ? 'scale-95 transform opacity-0'
+                      : 'scale-100 opacity-100'
+                  }`}
+                >
+                  {dropWasSuccessful && (
+                    <div className="absolute inset-0 animate-pulse rounded-lg border-green-500 bg-green-500/20" />
+                  )}
                   {activeItem.content}
                 </div>
               ) : null}
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index c0584f5b..4b547b2b 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -45,8 +45,8 @@ interface AboutEditorState {
   ) => void;
   // Delete a component by ID
   deleteComponent: (id: string) => void;
-  // Handle drag and drop operations
-  handleDragEnd: (event: DragEndEvent) => void;
+  // Handle drag and drop operations - returns true if drop was successful
+  handleDragEnd: (event: DragEndEvent) => boolean;
   // Create a new section
   addSection: (
     layout?: 'single-column' | 'two-column' | 'three-column'
@@ -202,13 +202,19 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
   },
 
   // Handle drag and drop (optimized with performance considerations)
-  handleDragEnd: (event: DragEndEvent) => {
+  handleDragEnd: (event: DragEndEvent): boolean => {
     const { active, over } = event;
 
-    if (!over) return;
+    if (!over) {
+      console.log('❌ NO DROP TARGET - returning false');
+      return false;
+    }
 
     const state = get();
-    if (!state.pageContent) return;
+    if (!state.pageContent) {
+      console.log('❌ NO PAGE CONTENT - returning false');
+      return false;
+    }
 
     // More efficient cloning - only clone what we need to modify
     const newPageContent: PageContent = {
@@ -233,8 +239,8 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
         comp => comp.type === componentType
       );
       if (!componentDef) {
-        console.log('Component definition not found for:', componentType);
-        return;
+        console.log('❌ Component definition not found for:', componentType);
+        return false;
       }
 
       console.log('🎨 PALETTE DROP DETECTED:', {
@@ -274,14 +280,16 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
 
         console.log('New section created with component:', newComponent.id);
 
-        // Save changes and exit early
+        // Save changes and return success
         set(state => ({
           pageContent: newPageContent,
           undoStack: [...state.undoStack, state.pageContent!].slice(-20),
           redoStack: [],
           isDirty: true,
         }));
-        return;
+
+        console.log('✅ SECTION DROP SUCCESSFUL');
+        return true;
       }
 
       // Check if we're dropping directly on a container
@@ -361,11 +369,26 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
             columnIndex,
             newColumnLength: section.columns[parseInt(columnIndex)].length,
           });
+
+          // Save changes and return success for component drop
+          const cleanedSections = newPageContent.sections.filter(section =>
+            section.columns.some(column => column.length > 0)
+          );
+
+          set(state => ({
+            pageContent: { ...newPageContent, sections: cleanedSections },
+            undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+            redoStack: [],
+            isDirty: true,
+          }));
+
+          return true;
         } else {
           console.log('❌ FAILED TO FIND SECTION OR COLUMN:', {
             sectionFound: !!section,
             columnExists: !!section?.columns[parseInt(columnIndex)],
           });
+          return false;
         }
       } else {
         console.log('❌ INVALID TARGET CONTAINER FORMAT:', {
@@ -374,6 +397,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
           columnIndex,
           targetContainerId,
         });
+        return false;
       }
     } else {
       // Handle moving existing components within or between containers
@@ -463,8 +487,33 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
                   before: originalColumn.map(c => c.id),
                   after: section.columns[targetColumnIndex].map(c => c.id),
                 });
+
+                // Save changes and return success for reordering
+                const cleanedSections = newPageContent.sections.filter(
+                  section => section.columns.some(column => column.length > 0)
+                );
+
+                set(state => ({
+                  pageContent: { ...newPageContent, sections: cleanedSections },
+                  undoStack: [...state.undoStack, state.pageContent!].slice(
+                    -20
+                  ),
+                  redoStack: [],
+                  isDirty: true,
+                }));
+
+                return true;
+              } else {
+                console.log('❌ REORDER FAILED - Invalid indices');
+                return false;
               }
+            } else {
+              console.log('❌ REORDER FAILED - Section or column not found');
+              return false;
             }
+          } else {
+            console.log('❌ REORDER FAILED - Target location not found');
+            return false;
           }
         } else {
           // Moving between containers
@@ -500,26 +549,55 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
                   } else {
                     destColumn.push(removed);
                   }
+
+                  console.log('✅ CROSS-CONTAINER MOVE SUCCESSFUL');
+
+                  // Save changes and return success
+                  const cleanedSections = newPageContent.sections.filter(
+                    section => section.columns.some(column => column.length > 0)
+                  );
+
+                  set(state => ({
+                    pageContent: {
+                      ...newPageContent,
+                      sections: cleanedSections,
+                    },
+                    undoStack: [...state.undoStack, state.pageContent!].slice(
+                      -20
+                    ),
+                    redoStack: [],
+                    isDirty: true,
+                  }));
+
+                  return true;
+                } else {
+                  console.log(
+                    '❌ CROSS-CONTAINER MOVE FAILED - Component not found'
+                  );
+                  return false;
                 }
+              } else {
+                console.log('❌ CROSS-CONTAINER MOVE FAILED - Invalid columns');
+                return false;
               }
+            } else {
+              console.log(
+                '❌ CROSS-CONTAINER MOVE FAILED - Sections not found'
+              );
+              return false;
             }
+          } else {
+            console.log(
+              '❌ CROSS-CONTAINER MOVE FAILED - Invalid container format'
+            );
+            return false;
           }
         }
+      } else {
+        console.log('❌ NO CONTAINERS FOUND - Drag operation failed');
+        return false;
       }
     }
-
-    // Clean up empty sections
-    const cleanedSections = newPageContent.sections.filter(section =>
-      section.columns.some(column => column.length > 0)
-    );
-
-    // Save changes
-    set(state => ({
-      pageContent: { ...newPageContent, sections: cleanedSections },
-      undoStack: [...state.undoStack, state.pageContent!].slice(-20),
-      redoStack: [],
-      isDirty: true,
-    }));
   },
 
   // Add new section

From ff68141f74cce195744859766e660046d52ec9fc Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 13:28:54 +0800
Subject: [PATCH 19/66] fix(admin): resolve React hooks error and right-click
 menu reliability

Fixed "Rendered fewer hooks than expected" error by moving useMemo hook
before conditional returns in Sortable component. Added comprehensive
right-click menu improvements with event delegation and fallback handling.
---
 components/admin/content/about-editor.tsx   | 44 +++++++++++++++------
 components/admin/content/dnd-components.tsx | 29 +++++++++++++-
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 276ef19c..3d94d273 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -237,6 +237,27 @@ export function AboutEditor({
     }
   };
 
+  // Global context menu handler as fallback - finds component under cursor
+  const handleGlobalContextMenu = (e: React.MouseEvent) => {
+    // Only handle if no specific component context menu was triggered
+    if (contextMenu) return;
+
+    // Find the closest component element
+    const target = e.target as HTMLElement;
+    const componentElement = target.closest(
+      '[data-component-id]'
+    ) as HTMLElement;
+
+    if (componentElement) {
+      const componentId = componentElement.getAttribute('data-component-id');
+      if (componentId) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleContextMenu(e, componentId);
+      }
+    }
+  };
+
   if (!pageContent) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -356,7 +377,10 @@ export function AboutEditor({
 
           {/* Canvas */}
           <div className="flex-1 overflow-y-auto">
-            <div className="space-y-6 p-6">
+            <div
+              className="space-y-6 p-6"
+              onContextMenu={handleGlobalContextMenu}
+            >
               {pageContent.sections.map((section, sectionIndex) => (
                 <div key={section.id} className="space-y-4">
                   {/* Section Drop Zone (before each section) */}
@@ -456,17 +480,15 @@ export function AboutEditor({
                                       ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
                                       : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
                                   )}
+                                  onClick={() =>
+                                    handleComponentClick(component.id)
+                                  }
+                                  onContextMenu={e =>
+                                    handleContextMenu(e, component.id)
+                                  }
+                                  data-component-id={component.id}
                                 >
-                                  <div
-                                    onClick={() =>
-                                      handleComponentClick(component.id)
-                                    }
-                                    onContextMenu={e =>
-                                      handleContextMenu(e, component.id)
-                                    }
-                                  >
-                                    <ComponentRenderer component={component} />
-                                  </div>
+                                  <ComponentRenderer component={component} />
                                 </Sortable>
                               );
                             })}
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index a7a993a1..19b65cd1 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -114,6 +114,8 @@ interface SortableProps {
   className?: string;
   disabled?: boolean;
   preview?: React.ReactNode;
+  onClick?: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
 }
 
 /**
@@ -127,6 +129,8 @@ export function Sortable({
   className,
   disabled = false,
   preview,
+  onClick,
+  onContextMenu,
 }: SortableProps) {
   const { isDraggingFromPalette } = useDndState();
 
@@ -150,6 +154,20 @@ export function Sortable({
     },
   });
 
+  // Filter out context menu interfering events and handle them separately
+  // IMPORTANT: This hook must be called before any conditional returns!
+  const filteredListeners = React.useMemo(() => {
+    if (!listeners) return {};
+
+    // Create a copy without onContextMenu to prevent conflicts
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { onContextMenu: _, ...otherListeners } = listeners as Record<
+      string,
+      unknown
+    >;
+    return otherListeners;
+  }, [listeners]);
+
   // Conditional rendering after all hooks are called
   if (isDraggingFromPalette) {
     console.log('🚫 SORTABLE RENDERED AS PLAIN DIV:', {
@@ -202,8 +220,17 @@ export function Sortable({
         isDragging && 'z-50 scale-105 opacity-60',
         !shouldDisable && 'cursor-grab active:cursor-grabbing'
       )}
-      {...listeners}
+      {...filteredListeners}
       {...attributes}
+      onClick={onClick}
+      onContextMenu={e => {
+        // Call the provided context menu handler if available
+        if (onContextMenu) {
+          onContextMenu(e);
+        }
+        // Don't prevent default or stop propagation to ensure proper handling
+      }}
+      data-component-id={id}
     >
       {children}
     </div>

From d76553fee57334b022ec4f4b4379b111fb480140 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 13:39:39 +0800
Subject: [PATCH 20/66] fix(admin): resolve cross-container drag and drop
 functionality

- Replace @dnd-kit container ID parsing with component location lookup
- Add support for dropping components onto empty section containers
- Fix cross-section component movement that was failing due to container format mismatch
- Enhanced error handling and logging for drag operations
---
 lib/stores/about-editor-store.ts | 234 ++++++++++++++++++++++---------
 1 file changed, 167 insertions(+), 67 deletions(-)

diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index 4b547b2b..f023de13 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -516,82 +516,182 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
             return false;
           }
         } else {
-          // Moving between containers
-          const [sourceType, sourceSectionId, sourceColumnIndex] =
-            activeContainer.split('-');
-          const [destType, destSectionId, destColumnIndex] =
-            overContainer.split('-');
-
-          if (sourceType === 'section' && destType === 'section') {
-            const sourceSection = newPageContent.sections.find(
-              s => s.id === sourceSectionId
-            );
-            const destSection = newPageContent.sections.find(
-              s => s.id === destSectionId
-            );
-
-            if (sourceSection && destSection) {
-              const sourceColumn =
-                sourceSection.columns[parseInt(sourceColumnIndex)];
-              const destColumn = destSection.columns[parseInt(destColumnIndex)];
+          // Moving between containers - find components by their actual locations
+          console.log('🔄 CROSS-CONTAINER MOVE DETECTED:', {
+            activeId,
+            overId,
+            activeContainer,
+            overContainer,
+          });
 
-              if (sourceColumn && destColumn) {
-                // Find and move the component
-                const componentIndex = sourceColumn.findIndex(
-                  comp => comp.id === activeId
+          // Helper function to find component location
+          const findComponentLocation = (componentId: string) => {
+            for (
+              let sectionIndex = 0;
+              sectionIndex < newPageContent.sections.length;
+              sectionIndex++
+            ) {
+              const section = newPageContent.sections[sectionIndex];
+              for (
+                let columnIndex = 0;
+                columnIndex < section.columns.length;
+                columnIndex++
+              ) {
+                const column = section.columns[columnIndex];
+                const componentIndex = column.findIndex(
+                  comp => comp.id === componentId
                 );
                 if (componentIndex !== -1) {
-                  const [removed] = sourceColumn.splice(componentIndex, 1);
-                  // Insert at the position of the over item, or at the end
-                  const overIndex = over.data.current?.sortable?.index;
-                  if (typeof overIndex === 'number') {
-                    destColumn.splice(overIndex, 0, removed);
-                  } else {
-                    destColumn.push(removed);
-                  }
-
-                  console.log('✅ CROSS-CONTAINER MOVE SUCCESSFUL');
-
-                  // Save changes and return success
-                  const cleanedSections = newPageContent.sections.filter(
-                    section => section.columns.some(column => column.length > 0)
-                  );
-
-                  set(state => ({
-                    pageContent: {
-                      ...newPageContent,
-                      sections: cleanedSections,
-                    },
-                    undoStack: [...state.undoStack, state.pageContent!].slice(
-                      -20
-                    ),
-                    redoStack: [],
-                    isDirty: true,
-                  }));
-
-                  return true;
-                } else {
-                  console.log(
-                    '❌ CROSS-CONTAINER MOVE FAILED - Component not found'
-                  );
-                  return false;
+                  return {
+                    sectionIndex,
+                    columnIndex,
+                    componentIndex,
+                    section,
+                    column,
+                    component: column[componentIndex],
+                  };
                 }
-              } else {
-                console.log('❌ CROSS-CONTAINER MOVE FAILED - Invalid columns');
-                return false;
               }
-            } else {
-              console.log(
-                '❌ CROSS-CONTAINER MOVE FAILED - Sections not found'
+            }
+            return null;
+          };
+
+          const sourceLocation = findComponentLocation(activeId);
+
+          // Check if dropping directly on an empty container (overId is container ID)
+          if (overId.startsWith('section-')) {
+            const targetParts = overId.split('-');
+            const sectionId = targetParts.slice(1, -1).join('-');
+            const columnIndex = targetParts[targetParts.length - 1];
+
+            console.log('📦 DROPPING ON EMPTY CONTAINER:', {
+              overId,
+              sectionId,
+              columnIndex,
+              sourceLocation: sourceLocation
+                ? sourceLocation.section.id
+                : 'not found',
+            });
+
+            if (sourceLocation && sectionId && columnIndex !== undefined) {
+              const targetSection = newPageContent.sections.find(
+                s => s.id === sectionId
               );
-              return false;
+              if (
+                targetSection &&
+                targetSection.columns[parseInt(columnIndex)]
+              ) {
+                // Remove component from source
+                const [removed] = sourceLocation.column.splice(
+                  sourceLocation.componentIndex,
+                  1
+                );
+
+                // Add to target empty container
+                targetSection.columns[parseInt(columnIndex)].push(removed);
+
+                console.log('✅ MOVE TO EMPTY CONTAINER SUCCESSFUL:', {
+                  movedComponent: removed.id,
+                  fromSection: sourceLocation.section.id,
+                  fromColumn: sourceLocation.columnIndex,
+                  toSection: targetSection.id,
+                  toColumn: parseInt(columnIndex),
+                });
+
+                // Save changes and return success
+                const cleanedSections = newPageContent.sections.filter(
+                  section => section.columns.some(column => column.length > 0)
+                );
+
+                set(state => ({
+                  pageContent: {
+                    ...newPageContent,
+                    sections: cleanedSections,
+                  },
+                  undoStack: [...state.undoStack, state.pageContent!].slice(
+                    -20
+                  ),
+                  redoStack: [],
+                  isDirty: true,
+                }));
+
+                return true;
+              }
             }
           } else {
-            console.log(
-              '❌ CROSS-CONTAINER MOVE FAILED - Invalid container format'
-            );
-            return false;
+            // Moving to a location with existing components
+            const destLocation = findComponentLocation(overId);
+
+            console.log('📍 COMPONENT LOCATIONS:', {
+              source: sourceLocation
+                ? {
+                    sectionId: sourceLocation.section.id,
+                    sectionIndex: sourceLocation.sectionIndex,
+                    columnIndex: sourceLocation.columnIndex,
+                    componentIndex: sourceLocation.componentIndex,
+                  }
+                : null,
+              dest: destLocation
+                ? {
+                    sectionId: destLocation.section.id,
+                    sectionIndex: destLocation.sectionIndex,
+                    columnIndex: destLocation.columnIndex,
+                    componentIndex: destLocation.componentIndex,
+                  }
+                : null,
+            });
+
+            if (sourceLocation && destLocation) {
+              // Remove component from source
+              const [removed] = sourceLocation.column.splice(
+                sourceLocation.componentIndex,
+                1
+              );
+
+              // Insert into destination - insert before the target component
+              destLocation.column.splice(
+                destLocation.componentIndex,
+                0,
+                removed
+              );
+
+              console.log('✅ CROSS-CONTAINER MOVE SUCCESSFUL:', {
+                movedComponent: removed.id,
+                fromSection: sourceLocation.section.id,
+                fromColumn: sourceLocation.columnIndex,
+                toSection: destLocation.section.id,
+                toColumn: destLocation.columnIndex,
+                insertIndex: destLocation.componentIndex,
+              });
+
+              // Save changes and return success
+              const cleanedSections = newPageContent.sections.filter(section =>
+                section.columns.some(column => column.length > 0)
+              );
+
+              set(state => ({
+                pageContent: {
+                  ...newPageContent,
+                  sections: cleanedSections,
+                },
+                undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+                redoStack: [],
+                isDirty: true,
+              }));
+
+              return true;
+            }
           }
+
+          console.log(
+            '❌ CROSS-CONTAINER MOVE FAILED - Could not find component locations or target container:',
+            {
+              sourceFound: !!sourceLocation,
+              overId,
+              activeId,
+            }
+          );
+          return false;
         }
       } else {
         console.log('❌ NO CONTAINERS FOUND - Drag operation failed');

From d5ea9712d3a8084857d5d1eb0589e25cb6b48986 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 15:45:19 +0800
Subject: [PATCH 21/66] feat(admin): enhance component editing with keyboard
 shortcuts and inline editing

- Add Delete key support for removing selected components
- Implement double-click inline editing for component content properties
- Add keyboard shortcuts (Ctrl+Enter to save, Escape to cancel editing)
- Improve focus management for better keyboard interaction
- Update UI colors from blue to stone theme for consistency
- Remove success status animations for cleaner interface
- Fix event bubbling issues in inline editing mode
---
 components/admin/content/about-editor.tsx   | 164 +++++++++++++++++++-
 components/admin/content/dnd-components.tsx |  25 +--
 components/admin/content/dnd-context.tsx    |   3 -
 3 files changed, 163 insertions(+), 29 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 3d94d273..da3eaa25 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -63,6 +63,12 @@ export function AboutEditor({
     componentId: string;
   } | null>(null);
 
+  // Inline editing state
+  const [editingComponent, setEditingComponent] = React.useState<{
+    componentId: string;
+    content: string;
+  } | null>(null);
+
   // Zustand store
   const {
     pageContent,
@@ -199,6 +205,11 @@ export function AboutEditor({
   // Handle component selection
   const handleComponentClick = (componentId: string) => {
     setSelectedComponent(componentId);
+    // Focus the main container so keyboard events work
+    const container = document.querySelector('[tabindex="0"]') as HTMLElement;
+    if (container) {
+      container.focus();
+    }
   };
 
   // Handle right-click context menu
@@ -226,6 +237,11 @@ export function AboutEditor({
         y: e.clientY,
         componentId: componentId,
       });
+      // Focus the main container so keyboard events work
+      const container = document.querySelector('[tabindex="0"]') as HTMLElement;
+      if (container) {
+        container.focus();
+      }
     }
   };
 
@@ -237,6 +253,62 @@ export function AboutEditor({
     }
   };
 
+  // Handle keyboard shortcuts
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Delete' && selectedComponentId) {
+      e.preventDefault();
+      handleDeleteComponent(selectedComponentId);
+    }
+    if (e.key === 'Escape' && editingComponent) {
+      e.preventDefault();
+      setEditingComponent(null);
+    }
+  };
+
+  // Handle double-click to edit content
+  const handleDoubleClick = (componentId: string) => {
+    // Find the component
+    let targetComponent: ComponentInstance | null = null;
+    for (const section of pageContent?.sections || []) {
+      for (const column of section.columns) {
+        const component = column.find(comp => comp.id === componentId);
+        if (component) {
+          targetComponent = component;
+          break;
+        }
+      }
+      if (targetComponent) break;
+    }
+
+    if (targetComponent && targetComponent.props.content) {
+      setEditingComponent({
+        componentId,
+        content: String(targetComponent.props.content || ''),
+      });
+    }
+  };
+
+  // Handle saving inline edit
+  const handleSaveEdit = () => {
+    if (editingComponent) {
+      updateComponentProps(editingComponent.componentId, {
+        content: editingComponent.content,
+      });
+      setEditingComponent(null);
+      debouncedSave();
+    }
+  };
+
+  // Handle input change during editing
+  const handleEditInputChange = (value: string) => {
+    if (editingComponent) {
+      setEditingComponent({
+        ...editingComponent,
+        content: value,
+      });
+    }
+  };
+
   // Global context menu handler as fallback - finds component under cursor
   const handleGlobalContextMenu = (e: React.MouseEvent) => {
     // Only handle if no specific component context menu was triggered
@@ -268,7 +340,11 @@ export function AboutEditor({
 
   return (
     <DndContextWrapper onDragEnd={handleDragEnd}>
-      <div className="flex h-full flex-col">
+      <div
+        className="flex h-full flex-col focus:outline-none"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+      >
         {/* Header */}
         <div
           className={cn(
@@ -387,9 +463,9 @@ export function AboutEditor({
                   {sectionIndex > 0 && (
                     <Droppable
                       id={`section-drop-${sectionIndex}`}
-                      className="h-2 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-blue-300 hover:bg-blue-50 dark:hover:border-blue-600 dark:hover:bg-blue-950"
+                      className="h-2 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-stone-400 hover:bg-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-800"
                     >
-                      <div className="flex h-full items-center justify-center text-sm font-medium text-blue-600 opacity-0 hover:opacity-100 dark:text-blue-400">
+                      <div className="flex h-full items-center justify-center text-sm font-medium text-stone-600 opacity-0 hover:opacity-100 dark:text-stone-400">
                         Drop here to create new section
                       </div>
                     </Droppable>
@@ -483,12 +559,88 @@ export function AboutEditor({
                                   onClick={() =>
                                     handleComponentClick(component.id)
                                   }
+                                  onDoubleClick={() =>
+                                    handleDoubleClick(component.id)
+                                  }
                                   onContextMenu={e =>
                                     handleContextMenu(e, component.id)
                                   }
                                   data-component-id={component.id}
                                 >
-                                  <ComponentRenderer component={component} />
+                                  {editingComponent?.componentId ===
+                                  component.id ? (
+                                    <div
+                                      className="space-y-2"
+                                      onClick={e => {
+                                        // Prevent event bubbling to parent Sortable component
+                                        e.stopPropagation();
+                                      }}
+                                      onMouseDown={e => {
+                                        // Prevent event bubbling to parent Sortable component
+                                        e.stopPropagation();
+                                      }}
+                                    >
+                                      <textarea
+                                        value={editingComponent.content}
+                                        onChange={e =>
+                                          handleEditInputChange(e.target.value)
+                                        }
+                                        onClick={e => {
+                                          // Prevent event bubbling when clicking inside textarea
+                                          e.stopPropagation();
+                                        }}
+                                        onMouseDown={e => {
+                                          // Prevent event bubbling when mouse down in textarea
+                                          e.stopPropagation();
+                                        }}
+                                        onKeyDown={e => {
+                                          if (e.key === 'Enter' && e.ctrlKey) {
+                                            e.preventDefault();
+                                            handleSaveEdit();
+                                          }
+                                          if (e.key === 'Escape') {
+                                            e.preventDefault();
+                                            setEditingComponent(null);
+                                          }
+                                          e.stopPropagation(); // Prevent parent keyboard handlers
+                                        }}
+                                        className="resize-vertical min-h-[60px] w-full rounded border p-2 text-sm focus:ring-2 focus:ring-stone-500 focus:outline-none"
+                                        placeholder="Enter content..."
+                                        autoFocus
+                                        onBlur={e => {
+                                          // Only auto-save if focus is truly leaving the editing area
+                                          // Check if focus is moving to another element outside the editing container
+                                          const relatedTarget =
+                                            e.relatedTarget as HTMLElement;
+                                          const editContainer =
+                                            e.currentTarget.closest(
+                                              '.space-y-2'
+                                            );
+
+                                          if (
+                                            !relatedTarget ||
+                                            !editContainer?.contains(
+                                              relatedTarget
+                                            )
+                                          ) {
+                                            // Auto-save on blur if there are changes and focus truly left
+                                            setTimeout(() => {
+                                              if (editingComponent) {
+                                                handleSaveEdit();
+                                              }
+                                            }, 100);
+                                          }
+                                        }}
+                                      />
+                                      <div className="text-muted-foreground flex gap-2 text-xs">
+                                        <span>
+                                          Ctrl+Enter to save • Escape to cancel
+                                        </span>
+                                      </div>
+                                    </div>
+                                  ) : (
+                                    <ComponentRenderer component={component} />
+                                  )}
                                 </Sortable>
                               );
                             })}
@@ -503,9 +655,9 @@ export function AboutEditor({
               {/* Final Drop Zone */}
               <Droppable
                 id="section-drop-final"
-                className="h-8 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-blue-300 hover:bg-blue-50 dark:hover:border-blue-600 dark:hover:bg-blue-950"
+                className="h-8 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-stone-400 hover:bg-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-800"
               >
-                <div className="flex h-full items-center justify-center text-sm font-medium text-blue-600 opacity-0 hover:opacity-100 dark:text-blue-400">
+                <div className="flex h-full items-center justify-center text-sm font-medium text-stone-600 opacity-0 hover:opacity-100 dark:text-stone-400">
                   Drop here to create new section
                 </div>
               </Droppable>
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index 19b65cd1..68bb7dfc 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -47,7 +47,7 @@ export function Droppable({
       ref={setNodeRef}
       className={cn(
         className,
-        isOver && 'ring-opacity-50 ring-2 ring-blue-500'
+        isOver && 'ring-opacity-50 ring-2 ring-stone-500'
       )}
     >
       {children}
@@ -115,6 +115,7 @@ interface SortableProps {
   disabled?: boolean;
   preview?: React.ReactNode;
   onClick?: () => void;
+  onDoubleClick?: () => void;
   onContextMenu?: (e: React.MouseEvent) => void;
 }
 
@@ -130,6 +131,7 @@ export function Sortable({
   disabled = false,
   preview,
   onClick,
+  onDoubleClick,
   onContextMenu,
 }: SortableProps) {
   const { isDraggingFromPalette } = useDndState();
@@ -223,6 +225,7 @@ export function Sortable({
       {...filteredListeners}
       {...attributes}
       onClick={onClick}
+      onDoubleClick={onDoubleClick}
       onContextMenu={e => {
         // Call the provided context menu handler if available
         if (onContextMenu) {
@@ -259,7 +262,6 @@ export function SortableContainer({
   strategy = verticalListSortingStrategy,
 }: SortableContainerProps) {
   const { isDraggingFromPalette } = useDndState();
-  const [recentDrop, setRecentDrop] = React.useState(false);
 
   const { isOver, setNodeRef } = useDroppable({
     id,
@@ -279,15 +281,6 @@ export function SortableContainer({
     });
   }
 
-  // Show success feedback when items are added
-  React.useEffect(() => {
-    if (items.length > 0 && isDraggingFromPalette && isOver) {
-      setRecentDrop(true);
-      const timer = setTimeout(() => setRecentDrop(false), 1000);
-      return () => clearTimeout(timer);
-    }
-  }, [items.length, isDraggingFromPalette, isOver]);
-
   return (
     <SortableContext items={items} strategy={strategy}>
       <div
@@ -295,18 +288,10 @@ export function SortableContainer({
         className={cn(
           className,
           isOver &&
-            'ring-opacity-75 bg-blue-50/50 ring-2 ring-blue-400 dark:bg-blue-900/20',
-          recentDrop &&
-            'ring-opacity-75 animate-pulse bg-green-50/50 ring-2 ring-green-400 dark:bg-green-900/20'
+            'ring-opacity-75 bg-stone-50/50 ring-2 ring-stone-400 dark:bg-stone-900/20'
         )}
       >
         {children}
-        {recentDrop && (
-          <div className="animate-fadeIn absolute top-2 right-2 flex items-center gap-1 rounded-full bg-green-500 px-2 py-1 text-xs text-white">
-            <span>✓</span>
-            <span>Added</span>
-          </div>
-        )}
       </div>
     </SortableContext>
   );
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index 573a7a19..72db924f 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -127,9 +127,6 @@ export function DndContextWrapper({
                       : 'scale-100 opacity-100'
                   }`}
                 >
-                  {dropWasSuccessful && (
-                    <div className="absolute inset-0 animate-pulse rounded-lg border-green-500 bg-green-500/20" />
-                  )}
                   {activeItem.content}
                 </div>
               ) : null}

From 34ab5b2cef9004b07a9bf84b75b6bd8d3a98bdd8 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 18:50:34 +0800
Subject: [PATCH 22/66] fix(admin): fix reset button functionality in content
 management

- Reset button now properly syncs with editor state using Zustand store
- Clears undo/redo stacks when resetting to original data state
- Ensures both page-level state and editor state are consistent
- Handles dynamic format migration for about translations
- Reset button now works like undo button but restores to file state
---
 .gitignore                                |  4 ++-
 app/admin/content/page.tsx                | 41 ++++++++++++++++++++++-
 components/admin/content/about-editor.tsx |  2 +-
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2d3af037..958a5179 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,4 +57,6 @@ docs/security
 pm2-logs/
 
 # demo projects
-about-page-standalone/
\ No newline at end of file
+about-page-standalone/
+
+/picture 
\ No newline at end of file
diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index 972b8708..b2853575 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -13,7 +13,15 @@ import { getCurrentLocaleFromCookie } from '@lib/config/language-config';
 import { clearTranslationCache } from '@lib/hooks/use-dynamic-translations';
 import { useTheme } from '@lib/hooks/use-theme';
 import { TranslationService } from '@lib/services/admin/content/translation-service';
-import type { AboutTranslationData } from '@lib/types/about-page-components';
+import { useAboutEditorStore } from '@lib/stores/about-editor-store';
+import type {
+  AboutTranslationData,
+  PageContent,
+} from '@lib/types/about-page-components';
+import {
+  isDynamicFormat,
+  migrateAboutTranslationData,
+} from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
 import { Eye } from 'lucide-react';
 import { toast } from 'sonner';
@@ -47,6 +55,9 @@ export default function ContentManagementPage() {
   const router = useRouter();
   const t = useTranslations('pages.admin.content.page');
 
+  // About editor store for resetting editor state
+  const { setPageContent, reset: resetAboutEditor } = useAboutEditorStore();
+
   const [activeTab, setActiveTab] = useState<'about' | 'home'>('about');
   const [showPreview, setShowPreview] = useState(true);
   const [previewDevice, setPreviewDevice] = useState<
@@ -164,9 +175,37 @@ export default function ContentManagementPage() {
 
   const handleReset = () => {
     if (activeTab === 'about' && originalAboutTranslations) {
+      // Reset page-level state
       setAboutTranslations({ ...originalAboutTranslations });
+
+      // Reset editor state to match the original data
+      const currentTranslation = originalAboutTranslations[currentLocale] || {};
+      let translation = currentTranslation;
+
+      // Ensure it's in dynamic format
+      if (!isDynamicFormat(translation)) {
+        translation = migrateAboutTranslationData(translation);
+      }
+
+      if (translation.sections) {
+        const content: PageContent = {
+          sections: translation.sections,
+          metadata: translation.metadata || {
+            version: '1.0.0',
+            lastModified: new Date().toISOString(),
+            author: 'admin',
+          },
+        };
+
+        // Reset the editor state completely - this clears undo/redo stacks
+        resetAboutEditor();
+        // Set the page content to original state
+        setPageContent(content);
+      }
     } else if (activeTab === 'home' && originalHomeTranslations) {
+      // Reset page-level state for home tab
       setHomeTranslations({ ...originalHomeTranslations });
+      // Note: Home editor doesn't use the same Zustand store, so just reset the state
     }
   };
 
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index da3eaa25..9b27c123 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -444,7 +444,7 @@ export function AboutEditor({
           {/* Left Panel - Component Palette */}
           <div
             className={cn(
-              'w-64 overflow-y-auto border-r p-4',
+              'w-64 overflow-x-hidden overflow-y-auto border-r p-4',
               'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-900'
             )}
           >

From 0e0ea7ed882b2cdcacc46ab56718a22f908d9b1c Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 19:57:35 +0800
Subject: [PATCH 23/66] feat(admin): enhance button component with solid and
 outline variants

- Replace button variants from primary/secondary/outline to solid/outline
- Implement stone color system for consistent design language
- Solid variant: stone-900 background with white text
- Outline variant: transparent background with stone border
- Match homepage button sizing (px-8 py-3, text-base)
- Add hover scale effect and smooth transitions
- Update context menu with new variant options
- Support dark mode with appropriate color adjustments
- Remove unused Button import for cleaner code
---
 .../admin/content/component-palette.tsx       |  2 +-
 .../admin/content/component-renderer.tsx      | 30 ++++++++++++-------
 components/admin/content/context-menu.tsx     |  3 +-
 lib/types/about-page-components.ts            |  2 +-
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
index 2e237315..7a24a1b2 100644
--- a/components/admin/content/component-palette.tsx
+++ b/components/admin/content/component-palette.tsx
@@ -59,7 +59,7 @@ const availableComponents: ComponentDefinition[] = [
     description: 'Interactive button',
     defaultProps: {
       text: 'Click me',
-      variant: 'primary',
+      variant: 'solid',
       action: 'link',
       url: '#',
     },
diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index d8bc14b3..d12f7dee 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { Button } from '@components/ui/button';
 import {
   CardsProps,
   ComponentInstance,
@@ -105,7 +104,7 @@ const Cards: React.FC<CardsProps> = ({ items, layout }) => {
 /**
  * Button component renderer
  *
- * Renders interactive buttons with different variants
+ * Renders interactive buttons with stone color system variants
  */
 const DynamicButton: React.FC<DynamicButtonProps> = ({
   text,
@@ -120,19 +119,28 @@ const DynamicButton: React.FC<DynamicButtonProps> = ({
     }
   };
 
-  const variantMap = {
-    primary: 'default' as const,
-    secondary: 'secondary' as const,
-    outline: 'outline' as const,
+  const buttonStyles = {
+    solid: cn(
+      'inline-flex items-center justify-center rounded-lg px-8 py-3 text-base font-medium transition-all duration-200',
+      'bg-stone-900 text-white hover:scale-105 hover:bg-stone-800 focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-none',
+      'dark:bg-stone-100 dark:text-stone-900 dark:hover:bg-stone-200 dark:focus:ring-stone-400'
+    ),
+    outline: cn(
+      'inline-flex items-center justify-center rounded-lg px-8 py-3 text-base font-medium transition-all duration-200',
+      'border border-stone-300 bg-transparent text-stone-900 hover:scale-105 hover:bg-stone-50 focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-none',
+      'dark:border-stone-600 dark:text-stone-100 dark:hover:bg-stone-800 dark:focus:ring-stone-400'
+    ),
   };
 
   return (
     <div className="mb-6 text-center">
-      <Button variant={variantMap[variant]} size="lg" asChild>
-        <a href={url || '#'} onClick={handleClick} className="inline-block">
-          {text}
-        </a>
-      </Button>
+      <a
+        href={url || '#'}
+        onClick={handleClick}
+        className={buttonStyles[variant]}
+      >
+        {text}
+      </a>
     </div>
   );
 };
diff --git a/components/admin/content/context-menu.tsx b/components/admin/content/context-menu.tsx
index 17fb9d0c..2b05751e 100644
--- a/components/admin/content/context-menu.tsx
+++ b/components/admin/content/context-menu.tsx
@@ -211,8 +211,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
         { value: 'external', label: 'External' },
       ],
       variant: [
-        { value: 'primary', label: 'Primary' },
-        { value: 'secondary', label: 'Secondary' },
+        { value: 'solid', label: 'Solid' },
         { value: 'outline', label: 'Outline' },
       ],
       level: [
diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
index ffc9f83a..8ad08f78 100644
--- a/lib/types/about-page-components.ts
+++ b/lib/types/about-page-components.ts
@@ -75,7 +75,7 @@ export interface CardsProps {
 // 按钮组件 Props
 export interface ButtonProps {
   text: string;
-  variant: 'primary' | 'secondary' | 'outline';
+  variant: 'solid' | 'outline';
   action: 'link' | 'submit' | 'external';
   url?: string;
 }

From 555f26158f0b9209f63596038c0590da807e0b0a Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 20:40:50 +0800
Subject: [PATCH 24/66] fix(data): update button variant from primary to solid
 in language files

- Change existing button components from "primary" to "solid" variant
- Update all 10 language files for consistency with new button system
- Ensure existing "Start Exploring" buttons display with solid styling
---
 messages/de-DE.json | 4 ++--
 messages/en-US.json | 4 ++--
 messages/es-ES.json | 4 ++--
 messages/fr-FR.json | 4 ++--
 messages/it-IT.json | 4 ++--
 messages/ja-JP.json | 4 ++--
 messages/pt-PT.json | 4 ++--
 messages/ru-RU.json | 4 ++--
 messages/zh-CN.json | 4 ++--
 messages/zh-TW.json | 4 ++--
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/messages/de-DE.json b/messages/de-DE.json
index 596d8255..aec13f7d 100644
--- a/messages/de-DE.json
+++ b/messages/de-DE.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "Entdeckung beginnen",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/en-US.json b/messages/en-US.json
index 524ca975..13964ffa 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "Start Exploring",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/es-ES.json b/messages/es-ES.json
index 082ee46d..8971a247 100644
--- a/messages/es-ES.json
+++ b/messages/es-ES.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "Comenzar a Explorar",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/fr-FR.json b/messages/fr-FR.json
index 36cf77e0..4f4319bb 100644
--- a/messages/fr-FR.json
+++ b/messages/fr-FR.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "Commencer à explorer",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/it-IT.json b/messages/it-IT.json
index 4bbdd859..00ed45a0 100644
--- a/messages/it-IT.json
+++ b/messages/it-IT.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "Inizia a Esplorare",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/ja-JP.json b/messages/ja-JP.json
index 178a04da..5577916f 100644
--- a/messages/ja-JP.json
+++ b/messages/ja-JP.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "探索を始める",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/pt-PT.json b/messages/pt-PT.json
index 1acfa0e4..43837808 100644
--- a/messages/pt-PT.json
+++ b/messages/pt-PT.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "Começar a Explorar",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/ru-RU.json b/messages/ru-RU.json
index 49d557d7..46d434d3 100644
--- a/messages/ru-RU.json
+++ b/messages/ru-RU.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "Начать исследование",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index 05114a7e..241f6ec9 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "开始探索",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/messages/zh-TW.json b/messages/zh-TW.json
index 3b2963e6..b7b4e942 100644
--- a/messages/zh-TW.json
+++ b/messages/zh-TW.json
@@ -2019,7 +2019,7 @@
                 "type": "button",
                 "props": {
                   "text": "開始探索",
-                  "variant": "primary",
+                  "variant": "solid",
                   "action": "link",
                   "url": "#",
                   "textAlign": "center"
@@ -2424,4 +2424,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

From 29650821c294d5586c29bebee51f53d814424070 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 21:04:40 +0800
Subject: [PATCH 25/66] feat(admin): unify about page preview with homepage
 visual style

- Apply homepage stone color system and animations to about page
- Add Framer Motion animations with staggered reveal effects
- Implement gradient text for large headings (H1, H2)
- Update paragraph styling with homepage font sizes and colors
- Use homepage background colors and responsive design
- Maintain unified visual experience across all pages
- Support desktop/tablet/mobile preview modes
---
 components/admin/content/about-preview.tsx    | 126 ++++++++++++------
 .../admin/content/component-renderer.tsx      |  58 ++++++--
 2 files changed, 130 insertions(+), 54 deletions(-)

diff --git a/components/admin/content/about-preview.tsx b/components/admin/content/about-preview.tsx
index 0b2da112..6c6e17d1 100644
--- a/components/admin/content/about-preview.tsx
+++ b/components/admin/content/about-preview.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useTheme } from '@lib/hooks/use-theme';
 import {
   AboutTranslationData,
   PageContent,
@@ -7,6 +8,7 @@ import {
   migrateAboutTranslationData,
 } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
+import { AnimatePresence, motion } from 'framer-motion';
 
 import React from 'react';
 
@@ -27,13 +29,15 @@ interface AboutPreviewProps {
 /**
  * About Page Preview Component
  *
- * Displays a preview of the about page with responsive device frames
- * Supports both legacy and dynamic component formats
+ * Displays a preview of the about page with homepage-style visual effects
+ * Unified styling with stone color system, animations, and shadows
  */
 export function AboutPreview({
   translation,
   previewDevice,
 }: AboutPreviewProps) {
+  const { isDark } = useTheme();
+
   // Ensure translation is in dynamic format
   const dynamicTranslation = React.useMemo(() => {
     if (!isDynamicFormat(translation)) {
@@ -54,8 +58,25 @@ export function AboutPreview({
     };
   }, [dynamicTranslation]);
 
+  // Get homepage-style colors
+  const getColors = () => {
+    if (isDark) {
+      return {
+        bgColor: '#1c1917',
+        textColor: 'text-gray-300',
+      };
+    } else {
+      return {
+        bgColor: '#f5f5f4',
+        textColor: 'text-stone-700',
+      };
+    }
+  };
+
+  const colors = getColors();
+
   /**
-   * Get device-specific container styles
+   * Get device-specific container styles with homepage styling
    */
   const getDeviceStyles = () => {
     switch (previewDevice) {
@@ -63,32 +84,25 @@ export function AboutPreview({
         return {
           container: 'mx-auto bg-black rounded-[2rem] p-2 shadow-2xl',
           screen:
-            'w-[375px] h-[667px] bg-white dark:bg-gray-900 rounded-[1.75rem] overflow-hidden relative',
+            'w-[375px] h-[667px] bg-white rounded-[1.75rem] overflow-hidden relative',
           content: 'h-full overflow-y-auto',
-          mainClass: 'min-h-full w-full py-4 px-4',
-          innerContainer: 'w-full',
-          maxWidth: 'max-w-none',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
         };
       case 'tablet':
         return {
-          container: 'mx-auto bg-black rounded-xl p-3 shadow-2xl',
+          container: 'mx-auto bg-black rounded-xl p-3 shadow-2xl mt-50',
           screen:
-            'w-[768px] h-[1024px] bg-white dark:bg-gray-900 rounded-lg overflow-hidden relative',
+            'w-[768px] h-[1024px] bg-white rounded-lg overflow-hidden relative',
           content: 'h-full overflow-y-auto',
-          mainClass: 'min-h-full w-full py-6 px-6',
-          innerContainer: 'max-w-2xl mx-auto',
-          maxWidth: 'max-w-2xl',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
         };
       case 'desktop':
       default:
         return {
           container: 'w-full h-full',
-          screen: 'w-full h-full overflow-hidden relative bg-background',
+          screen: 'w-full h-full overflow-hidden relative',
           content: 'h-full overflow-y-auto',
-          mainClass:
-            'min-h-0 w-full py-6 px-4 sm:px-6 lg:px-8 overflow-x-hidden',
-          innerContainer: 'max-w-5xl mx-auto',
-          maxWidth: 'max-w-5xl',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
         };
     }
   };
@@ -96,61 +110,93 @@ export function AboutPreview({
   const deviceStyles = getDeviceStyles();
 
   /**
-   * Render page sections with responsive layout
+   * Render page sections with homepage-style animations and layout
    */
   const renderSections = () => {
     if (!pageContent.sections || pageContent.sections.length === 0) {
       return (
-        <div className="text-muted-foreground flex h-64 items-center justify-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className={cn(
+            'flex h-64 items-center justify-center',
+            colors.textColor
+          )}
+        >
           <p>No content to preview</p>
-        </div>
+        </motion.div>
       );
     }
 
     return (
-      <div className="space-y-8 md:space-y-12">
-        {pageContent.sections.map(section => (
-          <section key={section.id} className="w-full">
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        className="mx-auto max-w-5xl space-y-16"
+      >
+        {pageContent.sections.map((section, sectionIndex) => (
+          <motion.section
+            key={section.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              duration: 0.6,
+              delay: 0.1 + sectionIndex * 0.1,
+            }}
+            className="w-full"
+          >
             <div
               className={cn(
-                'grid gap-4 md:gap-6',
-                section.layout === 'single-column' && 'grid-cols-1',
-                section.layout === 'two-column' && 'grid-cols-1 md:grid-cols-2',
+                'gap-8',
+                section.layout === 'single-column' && 'space-y-8',
+                section.layout === 'two-column' &&
+                  'grid grid-cols-1 md:grid-cols-2',
                 section.layout === 'three-column' &&
-                  'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+                  'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
               )}
             >
               {section.columns.map((column, columnIndex) => (
-                <div key={columnIndex} className="space-y-4">
-                  {column.map(component => (
-                    <div key={component.id}>
+                <div key={columnIndex} className="space-y-8">
+                  {column.map((component, componentIndex) => (
+                    <motion.div
+                      key={component.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{
+                        duration: 0.5,
+                        delay: 0.2 + sectionIndex * 0.1 + componentIndex * 0.05,
+                      }}
+                    >
                       <ComponentRenderer component={component} />
-                    </div>
+                    </motion.div>
                   ))}
                 </div>
               ))}
             </div>
-          </section>
+          </motion.section>
         ))}
-      </div>
+      </motion.div>
     );
   };
 
   return (
     <div
       className={cn(
-        'flex h-full items-center justify-center',
+        'flex h-full w-full items-center justify-center',
         previewDevice !== 'desktop' && 'p-4'
       )}
     >
       <div className={deviceStyles.container}>
-        <div className={deviceStyles.screen}>
+        <div
+          className={cn(deviceStyles.screen)}
+          style={{ backgroundColor: colors.bgColor }}
+        >
           <div className={deviceStyles.content}>
-            <main className={deviceStyles.mainClass}>
-              <div className={deviceStyles.innerContainer}>
-                {renderSections()}
-              </div>
-            </main>
+            <AnimatePresence>
+              <main className={deviceStyles.mainClass}>{renderSections()}</main>
+            </AnimatePresence>
           </div>
         </div>
       </div>
diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index d12f7dee..5624636d 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -16,7 +16,7 @@ import React from 'react';
 /**
  * Heading component renderer
  *
- * Renders heading elements with proper styling and alignment
+ * Renders heading elements with homepage-style gradients and styling
  */
 const Heading: React.FC<HeadingProps> = ({ content, level, textAlign }) => {
   const textAlignClasses = {
@@ -29,19 +29,37 @@ const Heading: React.FC<HeadingProps> = ({ content, level, textAlign }) => {
 
   // Define font sizes for different heading levels with responsive design
   const sizeClasses = {
-    1: 'text-3xl sm:text-4xl md:text-5xl',
-    2: 'text-2xl sm:text-3xl md:text-4xl',
-    3: 'text-xl sm:text-2xl md:text-3xl',
-    4: 'text-lg sm:text-xl md:text-2xl',
-    5: 'text-base sm:text-lg md:text-xl',
-    6: 'text-sm sm:text-base md:text-lg',
+    1: 'text-5xl md:text-6xl',
+    2: 'text-3xl sm:text-4xl md:text-5xl',
+    3: 'text-2xl sm:text-3xl md:text-4xl',
+    4: 'text-xl sm:text-2xl md:text-3xl',
+    5: 'text-lg sm:text-xl md:text-2xl',
+    6: 'text-base sm:text-lg md:text-xl',
   };
 
+  // Apply gradient for large headings (H1, H2)
+  const shouldUseGradient = level <= 2;
+
+  if (shouldUseGradient) {
+    return React.createElement(
+      `h${level}`,
+      {
+        className: cn(
+          'bg-gradient-to-r from-stone-700 to-stone-900 dark:from-stone-300 dark:to-stone-500',
+          'mb-6 bg-clip-text py-2 leading-normal font-bold text-transparent',
+          sizeClasses[level],
+          alignmentClass
+        ),
+      },
+      content
+    );
+  }
+
   return React.createElement(
     `h${level}`,
     {
       className: cn(
-        'text-foreground mb-4 font-bold sm:mb-6',
+        'mb-4 font-bold text-stone-900 sm:mb-6 dark:text-stone-100',
         sizeClasses[level],
         alignmentClass
       ),
@@ -53,7 +71,7 @@ const Heading: React.FC<HeadingProps> = ({ content, level, textAlign }) => {
 /**
  * Paragraph component renderer
  *
- * Renders paragraph text with proper styling and alignment
+ * Renders paragraph text with stone color system styling
  */
 const Paragraph: React.FC<ParagraphProps> = ({ content, textAlign }) => {
   const textAlignClasses = {
@@ -65,7 +83,8 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, textAlign }) => {
   return (
     <p
       className={cn(
-        'text-foreground/80 mb-4 text-sm leading-relaxed sm:text-base lg:text-lg',
+        'mb-4 text-lg leading-relaxed font-light text-stone-700 md:text-xl dark:text-stone-300',
+        'mx-auto max-w-3xl',
         textAlignClasses[textAlign]
       )}
     >
@@ -77,7 +96,7 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, textAlign }) => {
 /**
  * Cards component renderer
  *
- * Renders a grid or list of cards with title and description
+ * Renders a grid or list of cards with homepage-inspired shadows and stone color system
  */
 const Cards: React.FC<CardsProps> = ({ items, layout }) => {
   const gridClass = layout === 'grid' ? 'md:grid-cols-2' : 'grid-cols-1';
@@ -87,12 +106,23 @@ const Cards: React.FC<CardsProps> = ({ items, layout }) => {
       {items.map((item, index) => (
         <div
           key={index}
-          className="border-border bg-card rounded-xl border p-4 shadow-sm transition-shadow duration-200 hover:shadow-md sm:p-6"
+          className={cn(
+            'flex flex-col items-center rounded-xl p-4 text-center transition-all duration-200 sm:p-6',
+            'border border-stone-200 bg-stone-100 shadow-[0_4px_20px_rgba(0,0,0,0.1)]',
+            'hover:-translate-y-1 hover:shadow-[0_6px_25px_rgba(0,0,0,0.15)]',
+            'dark:border-stone-600 dark:bg-stone-700 dark:shadow-[0_4px_20px_rgba(0,0,0,0.3)]',
+            'dark:hover:shadow-[0_6px_25px_rgba(0,0,0,0.4)]'
+          )}
         >
-          <h3 className="text-card-foreground mb-2 text-base font-semibold sm:text-lg">
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-stone-200 dark:bg-stone-600">
+            <span className="text-xl text-stone-600 dark:text-stone-300">
+              #{index + 1}
+            </span>
+          </div>
+          <h3 className="mb-2 text-base font-semibold text-stone-900 sm:text-lg dark:text-stone-100">
             {item.title}
           </h3>
-          <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
+          <p className="text-sm leading-relaxed text-stone-700 sm:text-base dark:text-stone-300">
             {item.description}
           </p>
         </div>

From 54fab644d64cd7c44a102e3156e531a1f1fb09a3 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 22:21:07 +0800
Subject: [PATCH 26/66] feat(admin): implement dual button support for button
 component

- Update ButtonProps interface to support optional secondaryButton
- Modify button component renderer with dual button layout
- Add gap-4 spacing to match homepage button style
- Update context menu with secondary button editing controls
- Add/remove secondary button functionality with proper validation
- Support individual variant and action settings per button
- Maintain backward compatibility with single button components
---
 .../admin/content/component-renderer.tsx      |  25 ++-
 components/admin/content/context-menu.tsx     | 150 ++++++++++++++++++
 lib/types/about-page-components.ts            |   7 +
 3 files changed, 178 insertions(+), 4 deletions(-)

diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index 5624636d..9984e30b 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -135,15 +135,21 @@ const Cards: React.FC<CardsProps> = ({ items, layout }) => {
  * Button component renderer
  *
  * Renders interactive buttons with stone color system variants
+ * Supports dual button layout with homepage-style spacing
  */
 const DynamicButton: React.FC<DynamicButtonProps> = ({
   text,
   variant,
   action,
   url,
+  secondaryButton,
 }) => {
-  const handleClick = (e: React.MouseEvent) => {
-    if (action === 'link' && url === '#') {
+  const handleClick = (
+    e: React.MouseEvent,
+    buttonAction?: string,
+    buttonUrl?: string
+  ) => {
+    if (buttonAction === 'link' && buttonUrl === '#') {
       e.preventDefault();
       // In preview mode, prevent default action
     }
@@ -163,14 +169,25 @@ const DynamicButton: React.FC<DynamicButtonProps> = ({
   };
 
   return (
-    <div className="mb-6 text-center">
+    <div className="mb-6 flex flex-wrap justify-center gap-4">
       <a
         href={url || '#'}
-        onClick={handleClick}
+        onClick={e => handleClick(e, action, url)}
         className={buttonStyles[variant]}
       >
         {text}
       </a>
+      {secondaryButton && (
+        <a
+          href={secondaryButton.url || '#'}
+          onClick={e =>
+            handleClick(e, secondaryButton.action, secondaryButton.url)
+          }
+          className={buttonStyles[secondaryButton.variant]}
+        >
+          {secondaryButton.text}
+        </a>
+      )}
     </div>
   );
 };
diff --git a/components/admin/content/context-menu.tsx b/components/admin/content/context-menu.tsx
index 2b05751e..ea210205 100644
--- a/components/admin/content/context-menu.tsx
+++ b/components/admin/content/context-menu.tsx
@@ -70,6 +70,38 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
     onPropsChange({ ...component.props, [name]: value });
   };
 
+  const handleSecondaryButtonChange = (key: string, value: unknown) => {
+    if (!component) return;
+    const currentSecondaryButton =
+      (component.props.secondaryButton as Record<string, unknown>) || {};
+    const updatedSecondaryButton = { ...currentSecondaryButton, [key]: value };
+    onPropsChange({
+      ...component.props,
+      secondaryButton: updatedSecondaryButton,
+    });
+  };
+
+  const handleAddSecondaryButton = () => {
+    if (!component) return;
+    const defaultSecondaryButton = {
+      text: 'Secondary Button',
+      variant: 'outline',
+      action: 'link',
+      url: '#',
+    };
+    onPropsChange({
+      ...component.props,
+      secondaryButton: defaultSecondaryButton,
+    });
+  };
+
+  const handleRemoveSecondaryButton = () => {
+    if (!component) return;
+    const newProps = { ...component.props };
+    delete newProps.secondaryButton;
+    onPropsChange(newProps);
+  };
+
   const handleItemsChange = (newItems: Array<Record<string, unknown>>) => {
     handleInputChange('items', newItems);
   };
@@ -176,6 +208,120 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
       );
     }
 
+    // Secondary button for button component
+    if (key === 'secondaryButton' && component.type === 'button') {
+      const secondaryButton = value as Record<string, unknown> | undefined;
+
+      if (!secondaryButton) {
+        return (
+          <div key={key} className="space-y-2">
+            <Label className="text-sm">Secondary Button</Label>
+            <button
+              type="button"
+              onClick={handleAddSecondaryButton}
+              className={cn(
+                'w-full rounded-md border px-3 py-2 text-xs font-medium transition-colors',
+                'border-stone-300 bg-white text-stone-900 hover:bg-stone-50',
+                'dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:hover:bg-stone-700',
+                'flex items-center justify-center gap-2'
+              )}
+            >
+              <Plus className="h-3 w-3" />
+              Add Second Button
+            </button>
+          </div>
+        );
+      }
+
+      return (
+        <div key={key} className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-sm">Secondary Button</Label>
+            <button
+              type="button"
+              onClick={handleRemoveSecondaryButton}
+              className="h-6 w-6 rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+            >
+              <Trash2 className="h-3 w-3" />
+            </button>
+          </div>
+          <div
+            className={cn(
+              'space-y-3 rounded-lg border p-3',
+              'border-stone-200 bg-stone-50 dark:border-stone-600 dark:bg-stone-700'
+            )}
+          >
+            {/* Text field */}
+            <div className="space-y-2">
+              <Label className="text-xs">Text</Label>
+              <Input
+                type="text"
+                value={String(secondaryButton.text || '')}
+                onChange={e =>
+                  handleSecondaryButtonChange('text', e.target.value)
+                }
+                placeholder="Enter button text"
+                className="h-8 text-sm"
+              />
+            </div>
+
+            {/* Variant field */}
+            <div className="space-y-2">
+              <Label className="text-xs">Variant</Label>
+              <Select
+                value={String(secondaryButton.variant || 'outline')}
+                onValueChange={newValue =>
+                  handleSecondaryButtonChange('variant', newValue)
+                }
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Select variant" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="solid">Solid</SelectItem>
+                  <SelectItem value="outline">Outline</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Action field */}
+            <div className="space-y-2">
+              <Label className="text-xs">Action</Label>
+              <Select
+                value={String(secondaryButton.action || 'link')}
+                onValueChange={newValue =>
+                  handleSecondaryButtonChange('action', newValue)
+                }
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Select action" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="link">Link</SelectItem>
+                  <SelectItem value="submit">Submit</SelectItem>
+                  <SelectItem value="external">External</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* URL field */}
+            <div className="space-y-2">
+              <Label className="text-xs">URL</Label>
+              <Input
+                type="text"
+                value={String(secondaryButton.url || '')}
+                onChange={e =>
+                  handleSecondaryButtonChange('url', e.target.value)
+                }
+                placeholder="Enter URL"
+                className="h-8 text-sm"
+              />
+            </div>
+          </div>
+        </div>
+      );
+    }
+
     // Select fields
     const selectFields: Record<
       string,
@@ -363,6 +509,10 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
           {Object.entries(component.props).map(([key, value]) =>
             renderPropertyField(key, value)
           )}
+          {/* Always show secondary button option for button components */}
+          {component.type === 'button' &&
+            !component.props.secondaryButton &&
+            renderPropertyField('secondaryButton', undefined)}
         </div>
       </div>
     </>
diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
index 8ad08f78..9a3952b2 100644
--- a/lib/types/about-page-components.ts
+++ b/lib/types/about-page-components.ts
@@ -78,6 +78,13 @@ export interface ButtonProps {
   variant: 'solid' | 'outline';
   action: 'link' | 'submit' | 'external';
   url?: string;
+  // 可选的第二个按钮
+  secondaryButton?: {
+    text: string;
+    variant: 'solid' | 'outline';
+    action: 'link' | 'submit' | 'external';
+    url?: string;
+  };
 }
 
 // 图片组件 Props

From 8696aa203684656140e30de3ab5df01fd338834c Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Mon, 11 Aug 2025 22:57:45 +0800
Subject: [PATCH 27/66] fix(admin): increase button minimum width for visual
 consistency

- Increase min-width from 6rem to 8rem (128px)
- Ensure short text buttons match longer button width
- Fix visual inconsistency between dual buttons
- Maintain automatic expansion for longer content
---
 components/admin/content/component-renderer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index b6a3a73d..2b03b10f 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -160,12 +160,12 @@ const DynamicButton: React.FC<DynamicButtonProps> = ({
   const buttonStyles = {
     solid: cn(
       'inline-flex items-center justify-center rounded-lg px-8 py-3 text-base font-medium transition-all duration-200',
-      'bg-stone-900 text-white hover:scale-105 hover:bg-stone-800 focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-none',
+      'min-w-[8rem] bg-stone-900 text-white hover:scale-105 hover:bg-stone-800 focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-none',
       'dark:bg-stone-100 dark:text-stone-900 dark:hover:bg-stone-200 dark:focus:ring-stone-400'
     ),
     outline: cn(
       'inline-flex items-center justify-center rounded-lg px-8 py-3 text-base font-medium transition-all duration-200',
-      'border border-stone-300 bg-transparent text-stone-900 hover:scale-105 hover:bg-stone-50 focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-none',
+      'min-w-[8rem] border border-stone-300 bg-transparent text-stone-900 hover:scale-105 hover:bg-stone-50 focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-none',
       'dark:border-stone-600 dark:text-stone-100 dark:hover:bg-stone-800 dark:focus:ring-stone-400'
     ),
   };

From 2ccad6113e10e8c6d6939aa793b5b3d4f731c944 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Tue, 12 Aug 2025 10:46:54 +0800
Subject: [PATCH 28/66] feat(admin): unify homepage and about page with dynamic
 component system

Convert all language files from static home page format to dynamic sections format.
This unifies the data structure between homepage and about page, allowing both to use
the same ComponentRenderer architecture and admin editing interface.

Major changes:
- Converted 10 language files (de-DE, es-ES, fr-FR, it-IT, pt-PT, ru-RU, zh-TW, en-US, zh-CN, ja-JP)
  from static format to dynamic sections format
- Each conversion preserves original translations while restructuring into 4 main sections:
  hero, features, buttons, and footer
- Added metadata tracking for migrations (version, timestamp, locale)
- Fixed TypeScript issues and ESLint errors in home components
- Removed unused imports and variables
- Fixed conditional React Hooks violations
- Improved type safety by replacing any types with proper interfaces

All language files now use consistent dynamic structure enabling unified content management.
---
 app/admin/content/page.tsx                    |   95 +-
 .../admin/content/home-preview-dynamic.tsx    |  208 ++
 components/home/home-dynamic.tsx              |  222 ++
 components/home/index.tsx                     |   48 +-
 lib/stores/home-editor-store.ts               |  252 ++
 lib/utils/data-migration.ts                   |  299 +-
 messages/de-DE.json                           |  111 +-
 messages/en-US.json                           |  112 +-
 messages/en-US.json.backup                    | 2500 +++++++++++++++++
 messages/es-ES.json                           |  111 +-
 messages/fr-FR.json                           |  111 +-
 messages/it-IT.json                           |  111 +-
 messages/ja-JP.json                           |  112 +-
 messages/pt-PT.json                           |  111 +-
 messages/ru-RU.json                           |  111 +-
 messages/zh-CN.json                           |  112 +-
 messages/zh-CN.json.backup                    | 2500 +++++++++++++++++
 messages/zh-TW.json                           |  112 +-
 scripts/migrate-home-data.ts                  |   94 +
 19 files changed, 7143 insertions(+), 189 deletions(-)
 create mode 100644 components/admin/content/home-preview-dynamic.tsx
 create mode 100644 components/home/home-dynamic.tsx
 create mode 100644 lib/stores/home-editor-store.ts
 create mode 100644 messages/en-US.json.backup
 create mode 100644 messages/zh-CN.json.backup
 create mode 100644 scripts/migrate-home-data.ts

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index b2853575..933d0d3e 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -4,8 +4,7 @@ import { AboutEditor } from '@components/admin/content/about-editor';
 import { AboutPreview } from '@components/admin/content/about-preview';
 import { ContentTabs } from '@components/admin/content/content-tabs';
 import { EditorSkeleton } from '@components/admin/content/editor-skeleton';
-import { HomeEditor } from '@components/admin/content/home-editor';
-import { HomePreview } from '@components/admin/content/home-preview';
+import { HomePreviewDynamic } from '@components/admin/content/home-preview-dynamic';
 import { PreviewToolbar } from '@components/admin/content/preview-toolbar';
 import { ResizableSplitPane } from '@components/ui/resizable-split-pane';
 import type { SupportedLocale } from '@lib/config/language-config';
@@ -14,6 +13,7 @@ import { clearTranslationCache } from '@lib/hooks/use-dynamic-translations';
 import { useTheme } from '@lib/hooks/use-theme';
 import { TranslationService } from '@lib/services/admin/content/translation-service';
 import { useAboutEditorStore } from '@lib/stores/about-editor-store';
+import { useHomeEditorStore } from '@lib/stores/home-editor-store';
 import type {
   AboutTranslationData,
   PageContent,
@@ -23,6 +23,11 @@ import {
   migrateAboutTranslationData,
 } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
+import type { HomeTranslationData } from '@lib/utils/data-migration';
+import {
+  isHomeDynamicFormat,
+  migrateHomeTranslationData,
+} from '@lib/utils/data-migration';
 import { Eye } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -55,8 +60,11 @@ export default function ContentManagementPage() {
   const router = useRouter();
   const t = useTranslations('pages.admin.content.page');
 
-  // About editor store for resetting editor state
-  const { setPageContent, reset: resetAboutEditor } = useAboutEditorStore();
+  // Editor stores for resetting editor state
+  const { setPageContent: setAboutPageContent, reset: resetAboutEditor } =
+    useAboutEditorStore();
+  const { setPageContent: setHomePageContent, reset: resetHomeEditor } =
+    useHomeEditorStore();
 
   const [activeTab, setActiveTab] = useState<'about' | 'home'>('about');
   const [showPreview, setShowPreview] = useState(true);
@@ -200,12 +208,36 @@ export default function ContentManagementPage() {
         // Reset the editor state completely - this clears undo/redo stacks
         resetAboutEditor();
         // Set the page content to original state
-        setPageContent(content);
+        setAboutPageContent(content);
       }
     } else if (activeTab === 'home' && originalHomeTranslations) {
       // Reset page-level state for home tab
       setHomeTranslations({ ...originalHomeTranslations });
-      // Note: Home editor doesn't use the same Zustand store, so just reset the state
+
+      // Reset home editor state to match the original data
+      const currentTranslation = originalHomeTranslations[currentLocale] || {};
+      let translation = currentTranslation;
+
+      // Ensure it's in dynamic format
+      if (!isHomeDynamicFormat(translation)) {
+        translation = migrateHomeTranslationData(translation);
+      }
+
+      if (translation.sections) {
+        const content: PageContent = {
+          sections: translation.sections,
+          metadata: translation.metadata || {
+            version: '1.0.0',
+            lastModified: new Date().toISOString(),
+            author: 'admin',
+          },
+        };
+
+        // Reset the home editor state completely - this clears undo/redo stacks
+        resetHomeEditor();
+        // Set the page content to original state
+        setHomePageContent(content);
+      }
     }
   };
 
@@ -229,19 +261,6 @@ export default function ContentManagementPage() {
     setShowFullscreenPreview(false);
   };
 
-  interface HomeTranslationData {
-    title?: string;
-    subtitle?: string;
-    getStarted?: string;
-    learnMore?: string;
-    features?: FeatureCard[];
-    copyright?: {
-      prefix?: string;
-      linkText?: string;
-      suffix?: string;
-    };
-  }
-
   const transformToHomePreviewConfig = (
     translations: Record<SupportedLocale, HomeTranslationData> | null,
     locale: SupportedLocale
@@ -288,12 +307,33 @@ export default function ContentManagementPage() {
     }
 
     if (activeTab === 'home') {
-      return homeTranslations ? (
-        <HomeEditor
-          translations={homeTranslations}
+      // Convert HomeTranslationData to AboutTranslationData format for dynamic editing
+      const convertedHomeTranslations = homeTranslations
+        ? (Object.fromEntries(
+            Object.entries(homeTranslations).map(([locale, translation]) => [
+              locale,
+              isHomeDynamicFormat(translation)
+                ? translation
+                : migrateHomeTranslationData(translation),
+            ])
+          ) as Record<SupportedLocale, AboutTranslationData>)
+        : null;
+
+      return convertedHomeTranslations ? (
+        <AboutEditor
+          translations={convertedHomeTranslations}
           currentLocale={currentLocale}
           supportedLocales={supportedLocales}
-          onTranslationsChange={handleHomeTranslationsChange}
+          onTranslationsChange={newTranslations => {
+            // Convert back to HomeTranslationData format
+            const convertedBack = Object.fromEntries(
+              Object.entries(newTranslations).map(([locale, translation]) => [
+                locale,
+                translation as HomeTranslationData,
+              ])
+            ) as Record<SupportedLocale, HomeTranslationData>;
+            handleHomeTranslationsChange(convertedBack);
+          }}
           onLocaleChange={setCurrentLocale}
         />
       ) : (
@@ -317,8 +357,13 @@ export default function ContentManagementPage() {
       );
     }
     if (activeTab === 'home') {
-      return homePreviewConfig ? (
-        <HomePreview config={homePreviewConfig} previewDevice={previewDevice} />
+      // Use the most up-to-date home translation data that includes real-time edits
+      const currentHomeTranslation = homeTranslations?.[currentLocale];
+      return currentHomeTranslation ? (
+        <HomePreviewDynamic
+          translation={currentHomeTranslation}
+          previewDevice={previewDevice}
+        />
       ) : (
         <div>{t('loadingPreview')}</div>
       );
diff --git a/components/admin/content/home-preview-dynamic.tsx b/components/admin/content/home-preview-dynamic.tsx
new file mode 100644
index 00000000..20f19efd
--- /dev/null
+++ b/components/admin/content/home-preview-dynamic.tsx
@@ -0,0 +1,208 @@
+'use client';
+
+import { useTheme } from '@lib/hooks/use-theme';
+import { PageContent } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import type { HomeTranslationData } from '@lib/utils/data-migration';
+import {
+  isHomeDynamicFormat,
+  migrateHomeTranslationData,
+} from '@lib/utils/data-migration';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import React from 'react';
+
+import ComponentRenderer from './component-renderer';
+
+interface HomePreviewDynamicProps {
+  /**
+   * Translation data for the home page
+   * Can be either legacy or dynamic format
+   */
+  translation: HomeTranslationData;
+  /**
+   * Preview device type for responsive preview
+   */
+  previewDevice: 'desktop' | 'tablet' | 'mobile';
+}
+
+/**
+ * Home Page Preview Component (Dynamic)
+ *
+ * Displays a preview of the home page using the dynamic component system
+ * Reuses the same ComponentRenderer as AboutPreview for consistency
+ */
+export function HomePreviewDynamic({
+  translation,
+  previewDevice,
+}: HomePreviewDynamicProps) {
+  const { isDark } = useTheme();
+
+  // Ensure translation is in dynamic format
+  const dynamicTranslation = React.useMemo(() => {
+    if (!isHomeDynamicFormat(translation)) {
+      return migrateHomeTranslationData(translation);
+    }
+    return translation;
+  }, [translation]);
+
+  // Create page content from translation
+  const pageContent: PageContent = React.useMemo(() => {
+    return {
+      sections: dynamicTranslation.sections || [],
+      metadata: dynamicTranslation.metadata || {
+        version: '1.0.0',
+        lastModified: new Date().toISOString(),
+        author: 'preview',
+      },
+    };
+  }, [dynamicTranslation]);
+
+  // Get homepage-style colors
+  const getColors = () => {
+    if (isDark) {
+      return {
+        bgColor: '#1c1917',
+        textColor: 'text-gray-300',
+      };
+    } else {
+      return {
+        bgColor: '#f5f5f4',
+        textColor: 'text-stone-700',
+      };
+    }
+  };
+
+  const colors = getColors();
+
+  /**
+   * Get device-specific container styles with homepage styling
+   */
+  const getDeviceStyles = () => {
+    switch (previewDevice) {
+      case 'mobile':
+        return {
+          container: 'mx-auto bg-black rounded-[2rem] p-2 shadow-2xl',
+          screen:
+            'w-[375px] h-[667px] bg-white rounded-[1.75rem] overflow-hidden relative',
+          content: 'h-full overflow-y-auto',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
+        };
+      case 'tablet':
+        return {
+          container: 'mx-auto bg-black rounded-xl p-3 shadow-2xl mt-50',
+          screen:
+            'w-[768px] h-[1024px] bg-white rounded-lg overflow-hidden relative',
+          content: 'h-full overflow-y-auto',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
+        };
+      case 'desktop':
+      default:
+        return {
+          container: 'w-full h-full',
+          screen: 'w-full h-full overflow-hidden relative',
+          content: 'h-full overflow-y-auto',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
+        };
+    }
+  };
+
+  const deviceStyles = getDeviceStyles();
+
+  /**
+   * Render page sections with homepage-style animations and layout
+   */
+  const renderSections = () => {
+    if (!pageContent.sections || pageContent.sections.length === 0) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className={cn(
+            'flex h-64 items-center justify-center',
+            colors.textColor
+          )}
+        >
+          <p>No content to preview</p>
+        </motion.div>
+      );
+    }
+
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        className="mx-auto max-w-5xl space-y-16"
+      >
+        {pageContent.sections.map((section, sectionIndex) => (
+          <motion.section
+            key={section.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              duration: 0.6,
+              delay: 0.1 + sectionIndex * 0.1,
+            }}
+            className="w-full"
+          >
+            <div
+              className={cn(
+                'gap-8',
+                section.layout === 'single-column' && 'space-y-8',
+                section.layout === 'two-column' &&
+                  'grid grid-cols-1 md:grid-cols-2',
+                section.layout === 'three-column' &&
+                  'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+              )}
+            >
+              {section.columns.map((column, columnIndex) => (
+                <div key={columnIndex} className="space-y-8">
+                  {column.map((component, componentIndex) => (
+                    <motion.div
+                      key={component.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{
+                        duration: 0.5,
+                        delay: 0.2 + sectionIndex * 0.1 + componentIndex * 0.05,
+                      }}
+                    >
+                      <ComponentRenderer
+                        component={component}
+                        sectionCommonProps={section.commonProps}
+                      />
+                    </motion.div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </motion.section>
+        ))}
+      </motion.div>
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex h-full w-full items-center justify-center',
+        previewDevice !== 'desktop' && 'p-4'
+      )}
+    >
+      <div className={deviceStyles.container}>
+        <div
+          className={cn(deviceStyles.screen)}
+          style={{ backgroundColor: colors.bgColor }}
+        >
+          <div className={deviceStyles.content}>
+            <AnimatePresence>
+              <main className={deviceStyles.mainClass}>{renderSections()}</main>
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/home/home-dynamic.tsx b/components/home/home-dynamic.tsx
new file mode 100644
index 00000000..40cacfeb
--- /dev/null
+++ b/components/home/home-dynamic.tsx
@@ -0,0 +1,222 @@
+'use client';
+
+import { AdminButton } from '@components/admin/admin-button';
+import ComponentRenderer from '@components/admin/content/component-renderer';
+import { LanguageSwitcher } from '@components/ui/language-switcher';
+import { PageLoader } from '@components/ui/page-loader';
+import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
+import { useTheme } from '@lib/hooks/use-theme';
+import type { PageContent } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import type { HomeTranslationData } from '@lib/utils/data-migration';
+import {
+  isHomeDynamicFormat,
+  migrateHomeTranslationData,
+} from '@lib/utils/data-migration';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+/**
+ * Dynamic Home Page Component
+ *
+ * Uses the dynamic component system to render the home page
+ * Supports both legacy static format and new dynamic sections format
+ */
+export function HomeDynamic() {
+  const { isDark } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const staticT = useTranslations('pages.home');
+  const { t: dynamicT, isLoading } = useDynamicTranslations({
+    sections: ['pages.home'],
+  });
+
+  // Enhanced translation function with dynamic/static fallback
+  const t = useCallback(
+    (key: string, params?: Record<string, string | number | Date>) => {
+      const dynamicValue = dynamicT(key, 'pages.home', params);
+      return dynamicValue || staticT(key, params);
+    },
+    [dynamicT, staticT]
+  );
+
+  // Ensure client-side rendering consistency
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Get homepage data and convert to dynamic format if needed
+  const [pageContent, setPageContent] = useState<PageContent | null>(null);
+
+  useEffect(() => {
+    // Convert translation data to PageContent
+    const createPageContent = () => {
+      try {
+        // Get the raw home translation data
+        const homeData: HomeTranslationData = {
+          title: t('title'),
+          subtitle: t('subtitle'),
+          getStarted: t('getStarted'),
+          learnMore: t('learnMore'),
+          features: staticT.raw('features') as Array<{
+            title: string;
+            description: string;
+          }>,
+          copyright: {
+            prefix: t('copyright.prefix'),
+            linkText: t('copyright.linkText'),
+            suffix: t('copyright.suffix'),
+          },
+        };
+
+        // Migrate to dynamic format if needed
+        const dynamicData = isHomeDynamicFormat(homeData)
+          ? homeData
+          : migrateHomeTranslationData(homeData);
+
+        if (dynamicData.sections) {
+          const content: PageContent = {
+            sections: dynamicData.sections,
+            metadata: dynamicData.metadata || {
+              version: '1.0.0',
+              lastModified: new Date().toISOString(),
+              author: 'system',
+            },
+          };
+          setPageContent(content);
+        }
+      } catch (error) {
+        console.error('Failed to create page content:', error);
+      }
+    };
+
+    if (mounted && !isLoading) {
+      createPageContent();
+    }
+  }, [mounted, isLoading, t, staticT]);
+
+  // Get colors based on theme
+  const getColors = () => {
+    if (isDark) {
+      return {
+        bgColor: '#1c1917',
+        textColor: 'text-gray-300',
+      };
+    } else {
+      return {
+        bgColor: '#f5f5f4',
+        textColor: 'text-stone-700',
+      };
+    }
+  };
+
+  const colors = getColors();
+
+  // Show loading state while mounting or dynamic translations load
+  if (!mounted || isLoading || !pageContent) {
+    return <PageLoader />;
+  }
+
+  /**
+   * Render page sections using ComponentRenderer
+   */
+  const renderSections = () => {
+    if (!pageContent.sections || pageContent.sections.length === 0) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className={cn(
+            'flex h-64 items-center justify-center',
+            colors.textColor
+          )}
+        >
+          <p>No content to display</p>
+        </motion.div>
+      );
+    }
+
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        className="mx-auto max-w-5xl space-y-16"
+      >
+        {pageContent.sections.map((section, sectionIndex) => (
+          <motion.section
+            key={section.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              duration: 0.6,
+              delay: 0.1 + sectionIndex * 0.1,
+            }}
+            className="w-full"
+          >
+            <div
+              className={cn(
+                'gap-8',
+                section.layout === 'single-column' && 'space-y-8',
+                section.layout === 'two-column' &&
+                  'grid grid-cols-1 md:grid-cols-2',
+                section.layout === 'three-column' &&
+                  'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+              )}
+            >
+              {section.columns.map((column, columnIndex) => (
+                <div key={columnIndex} className="space-y-8">
+                  {column.map((component, componentIndex) => (
+                    <motion.div
+                      key={component.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{
+                        duration: 0.5,
+                        delay: 0.2 + sectionIndex * 0.1 + componentIndex * 0.05,
+                      }}
+                    >
+                      <ComponentRenderer
+                        component={component}
+                        sectionCommonProps={section.commonProps}
+                      />
+                    </motion.div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </motion.section>
+        ))}
+      </motion.div>
+    );
+  };
+
+  return (
+    <AnimatePresence>
+      <div
+        className="relative w-full px-4 py-12 sm:px-6 lg:px-8"
+        style={{ backgroundColor: colors.bgColor }}
+      >
+        {/* Top-right toolbar: Admin button (left) + Language switcher (right) */}
+        {/* Uses absolute positioning with responsive design, hidden on mobile to avoid layout issues */}
+        <div className="fixed top-4 right-4 z-50 hidden flex-col items-end gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3 lg:top-6 lg:right-6">
+          <AdminButton />
+          <LanguageSwitcher variant="floating" />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.6 }}
+          className="mx-auto max-w-5xl"
+        >
+          {renderSections()}
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+}
diff --git a/components/home/index.tsx b/components/home/index.tsx
index 987fe6ca..28202e83 100644
--- a/components/home/index.tsx
+++ b/components/home/index.tsx
@@ -14,19 +14,21 @@ import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 
+import { HomeDynamic } from './home-dynamic';
+
 export function Home() {
   const router = useRouter();
   const { isDark } = useTheme();
   const supabase = createClient();
-  const [currentUser, setCurrentUser] = useState<any>(null);
   const [mounted, setMounted] = useState(false);
+  const [useDynamicRender, setUseDynamicRender] = useState(false);
   const staticT = useTranslations('pages.home');
   const { t: dynamicT, isLoading } = useDynamicTranslations({
     sections: ['pages.home'],
   });
 
   // Enhanced translation function with dynamic/static fallback
-  const t = (key: string, params?: any) => {
+  const t = (key: string, params?: Record<string, string | number | Date>) => {
     const dynamicValue = dynamicT(key, 'pages.home', params);
     return dynamicValue || staticT(key, params);
   };
@@ -36,19 +38,34 @@ export function Home() {
     setMounted(true);
   }, []);
 
-  // Check current user authentication status
+  // Check if we should use dynamic rendering (if dynamic sections data is available)
   useEffect(() => {
-    const getCurrentUser = async () => {
-      // 🔒 Security fix: use getUser() for server-side verification
-      // Avoid relying on potentially tampered local session data
-      const {
-        data: { user },
-      } = await supabase.auth.getUser();
-      setCurrentUser(user);
+    const checkForDynamicData = async () => {
+      try {
+        // Check if the translation data has sections (indicating dynamic format)
+        const homeData = dynamicT('', 'pages.home'); // Get full section data
+        if (
+          homeData &&
+          typeof homeData === 'object' &&
+          'sections' in homeData
+        ) {
+          setUseDynamicRender(true);
+        }
+      } catch {
+        console.log('Using static rendering as fallback');
+        setUseDynamicRender(false);
+      }
     };
 
-    getCurrentUser();
-  }, [supabase]);
+    if (mounted && !isLoading) {
+      checkForDynamicData();
+    }
+  }, [mounted, isLoading, dynamicT]);
+
+  // If dynamic rendering is available and enabled, use it
+  if (mounted && !isLoading && useDynamicRender) {
+    return <HomeDynamic />;
+  }
 
   const handleStartClick = async () => {
     try {
@@ -156,7 +173,12 @@ export function Home() {
             transition={{ duration: 0.6, delay: 0.3 }}
             className="mb-16 grid grid-cols-1 gap-8 md:grid-cols-3"
           >
-            {(staticT.raw('features') as any[]).map((feature, index) => (
+            {(
+              staticT.raw('features') as Array<{
+                title: string;
+                description: string;
+              }>
+            ).map((feature, index) => (
               <motion.div
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
diff --git a/lib/stores/home-editor-store.ts b/lib/stores/home-editor-store.ts
new file mode 100644
index 00000000..b54cd015
--- /dev/null
+++ b/lib/stores/home-editor-store.ts
@@ -0,0 +1,252 @@
+import type {
+  PageContent,
+  PageSection,
+} from '@lib/types/about-page-components';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+interface HomeEditorState {
+  pageContent: PageContent | null;
+  selectedComponentId: string | null;
+  undoStack: PageContent[];
+  redoStack: PageContent[];
+  isDirty: boolean;
+  isLoading: boolean;
+}
+
+interface HomeEditorActions {
+  // Core state management
+  setPageContent: (content: PageContent) => void;
+  setSelectedComponentId: (id: string | null) => void;
+  setLoading: (loading: boolean) => void;
+
+  // Undo/Redo functionality
+  pushToUndoStack: (content: PageContent) => void;
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+
+  // Section management
+  addSection: (section: PageSection, index?: number) => void;
+  removeSection: (sectionId: string) => void;
+  updateSection: (
+    sectionId: string,
+    updatedSection: Partial<PageSection>
+  ) => void;
+  duplicateSection: (sectionId: string) => void;
+
+  // Utility actions
+  markAsDirty: () => void;
+  markAsClean: () => void;
+  reset: () => void;
+}
+
+type HomeEditorStore = HomeEditorState & HomeEditorActions;
+
+// Maximum number of undo steps to keep
+const MAX_UNDO_STEPS = 50;
+
+export const useHomeEditorStore = create<HomeEditorStore>()(
+  devtools(
+    (set, get) => ({
+      // Initial state
+      pageContent: null,
+      selectedComponentId: null,
+      undoStack: [],
+      redoStack: [],
+      isDirty: false,
+      isLoading: false,
+
+      // Core state management
+      setPageContent: content => {
+        set({ pageContent: content, isDirty: false });
+      },
+
+      setSelectedComponentId: id => {
+        set({ selectedComponentId: id });
+      },
+
+      setLoading: loading => {
+        set({ isLoading: loading });
+      },
+
+      // Undo/Redo functionality
+      pushToUndoStack: content => {
+        const { undoStack } = get();
+        const newUndoStack = [content, ...undoStack].slice(0, MAX_UNDO_STEPS);
+        set({
+          undoStack: newUndoStack,
+          redoStack: [], // Clear redo stack when new action is performed
+          isDirty: true,
+        });
+      },
+
+      undo: () => {
+        const { pageContent, undoStack, redoStack } = get();
+        if (undoStack.length === 0 || !pageContent) return;
+
+        const [previousContent, ...remainingUndoStack] = undoStack;
+        const newRedoStack = [pageContent, ...redoStack];
+
+        set({
+          pageContent: previousContent,
+          undoStack: remainingUndoStack,
+          redoStack: newRedoStack,
+          isDirty: remainingUndoStack.length > 0,
+        });
+      },
+
+      redo: () => {
+        const { pageContent, undoStack, redoStack } = get();
+        if (redoStack.length === 0 || !pageContent) return;
+
+        const [nextContent, ...remainingRedoStack] = redoStack;
+        const newUndoStack = [pageContent, ...undoStack];
+
+        set({
+          pageContent: nextContent,
+          undoStack: newUndoStack,
+          redoStack: remainingRedoStack,
+          isDirty: true,
+        });
+      },
+
+      canUndo: () => {
+        const { undoStack } = get();
+        return undoStack.length > 0;
+      },
+
+      canRedo: () => {
+        const { redoStack } = get();
+        return redoStack.length > 0;
+      },
+
+      // Section management
+      addSection: (section, index) => {
+        const { pageContent, pushToUndoStack } = get();
+        if (!pageContent) return;
+
+        // Save current state to undo stack
+        pushToUndoStack(pageContent);
+
+        const newSections = [...pageContent.sections];
+        const insertIndex = index !== undefined ? index : newSections.length;
+        newSections.splice(insertIndex, 0, section);
+
+        const updatedContent: PageContent = {
+          ...pageContent,
+          sections: newSections,
+          metadata: {
+            ...pageContent.metadata,
+            lastModified: new Date().toISOString(),
+          },
+        };
+
+        set({ pageContent: updatedContent, isDirty: true });
+      },
+
+      removeSection: sectionId => {
+        const { pageContent, pushToUndoStack } = get();
+        if (!pageContent) return;
+
+        // Save current state to undo stack
+        pushToUndoStack(pageContent);
+
+        const newSections = pageContent.sections.filter(
+          section => section.id !== sectionId
+        );
+
+        const updatedContent: PageContent = {
+          ...pageContent,
+          sections: newSections,
+          metadata: {
+            ...pageContent.metadata,
+            lastModified: new Date().toISOString(),
+          },
+        };
+
+        set({ pageContent: updatedContent, isDirty: true });
+      },
+
+      updateSection: (sectionId, updatedSection) => {
+        const { pageContent, pushToUndoStack } = get();
+        if (!pageContent) return;
+
+        // Save current state to undo stack
+        pushToUndoStack(pageContent);
+
+        const newSections = pageContent.sections.map(section =>
+          section.id === sectionId ? { ...section, ...updatedSection } : section
+        );
+
+        const updatedContent: PageContent = {
+          ...pageContent,
+          sections: newSections,
+          metadata: {
+            ...pageContent.metadata,
+            lastModified: new Date().toISOString(),
+          },
+        };
+
+        set({ pageContent: updatedContent, isDirty: true });
+      },
+
+      duplicateSection: sectionId => {
+        const { pageContent, pushToUndoStack } = get();
+        if (!pageContent) return;
+
+        const sectionIndex = pageContent.sections.findIndex(
+          section => section.id === sectionId
+        );
+        if (sectionIndex === -1) return;
+
+        // Save current state to undo stack
+        pushToUndoStack(pageContent);
+
+        const originalSection = pageContent.sections[sectionIndex];
+        const duplicatedSection: PageSection = {
+          ...JSON.parse(JSON.stringify(originalSection)), // Deep clone
+          id: `section-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, // Generate new ID
+        };
+
+        const newSections = [...pageContent.sections];
+        newSections.splice(sectionIndex + 1, 0, duplicatedSection);
+
+        const updatedContent: PageContent = {
+          ...pageContent,
+          sections: newSections,
+          metadata: {
+            ...pageContent.metadata,
+            lastModified: new Date().toISOString(),
+          },
+        };
+
+        set({ pageContent: updatedContent, isDirty: true });
+      },
+
+      // Utility actions
+      markAsDirty: () => {
+        set({ isDirty: true });
+      },
+
+      markAsClean: () => {
+        set({ isDirty: false });
+      },
+
+      reset: () => {
+        set({
+          pageContent: null,
+          selectedComponentId: null,
+          undoStack: [],
+          redoStack: [],
+          isDirty: false,
+          isLoading: false,
+        });
+      },
+    }),
+    {
+      name: 'home-editor-store',
+    }
+  )
+);
diff --git a/lib/utils/data-migration.ts b/lib/utils/data-migration.ts
index 0d6e049f..7569190a 100644
--- a/lib/utils/data-migration.ts
+++ b/lib/utils/data-migration.ts
@@ -24,6 +24,52 @@ export type {
   IdPrefix,
 } from '@lib/types/about-page-components';
 
+// 主页数据结构接口
+export interface LegacyHomeData {
+  title?: string;
+  subtitle?: string;
+  getStarted?: string;
+  learnMore?: string;
+  features?: Array<{
+    title: string;
+    description: string;
+  }>;
+  copyright?: {
+    prefix?: string;
+    linkText?: string;
+    suffix?: string;
+  };
+}
+
+// 扩展主页翻译数据接口，支持动态组件结构
+export interface HomeTranslationData {
+  // 新的动态组件结构
+  sections?: PageSection[];
+
+  // 向后兼容：保留原有的固定结构 (用于数据迁移)
+  title?: string;
+  subtitle?: string;
+  getStarted?: string;
+  learnMore?: string;
+  features?: Array<{
+    title: string;
+    description: string;
+  }>;
+  copyright?: {
+    prefix?: string;
+    linkText?: string;
+    suffix?: string;
+  };
+
+  // 元数据
+  metadata?: {
+    version?: string;
+    lastModified?: string;
+    author?: string;
+    migrated?: boolean; // 标记是否已从固定结构迁移到动态结构
+  };
+}
+
 // ID 生成函数
 export function generateUniqueId(prefix: IdPrefix): string {
   const timestamp = Date.now();
@@ -55,7 +101,7 @@ export function createDefaultComponent(
     },
     button: {
       text: content || 'New Button',
-      variant: 'primary',
+      variant: 'solid',
       action: 'link',
       url: '#',
     },
@@ -321,6 +367,244 @@ export function validateMigratedData(data: AboutTranslationData): {
   };
 }
 
+// === 主页数据迁移功能 ===
+
+// 检查主页数据是否为新的动态格式
+export function isHomeDynamicFormat(data: HomeTranslationData): boolean {
+  return Boolean(data && data.sections && data.sections.length > 0);
+}
+
+// 检查主页数据是否为旧的固定格式
+export function isHomeLegacyFormat(data: HomeTranslationData): boolean {
+  return Boolean(
+    !data.sections &&
+      (data.title ||
+        data.subtitle ||
+        data.getStarted ||
+        data.learnMore ||
+        data.features)
+  );
+}
+
+// 从主页固定结构迁移到动态组件结构
+export function migrateHomeLegacyToSections(
+  legacy: LegacyHomeData
+): PageContent {
+  const sections: PageSection[] = [];
+
+  // 标题和副标题段落
+  if (legacy.title || legacy.subtitle) {
+    const titleComponents: ComponentInstance[] = [];
+
+    if (legacy.title) {
+      titleComponents.push(createDefaultComponent('heading', legacy.title));
+      titleComponents[titleComponents.length - 1].props.level = 1;
+      titleComponents[titleComponents.length - 1].props.textAlign = 'center';
+    }
+
+    if (legacy.subtitle) {
+      titleComponents.push(
+        createDefaultComponent('paragraph', legacy.subtitle)
+      );
+      titleComponents[titleComponents.length - 1].props.textAlign = 'center';
+    }
+
+    if (titleComponents.length > 0) {
+      sections.push({
+        id: generateUniqueId('section'),
+        layout: 'single-column',
+        columns: [titleComponents],
+      });
+    }
+  }
+
+  // 特性卡片段落
+  if (legacy.features && legacy.features.length > 0) {
+    const cardsComponent = createDefaultComponent('cards');
+    cardsComponent.props = {
+      layout: 'grid',
+      items: legacy.features,
+    };
+
+    sections.push({
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [[cardsComponent]],
+    });
+  }
+
+  // 双按钮段落
+  if (legacy.getStarted || legacy.learnMore) {
+    const buttonComponent = createDefaultComponent(
+      'button',
+      legacy.getStarted || 'Get Started'
+    );
+
+    // 如果有两个按钮，使用双按钮功能
+    if (legacy.getStarted && legacy.learnMore) {
+      buttonComponent.props = {
+        text: legacy.getStarted,
+        variant: 'solid',
+        action: 'link',
+        url: '/chat',
+        secondaryButton: {
+          text: legacy.learnMore,
+          variant: 'outline',
+          action: 'link',
+          url: '/about',
+        },
+      };
+    } else {
+      // 单按钮
+      buttonComponent.props = {
+        text: legacy.getStarted || legacy.learnMore,
+        variant: 'solid',
+        action: 'link',
+        url: legacy.getStarted ? '/chat' : '/about',
+      };
+    }
+
+    sections.push({
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [[buttonComponent]],
+    });
+  }
+
+  // 版权段落
+  if (legacy.copyright) {
+    const copyrightText = [
+      legacy.copyright.prefix?.replace(
+        '{year}',
+        new Date().getFullYear().toString()
+      ) || '',
+      legacy.copyright.linkText || '',
+      legacy.copyright.suffix || '',
+    ].join('');
+
+    if (copyrightText.trim()) {
+      const copyrightComponent = createDefaultComponent(
+        'paragraph',
+        copyrightText
+      );
+      copyrightComponent.props.textAlign = 'center';
+
+      sections.push({
+        id: generateUniqueId('section'),
+        layout: 'single-column',
+        columns: [[copyrightComponent]],
+      });
+    }
+  }
+
+  return {
+    sections,
+    metadata: {
+      version: '1.0.0',
+      lastModified: new Date().toISOString(),
+      author: 'system-migration',
+    },
+  };
+}
+
+// 迁移完整的主页翻译数据
+export function migrateHomeTranslationData(
+  legacy: HomeTranslationData
+): HomeTranslationData {
+  // 如果已经是动态格式，直接返回
+  if (legacy.sections && legacy.sections.length > 0) {
+    return legacy;
+  }
+
+  // 迁移固定结构到动态结构
+  const pageContent = migrateHomeLegacyToSections(legacy);
+
+  return {
+    sections: pageContent.sections,
+    metadata: {
+      ...legacy.metadata,
+      ...pageContent.metadata,
+      migrated: true,
+    },
+  };
+}
+
+// 批量迁移主页多语言数据
+export function batchMigrateHomeTranslations(
+  translations: Record<string, HomeTranslationData>
+): Record<string, HomeTranslationData> {
+  const migratedTranslations: Record<string, HomeTranslationData> = {};
+
+  for (const [locale, data] of Object.entries(translations)) {
+    migratedTranslations[locale] = migrateHomeTranslationData(data);
+  }
+
+  return migratedTranslations;
+}
+
+// 验证主页迁移后的数据完整性
+export function validateHomeMigratedData(data: HomeTranslationData): {
+  isValid: boolean;
+  errors: string[];
+} {
+  const errors: string[] = [];
+
+  // 检查是否有sections
+  if (!data.sections || data.sections.length === 0) {
+    errors.push('迁移后的主页数据缺少sections');
+  }
+
+  // 检查每个section的完整性
+  data.sections?.forEach((section: PageSection, index: number) => {
+    if (!section.id) {
+      errors.push(`主页 Section ${index} 缺少ID`);
+    }
+
+    if (!section.layout) {
+      errors.push(`主页 Section ${index} 缺少布局配置`);
+    }
+
+    if (!section.columns || !Array.isArray(section.columns)) {
+      errors.push(`主页 Section ${index} 缺少或无效的columns`);
+    }
+
+    // 检查组件完整性
+    section.columns?.forEach(
+      (column: ComponentInstance[], columnIndex: number) => {
+        if (!Array.isArray(column)) {
+          errors.push(`主页 Section ${index}, Column ${columnIndex} 不是数组`);
+          return;
+        }
+
+        column.forEach((component, componentIndex) => {
+          if (!component.id) {
+            errors.push(
+              `主页 Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少ID`
+            );
+          }
+
+          if (!component.type) {
+            errors.push(
+              `主页 Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少类型`
+            );
+          }
+
+          if (!component.props) {
+            errors.push(
+              `主页 Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少props`
+            );
+          }
+        });
+      }
+    );
+  });
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}
+
 // 创建备份数据
 export function createBackupData(data: AboutTranslationData): {
   data: AboutTranslationData;
@@ -333,3 +617,16 @@ export function createBackupData(data: AboutTranslationData): {
     version: '1.0.0',
   };
 }
+
+// 创建主页备份数据
+export function createHomeBackupData(data: HomeTranslationData): {
+  data: HomeTranslationData;
+  timestamp: string;
+  version: string;
+} {
+  return {
+    data: JSON.parse(JSON.stringify(data)), // 深拷贝
+    timestamp: new Date().toISOString(),
+    version: '1.0.0',
+  };
+}
diff --git a/messages/de-DE.json b/messages/de-DE.json
index 510f222e..982f8c9e 100644
--- a/messages/de-DE.json
+++ b/messages/de-DE.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Entdecken Sie die unendlichen Möglichkeiten der KI und schaffen Sie intelligente neue Erfahrungen",
-      "getStarted": "Loslegen",
-      "learnMore": "Mehr erfahren",
-      "features": [
+      "sections": [
         {
-          "title": "Integration großer Modelle",
-          "description": "Unterstützung für mehrere Modellanbieter wie OpenAI, Anthropic, Dify usw., um verschiedene Unternehmensanforderungen zu erfüllen"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Entdecken Sie die unendlichen Möglichkeiten der KI und schaffen Sie intelligente neue Erfahrungen",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG-Wissenserweiterung",
-          "description": "Integration der Retrieval-Augmented Generation (RAG) Technologie für private Wissensdatenbanken und Kontextbewusstsein"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Integration großer Modelle",
+                      "description": "Unterstützung für mehrere Modellanbieter wie OpenAI, Anthropic, Dify usw., um verschiedene Unternehmensanforderungen zu erfüllen"
+                    },
+                    {
+                      "title": "RAG-Wissenserweiterung",
+                      "description": "Integration der Retrieval-Augmented Generation (RAG) Technologie für private Wissensdatenbanken und Kontextbewusstsein"
+                    },
+                    {
+                      "title": "Unternehmensbereitstellung",
+                      "description": "Unterstützung für private Bereitstellung, Gewährleistung der Datensicherheit, Bereitstellung stabiler und zuverlässiger Dienste basierend auf Dify-Backend"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Unternehmensbereitstellung",
-          "description": "Unterstützung für private Bereitstellung, Gewährleistung der Datensicherheit, Bereitstellung stabiler und zuverlässiger Dienste basierend auf Dify-Backend"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Loslegen",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Mehr erfahren",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Entdecken Sie die unendlichen Möglichkeiten der KI.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Entdecken Sie die unendlichen Möglichkeiten der KI."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "de-DE"
       }
     },
     "chat": {
diff --git a/messages/en-US.json b/messages/en-US.json
index 7aaa9d79..7f3448e9 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -45,28 +45,110 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explore the infinite possibilities of AI and create intelligent new experiences",
-      "getStarted": "Get Started",
-      "learnMore": "Learn More",
-      "features": [
+      "sections": [
+        {
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Explore the infinite possibilities of AI and create intelligent new experiences",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
         {
-          "title": "Large Model Integration",
-          "description": "Support for multiple model providers including OpenAI, Anthropic, Dify, etc., meeting different enterprise needs"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Large Model Integration",
+                      "description": "Support for multiple model providers including OpenAI, Anthropic, Dify, etc., meeting different enterprise needs"
+                    },
+                    {
+                      "title": "RAG Knowledge Enhancement",
+                      "description": "Integrate Retrieval-Augmented Generation (RAG) technology to enable private knowledge bases and context awareness"
+                    },
+                    {
+                      "title": "Enterprise Deployment",
+                      "description": "Support for private deployment, ensuring data security, providing stable and reliable services based on Dify backend"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG Knowledge Enhancement",
-          "description": "Integrate Retrieval-Augmented Generation (RAG) technology to enable private knowledge bases and context awareness"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Get Started",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Learn More",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Enterprise Deployment",
-          "description": "Support for private deployment, ensuring data security, providing stable and reliable services based on Dify backend"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explore the infinite possibilities of AI.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore the infinite possibilities of AI."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "en-US"
       }
     },
     "chat": {
diff --git a/messages/en-US.json.backup b/messages/en-US.json.backup
new file mode 100644
index 00000000..7aaa9d79
--- /dev/null
+++ b/messages/en-US.json.backup
@@ -0,0 +1,2500 @@
+{
+  "common": {
+    "ui": {
+      "cancel": "Cancel",
+      "back": "Back",
+      "loading": "Loading...",
+      "retry": "Retry",
+      "remove": "Remove",
+      "error": "Error",
+      "download": "Download",
+      "copy": "Copy",
+      "copied": "Copied!",
+      "open": "Open",
+      "dismiss": "Dismiss",
+      "customSelect": {
+        "placeholder": "Please select..."
+      },
+      "exportButton": {
+        "tooltip": "Export file",
+        "ariaLabel": "Export file"
+      },
+      "logoutDialog": {
+        "title": "Logout",
+        "message": "Are you sure you want to logout? You will need to log in again to access your account.",
+        "confirm": "Logout",
+        "cancel": "Cancel",
+        "loggingOut": "Logging out..."
+      },
+      "moreButton": {
+        "ariaLabel": "More options"
+      }
+    },
+    "time": {
+      "notRecorded": "Not recorded",
+      "invalidDate": "Invalid date",
+      "formatError": "Format error",
+      "greeting": {
+        "morning": "Good morning",
+        "afternoon": "Good afternoon",
+        "evening": "Good evening",
+        "night": "It's getting late",
+        "default": "Hello"
+      }
+    }
+  },
+  "pages": {
+    "home": {
+      "title": "AgentifUI",
+      "subtitle": "Explore the infinite possibilities of AI and create intelligent new experiences",
+      "getStarted": "Get Started",
+      "learnMore": "Learn More",
+      "features": [
+        {
+          "title": "Large Model Integration",
+          "description": "Support for multiple model providers including OpenAI, Anthropic, Dify, etc., meeting different enterprise needs"
+        },
+        {
+          "title": "RAG Knowledge Enhancement",
+          "description": "Integrate Retrieval-Augmented Generation (RAG) technology to enable private knowledge bases and context awareness"
+        },
+        {
+          "title": "Enterprise Deployment",
+          "description": "Support for private deployment, ensuring data security, providing stable and reliable services based on Dify backend"
+        }
+      ],
+      "copyright": {
+        "prefix": "© {year} ",
+        "linkText": "AgentifUI",
+        "suffix": ". Explore the infinite possibilities of AI."
+      }
+    },
+    "chat": {
+      "newChat": "New Chat",
+      "sendMessage": "Send",
+      "inputPlaceholder": "Type your message...",
+      "noMessages": "No messages yet",
+      "typing": "Typing...",
+      "recentChats": "Recent Chats",
+      "historyChats": "Chat History",
+      "input": {
+        "placeholder": "Type your message...",
+        "sendMessage": "Send message",
+        "stopGeneration": "Stop generation",
+        "attachFile": "Attach file",
+        "selectModel": "Select model",
+        "noModelAvailable": "No models available",
+        "pleaseSelectModel": "Please select a model",
+        "sending": "Sending...",
+        "uploading": "Uploading...",
+        "uploadFailed": "Upload failed",
+        "retryUpload": "Retry upload",
+        "removeFile": "Remove file",
+        "fileUploadError": "File upload error",
+        "messageSendFailed": "Message send failed",
+        "unknownError": "Unknown error",
+        "validatingConfig": "Validating app configuration...",
+        "cannotSubmit": "Cannot submit",
+        "addAttachment": "Add attachment",
+        "retryUploadTooltip": "Retry upload",
+        "removeAttachment": "Remove attachment",
+        "scrollToBottom": "Scroll to bottom"
+      },
+      "fileUpload": {
+        "selectFileType": "Select file type",
+        "image": "Image",
+        "document": "Document",
+        "audio": "Audio",
+        "video": "Video",
+        "custom": "Custom",
+        "uploadProgress": "Upload progress",
+        "uploadComplete": "Upload complete",
+        "uploadError": "Upload error",
+        "fileTooLarge": "File too large",
+        "unsupportedFormat": "Unsupported file format"
+      },
+      "fileTypeSelector": {
+        "ariaLabel": "Add attachment",
+        "notSupported": "This app does not support file uploads",
+        "noLimit": "File upload limit is 0",
+        "noTypesConfigured": "No supported file types configured",
+        "maxFilesReached": "Maximum file limit reached ({maxFiles})",
+        "addAttachment": "Add attachment ({currentFiles}/{maxFiles})",
+        "loading": "Loading...",
+        "loadError": "Failed to load file types",
+        "reachedLimit": "Limit reached ({currentFiles}/{maxFiles})",
+        "maxUpload": "Upload up to {maxFiles} files",
+        "noUploadLimit": "No upload limit"
+      },
+      "modelSelector": {
+        "noModelsAvailable": "No models available",
+        "selectModel": "Select model",
+        "appNotFound": "App not found: {appId}"
+      },
+      "messages": {
+        "assistant": "Assistant",
+        "user": "You",
+        "thinking": "Thinking...",
+        "stopped": "Stopped",
+        "completed": "Completed",
+        "copyMessage": "Copy message",
+        "editMessage": "Edit message",
+        "deleteMessage": "Delete message",
+        "regenerate": "Regenerate",
+        "feedback": "Feedback",
+        "like": "Like",
+        "dislike": "Dislike",
+        "copied": "Copied",
+        "copyFailed": "Copy failed",
+        "imageLink": "Image link",
+        "viewImage": "View image",
+        "clickToView": "Click to view",
+        "clickToViewWithAlt": "Click to view: {alt}"
+      },
+      "suggestedQuestions": {
+        "moreQuestions": "{count} more questions..."
+      }
+    },
+    "chatflow": {
+      "loading": {
+        "inputConfig": "Loading input configuration..."
+      },
+      "form": {
+        "question": {
+          "label": "Your Question or Request",
+          "placeholder": "Please describe your question or request in detail...",
+          "required": "Please enter your question or request",
+          "tooLong": "Question description cannot exceed {maxLength} characters"
+        },
+        "additionalInfo": "Additional Information",
+        "reset": "Reset Form",
+        "processing": "Processing...",
+        "startConversation": "Start Conversation",
+        "checkAndCorrectErrors": "Please check and correct the errors marked in the form",
+        "defaultAppName": "AI Chat",
+        "defaultDescription": "Please enter your question to start an intelligent conversation"
+      },
+      "floatingController": {
+        "showTracker": "Show Node Tracker",
+        "hideTracker": "Hide Node Tracker"
+      },
+      "nodeTracker": {
+        "title": "Node Execution Progress",
+        "starting": "Starting Chatflow",
+        "noRecords": "No node execution records",
+        "waitingUpdate": "Waiting for node status update...",
+        "showProgress": "Node execution progress will be shown after starting conversation",
+        "executionError": "Execution Error:"
+      },
+      "executionBar": {
+        "status": {
+          "iterating": "Iterating",
+          "iterationCompleted": "Iteration Complete",
+          "iterationFailed": "Iteration Failed",
+          "waitingIteration": "Waiting Iteration",
+          "looping": "Looping",
+          "loopCompleted": "Loop Complete",
+          "loopFailed": "Loop Failed",
+          "waitingLoop": "Waiting Loop",
+          "executing": "Executing",
+          "completed": "Completed",
+          "failed": "Failed",
+          "waiting": "Waiting",
+          "unknown": "Unknown",
+          "executing_": "Executing..."
+        },
+        "nodeTypes": {
+          "start": "Start Node",
+          "llm": "LLM Inference",
+          "knowledgeRetrieval": "Knowledge Retrieval",
+          "questionClassifier": "Question Classifier",
+          "ifElse": "Conditional Branch",
+          "code": "Code Execution",
+          "templateTransform": "Template Transform",
+          "variableAssigner": "Variable Assigner",
+          "variableAggregator": "Variable Aggregator",
+          "documentExtractor": "Document Extractor",
+          "parameterExtractor": "Parameter Extractor",
+          "httpRequest": "HTTP Request",
+          "listOperator": "List Operator",
+          "iteration": "Loop Iteration",
+          "end": "End Node",
+          "node": "Node"
+        },
+        "progressType": {
+          "iteration": "Iteration Progress",
+          "branch": "Branch Progress"
+        },
+        "branch": {
+          "label": "Branch"
+        }
+      }
+    },
+    "workflow": {
+      "form": {
+        "inputPlaceholder": "Please enter {label}",
+        "selectPlaceholder": "Please select {label}",
+        "rangeHint": "Range: {min} - {max}",
+        "minValueHint": "Minimum value: {min}",
+        "maxValueHint": "Maximum value: {max}",
+        "stepHint": "Step: {step}",
+        "precisionHint": "Decimal places: {precision}",
+        "defaultLabel": "Input text",
+        "loading": "Loading form configuration...",
+        "noFormConfig": "This app has no input form configured",
+        "reset": "Reset form",
+        "executing": "Executing...",
+        "startExecution": "Start execution",
+        "errors": {
+          "instanceNotFound": "Service instance with instanceId {instanceId} not found"
+        },
+        "validation": {
+          "required": "{label} is required",
+          "invalidNumber": "{label} must be a valid number",
+          "minValue": "{label} cannot be less than {min}",
+          "maxValue": "{label} cannot be greater than {max}",
+          "stepValue": "{label} must be a multiple of {step}",
+          "precisionExceeded": "{label} decimal places cannot exceed {precision} digits",
+          "maxLengthExceeded": "{label} length cannot exceed {maxLength} characters",
+          "invalidSelection": "Invalid value selected for {label}",
+          "tooManyFiles": "{label} file count cannot exceed {maxFiles}",
+          "fileTooLarge": "File \"{fileName}\" in {label} exceeds {maxSize}MB",
+          "unsupportedFileType": "File \"{fileName}\" in {label} is not supported, supported types: {allowedTypes}"
+        }
+      },
+      "status": {
+        "running": "Workflow executing",
+        "completed": "Execution completed",
+        "failed": "Execution failed",
+        "stopped": "Execution stopped",
+        "pending": "Waiting for execution",
+        "unknown": "Unknown",
+        "totalTime": "Total time: {time}s"
+      },
+      "nodeStatus": {
+        "iterating": "Iterating...",
+        "iterationCompleted": "Iteration completed",
+        "iterationFailed": "Iteration failed",
+        "waitingIteration": "Waiting for iteration",
+        "looping": "Looping",
+        "loopCompleted": "Loop completed",
+        "loopFailed": "Loop failed",
+        "waitingLoop": "Waiting for loop",
+        "parallelRunning": "Parallel executing...",
+        "parallelCompleted": "Parallel completed",
+        "parallelFailed": "Parallel failed",
+        "waitingParallel": "Waiting for parallel execution",
+        "executing": "Executing...",
+        "nodeCompleted": "Execution completed",
+        "nodeFailed": "Execution failed",
+        "nodePending": "Waiting for execution",
+        "nodeUnknown": "Unknown status"
+      },
+      "nodeTypes": {
+        "start": "Start Node",
+        "llm": "LLM Inference",
+        "knowledgeRetrieval": "Knowledge Retrieval",
+        "questionClassifier": "Question Classifier",
+        "ifElse": "Conditional Branch",
+        "code": "Code Execution",
+        "templateTransform": "Template Transform",
+        "variableAssigner": "Variable Assigner",
+        "variableAggregator": "Variable Aggregator",
+        "documentExtractor": "Document Extractor",
+        "parameterExtractor": "Parameter Extractor",
+        "httpRequest": "HTTP Request",
+        "listOperator": "List Operator",
+        "iteration": "Loop Iteration",
+        "parallel": "Parallel Branch",
+        "end": "End Node"
+      },
+      "iterationDetails": {
+        "roundIteration": "Round {round} Iteration",
+        "roundLoop": "Round {round} Loop",
+        "nodeNumber": "Node {number}"
+      },
+      "buttons": {
+        "retry": "Retry",
+        "close": "Close",
+        "copy": "Copy result",
+        "copied": "Copied",
+        "download": "Download result",
+        "retryUpload": "Retry upload",
+        "removeFile": "Remove file",
+        "viewResult": "View result",
+        "stop": "Stop",
+        "reset": "Reset"
+      },
+      "history": {
+        "showHistory": "View history",
+        "hideHistory": "Close history",
+        "noDetailData": "This execution record has no detailed result data, but you can view basic information",
+        "title": "Execution History",
+        "selected": "{count} selected",
+        "batchDelete": "Batch delete",
+        "deleteSelected": "Delete selected {count} items",
+        "cancelSelection": "Cancel selection",
+        "loading": "Loading execution history...",
+        "noRecords": "No execution records",
+        "getDetailFailed": "Failed to get execution details",
+        "unknownError": "Unknown error",
+        "userNotLoggedIn": "User not logged in"
+      },
+      "fileUpload": {
+        "uploading": "Uploading file...",
+        "dropOrClick": "Drag files here or click to upload",
+        "uploadFailed": "Upload failed",
+        "supportAllTypes": "Support uploading various file types",
+        "supportTypes": "Support uploading: {types}",
+        "fileTypes": {
+          "image": "Image",
+          "document": "Document",
+          "audio": "Audio",
+          "video": "Video",
+          "custom": "Other files"
+        },
+        "uploaded": "Uploaded",
+        "maxFiles": "Upload up to {maxFiles} files ({remaining} remaining)",
+        "maxFileSize": "Maximum file size {size}MB",
+        "maxFilesReached": "Maximum file limit reached ({current}/{max})",
+        "selectedFiles": "Selected files"
+      },
+      "tabs": {
+        "inputForm": "Input Form",
+        "executionStatus": "Execution Status",
+        "history": "History"
+      },
+      "resultViewer": {
+        "title": "Workflow Execution Result",
+        "noData": "No result data",
+        "copy": "Copy result",
+        "copied": "Copied",
+        "download": "Download result"
+      }
+    },
+    "textGeneration": {
+      "status": {
+        "generating": "Generating text...",
+        "completed": "Generation completed",
+        "failed": "Generation failed",
+        "stopped": "Stopped",
+        "waiting": "Waiting to generate",
+        "result": "Generation result"
+      },
+      "progress": "Progress: {percent}%",
+      "buttons": {
+        "copy": "Copy text",
+        "copied": "Copied",
+        "download": "Download text",
+        "stop": "Stop",
+        "retry": "Retry",
+        "reset": "Reset",
+        "close": "Close"
+      },
+      "emptyState": {
+        "title": "Waiting to generate text",
+        "description": "Fill out the form on the left and click the execute button to start text generation"
+      },
+      "placeholder": {
+        "generating": "Generating text...",
+        "result": "Generated text will be displayed here"
+      },
+      "loadingState": {
+        "title": "Generating Text",
+        "description": "Please wait, generating content for you..."
+      },
+      "streamingIndicator": "Generating",
+      "stats": {
+        "characters": "Characters: {count}",
+        "words": "Words: {count}",
+        "tokensUsed": "Tokens used: {count}"
+      }
+    },
+    "apps": {
+      "startChatWith": "Start chatting with {appName}...",
+      "continueChatWith": "Continue chatting with {appName}...",
+      "defaultApp": "App",
+      "loadFailed": "App failed to load",
+      "backToMarket": "Back to App Market",
+      "loading": {
+        "app": "Loading app...",
+        "validating": "Validating app configuration...",
+        "default": "Loading..."
+      },
+      "errors": {
+        "appNotFound": "App not found",
+        "initializationFailed": "Initialization failed",
+        "appLoadFailed": "App failed to load"
+      },
+      "status": {
+        "loadingApp": "Loading app...",
+        "validatingConfig": "Validating app configuration...",
+        "loading": "Loading..."
+      },
+      "buttons": {
+        "backToMarket": "Back to App Market"
+      },
+      "market": {
+        "categories": {
+          "all": "All",
+          "favorite": "Popular",
+          "writing": "Writing",
+          "translation": "Translation",
+          "programming": "Programming",
+          "codeGeneration": "Code Generation",
+          "analysis": "Analysis",
+          "summary": "Summary",
+          "conversation": "Conversation",
+          "assistant": "Assistant",
+          "textGeneration": "Text Generation",
+          "document": "Document",
+          "dataAnalysis": "Data Analysis",
+          "development": "Development",
+          "generation": "Generation",
+          "conversationModel": "Conversation Model",
+          "reasoningModel": "Reasoning Model",
+          "documentModel": "Document Model",
+          "multimodal": "Multimodal",
+          "highPrecision": "High Precision",
+          "fastResponse": "Fast",
+          "localDeployment": "Local",
+          "enterprise": "Enterprise",
+          "private": "Private",
+          "tools": "Tools",
+          "general": "General",
+          "professional": "Professional"
+        },
+        "search": {
+          "placeholder": "Search apps..."
+        },
+        "tryAdjustSearch": "Try adjusting search criteria or browse other categories",
+        "viewMode": {
+          "grid": "Grid",
+          "list": "List"
+        },
+        "appCard": {
+          "noDescription": "No description",
+          "defaultType": "App"
+        },
+        "header": {
+          "title": "App Market",
+          "totalApps": "{count} apps in total",
+          "categoryApps": "{category} · {count} apps",
+          "totalLabel": "{count} total"
+        },
+        "categoryKeys": {
+          "all": "All",
+          "commonApps": "Popular Apps"
+        },
+        "unknownAppType": "Unknown Dify app type",
+        "useDefaultRoute": "Use default route",
+        "routeJump": "Route jump",
+        "app": "App",
+        "type": "Type",
+        "path": "Path",
+        "openAppFailed": "Failed to open app"
+      }
+    },
+    "auth": {
+      "login": {
+        "title": "Login",
+        "subtitle": "Welcome to Intelligent Assistant",
+        "emailLabel": "Email",
+        "passwordLabel": "Password",
+        "emailPlaceholder": "your@email.com",
+        "passwordPlaceholder": "••••••••",
+        "loginButton": "Login",
+        "forgotPasswordLink": "Forgot password?",
+        "phoneLoginLink": "📱 Login with phone verification",
+        "noAccountText": "Don't have an account?",
+        "registerLink": "Sign up now",
+        "showPassword": "Show password",
+        "hidePassword": "Hide password",
+        "orSeparator": "Login with email and password",
+        "orSeparatorSso": "Or use email and password",
+        "alerts": {
+          "registered": "Registration successful! Please check your email to verify your account, then login.",
+          "resetSuccess": "Password reset successful! Please login with your new password."
+        },
+        "errors": {
+          "oauthFailed": "OAuth login failed, please try again or use other login methods",
+          "ssoCallbackFailed": "SSO authentication callback failed, please try to login again",
+          "ticketValidationFailed": "SSO ticket validation failed, please login again",
+          "invalidEmployeeNumber": "Employee number format is incorrect, please contact administrator",
+          "userCreationFailed": "Account creation failed, this may be due to inconsistent account data. Please try to login again, if the problem persists, please contact administrator",
+          "accountDataInconsistent": "Account data is inconsistent, system is trying to automatically repair. Please wait a moment and login again",
+          "profileCreationFailed": "User profile creation failed, please contact administrator for assistance",
+          "ssoProviderNotFound": "SSO service configuration error, please contact administrator",
+          "missingTicket": "Authentication parameters missing, please login again",
+          "default": "An error occurred during login, please try again later",
+          "loginFailed": "Login failed, please check your email and password"
+        }
+      },
+      "register": {
+        "title": "Register",
+        "subtitle": "Join AgentifUI and start your AI journey",
+        "nameLabel": "Full Name",
+        "usernameLabel": "Username",
+        "usernameOptional": "(optional)",
+        "emailLabel": "Email",
+        "passwordLabel": "Password",
+        "confirmPasswordLabel": "Confirm Password",
+        "namePlaceholder": "Enter your full name",
+        "usernamePlaceholder": "Choose a username",
+        "emailPlaceholder": "your@email.com",
+        "passwordPlaceholder": "••••••••",
+        "createAccountButton": "Create Account",
+        "phoneLoginLink": "📱 Login with phone verification",
+        "hasAccountText": "Already have an account?",
+        "loginLink": "Sign in now",
+        "showPassword": "Show password",
+        "hidePassword": "Hide password",
+        "showConfirmPassword": "Show confirm password",
+        "hideConfirmPassword": "Hide confirm password",
+        "orSeparator": "Or use email and password",
+        "errors": {
+          "nameRequired": "Please enter your full name",
+          "emailRequired": "Please enter email address",
+          "passwordTooShort": "Password must be at least 6 characters",
+          "passwordMismatch": "Passwords do not match",
+          "usernameInvalid": "Username can only contain letters, numbers, underscores and hyphens, 2-20 characters long",
+          "emailExists": "This email is already registered, please use a different email or login directly",
+          "passwordWeak": "Password is not strong enough, please use a more complex password",
+          "emailInvalid": "Email format is incorrect, please check and try again",
+          "registerFailed": "Registration failed, please try again later"
+        }
+      },
+      "phoneLoginPage": {
+        "title": "AgentifUI",
+        "subtitle": "Intelligent conversation at your fingertips",
+        "orSeparator": "Or",
+        "emailLoginLink": "Login with email and password",
+        "registerLink": "Don't have an account? Sign up now",
+        "termsText": "By logging in, you agree to our",
+        "termsLink": "Terms of Service",
+        "privacyLink": "Privacy Policy",
+        "andText": "and"
+      },
+      "ssoProcessing": {
+        "title": "SSO Login",
+        "loading": "Loading..."
+      },
+      "forgotPassword": {
+        "title": "Forgot Password",
+        "subtitle": "Enter your email address and we'll send you a password reset link",
+        "emailLabel": "Email Address",
+        "emailPlaceholder": "your@email.com",
+        "sendButton": "Send Reset Link",
+        "sendingButton": "Sending...",
+        "backToLogin": "Back to Login",
+        "success": {
+          "title": "Email Sent",
+          "message": "We've sent a password reset link to {email}",
+          "instructions": "Please check your email (including spam folder) and click the link to reset your password.",
+          "noEmail": "If you don't receive the email, please check if the email address is correct or try again later."
+        },
+        "errors": {
+          "emailRequired": "Please enter a valid email address",
+          "rateLimited": "Too many requests, please try again later",
+          "sendFailed": "Failed to send, please try again later"
+        }
+      },
+      "resetPassword": {
+        "title": "Reset Password",
+        "subtitle": "Please enter your new password",
+        "verifying": "Verifying",
+        "verifyingSubtitle": "Verifying reset link...",
+        "invalidTitle": "Invalid Link",
+        "invalidSubtitle": "Password reset link has expired or is invalid",
+        "successTitle": "Password Reset Successful",
+        "successSubtitle": "Your password has been successfully reset",
+        "passwordLabel": "New Password",
+        "confirmPasswordLabel": "Confirm Password",
+        "passwordPlaceholder": "Enter new password",
+        "confirmPasswordPlaceholder": "Enter new password again",
+        "resetButton": "Reset Password",
+        "resettingButton": "Resetting...",
+        "showPassword": "Show new password",
+        "hidePassword": "Hide new password",
+        "showConfirmPassword": "Show confirm password",
+        "hideConfirmPassword": "Hide confirm password",
+        "passwordHint": "Password must contain uppercase and lowercase letters, numbers, at least 8 characters",
+        "backToLogin": "Go to Login",
+        "retryReset": "Request password reset again",
+        "successMessage": "You can now login to your account with the new password.",
+        "errors": {
+          "passwordRequired": "Please enter new password",
+          "passwordTooShort": "Password must be at least 6 characters",
+          "passwordMismatch": "Passwords do not match",
+          "passwordWeak": "Password is not strong enough, please use a more complex password",
+          "sessionExpired": "Session has expired, please request password reset again",
+          "resetFailed": "Password reset failed, please try again later",
+          "linkInvalid": "Reset link verification failed",
+          "linkExpired": "Reset link is invalid or expired, please request password reset again",
+          "verifyFailed": "Verification failed, please request password reset again"
+        }
+      },
+      "phoneLogin": {
+        "title": "Phone Login",
+        "subtitle": "Login using phone number to receive verification code",
+        "otpSubtitle": "Please enter the 6-digit verification code you received",
+        "phoneLabel": "Phone Number",
+        "otpLabel": "Verification Code",
+        "phonePlaceholder": "13812345678",
+        "otpPlaceholder": "Enter 6-digit code",
+        "sendOtpButton": "Send Verification Code",
+        "sendingButton": "Sending...",
+        "verifyButton": "Verify Code",
+        "verifyingButton": "Verifying...",
+        "resendButton": "Resend Verification Code",
+        "changePhoneButton": "Change Phone Number",
+        "otpSentTo": "Verification code sent to +86{phone}",
+        "errors": {
+          "phoneRequired": "Please enter phone number",
+          "phoneInvalid": "Please enter a valid Chinese mainland phone number",
+          "otpRequired": "Please enter verification code",
+          "otpInvalid": "Verification code should be 6 digits",
+          "sendFailed": "Failed to send verification code, please try again later",
+          "verifyFailed": "Verification code is incorrect, please re-enter"
+        },
+        "success": {
+          "otpSent": "Verification code has been sent, please check your SMS",
+          "verifySuccess": "Verification successful! Logging in..."
+        }
+      },
+      "sso": {
+        "title": "Single Sign-On Authentication",
+        "subtitle": "Login with your unified authentication account",
+        "button": "Login with SSO",
+        "simpleButton": "🏛️ Single Sign-On",
+        "jumpingButton": "Redirecting...",
+        "helpText": "Account will be created automatically on first login",
+        "contactText": "Please contact system administrator if you have any questions",
+        "startError": "Failed to start SSO login, please try again later",
+        "noProvider": "No SSO login methods available at the moment",
+        "processing": {
+          "title": "SSO Login",
+          "processing": "Processing SSO login...",
+          "welcome": "Welcome {name}, establishing session...",
+          "verifying": "Verifying identity...",
+          "sessionCheck": "Verifying session...",
+          "success": "Login successful! Redirecting...",
+          "failed": "Login failed",
+          "redirecting": "Will automatically redirect to login page in 3 seconds...",
+          "errors": {
+            "missingParams": "SSO parameters missing or invalid",
+            "userDataNotFound": "SSO user data not found",
+            "sessionExpired": "SSO session expired, please login again",
+            "loginFailed": "SSO login failed",
+            "sessionValidationFailed": "Session validation failed",
+            "noValidSessionData": "Server did not return valid session data",
+            "processingFailed": "SSO processing failed"
+          }
+        }
+      },
+      "social": {
+        "github": {
+          "login": "Login with GitHub",
+          "register": "Register with GitHub",
+          "failed": "GitHub login failed"
+        }
+      }
+    },
+    "settings": {
+      "title": "Settings",
+      "profile": "Profile",
+      "account": "Account",
+      "appearance": "Appearance",
+      "language": "Language",
+      "navigation": {
+        "overview": "Overview",
+        "profileNav": "Profile",
+        "accountNav": "Account",
+        "appearanceNav": "Appearance",
+        "languageNav": "Language"
+      },
+      "descriptions": {
+        "overview": "Manage your personal preferences and customize your app experience",
+        "profileDesc": "Update personal information, avatar and account settings",
+        "accountDesc": "Manage your account security and login information",
+        "appearanceDesc": "Customize themes, colors, interface layout and timezone settings",
+        "languageDesc": "Choose your preferred display language and region settings"
+      },
+      "accountSettings": {
+        "title": "Account Settings",
+        "accountInfo": "Account Information",
+        "loginEmail": "Login Email",
+        "authMethod": "Authentication Method",
+        "emailPasswordAuth": "Email & Password",
+        "securitySettings": "Security Settings",
+        "logoutAccount": "Logout of current account",
+        "confirmLogout": "Are you sure you want to logout?",
+        "confirmLogoutBtn": "Confirm Logout",
+        "logout": "Logout",
+        "loggingOut": "Logging out...",
+        "loadAccountError": "Error loading account information",
+        "retry": "Retry",
+        "deleteAccount": "Delete Account"
+      },
+      "profileSettings": {
+        "title": "Profile",
+        "accountInfo": "Account Information",
+        "registrationTime": "Registration Time",
+        "accountRole": "Account Role",
+        "lastLogin": "Last Login",
+        "editProfile": "Edit Profile",
+        "name": "Name",
+        "nickname": "Username",
+        "profileUpdated": "Profile updated successfully",
+        "updateFailed": "Failed to update profile",
+        "saving": "Saving...",
+        "saveChanges": "Save Changes",
+        "namePlaceholder": "Enter your name",
+        "usernamePlaceholder": "Enter your username",
+        "roles": {
+          "admin": "Administrator",
+          "manager": "Manager",
+          "user": "User"
+        },
+        "status": {
+          "notRecorded": "Not recorded",
+          "notSet": "Not set"
+        },
+        "loadProfileError": "Error loading profile",
+        "avatar": {
+          "defaultUser": "User",
+          "userAvatar": "{userName}'s avatar",
+          "editHover": "Edit",
+          "uploadSuccess": "Avatar uploaded successfully",
+          "deleteSuccess": "Avatar deleted successfully"
+        }
+      },
+      "avatarModal": {
+        "title": "Avatar Settings",
+        "subtitle": "Click to upload or drag image to the area below",
+        "currentAvatar": "Current Avatar",
+        "supportedFormats": "Supports JPEG, JPG, PNG, WebP formats • Max 5MB",
+        "crop": {
+          "zoom": "Zoom",
+          "cancel": "Reselect",
+          "confirm": "Confirm Crop",
+          "uploading": "Uploading..."
+        },
+        "uploadArea": {
+          "uploading": "Uploading...",
+          "changeAvatar": "Click to change avatar",
+          "uploadAvatar": "Click to upload avatar",
+          "uploadProgress": "Upload progress: {progress}%",
+          "dragHint": "Or drag image here"
+        },
+        "buttons": {
+          "deleteAvatar": "Delete Avatar",
+          "complete": "Complete",
+          "uploading": "Uploading...",
+          "cancel": "Cancel",
+          "confirmDelete": "Confirm Delete",
+          "deleting": "Deleting..."
+        },
+        "deleteConfirm": {
+          "title": "Delete Avatar",
+          "message": "Are you sure you want to delete the current avatar? This action cannot be undone."
+        },
+        "status": {
+          "success": "Operation completed successfully"
+        },
+        "errors": {
+          "unsupportedType": "Unsupported file type. Please select JPEG, JPG, PNG or WebP format images.",
+          "fileTooLarge": "File too large. Please select images smaller than 5MB.",
+          "userNotLoggedIn": "User not logged in",
+          "uploadFailed": "Upload failed",
+          "deleteFailed": "Delete failed"
+        }
+      },
+      "avatarUpload": {
+        "errors": {
+          "unsupportedFileType": "Unsupported file type. Supported formats: {types}",
+          "fileTooLarge": "File too large. Maximum supported {maxSize}MB",
+          "uploadFailed": "Upload failed: {message}",
+          "getUrlFailed": "Failed to get avatar URL",
+          "updateDatabaseFailed": "Failed to update database: {message}",
+          "deleteFailed": "Delete failed: {message}",
+          "uploadFailedGeneric": "Upload failed",
+          "deleteFailedGeneric": "Delete failed"
+        }
+      },
+      "appearanceSettings": {
+        "title": "Appearance Settings",
+        "theme": "Theme",
+        "themeDescription": "Choose your preferred display mode",
+        "themes": {
+          "light": "Light Mode",
+          "dark": "Dark Mode",
+          "system": "Follow System"
+        },
+        "preview": {
+          "light": "Light",
+          "dark": "Dark",
+          "system": "System"
+        },
+        "timezone": "Timezone Settings",
+        "timezoneDescription": "Select your timezone to affect time display format",
+        "currentTimezone": "Current Timezone",
+        "timezoneRegions": {
+          "asia": "Asia",
+          "europe": "Europe",
+          "america": "Americas",
+          "africa": "Africa",
+          "australia": "Oceania",
+          "utc": "Coordinated Universal Time"
+        },
+        "timezoneCities": {
+          "shanghai": "Shanghai",
+          "beijing": "Beijing",
+          "hongKong": "Hong Kong",
+          "taipei": "Taipei",
+          "tokyo": "Tokyo",
+          "seoul": "Seoul",
+          "singapore": "Singapore",
+          "bangkok": "Bangkok",
+          "dubai": "Dubai",
+          "kolkata": "Kolkata",
+          "london": "London",
+          "paris": "Paris",
+          "berlin": "Berlin",
+          "rome": "Rome",
+          "madrid": "Madrid",
+          "amsterdam": "Amsterdam",
+          "moscow": "Moscow",
+          "newYork": "New York",
+          "losAngeles": "Los Angeles",
+          "chicago": "Chicago",
+          "denver": "Denver",
+          "toronto": "Toronto",
+          "saoPaulo": "São Paulo",
+          "mexicoCity": "Mexico City",
+          "sydney": "Sydney",
+          "melbourne": "Melbourne",
+          "perth": "Perth",
+          "auckland": "Auckland",
+          "cairo": "Cairo",
+          "johannesburg": "Johannesburg",
+          "lagos": "Lagos",
+          "utc": "UTC"
+        },
+        "timezoneSearch": "Search timezone...",
+        "systemTimezone": "System Timezone",
+        "customTimezone": "Custom Timezone",
+        "timezonePreview": "Preview time: {time}",
+        "timezoneUpdated": "Timezone settings updated"
+      },
+      "languageSettings": {
+        "title": "Language Settings",
+        "language": "Language",
+        "languageDescription": "Choose your preferred display language",
+        "currentLanguage": "Current Language",
+        "switchLanguage": "Switch Language"
+      }
+    },
+    "admin": {
+      "title": "Admin Panel",
+      "main": {
+        "title": "Admin Panel Overview",
+        "subtitle": "Welcome to the AgentifUI Admin Panel. Here you can manage various system configurations and settings"
+      },
+      "layout": {
+        "headerTitle": "AgentifUI Admin Panel",
+        "breadcrumbRoot": "Admin Panel",
+        "menuItems": {
+          "main": {
+            "text": "Admin Home",
+            "description": "Admin panel overview"
+          },
+          "apiConfig": {
+            "text": "API Configuration",
+            "description": "Manage application instances and configuration parameters"
+          },
+          "content": {
+            "text": "Content Management",
+            "description": "Manage home and about page content"
+          },
+          "users": {
+            "text": "User Management",
+            "description": "Manage user accounts and permissions"
+          },
+          "ssoProviders": {
+            "text": "SSO Providers Management",
+            "description": "Manage SSO provider configurations"
+          },
+          "groups": {
+            "text": "Group Management",
+            "description": "Manage users and groups, configure group application permissions"
+          },
+          "permissions": {
+            "text": "App Permission Management",
+            "description": "Manage application visibility and group permissions"
+          }
+        },
+        "actions": {
+          "rebuildButton": {
+            "text": "Rebuild",
+            "messages": {
+              "startRebuild": "Starting rebuild and deployment...",
+              "startRebuildDescription": "This process may take a few minutes, please be patient.",
+              "buildInProgress": "Build in progress",
+              "buildInProgressDescription": "Please wait for the current build to complete before trying again.",
+              "authFailed": "Authentication failed",
+              "authFailedDescription": "Please log in again and try.",
+              "permissionDenied": "Permission denied",
+              "permissionDeniedDescription": "You do not have permission to perform this operation.",
+              "unknownError": "Unknown error occurred",
+              "buildComplete": "Build complete!",
+              "buildCompleteDescription": "The application will automatically restart in 2 seconds to apply changes.",
+              "appRestarting": "Application restarting...",
+              "appRestartingDescription": "The page will automatically refresh after restart is complete.",
+              "deployFailed": "Deployment failed",
+              "networkError": "Network error, please check connection and try again."
+            }
+          },
+          "returnToChatButton": {
+            "text": "Return to Chat"
+          }
+        },
+        "common": {
+          "actions": {
+            "refresh": "Refresh Data",
+            "save": "Save Changes",
+            "saving": "Saving...",
+            "reset": "Reset",
+            "create": "Create",
+            "cancel": "Cancel",
+            "confirm": "Confirm"
+          },
+          "status": {
+            "hasUnsavedChanges": "Has unsaved changes",
+            "saving": "Saving...",
+            "allChangesSaved": "All changes saved"
+          }
+        }
+      },
+      "apiConfig": {
+        "emptyState": {
+          "title": "Select Application Instance",
+          "description": "Select an application instance from the left list to view and edit its configuration, or click the add button to create a new application instance"
+        },
+        "formActions": {
+          "save": "Save",
+          "saving": "Saving...",
+          "cancel": "Cancel"
+        },
+        "providerManagement": {
+          "buttonText": "Manage Providers",
+          "modal": {
+            "title": "Manage Service Providers",
+            "providerList": "Provider List",
+            "addProvider": "Add Provider",
+            "editProvider": "Edit Provider",
+            "addNewProvider": "Add New Provider",
+            "loading": "Loading...",
+            "noProviders": "No providers configured",
+            "deleteConfirm": "Are you sure you want to delete provider \"{name}\"? This action cannot be undone.",
+            "messages": {
+              "loadFailed": "Failed to load provider list",
+              "createSuccess": "Provider created successfully",
+              "createFailed": "Failed to create provider",
+              "updateSuccess": "Provider updated successfully",
+              "updateFailed": "Failed to update provider",
+              "deleteSuccess": "Provider deleted successfully",
+              "deleteFailed": "Failed to delete provider",
+              "saveFailed": "Failed to save provider"
+            },
+            "providerTypes": {
+              "llm": "LLM (Large Language Model)",
+              "platform": "Platform (Aggregation Platform)",
+              "embedding": "Embedding (Vectorization)",
+              "tts": "TTS (Text to Speech)",
+              "stt": "STT (Speech to Text)",
+              "vision": "Vision (Image Recognition)",
+              "multimodal": "Multimodal"
+            },
+            "authTypes": {
+              "api_key": "API Key",
+              "bearer_token": "Bearer Token",
+              "oauth2": "OAuth 2.0",
+              "basic_auth": "Basic Auth"
+            },
+            "status": {
+              "enabled": "Enabled",
+              "disabled": "Disabled",
+              "default": "Default Provider"
+            },
+            "form": {
+              "name": {
+                "label": "Provider Name",
+                "placeholder": "e.g.: Dify, OpenAI, Claude",
+                "required": "Provider name cannot be empty"
+              },
+              "type": {
+                "label": "Provider Type",
+                "placeholder": "Select provider type",
+                "required": "Please select provider type"
+              },
+              "baseUrl": {
+                "label": "API URL",
+                "placeholder": "e.g.: https://api.dify.ai/v1",
+                "required": "API URL cannot be empty",
+                "invalid": "Please enter a valid URL format"
+              },
+              "authType": {
+                "label": "Authentication Type",
+                "placeholder": "Select authentication type",
+                "required": "Please select authentication type"
+              },
+              "isActive": {
+                "label": "Enable Status"
+              },
+              "isDefault": {
+                "label": "Default Provider",
+                "description": "Only one default provider can exist in the system. Setting this will automatically clear the default status of other providers.",
+                "setAsDefault": "Set as Default",
+                "notDefault": "Not Default"
+              },
+              "authMethod": "Authentication Method"
+            },
+            "buttons": {
+              "delete": "Delete",
+              "cancel": "Cancel",
+              "save": "Save",
+              "saving": "Saving..."
+            }
+          }
+        },
+        "layout": {
+          "loading": "Loading application instances...",
+          "noInstances": "No application instances",
+          "noInstancesForProvider": "No application instances for this provider",
+          "addFirstApp": "Add first application",
+          "searchPlaceholder": "Search applications...",
+          "defaultApp": "Default",
+          "delete": "Delete",
+          "deleteConfirm": "Are you sure you want to delete this application instance? This action cannot be undone.",
+          "defaultAppCannotDelete": "Default application cannot be deleted. Please set another application as default first.",
+          "instanceNotFound": "Instance to delete not found",
+          "deleteInstanceFailed": "Failed to delete application instance",
+          "setDefaultConfirm": "Are you sure you want to set \"{name}\" as the default application?",
+          "instanceNotFoundForDefault": "Instance to set as default not found",
+          "setDefaultFailed": "Failed to set default application",
+          "setAsDefault": "Set as Default"
+        },
+        "fields": {
+          "apiUrl": "API URL (config.api_url)",
+          "apiKey": "API Key (key_value)",
+          "providerBinding": "Provider Binding",
+          "urlPlaceholder": "URL will automatically use the selected provider's configuration",
+          "urlBindingInfo": "URL is bound to service provider, modify in \"Manage Providers\"",
+          "currentProvider": "Current provider: {name}",
+          "unknownProvider": "Unknown provider",
+          "keyConfigured": "Configured",
+          "keyNotConfigured": "Not configured",
+          "keyPlaceholderEdit": "Leave empty to keep existing API key",
+          "keyPlaceholderNew": "Enter API key",
+          "keyEditHint": "Leaving the input field empty will keep the existing key unchanged",
+          "tagsLabel": "Application Tags (tags)",
+          "tagCategories": {
+            "modelType": "Model Type",
+            "useCase": "Use Case",
+            "features": "Technical Features"
+          },
+          "predefinedTags": {
+            "conversationModel": "Conversation Model",
+            "reasoningModel": "Reasoning Model",
+            "documentModel": "Document Model",
+            "multimodal": "Multimodal",
+            "textGeneration": "Text Generation",
+            "codeGeneration": "Code Generation",
+            "dataAnalysis": "Data Analysis",
+            "translation": "Translation",
+            "highAccuracy": "High Accuracy",
+            "fastResponse": "Fast Response",
+            "localDeployment": "Local Deployment",
+            "enterpriseGrade": "Enterprise Grade"
+          },
+          "customTagPlaceholder": "Custom tag (press Enter to add)",
+          "tagHelpText": "Tags are used for application classification and search"
+        },
+        "providerSelector": {
+          "placeholder": "Please select provider",
+          "defaultLabel": "Default",
+          "noProviders": "No available service providers"
+        },
+        "customProviderSelector": {
+          "placeholder": "Please select provider",
+          "defaultLabel": "Default",
+          "noProviders": "No available service providers"
+        },
+        "instanceFilter": {
+          "allApps": "All Applications",
+          "providerApps": "{name} Applications",
+          "defaultLabel": "Default",
+          "totalCount": "Total {count}",
+          "noProviders": "No available service providers"
+        },
+        "events": {
+          "defaultSetSuccess": "Default application set successfully"
+        },
+        "instanceSaveHandlers": {
+          "errors": {
+            "selectProvider": "Please select a service provider",
+            "invalidProvider": "Selected service provider is invalid",
+            "inactiveProvider": "Selected service provider is not active",
+            "createFailed": "Failed to create application instance",
+            "updateFailed": "Failed to update application instance",
+            "setDefaultFailed": "Failed to set default application"
+          },
+          "success": {
+            "instanceCreated": "Application instance created successfully",
+            "instanceUpdated": "Application instance updated successfully",
+            "setAsDefault": "Application instance set as default"
+          },
+          "warnings": {
+            "createSuccessButDefaultFailed": "Application created successfully, but failed to set as default"
+          }
+        },
+        "difyParametersPanel": {
+          "title": "{instanceName} - Dify Parameter Configuration",
+          "defaultInstanceName": "this app",
+          "unsavedChanges": "You have unsaved changes",
+          "sections": {
+            "basic": {
+              "title": "Basic Configuration",
+              "openingStatement": {
+                "label": "Opening Statement",
+                "placeholder": "Enter opening statement..."
+              },
+              "suggestedQuestions": {
+                "label": "Suggested Questions",
+                "addButton": "Add Suggested Question",
+                "placeholder": "Enter suggested question..."
+              }
+            },
+            "fileUpload": {
+              "title": "File Upload Feature",
+              "enabled": "Enabled",
+              "disabled": "Disabled"
+            },
+            "speechToText": {
+              "title": "Speech to Text",
+              "enabled": "Enabled",
+              "disabled": "Disabled"
+            },
+            "textToSpeech": {
+              "title": "Text to Speech",
+              "enabled": "Enabled",
+              "disabled": "Disabled",
+              "enableLabel": "Enable Text to Speech",
+              "voiceType": {
+                "label": "Voice Type",
+                "placeholder": "e.g.: alloy, echo, fable"
+              },
+              "language": {
+                "label": "Language",
+                "selectPlaceholder": "Select Language",
+                "options": {
+                  "zh": "Chinese",
+                  "en": "English",
+                  "ja": "Japanese",
+                  "ko": "Korean"
+                }
+              },
+              "autoPlay": {
+                "label": "Auto Play",
+                "enabled": "On",
+                "disabled": "Off"
+              }
+            },
+            "retrieverResource": {
+              "title": "Citation and Attribution"
+            },
+            "annotationReply": {
+              "title": "Annotation Reply"
+            },
+            "userInputForm": {
+              "title": "User Input Form",
+              "fieldsCount": "{count} fields",
+              "description": "User input form configuration is usually auto-generated by Dify application. It's recommended to get the latest configuration through sync function.",
+              "fieldInfo": "Variable: {variable} | Required: {required} | Default: {defaultValue}",
+              "fieldRequired": "Yes",
+              "fieldOptional": "No",
+              "fieldNoDefault": "None",
+              "fieldLabel": "Field {index}",
+              "noFields": "No user input form configuration"
+            },
+            "systemParameters": {
+              "title": "System Parameters",
+              "fileSizeLimit": "Document Size Limit (MB)",
+              "imageSizeLimit": "Image Size Limit (MB)",
+              "audioSizeLimit": "Audio Size Limit (MB)",
+              "videoSizeLimit": "Video Size Limit (MB)"
+            }
+          },
+          "fileUploadModal": {
+            "title": "File Upload Configuration",
+            "uploadMethod": {
+              "label": "Upload Method",
+              "local": "Local Upload",
+              "url": "URL Link",
+              "both": "Both Methods"
+            },
+            "maxFiles": {
+              "label": "Maximum File Count",
+              "description": "Documents < 15MB, Images < 10MB, Audio < 50MB, Video < 100MB"
+            },
+            "fileTypes": {
+              "label": "Supported File Types",
+              "image": "Image",
+              "document": "Document",
+              "audio": "Audio",
+              "video": "Video",
+              "other": "Other File Types",
+              "customPlaceholder": "e.g.: zip, rar, 7z, tar",
+              "customDescription": "Supported formats: zip, rar, 7z, tar, gz, bz2, xz, etc."
+            }
+          },
+          "buttons": {
+            "cancel": "Cancel",
+            "save": "Save",
+            "confirm": "Confirm"
+          }
+        },
+        "page": {
+          "title": {
+            "edit": "Edit Application Instance",
+            "add": "Add Application Instance"
+          },
+          "unsavedChanges": "Unsaved changes",
+          "validation": {
+            "instanceId": {
+              "noSpaces": "Cannot contain spaces (affects URL routing)",
+              "invalidChars": "Can only contain letters, numbers, hyphens (-), underscores (_), and dots (.)",
+              "tooLong": "Length cannot exceed 50 characters",
+              "mustStartWithAlphanumeric": "Must start with a letter or number",
+              "formatError": "Application ID format error",
+              "notModifiable": "Application ID cannot be modified after creation",
+              "formatDescription": "Can only contain letters, numbers, hyphens (-), underscores (_), and dots (.). No spaces allowed. You can sync configuration to auto-generate."
+            },
+            "formValidationFailed": "Form validation failed",
+            "fillApiCredentials": "Please fill in API URL and API Key first",
+            "fillInstanceId": "Please fill in Application ID first"
+          },
+          "sync": {
+            "basicInfo": "Basic Information",
+            "paramConfig": "Parameter Configuration",
+            "noDataReceived": "Unable to retrieve any configuration data from Dify API. Please check if Application ID and API configuration are correct",
+            "successMessage": "Successfully synced {items} from Dify API!",
+            "autoGeneratedId": " Auto-generated Application ID: {instanceId}",
+            "syncFailed": "Configuration sync failed",
+            "syncFailedTitle": "Sync Failed",
+            "syncing": "Syncing...",
+            "syncFromDify": "Sync from Dify",
+            "syncFromDifyWithAutoId": "Sync from Dify API (will auto-generate Application ID if empty)",
+            "syncFromDifyDescription": "Sync configuration from Dify API",
+            "syncButtonDisabled": "Please fill in API URL and API Key first"
+          },
+          "defaultApp": {
+            "setAsDefault": "Set as Default",
+            "isDefault": "Default App",
+            "willSetAsDefault": "Will Set as Default",
+            "setDefaultConfirm": "Are you sure you want to set \"{name}\" as the default application?",
+            "setDefaultSuccess": "Default application set successfully",
+            "setDefaultFailed": "Failed to set default application",
+            "instanceNotFound": "Instance ID does not exist, cannot set as default application"
+          },
+          "provider": {
+            "title": "Service Provider",
+            "current": "Current application service provider (cannot be modified)",
+            "select": "Select service provider",
+            "unknown": "Unknown Provider",
+            "selectPlaceholder": "Please select provider",
+            "configUpdated": "Provider configuration updated"
+          },
+          "fields": {
+            "instanceId": {
+              "label": "Application ID (instance_id) *",
+              "placeholder": "Enter Application ID",
+              "generateButton": "Generate ID",
+              "generateTooltip": "Click to generate random UUID as Application ID"
+            },
+            "displayName": {
+              "label": "Display Name (display_name) *",
+              "placeholder": "Enter display name"
+            },
+            "description": {
+              "label": "Application Description (description)",
+              "placeholder": "Enter application description"
+            }
+          },
+          "appType": {
+            "label": "Application Type (app_type) *",
+            "model": {
+              "title": "Model",
+              "description": "For model switching"
+            },
+            "marketplace": {
+              "title": "Marketplace",
+              "description": "For application marketplace"
+            },
+            "note": "Applications with \"Model\" type will appear in the chat interface model selector"
+          },
+          "syncConfirm": {
+            "updateDescription": "Update description to: \"{description}\"?"
+          },
+          "difyAppTypeSelector": {
+            "title": "Dify Application Type (dify_apptype) *",
+            "titleCompact": "Dify Application Type",
+            "description": "Choose the Dify application type that fits your use case. Different types have different features and applicable scenarios."
+          },
+          "difyConfig": {
+            "title": "Dify Parameter Configuration",
+            "appTypeNote": "Applications with \"Model\" type will appear in the chat interface model selector"
+          }
+        },
+        "useApiConfigEvents": {
+          "defaultInstanceSetSuccess": "Default application set successfully"
+        }
+      },
+      "content": {
+        "page": {
+          "title": "Content Management",
+          "subtitle": "Manage multilingual content for home and about pages",
+          "showPreview": "Show Preview",
+          "fullscreenPreview": "Fullscreen Preview",
+          "closePreview": "Close Preview",
+          "loadingEditor": {
+            "about": "Unable to load about page editor.",
+            "home": "Unable to load home page editor."
+          },
+          "loadingPreview": "Loading preview...",
+          "messages": {
+            "loadFailed": "Failed to load translation data",
+            "saveSuccess": "Configuration saved successfully",
+            "saveFailed": "Failed to save configuration, please try again"
+          },
+          "saveActions": {
+            "hasChanges": "Unsaved changes",
+            "saving": "Saving...",
+            "allSaved": "All changes saved",
+            "reset": "Reset",
+            "save": "Save Changes",
+            "saving_": "Saving..."
+          }
+        },
+        "tabs": {
+          "about": "About Page",
+          "home": "Home Page"
+        },
+        "previewToolbar": {
+          "aboutPreview": "About Page Preview",
+          "homePreview": "Home Page Preview"
+        },
+        "editor": {
+          "common": {
+            "editLanguage": "Edit Language",
+            "selectLanguage": "Select Language",
+            "cardNumber": "Card #{number}"
+          },
+          "home": {
+            "pageTitle": "Page Title (title)",
+            "subtitle": "Subtitle (subtitle)",
+            "features": "Feature Cards (features)",
+            "featureTitle": "Title (title)",
+            "featureDescription": "Description (description)",
+            "getStarted": "Primary Button (getStarted)",
+            "learnMore": "Secondary Button (learnMore)",
+            "copyright": "Copyright Info (copyright)",
+            "copyrightPrefix": "Prefix (prefix)",
+            "copyrightLinkText": "Link Text (linkText)",
+            "copyrightSuffix": "Suffix (suffix)"
+          },
+          "about": {
+            "pageTitle": "Page Title (title)",
+            "subtitle": "Subtitle (subtitle)",
+            "mission": "Mission Description (mission.description)",
+            "values": "Value Cards (values.items)",
+            "valueTitle": "Title (title)",
+            "valueDescription": "Description (description)",
+            "buttonText": "Button Text (buttonText)",
+            "copyright": "Copyright Info (copyright)",
+            "copyrightPrefix": "Prefix (prefix)",
+            "copyrightLinkText": "Link Text (linkText)",
+            "copyrightSuffix": "Suffix (suffix)"
+          }
+        }
+      },
+      "users": {
+        "title": "User Management",
+        "subtitle": "Manage system user accounts, permissions and access control",
+        "stats": {
+          "totalUsers": "Total Users",
+          "activeUsers": "Active Users",
+          "suspendedUsers": "Suspended",
+          "pendingUsers": "Pending",
+          "adminUsers": "Administrators",
+          "managerUsers": "Managers",
+          "regularUsers": "Regular Users",
+          "newUsersToday": "New Today",
+          "activeUsersRatio": "Percentage of total users",
+          "newUsersThisWeek": "Other days this week"
+        },
+        "filters": {
+          "searchPlaceholder": "Search user email, name or username...",
+          "advancedFilters": "Advanced Filters",
+          "reset": "Reset",
+          "rolePermissions": "Role Permissions",
+          "accountStatus": "Account Status",
+          "authSource": "Authentication Source",
+          "roleOptions": {
+            "all": "All Roles",
+            "admin": "Administrator",
+            "manager": "Manager",
+            "user": "Regular User"
+          },
+          "statusOptions": {
+            "all": "All Status",
+            "active": "Active",
+            "suspended": "Suspended",
+            "pending": "Pending"
+          },
+          "authSourceOptions": {
+            "all": "All Sources",
+            "email": "📧 Email",
+            "sso": "SSO Authentication",
+            "phone": "📱 Phone"
+          },
+          "sortBy": "Sort By",
+          "sortOptions": {
+            "createdAt": "Registration Time",
+            "lastSignIn": "Last Login",
+            "email": "Email",
+            "fullName": "Name"
+          },
+          "sortOrder": {
+            "desc": "Newest First",
+            "asc": "Oldest First"
+          }
+        },
+        "table": {
+          "headers": {
+            "userInfo": "User Information",
+            "contact": "Contact",
+            "groups": "Groups",
+            "rolePermissions": "Role Permissions",
+            "status": "Status",
+            "lastLogin": "Last Login",
+            "registerTime": "Registration Time"
+          },
+          "loading": "Loading user data...",
+          "loadingSubtext": "Please wait, fetching latest user information",
+          "noData": "No user data",
+          "noDataSubtext": "No users found matching the criteria, please try adjusting filters",
+          "noDataHint": "You can reset filters or contact administrator to add new users"
+        },
+        "batchOperations": {
+          "selected": "Selected {count} users",
+          "cancelSelection": "Cancel Selection",
+          "setAsAdmin": "Set as Administrator",
+          "setAsManager": "Set as Manager",
+          "setAsUser": "Set as Regular User",
+          "activate": "Activate",
+          "suspend": "Suspend"
+        },
+        "actions": {
+          "refreshData": "Refresh Data",
+          "addUser": "Add User",
+          "addUserInDevelopment": "Add user feature in development",
+          "viewUser": "View user: {name}",
+          "editUser": "Edit user: {name}",
+          "viewDetails": "View Details",
+          "editInfo": "Edit Information",
+          "changeRole": "Change Role",
+          "changeStatus": "Change Status",
+          "deleteUser": "Delete User",
+          "confirm": "Confirm",
+          "current": "(Current)",
+          "self": "(Self)",
+          "admin": "(Admin)",
+          "notSet": "Not Set",
+          "notSetEmail": "Email not set",
+          "notSetPhone": "Phone not set",
+          "defaultUser": "User",
+          "emailIcon": "📧",
+          "phoneIcon": "📱",
+          "moreGroups": "+{count} groups",
+          "notInGroup": "Not in any group",
+          "moreGroupsTooltip": "{count} more groups: {names}"
+        },
+        "pagination": {
+          "showing": "Showing {start} - {end} of {total} records",
+          "previous": "Previous",
+          "next": "Next"
+        },
+        "messages": {
+          "cannotIncludeSelf": "Cannot include yourself in batch operations",
+          "cannotDowngradeAdmin": "Cannot downgrade other administrators in batch operations",
+          "cannotChangeOwnRole": "Cannot modify your own role",
+          "cannotDowngradeOtherAdmin": "Cannot downgrade other administrators",
+          "cannotDeleteSelf": "Cannot delete yourself",
+          "cannotDeleteOtherAdmin": "Cannot delete other administrators",
+          "roleChangeSuccess": "Changed {name}'s role to {role}",
+          "statusChangeSuccess": "Changed {name}'s status to {status}",
+          "batchRoleChangeSuccess": "Batch changed {count} users' roles",
+          "batchStatusChangeSuccess": "Batch changed {count} users' status",
+          "roleChangeConfirm": "Change {name}'s role to {role}?",
+          "statusChangeConfirm": "Change {name}'s status to {status}?",
+          "batchRoleChangeConfirm": "Change {count} users' roles to {role}?",
+          "batchStatusChangeConfirm": "Change {count} users' status to {status}?",
+          "deleteConfirm": "Are you sure you want to delete user {name}? This action cannot be undone.",
+          "deleteSuccess": "Deleted user {name}",
+          "roles": {
+            "admin": "Administrator",
+            "manager": "Manager",
+            "user": "Regular User"
+          },
+          "statuses": {
+            "active": "Active",
+            "suspended": "Suspended",
+            "pending": "Pending"
+          }
+        }
+      },
+      "ssoProviders": {
+        "title": "SSO Provider Management",
+        "subtitle": "Manage single sign-on providers and their configurations",
+        "addProvider": "Add Provider",
+        "refresh": "Refresh Data",
+        "error": "Error",
+        "filters": {
+          "searchPlaceholder": "Search provider name or protocol...",
+          "reset": "Reset"
+        },
+        "table": {
+          "headers": {
+            "name": "Name",
+            "protocol": "Protocol",
+            "status": "Status",
+            "order": "Order",
+            "created": "Created At"
+          },
+          "enabled": "Enabled",
+          "disabled": "Disabled",
+          "button": "Button",
+          "noProviders": "No SSO providers found",
+          "createFirst": "Create your first SSO provider to get started",
+          "loadingProviders": "Loading SSO providers...",
+          "actions": {
+            "viewDetails": "View Details",
+            "edit": "Edit",
+            "enable": "Enable",
+            "disable": "Disable",
+            "delete": "Delete"
+          }
+        },
+        "form": {
+          "createTitle": "Create SSO Provider",
+          "editTitle": "Edit SSO Provider",
+          "createDescription": "Configure a new single sign-on provider",
+          "editDescription": "Modify the configuration of an existing SSO provider",
+          "tabs": {
+            "basicInfo": "Basic Info",
+            "protocolConfig": "Protocol Config",
+            "security": "Security",
+            "uiSettings": "UI Settings"
+          },
+          "fields": {
+            "providerName": "Provider Name",
+            "providerNamePlaceholder": "Example University SSO",
+            "protocol": "Protocol",
+            "selectProtocol": "Select Protocol",
+            "displayOrder": "Display Order",
+            "buttonText": "Button Text",
+            "buttonTextPlaceholder": "Leave blank to use provider name",
+            "enableProvider": "Enable this provider",
+            "baseUrl": "Base URL",
+            "baseUrlPlaceholder": "https://sso.example.com",
+            "loginEndpoint": "Login Endpoint",
+            "loginEndpointPlaceholder": "/login",
+            "logoutEndpoint": "Logout Endpoint",
+            "logoutEndpointPlaceholder": "/logout",
+            "validateEndpoint": "Validate Endpoint",
+            "validateEndpointPlaceholder": "/serviceValidate",
+            "validateV3Endpoint": "V3 Validate Endpoint",
+            "validateV3EndpointPlaceholder": "/p3/serviceValidate",
+            "attributeMapping": "Attribute Mapping",
+            "employeeId": "Employee ID",
+            "employeeIdPlaceholder": "cas:user",
+            "username": "Username",
+            "usernamePlaceholder": "cas:username",
+            "requireHttps": "Require HTTPS",
+            "validateCertificates": "Validate SSL Certificates",
+            "allowedRedirectHosts": "Allowed Redirect Hosts",
+            "allowedRedirectHostsPlaceholder": "example.com\nsubdomain.example.com",
+            "allowedRedirectHostsHint": "Enter one host per line",
+            "icon": "Icon",
+            "iconPlaceholder": "🏛️",
+            "theme": "Theme",
+            "logoUrl": "Logo URL",
+            "logoUrlPlaceholder": "https://example.com/logo.png",
+            "description": "Description",
+            "descriptionPlaceholder": "University SSO System"
+          },
+          "themes": {
+            "primary": "Primary",
+            "secondary": "Secondary",
+            "default": "Default",
+            "outline": "Outline"
+          },
+          "advancedSettings": "Advanced Settings",
+          "showRawJson": "Show Raw JSON",
+          "hideRawJson": "Hide Raw JSON",
+          "rawJsonConfig": "Raw JSON Configuration",
+          "actions": {
+            "cancel": "Cancel",
+            "save": "Save",
+            "saving": "Saving..."
+          },
+          "messages": {
+            "fixJsonErrors": "Please fix JSON errors before saving",
+            "createSuccess": "SSO provider created successfully",
+            "updateSuccess": "SSO provider updated successfully",
+            "unexpectedError": "An unexpected error occurred"
+          }
+        },
+        "deleteDialog": {
+          "title": "Confirm Deletion",
+          "message": "Are you sure you want to delete the SSO provider \"{name}\"? This action cannot be undone and will disable SSO login for users of this provider.",
+          "cancel": "Cancel",
+          "delete": "Delete",
+          "deleting": "Deleting...",
+          "success": "\"{name}\" has been successfully deleted"
+        },
+        "detailsModal": {
+          "title": "Provider Details and Configuration Overview",
+          "basicInfo": "Basic Information",
+          "protocol": "Protocol",
+          "status": "Status",
+          "displayOrder": "Display Order",
+          "buttonText": "Button Text",
+          "protocolConfig": "Protocol Configuration",
+          "baseUrl": "Base URL",
+          "login": "Login",
+          "logout": "Logout",
+          "securitySettings": "Security Settings",
+          "requireHttps": "Require HTTPS",
+          "validateCertificates": "Validate Certificates",
+          "yes": "Yes",
+          "no": "No",
+          "uiConfig": "UI Configuration",
+          "theme": "Theme",
+          "icon": "Icon",
+          "description": "Description",
+          "timestamps": "Timestamps",
+          "created": "Created At",
+          "updated": "Updated At",
+          "actions": {
+            "close": "Close",
+            "editProvider": "Edit Provider"
+          }
+        },
+        "stats": {
+          "totalProviders": "Total Providers",
+          "allSsoProviders": "All SSO providers are configured",
+          "enabled": "Enabled",
+          "percentOfTotal": "of total",
+          "noProviders": "No providers configured",
+          "disabled": "Disabled",
+          "activeProtocols": "Active Protocols",
+          "differentProtocolTypes": "different protocol types",
+          "protocolBreakdown": "Protocol Breakdown"
+        }
+      },
+      "groups": {
+        "title": "Group Management",
+        "subtitle": "Manage user groups and application permission assignments",
+        "stats": {
+          "totalGroups": "Total Groups",
+          "totalMembers": "Total Members",
+          "averageMembers": "Average Members",
+          "activeGroups": "Active Groups"
+        },
+        "header": {
+          "title": "Group Management",
+          "subtitle": "Manage user groups and application permission assignments",
+          "refreshData": "Refresh Data",
+          "createGroup": "Create Group"
+        },
+        "search": {
+          "placeholder": "Search group name or description...",
+          "searchResults": "Search Results",
+          "keyword": "Keyword",
+          "noResults": "No matching groups found",
+          "noResultsHint": "Try using different keywords"
+        },
+        "list": {
+          "noGroups": "No Groups",
+          "noGroupsHint": "Click \"Create Group\" button to create your first group",
+          "loading": "Loading group list...",
+          "memberCount": "{count} members",
+          "createdAt": "Created",
+          "actions": {
+            "manageMembers": "Manage Members",
+            "editGroup": "Edit Group",
+            "deleteGroup": "Delete Group"
+          }
+        },
+        "createModal": {
+          "title": "Create Group",
+          "nameLabel": "Group Name",
+          "nameRequired": "Group name cannot be empty",
+          "nameTooShort": "Group name must be at least 2 characters",
+          "nameTooLong": "Group name cannot exceed 50 characters",
+          "namePlaceholder": "Enter group name",
+          "descriptionLabel": "Group Description",
+          "descriptionTooLong": "Description cannot exceed 200 characters",
+          "descriptionPlaceholder": "Enter group description (optional)",
+          "creating": "Creating...",
+          "createButton": "Create Group",
+          "cancel": "Cancel",
+          "createSuccess": "Group \"{name}\" created successfully"
+        },
+        "editModal": {
+          "title": "Edit Group",
+          "nameLabel": "Group Name",
+          "nameRequired": "Group name cannot be empty",
+          "nameTooShort": "Group name must be at least 2 characters",
+          "nameTooLong": "Group name cannot exceed 50 characters",
+          "namePlaceholder": "Enter group name",
+          "descriptionLabel": "Group Description",
+          "descriptionTooLong": "Description cannot exceed 200 characters",
+          "descriptionPlaceholder": "Enter group description (optional)",
+          "updating": "Updating...",
+          "updateButton": "Save Changes",
+          "cancel": "Cancel",
+          "noChanges": "No changes detected",
+          "updateSuccess": "Group \"{name}\" updated successfully"
+        },
+        "membersModal": {
+          "title": "Group Member Management",
+          "subtitle": "{groupName} · {count} members total",
+          "addMember": "Add Member",
+          "searchPlaceholder": "Search members...",
+          "loading": "Loading member list...",
+          "noMembers": "No group members",
+          "noMembersHint": "Click \"Add Member\" button to invite users to join the group",
+          "noSearchResults": "No matching members found",
+          "noSearchResultsHint": "Try using different keywords",
+          "unknownUser": "Unknown User",
+          "joinedAt": "Joined",
+          "removeMember": "Remove Member",
+          "removeMemberConfirm": "Are you sure you want to remove \"{memberName}\" from group \"{groupName}\"?",
+          "removeMemberSuccess": "Removed member \"{memberName}\""
+        },
+        "addMembersModal": {
+          "title": "Add Members",
+          "subtitle": "Select users to add to group \"{groupName}\"",
+          "searchPlaceholder": "Search username, name or email...",
+          "loading": "Loading user list...",
+          "noUsers": "No users available to add",
+          "noSearchResults": "No matching users found",
+          "selectAll": "Select All",
+          "deselectAll": "Deselect All",
+          "addSelected": "Add {count} members",
+          "tableHeaders": {
+            "userInfo": "User Info",
+            "role": "Role"
+          },
+          "userRoles": {
+            "admin": "Administrator",
+            "manager": "Manager",
+            "user": "Regular User"
+          },
+          "unknownUser": "Unknown User",
+          "pagination": {
+            "showing": "Showing {start} - {end} of {total} records",
+            "previous": "Previous",
+            "next": "Next"
+          },
+          "addSuccess": "Successfully added {count} members to group",
+          "addPartialSuccess": "{errorCount} members failed to add"
+        },
+        "messages": {
+          "deleteConfirm": "Are you sure you want to delete group \"{name}\"? This action cannot be undone.",
+          "deleteSuccess": "Deleted group \"{name}\"",
+          "loadError": "Failed to load group data",
+          "createError": "Failed to create group",
+          "updateError": "Failed to update group",
+          "deleteError": "Failed to delete group",
+          "addMemberError": "Failed to add member",
+          "removeMemberError": "Failed to remove member"
+        }
+      },
+      "permissions": {
+        "header": {
+          "title": "Application Permission Management",
+          "subtitle": "Unified management of application visibility and group permissions",
+          "refreshButton": "Refresh Data"
+        },
+        "searchAndFilter": {
+          "searchPlaceholder": "Search application name or description...",
+          "filterLabel": "Application Type:",
+          "filterOptions": {
+            "all": "All Applications",
+            "public": "Public Applications",
+            "groupOnly": "Group Applications",
+            "private": "Private Applications"
+          }
+        },
+        "layout": {
+          "appListTitle": "Application List",
+          "appListSubtitle": "Select an application to configure permissions",
+          "permissionPanelTitle": "Permission Configuration",
+          "permissionPanelSubtitle": "Manage application visibility and group permissions"
+        },
+        "appList": {
+          "noApps": "No Applications",
+          "noAppsDescription": "Please create application instances first",
+          "loading": "Loading...",
+          "unknown": "Unknown",
+          "visibility": {
+            "public": "Public",
+            "groupOnly": "Group",
+            "private": "Private"
+          }
+        },
+        "permissionPanel": {
+          "selectApp": {
+            "title": "Select Application",
+            "description": "Choose an application from the left list to configure permissions"
+          },
+          "visibilitySettings": {
+            "title": "Visibility Settings",
+            "currentSetting": "Current",
+            "options": {
+              "public": {
+                "label": "Public Application",
+                "description": "All users can access this application"
+              },
+              "groupOnly": {
+                "label": "Group Application",
+                "description": "Only authorized group members can access"
+              },
+              "private": {
+                "label": "Private Application",
+                "description": "Only administrators can access this application"
+              }
+            }
+          },
+          "groupPermissions": {
+            "title": "Group Permissions",
+            "description": "Select which groups can access this application",
+            "noGroups": {
+              "title": "No Groups",
+              "description": "Please create groups first to set application permissions"
+            },
+            "status": {
+              "enabled": "Enabled",
+              "disabled": "Disabled"
+            },
+            "actions": {
+              "enable": "Enable Access",
+              "disable": "Disable Access"
+            },
+            "memberCount": "{count} members"
+          },
+          "permissionExplanation": {
+            "title": "Permission Explanation",
+            "public": "Public Application: All users can access",
+            "groupOnly": "Group Application: Only authorized group members can access",
+            "private": "Private Application: Only administrators can access"
+          }
+        },
+        "messages": {
+          "visibilityUpdateSuccess": "Application visibility updated to \"{visibility}\"",
+          "groupPermissionEnabled": "Enabled {groupName} access to this application",
+          "groupPermissionDisabled": "Disabled {groupName} access to this application",
+          "loadAppsError": "Failed to load application list",
+          "loadGroupsError": "Failed to load group list",
+          "updateVisibilityError": "Failed to update application visibility",
+          "updateGroupPermissionError": "Failed to update group permissions"
+        }
+      }
+    },
+    "about": {
+      "sections": [
+        {
+          "id": "section-1754655785510-hi9o34kms",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-9wmd3qfbr",
+                "type": "heading",
+                "props": {
+                  "content": "About AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785510-8kgg6bug1",
+                "type": "paragraph",
+                "props": {
+                  "content": "Connecting AI with enterprises, creating new experiences with large language models",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-4gy9xxu1j",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-wmcqou18g",
+                "type": "heading",
+                "props": {
+                  "content": "Our Mission",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785510-422a30k5a",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI is committed to leveraging the power of large language models to provide innovative application solutions for enterprises. We integrate capabilities from multiple model providers and provide stable, reliable services based on Dify backend, helping organizations fully utilize the value of AI technology.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-ftxgzp8bp",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-trc6k02bt",
+                "type": "heading",
+                "props": {
+                  "content": "Our Values",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785510-rat1vf5ow",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Technical Innovation",
+                      "description": "Continuously integrate cutting-edge large model technologies to provide leading AI solutions for enterprises"
+                    },
+                    {
+                      "title": "Data Security",
+                      "description": "Support private deployment and strict data protection measures to ensure the security and privacy of enterprise data"
+                    },
+                    {
+                      "title": "Flexible Customization",
+                      "description": "Provide highly customizable solutions to meet specific needs of different industries and scenarios"
+                    },
+                    {
+                      "title": "Knowledge Enhancement",
+                      "description": "Integrate private knowledge bases through RAG technology to enhance model's contextual awareness capabilities"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-ul1fhhk7e",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-ac4fm11q8",
+                "type": "button",
+                "props": {
+                  "text": "Start Exploring",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-7dkmyp6wa",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-8fd66745a",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explore the future of large model applications.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.510Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.510Z",
+        "locale": "en-US"
+      }
+    }
+  },
+  "components": {
+    "chat": {
+      "messageActions": {
+        "copy": "Copy",
+        "copied": "Copied",
+        "edit": "Edit",
+        "regenerate": "Regenerate",
+        "useful": "Useful",
+        "notUseful": "Not useful",
+        "rated": "Rated"
+      },
+      "referenceSources": {
+        "title": "Referenced {count} knowledge base resources",
+        "knowledgeBase": "Knowledge Base",
+        "expand": "Expand full text",
+        "collapse": "Collapse",
+        "copy": "Copy",
+        "copied": "Copied",
+        "copyFailed": "Copy failed",
+        "relevanceScore": "Relevance",
+        "wordCount": "{count} words",
+        "page": "Page {page}"
+      },
+      "thinkBlock": {
+        "thinking": "Deep thinking",
+        "stopped": "Thinking stopped",
+        "completed": "Deep thought completed"
+      }
+    },
+    "chatInput": {
+      "attachmentPreview": {
+        "fileLimitExceeded": "File limit exceeded ({current}/{max}), please remove some files"
+      }
+    },
+    "ui": {
+      "resizableSplitPane": {
+        "tooltip": "Drag to resize panels, double-click to reset"
+      },
+      "notificationBar": {
+        "closeNotification": "Close notification"
+      },
+      "suggestedQuestionButton": {
+        "ariaLabel": "Suggested question: {question}"
+      },
+      "copyButton": {
+        "copy": "Copy content",
+        "copied": "Copied",
+        "noContent": "No content to copy"
+      },
+      "userAvatar": {
+        "alt": "'s avatar"
+      }
+    }
+  },
+  "debug": {
+    "setDefaultApp": "Setting default app - passed ID:",
+    "currentInstances": "Current all instances:",
+    "instanceNotFound": "Instance not found, passed ID:",
+    "foundInstance": "Found instance:",
+    "setDefaultFailed": "Failed to set default app:",
+    "syncConfig": "Sync config",
+    "syncFailed": "Sync failed:",
+    "syncSuccess": "Sync success"
+  },
+  "buttons": {
+    "syncInProgress": "Syncing...",
+    "syncConfig": "Sync Config",
+    "tooltip": {
+      "syncFromDify": "Sync configuration from Dify API",
+      "syncFromDifyEdit": "Sync configuration from Dify API",
+      "syncFromDifyCreate": "Sync configuration from Dify API (auto-generate ID if empty)",
+      "fillCredentials": "Please fill in API URL and API Key first"
+    }
+  },
+  "confirmDialog": {
+    "updateDisplayName": "Update display name to: \"{name}\"?"
+  },
+  "errors": {
+    "notFound": "Page not found",
+    "serverError": "Server error",
+    "unauthorized": "Unauthorized access"
+  },
+  "navbar": {
+    "user": {
+      "userMenu": "User Menu",
+      "login": "Login",
+      "logout": "Logout",
+      "loggingOut": "Logging out...",
+      "register": "Register",
+      "history": "Chat History",
+      "settings": "Settings",
+      "about": "About",
+      "admin": "Admin Panel",
+      "loginPrompt": "Login to access more features",
+      "loginDescription": "Access your chat history and personal settings"
+    },
+    "conversation": {
+      "newChat": "New Chat",
+      "creating": "Creating...",
+      "loading": "Loading...",
+      "rename": "Rename",
+      "delete": "Delete Chat",
+      "star": "Add to Favorites",
+      "unstar": "Remove from Favorites",
+      "appsMarket": "App Market",
+      "renameDialog": {
+        "title": "Rename Chat",
+        "placeholder": "Enter new chat name",
+        "confirmText": "Confirm Rename"
+      },
+      "deleteDialog": {
+        "title": "Delete Chat",
+        "message": "Are you sure you want to delete chat \"{title}\"? This action cannot be undone.",
+        "confirmText": "Confirm Delete"
+      },
+      "createInProgress": "Chat is being created, please try again later.",
+      "incompleteInfo": "Chat information is incomplete, cannot proceed.",
+      "renameFailed": "Failed to rename chat.",
+      "deleteFailed": "Failed to delete chat.",
+      "operationError": "Operation failed, please try again later."
+    },
+    "workflow": {
+      "history": "History",
+      "closeHistory": "Close History",
+      "viewHistory": "View History",
+      "closeHistoryShort": "Close History",
+      "historyShort": "History"
+    }
+  },
+  "sidebar": {
+    "appName": "AgentifUI",
+    "expand": "Expand",
+    "collapse": "Collapse",
+    "newChat": "New Chat",
+    "historyChats": "Chat History",
+    "appsMarket": "App Market",
+    "settings": "Settings",
+    "recentChats": "Recent Chats",
+    "moreOptions": "More Options",
+    "rename": "Rename",
+    "delete": "Delete Chat",
+    "untitled": "Untitled",
+    "creating": "Creating...",
+    "favoriteApps": "Favorite Apps",
+    "loading": "Loading...",
+    "startWorkflow": "Start Workflow",
+    "startTextGeneration": "Start Text Generation",
+    "startChat": "Start Chat",
+    "hideApp": "Hide App",
+    "renameDialog": {
+      "title": "Rename Chat",
+      "label": "Chat Name",
+      "placeholder": "Enter new chat name",
+      "confirmText": "Confirm Rename"
+    },
+    "deleteDialog": {
+      "title": "Delete Chat",
+      "message": "Are you sure you want to delete chat \"{title}\"? This action cannot be undone.",
+      "confirmText": "Confirm Delete"
+    },
+    "syncingMessage": "Chat data is syncing, please try to {action} later.",
+    "operationFailed": "Operation failed, please try again later.",
+    "saveFailed": "Failed to save chat",
+    "createFailed": "Failed to create chat"
+  },
+  "mobile": {
+    "navigation": {
+      "openMenu": "Open Menu",
+      "openUserMenu": "Open User Menu"
+    },
+    "user": {
+      "defaultUser": "User",
+      "loginRegister": "Login/Register",
+      "avatarAlt": "{userName}'s avatar",
+      "loginPrompt": "Login to access more features"
+    },
+    "bottomSheet": {
+      "userMenu": "User Menu",
+      "account": "Account"
+    },
+    "menu": {
+      "settings": "Settings",
+      "logout": "Logout",
+      "login": "Login",
+      "register": "Register",
+      "adminPanel": "Admin Panel",
+      "about": "About"
+    }
+  },
+  "loading": {
+    "default": "Loading...",
+    "app": "Loading app...",
+    "appList": "Loading app list...",
+    "messages": "Loading more messages...",
+    "moreMessages": "Load more history messages",
+    "retry": "Retry",
+    "failed": "Loading failed",
+    "loadingFailed": "Failed to load messages: {error}",
+    "spinner": "Loading",
+    "pageLoader": {
+      "title": "Loading"
+    }
+  },
+  "dynamicTitle": {
+    "base": "AgentifUI",
+    "settings": {
+      "main": "Settings",
+      "profile": "Profile",
+      "account": "Account Settings",
+      "appearance": "Appearance Settings",
+      "language": "Language Settings"
+    },
+    "admin": {
+      "main": "Admin Panel",
+      "users": "User Management",
+      "apiConfig": "API Configuration",
+      "security": "Security Settings",
+      "analytics": "Data Analytics",
+      "content": "Content Management"
+    },
+    "auth": {
+      "login": "Login",
+      "register": "Register",
+      "phoneLogin": "Phone Login",
+      "resetPassword": "Reset Password",
+      "forgotPassword": "Forgot Password",
+      "ssoProcessing": "SSO Login Processing"
+    },
+    "apps": {
+      "market": "App Market",
+      "agent": "Agent App",
+      "chatbot": "Chatbot App",
+      "chatflow": "Chatflow App",
+      "workflow": "Workflow App",
+      "textGeneration": "Text Generation App",
+      "details": "App Details",
+      "loading": "Loading App..."
+    },
+    "chat": {
+      "main": "Chat",
+      "new": "New Chat",
+      "history": "Chat History",
+      "loading": "Loading Chat...",
+      "notFound": "Chat Not Found"
+    },
+    "about": "About"
+  },
+  "history": {
+    "title": "Chat History",
+    "loading": "Loading conversation records...",
+    "noRecords": "No conversation history",
+    "totalCount": "Found {total} conversations",
+    "searchResults": "Search results: {count} conversations",
+    "totalRecords": "Total {total} conversations",
+    "searchPlaceholder": "Search chat history...",
+    "newChat": "New Chat",
+    "noMessagePreview": "No message preview",
+    "batchDelete": "Batch Delete",
+    "exitSelection": "Exit Selection",
+    "selectAll": "Select All",
+    "deselectAll": "Deselect All",
+    "selected": "Selected {count} / {total} conversations",
+    "deleteCount": "Delete ({count})",
+    "deleting": "Deleting...",
+    "cancel": "Cancel",
+    "rename": "Rename",
+    "delete": "Delete Chat",
+    "moreOptions": "More Options",
+    "noSearchResults": "No matching conversations found",
+    "searchHint": "Try using different search terms",
+    "noHistoryTitle": "No chat history",
+    "noHistoryDesc": "Start a new conversation",
+    "renameDialog": {
+      "title": "Rename Chat",
+      "label": "Chat Name",
+      "placeholder": "Enter new chat name",
+      "confirmText": "Confirm Rename"
+    },
+    "deleteDialog": {
+      "title": "Delete Chat",
+      "message": "Are you sure you want to delete chat \"{title}\"? This action cannot be undone.",
+      "confirmText": "Confirm Delete"
+    },
+    "batchDeleteDialog": {
+      "title": "Batch Delete Chats",
+      "message": "Are you sure you want to delete the selected {count} chats? This action cannot be undone.",
+      "confirmText": "Delete",
+      "cancelText": "Cancel"
+    },
+    "operations": {
+      "renameFailed": "Failed to rename chat",
+      "deleteFailed": "Failed to delete chat",
+      "batchDeleteSuccess": "Successfully deleted {success} conversations, {failed} failed to delete",
+      "batchDeleteFailed": "Deletion failed, please try again later",
+      "error": "Operation failed, please try again later"
+    }
+  },
+  "difyAppTypes": {
+    "workflow": {
+      "label": "Workflow",
+      "description": "Automated workflow process",
+      "features": {
+        "automation": "Automation",
+        "batchProcessing": "Batch Processing",
+        "processControl": "Process Control"
+      }
+    },
+    "text-generation": {
+      "label": "Text Generation",
+      "description": "Single text generation application",
+      "features": {
+        "textGeneration": "Text Generation",
+        "contentCreation": "Content Creation",
+        "formattedOutput": "Formatted Output"
+      },
+      "resultViewer": {
+        "title": "Generation Result",
+        "defaultTitle": "Text Generation Result",
+        "actions": {
+          "copy": "Copy Result",
+          "copied": "Copied",
+          "download": "Download Result"
+        },
+        "executionInfo": {
+          "title": "Execution Info",
+          "status": "Status:",
+          "createdAt": "Created At:",
+          "elapsedTime": "Elapsed Time:",
+          "statusValues": {
+            "completed": "Completed",
+            "failed": "Failed",
+            "stopped": "Stopped"
+          }
+        },
+        "content": {
+          "title": "Generated Content",
+          "noContent": "No content available"
+        }
+      }
+    },
+    "chatbot": {
+      "label": "Chatbot",
+      "description": "Basic conversational chatbot",
+      "features": {
+        "conversation": "Conversation",
+        "fileUpload": "File Upload",
+        "speechToText": "Speech to Text"
+      }
+    },
+    "agent": {
+      "label": "Agent",
+      "description": "Intelligent agent with tool calling",
+      "features": {
+        "conversation": "Conversation",
+        "toolCalling": "Tool Calling",
+        "reasoningChain": "Reasoning Chain",
+        "multiTurnTasks": "Multi-turn Tasks"
+      }
+    },
+    "chatflow": {
+      "label": "Chatflow",
+      "description": "Conversational workflow application",
+      "features": {
+        "processOrchestration": "Process Orchestration",
+        "conditionalBranching": "Conditional Branching",
+        "conversationManagement": "Conversation Management"
+      }
+    }
+  },
+  "filePreview": {
+    "loading": "Loading file content...",
+    "failed": "Failed to load file",
+    "retryButton": "Retry",
+    "dismissButton": "Dismiss",
+    "downloadButton": "Download File",
+    "closeButton": "Close preview",
+    "noFileSelected": "No file selected",
+    "previewNotSupported": "Preview not supported for this file type. You can download it to view the content.",
+    "textPreview": {
+      "title": "Text Preview",
+      "copyButton": "Copy",
+      "copiedButton": "Copied!",
+      "downloadButton": "Download",
+      "charactersCount": "{count} characters"
+    },
+    "pdfPreview": {
+      "title": "PDF Preview",
+      "openButton": "Open",
+      "downloadButton": "Download",
+      "fileSize": "{size} MB"
+    },
+    "imagePreview": {
+      "title": "Image Preview",
+      "downloadButton": "Download",
+      "loadError": "Failed to load image",
+      "downloadToView": "Download to view",
+      "filename": "Filename",
+      "fileSize": "File Size",
+      "fileType": "File Type"
+    },
+    "audio": {
+      "title": "Audio Preview",
+      "duration": "Duration",
+      "loadError": "Failed to load audio file",
+      "notSupported": "Your browser does not support audio playback"
+    },
+    "video": {
+      "title": "Video Preview",
+      "duration": "Duration",
+      "resolution": "Resolution",
+      "loadError": "Failed to load video file",
+      "notSupported": "Your browser does not support video playback"
+    },
+    "markdownPreview": {
+      "title": "Markdown Preview",
+      "renderedMode": "Rendered",
+      "rawMode": "Raw",
+      "downloadButton": "Download",
+      "charactersCount": "{count} characters"
+    },
+    "errors": {
+      "noAppId": "No application ID available for file preview",
+      "downloadNoAppId": "No application ID available for file download"
+    },
+    "fileInfo": {
+      "title": "File Information",
+      "name": "Name:",
+      "type": "Type:",
+      "size": "Size:"
+    }
+  }
+}
diff --git a/messages/es-ES.json b/messages/es-ES.json
index 79e703d8..2ee1a95a 100644
--- a/messages/es-ES.json
+++ b/messages/es-ES.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explora las posibilidades infinitas de la IA y crea nuevas experiencias inteligentes",
-      "getStarted": "Comenzar",
-      "learnMore": "Saber más",
-      "features": [
+      "sections": [
         {
-          "title": "Integración de Modelos Grandes",
-          "description": "Soporte para múltiples proveedores de modelos incluyendo OpenAI, Anthropic, Dify, etc., satisfaciendo diferentes necesidades empresariales"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Explora las posibilidades infinitas de la IA y crea nuevas experiencias inteligentes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Mejora de Conocimiento RAG",
-          "description": "Integra tecnología de Generación Aumentada por Recuperación (RAG) para habilitar bases de conocimiento privadas y conciencia contextual"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Integración de Modelos Grandes",
+                      "description": "Soporte para múltiples proveedores de modelos incluyendo OpenAI, Anthropic, Dify, etc., satisfaciendo diferentes necesidades empresariales"
+                    },
+                    {
+                      "title": "Mejora de Conocimiento RAG",
+                      "description": "Integra tecnología de Generación Aumentada por Recuperación (RAG) para habilitar bases de conocimiento privadas y conciencia contextual"
+                    },
+                    {
+                      "title": "Despliegue Empresarial",
+                      "description": "Soporte para despliegue privado, garantizando la seguridad de datos, proporcionando servicios estables y confiables basados en backend Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Despliegue Empresarial",
-          "description": "Soporte para despliegue privado, garantizando la seguridad de datos, proporcionando servicios estables y confiables basados en backend Dify"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Comenzar",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Saber más",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explora las posibilidades infinitas de la IA.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explora las posibilidades infinitas de la IA."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "es-ES"
       }
     },
     "chat": {
diff --git a/messages/fr-FR.json b/messages/fr-FR.json
index a40608a4..bdbf6fed 100644
--- a/messages/fr-FR.json
+++ b/messages/fr-FR.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explorez les possibilités infinies de l'IA et créez de nouvelles expériences intelligentes",
-      "getStarted": "Commencer",
-      "learnMore": "En savoir plus",
-      "features": [
+      "sections": [
         {
-          "title": "Intégration de grands modèles",
-          "description": "Prise en charge de plusieurs fournisseurs de modèles, y compris OpenAI, Anthropic, Dify, etc., pour répondre aux différents besoins des entreprises"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Explorez les possibilités infinies de l'IA et créez de nouvelles expériences intelligentes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Amélioration des connaissances RAG",
-          "description": "Intégrez la technologie de génération augmentée par récupération (RAG) pour permettre des bases de connaissances privées et une conscience contextuelle"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Intégration de grands modèles",
+                      "description": "Prise en charge de plusieurs fournisseurs de modèles, y compris OpenAI, Anthropic, Dify, etc., pour répondre aux différents besoins des entreprises"
+                    },
+                    {
+                      "title": "Amélioration des connaissances RAG",
+                      "description": "Intégrez la technologie de génération augmentée par récupération (RAG) pour permettre des bases de connaissances privées et une conscience contextuelle"
+                    },
+                    {
+                      "title": "Déploiement en entreprise",
+                      "description": "Prise en charge du déploiement privé, garantissant la sécurité des données, fournissant des services stables et fiables basés sur le backend Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Déploiement en entreprise",
-          "description": "Prise en charge du déploiement privé, garantissant la sécurité des données, fournissant des services stables et fiables basés sur le backend Dify"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Commencer",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "En savoir plus",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explorez les possibilités infinies de l'IA.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explorez les possibilités infinies de l'IA."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "fr-FR"
       }
     },
     "chat": {
diff --git a/messages/it-IT.json b/messages/it-IT.json
index c3359e3b..0977e59b 100644
--- a/messages/it-IT.json
+++ b/messages/it-IT.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Esplora le infinite possibilità dell'IA e crea nuove esperienze intelligenti",
-      "getStarted": "Inizia",
-      "learnMore": "Scopri di più",
-      "features": [
+      "sections": [
         {
-          "title": "Integrazione di Grandi Modelli",
-          "description": "Supporto per più fornitori di modelli, tra cui OpenAI, Anthropic, Dify, ecc., per soddisfare le diverse esigenze aziendali"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Esplora le infinite possibilità dell'IA e crea nuove esperienze intelligenti",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Miglioramento della Conoscenza con RAG",
-          "description": "Integra la tecnologia Retrieval-Augmented Generation (RAG) per abilitare basi di conoscenza private e consapevolezza del contesto"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Integrazione di Grandi Modelli",
+                      "description": "Supporto per più fornitori di modelli, tra cui OpenAI, Anthropic, Dify, ecc., per soddisfare le diverse esigenze aziendali"
+                    },
+                    {
+                      "title": "Miglioramento della Conoscenza con RAG",
+                      "description": "Integra la tecnologia Retrieval-Augmented Generation (RAG) per abilitare basi di conoscenza private e consapevolezza del contesto"
+                    },
+                    {
+                      "title": "Distribuzione Aziendale",
+                      "description": "Supporto per la distribuzione privata, garantendo la sicurezza dei dati e fornendo servizi stabili e affidabili basati sul backend di Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Distribuzione Aziendale",
-          "description": "Supporto per la distribuzione privata, garantendo la sicurezza dei dati e fornendo servizi stabili e affidabili basati sul backend di Dify"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Inizia",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Scopri di più",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Esplora le infinite possibilità dell'IA.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Esplora le infinite possibilità dell'IA."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "it-IT"
       }
     },
     "chat": {
diff --git a/messages/ja-JP.json b/messages/ja-JP.json
index eeb781f2..310b00b1 100644
--- a/messages/ja-JP.json
+++ b/messages/ja-JP.json
@@ -45,28 +45,110 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "AIの無限の可能性を探求し、インテリジェントな新体験を創造",
-      "getStarted": "始める",
-      "learnMore": "詳しく見る",
-      "features": [
+      "sections": [
+        {
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "AIの無限の可能性を探求し、インテリジェントな新体験を創造",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
         {
-          "title": "大規模モデル統合",
-          "description": "OpenAI、Anthropic、Difyなど複数のモデルプロバイダーをサポートし、様々な企業ニーズに対応"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "大規模モデル統合",
+                      "description": "OpenAI、Anthropic、Difyなど複数のモデルプロバイダーをサポートし、様々な企業ニーズに対応"
+                    },
+                    {
+                      "title": "RAG知識強化",
+                      "description": "検索拡張生成（RAG）技術を統合し、プライベート知識ベースとコンテキスト認識を実現"
+                    },
+                    {
+                      "title": "エンタープライズ展開",
+                      "description": "プライベート展開をサポートし、データセキュリティを保証、Difyバックエンドに基づく安定した信頼性の高いサービスを提供"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG知識強化",
-          "description": "検索拡張生成（RAG）技術を統合し、プライベート知識ベースとコンテキスト認識を実現"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "始める",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "詳しく見る",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "エンタープライズ展開",
-          "description": "プライベート展開をサポートし、データセキュリティを保証、Difyバックエンドに基づく安定した信頼性の高いサービスを提供"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI。AIの無限の可能性を探求。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": "。AIの無限の可能性を探求。"
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "ja-JP"
       }
     },
     "chat": {
diff --git a/messages/pt-PT.json b/messages/pt-PT.json
index 0a0428ca..6becd174 100644
--- a/messages/pt-PT.json
+++ b/messages/pt-PT.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explore as infinitas possibilidades da IA e crie novas experiências inteligentes",
-      "getStarted": "Começar",
-      "learnMore": "Saber mais",
-      "features": [
+      "sections": [
         {
-          "title": "Integração de Grandes Modelos",
-          "description": "Suporte para múltiplos fornecedores de modelos, incluindo OpenAI, Anthropic, Dify, etc., para satisfazer as diferentes necessidades empresariais"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Explore as infinitas possibilidades da IA e crie novas experiências inteligentes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Melhoria de Conhecimento com RAG",
-          "description": "Integre a tecnologia de Geração Aumentada por Recuperação (RAG) para permitir bases de conhecimento privadas e consciência de contexto"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Integração de Grandes Modelos",
+                      "description": "Suporte para múltiplos fornecedores de modelos, incluindo OpenAI, Anthropic, Dify, etc., para satisfazer as diferentes necessidades empresariais"
+                    },
+                    {
+                      "title": "Melhoria de Conhecimento com RAG",
+                      "description": "Integre a tecnologia de Geração Aumentada por Recuperação (RAG) para permitir bases de conhecimento privadas e consciência de contexto"
+                    },
+                    {
+                      "title": "Implementação Empresarial",
+                      "description": "Suporte para implementação privada, garantindo a segurança dos dados, e fornecendo serviços estáveis e fiáveis baseados no backend Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Implementação Empresarial",
-          "description": "Suporte para implementação privada, garantindo a segurança dos dados, e fornecendo serviços estáveis e fiáveis baseados no backend Dify"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Começar",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Saber mais",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explore as infinitas possibilidades da IA.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore as infinitas possibilidades da IA."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "pt-PT"
       }
     },
     "chat": {
diff --git a/messages/ru-RU.json b/messages/ru-RU.json
index bea7b540..fa429c0b 100644
--- a/messages/ru-RU.json
+++ b/messages/ru-RU.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Исследуйте безграничные возможности ИИ и создавайте новые интеллектуальные решения",
-      "getStarted": "Начать",
-      "learnMore": "Узнать больше",
-      "features": [
+      "sections": [
         {
-          "title": "Интеграция больших моделей",
-          "description": "Поддержка нескольких поставщиков моделей, включая OpenAI, Anthropic, Dify и т.д., для удовлетворения различных потребностей предприятий"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Исследуйте безграничные возможности ИИ и создавайте новые интеллектуальные решения",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Улучшение знаний с помощью RAG",
-          "description": "Интеграция технологии Retrieval-Augmented Generation (RAG) для использования частных баз знаний и контекстной осведомленности"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Интеграция больших моделей",
+                      "description": "Поддержка нескольких поставщиков моделей, включая OpenAI, Anthropic, Dify и т.д., для удовлетворения различных потребностей предприятий"
+                    },
+                    {
+                      "title": "Улучшение знаний с помощью RAG",
+                      "description": "Интеграция технологии Retrieval-Augmented Generation (RAG) для использования частных баз знаний и контекстной осведомленности"
+                    },
+                    {
+                      "title": "Развертывание на предприятии",
+                      "description": "Поддержка частного развертывания, обеспечивающая безопасность данных и предоставляющая стабильные и надежные услуги на базе бэкенда Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Развертывание на предприятии",
-          "description": "Поддержка частного развертывания, обеспечивающая безопасность данных и предоставляющая стабильные и надежные услуги на базе бэкенда Dify"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Начать",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Узнать больше",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Исследуйте безграничные возможности ИИ.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Исследуйте безграничные возможности ИИ."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "ru-RU"
       }
     },
     "chat": {
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index fdfb767c..3128ff25 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -45,28 +45,110 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "探索AI的无限可能，打造智能新体验",
-      "getStarted": "立即开始",
-      "learnMore": "了解更多",
-      "features": [
+      "sections": [
+        {
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "探索AI的无限可能，打造智能新体验",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
         {
-          "title": "大模型集成",
-          "description": "支持多种模型供应商，包括OpenAI、Anthropic、Dify等，满足不同企业需求"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "大模型集成",
+                      "description": "支持多种模型供应商，包括OpenAI、Anthropic、Dify等，满足不同企业需求"
+                    },
+                    {
+                      "title": "RAG知识增强",
+                      "description": "集成检索增强生成(RAG)技术，实现私有知识库和上下文感知"
+                    },
+                    {
+                      "title": "企业级部署",
+                      "description": "支持私有化部署，保障数据安全，基于Dify后端提供稳定可靠的服务"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG知识增强",
-          "description": "集成检索增强生成(RAG)技术，实现私有知识库和上下文感知"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "立即开始",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "了解更多",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "企业级部署",
-          "description": "支持私有化部署，保障数据安全，基于Dify后端提供稳定可靠的服务"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. 探索AI的无限可能。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索AI的无限可能。"
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "zh-CN"
       }
     },
     "chat": {
diff --git a/messages/zh-CN.json.backup b/messages/zh-CN.json.backup
new file mode 100644
index 00000000..fdfb767c
--- /dev/null
+++ b/messages/zh-CN.json.backup
@@ -0,0 +1,2500 @@
+{
+  "common": {
+    "ui": {
+      "cancel": "取消",
+      "back": "返回",
+      "loading": "加载中...",
+      "retry": "重试",
+      "remove": "移除",
+      "error": "错误",
+      "download": "下载",
+      "copy": "复制",
+      "copied": "已复制！",
+      "open": "打开",
+      "dismiss": "关闭",
+      "customSelect": {
+        "placeholder": "请选择..."
+      },
+      "exportButton": {
+        "tooltip": "导出文件",
+        "ariaLabel": "导出文件"
+      },
+      "logoutDialog": {
+        "title": "退出登录",
+        "message": "确定要退出登录吗？退出后需要重新登录才能访问您的账户。",
+        "confirm": "确认退出",
+        "cancel": "取消",
+        "loggingOut": "退出中..."
+      },
+      "moreButton": {
+        "ariaLabel": "更多选项"
+      }
+    },
+    "time": {
+      "notRecorded": "未记录",
+      "invalidDate": "无效日期",
+      "formatError": "格式化错误",
+      "greeting": {
+        "morning": "早上好",
+        "afternoon": "下午好",
+        "evening": "晚上好",
+        "night": "夜深了",
+        "default": "您好"
+      }
+    }
+  },
+  "pages": {
+    "home": {
+      "title": "AgentifUI",
+      "subtitle": "探索AI的无限可能，打造智能新体验",
+      "getStarted": "立即开始",
+      "learnMore": "了解更多",
+      "features": [
+        {
+          "title": "大模型集成",
+          "description": "支持多种模型供应商，包括OpenAI、Anthropic、Dify等，满足不同企业需求"
+        },
+        {
+          "title": "RAG知识增强",
+          "description": "集成检索增强生成(RAG)技术，实现私有知识库和上下文感知"
+        },
+        {
+          "title": "企业级部署",
+          "description": "支持私有化部署，保障数据安全，基于Dify后端提供稳定可靠的服务"
+        }
+      ],
+      "copyright": {
+        "prefix": "© {year} ",
+        "linkText": "AgentifUI",
+        "suffix": ". 探索AI的无限可能。"
+      }
+    },
+    "chat": {
+      "newChat": "新对话",
+      "sendMessage": "发送",
+      "inputPlaceholder": "输入您的消息...",
+      "noMessages": "还没有消息",
+      "typing": "正在输入...",
+      "recentChats": "近期对话",
+      "historyChats": "历史对话",
+      "input": {
+        "placeholder": "输入消息...",
+        "sendMessage": "发送消息",
+        "stopGeneration": "停止生成",
+        "attachFile": "附加文件",
+        "selectModel": "选择模型",
+        "noModelAvailable": "没有可用的模型",
+        "pleaseSelectModel": "请选择一个模型",
+        "sending": "发送中...",
+        "uploading": "上传中...",
+        "uploadFailed": "上传失败",
+        "retryUpload": "重试上传",
+        "removeFile": "移除文件",
+        "fileUploadError": "文件上传错误",
+        "messageSendFailed": "消息发送失败",
+        "unknownError": "未知错误",
+        "validatingConfig": "正在验证应用配置...",
+        "cannotSubmit": "无法提交",
+        "addAttachment": "添加附件",
+        "retryUploadTooltip": "重新上传",
+        "removeAttachment": "移除附件",
+        "scrollToBottom": "滚动到底部"
+      },
+      "fileUpload": {
+        "selectFileType": "选择文件类型",
+        "image": "图片",
+        "document": "文档",
+        "audio": "音频",
+        "video": "视频",
+        "custom": "自定义",
+        "uploadProgress": "上传进度",
+        "uploadComplete": "上传完成",
+        "uploadError": "上传失败",
+        "fileTooLarge": "文件过大",
+        "unsupportedFormat": "不支持的文件格式"
+      },
+      "fileTypeSelector": {
+        "ariaLabel": "添加附件",
+        "notSupported": "该应用不支持上传文件",
+        "noLimit": "文件上传数量限制为0",
+        "noTypesConfigured": "未配置支持的文件类型",
+        "maxFilesReached": "已达到最大文件数量限制 ({maxFiles})",
+        "addAttachment": "添加附件 ({currentFiles}/{maxFiles})",
+        "loading": "加载中...",
+        "loadError": "加载文件类型失败",
+        "reachedLimit": "已达上限 ({currentFiles}/{maxFiles})",
+        "maxUpload": "最多上传 {maxFiles} 个文件",
+        "noUploadLimit": "无上传限制"
+      },
+      "modelSelector": {
+        "noModelsAvailable": "暂无可用模型",
+        "selectModel": "选择模型",
+        "appNotFound": "未找到应用: {appId}"
+      },
+      "messages": {
+        "assistant": "助手",
+        "user": "您",
+        "thinking": "思考中...",
+        "stopped": "已停止",
+        "completed": "完成",
+        "copyMessage": "复制消息",
+        "editMessage": "编辑消息",
+        "deleteMessage": "删除消息",
+        "regenerate": "重新生成",
+        "feedback": "反馈",
+        "like": "赞",
+        "dislike": "踩",
+        "copied": "已复制",
+        "copyFailed": "复制失败",
+        "imageLink": "图片链接",
+        "viewImage": "查看图片",
+        "clickToView": "点击查看",
+        "clickToViewWithAlt": "点击查看: {alt}"
+      },
+      "suggestedQuestions": {
+        "moreQuestions": "还有 {count} 个问题..."
+      }
+    },
+    "chatflow": {
+      "loading": {
+        "inputConfig": "正在加载输入配置..."
+      },
+      "form": {
+        "question": {
+          "label": "您的问题或需求",
+          "placeholder": "请详细描述您的问题或需求...",
+          "required": "请输入您的问题或需求",
+          "tooLong": "问题描述长度不能超过{maxLength}个字符"
+        },
+        "additionalInfo": "补充信息",
+        "reset": "重置表单",
+        "processing": "处理中...",
+        "startConversation": "开始对话",
+        "checkAndCorrectErrors": "请检查并修正表单中标记的错误信息",
+        "defaultAppName": "AI 对话",
+        "defaultDescription": "请输入您的问题，开始智能对话"
+      },
+      "floatingController": {
+        "showTracker": "显示节点跟踪器",
+        "hideTracker": "隐藏节点跟踪器"
+      },
+      "nodeTracker": {
+        "title": "节点执行进度",
+        "starting": "正在启动 Chatflow",
+        "noRecords": "暂无节点执行记录",
+        "waitingUpdate": "等待节点状态更新...",
+        "showProgress": "开始对话后将显示节点执行进度",
+        "executionError": "执行错误："
+      },
+      "executionBar": {
+        "status": {
+          "iterating": "正在迭代",
+          "iterationCompleted": "迭代完成",
+          "iterationFailed": "迭代失败",
+          "waitingIteration": "等待迭代",
+          "looping": "正在循环",
+          "loopCompleted": "循环完成",
+          "loopFailed": "循环失败",
+          "waitingLoop": "等待循环",
+          "executing": "正在执行",
+          "completed": "处理完成",
+          "failed": "处理失败",
+          "waiting": "等待处理",
+          "unknown": "未知状态",
+          "executing_": "执行中..."
+        },
+        "nodeTypes": {
+          "start": "开始节点",
+          "llm": "LLM 推理",
+          "knowledgeRetrieval": "知识检索",
+          "questionClassifier": "问题分类器",
+          "ifElse": "条件分支",
+          "code": "代码执行",
+          "templateTransform": "模板转换",
+          "variableAssigner": "变量赋值",
+          "variableAggregator": "变量聚合器",
+          "documentExtractor": "文档提取器",
+          "parameterExtractor": "参数提取器",
+          "httpRequest": "HTTP 请求",
+          "listOperator": "列表操作",
+          "iteration": "循环迭代",
+          "end": "结束节点",
+          "node": "节点"
+        },
+        "progressType": {
+          "iteration": "迭代进度",
+          "branch": "分支进度"
+        },
+        "branch": {
+          "label": "分支"
+        }
+      }
+    },
+    "workflow": {
+      "form": {
+        "inputPlaceholder": "请输入{label}",
+        "selectPlaceholder": "请选择{label}",
+        "rangeHint": "范围：{min} - {max}",
+        "minValueHint": "最小值：{min}",
+        "maxValueHint": "最大值：{max}",
+        "stepHint": "步长：{step}",
+        "precisionHint": "小数位数：{precision}",
+        "defaultLabel": "输入文本",
+        "loading": "正在加载表单配置...",
+        "noFormConfig": "该应用未配置输入表单",
+        "reset": "重置表单",
+        "executing": "执行中...",
+        "startExecution": "开始执行",
+        "errors": {
+          "instanceNotFound": "未找到 instanceId 为 {instanceId} 的服务实例"
+        },
+        "validation": {
+          "required": "{label}为必填项",
+          "invalidNumber": "{label}必须是有效的数字",
+          "minValue": "{label}不能小于{min}",
+          "maxValue": "{label}不能大于{max}",
+          "stepValue": "{label}必须是{step}的倍数",
+          "precisionExceeded": "{label}小数位数不能超过{precision}位",
+          "maxLengthExceeded": "{label}长度不能超过{maxLength}个字符",
+          "invalidSelection": "{label}选择的值无效",
+          "tooManyFiles": "{label}文件数量不能超过{maxFiles}个",
+          "fileTooLarge": "{label}中的文件\"{fileName}\"大小超过{maxSize}MB",
+          "unsupportedFileType": "{label}中的文件\"{fileName}\"类型不支持，支持的类型：{allowedTypes}"
+        }
+      },
+      "status": {
+        "running": "工作流执行中",
+        "completed": "执行完成",
+        "failed": "执行失败",
+        "stopped": "执行已停止",
+        "pending": "等待执行",
+        "unknown": "未知",
+        "totalTime": "总耗时: {time}s"
+      },
+      "nodeStatus": {
+        "iterating": "正在迭代...",
+        "iterationCompleted": "迭代完成",
+        "iterationFailed": "迭代失败",
+        "waitingIteration": "等待迭代",
+        "looping": "正在循环",
+        "loopCompleted": "循环完成",
+        "loopFailed": "循环失败",
+        "waitingLoop": "等待循环",
+        "parallelRunning": "并行执行中...",
+        "parallelCompleted": "并行完成",
+        "parallelFailed": "并行失败",
+        "waitingParallel": "等待并行执行",
+        "executing": "正在执行...",
+        "nodeCompleted": "执行完成",
+        "nodeFailed": "执行失败",
+        "nodePending": "等待执行",
+        "nodeUnknown": "未知状态"
+      },
+      "nodeTypes": {
+        "start": "开始节点",
+        "llm": "LLM 推理",
+        "knowledgeRetrieval": "知识检索",
+        "questionClassifier": "问题分类器",
+        "ifElse": "条件分支",
+        "code": "代码执行",
+        "templateTransform": "模板转换",
+        "variableAssigner": "变量赋值",
+        "variableAggregator": "变量聚合器",
+        "documentExtractor": "文档提取器",
+        "parameterExtractor": "参数提取器",
+        "httpRequest": "HTTP 请求",
+        "listOperator": "列表操作",
+        "iteration": "循环迭代",
+        "parallel": "并行分支",
+        "end": "结束节点"
+      },
+      "iterationDetails": {
+        "roundIteration": "第 {round} 轮迭代",
+        "roundLoop": "第 {round} 轮循环",
+        "nodeNumber": "节点 {number}"
+      },
+      "buttons": {
+        "retry": "重试",
+        "close": "关闭",
+        "copy": "复制结果",
+        "copied": "已复制",
+        "download": "下载结果",
+        "retryUpload": "重新上传",
+        "removeFile": "移除文件",
+        "viewResult": "查看结果",
+        "stop": "停止",
+        "reset": "重置"
+      },
+      "history": {
+        "showHistory": "查看历史记录",
+        "hideHistory": "关闭历史记录",
+        "noDetailData": "该执行记录暂无详细结果数据，但可以查看基本信息",
+        "title": "执行历史",
+        "selected": "已选 {count} 项",
+        "batchDelete": "批量删除",
+        "deleteSelected": "删除选中的 {count} 项",
+        "cancelSelection": "取消选择",
+        "loading": "正在加载历史记录...",
+        "noRecords": "暂无执行记录",
+        "getDetailFailed": "获取执行详情失败",
+        "unknownError": "未知错误",
+        "userNotLoggedIn": "用户未登录"
+      },
+      "fileUpload": {
+        "uploading": "正在上传文件...",
+        "dropOrClick": "拖拽文件到此处或点击上传",
+        "uploadFailed": "上传失败",
+        "supportAllTypes": "支持上传各种文件类型",
+        "supportTypes": "支持上传：{types}",
+        "fileTypes": {
+          "image": "图片",
+          "document": "文档",
+          "audio": "音频",
+          "video": "视频",
+          "custom": "其他文件"
+        },
+        "uploaded": "已上传",
+        "maxFiles": "最多上传 {maxFiles} 个文件 (剩余 {remaining} 个)",
+        "maxFileSize": "单个文件最大 {size}MB",
+        "maxFilesReached": "已达到最大文件数量限制 ({current}/{max})",
+        "selectedFiles": "已选文件"
+      },
+      "tabs": {
+        "inputForm": "输入表单",
+        "executionStatus": "执行状态",
+        "history": "历史记录"
+      },
+      "resultViewer": {
+        "title": "工作流执行结果",
+        "noData": "无结果数据",
+        "copy": "复制结果",
+        "copied": "已复制",
+        "download": "下载结果"
+      }
+    },
+    "textGeneration": {
+      "status": {
+        "generating": "正在生成...",
+        "completed": "生成完成",
+        "failed": "生成失败",
+        "stopped": "已停止",
+        "waiting": "等待生成",
+        "result": "生成结果"
+      },
+      "progress": "进度: {percent}%",
+      "buttons": {
+        "copy": "复制文本",
+        "copied": "已复制",
+        "download": "下载文本",
+        "stop": "停止",
+        "retry": "重试",
+        "reset": "重置",
+        "close": "关闭"
+      },
+      "emptyState": {
+        "title": "等待生成",
+        "description": "填写左侧表单并点击执行按钮开始文本生成"
+      },
+      "placeholder": {
+        "generating": "正在生成文本...",
+        "result": "生成的文本将显示在这里"
+      },
+      "loadingState": {
+        "title": "文本生成中",
+        "description": "请稍候，正在为您生成内容..."
+      },
+      "streamingIndicator": "实时生成中",
+      "stats": {
+        "characters": "字符数: {count}",
+        "words": "词数: {count}",
+        "tokensUsed": "Token 使用: {count}"
+      }
+    },
+    "apps": {
+      "startChatWith": "与 {appName} 开始对话...",
+      "continueChatWith": "与 {appName} 继续对话...",
+      "defaultApp": "应用",
+      "loadFailed": "应用加载失败",
+      "backToMarket": "返回应用市场",
+      "loading": {
+        "app": "正在加载应用...",
+        "validating": "正在验证应用配置...",
+        "default": "加载中..."
+      },
+      "errors": {
+        "appNotFound": "应用不存在",
+        "initializationFailed": "初始化失败",
+        "appLoadFailed": "应用加载失败"
+      },
+      "status": {
+        "loadingApp": "正在加载应用...",
+        "validatingConfig": "正在验证应用配置...",
+        "loading": "加载中..."
+      },
+      "buttons": {
+        "backToMarket": "返回应用市场"
+      },
+      "market": {
+        "categories": {
+          "all": "全部",
+          "favorite": "常用",
+          "writing": "写作",
+          "translation": "翻译",
+          "programming": "编程",
+          "codeGeneration": "代码生成",
+          "analysis": "分析",
+          "summary": "总结",
+          "conversation": "对话",
+          "assistant": "助手",
+          "textGeneration": "文本生成",
+          "document": "文档",
+          "dataAnalysis": "数据分析",
+          "development": "开发",
+          "generation": "生成",
+          "conversationModel": "对话模型",
+          "reasoningModel": "推理模型",
+          "documentModel": "文档模型",
+          "multimodal": "多模态",
+          "highPrecision": "高精度",
+          "fastResponse": "快速",
+          "localDeployment": "本地",
+          "enterprise": "企业",
+          "private": "私有",
+          "tools": "工具",
+          "general": "通用",
+          "professional": "专业"
+        },
+        "search": {
+          "placeholder": "搜索应用..."
+        },
+        "tryAdjustSearch": "尝试调整搜索条件或浏览其他分类",
+        "viewMode": {
+          "grid": "网格",
+          "list": "列表"
+        },
+        "appCard": {
+          "noDescription": "暂无描述",
+          "defaultType": "应用"
+        },
+        "header": {
+          "title": "应用市场",
+          "totalApps": "共 {count} 个应用",
+          "categoryApps": "{category} · {count} 个应用",
+          "totalLabel": "共 {count} 个"
+        },
+        "categoryKeys": {
+          "all": "全部",
+          "commonApps": "常用应用"
+        },
+        "unknownAppType": "未知的Dify应用类型",
+        "useDefaultRoute": "使用默认路由",
+        "routeJump": "路由跳转",
+        "app": "应用",
+        "type": "类型",
+        "path": "路径",
+        "openAppFailed": "打开应用失败"
+      }
+    },
+    "auth": {
+      "login": {
+        "title": "登录",
+        "subtitle": "欢迎使用智能助手",
+        "emailLabel": "邮箱",
+        "passwordLabel": "密码",
+        "emailPlaceholder": "your@email.com",
+        "passwordPlaceholder": "••••••••",
+        "loginButton": "登录",
+        "forgotPasswordLink": "忘记密码？",
+        "phoneLoginLink": "📱 使用手机号验证码登录",
+        "noAccountText": "还没有账号？",
+        "registerLink": "立即注册",
+        "showPassword": "显示密码",
+        "hidePassword": "隐藏密码",
+        "orSeparator": "使用邮箱密码登录",
+        "orSeparatorSso": "或使用邮箱密码",
+        "alerts": {
+          "registered": "注册成功！请查看您的邮箱以验证账户，然后登录。",
+          "resetSuccess": "密码重置成功！请使用新密码登录。"
+        },
+        "errors": {
+          "oauthFailed": "OAuth登录失败，请重试或使用其他登录方式",
+          "ssoCallbackFailed": "SSO认证回调处理失败，请重新尝试登录",
+          "ticketValidationFailed": "SSO票据验证失败，请重新登录",
+          "invalidEmployeeNumber": "学工号格式不正确，请联系管理员",
+          "userCreationFailed": "账户创建失败，这可能是由于账户数据不一致导致的。请尝试重新登录，如果问题持续存在，请联系管理员",
+          "accountDataInconsistent": "账户数据不一致，系统正在尝试自动修复。请稍等片刻后重新登录",
+          "profileCreationFailed": "用户档案创建失败，请联系管理员协助解决",
+          "ssoProviderNotFound": "SSO服务配置错误，请联系管理员",
+          "missingTicket": "认证参数缺失，请重新登录",
+          "default": "登录过程中出现错误，请稍后重试",
+          "loginFailed": "登录失败，请检查您的邮箱和密码"
+        }
+      },
+      "register": {
+        "title": "注册",
+        "subtitle": "加入 AgentifUI，开启 AI 智能之旅",
+        "nameLabel": "姓名",
+        "usernameLabel": "昵称",
+        "usernameOptional": "(可选)",
+        "emailLabel": "邮箱",
+        "passwordLabel": "密码",
+        "confirmPasswordLabel": "确认密码",
+        "namePlaceholder": "输入您的姓名",
+        "usernamePlaceholder": "选择一个用户名",
+        "emailPlaceholder": "your@email.com",
+        "passwordPlaceholder": "••••••••",
+        "createAccountButton": "创建账户",
+        "phoneLoginLink": "📱 使用手机号验证码登录",
+        "hasAccountText": "已有账户？",
+        "loginLink": "立即登录",
+        "showPassword": "显示密码",
+        "hidePassword": "隐藏密码",
+        "showConfirmPassword": "显示确认密码",
+        "hideConfirmPassword": "隐藏确认密码",
+        "orSeparator": "或使用邮箱密码",
+        "errors": {
+          "nameRequired": "请输入姓名",
+          "emailRequired": "请输入邮箱地址",
+          "passwordTooShort": "密码长度至少6位",
+          "passwordMismatch": "两次输入的密码不一致",
+          "usernameInvalid": "昵称只能包含字母、数字、下划线和连字符，长度2-20位",
+          "emailExists": "该邮箱已被注册，请使用其他邮箱或直接登录",
+          "passwordWeak": "密码强度不够，请使用更复杂的密码",
+          "emailInvalid": "邮箱格式不正确，请检查后重试",
+          "registerFailed": "注册失败，请稍后再试"
+        }
+      },
+      "phoneLoginPage": {
+        "title": "AgentifUI",
+        "subtitle": "智能对话，触手可及",
+        "orSeparator": "或者",
+        "emailLoginLink": "使用邮箱密码登录",
+        "registerLink": "还没有账号？立即注册",
+        "termsText": "登录即表示您同意我们的",
+        "termsLink": "服务条款",
+        "privacyLink": "隐私政策",
+        "andText": "和"
+      },
+      "ssoProcessing": {
+        "title": "SSO 登录",
+        "loading": "加载中..."
+      },
+      "forgotPassword": {
+        "title": "忘记密码",
+        "subtitle": "输入您的邮箱地址，我们将发送重置密码链接",
+        "emailLabel": "邮箱地址",
+        "emailPlaceholder": "your@email.com",
+        "sendButton": "发送重置链接",
+        "sendingButton": "发送中...",
+        "backToLogin": "返回登录",
+        "success": {
+          "title": "邮件已发送",
+          "message": "我们已向 {email} 发送了重置密码链接",
+          "instructions": "请检查您的邮箱（包括垃圾邮件文件夹）并点击链接重置密码。",
+          "noEmail": "如果您没有收到邮件，请检查邮箱地址是否正确或稍后重试。"
+        },
+        "errors": {
+          "emailRequired": "请输入有效的邮箱地址",
+          "rateLimited": "发送过于频繁，请稍后再试",
+          "sendFailed": "发送失败，请稍后再试"
+        }
+      },
+      "resetPassword": {
+        "title": "重置密码",
+        "subtitle": "请输入您的新密码",
+        "verifying": "验证中",
+        "verifyingSubtitle": "正在验证重置链接...",
+        "invalidTitle": "链接无效",
+        "invalidSubtitle": "重置密码链接已过期或无效",
+        "successTitle": "密码重置成功",
+        "successSubtitle": "您的密码已成功重置",
+        "passwordLabel": "新密码",
+        "confirmPasswordLabel": "确认密码",
+        "passwordPlaceholder": "输入新密码",
+        "confirmPasswordPlaceholder": "再次输入新密码",
+        "resetButton": "重置密码",
+        "resettingButton": "重置中...",
+        "showPassword": "显示新密码",
+        "hidePassword": "隐藏新密码",
+        "showConfirmPassword": "显示确认密码",
+        "hideConfirmPassword": "隐藏确认密码",
+        "passwordHint": "密码需包含大小写字母、数字，至少8位",
+        "backToLogin": "前往登录",
+        "retryReset": "重新申请重置密码",
+        "successMessage": "您现在可以使用新密码登录您的账户。",
+        "errors": {
+          "passwordRequired": "请输入新密码",
+          "passwordTooShort": "密码长度至少6位",
+          "passwordMismatch": "两次输入的密码不一致",
+          "passwordWeak": "密码强度不够，请使用更复杂的密码",
+          "sessionExpired": "会话已过期，请重新申请重置密码",
+          "resetFailed": "密码重置失败，请稍后再试",
+          "linkInvalid": "重置链接验证失败",
+          "linkExpired": "重置链接无效或已过期，请重新申请重置密码",
+          "verifyFailed": "验证失败，请重新申请重置密码"
+        }
+      },
+      "phoneLogin": {
+        "title": "手机号登录",
+        "subtitle": "使用手机号接收验证码登录",
+        "otpSubtitle": "请输入收到的6位验证码",
+        "phoneLabel": "手机号",
+        "otpLabel": "验证码",
+        "phonePlaceholder": "13812345678",
+        "otpPlaceholder": "请输入6位验证码",
+        "sendOtpButton": "发送验证码",
+        "sendingButton": "发送中...",
+        "verifyButton": "确认验证码",
+        "verifyingButton": "验证中...",
+        "resendButton": "重新发送验证码",
+        "changePhoneButton": "修改手机号",
+        "otpSentTo": "验证码已发送至 +86{phone}",
+        "errors": {
+          "phoneRequired": "请输入手机号",
+          "phoneInvalid": "请输入正确的中国大陆手机号",
+          "otpRequired": "请输入验证码",
+          "otpInvalid": "验证码应为6位数字",
+          "sendFailed": "发送验证码失败，请稍后重试",
+          "verifyFailed": "验证码错误，请重新输入"
+        },
+        "success": {
+          "otpSent": "验证码已发送，请查收短信",
+          "verifySuccess": "验证成功！正在登录..."
+        }
+      },
+      "sso": {
+        "title": "统一身份认证",
+        "subtitle": "使用您的统一认证账号登录",
+        "button": "使用统一认证登录",
+        "simpleButton": "🏛️ 统一身份认证",
+        "jumpingButton": "正在跳转...",
+        "helpText": "首次登录将自动创建账户",
+        "contactText": "如有问题请联系系统管理员",
+        "startError": "启动SSO登录失败，请稍后重试",
+        "noProvider": "暂无可用的SSO登录方式",
+        "processing": {
+          "title": "SSO 登录",
+          "processing": "正在处理SSO登录...",
+          "welcome": "欢迎 {name}，正在建立会话...",
+          "verifying": "正在验证身份...",
+          "sessionCheck": "正在验证会话...",
+          "success": "登录成功！正在跳转...",
+          "failed": "登录失败",
+          "redirecting": "3秒后将自动跳转到登录页面...",
+          "errors": {
+            "missingParams": "SSO参数缺失或无效",
+            "userDataNotFound": "SSO用户数据未找到",
+            "sessionExpired": "SSO会话已过期，请重新登录",
+            "loginFailed": "SSO登录失败",
+            "sessionValidationFailed": "会话验证失败",
+            "noValidSessionData": "服务器未返回有效会话数据",
+            "processingFailed": "SSO处理失败"
+          }
+        }
+      },
+      "social": {
+        "github": {
+          "login": "使用 GitHub 登录",
+          "register": "使用 GitHub 注册",
+          "failed": "GitHub 登录失败"
+        }
+      }
+    },
+    "settings": {
+      "title": "设置",
+      "profile": "个人资料",
+      "account": "账户",
+      "appearance": "外观",
+      "language": "语言",
+      "navigation": {
+        "overview": "概览",
+        "profileNav": "个人资料",
+        "accountNav": "账户",
+        "appearanceNav": "外观",
+        "languageNav": "语言"
+      },
+      "descriptions": {
+        "overview": "管理您的个人偏好，自定义应用体验",
+        "profileDesc": "更新个人信息、头像和账户设置",
+        "accountDesc": "管理您的账户安全和登录信息",
+        "appearanceDesc": "自定义主题、颜色、界面布局和时区设置",
+        "languageDesc": "选择您偏好的显示语言和地区设置"
+      },
+      "accountSettings": {
+        "title": "账户设置",
+        "accountInfo": "账户信息",
+        "loginEmail": "登录邮箱",
+        "authMethod": "认证方式",
+        "emailPasswordAuth": "邮箱密码",
+        "securitySettings": "安全设置",
+        "logoutAccount": "退出当前账户",
+        "confirmLogout": "确定要退出登录吗？",
+        "confirmLogoutBtn": "确认退出",
+        "logout": "退出登录",
+        "loggingOut": "退出中...",
+        "loadAccountError": "加载账户信息时出错",
+        "retry": "重试",
+        "deleteAccount": "删除账户"
+      },
+      "profileSettings": {
+        "title": "个人资料",
+        "accountInfo": "账户信息",
+        "registrationTime": "注册时间",
+        "accountRole": "账户角色",
+        "lastLogin": "上次登录",
+        "editProfile": "编辑个人资料",
+        "name": "姓名",
+        "nickname": "昵称",
+        "profileUpdated": "个人资料已更新",
+        "updateFailed": "更新资料失败",
+        "saving": "保存中...",
+        "saveChanges": "保存修改",
+        "namePlaceholder": "请输入您的姓名",
+        "usernamePlaceholder": "请输入您的用户名",
+        "roles": {
+          "admin": "管理员",
+          "manager": "经理",
+          "user": "普通用户"
+        },
+        "status": {
+          "notRecorded": "未记录",
+          "notSet": "未设置"
+        },
+        "loadProfileError": "加载资料时出错",
+        "avatar": {
+          "defaultUser": "用户",
+          "userAvatar": "{userName}的头像",
+          "editHover": "编辑",
+          "uploadSuccess": "头像上传成功",
+          "deleteSuccess": "头像删除成功"
+        }
+      },
+      "avatarModal": {
+        "title": "头像设置",
+        "subtitle": "点击上传或拖拽图片到下方区域",
+        "currentAvatar": "当前头像",
+        "supportedFormats": "支持 JPEG、JPG、PNG、WebP 格式 • 最大 5MB",
+        "crop": {
+          "zoom": "缩放",
+          "cancel": "重新选择",
+          "confirm": "确认裁切",
+          "uploading": "上传中..."
+        },
+        "uploadArea": {
+          "uploading": "正在上传...",
+          "changeAvatar": "点击更换头像",
+          "uploadAvatar": "点击上传头像",
+          "uploadProgress": "上传进度：{progress}%",
+          "dragHint": "或将图片拖拽到此处"
+        },
+        "buttons": {
+          "deleteAvatar": "删除头像",
+          "complete": "完成",
+          "uploading": "上传中...",
+          "cancel": "取消",
+          "confirmDelete": "确认删除",
+          "deleting": "删除中..."
+        },
+        "deleteConfirm": {
+          "title": "删除头像",
+          "message": "确定要删除当前头像吗？此操作无法撤销。"
+        },
+        "status": {
+          "success": "操作成功完成"
+        },
+        "errors": {
+          "unsupportedType": "不支持的文件类型。请选择 JPEG、JPG、PNG 或 WebP 格式的图片。",
+          "fileTooLarge": "文件过大。请选择小于 5MB 的图片。",
+          "userNotLoggedIn": "用户未登录",
+          "uploadFailed": "上传失败",
+          "deleteFailed": "删除失败"
+        }
+      },
+      "avatarUpload": {
+        "errors": {
+          "unsupportedFileType": "不支持的文件类型。支持的格式：{types}",
+          "fileTooLarge": "文件过大。最大支持 {maxSize}MB",
+          "uploadFailed": "上传失败: {message}",
+          "getUrlFailed": "获取头像URL失败",
+          "updateDatabaseFailed": "更新数据库失败: {message}",
+          "deleteFailed": "删除失败: {message}",
+          "uploadFailedGeneric": "上传失败",
+          "deleteFailedGeneric": "删除失败"
+        }
+      },
+      "appearanceSettings": {
+        "title": "外观设置",
+        "theme": "主题",
+        "themeDescription": "选择您偏好的显示模式",
+        "themes": {
+          "light": "浅色模式",
+          "dark": "深色模式",
+          "system": "跟随系统"
+        },
+        "preview": {
+          "light": "亮色",
+          "dark": "暗色",
+          "system": "系统"
+        },
+        "timezone": "时区设置",
+        "timezoneDescription": "选择您所在的时区，影响时间显示格式",
+        "currentTimezone": "当前时区",
+        "timezoneRegions": {
+          "asia": "亚洲",
+          "europe": "欧洲",
+          "america": "美洲",
+          "africa": "非洲",
+          "australia": "大洋洲",
+          "utc": "协调世界时"
+        },
+        "timezoneCities": {
+          "shanghai": "上海",
+          "beijing": "北京",
+          "hongKong": "香港",
+          "taipei": "台北",
+          "tokyo": "东京",
+          "seoul": "首尔",
+          "singapore": "新加坡",
+          "bangkok": "曼谷",
+          "dubai": "迪拜",
+          "kolkata": "加尔各答",
+          "london": "伦敦",
+          "paris": "巴黎",
+          "berlin": "柏林",
+          "rome": "罗马",
+          "madrid": "马德里",
+          "amsterdam": "阿姆斯特丹",
+          "moscow": "莫斯科",
+          "newYork": "纽约",
+          "losAngeles": "洛杉矶",
+          "chicago": "芝加哥",
+          "denver": "丹佛",
+          "toronto": "多伦多",
+          "saoPaulo": "圣保罗",
+          "mexicoCity": "墨西哥城",
+          "sydney": "悉尼",
+          "melbourne": "墨尔本",
+          "perth": "珀斯",
+          "auckland": "奥克兰",
+          "cairo": "开罗",
+          "johannesburg": "约翰内斯堡",
+          "lagos": "拉各斯",
+          "utc": "UTC"
+        },
+        "timezoneSearch": "搜索时区...",
+        "systemTimezone": "系统时区",
+        "customTimezone": "自定义时区",
+        "timezonePreview": "预览时间：{time}",
+        "timezoneUpdated": "时区设置已更新"
+      },
+      "languageSettings": {
+        "title": "语言设置",
+        "language": "语言",
+        "languageDescription": "选择您偏好的显示语言",
+        "currentLanguage": "当前语言",
+        "switchLanguage": "切换语言"
+      }
+    },
+    "admin": {
+      "title": "管理后台",
+      "main": {
+        "title": "管理后台概览",
+        "subtitle": "欢迎使用 AgentifUI 管理后台，在这里您可以管理系统的各项配置和设置"
+      },
+      "layout": {
+        "headerTitle": "AgentifUI 管理后台",
+        "breadcrumbRoot": "管理后台",
+        "menuItems": {
+          "main": {
+            "text": "管理主页",
+            "description": "管理后台概览"
+          },
+          "apiConfig": {
+            "text": "API 配置",
+            "description": "管理应用实例和配置参数"
+          },
+          "content": {
+            "text": "页面内容管理",
+            "description": "管理主页和关于页面的内容"
+          },
+          "users": {
+            "text": "用户管理",
+            "description": "管理用户账户和权限"
+          },
+          "ssoProviders": {
+            "text": "SSO提供商管理",
+            "description": "管理SSO提供商配置"
+          },
+          "groups": {
+            "text": "群组管理",
+            "description": "管理用户和群组，配置群组应用权限"
+          },
+          "permissions": {
+            "text": "应用权限管理",
+            "description": "管理应用可见性和群组权限"
+          }
+        },
+        "actions": {
+          "rebuildButton": {
+            "text": "重新编译",
+            "messages": {
+              "startRebuild": "开始重新编译和部署...",
+              "startRebuildDescription": "这个过程可能需要几分钟，请保持耐心。",
+              "buildInProgress": "构建正在进行中",
+              "buildInProgressDescription": "请等待当前构建完成后再试。",
+              "authFailed": "认证失败",
+              "authFailedDescription": "请重新登录后再试。",
+              "permissionDenied": "权限不足",
+              "permissionDeniedDescription": "您没有权限执行此操作。",
+              "unknownError": "发生未知错误",
+              "buildComplete": "构建完成！",
+              "buildCompleteDescription": "应用将在2秒后自动重启以应用更改。",
+              "appRestarting": "应用重启中...",
+              "appRestartingDescription": "页面将在重启完成后自动刷新。",
+              "deployFailed": "部署失败",
+              "networkError": "网络错误，请检查连接后重试。"
+            }
+          },
+          "returnToChatButton": {
+            "text": "返回对话"
+          }
+        },
+        "common": {
+          "actions": {
+            "refresh": "刷新数据",
+            "save": "保存更改",
+            "saving": "保存中...",
+            "reset": "重置",
+            "create": "创建",
+            "cancel": "取消",
+            "confirm": "确定"
+          },
+          "status": {
+            "hasUnsavedChanges": "有未保存的更改",
+            "saving": "正在保存...",
+            "allChangesSaved": "所有更改已保存"
+          }
+        }
+      },
+      "apiConfig": {
+        "emptyState": {
+          "title": "选择应用实例",
+          "description": "从左侧列表中选择一个应用实例来查看和编辑其配置，或点击添加按钮创建新的应用实例"
+        },
+        "formActions": {
+          "save": "保存",
+          "saving": "保存中...",
+          "cancel": "取消"
+        },
+        "providerManagement": {
+          "buttonText": "管理提供商",
+          "modal": {
+            "title": "管理服务提供商",
+            "providerList": "提供商列表",
+            "addProvider": "添加提供商",
+            "editProvider": "编辑提供商",
+            "addNewProvider": "添加新提供商",
+            "loading": "加载中...",
+            "noProviders": "暂无提供商配置",
+            "deleteConfirm": "确定要删除提供商\"{name}\"吗？此操作不可撤销。",
+            "messages": {
+              "loadFailed": "加载提供商列表失败",
+              "createSuccess": "提供商创建成功",
+              "createFailed": "创建提供商失败",
+              "updateSuccess": "提供商更新成功",
+              "updateFailed": "更新提供商失败",
+              "deleteSuccess": "提供商删除成功",
+              "deleteFailed": "删除提供商失败",
+              "saveFailed": "保存提供商失败"
+            },
+            "providerTypes": {
+              "llm": "LLM (大语言模型)",
+              "platform": "Platform (聚合平台)",
+              "embedding": "Embedding (向量化)",
+              "tts": "TTS (文本转语音)",
+              "stt": "STT (语音转文本)",
+              "vision": "Vision (图像识别)",
+              "multimodal": "Multimodal (多模态)"
+            },
+            "authTypes": {
+              "api_key": "API Key",
+              "bearer_token": "Bearer Token",
+              "oauth2": "OAuth 2.0",
+              "basic_auth": "Basic Auth"
+            },
+            "status": {
+              "enabled": "已启用",
+              "disabled": "已禁用",
+              "default": "默认提供商"
+            },
+            "form": {
+              "name": {
+                "label": "提供商名称",
+                "placeholder": "例如：Dify、OpenAI、Claude",
+                "required": "提供商名称不能为空"
+              },
+              "type": {
+                "label": "提供商类型",
+                "placeholder": "选择提供商类型",
+                "required": "请选择提供商类型"
+              },
+              "baseUrl": {
+                "label": "API URL",
+                "placeholder": "例如：https://api.dify.ai/v1",
+                "required": "API URL不能为空",
+                "invalid": "请输入有效的URL格式"
+              },
+              "authType": {
+                "label": "认证类型",
+                "placeholder": "选择认证类型",
+                "required": "请选择认证类型"
+              },
+              "isActive": {
+                "label": "启用状态"
+              },
+              "isDefault": {
+                "label": "默认提供商",
+                "description": "系统中只能有一个默认提供商，设置后其他提供商的默认状态将被自动清除",
+                "setAsDefault": "设为默认",
+                "notDefault": "非默认"
+              },
+              "authMethod": "认证方式"
+            },
+            "buttons": {
+              "cancel": "取消",
+              "save": "保存",
+              "saving": "保存中...",
+              "delete": "删除"
+            }
+          }
+        },
+        "layout": {
+          "loading": "加载应用实例中...",
+          "noInstances": "暂无应用实例",
+          "noInstancesForProvider": "该提供商暂无应用实例",
+          "addFirstApp": "添加第一个应用",
+          "searchPlaceholder": "搜索应用...",
+          "defaultApp": "默认",
+          "delete": "删除",
+          "deleteConfirm": "确定要删除此应用实例吗？此操作不可撤销。",
+          "defaultAppCannotDelete": "默认应用不可删除，请先设置其他应用为默认应用",
+          "instanceNotFound": "未找到要删除的实例",
+          "deleteInstanceFailed": "删除应用实例失败",
+          "setDefaultConfirm": "确定要将\"{name}\"设置为默认应用吗？",
+          "instanceNotFoundForDefault": "未找到要设置的实例",
+          "setDefaultFailed": "设置默认应用失败",
+          "setAsDefault": "设为默认应用"
+        },
+        "fields": {
+          "apiUrl": "API URL (config.api_url)",
+          "apiKey": "API 密钥 (key_value)",
+          "providerBinding": "供应商绑定",
+          "urlPlaceholder": "URL 将自动使用所选供应商的配置",
+          "urlBindingInfo": "URL 与服务供应商绑定，修改请在\"管理提供商\"中操作",
+          "currentProvider": "当前供应商: {name}",
+          "unknownProvider": "未知供应商",
+          "keyConfigured": "已配置",
+          "keyNotConfigured": "未配置",
+          "keyPlaceholderEdit": "留空则不更新 API 密钥",
+          "keyPlaceholderNew": "输入 API 密钥",
+          "keyEditHint": "留空输入框将保持现有密钥不变",
+          "tagsLabel": "应用标签 (tags)",
+          "tagCategories": {
+            "modelType": "模型类型",
+            "useCase": "应用场景",
+            "features": "技术特性"
+          },
+          "predefinedTags": {
+            "conversationModel": "对话模型",
+            "reasoningModel": "推理模型",
+            "documentModel": "文档模型",
+            "multimodal": "多模态",
+            "textGeneration": "文本生成",
+            "codeGeneration": "代码生成",
+            "dataAnalysis": "数据分析",
+            "translation": "翻译",
+            "highAccuracy": "高精度",
+            "fastResponse": "快速响应",
+            "localDeployment": "本地部署",
+            "enterpriseGrade": "企业级"
+          },
+          "customTagPlaceholder": "自定义标签（回车添加）",
+          "tagHelpText": "标签用于应用分类和搜索"
+        },
+        "providerSelector": {
+          "placeholder": "请选择提供商",
+          "defaultLabel": "默认",
+          "noProviders": "暂无可用的服务提供商"
+        },
+        "customProviderSelector": {
+          "placeholder": "请选择提供商",
+          "defaultLabel": "默认",
+          "noProviders": "暂无可用的服务提供商"
+        },
+        "instanceFilter": {
+          "allApps": "全部应用",
+          "providerApps": "{name}应用",
+          "defaultLabel": "默认",
+          "totalCount": "共 {count} 个",
+          "noProviders": "暂无可用的服务提供商"
+        },
+        "events": {
+          "defaultSetSuccess": "默认应用设置成功"
+        },
+        "instanceSaveHandlers": {
+          "errors": {
+            "selectProvider": "请选择服务提供商",
+            "invalidProvider": "选择的服务提供商无效",
+            "inactiveProvider": "选择的服务提供商未激活",
+            "createFailed": "创建应用实例失败",
+            "updateFailed": "更新应用实例失败",
+            "setDefaultFailed": "设置默认应用失败"
+          },
+          "success": {
+            "instanceCreated": "应用实例创建成功",
+            "instanceUpdated": "应用实例更新成功",
+            "setAsDefault": "应用实例已设为默认应用"
+          },
+          "warnings": {
+            "createSuccessButDefaultFailed": "应用创建成功，但设置默认应用失败"
+          }
+        },
+        "difyParametersPanel": {
+          "title": "{instanceName} - Dify 参数配置",
+          "defaultInstanceName": "应用实例",
+          "unsavedChanges": "您有未保存的更改",
+          "sections": {
+            "basic": {
+              "title": "基础配置",
+              "openingStatement": {
+                "label": "开场白内容",
+                "placeholder": "输入开场白内容..."
+              },
+              "suggestedQuestions": {
+                "label": "开场推荐问题",
+                "addButton": "添加推荐问题",
+                "placeholder": "输入推荐问题..."
+              }
+            },
+            "fileUpload": {
+              "title": "文件上传功能",
+              "enabled": "已启用",
+              "disabled": "已禁用"
+            },
+            "speechToText": {
+              "title": "语音转文本",
+              "enabled": "已启用",
+              "disabled": "已禁用"
+            },
+            "textToSpeech": {
+              "title": "文本转语音",
+              "enabled": "已启用",
+              "disabled": "已禁用",
+              "enableLabel": "启用文本转语音",
+              "voiceType": {
+                "label": "语音类型",
+                "placeholder": "例如: alloy, echo, fable"
+              },
+              "language": {
+                "label": "语言",
+                "selectPlaceholder": "选择语言",
+                "options": {
+                  "zh": "中文",
+                  "en": "英文",
+                  "ja": "日文",
+                  "ko": "韩文"
+                }
+              },
+              "autoPlay": {
+                "label": "自动播放",
+                "enabled": "开启",
+                "disabled": "关闭"
+              }
+            },
+            "retrieverResource": {
+              "title": "引用和归属"
+            },
+            "annotationReply": {
+              "title": "标记回复"
+            },
+            "userInputForm": {
+              "title": "用户输入表单",
+              "fieldsCount": "{count} 个字段",
+              "description": "用户输入表单配置通常由 Dify 应用自动生成，建议通过同步功能获取最新配置。",
+              "fieldInfo": "变量名: {variable} | 必填: {required} | 默认值: {defaultValue}",
+              "fieldRequired": "是",
+              "fieldOptional": "否",
+              "fieldNoDefault": "无",
+              "fieldLabel": "字段 {index}",
+              "noFields": "暂无用户输入表单配置"
+            },
+            "systemParameters": {
+              "title": "系统参数",
+              "fileSizeLimit": "文档大小限制 (MB)",
+              "imageSizeLimit": "图片大小限制 (MB)",
+              "audioSizeLimit": "音频大小限制 (MB)",
+              "videoSizeLimit": "视频大小限制 (MB)"
+            }
+          },
+          "fileUploadModal": {
+            "title": "文件上传配置",
+            "uploadMethod": {
+              "label": "上传文件类型",
+              "local": "本地上传",
+              "url": "URL链接",
+              "both": "两种方式"
+            },
+            "maxFiles": {
+              "label": "最大文件数量",
+              "description": "文档 < 15MB, 图片 < 10MB, 音频 < 50MB, 视频 < 100MB"
+            },
+            "fileTypes": {
+              "label": "支持的文件类型",
+              "image": "图片",
+              "document": "文档",
+              "audio": "音频",
+              "video": "视频",
+              "other": "其他文件类型",
+              "customPlaceholder": "例如: zip, rar, 7z, tar",
+              "customDescription": "支持格式：zip, rar, 7z, tar, gz, bz2, xz 等"
+            }
+          },
+          "buttons": {
+            "cancel": "取消",
+            "save": "保存",
+            "confirm": "确定"
+          }
+        },
+        "page": {
+          "title": {
+            "edit": "编辑应用实例",
+            "add": "添加应用实例"
+          },
+          "unsavedChanges": "有未保存的更改",
+          "validation": {
+            "instanceId": {
+              "noSpaces": "不能包含空格（会影响URL路由）",
+              "invalidChars": "只能包含字母、数字、连字符(-)、下划线(_)和点(.)",
+              "tooLong": "长度不能超过50个字符",
+              "mustStartWithAlphanumeric": "必须以字母或数字开头",
+              "formatError": "应用ID格式错误",
+              "notModifiable": "应用 ID 创建后不可修改",
+              "formatDescription": "只能包含字母、数字、连字符(-)、下划线(_)和点(.)，不能包含空格。可先同步配置自动生成。"
+            },
+            "formValidationFailed": "表单验证失败",
+            "fillApiCredentials": "请先填写API URL和API Key",
+            "fillInstanceId": "请先填写应用ID"
+          },
+          "sync": {
+            "basicInfo": "基本信息",
+            "paramConfig": "参数配置",
+            "noDataReceived": "未能从 Dify API 获取到任何配置数据，请检查应用ID和API配置是否正确",
+            "successMessage": "成功从 Dify API 同步{items}！",
+            "autoGeneratedId": " 已自动生成应用ID：{instanceId}",
+            "syncFailed": "同步配置失败",
+            "syncFailedTitle": "同步失败",
+            "syncing": "同步中...",
+            "syncFromDify": "从Dify同步配置",
+            "syncFromDifyWithAutoId": "从 Dify API 同步配置（应用ID为空时将自动生成）",
+            "syncFromDifyDescription": "从 Dify API 同步配置",
+            "syncButtonDisabled": "请先填写API URL和API Key"
+          },
+          "defaultApp": {
+            "setAsDefault": "设为默认",
+            "isDefault": "默认应用",
+            "willSetAsDefault": "将设为默认",
+            "setDefaultConfirm": "确定要将\"{name}\"设置为默认应用吗？",
+            "setDefaultSuccess": "默认应用设置成功",
+            "setDefaultFailed": "设置默认应用失败",
+            "instanceNotFound": "实例ID不存在，无法设置为默认应用"
+          },
+          "provider": {
+            "title": "服务提供商",
+            "current": "当前应用的服务提供商（不可修改）",
+            "select": "选择服务提供商",
+            "unknown": "未知提供商",
+            "selectPlaceholder": "请选择提供商",
+            "configUpdated": "提供商配置已更新"
+          },
+          "fields": {
+            "instanceId": {
+              "label": "应用 ID (instance_id) *",
+              "placeholder": "输入应用 ID",
+              "generateButton": "生成ID",
+              "generateTooltip": "点击生成随机UUID作为应用ID"
+            },
+            "displayName": {
+              "label": "显示名称 (display_name) *",
+              "placeholder": "输入显示名称"
+            },
+            "description": {
+              "label": "应用描述 (description)",
+              "placeholder": "输入应用描述"
+            }
+          },
+          "appType": {
+            "label": "应用类型 (app_type) *",
+            "model": {
+              "title": "模型 (Model)",
+              "description": "用于模型切换"
+            },
+            "marketplace": {
+              "title": "应用市场 (Marketplace)",
+              "description": "用于应用市场"
+            },
+            "note": "选择\"模型\"类型的应用会出现在聊天界面的模型选择器中"
+          },
+          "syncConfirm": {
+            "updateDescription": "是否将描述更新为：\"{description}\"？"
+          },
+          "difyAppTypeSelector": {
+            "title": "Dify 应用类型 (dify_apptype) *",
+            "titleCompact": "Dify 应用类型",
+            "description": "选择适合您应用场景的 Dify 应用类型。不同类型具有不同的功能特性和适用场景。"
+          },
+          "difyConfig": {
+            "title": "Dify 参数配置",
+            "appTypeNote": "选择\"模型\"类型的应用会出现在聊天界面的模型选择器中"
+          }
+        },
+        "useApiConfigEvents": {
+          "defaultInstanceSetSuccess": "默认应用设置成功"
+        }
+      },
+      "content": {
+        "page": {
+          "title": "内容管理",
+          "subtitle": "管理主页和关于页面的多语言内容",
+          "showPreview": "显示预览",
+          "fullscreenPreview": "全屏预览",
+          "closePreview": "关闭预览",
+          "loadingEditor": {
+            "about": "无法加载关于页面编辑器。",
+            "home": "无法加载主页编辑器。"
+          },
+          "loadingPreview": "加载预览...",
+          "messages": {
+            "loadFailed": "加载翻译数据失败",
+            "saveSuccess": "配置保存成功",
+            "saveFailed": "保存配置失败，请重试"
+          },
+          "saveActions": {
+            "hasChanges": "有未保存的更改",
+            "saving": "正在保存...",
+            "allSaved": "所有更改已保存",
+            "reset": "重置",
+            "save": "保存更改",
+            "saving_": "保存中..."
+          }
+        },
+        "tabs": {
+          "about": "关于页面",
+          "home": "主页"
+        },
+        "previewToolbar": {
+          "aboutPreview": "关于页面预览",
+          "homePreview": "主页预览"
+        },
+        "editor": {
+          "common": {
+            "editLanguage": "编辑语言",
+            "selectLanguage": "选择语言",
+            "cardNumber": "卡片 #{number}"
+          },
+          "home": {
+            "pageTitle": "页面标题 (title)",
+            "subtitle": "副标题 (subtitle)",
+            "features": "特性卡片 (features)",
+            "featureTitle": "标题 (title)",
+            "featureDescription": "描述 (description)",
+            "getStarted": "主按钮 (getStarted)",
+            "learnMore": "次按钮 (learnMore)",
+            "copyright": "版权信息 (copyright)",
+            "copyrightPrefix": "前缀 (prefix)",
+            "copyrightLinkText": "链接文字 (linkText)",
+            "copyrightSuffix": "后缀 (suffix)"
+          },
+          "about": {
+            "pageTitle": "页面标题 (title)",
+            "subtitle": "副标题 (subtitle)",
+            "mission": "使命描述 (mission.description)",
+            "values": "价值观卡片 (values.items)",
+            "valueTitle": "标题 (title)",
+            "valueDescription": "描述 (description)",
+            "buttonText": "按钮文字 (buttonText)",
+            "copyright": "版权信息 (copyright)",
+            "copyrightPrefix": "前缀 (prefix)",
+            "copyrightLinkText": "链接文字 (linkText)",
+            "copyrightSuffix": "后缀 (suffix)"
+          }
+        }
+      },
+      "users": {
+        "title": "用户管理",
+        "subtitle": "管理系统用户账户、权限和访问控制",
+        "stats": {
+          "totalUsers": "总用户数",
+          "activeUsers": "活跃用户",
+          "suspendedUsers": "已暂停",
+          "pendingUsers": "待激活",
+          "adminUsers": "管理员",
+          "managerUsers": "经理",
+          "regularUsers": "普通用户",
+          "newUsersToday": "今日新增",
+          "activeUsersRatio": "占总用户比例",
+          "newUsersThisWeek": "本周其他天数"
+        },
+        "filters": {
+          "searchPlaceholder": "搜索用户邮箱、姓名或用户名...",
+          "advancedFilters": "高级筛选",
+          "reset": "重置",
+          "rolePermissions": "角色权限",
+          "accountStatus": "账户状态",
+          "authSource": "认证来源",
+          "sortBy": "排序方式",
+          "roleOptions": {
+            "all": "全部角色",
+            "admin": "管理员",
+            "manager": "经理",
+            "user": "普通用户"
+          },
+          "statusOptions": {
+            "all": "全部状态",
+            "active": "活跃",
+            "suspended": "已暂停",
+            "pending": "待激活"
+          },
+          "authSourceOptions": {
+            "all": "全部来源",
+            "email": "📧 邮箱",
+            "sso": "SSO认证",
+            "phone": "📱 手机号"
+          },
+          "sortOptions": {
+            "createdAt": "注册时间",
+            "lastSignIn": "最后登录",
+            "email": "邮箱",
+            "fullName": "姓名"
+          },
+          "sortOrder": {
+            "desc": "最新在前",
+            "asc": "最旧在前"
+          }
+        },
+        "table": {
+          "headers": {
+            "userInfo": "用户信息",
+            "contact": "联系方式",
+            "groups": "群组",
+            "rolePermissions": "角色权限",
+            "status": "状态",
+            "lastLogin": "最后登录",
+            "registerTime": "注册时间"
+          },
+          "loading": "加载用户数据中...",
+          "loadingSubtext": "请稍候，正在获取最新的用户信息",
+          "noData": "暂无用户数据",
+          "noDataSubtext": "没有找到符合条件的用户，请尝试调整筛选条件",
+          "noDataHint": "您可以重置筛选条件或联系管理员添加新用户"
+        },
+        "batchOperations": {
+          "selected": "已选择 {count} 个用户",
+          "cancelSelection": "取消选择",
+          "setAsAdmin": "设为管理员",
+          "setAsManager": "设为经理",
+          "setAsUser": "设为普通用户",
+          "activate": "激活",
+          "suspend": "暂停"
+        },
+        "actions": {
+          "refreshData": "刷新数据",
+          "addUser": "添加用户",
+          "addUserInDevelopment": "添加用户功能开发中",
+          "viewUser": "查看用户：{name}",
+          "editUser": "编辑用户：{name}",
+          "viewDetails": "查看详情",
+          "editInfo": "编辑信息",
+          "changeRole": "更改角色",
+          "changeStatus": "更改状态",
+          "deleteUser": "删除用户",
+          "current": "(当前)",
+          "self": "(自己)",
+          "admin": "(管理员)",
+          "notSet": "未设置",
+          "notSetEmail": "未设置邮箱",
+          "notSetPhone": "未设置手机",
+          "defaultUser": "用户",
+          "emailIcon": "📧",
+          "phoneIcon": "📱",
+          "moreGroups": "+{count} 个群组",
+          "notInGroup": "未加入群组",
+          "moreGroupsTooltip": "还有 {count} 个群组：{names}",
+          "confirm": "确认"
+        },
+        "pagination": {
+          "showing": "显示第 {start} - {end} 条， 共 {total} 条记录",
+          "previous": "上一页",
+          "next": "下一页"
+        },
+        "messages": {
+          "cannotIncludeSelf": "不能在批量操作中包含自己",
+          "cannotDowngradeAdmin": "不能在批量操作中降级其他管理员",
+          "cannotChangeOwnRole": "不能修改自己的角色",
+          "cannotDowngradeOtherAdmin": "不能降级其他管理员",
+          "cannotDeleteSelf": "不能删除自己",
+          "cannotDeleteOtherAdmin": "不能删除其他管理员",
+          "roleChangeSuccess": "已将 {name} 的角色更改为{role}",
+          "statusChangeSuccess": "已将 {name} 的状态更改为{status}",
+          "batchRoleChangeSuccess": "已批量更改 {count} 个用户的角色",
+          "batchStatusChangeSuccess": "已批量更改 {count} 个用户的状态",
+          "deleteConfirm": "确定要删除用户 {name} 吗？此操作不可撤销。",
+          "deleteSuccess": "已删除用户 {name}",
+          "roles": {
+            "admin": "管理员",
+            "manager": "经理",
+            "user": "普通用户"
+          },
+          "statuses": {
+            "active": "活跃",
+            "suspended": "已暂停",
+            "pending": "待激活"
+          },
+          "roleChangeConfirm": "将{name}的角色更改为{role} ？",
+          "statusChangeConfirm": "将{name}的状态更改为{status} ？",
+          "batchRoleChangeConfirm": "将{count}个用户的角色更改为{role} ？",
+          "batchStatusChangeConfirm": "将{count}个用户的状态更改为{status} ？"
+        }
+      },
+      "ssoProviders": {
+        "title": "SSO提供商管理",
+        "subtitle": "管理单点登录提供商及其配置",
+        "addProvider": "添加提供商",
+        "refresh": "刷新数据",
+        "error": "错误",
+        "filters": {
+          "searchPlaceholder": "搜索提供商名称或协议...",
+          "reset": "重置"
+        },
+        "table": {
+          "headers": {
+            "name": "名称",
+            "protocol": "协议",
+            "status": "状态",
+            "order": "顺序",
+            "created": "创建时间"
+          },
+          "enabled": "已启用",
+          "disabled": "已禁用",
+          "button": "按钮",
+          "noProviders": "未找到SSO提供商",
+          "createFirst": "创建您的第一个SSO提供商开始使用",
+          "loadingProviders": "正在加载SSO提供商...",
+          "actions": {
+            "viewDetails": "查看详情",
+            "edit": "编辑",
+            "enable": "启用",
+            "disable": "禁用",
+            "delete": "删除"
+          }
+        },
+        "form": {
+          "createTitle": "创建SSO提供商",
+          "editTitle": "编辑SSO提供商",
+          "createDescription": "配置新的单点登录提供商",
+          "editDescription": "修改现有SSO提供商的配置",
+          "tabs": {
+            "basicInfo": "基本信息",
+            "protocolConfig": "协议配置",
+            "security": "安全设置",
+            "uiSettings": "界面设置"
+          },
+          "fields": {
+            "providerName": "提供商名称",
+            "providerNamePlaceholder": "示例大学SSO",
+            "protocol": "协议",
+            "selectProtocol": "选择协议",
+            "displayOrder": "显示顺序",
+            "buttonText": "按钮文本",
+            "buttonTextPlaceholder": "留空则使用提供商名称",
+            "enableProvider": "启用此提供商",
+            "baseUrl": "基础URL",
+            "baseUrlPlaceholder": "https://sso.example.com",
+            "loginEndpoint": "登录端点",
+            "loginEndpointPlaceholder": "/login",
+            "logoutEndpoint": "注销端点",
+            "logoutEndpointPlaceholder": "/logout",
+            "validateEndpoint": "验证端点",
+            "validateEndpointPlaceholder": "/serviceValidate",
+            "validateV3Endpoint": "V3验证端点",
+            "validateV3EndpointPlaceholder": "/p3/serviceValidate",
+            "attributeMapping": "属性映射",
+            "employeeId": "员工ID",
+            "employeeIdPlaceholder": "cas:user",
+            "username": "用户名",
+            "usernamePlaceholder": "cas:username",
+            "requireHttps": "要求HTTPS",
+            "validateCertificates": "验证SSL证书",
+            "allowedRedirectHosts": "允许的重定向主机",
+            "allowedRedirectHostsPlaceholder": "example.com\nsubdomain.example.com",
+            "allowedRedirectHostsHint": "每行输入一个主机",
+            "icon": "图标",
+            "iconPlaceholder": "🏛️",
+            "theme": "主题",
+            "logoUrl": "Logo URL",
+            "logoUrlPlaceholder": "https://example.com/logo.png",
+            "description": "描述",
+            "descriptionPlaceholder": "大学SSO系统"
+          },
+          "themes": {
+            "primary": "主要",
+            "secondary": "次要",
+            "default": "默认",
+            "outline": "轮廓"
+          },
+          "advancedSettings": "高级设置",
+          "showRawJson": "显示原始JSON",
+          "hideRawJson": "隐藏原始JSON",
+          "rawJsonConfig": "原始JSON配置",
+          "actions": {
+            "cancel": "取消",
+            "save": "保存",
+            "saving": "保存中..."
+          },
+          "messages": {
+            "fixJsonErrors": "请先修复JSON错误再保存",
+            "createSuccess": "SSO提供商创建成功",
+            "updateSuccess": "SSO提供商更新成功",
+            "unexpectedError": "发生意外错误"
+          }
+        },
+        "deleteDialog": {
+          "title": "确认删除",
+          "message": "确定要删除SSO提供商\"{name}\"吗？此操作不可撤销，将禁用使用此提供商的用户的SSO登录功能。",
+          "cancel": "取消",
+          "delete": "删除",
+          "deleting": "删除中...",
+          "success": "\"{name}\"已成功删除"
+        },
+        "detailsModal": {
+          "title": "提供商详情和配置概览",
+          "basicInfo": "基本信息",
+          "protocol": "协议",
+          "status": "状态",
+          "displayOrder": "显示顺序",
+          "buttonText": "按钮文本",
+          "protocolConfig": "协议配置",
+          "baseUrl": "基础URL",
+          "login": "登录",
+          "logout": "注销",
+          "securitySettings": "安全设置",
+          "requireHttps": "要求HTTPS",
+          "validateCertificates": "验证证书",
+          "yes": "是",
+          "no": "否",
+          "uiConfig": "界面配置",
+          "theme": "主题",
+          "icon": "图标",
+          "description": "描述",
+          "timestamps": "时间戳",
+          "created": "创建于",
+          "updated": "更新于",
+          "actions": {
+            "close": "关闭",
+            "editProvider": "编辑提供商"
+          }
+        },
+        "stats": {
+          "totalProviders": "提供商总数",
+          "allSsoProviders": "所有SSO提供商已配置",
+          "enabled": "已启用",
+          "percentOfTotal": "占总数",
+          "noProviders": "暂无配置的提供商",
+          "disabled": "已禁用",
+          "activeProtocols": "活跃协议",
+          "differentProtocolTypes": "不同协议类型",
+          "protocolBreakdown": "协议分布"
+        }
+      },
+      "groups": {
+        "title": "群组管理",
+        "subtitle": "管理用户群组和应用权限分配",
+        "stats": {
+          "totalGroups": "群组总数",
+          "totalMembers": "成员总数",
+          "averageMembers": "平均成员数",
+          "activeGroups": "活跃群组"
+        },
+        "header": {
+          "title": "群组管理",
+          "subtitle": "管理用户群组和应用权限分配",
+          "refreshData": "刷新数据",
+          "createGroup": "创建群组"
+        },
+        "search": {
+          "placeholder": "搜索群组名称或描述...",
+          "searchResults": "搜索结果",
+          "keyword": "关键词",
+          "noResults": "未找到匹配的群组",
+          "noResultsHint": "尝试使用其他关键词搜索"
+        },
+        "list": {
+          "noGroups": "暂无群组",
+          "noGroupsHint": "点击\"创建群组\"按钮来创建第一个群组",
+          "loading": "加载群组列表...",
+          "memberCount": "{count} 成员",
+          "createdAt": "创建时间",
+          "actions": {
+            "manageMembers": "成员管理",
+            "editGroup": "编辑群组",
+            "deleteGroup": "删除群组"
+          }
+        },
+        "createModal": {
+          "title": "创建群组",
+          "nameLabel": "群组名称",
+          "nameRequired": "群组名称不能为空",
+          "nameTooShort": "群组名称至少需要2个字符",
+          "nameTooLong": "群组名称不能超过50个字符",
+          "namePlaceholder": "请输入群组名称",
+          "descriptionLabel": "群组描述",
+          "descriptionTooLong": "描述不能超过200个字符",
+          "descriptionPlaceholder": "请输入群组描述（可选）",
+          "creating": "创建中...",
+          "createButton": "创建群组",
+          "cancel": "取消",
+          "createSuccess": "群组\"{name}\"创建成功"
+        },
+        "editModal": {
+          "title": "编辑群组",
+          "nameLabel": "群组名称",
+          "nameRequired": "群组名称不能为空",
+          "nameTooShort": "群组名称至少需要2个字符",
+          "nameTooLong": "群组名称不能超过50个字符",
+          "namePlaceholder": "请输入群组名称",
+          "descriptionLabel": "群组描述",
+          "descriptionTooLong": "描述不能超过200个字符",
+          "descriptionPlaceholder": "请输入群组描述（可选）",
+          "updating": "更新中...",
+          "updateButton": "保存更改",
+          "cancel": "取消",
+          "noChanges": "没有检测到任何更改",
+          "updateSuccess": "群组\"{name}\"更新成功"
+        },
+        "membersModal": {
+          "title": "群组成员管理",
+          "subtitle": "{groupName} · 共 {count} 个成员",
+          "addMember": "添加成员",
+          "searchPlaceholder": "搜索成员...",
+          "loading": "加载成员列表...",
+          "noMembers": "暂无群组成员",
+          "noMembersHint": "点击\"添加成员\"按钮来邀请用户加入群组",
+          "noSearchResults": "未找到匹配的成员",
+          "noSearchResultsHint": "尝试使用其他关键词搜索",
+          "unknownUser": "未知用户",
+          "joinedAt": "加入于",
+          "removeMember": "移除成员",
+          "removeMemberConfirm": "确定要将\"{memberName}\"从群组\"{groupName}\"中移除吗？",
+          "removeMemberSuccess": "已移除成员\"{memberName}\""
+        },
+        "addMembersModal": {
+          "title": "添加成员",
+          "subtitle": "选择用户并将其添加到群组\"{groupName}\"",
+          "searchPlaceholder": "搜索用户名、姓名或邮箱...",
+          "loading": "加载用户列表...",
+          "noUsers": "没有可添加的用户",
+          "noSearchResults": "未找到匹配的用户",
+          "selectAll": "全选",
+          "deselectAll": "取消全选",
+          "addSelected": "添加 {count} 个成员",
+          "tableHeaders": {
+            "userInfo": "用户信息",
+            "role": "角色"
+          },
+          "userRoles": {
+            "admin": "管理员",
+            "manager": "经理",
+            "user": "普通用户"
+          },
+          "unknownUser": "未知用户",
+          "pagination": {
+            "showing": "显示第 {start} - {end} 条，共 {total} 条记录",
+            "previous": "上一页",
+            "next": "下一页"
+          },
+          "addSuccess": "成功添加 {count} 个成员到群组",
+          "addPartialSuccess": "{errorCount} 个成员添加失败"
+        },
+        "messages": {
+          "deleteConfirm": "确定要删除群组\"{name}\"吗？此操作不可撤销。",
+          "deleteSuccess": "已删除群组\"{name}\"",
+          "loadError": "加载群组数据失败",
+          "createError": "创建群组失败",
+          "updateError": "更新群组失败",
+          "deleteError": "删除群组失败",
+          "addMemberError": "添加成员失败",
+          "removeMemberError": "移除成员失败"
+        }
+      },
+      "permissions": {
+        "header": {
+          "title": "应用权限管理",
+          "subtitle": "统一管理应用可见性和群组权限分配",
+          "refreshButton": "刷新数据"
+        },
+        "searchAndFilter": {
+          "searchPlaceholder": "搜索应用名称或描述...",
+          "filterLabel": "应用类型：",
+          "filterOptions": {
+            "all": "全部应用",
+            "public": "公开应用",
+            "groupOnly": "群组应用",
+            "private": "私有应用"
+          }
+        },
+        "layout": {
+          "appListTitle": "应用列表",
+          "appListSubtitle": "选择应用来配置权限",
+          "permissionPanelTitle": "权限配置",
+          "permissionPanelSubtitle": "管理应用可见性和群组权限"
+        },
+        "appList": {
+          "noApps": "暂无应用",
+          "noAppsDescription": "请先创建应用实例",
+          "loading": "加载中...",
+          "unknown": "未知",
+          "visibility": {
+            "public": "公开",
+            "groupOnly": "群组",
+            "private": "私有"
+          }
+        },
+        "permissionPanel": {
+          "selectApp": {
+            "title": "选择应用",
+            "description": "从左侧应用列表中选择一个应用来配置权限"
+          },
+          "visibilitySettings": {
+            "title": "可见性设置",
+            "currentSetting": "当前设置",
+            "options": {
+              "public": {
+                "label": "公开应用",
+                "description": "所有用户都可以访问此应用"
+              },
+              "groupOnly": {
+                "label": "群组应用",
+                "description": "仅授权群组的成员可以访问"
+              },
+              "private": {
+                "label": "私有应用",
+                "description": "仅管理员可以访问此应用"
+              }
+            }
+          },
+          "groupPermissions": {
+            "title": "群组权限",
+            "description": "选择哪些群组可以访问此应用",
+            "noGroups": {
+              "title": "暂无群组",
+              "description": "请先创建群组才能设置应用权限"
+            },
+            "status": {
+              "enabled": "已启用",
+              "disabled": "已禁用"
+            },
+            "actions": {
+              "enable": "启用访问",
+              "disable": "禁用访问"
+            },
+            "memberCount": "{count} 成员"
+          },
+          "permissionExplanation": {
+            "title": "权限说明",
+            "public": "公开应用：所有用户都可以访问",
+            "groupOnly": "群组应用：仅授权群组的成员可以访问",
+            "private": "私有应用：仅管理员可以访问"
+          }
+        },
+        "messages": {
+          "visibilityUpdateSuccess": "应用可见性已更新为\"{visibility}\"",
+          "groupPermissionEnabled": "已启用{groupName}对此应用的访问权限",
+          "groupPermissionDisabled": "已禁用{groupName}对此应用的访问权限",
+          "loadAppsError": "加载应用列表失败",
+          "loadGroupsError": "加载群组列表失败",
+          "updateVisibilityError": "更新应用可见性失败",
+          "updateGroupPermissionError": "更新群组权限失败"
+        }
+      }
+    },
+    "about": {
+      "sections": [
+        {
+          "id": "section-1754655785513-1coqlomn8",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-drqxj9u2y",
+                "type": "heading",
+                "props": {
+                  "content": "关于 AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785513-9ofzcdpsf",
+                "type": "paragraph",
+                "props": {
+                  "content": "连接 AI 与企业，打造大模型应用新体验",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-9prn2le6b",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-tx96kmz4r",
+                "type": "heading",
+                "props": {
+                  "content": "我们的使命",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785513-kjjf0b6zo",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI 致力于利用大型语言模型的力量，为企业提供创新的应用解决方案。我们整合了多种模型供应商的能力，并基于 Dify 后端提供稳定、可靠的服务，帮助团队充分利用 AI 技术的价值。",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-s2cs5yr9y",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-ldeft2c7k",
+                "type": "heading",
+                "props": {
+                  "content": "我们的价值观",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785513-igu96ir94",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "技术创新",
+                      "description": "持续集成前沿的大模型技术，为企业提供领先的 AI 解决方案"
+                    },
+                    {
+                      "title": "数据安全",
+                      "description": "支持私有化部署和严格的数据保护措施，确保企业数据的安全与隐私"
+                    },
+                    {
+                      "title": "灵活定制",
+                      "description": "提供高度可定制的解决方案，满足不同行业和场景的特定需求"
+                    },
+                    {
+                      "title": "知识增强",
+                      "description": "通过 RAG 技术实现私有知识库的整合，增强模型的上下文感知能力"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-2pmrtihgq",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-3l83pa52m",
+                "type": "button",
+                "props": {
+                  "text": "开始探索",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-byfail2zl",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-ip1qbopuu",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. 探索大模型应用的未来。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.513Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.513Z",
+        "locale": "zh-CN"
+      }
+    }
+  },
+  "components": {
+    "chat": {
+      "messageActions": {
+        "copy": "复制",
+        "copied": "已复制",
+        "edit": "编辑",
+        "regenerate": "重新生成",
+        "useful": "有用",
+        "notUseful": "无用",
+        "rated": "已评价"
+      },
+      "referenceSources": {
+        "title": "引用了 {count} 个知识库资源",
+        "knowledgeBase": "知识库",
+        "expand": "展开全文",
+        "collapse": "收起",
+        "copy": "复制",
+        "copied": "已复制",
+        "copyFailed": "复制失败",
+        "relevanceScore": "相关度",
+        "wordCount": "{count} 字",
+        "page": "第 {page} 页"
+      },
+      "thinkBlock": {
+        "thinking": "正在深度思考",
+        "stopped": "思考已停止",
+        "completed": "已深度思考"
+      }
+    },
+    "chatInput": {
+      "attachmentPreview": {
+        "fileLimitExceeded": "已超出文件数量限制 ({current}/{max})，请删除部分文件"
+      }
+    },
+    "ui": {
+      "resizableSplitPane": {
+        "tooltip": "拖拽调整面板大小，双击重置"
+      },
+      "notificationBar": {
+        "closeNotification": "关闭通知"
+      },
+      "suggestedQuestionButton": {
+        "ariaLabel": "推荐问题: {question}"
+      },
+      "copyButton": {
+        "copy": "复制内容",
+        "copied": "已复制",
+        "noContent": "无内容可复制"
+      },
+      "userAvatar": {
+        "alt": "的头像"
+      }
+    }
+  },
+  "debug": {
+    "setDefaultApp": "设置默认应用 - 传入ID:",
+    "currentInstances": "当前所有实例:",
+    "instanceNotFound": "未找到实例，传入ID:",
+    "foundInstance": "找到实例:",
+    "setDefaultFailed": "设置默认应用失败:",
+    "syncConfig": "同步配置",
+    "syncFailed": "同步失败:",
+    "syncSuccess": "同步成功"
+  },
+  "buttons": {
+    "syncInProgress": "同步中...",
+    "syncConfig": "同步配置",
+    "tooltip": {
+      "syncFromDify": "从 Dify API 同步配置",
+      "syncFromDifyEdit": "从 Dify API 同步配置",
+      "syncFromDifyCreate": "从 Dify API 同步配置（应用ID为空时将自动生成）",
+      "fillCredentials": "请先填写API URL和API Key"
+    }
+  },
+  "confirmDialog": {
+    "updateDisplayName": "是否将显示名称更新为：\"{name}\"？"
+  },
+  "errors": {
+    "notFound": "页面未找到",
+    "serverError": "服务器错误",
+    "unauthorized": "未授权访问"
+  },
+  "navbar": {
+    "user": {
+      "userMenu": "用户菜单",
+      "login": "登录",
+      "logout": "退出登录",
+      "loggingOut": "退出中...",
+      "register": "注册新账户",
+      "history": "历史对话",
+      "settings": "设置",
+      "about": "关于",
+      "admin": "管理后台",
+      "loginPrompt": "登录以使用更多功能",
+      "loginDescription": "访问您的对话历史和个人设置"
+    },
+    "conversation": {
+      "newChat": "新对话",
+      "creating": "创建中...",
+      "loading": "加载中...",
+      "rename": "重命名",
+      "delete": "删除对话",
+      "star": "收藏",
+      "unstar": "取消收藏",
+      "appsMarket": "应用市场",
+      "renameDialog": {
+        "title": "重命名对话",
+        "placeholder": "输入新的对话名称",
+        "confirmText": "确认重命名"
+      },
+      "deleteDialog": {
+        "title": "删除对话",
+        "message": "确定要删除会话 \"{title}\" 吗？此操作无法撤销。",
+        "confirmText": "确认删除"
+      },
+      "createInProgress": "对话正在创建中，请稍后再试。",
+      "incompleteInfo": "对话信息不完整，无法操作。",
+      "renameFailed": "重命名会话失败。",
+      "deleteFailed": "删除会话失败。",
+      "operationError": "操作出错，请稍后再试。"
+    },
+    "workflow": {
+      "history": "历史记录",
+      "closeHistory": "关闭历史记录",
+      "viewHistory": "查看历史记录",
+      "closeHistoryShort": "关闭历史",
+      "historyShort": "历史记录"
+    }
+  },
+  "sidebar": {
+    "appName": "AgentifUI",
+    "expand": "展开",
+    "collapse": "收起",
+    "newChat": "新对话",
+    "historyChats": "历史对话",
+    "appsMarket": "应用市场",
+    "settings": "设置",
+    "recentChats": "近期对话",
+    "moreOptions": "更多选项",
+    "rename": "重命名",
+    "delete": "删除对话",
+    "untitled": "无标题",
+    "creating": "创建中...",
+    "favoriteApps": "常用应用",
+    "loading": "加载中...",
+    "startWorkflow": "开始工作流",
+    "startTextGeneration": "开始文本生成",
+    "startChat": "开始对话",
+    "hideApp": "隐藏该应用",
+    "renameDialog": {
+      "title": "重命名对话",
+      "label": "对话名称",
+      "placeholder": "输入新的对话名称",
+      "confirmText": "确认重命名"
+    },
+    "deleteDialog": {
+      "title": "删除对话",
+      "message": "确定要删除会话 \"{title}\" 吗？此操作无法撤销。",
+      "confirmText": "确认删除"
+    },
+    "syncingMessage": "对话数据正在同步中，请稍后再尝试{action}。",
+    "operationFailed": "操作失败，请稍后再试。",
+    "saveFailed": "保存对话失败",
+    "createFailed": "创建对话失败"
+  },
+  "mobile": {
+    "navigation": {
+      "openMenu": "打开菜单",
+      "openUserMenu": "打开用户菜单"
+    },
+    "user": {
+      "defaultUser": "用户",
+      "loginRegister": "登录/注册",
+      "avatarAlt": "{userName}的头像",
+      "loginPrompt": "登录以使用更多功能"
+    },
+    "bottomSheet": {
+      "userMenu": "用户菜单",
+      "account": "账户"
+    },
+    "menu": {
+      "settings": "设置",
+      "logout": "退出登录",
+      "login": "登录",
+      "register": "注册新账户",
+      "adminPanel": "管理后台",
+      "about": "关于"
+    }
+  },
+  "loading": {
+    "default": "加载中...",
+    "app": "正在加载应用...",
+    "appList": "加载应用列表...",
+    "messages": "加载更多消息...",
+    "moreMessages": "加载更多历史消息",
+    "retry": "重试",
+    "failed": "加载失败",
+    "loadingFailed": "加载消息失败: {error}",
+    "spinner": "加载中",
+    "pageLoader": {
+      "title": "正在加载"
+    }
+  },
+  "dynamicTitle": {
+    "base": "AgentifUI",
+    "settings": {
+      "main": "设置",
+      "profile": "个人资料",
+      "account": "账户设置",
+      "appearance": "外观设置",
+      "language": "语言设置"
+    },
+    "admin": {
+      "main": "管理后台",
+      "users": "用户管理",
+      "apiConfig": "API配置",
+      "security": "安全设置",
+      "analytics": "数据分析",
+      "content": "页面内容管理"
+    },
+    "auth": {
+      "login": "登录",
+      "register": "注册",
+      "phoneLogin": "手机号登录",
+      "resetPassword": "重置密码",
+      "forgotPassword": "忘记密码",
+      "ssoProcessing": "SSO登录处理中"
+    },
+    "apps": {
+      "market": "应用市场",
+      "agent": "Agent应用",
+      "chatbot": "Chatbot应用",
+      "chatflow": "Chatflow应用",
+      "workflow": "Workflow应用",
+      "textGeneration": "文本生成应用",
+      "details": "应用详情",
+      "loading": "加载应用..."
+    },
+    "chat": {
+      "main": "聊天",
+      "new": "新对话",
+      "history": "历史对话",
+      "loading": "加载对话...",
+      "notFound": "对话不存在"
+    },
+    "about": "关于"
+  },
+  "history": {
+    "title": "历史对话",
+    "loading": "会话记录加载中...",
+    "noRecords": "暂无会话历史",
+    "totalCount": "共找到 {total} 个对话",
+    "searchResults": "搜索结果：{count} 个对话",
+    "totalRecords": "共 {total} 个对话",
+    "searchPlaceholder": "搜索聊天历史...",
+    "newChat": "新对话",
+    "noMessagePreview": "无消息预览",
+    "batchDelete": "批量删除",
+    "exitSelection": "退出选择",
+    "selectAll": "全选",
+    "deselectAll": "取消全选",
+    "selected": "已选择 {count} / {total} 个对话",
+    "deleteCount": "删除 ({count})",
+    "deleting": "删除中...",
+    "cancel": "取消",
+    "rename": "重命名",
+    "delete": "删除对话",
+    "moreOptions": "更多选项",
+    "noSearchResults": "未找到匹配的对话",
+    "searchHint": "请尝试其他搜索词",
+    "noHistoryTitle": "暂无聊天历史",
+    "noHistoryDesc": "开始一个新对话吧",
+    "renameDialog": {
+      "title": "重命名对话",
+      "label": "对话名称",
+      "placeholder": "输入新的对话名称",
+      "confirmText": "确认重命名"
+    },
+    "deleteDialog": {
+      "title": "删除对话",
+      "message": "确定要删除对话 \"{title}\" 吗？此操作无法撤销。",
+      "confirmText": "确认删除"
+    },
+    "batchDeleteDialog": {
+      "title": "批量删除对话",
+      "message": "确定要删除选中的 {count} 个对话吗？此操作无法撤销。",
+      "confirmText": "删除",
+      "cancelText": "取消"
+    },
+    "operations": {
+      "renameFailed": "对话重命名失败",
+      "deleteFailed": "对话删除失败",
+      "batchDeleteSuccess": "成功删除 {success} 个对话，{failed} 个删除失败",
+      "batchDeleteFailed": "删除失败，请稍后重试",
+      "error": "操作出错，请稍后再试"
+    }
+  },
+  "difyAppTypes": {
+    "workflow": {
+      "label": "工作流",
+      "description": "自动化工作流程",
+      "features": {
+        "automation": "自动化",
+        "batchProcessing": "批处理",
+        "processControl": "流程控制"
+      }
+    },
+    "text-generation": {
+      "label": "文本生成",
+      "description": "单次文本生成应用",
+      "features": {
+        "textGeneration": "文本生成",
+        "contentCreation": "内容创作",
+        "formattedOutput": "格式化输出"
+      },
+      "resultViewer": {
+        "title": "生成结果",
+        "defaultTitle": "文本生成结果",
+        "actions": {
+          "copy": "复制结果",
+          "copied": "已复制",
+          "download": "下载结果"
+        },
+        "executionInfo": {
+          "title": "执行信息",
+          "status": "状态：",
+          "createdAt": "创建时间：",
+          "elapsedTime": "耗时：",
+          "statusValues": {
+            "completed": "已完成",
+            "failed": "已失败",
+            "stopped": "已停止"
+          }
+        },
+        "content": {
+          "title": "生成内容",
+          "noContent": "暂无内容"
+        }
+      }
+    },
+    "chatbot": {
+      "label": "聊天机器人",
+      "description": "基础对话聊天机器人",
+      "features": {
+        "conversation": "对话",
+        "fileUpload": "文件上传",
+        "speechToText": "语音转文字"
+      }
+    },
+    "agent": {
+      "label": "智能代理",
+      "description": "支持工具调用的智能代理",
+      "features": {
+        "conversation": "对话",
+        "toolCalling": "工具调用",
+        "reasoningChain": "推理链",
+        "multiTurnTasks": "多轮任务"
+      }
+    },
+    "chatflow": {
+      "label": "对话流",
+      "description": "对话流程编排应用",
+      "features": {
+        "processOrchestration": "流程编排",
+        "conditionalBranching": "条件分支",
+        "conversationManagement": "对话管理"
+      }
+    }
+  },
+  "filePreview": {
+    "loading": "正在加载文件内容...",
+    "failed": "文件加载失败",
+    "retryButton": "重试",
+    "dismissButton": "关闭",
+    "downloadButton": "下载文件",
+    "closeButton": "关闭预览",
+    "noFileSelected": "未选择文件",
+    "previewNotSupported": "不支持预览此文件类型。您可以下载查看内容。",
+    "textPreview": {
+      "title": "文本预览",
+      "copyButton": "复制",
+      "copiedButton": "已复制！",
+      "downloadButton": "下载",
+      "charactersCount": "{count} 个字符"
+    },
+    "pdfPreview": {
+      "title": "PDF 预览",
+      "openButton": "打开",
+      "downloadButton": "下载",
+      "fileSize": "{size} MB"
+    },
+    "imagePreview": {
+      "title": "图片预览",
+      "downloadButton": "下载",
+      "loadError": "图片加载失败",
+      "downloadToView": "下载查看",
+      "filename": "文件名",
+      "fileSize": "文件大小",
+      "fileType": "文件类型"
+    },
+    "audio": {
+      "title": "音频预览",
+      "duration": "时长",
+      "loadError": "音频文件加载失败",
+      "notSupported": "您的浏览器不支持音频播放"
+    },
+    "video": {
+      "title": "视频预览",
+      "duration": "时长",
+      "resolution": "分辨率",
+      "loadError": "视频文件加载失败",
+      "notSupported": "您的浏览器不支持视频播放"
+    },
+    "markdownPreview": {
+      "title": "Markdown 预览",
+      "renderedMode": "渲染模式",
+      "rawMode": "原始模式",
+      "downloadButton": "下载",
+      "charactersCount": "{count} 个字符"
+    },
+    "errors": {
+      "noAppId": "文件预览缺少应用程序 ID",
+      "downloadNoAppId": "文件下载缺少应用程序 ID"
+    },
+    "fileInfo": {
+      "title": "文件信息",
+      "name": "名称：",
+      "type": "类型：",
+      "size": "大小："
+    }
+  }
+}
diff --git a/messages/zh-TW.json b/messages/zh-TW.json
index 5e71325a..be3d5092 100644
--- a/messages/zh-TW.json
+++ b/messages/zh-TW.json
@@ -45,28 +45,110 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "探索AI的無限可能，打造智慧新體驗",
-      "getStarted": "立即開始",
-      "learnMore": "了解更多",
-      "features": [
+      "sections": [
+        {
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "探索AI的無限可能，打造智慧新體驗",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
         {
-          "title": "大模型整合",
-          "description": "支援多種模型供應商，包括OpenAI、Anthropic、Dify等，滿足不同企業需求"
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "大模型整合",
+                      "description": "支援多種模型供應商，包括OpenAI、Anthropic、Dify等，滿足不同企業需求"
+                    },
+                    {
+                      "title": "RAG知識增強",
+                      "description": "整合檢索增強生成(RAG)技術，實現私有知識庫和上下文感知"
+                    },
+                    {
+                      "title": "企業級部署",
+                      "description": "支援私有化部署，保障資料安全，基於Dify後端提供穩定可靠的服務"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG知識增強",
-          "description": "整合檢索增強生成(RAG)技術，實現私有知識庫和上下文感知"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "立即開始",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "了解更多",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "企業級部署",
-          "description": "支援私有化部署，保障資料安全，基於Dify後端提供穩定可靠的服務"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. 探索AI的無限可能。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索AI的無限可能。"
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "zh-TW"
       }
     },
     "chat": {
diff --git a/scripts/migrate-home-data.ts b/scripts/migrate-home-data.ts
new file mode 100644
index 00000000..d61acd01
--- /dev/null
+++ b/scripts/migrate-home-data.ts
@@ -0,0 +1,94 @@
+import fs from 'fs';
+import path from 'path';
+
+import {
+  isHomeDynamicFormat,
+  migrateHomeTranslationData,
+} from '../lib/utils/data-migration';
+
+/**
+ * 批量迁移脚本 - 将所有语言文件中的主页数据从静态格式转换为动态sections格式
+ */
+
+const MESSAGES_DIR = path.join(__dirname, '../messages');
+const supportedLocales = [
+  'en-US',
+  'zh-CN',
+  'zh-TW',
+  'ja-JP',
+  'de-DE',
+  'fr-FR',
+  'ru-RU',
+  'it-IT',
+  'pt-PT',
+  'es-ES',
+];
+
+interface MessageFile {
+  pages: {
+    home: unknown;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+async function migrateAllHomeData() {
+  console.log('🚀 开始迁移主页数据...');
+
+  for (const locale of supportedLocales) {
+    const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
+
+    if (!fs.existsSync(filePath)) {
+      console.warn(`⚠️  文件不存在: ${filePath}`);
+      continue;
+    }
+
+    try {
+      console.log(`📝 处理语言文件: ${locale}.json`);
+
+      // 读取文件
+      const fileContent = fs.readFileSync(filePath, 'utf-8');
+      const data: MessageFile = JSON.parse(fileContent);
+
+      // 检查是否有主页数据
+      if (!data.pages?.home) {
+        console.warn(`⚠️  ${locale}.json 中没有找到主页数据`);
+        continue;
+      }
+
+      // 检查是否已经是动态格式
+      if (isHomeDynamicFormat(data.pages.home)) {
+        console.log(`✅ ${locale}.json 主页数据已经是动态格式，跳过`);
+        continue;
+      }
+
+      console.log(`🔄 转换 ${locale}.json 中的主页数据...`);
+
+      // 转换主页数据
+      const migratedHomeData = migrateHomeTranslationData(data.pages.home);
+
+      // 更新数据
+      data.pages.home = migratedHomeData;
+
+      // 备份原文件
+      const backupPath = `${filePath}.backup-${Date.now()}`;
+      fs.copyFileSync(filePath, backupPath);
+      console.log(`💾 已备份原文件到: ${path.basename(backupPath)}`);
+
+      // 保存新文件
+      fs.writeFileSync(filePath, JSON.stringify(data, null, 2), 'utf-8');
+      console.log(`✅ 已更新 ${locale}.json`);
+    } catch (error) {
+      console.error(`❌ 处理 ${locale}.json 时出错:`, error);
+    }
+  }
+
+  console.log('🎉 主页数据迁移完成!');
+}
+
+// 如果直接运行此脚本
+if (require.main === module) {
+  migrateAllHomeData().catch(console.error);
+}
+
+export { migrateAllHomeData };

From 58b421a4f44d7774d9069ce29dc61cf156052fd5 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Tue, 12 Aug 2025 13:55:43 +0800
Subject: [PATCH 29/66] fix(admin): center trash icons in delete buttons

Fix icon alignment issue where trash icons were not properly centered
within the pink/red background circles of delete buttons.

Changes:
- Added flex, items-center, justify-center classes to all delete buttons
- Fixed component delete button in context menu
- Fixed section delete button in about editor
- Fixed item delete buttons in context menu
- Fixed secondary button delete button
- Fixed close button for consistency

All delete button icons now display perfectly centered within their
colored background hover states.
---
 components/admin/content/about-editor.tsx | 2 +-
 components/admin/content/context-menu.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 9b27c123..37bb82c7 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -493,7 +493,7 @@ export function AboutEditor({
                             deleteSection(section.id);
                           }}
                           className={cn(
-                            'h-6 w-6 rounded p-0 text-red-500 transition-colors',
+                            'flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors',
                             'hover:bg-red-100 dark:hover:bg-red-900/50'
                           )}
                         >
diff --git a/components/admin/content/context-menu.tsx b/components/admin/content/context-menu.tsx
index ea210205..afb73ea0 100644
--- a/components/admin/content/context-menu.tsx
+++ b/components/admin/content/context-menu.tsx
@@ -168,7 +168,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
                   <button
                     type="button"
                     onClick={() => handleRemoveItem(index)}
-                    className="h-6 w-6 rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+                    className="flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
                   >
                     <Trash2 className="h-3 w-3" />
                   </button>
@@ -240,7 +240,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
             <button
               type="button"
               onClick={handleRemoveSecondaryButton}
-              className="h-6 w-6 rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+              className="flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
             >
               <Trash2 className="h-3 w-3" />
             </button>
@@ -489,7 +489,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
               <button
                 type="button"
                 onClick={handleDelete}
-                className="h-6 w-6 rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+                className="flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
                 title="Delete Component"
               >
                 <Trash2 className="h-3 w-3" />
@@ -497,7 +497,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
               <button
                 type="button"
                 onClick={onClose}
-                className="h-6 w-6 rounded p-0 text-stone-500 transition-colors hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-700"
+                className="flex h-6 w-6 items-center justify-center rounded p-0 text-stone-500 transition-colors hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-700"
                 title="Close"
               >
                 <X className="h-3 w-3" />

From fa08dc95e4fd10e33c51d6f2ac67f80c2b15db2f Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Tue, 12 Aug 2025 14:29:31 +0800
Subject: [PATCH 30/66] fix(admin): remove empty space in content page layout

- Change container height from h-screen to h-[calc(100vh-3rem)]
- Eliminates red-boxed empty space while preserving all scroll functionality
- Fixes page-level scrolling by precisely calculating available space
- Accounts for admin layout's pt-12 (3rem) top padding
---
 app/admin/content/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index 933d0d3e..6295c247 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -374,7 +374,7 @@ export default function ContentManagementPage() {
   return (
     <div
       className={cn(
-        'flex h-screen flex-col overflow-hidden',
+        'flex h-[calc(100vh-3rem)] flex-col overflow-hidden',
         isDark ? 'bg-stone-950' : 'bg-stone-100'
       )}
     >

From 07dffdc6fa33f83cd9e727436dcaebc53809d24c Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Tue, 12 Aug 2025 14:50:47 +0800
Subject: [PATCH 31/66] refactor(admin): optimize content editor padding for
 better layout

- Change editor container padding from p-6 to px-6
- Remove top/bottom padding to maximize vertical space usage
- Keep symmetric left/right padding for visual balance
- Maintains all scroll functionality while improving space utilization
---
 app/admin/content/page.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index 6295c247..207ff32f 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -439,7 +439,9 @@ export default function ContentManagementPage() {
                   isDark ? 'bg-stone-900' : 'bg-white'
                 )}
               >
-                <div className="flex-1 overflow-auto p-6">{renderEditor()}</div>
+                <div className="flex-1 overflow-auto px-6">
+                  {renderEditor()}
+                </div>
                 <div
                   className={cn(
                     'flex-shrink-0 p-4',
@@ -521,7 +523,7 @@ export default function ContentManagementPage() {
               isDark ? 'bg-stone-900' : 'bg-white'
             )}
           >
-            <div className="h-full overflow-auto p-6">{renderEditor()}</div>
+            <div className="h-full overflow-auto px-6">{renderEditor()}</div>
           </div>
         )}
       </div>

From f987eccac25bde83007cb2c6c34c390f4f98e95f Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Tue, 12 Aug 2025 15:18:51 +0800
Subject: [PATCH 32/66] fix(admin): fix component palette height calculation
 relative to parent

- Change h-full to h-0 min-h-full for proper parent container sizing
- Add flex flex-col layout to main container for proper structure
- Make scroll area flex-1 min-h-0 overflow-y-auto for correct overflow behavior
- Prevents child container from exceeding parent boundaries during scroll
- Ensures component palette height is relative to parent div, not page height
---
 components/admin/content/component-palette.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
index 7a24a1b2..4ca70535 100644
--- a/components/admin/content/component-palette.tsx
+++ b/components/admin/content/component-palette.tsx
@@ -143,7 +143,7 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
   return (
     <div
       className={cn(
-        'h-full rounded-lg border',
+        'flex h-0 min-h-full flex-col rounded-lg border',
         'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800',
         className
       )}
@@ -159,7 +159,7 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
           Components
         </h3>
       </div>
-      <div className="p-0">
+      <div className="min-h-0 flex-1 overflow-y-auto p-0">
         <Droppable
           id="component-palette"
           disabled={true}

From 38e014422de6cc0063999dc4c5508f1a26414466 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Tue, 12 Aug 2025 16:39:13 +0800
Subject: [PATCH 33/66] feat(admin): unify drag-and-drop hover effects with
 mouse hover effects

- Modified Droppable component to support function children for dynamic rendering
- Added special handling for section drop zones to apply hover-like styles during drag-over
- Updated drop zones in about-editor.tsx to show text and animations during drag operations
- Maintained backwards compatibility for static children while adding dynamic behavior
---
 components/admin/content/about-editor.tsx   | 30 ++++++++++++++++-----
 components/admin/content/dnd-components.tsx | 27 ++++++++++++++++---
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 37bb82c7..26066ef0 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -465,9 +465,18 @@ export function AboutEditor({
                       id={`section-drop-${sectionIndex}`}
                       className="h-2 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-stone-400 hover:bg-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-800"
                     >
-                      <div className="flex h-full items-center justify-center text-sm font-medium text-stone-600 opacity-0 hover:opacity-100 dark:text-stone-400">
-                        Drop here to create new section
-                      </div>
+                      {(isOver: boolean) => (
+                        <div
+                          className={cn(
+                            'flex h-full items-center justify-center text-sm font-medium text-stone-600 transition-opacity duration-200 dark:text-stone-400',
+                            isOver || undefined
+                              ? 'opacity-100'
+                              : 'opacity-0 hover:opacity-100'
+                          )}
+                        >
+                          Drop here to create new section
+                        </div>
+                      )}
                     </Droppable>
                   )}
 
@@ -657,9 +666,18 @@ export function AboutEditor({
                 id="section-drop-final"
                 className="h-8 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-stone-400 hover:bg-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-800"
               >
-                <div className="flex h-full items-center justify-center text-sm font-medium text-stone-600 opacity-0 hover:opacity-100 dark:text-stone-400">
-                  Drop here to create new section
-                </div>
+                {(isOver: boolean) => (
+                  <div
+                    className={cn(
+                      'flex h-full items-center justify-center text-sm font-medium text-stone-600 transition-opacity duration-200 dark:text-stone-400',
+                      isOver || undefined
+                        ? 'opacity-100'
+                        : 'opacity-0 hover:opacity-100'
+                    )}
+                  >
+                    Drop here to create new section
+                  </div>
+                )}
               </Droppable>
             </div>
           </div>
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
index 68bb7dfc..1fedb44a 100644
--- a/components/admin/content/dnd-components.tsx
+++ b/components/admin/content/dnd-components.tsx
@@ -21,7 +21,7 @@ export { arrayMove };
 // Droppable component interface
 interface DroppableProps {
   id: string;
-  children: React.ReactNode;
+  children: React.ReactNode | ((isOver: boolean) => React.ReactNode);
   className?: string;
   disabled?: boolean;
 }
@@ -42,15 +42,36 @@ export function Droppable({
     disabled,
   });
 
+  // Check if this is a section drop zone that should have special hover effects
+  const isSectionDropZone = id.includes('section-drop');
+
+  // Apply drag-over styles that mimic hover effects for section drop zones
+  const dragOverStyles =
+    isSectionDropZone && isOver
+      ? {
+          height: '4rem', // equivalent to h-16
+          borderColor: 'rgb(168 162 158)', // stone-400
+          backgroundColor: 'rgb(245 245 244)', // stone-100 light mode
+        }
+      : {};
+
   return (
     <div
       ref={setNodeRef}
       className={cn(
         className,
-        isOver && 'ring-opacity-50 ring-2 ring-stone-500'
+        // Apply enhanced styles for section drop zones when dragging over
+        isSectionDropZone &&
+          isOver &&
+          'h-16 border-stone-400 bg-stone-100 dark:border-stone-500 dark:bg-stone-800',
+        // Default ring effect for other droppables
+        !isSectionDropZone && isOver && 'ring-opacity-50 ring-2 ring-stone-500'
       )}
+      style={dragOverStyles}
     >
-      {children}
+      {typeof children === 'function'
+        ? (children as (isOver: boolean) => React.ReactNode)(isOver)
+        : children}
     </div>
   );
 }

From ab40c7e365023598226cf07174497806a662fad8 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Tue, 12 Aug 2025 18:17:43 +0800
Subject: [PATCH 34/66] fix(admin): increase H1/H2 heading component height to
 prevent text clipping

- Change py-2 to py-3 in component-renderer.tsx for H1/H2 headings
- Fixes issue where descenders (like letter 'g') were being clipped
- Affects only H1 and H2 heading components in content editor
---
 components/admin/content/component-renderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index 2b03b10f..ef3f2bad 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -48,7 +48,7 @@ const Heading: React.FC<HeadingProps> = ({ content, level, textAlign }) => {
       {
         className: cn(
           'bg-gradient-to-r from-stone-700 to-stone-900 dark:from-stone-300 dark:to-stone-500',
-          'mb-6 bg-clip-text py-2 leading-normal font-bold text-transparent',
+          'mb-6 bg-clip-text py-3 leading-normal font-bold text-transparent',
           sizeClasses[level],
           alignmentClass
         ),

From d2ebfb11d215083a0f8d1fbfe8e20214ae29caa7 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Tue, 12 Aug 2025 20:14:56 +0800
Subject: [PATCH 35/66] docs: remove development toolchain and integration plan
 documents

---
 docs/DEVELOPER_TOOLCHAIN.md                | 321 -------
 docs/about-page-editor-integration-plan.md | 926 ---------------------
 2 files changed, 1247 deletions(-)
 delete mode 100644 docs/DEVELOPER_TOOLCHAIN.md
 delete mode 100644 docs/about-page-editor-integration-plan.md

diff --git a/docs/DEVELOPER_TOOLCHAIN.md b/docs/DEVELOPER_TOOLCHAIN.md
deleted file mode 100644
index 648bcb4e..00000000
--- a/docs/DEVELOPER_TOOLCHAIN.md
+++ /dev/null
@@ -1,321 +0,0 @@
-好的，这是该开发工具链指南的中文翻译。
-
-这份文档详细说明了 AgentifUI 项目的开发工具、自动化流程和质量保证体系，旨在帮助贡献者高效地编写出高质量、风格一致且易于维护的代码。
-
----
-
-## 📋 AgentifUI 开发者工具链指南 (中文翻译)
-
-### 概述
-
-本指南全面介绍了 AgentifUI 的开发工具链和自动化质量保证体系。作为一名贡献者，您将通过这些工具来确保代码的质量、一致性和可维护性。
-
----
-
-### 🔧 核心开发工具
-
-#### TypeScript 配置
-
-**配置文件**: `tsconfig.json`
-
-**核心特性**:
-
-- ✅ **严格模式**: 通过严格的编译器设置实现全面的类型安全。
-- ✅ **路径映射**: 使用 `@/*`, `@lib/*`, `@components/*` 等别名实现清晰的模块导入。
-- ✅ **Next.js 集成**: 为 Next.js 15 的 App Router 进行了优化。
-- ✅ **Jest 支持**: 集成了测试环境所需的类型定义。
-
-**您会用到的命令**:
-
-```bash
-pnpm type-check     # 运行 TypeScript 编译器进行类型检查，但不生成 JS 文件
-```
-
-#### ESLint 配置
-
-**配置文件**: `eslint.config.mjs`
-
-**双重 Linting 策略**:
-
-1.  **Oxlint** (主要 - 速度极快)
-    - 基于 Rust 的 linter，性能卓越。
-    - 运行时间仅需毫秒级，而非秒级。
-    - 快速捕捉常见问题。
-
-2.  **ESLint** (次要 - 功能全面)
-    - 传统的 JavaScript/TypeScript 代码检查工具。
-    - 包含 Next.js 特定规则。
-    - 与 TypeScript 深度集成。
-
-**您会用到的命令**:
-
-```bash
-pnpm lint            # 同时运行 Oxlint 和 ESLint (推荐)
-pnpm lint:fast       # 仅运行 Oxlint (用于快速检查)
-pnpm lint:eslint     # 仅运行 ESLint
-pnpm lint:errors     # 只显示错误，不显示警告
-pnpm lint:complexity # 检查代码复杂度 (最大值为 15)
-pnpm fix:eslint      # 自动修复 ESLint 发现的问题
-```
-
-#### Prettier 代码格式化
-
-**配置文件**: `.prettierrc.json`
-
-**特性**:
-
-- 🎨 **自动导入排序**: 按照 React → Next.js → 外部库 → 内部模块的顺序排序。
-- 🎨 **Tailwind Class 排序**: 自动对 Tailwind CSS 的类名进行排序。
-- 🎨 **统一代码风格**: 80 字符行宽、单引号、使用分号。
-- 🎨 **智能忽略**: 自动忽略构建产物、数据库迁移文件和自动生成的文件。
-
-**您会用到的命令**:
-
-```bash
-pnpm format         # 格式化所有文件
-pnpm format:check   # 检查文件是否需要格式化
-pnpm format:files   # 格式化指定文件
-```
-
----
-
-### 🔄 自动化 Git 钩子 (Husky)
-
-#### Pre-commit 钩子 (`.husky/pre-commit`)
-
-**当您提交代码时会发生什么**:
-
-1.  **🔍 TypeScript 检查**
-    - 验证所有 TypeScript 文件。
-    - 如果存在类型错误，提交将被中止。
-
-2.  **🎨 Lint-Staged 格式化**
-    - 仅对暂存区（staged）的文件运行 Prettier。
-    - 对暂存区的 JS/TS 文件运行 ESLint 并自动修复。
-    - 自动将格式化后的改动添加到暂存区。
-
-3.  **🧪 条件化测试**
-    - 智能执行测试。
-    - 仅对暂存区内匹配 `.test.` 或 `.spec.` 模式的测试文件运行测试。
-    - 如果本次提交没有涉及测试文件，则跳过测试步骤。
-
-#### Commit Message 钩子 (`.husky/commit-msg`)
-
-**提交信息验证**:
-使用 `commitlint` 工具进行验证。
-
-**要求格式** (约定式提交 Conventional Commits):
-
-```
-type(scope): subject
-
-示例:
-✅ feat(auth): add SSO login support (功能(登录): 增加 SSO 登录支持)
-✅ fix(chat): resolve message ordering issue (修复(聊天): 解决消息排序问题)
-✅ refactor(admin): optimize content management UI (重构(管理后台): 优化内容管理界面)
-❌ added new feature (错误示例: 增加了新功能)
-❌ fix bug (错误示例: 修复 bug)
-```
-
-**支持的类型**:
-
-- `feat`: 新功能
-- `fix`: Bug 修复
-- `refactor`: 代码重构
-- `style`: 代码风格改动
-- `docs`: 文档更新
-- `test`: 测试相关
-- `chore`: 构建过程或工具变动
-
----
-
-### 🧪 测试框架
-
-**配置文件**: `jest.config.js`, `jest.setup.js`
-
-**Jest 配置特性**:
-
-- 🧪 **React Testing Library**: 提供组件测试的实用工具。
-- 🧪 **全面的模拟 (Mocks)**: 预设了 Next.js router、navigation、intl、images 等模块的模拟。
-- 🧪 **路径映射**: 与主应用共享相同的导入路径别名。
-- 🧪 **覆盖率报告**: 生成详细的测试覆盖率指标。
-- 🧪 **JSDOM 环境**: 提供类浏览器的测试环境。
-
-**预配置的 Mocks**:
-
-- `next/router` 和 `next/navigation`
-- `next/image` 和 `next/link`
-- `next-intl` (用于国际化)
-- `IntersectionObserver` 和 `ResizeObserver`
-- 全局 `fetch` API
-
-**您会用到的命令**:
-
-```bash
-pnpm test          # 运行所有测试
-pnpm test:watch    # 以观察模式运行测试
-pnpm test:coverage # 运行测试并生成覆盖率报告
-pnpm test:ci       # 运行为 CI 环境优化的测试
-```
-
----
-
-### 🏗️ 构建和开发工具
-
-#### Next.js 配置 (`next.config.ts`)
-
-**核心特性**:
-
-1.  **打包文件分析**:
-    ```bash
-    ANALYZE=true pnpm build    # 生成打包文件体积分析报告
-    ```
-2.  **独立构建 (Standalone Builds)**:
-    ```bash
-    pnpm build:standalone     # 创建一个自包含的、可用于部署的构建版本
-    ```
-3.  **开发环境优化**:
-    - 跨域请求处理
-    - 热模块替换 (HMR)
-    - 使用 `--inspect` 进入调试模式
-4.  **生产环境优化**:
-    - 自动移除 `console.log` (保留 `error` 和 `warn`)
-    - 为服务器端依赖配置 Webpack externals
-    - 修复与 Supabase WebSocket 的兼容性问题
-
-#### Tailwind CSS 配置 (`tailwind.config.js`)
-
-**自定义特性**:
-
-- 🎨 **暗黑模式**: 支持基于 class 的暗黑模式。
-- 🎨 **排版**: 带有备用方案的全局 serif 字体系统。
-- 🎨 **自定义动画**: 包括滑动、淡入淡出、弹跳、闪烁等效果。
-- 🎨 **滚动条插件**: 支持自定义滚动条样式。
-
----
-
-### 🌍 国际化 (i18n) 工具
-
-#### 验证脚本
-
-**基于 Python 的验证工具**:
-
-```bash
-pnpm i18n:check      # 快速检查所有语言文件结构的一致性
-pnpm i18n:validate   # 对翻译内容进行详细验证
-pnpm i18n:detect     # 检测代码中缺失的翻译 key
-```
-
-**这些脚本会检查**:
-
-- 📝 所有语言的翻译 key 结构是否一致。
-- 📝 任何语言文件中是否有缺失的翻译。
-- 📝 代码库中是否存在未被使用的翻译 key。
-- 📝 语言文件（JSON）是否存在格式错误。
-
----
-
-### ⚡ 开发者工作流
-
-#### 日常开发流程
-
-1.  **启动开发环境**:
-    ```bash
-    pnpm dev         # 启动并开启调试模式
-    # 或
-    pnpm dev:clean   # 启动但不开启调试
-    ```
-2.  **编写代码**:
-    - 在完整的 TypeScript 支持下编辑代码。
-    - 如果 IDE 已配置，保存时会自动格式化。
-    - 实时类型检查。
-3.  **提交前验证**:
-    ```bash
-    pnpm type-check  # 手动进行类型检查
-    pnpm lint        # 手动进行代码检查
-    pnpm test        # 手动运行测试
-    ```
-4.  **提交代码**:
-    ```bash
-    git add .
-    git commit -m "feat(scope): description"
-    # 自动运行 pre-commit 钩子:
-    # - TypeScript 检查
-    # - Prettier 格式化
-    # - ESLint 修复
-    # - 测试执行 (如果暂存区有测试文件)
-    # - 提交信息验证
-    ```
-
----
-
-### 🔍 质量门禁
-
-#### 提交质量门禁
-
-**提交前验证**:
-
-- ✅ TypeScript 编译通过
-- ✅ 所有暂存文件均已正确格式化
-- ✅ 满足所有 ESLint 规则
-- ✅ 暂存的测试文件全部通过
-- ✅ 提交信息遵循约定式规范
-
-#### 构建质量门禁
-
-**CI/生产环境要求**:
-
-- ✅ 无 TypeScript 错误
-- ✅ 所有测试通过
-- ✅ 构建成功完成
-- ✅ 无严重级别的 linting 错误
-- ✅ 打包文件体积在限制范围内
-
----
-
-### 🛠️ 故障排查
-
-#### 常见问题
-
-**1. Pre-commit 钩子执行失败**
-
-```bash
-# 若是 TypeScript 错误
-pnpm type-check        # 查看具体错误信息
-
-# 若是格式化问题
-pnpm format            # 修复格式
-git add .              # 重新暂存格式化后的文件
-
-# 若是测试失败
-pnpm test [file]       # 运行指定的测试文件
-```
-
-**2. 构建错误**
-
-```bash
-# 清除 Next.js 缓存
-rm -rf .next
-
-# 重新安装依赖
-rm -rf node_modules pnpm-lock.yaml
-pnpm install
-
-# 检查 TypeScript 问题
-pnpm type-check
-```
-
----
-
-### 🤝 贡献指南
-
-在为 AgentifUI 贡献代码时，请遵循以下准则：
-
-1.  **在推送代码前务必运行类型检查**。
-2.  **严格遵守提交信息规范**。
-3.  为新功能**编写测试用例**。
-4.  在添加新功能时**更新相关文档**。
-5.  **尊重自动化格式化**——不要和 Prettier “对着干”。
-6.  **使用项目提供的脚本**，而不是手动调用工具。
-
-这套工具链旨在**帮助您更快地编写出更优秀的代码**——请拥抱自动化，专注于构建卓越的功能！🚀
diff --git a/docs/about-page-editor-integration-plan.md b/docs/about-page-editor-integration-plan.md
deleted file mode 100644
index ec06bfca..00000000
--- a/docs/about-page-editor-integration-plan.md
+++ /dev/null
@@ -1,926 +0,0 @@
-# 关于页面动态组件编辑器升级计划
-
-## 1. 项目概述
-
-### 1.1 目标
-
-将现有的固定结构关于页面编辑器升级为动态组件编辑器，从 about-page-standalone demo 中移植拖拽编辑、动态组件管理等核心功能，实现完全可视化的关于页面配置。
-
-### 1.2 现有系统分析
-
-AgentifUI 已有完整的关于页面编辑系统：
-
-- **AboutEditor** (`components/admin/content/about-editor.tsx`) - 基于固定结构的编辑器
-- **AboutPreview** (`components/admin/content/about-preview.tsx`) - 多设备预览组件
-- **ContentManagementPage** (`app/admin/content/page.tsx`) - 统一的内容管理界面
-- **TranslationService** - 完善的翻译数据管理服务
-
-### 1.3 升级策略
-
-**避免重复建设，就地升级现有组件：**
-
-- ✅ 保持现有文件路径和组件接口
-- ✅ 复用现有的 UI 组件和主题系统
-- ✅ 利用现有的 TranslationService 和管理界面
-- ✅ 在现有组件内部替换实现逻辑
-- ✅ 确保用户界面的平滑过渡
-
-**核心改变：**
-
-- 从**固定表单编辑** → **动态拖拽编辑**
-- 从**预定义结构** → **任意组件组合**
-- 从**有限卡片数量** → **无限制动态添加**
-
-### 1.4 Demo 项目分析总结
-
-经过详细分析，demo 项目实现了以下核心功能：
-
-#### 核心架构特点
-
-- **组件化数据结构**：采用 sections -> columns -> components 的层级结构
-- **智能拖拽系统**：支持拖拽创建多列布局、跨列移动组件、自动布局调整
-- **实时编辑预览**：左侧编辑面板 + 右侧实时预览
-- **属性编辑系统**：智能识别组件类型并显示相应的编辑控件
-- **多语言支持**：支持传统结构和组件化结构的数据格式
-
-#### 技术实现亮点
-
-- **react-beautiful-dnd**：拖拽交互实现
-- **StrictModeDroppable**：解决 React 18 严格模式兼容问题
-- **动态组件渲染**：通过 componentMap 实现组件动态渲染
-- **智能布局算法**：自动检测拖拽位置并调整布局类型
-- **深拷贝状态管理**：避免直接修改状态，确保数据一致性
-
-#### 支持的组件类型
-
-- **基础组件**：heading, paragraph, button, image, divider
-- **复合组件**：cards, feature-grid（支持动态数组编辑）
-- **布局支持**：单列、双列、三列、智能分栏
-
-## 2. 升级架构设计
-
-### 2.1 就地升级现有文件（保持目录结构）
-
-**升级现有组件而非创建新文件：**
-
-```
-app/admin/content/
-└── page.tsx                                 # ✅ 保持现有，扩展支持动态组件
-
-components/admin/content/
-├── about-editor.tsx                         # 🔄 升级：从固定表单 → 动态拖拽编辑器
-├── about-preview.tsx                        # 🔄 升级：从固定渲染 → 动态组件渲染
-├── component-renderer.tsx                   # ➕ 新增：动态组件渲染器（从demo移植）
-├── property-editor.tsx                      # ➕ 新增：组件属性编辑器（从demo移植）
-├── component-palette.tsx                    # ➕ 新增：组件拖拽面板（从demo移植）
-└── strict-mode-droppable.tsx                # ➕ 新增：拖拽兼容组件（从demo移植）
-
-lib/
-├── types/
-│   └── about-page-components.ts             # ➕ 新增：动态组件类型定义
-├── services/admin/content/
-│   └── translation-service.ts              # ✅ 保持现有（已有关于页面方法）
-└── stores/
-    └── about-editor-store.ts                # ➕ 新增：动态编辑器状态管理
-
-messages/
-└── *.json                                   # 🔄 升级：pages.about 数据结构
-```
-
-**关键升级点：**
-
-- 保持现有的文件路径和组件名称
-- 在现有组件内部实现动态化功能
-- 利用现有的 TranslationService 和管理界面
-- 扩展数据结构而非替换
-
-### 2.2 数据存储设计
-
-#### 完全替换为动态组件结构
-
-**新的动态组件结构将完全取代固定结构：**
-
-```json
-// messages/en-US.json - 新的完全动态结构
-{
-  "pages": {
-    "about": {
-      "sections": [
-        {
-          "id": "section-1",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1-1",
-                "type": "heading",
-                "props": {
-                  "content": "About AgentifUI",
-                  "level": 1,
-                  "textAlign": "center"
-                }
-              },
-              {
-                "id": "comp-1-2",
-                "type": "paragraph",
-                "props": {
-                  "content": "Connecting AI with enterprises, creating new experiences with large language models",
-                  "textAlign": "center"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-2",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-2-1",
-                "type": "heading",
-                "props": {
-                  "content": "Our Mission",
-                  "level": 2,
-                  "textAlign": "left"
-                }
-              },
-              {
-                "id": "comp-2-2",
-                "type": "paragraph",
-                "props": {
-                  "content": "AgentifUI is committed to leveraging the power of large language models...",
-                  "textAlign": "left"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-3",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-3-1",
-                "type": "heading",
-                "props": {
-                  "content": "Our Values",
-                  "level": 2,
-                  "textAlign": "left"
-                }
-              },
-              {
-                "id": "comp-3-2",
-                "type": "cards",
-                "props": {
-                  "layout": "grid",
-                  "items": [
-                    {
-                      "title": "Technical Innovation",
-                      "description": "Continuously integrate cutting-edge large model technologies..."
-                    },
-                    {
-                      "title": "Data Security",
-                      "description": "Support private deployment and strict data protection measures..."
-                    },
-                    {
-                      "title": "Flexible Customization",
-                      "description": "Provide highly customizable solutions..."
-                    },
-                    {
-                      "title": "Knowledge Enhancement",
-                      "description": "Integrate private knowledge bases through RAG technology..."
-                    }
-                    // 管理员可以动态添加/删除更多卡片
-                  ]
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-4",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-4-1",
-                "type": "button",
-                "props": {
-                  "text": "Start Exploring",
-                  "variant": "primary",
-                  "action": "link",
-                  "url": "#"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-5",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-5-1",
-                "type": "paragraph",
-                "props": {
-                  "content": "© {year} AgentifUI. Explore the future of large model applications.",
-                  "textAlign": "center"
-                }
-              }
-            ]
-          ]
-        }
-      ]
-    }
-  }
-}
-```
-
-**关键优势：**
-
-- ✅ 完全动态：管理员可以添加/删除任意数量的sections和组件
-- ✅ 灵活布局：支持单列、双列、三列等多种布局
-- ✅ 任意组件：可以在任何位置放置heading、paragraph、cards、button等组件
-- ✅ 拖拽排序：sections和组件都可以通过拖拽重新排序
-- ✅ 属性编辑：每个组件的props都可以独立编辑
-
-#### 内容数据结构示例
-
-```json
-{
-  "sections": [
-    {
-      "id": "section-1",
-      "layout": "single-column",
-      "columns": [
-        [
-          {
-            "id": "comp-1-1",
-            "type": "heading",
-            "props": {
-              "content": "About AgentifUI",
-              "level": 1,
-              "textAlign": "center"
-            }
-          }
-        ]
-      ]
-    }
-  ],
-  "metadata": {
-    "version": "1.0.0",
-    "lastModified": "2024-01-01T00:00:00Z",
-    "author": "admin"
-  }
-}
-```
-
-## 3. 升级实施计划
-
-### 阶段 1：基础架构和类型系统（第1周）
-
-#### 3.1 新增动态组件类型定义
-
-- [ ] 创建 `lib/types/about-page-components.ts`
-- [ ] 从 demo 移植 TypeScript 接口（ComponentType, PageSection, ComponentInstance等）
-- [ ] 扩展现有的 `AboutTranslationData` 接口以支持 sections
-
-#### 3.2 数据结构升级
-
-- [ ] 保持使用现有的 `TranslationService`（无需修改）
-- [ ] 创建一次性数据迁移脚本
-  - [ ] 读取现有的固定结构数据
-  - [ ] 转换为动态 sections 格式
-  - [ ] 备份原始数据并批量更新
-- [ ] 创建数据转换工具函数
-  - [ ] `migrateLegacyToSections()` - 固定结构转动态结构
-  - [ ] `generateUniqueIds()` - 为sections和组件生成ID
-
-### 阶段 2：核心组件移植和适配（第2-3周）
-
-#### 3.3 移植拖拽和组件系统
-
-- [ ] 新增 `components/admin/content/component-renderer.tsx`
-  - [ ] 从 demo 移植动态组件渲染逻辑
-  - [ ] 适配主项目的设计系统和主题
-  - [ ] 支持 heading、paragraph、cards、button、image、divider 等组件
-- [ ] 新增 `components/admin/content/strict-mode-droppable.tsx`
-  - [ ] 移植 React 18 兼容的拖拽组件
-- [ ] 新增 `components/admin/content/property-editor.tsx`
-  - [ ] 移植动态属性编辑器
-  - [ ] 适配主项目的 UI 组件（Select、Input等）
-- [ ] 新增 `components/admin/content/component-palette.tsx`
-  - [ ] 创建组件拖拽面板
-  - [ ] 集成到现有的编辑界面布局
-
-#### 3.4 升级现有编辑器组件
-
-- [ ] 升级 `about-editor.tsx`
-  - [ ] 保持现有接口兼容性
-  - [ ] 内部替换为动态拖拽编辑器
-  - [ ] 集成新的组件面板和属性编辑器
-  - [ ] 保持多语言选择功能
-- [ ] 升级 `about-preview.tsx`
-  - [ ] 保持现有设备预览功能
-  - [ ] 内部替换为动态组件渲染
-  - [ ] 保持响应式和主题适配
-
-#### 3.5 状态管理
-
-- [ ] 新增 `lib/stores/about-editor-store.ts`
-  - [ ] 实现 Zustand 状态管理
-  - [ ] 支持撤销/重做功能
-  - [ ] 集成到现有的编辑器组件
-
-### 阶段 3：系统集成和优化（第4周）
-
-#### 3.6 现有管理界面扩展
-
-- [ ] 保持 `app/admin/content/page.tsx` 现有功能
-- [ ] 扩展支持动态组件数据结构
-- [ ] 保持现有的保存/重置/预览功能
-- [ ] 确保与首页编辑器的兼容性
-
-#### 3.7 前端关于页面更新
-
-- [ ] 更新现有的关于页面组件以支持动态渲染
-- [ ] 保持现有的 URL 路径和 SEO 优化
-- [ ] 确保平滑过渡，无用户感知的变化
-
-### 阶段 4：优化和测试（第5周）
-
-#### 3.12 数据迁移
-
-- [ ] 创建一次性迁移脚本
-- [ ] 将所有语言的固定关于页面结构转换为动态sections格式
-- [ ] 备份原始数据文件
-- [ ] 验证迁移后的数据完整性和功能正常
-
-#### 3.13 性能优化
-
-- [ ] 实现组件懒加载
-- [ ] 优化拖拽性能
-- [ ] 添加防抖和节流
-- [ ] 实现虚拟滚动（如需要）
-
-#### 3.14 测试
-
-- [ ] 单元测试（组件渲染、属性编辑）
-- [ ] 集成测试（拖拽交互、数据保存）
-- [ ] E2E 测试（完整编辑工作流）
-- [ ] 性能测试
-- [ ] 用户验收测试
-
-## 4. 技术实现细节
-
-### 4.1 状态管理优化
-
-使用 Zustand 创建编辑器状态：
-
-```typescript
-// lib/stores/about-editor.ts
-interface AboutEditorState {
-  pageContent: PageContent | null;
-  selectedComponentId: string | null;
-  undoStack: PageContent[];
-  redoStack: PageContent[];
-  isDirty: boolean;
-  isLoading: boolean;
-
-  // Actions
-  setPageContent: (content: PageContent) => void;
-  setSelectedComponent: (id: string | null) => void;
-  updateComponentProps: (id: string, props: Record<string, any>) => void;
-  addComponent: (
-    sectionId: string,
-    columnIndex: number,
-    component: ComponentInstance
-  ) => void;
-  deleteComponent: (id: string) => void;
-  moveComponent: (result: DropResult) => void;
-  undo: () => void;
-  redo: () => void;
-  save: () => Promise<void>;
-  load: (language: string) => Promise<void>;
-}
-```
-
-### 4.2 组件注册系统
-
-实现可扩展的组件注册机制：
-
-```typescript
-// lib/services/component-registry.ts
-interface ComponentDefinition {
-  type: ComponentType;
-  name: string;
-  icon: string;
-  defaultProps: Record<string, any>;
-  propsSchema: JSONSchema;
-  component: React.ComponentType<any>;
-  category: 'basic' | 'layout' | 'content' | 'media';
-}
-
-class ComponentRegistry {
-  private components = new Map<ComponentType, ComponentDefinition>();
-
-  register(definition: ComponentDefinition) {
-    this.components.set(definition.type, definition);
-  }
-
-  get(type: ComponentType): ComponentDefinition | undefined {
-    return this.components.get(type);
-  }
-
-  getByCategory(category: string): ComponentDefinition[] {
-    return Array.from(this.components.values()).filter(
-      def => def.category === category
-    );
-  }
-}
-```
-
-### 4.3 主题集成
-
-适配主项目的设计系统：
-
-```typescript
-// components/admin/about-editor/theme.ts
-export const aboutEditorTheme = {
-  components: {
-    heading: {
-      1: 'text-3xl font-bold text-primary-900 dark:text-primary-100',
-      2: 'text-2xl font-semibold text-primary-800 dark:text-primary-200',
-      // ... 其他层级
-    },
-    paragraph:
-      'text-base leading-relaxed text-primary-600 dark:text-primary-300',
-    card: {
-      container:
-        'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm',
-      header: 'text-lg font-semibold text-primary-800 dark:text-primary-200',
-      content: 'text-primary-600 dark:text-primary-300',
-    },
-    // ... 其他组件样式
-  },
-  editor: {
-    sidebar:
-      'w-80 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700',
-    canvas: 'flex-1 bg-white dark:bg-gray-800 p-6',
-    dropZone:
-      'border-2 border-dashed border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/20',
-    // ... 编辑器样式
-  },
-};
-```
-
-### 4.4 性能优化策略
-
-#### 虚拟化处理
-
-```typescript
-// 对于大型页面内容，实现虚拟滚动
-import { FixedSizeList as List } from 'react-window';
-
-const VirtualizedSectionList: React.FC<{sections: PageSection[]}> = ({ sections }) => {
-  const renderSection = ({ index, style }: { index: number; style: React.CSSProperties }) => (
-    <div style={style}>
-      <SectionRenderer section={sections[index]} />
-    </div>
-  );
-
-  return (
-    <List
-      height={600}
-      itemCount={sections.length}
-      itemSize={200}
-    >
-      {renderSection}
-    </List>
-  );
-};
-```
-
-#### 防抖和节流
-
-```typescript
-// 使用 lodash.debounce 优化属性更新
-import { debounce } from 'lodash-es';
-
-const debouncedSave = useMemo(
-  () =>
-    debounce((content: PageContent) => {
-      // 自动保存逻辑
-      aboutEditorStore.save();
-    }, 2000),
-  []
-);
-```
-
-## 5. 数据迁移策略
-
-### 5.1 迁移工具实现
-
-```typescript
-// lib/utils/data-migration.ts
-interface LegacyAboutData {
-  title: string;
-  subtitle: string;
-  mission: { title: string; description: string };
-  values: {
-    title: string;
-    items: Array<{ title: string; description: string }>;
-  };
-  buttonText: string;
-  copyright: { prefix: string; linkText: string; suffix: string };
-}
-
-function migrateLegacyToComponentStructure(
-  legacy: LegacyAboutData
-): PageContent {
-  return {
-    sections: [
-      // 标题区域
-      {
-        id: generateId(),
-        layout: 'single-column',
-        columns: [
-          [
-            {
-              id: generateId(),
-              type: 'heading',
-              props: { content: legacy.title, level: 1, textAlign: 'center' },
-            },
-            {
-              id: generateId(),
-              type: 'paragraph',
-              props: { content: legacy.subtitle, textAlign: 'center' },
-            },
-          ],
-        ],
-      },
-      // 使命区域
-      {
-        id: generateId(),
-        layout: 'single-column',
-        columns: [
-          [
-            {
-              id: generateId(),
-              type: 'heading',
-              props: {
-                content: legacy.mission.title,
-                level: 2,
-                textAlign: 'left',
-              },
-            },
-            {
-              id: generateId(),
-              type: 'paragraph',
-              props: { content: legacy.mission.description, textAlign: 'left' },
-            },
-          ],
-        ],
-      },
-      // 价值观区域
-      {
-        id: generateId(),
-        layout: 'single-column',
-        columns: [
-          [
-            {
-              id: generateId(),
-              type: 'heading',
-              props: {
-                content: legacy.values.title,
-                level: 2,
-                textAlign: 'left',
-              },
-            },
-            {
-              id: generateId(),
-              type: 'cards',
-              props: { layout: 'grid', items: legacy.values.items },
-            },
-          ],
-        ],
-      },
-      // 按钮区域
-      {
-        id: generateId(),
-        layout: 'single-column',
-        columns: [
-          [
-            {
-              id: generateId(),
-              type: 'button',
-              props: {
-                text: legacy.buttonText,
-                variant: 'primary',
-                action: 'link',
-                url: '#',
-              },
-            },
-          ],
-        ],
-      },
-    ],
-  };
-}
-```
-
-### 5.2 向后兼容
-
-```typescript
-// 使用现有的 TranslationService 进行动态数据管理
-// lib/services/admin/content/translation-service.ts (已存在)
-// 在编辑器中的使用示例：
-import { TranslationService } from '@/lib/services/admin/content/translation-service';
-import {
-  ComponentInstance,
-  PageContent,
-  PageSection,
-} from '@/lib/types/about-page';
-
-export class AboutPageDataManager {
-  // 获取所有语言的动态关于页面内容
-  async getAboutPageContent(): Promise<Record<string, PageContent>> {
-    const translations = await TranslationService.getAboutPageTranslations();
-    return translations;
-  }
-
-  // 批量更新所有语言的关于页面sections
-  async updateAboutPageContent(
-    updates: Record<string, PageContent>,
-    mode: 'merge' | 'replace' = 'replace' // 动态结构建议使用replace模式
-  ) {
-    return await TranslationService.updateAboutPageTranslations(updates, mode);
-  }
-
-  // 生成新组件的默认数据
-  createDefaultComponent(type: ComponentType): ComponentInstance {
-    const id = `comp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-
-    const defaultProps = {
-      heading: { content: 'New Heading', level: 2, textAlign: 'left' },
-      paragraph: { content: 'New paragraph text', textAlign: 'left' },
-      button: {
-        text: 'New Button',
-        variant: 'primary',
-        action: 'link',
-        url: '#',
-      },
-      cards: { layout: 'grid', items: [] },
-      image: { src: '', alt: '', width: 'auto', height: 'auto' },
-      divider: { style: 'solid', color: 'gray' },
-    };
-
-    return {
-      id,
-      type,
-      props: defaultProps[type] || {},
-    };
-  }
-
-  // 生成新section的默认数据
-  createDefaultSection(
-    layout: 'single-column' | 'two-column' | 'three-column' = 'single-column'
-  ): PageSection {
-    const id = `section-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const columnCount =
-      layout === 'single-column' ? 1 : layout === 'two-column' ? 2 : 3;
-
-    return {
-      id,
-      layout,
-      columns: Array(columnCount)
-        .fill([])
-        .map(() => []),
-    };
-  }
-}
-```
-
-## 6. 测试策略
-
-### 6.1 单元测试
-
-```typescript
-// __tests__/components/ComponentRenderer.test.tsx
-import { render, screen } from '@testing-library/react';
-import ComponentRenderer from '@/components/admin/about-editor/ComponentRenderer';
-
-describe('ComponentRenderer', () => {
-  it('renders heading component correctly', () => {
-    const component: ComponentInstance = {
-      id: 'test-1',
-      type: 'heading',
-      props: { content: 'Test Heading', level: 1, textAlign: 'center' }
-    };
-
-    render(<ComponentRenderer component={component} colors={mockColors} />);
-
-    const heading = screen.getByRole('heading', { level: 1 });
-    expect(heading).toHaveTextContent('Test Heading');
-    expect(heading).toHaveClass('text-center');
-  });
-});
-```
-
-### 6.2 集成测试
-
-```typescript
-// __tests__/integration/about-editor.test.tsx
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import AboutPageEditor from '@/components/admin/about-editor/AboutPageEditor';
-
-describe('AboutPageEditor Integration', () => {
-  it('allows dragging component from palette to canvas', async () => {
-    const user = userEvent.setup();
-    render(<AboutPageEditor />);
-
-    // 从组件面板拖拽标题组件到画布
-    const headingComponent = screen.getByText('heading');
-    const canvas = screen.getByTestId('editor-canvas');
-
-    await user.dragAndDrop(headingComponent, canvas);
-
-    // 验证组件已添加到画布
-    await waitFor(() => {
-      expect(screen.getByText('New Heading')).toBeInTheDocument();
-    });
-  });
-});
-```
-
-### 6.3 E2E 测试
-
-```typescript
-// e2e/about-page-editor.spec.ts
-import { expect, test } from '@playwright/test';
-
-test('complete editing workflow', async ({ page }) => {
-  // 登录管理员账户
-  await page.goto('/admin/login');
-  await page.fill('[name=email]', 'admin@test.com');
-  await page.fill('[name=password]', 'password');
-  await page.click('button[type=submit]');
-
-  // 导航到关于页面编辑器
-  await page.goto('/admin/about/edit');
-
-  // 添加新组件
-  await page.dragAndDrop(
-    '[data-testid=component-heading]',
-    '[data-testid=editor-canvas]'
-  );
-
-  // 编辑组件属性
-  await page.click('[data-testid=added-component]');
-  await page.fill('[name=content]', 'Updated Heading');
-
-  // 保存更改
-  await page.click('[data-testid=save-button]');
-
-  // 验证保存成功
-  await expect(page.locator('[data-testid=success-toast]')).toBeVisible();
-
-  // 验证前端显示
-  await page.goto('/about');
-  await expect(page.locator('h1')).toContainText('Updated Heading');
-});
-```
-
-## 7. 风险评估与缓解
-
-### 7.1 技术风险
-
-| 风险项               | 影响级别 | 概率 | 缓解措施                                    |
-| -------------------- | -------- | ---- | ------------------------------------------- |
-| 拖拽库兼容性问题     | 中       | 低   | 使用经过验证的 StrictModeDroppable 解决方案 |
-| 性能问题（大型页面） | 高       | 中   | 实现虚拟滚动、懒加载、分页加载              |
-| 数据迁移失败         | 高       | 低   | 充分测试、提供回滚机制、分步迁移            |
-| 浏览器兼容性         | 中       | 低   | 使用现代浏览器支持的 API，添加 polyfill     |
-
-### 7.2 业务风险
-
-| 风险项         | 影响级别 | 概率 | 缓解措施                           |
-| -------------- | -------- | ---- | ---------------------------------- |
-| 用户学习成本高 | 中       | 中   | 提供详细文档、视频教程、渐进式引导 |
-| 现有工作流中断 | 高       | 低   | 保持向后兼容、分阶段推出           |
-| 数据丢失       | 高       | 极低 | 定期备份、版本控制、原子操作       |
-
-### 7.3 项目风险
-
-| 风险项       | 影响级别 | 概率 | 缓解措施                           |
-| ------------ | -------- | ---- | ---------------------------------- |
-| 开发时间超期 | 中       | 中   | 合理估算、分阶段交付、核心功能优先 |
-| 资源不足     | 中       | 低   | 合理分配任务、寻求技术支持         |
-| 需求变更     | 低       | 中   | 灵活的架构设计、模块化实现         |
-
-## 8. 成功指标
-
-### 8.1 功能指标
-
-- [ ] 支持所有 demo 中的组件类型（7种）
-- [ ] 支持多列布局（单列、双列、三列）
-- [ ] 拖拽交互响应时间 < 100ms
-- [ ] 属性编辑实时生效
-- [ ] 数据迁移成功率 100%
-
-### 8.2 性能指标
-
-- [ ] 页面加载时间 < 2秒
-- [ ] 组件渲染延迟 < 50ms
-- [ ] 支持 100+ 组件的页面编辑
-- [ ] 内存使用量 < 100MB
-
-### 8.3 用户体验指标
-
-- [ ] 管理员能够在 15 分钟内完成页面编辑
-- [ ] 错误率 < 1%
-- [ ] 用户满意度 > 4.5/5
-
-### 8.4 技术指标
-
-- [ ] 代码覆盖率 > 85%
-- [ ] 无严重安全漏洞
-- [ ] 通过所有 E2E 测试
-- [ ] 符合主项目代码规范
-
-## 9. 交付清单
-
-### 9.1 代码交付
-
-- [ ] 所有源代码文件
-- [ ] 类型定义文件
-- [ ] 测试文件
-- [ ] 配置文件
-- [ ] 数据库迁移文件
-
-### 9.2 文档交付
-
-- [ ] 技术实现文档
-- [ ] API 文档
-- [ ] 用户使用手册
-- [ ] 开发者指南
-- [ ] 数据迁移指南
-
-### 9.3 测试交付
-
-- [ ] 单元测试套件
-- [ ] 集成测试套件
-- [ ] E2E 测试套件
-- [ ] 性能测试报告
-- [ ] 安全测试报告
-
-### 9.4 部署交付
-
-- [ ] 部署脚本
-- [ ] 环境配置指南
-- [ ] 监控配置
-- [ ] 备份恢复方案
-- [ ] 回滚方案
-
-## 10. 时间线
-
-| 阶段                   | 持续时间 | 关键里程碑             | 交付物                               |
-| ---------------------- | -------- | ---------------------- | ------------------------------------ |
-| 阶段 1：基础架构和类型 | 1 周     | 类型系统和数据迁移完成 | 动态组件类型定义、数据迁移脚本       |
-| 阶段 2：核心组件移植   | 2 周     | 动态编辑器功能完成     | 拖拽编辑器、组件渲染系统、属性编辑器 |
-| 阶段 3：系统集成       | 1 周     | 现有界面升级完成       | 升级后的编辑器和预览组件             |
-| 阶段 4：优化和测试     | 1 周     | 所有测试通过           | 性能优化、完整测试套件、文档         |
-| **总计**               | **5 周** | **升级完成**           | **动态可视化编辑系统**               |
-
-## 11. 后续优化建议
-
-### 11.1 功能扩展
-
-1. **模板系统**：预设页面模板，快速创建
-2. **版本控制**：内容版本管理、历史记录、对比功能
-3. **协作编辑**：多人同时编辑、冲突解决
-4. **A/B 测试**：支持多个版本的页面内容
-5. **SEO 优化**：自动生成 meta 标签、结构化数据
-
-### 11.2 技术优化
-
-1. **缓存策略**：Redis 缓存、CDN 集成
-2. **实时同步**：WebSocket 实时预览
-3. **移动端优化**：响应式编辑器、触摸操作
-4. **无障碍支持**：键盘导航、屏幕阅读器支持
-5. **国际化增强**：RTL 支持、字体优化
-
-### 11.3 分析和监控
-
-1. **使用分析**：编辑器使用统计、热力图
-2. **性能监控**：Real User Monitoring、错误追踪
-3. **内容分析**：页面访问统计、用户行为分析
-4. **质量监控**：自动化测试、代码质量检查
-
----
-
-_本计划文档将随着项目进展持续更新和完善。_

From 4be5e3c5da8dfb1006eb66a7ab4b548a2b2da0e5 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Tue, 12 Aug 2025 21:33:21 +0800
Subject: [PATCH 36/66] refactor(renderer): update comments in component
 renderer to English

---
 .../about/dynamic-about-renderer.test.tsx     | 390 ------------
 lib/scripts/migrate-about-data.ts             | 309 ----------
 lib/scripts/test-migration.ts                 | 104 ----
 scripts/migrate-about-page.mjs                | 574 ------------------
 4 files changed, 1377 deletions(-)
 delete mode 100644 __tests__/components/about/dynamic-about-renderer.test.tsx
 delete mode 100644 lib/scripts/migrate-about-data.ts
 delete mode 100644 lib/scripts/test-migration.ts
 delete mode 100644 scripts/migrate-about-page.mjs

diff --git a/__tests__/components/about/dynamic-about-renderer.test.tsx b/__tests__/components/about/dynamic-about-renderer.test.tsx
deleted file mode 100644
index 64a85805..00000000
--- a/__tests__/components/about/dynamic-about-renderer.test.tsx
+++ /dev/null
@@ -1,390 +0,0 @@
-import { DynamicAboutRenderer } from '@components/about/dynamic-about-renderer';
-import type { AboutTranslationData } from '@lib/types/about-page-components';
-import '@testing-library/jest-dom';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-
-// Skip NextIntl for testing
-
-// Mock next-intl
-jest.mock('next-intl', () => ({
-  useTranslations: () => (key: string) => key,
-}));
-
-// Mock next/navigation
-jest.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-  }),
-}));
-
-// Mock Supabase client
-jest.mock('@lib/supabase/client', () => ({
-  createClient: () => ({
-    auth: {
-      getUser: jest.fn().mockResolvedValue({ data: { user: null } }),
-    },
-  }),
-}));
-
-// Mock framer-motion
-jest.mock('framer-motion', () => ({
-  motion: {
-    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-    section: ({ children, ...props }: any) => (
-      <section {...props}>{children}</section>
-    ),
-    p: ({ children, ...props }: any) => <p {...props}>{children}</p>,
-    hr: ({ children, ...props }: any) => <hr {...props}>{children}</hr>,
-  },
-}));
-
-// Mock messages
-const messages = {
-  pages: {
-    about: {
-      title: 'About Us',
-      subtitle: 'Test subtitle',
-      buttonText: 'Get Started',
-    },
-  },
-};
-
-const mockColors = {
-  titleGradient: 'from-blue-600 to-purple-600',
-  textColor: 'text-gray-900',
-  headingColor: 'text-gray-900',
-  paragraphColor: 'text-gray-700',
-  cardBg: 'bg-white',
-  cardBorder: 'border-gray-200',
-  cardShadow: 'shadow-lg',
-  cardHeadingColor: 'text-gray-900',
-  cardTextColor: 'text-gray-700',
-  buttonClass: 'bg-blue-600 hover:bg-blue-700 text-white',
-};
-
-const createMockTranslationData = (isDynamic = true): AboutTranslationData => {
-  if (isDynamic) {
-    return {
-      sections: [
-        {
-          id: 'section-1',
-          layout: 'single-column',
-          columns: [
-            [
-              {
-                id: 'comp-1',
-                type: 'heading',
-                props: {
-                  content: 'Test Heading',
-                  level: 1,
-                  textAlign: 'center',
-                },
-              },
-              {
-                id: 'comp-2',
-                type: 'paragraph',
-                props: {
-                  content: 'Test paragraph content',
-                  textAlign: 'left',
-                },
-              },
-            ],
-          ],
-        },
-        {
-          id: 'section-2',
-          layout: 'two-column',
-          columns: [
-            [
-              {
-                id: 'comp-3',
-                type: 'cards',
-                props: {
-                  layout: 'grid',
-                  items: [
-                    {
-                      title: 'Card 1',
-                      description: 'Card 1 description',
-                    },
-                    {
-                      title: 'Card 2',
-                      description: 'Card 2 description',
-                    },
-                  ],
-                },
-              },
-            ],
-            [
-              {
-                id: 'comp-4',
-                type: 'button',
-                props: {
-                  text: 'Click Me',
-                  variant: 'primary',
-                  action: 'link',
-                  url: '/test',
-                },
-              },
-            ],
-          ],
-        },
-      ],
-      metadata: {
-        version: '1.0.0',
-        lastModified: '2024-01-01T00:00:00.000Z',
-        author: 'test',
-      },
-    };
-  }
-
-  // Legacy format
-  return {
-    title: 'Legacy Title',
-    subtitle: 'Legacy Subtitle',
-    mission: {
-      description: 'Legacy mission description',
-    },
-    values: {
-      items: [
-        {
-          title: 'Value 1',
-          description: 'Value 1 description',
-        },
-      ],
-    },
-    buttonText: 'Legacy Button',
-    copyright: {
-      prefix: '© 2024',
-      linkText: 'Company',
-      suffix: '. All rights reserved.',
-    },
-  } as any;
-};
-
-const renderWithIntl = (component: React.ReactNode) => {
-  return render(component);
-};
-
-describe('DynamicAboutRenderer', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Component Rendering', () => {
-    it('renders heading components correctly', () => {
-      const translationData = createMockTranslationData(true);
-
-      renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-        />
-      );
-
-      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
-        'Test Heading'
-      );
-      expect(screen.getByRole('heading', { level: 1 })).toHaveClass(
-        'text-center'
-      );
-    });
-
-    it('renders paragraph components correctly', () => {
-      const translationData = createMockTranslationData(true);
-
-      renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-        />
-      );
-
-      expect(screen.getByText('Test paragraph content')).toBeInTheDocument();
-    });
-
-    it('renders card components correctly', () => {
-      const translationData = createMockTranslationData(true);
-
-      renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-        />
-      );
-
-      expect(screen.getByText('Card 1')).toBeInTheDocument();
-      expect(screen.getByText('Card 1 description')).toBeInTheDocument();
-      expect(screen.getByText('Card 2')).toBeInTheDocument();
-      expect(screen.getByText('Card 2 description')).toBeInTheDocument();
-    });
-
-    it('renders button components correctly', () => {
-      const translationData = createMockTranslationData(true);
-
-      renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-        />
-      );
-
-      const button = screen.getByRole('button', { name: 'Click Me' });
-      expect(button).toBeInTheDocument();
-      expect(button).toHaveClass('bg-blue-600');
-    });
-  });
-
-  describe('Layout Rendering', () => {
-    it('renders single-column layout correctly', () => {
-      const translationData = createMockTranslationData(true);
-
-      const { container } = renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-        />
-      );
-
-      const singleColumnSection = container.querySelector('.grid-cols-1');
-      expect(singleColumnSection).toBeInTheDocument();
-    });
-
-    it('renders two-column layout correctly', () => {
-      const translationData = createMockTranslationData(true);
-
-      const { container } = renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-        />
-      );
-
-      const twoColumnSection = container.querySelector('.md\\:grid-cols-2');
-      expect(twoColumnSection).toBeInTheDocument();
-    });
-  });
-
-  describe('Legacy Data Migration', () => {
-    it('handles legacy format data correctly', () => {
-      const legacyData = createMockTranslationData(false);
-
-      renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={legacyData}
-          colors={mockColors}
-        />
-      );
-
-      // Should migrate and render legacy data
-      expect(screen.getByText('Legacy Title')).toBeInTheDocument();
-      expect(screen.getByText('Legacy Subtitle')).toBeInTheDocument();
-      expect(
-        screen.getByText('Legacy mission description')
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('Button Interactions', () => {
-    it('calls onButtonClick when button is clicked', async () => {
-      const mockOnButtonClick = jest.fn();
-      const translationData = createMockTranslationData(true);
-
-      renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-          onButtonClick={mockOnButtonClick}
-        />
-      );
-
-      const button = screen.getByRole('button', { name: 'Click Me' });
-      fireEvent.click(button);
-
-      await waitFor(() => {
-        expect(mockOnButtonClick).toHaveBeenCalledWith('/test');
-      });
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('handles missing content gracefully', () => {
-      const emptyData: AboutTranslationData = {
-        sections: [],
-        metadata: {
-          version: '1.0.0',
-          lastModified: '2024-01-01T00:00:00.000Z',
-          author: 'test',
-        },
-      };
-
-      renderWithIntl(
-        <DynamicAboutRenderer translationData={emptyData} colors={mockColors} />
-      );
-
-      expect(screen.getByText('No content available')).toBeInTheDocument();
-    });
-
-    it('handles unknown component types gracefully', () => {
-      const invalidData: AboutTranslationData = {
-        sections: [
-          {
-            id: 'section-1',
-            layout: 'single-column',
-            columns: [
-              [
-                {
-                  id: 'comp-1',
-                  type: 'unknown' as any,
-                  props: {
-                    content: 'Test content',
-                  },
-                },
-              ],
-            ],
-          },
-        ],
-        metadata: {
-          version: '1.0.0',
-          lastModified: '2024-01-01T00:00:00.000Z',
-          author: 'test',
-        },
-      };
-
-      renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={invalidData}
-          colors={mockColors}
-        />
-      );
-
-      expect(
-        screen.getByText('Unknown component type: unknown')
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('Performance Optimizations', () => {
-    it('uses memoized component rendering', () => {
-      const translationData = createMockTranslationData(true);
-
-      const { rerender } = renderWithIntl(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-        />
-      );
-
-      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
-
-      // Rerender with same data should use memoized components
-      rerender(
-        <DynamicAboutRenderer
-          translationData={translationData}
-          colors={mockColors}
-        />
-      );
-
-      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
-    });
-  });
-});
diff --git a/lib/scripts/migrate-about-data.ts b/lib/scripts/migrate-about-data.ts
deleted file mode 100644
index cdf1b303..00000000
--- a/lib/scripts/migrate-about-data.ts
+++ /dev/null
@@ -1,309 +0,0 @@
-/**
- * 一次性数据迁移脚本
- *
- * 将现有的固定结构关于页面数据迁移为动态组件结构
- *
- * 使用方式：
- * 1. 开发环境: npm run migrate:about-data
- * 2. 代码中调用: import { runMigration } from '@/lib/scripts/migrate-about-data'
- */
-import {
-  AboutTranslationData,
-  batchMigrateTranslations,
-  createBackupData,
-  validateMigratedData,
-} from '@lib/utils/data-migration';
-import fs from 'fs/promises';
-import path from 'path';
-
-// 配置文件路径
-const MESSAGES_DIR = path.join(process.cwd(), 'messages');
-const BACKUP_DIR = path.join(process.cwd(), 'backup', 'translations');
-
-// 支持的语言列表
-const SUPPORTED_LOCALES = [
-  'en-US',
-  'zh-CN',
-  'es-ES',
-  'zh-TW',
-  'ja-JP',
-  'de-DE',
-  'fr-FR',
-  'ru-RU',
-  'it-IT',
-  'pt-PT',
-];
-
-// 日志工具
-const logger = {
-  info: (message: string) =>
-    console.log(`[INFO] ${new Date().toISOString()} - ${message}`),
-  warn: (message: string) =>
-    console.warn(`[WARN] ${new Date().toISOString()} - ${message}`),
-  error: (message: string) =>
-    console.error(`[ERROR] ${new Date().toISOString()} - ${message}`),
-  success: (message: string) =>
-    console.log(`[SUCCESS] ${new Date().toISOString()} - ${message}`),
-};
-
-// 确保目录存在
-async function ensureDir(dirPath: string): Promise<void> {
-  try {
-    await fs.access(dirPath);
-  } catch {
-    await fs.mkdir(dirPath, { recursive: true });
-  }
-}
-
-// 读取消息文件
-async function readMessageFile(
-  locale: string
-): Promise<Record<string, unknown> | null> {
-  const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
-
-  try {
-    const content = await fs.readFile(filePath, 'utf-8');
-    return JSON.parse(content);
-  } catch (error) {
-    logger.warn(`Failed to read message file for ${locale}: ${error}`);
-    return null;
-  }
-}
-
-// 写入消息文件
-async function writeMessageFile(
-  locale: string,
-  data: Record<string, unknown>
-): Promise<void> {
-  const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
-
-  try {
-    await fs.writeFile(filePath, JSON.stringify(data, null, 2), 'utf-8');
-  } catch (error) {
-    throw new Error(`Failed to write message file for ${locale}: ${error}`);
-  }
-}
-
-// 创建备份
-async function createBackup(
-  locale: string,
-  data: Record<string, unknown>
-): Promise<void> {
-  await ensureDir(BACKUP_DIR);
-
-  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-  const backupPath = path.join(BACKUP_DIR, `${locale}-${timestamp}.json`);
-
-  const pages = data as { pages?: { about?: AboutTranslationData } };
-  const backupData = createBackupData(pages.pages?.about || {});
-
-  try {
-    await fs.writeFile(
-      backupPath,
-      JSON.stringify(backupData, null, 2),
-      'utf-8'
-    );
-    logger.info(`Created backup for ${locale}: ${backupPath}`);
-  } catch (error) {
-    throw new Error(`Failed to create backup for ${locale}: ${error}`);
-  }
-}
-
-// 检查是否需要迁移
-function needsMigration(aboutData: AboutTranslationData): boolean {
-  // 如果已经有sections，说明已经迁移过了
-  if (aboutData.sections && aboutData.sections.length > 0) {
-    return false;
-  }
-
-  // 如果有旧的固定结构数据，需要迁移
-  return Boolean(
-    aboutData.title ||
-      aboutData.subtitle ||
-      aboutData.mission ||
-      aboutData.values ||
-      aboutData.buttonText
-  );
-}
-
-// 迁移单个语言的数据
-async function migrateLocaleData(locale: string): Promise<{
-  success: boolean;
-  skipped?: boolean;
-  error?: string;
-}> {
-  try {
-    logger.info(`Starting migration for ${locale}`);
-
-    // 读取现有数据
-    const messageData = await readMessageFile(locale);
-    if (!messageData) {
-      return { success: false, error: 'Failed to read message file' };
-    }
-
-    // 检查是否有关于页面数据
-    const msgPages = messageData as {
-      pages?: { about?: AboutTranslationData };
-    };
-    const aboutData = msgPages.pages?.about;
-    if (!aboutData) {
-      logger.warn(`No about page data found for ${locale}`);
-      return { success: true, skipped: true };
-    }
-
-    // 检查是否需要迁移
-    if (!needsMigration(aboutData)) {
-      logger.info(`${locale} already migrated, skipping`);
-      return { success: true, skipped: true };
-    }
-
-    // 创建备份
-    await createBackup(locale, messageData);
-
-    // 执行迁移
-    const migratedData = batchMigrateTranslations({ [locale]: aboutData });
-    const newAboutData = migratedData[locale];
-
-    // 验证迁移后的数据
-    const validation = validateMigratedData(newAboutData);
-    if (!validation.isValid) {
-      logger.error(`Migration validation failed for ${locale}:`);
-      validation.errors.forEach((error: string) =>
-        logger.error(`  - ${error}`)
-      );
-      return { success: false, error: 'Migration validation failed' };
-    }
-
-    // 更新消息数据
-    if (!msgPages.pages) msgPages.pages = {};
-    msgPages.pages.about = newAboutData;
-
-    // 写入新数据
-    await writeMessageFile(locale, messageData);
-
-    logger.success(`Successfully migrated ${locale}`);
-    return { success: true };
-  } catch (error) {
-    logger.error(`Migration failed for ${locale}: ${error}`);
-    return {
-      success: false,
-      error: error instanceof Error ? error.message : String(error),
-    };
-  }
-}
-
-// 主迁移函数
-export async function runMigration(
-  options: {
-    dryRun?: boolean;
-    locales?: string[];
-  } = {}
-): Promise<{
-  success: boolean;
-  results: Record<
-    string,
-    { success: boolean; skipped?: boolean; error?: string }
-  >;
-  summary: {
-    total: number;
-    migrated: number;
-    skipped: number;
-    failed: number;
-  };
-}> {
-  const { dryRun = false, locales = SUPPORTED_LOCALES } = options;
-
-  logger.info(
-    `Starting about page data migration${dryRun ? ' (DRY RUN)' : ''}`
-  );
-  logger.info(`Target locales: ${locales.join(', ')}`);
-
-  const results: Record<
-    string,
-    { success: boolean; skipped?: boolean; error?: string }
-  > = {};
-  const summary = {
-    total: locales.length,
-    migrated: 0,
-    skipped: 0,
-    failed: 0,
-  };
-
-  for (const locale of locales) {
-    if (dryRun) {
-      // 在干运行模式下，只检查是否需要迁移
-      const messageData = await readMessageFile(locale);
-      const pages = messageData as {
-        pages?: { about?: AboutTranslationData };
-      } | null;
-      const aboutData = pages?.pages?.about;
-
-      if (!aboutData) {
-        results[locale] = { success: true, skipped: true };
-        summary.skipped++;
-      } else if (needsMigration(aboutData)) {
-        logger.info(`${locale} needs migration`);
-        results[locale] = { success: true };
-        summary.migrated++;
-      } else {
-        logger.info(`${locale} already migrated`);
-        results[locale] = { success: true, skipped: true };
-        summary.skipped++;
-      }
-    } else {
-      // 执行实际迁移
-      const result = await migrateLocaleData(locale);
-      results[locale] = result;
-
-      if (result.success) {
-        if (result.skipped) {
-          summary.skipped++;
-        } else {
-          summary.migrated++;
-        }
-      } else {
-        summary.failed++;
-      }
-    }
-  }
-
-  // 打印总结
-  logger.info('Migration Summary:');
-  logger.info(`  Total locales: ${summary.total}`);
-  logger.info(`  Migrated: ${summary.migrated}`);
-  logger.info(`  Skipped: ${summary.skipped}`);
-  logger.info(`  Failed: ${summary.failed}`);
-
-  const overallSuccess = summary.failed === 0;
-
-  if (overallSuccess) {
-    logger.success('Migration completed successfully!');
-  } else {
-    logger.error('Migration completed with errors!');
-  }
-
-  return {
-    success: overallSuccess,
-    results,
-    summary,
-  };
-}
-
-// CLI 执行入口
-if (require.main === module) {
-  const args = process.argv.slice(2);
-  const dryRun = args.includes('--dry-run');
-  const localesArg = args.find(arg => arg.startsWith('--locales='));
-  const locales = localesArg
-    ? localesArg.split('=')[1].split(',')
-    : SUPPORTED_LOCALES;
-
-  runMigration({ dryRun, locales })
-    .then(result => {
-      process.exit(result.success ? 0 : 1);
-    })
-    .catch(error => {
-      logger.error(`Migration script failed: ${error}`);
-      process.exit(1);
-    });
-}
diff --git a/lib/scripts/test-migration.ts b/lib/scripts/test-migration.ts
deleted file mode 100644
index 54ada896..00000000
--- a/lib/scripts/test-migration.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * 数据迁移功能测试脚本
- *
- * 用于验证数据迁移工具的正确性
- */
-import {
-  AboutTranslationData,
-  LegacyAboutData,
-  createDefaultComponent,
-  createDefaultSection,
-  generateUniqueId,
-  migrateLegacyToSections,
-  validateMigratedData,
-} from '@lib/utils/data-migration';
-
-// 测试数据
-const testLegacyData: LegacyAboutData = {
-  title: 'Test About AgentifUI',
-  subtitle: 'Connecting AI with enterprises for testing',
-  mission: {
-    description: 'This is a test mission description for validation.',
-  },
-  values: {
-    items: [
-      {
-        title: 'Test Innovation',
-        description: 'Test description for innovation',
-      },
-      {
-        title: 'Test Security',
-        description: 'Test description for security',
-      },
-    ],
-  },
-  buttonText: 'Test Button',
-  copyright: {
-    prefix: '© {year} ',
-    linkText: 'Test Company',
-    suffix: '. All rights reserved.',
-  },
-};
-
-// 执行测试
-function runTests() {
-  console.log('🧪 开始数据迁移功能测试...\n');
-
-  // 测试1: ID生成
-  console.log('📝 测试 1: ID 生成功能');
-  const sectionId = generateUniqueId('section');
-  const componentId = generateUniqueId('comp');
-  console.log(`  生成的 Section ID: ${sectionId}`);
-  console.log(`  生成的 Component ID: ${componentId}`);
-  console.log(`  ✅ ID 生成测试通过\n`);
-
-  // 测试2: 默认组件创建
-  console.log('📝 测试 2: 默认组件创建');
-  const headingComponent = createDefaultComponent('heading', 'Test Heading');
-  console.log(`  标题组件: ${JSON.stringify(headingComponent, null, 2)}`);
-  console.log(`  ✅ 默认组件创建测试通过\n`);
-
-  // 测试3: 默认段落创建
-  console.log('📝 测试 3: 默认段落创建');
-  const section = createDefaultSection('single-column');
-  console.log(`  段落结构: ${JSON.stringify(section, null, 2)}`);
-  console.log(`  ✅ 默认段落创建测试通过\n`);
-
-  // 测试4: 数据迁移
-  console.log('📝 测试 4: 固定结构到动态结构迁移');
-  const migratedContent = migrateLegacyToSections(testLegacyData);
-  console.log(`  迁移后的数据结构:`);
-  console.log(`  - 段落数量: ${migratedContent.sections.length}`);
-  console.log(
-    `  - 第一个段落的组件数量: ${migratedContent.sections[0]?.columns[0]?.length || 0}`
-  );
-  console.log(`  ✅ 数据迁移测试通过\n`);
-
-  // 测试5: 数据验证
-  console.log('📝 测试 5: 迁移数据验证');
-  const testData: AboutTranslationData = {
-    sections: migratedContent.sections,
-    metadata: migratedContent.metadata,
-  };
-
-  const validation = validateMigratedData(testData);
-  console.log(`  验证结果: ${validation.isValid ? '✅ 有效' : '❌ 无效'}`);
-  if (!validation.isValid) {
-    console.log(`  错误列表:`);
-    validation.errors.forEach(error => console.log(`    - ${error}`));
-  }
-  console.log(`  ✅ 数据验证测试通过\n`);
-
-  // 测试6: 完整的数据结构打印
-  console.log('📝 测试 6: 完整迁移数据结构展示');
-  console.log(JSON.stringify(migratedContent, null, 2));
-
-  console.log('\n🎉 所有测试通过！数据迁移功能正常工作。');
-}
-
-// 如果直接运行此脚本
-if (require.main === module) {
-  runTests();
-}
-
-export { runTests };
diff --git a/scripts/migrate-about-page.mjs b/scripts/migrate-about-page.mjs
deleted file mode 100644
index 4603f117..00000000
--- a/scripts/migrate-about-page.mjs
+++ /dev/null
@@ -1,574 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Data migration script for About Page dynamic component system
- * 
- * This script migrates the existing fixed structure about page translations
- * to the new dynamic component structure while maintaining backward compatibility.
- * 
- * Usage:
- *   node scripts/migrate-about-page.mjs [--dry-run] [--locale=en-US]
- */
-
-import fs from 'fs/promises';
-import path from 'path';
-import { existsSync } from 'fs';
-
-// Command line arguments
-const args = process.argv.slice(2);
-const isDryRun = args.includes('--dry-run');
-const noBackup = args.includes('--no-backup');
-const targetLocale = args.find(arg => arg.startsWith('--locale='))?.split('=')[1];
-
-// Configuration
-const MESSAGES_DIR = path.join(process.cwd(), 'messages');
-const BACKUP_DIR = path.join(process.cwd(), 'backups', 'about-page-migration');
-const SUPPORTED_LOCALES = [
-  'en-US', 'zh-CN', 'zh-TW', 'ja-JP', 'de-DE', 
-  'fr-FR', 'ru-RU', 'it-IT', 'pt-PT', 'es-ES'
-];
-
-/**
- * Generate unique ID with timestamp and random string
- */
-function generateUniqueId(prefix = 'comp') {
-  const timestamp = Date.now();
-  const random = Math.random().toString(36).substr(2, 9);
-  return `${prefix}-${timestamp}-${random}`;
-}
-
-/**
- * Create default component instance
- */
-function createDefaultComponent(type, content = '') {
-  const id = generateUniqueId('comp');
-  
-  const defaultProps = {
-    heading: {
-      content: content || 'New Heading',
-      level: 2,
-      textAlign: 'left',
-    },
-    paragraph: {
-      content: content || 'New paragraph text',
-      textAlign: 'left',
-    },
-    button: {
-      text: content || 'New Button',
-      variant: 'primary',
-      action: 'link',
-      url: '#',
-    },
-    cards: {
-      layout: 'grid',
-      items: [],
-    },
-    image: {
-      src: '',
-      alt: content || 'Image',
-      alignment: 'center',
-      width: 'auto',
-      height: 'auto',
-    },
-    divider: {
-      style: 'solid',
-      color: 'gray',
-      thickness: 'medium',
-    },
-  };
-
-  return {
-    id,
-    type,
-    props: defaultProps[type] || {},
-  };
-}
-
-/**
- * Migrate legacy structure to dynamic sections
- */
-function migrateLegacyToSections(legacy) {
-  const sections = [];
-
-  // Title and subtitle section
-  if (legacy.title || legacy.subtitle) {
-    const titleComponents = [];
-
-    if (legacy.title) {
-      const titleComp = createDefaultComponent('heading', legacy.title);
-      titleComp.props.level = 1;
-      titleComp.props.textAlign = 'center';
-      titleComponents.push(titleComp);
-    }
-
-    if (legacy.subtitle) {
-      const subtitleComp = createDefaultComponent('paragraph', legacy.subtitle);
-      subtitleComp.props.textAlign = 'center';
-      titleComponents.push(subtitleComp);
-    }
-
-    if (titleComponents.length > 0) {
-      sections.push({
-        id: generateUniqueId('section'),
-        layout: 'single-column',
-        columns: [titleComponents],
-      });
-    }
-  }
-
-  // Mission section
-  if (legacy.mission?.description) {
-    const missionTitle = legacy.mission.title || 'Our Mission';
-    sections.push({
-      id: generateUniqueId('section'),
-      layout: 'single-column',
-      columns: [
-        [
-          createDefaultComponent('heading', missionTitle),
-          createDefaultComponent('paragraph', legacy.mission.description),
-        ],
-      ],
-    });
-  }
-
-  // Values section
-  if (legacy.values?.items && legacy.values.items.length > 0) {
-    const valuesTitle = legacy.values.title || 'Our Values';
-    const valuesSection = {
-      id: generateUniqueId('section'),
-      layout: 'single-column',
-      columns: [[createDefaultComponent('heading', valuesTitle)]],
-    };
-
-    // Add cards component
-    const cardsComponent = createDefaultComponent('cards');
-    cardsComponent.props = {
-      layout: 'grid',
-      items: legacy.values.items,
-    };
-
-    valuesSection.columns[0].push(cardsComponent);
-    sections.push(valuesSection);
-  }
-
-  // Button section
-  if (legacy.buttonText) {
-    const buttonComponent = createDefaultComponent('button', legacy.buttonText);
-    buttonComponent.props.textAlign = 'center';
-    sections.push({
-      id: generateUniqueId('section'),
-      layout: 'single-column',
-      columns: [[buttonComponent]],
-    });
-  }
-
-  // Copyright section
-  if (legacy.copyright) {
-    const copyrightText = [
-      legacy.copyright.prefix?.replace('{year}', new Date().getFullYear().toString()) || '',
-      legacy.copyright.linkText || '',
-      legacy.copyright.suffix || '',
-    ].join('');
-
-    if (copyrightText.trim()) {
-      const copyrightComponent = createDefaultComponent('paragraph', copyrightText);
-      copyrightComponent.props.textAlign = 'center';
-
-      sections.push({
-        id: generateUniqueId('section'),
-        layout: 'single-column',
-        columns: [[copyrightComponent]],
-      });
-    }
-  }
-
-  return {
-    sections,
-    metadata: {
-      version: '1.0.0',
-      lastModified: new Date().toISOString(),
-      author: 'system-migration',
-    },
-  };
-}
-
-/**
- * Validate migrated data
- */
-function validateMigratedData(data) {
-  const errors = [];
-
-  if (!data.sections || data.sections.length === 0) {
-    errors.push('Migration failed: no sections created');
-  }
-
-  data.sections?.forEach((section, index) => {
-    if (!section.id) {
-      errors.push(`Section ${index} missing ID`);
-    }
-    if (!section.layout) {
-      errors.push(`Section ${index} missing layout`);
-    }
-    if (!section.columns || !Array.isArray(section.columns)) {
-      errors.push(`Section ${index} missing or invalid columns`);
-    }
-
-    section.columns?.forEach((column, columnIndex) => {
-      if (!Array.isArray(column)) {
-        errors.push(`Section ${index}, Column ${columnIndex} is not an array`);
-        return;
-      }
-
-      column.forEach((component, componentIndex) => {
-        if (!component.id) {
-          errors.push(`Section ${index}, Column ${columnIndex}, Component ${componentIndex} missing ID`);
-        }
-        if (!component.type) {
-          errors.push(`Section ${index}, Column ${columnIndex}, Component ${componentIndex} missing type`);
-        }
-        if (!component.props) {
-          errors.push(`Section ${index}, Column ${columnIndex}, Component ${componentIndex} missing props`);
-        }
-      });
-    });
-  });
-
-  return {
-    isValid: errors.length === 0,
-    errors,
-  };
-}
-
-/**
- * Load translation file for a specific locale
- */
-async function loadTranslationFile(locale) {
-  const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
-  
-  if (!existsSync(filePath)) {
-    throw new Error(`Translation file not found: ${filePath}`);
-  }
-
-  const content = await fs.readFile(filePath, 'utf8');
-  return JSON.parse(content);
-}
-
-/**
- * Save translation file for a specific locale
- */
-async function saveTranslationFile(locale, data) {
-  const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
-  const formattedContent = JSON.stringify(data, null, 2);
-  
-  if (!isDryRun) {
-    await fs.writeFile(filePath, formattedContent, 'utf8');
-  }
-  
-  console.log(`📝 ${isDryRun ? '[DRY RUN] Would save' : 'Saved'}: ${filePath}`);
-}
-
-/**
- * Create backup of original translation files
- */
-async function createBackups(locales) {
-  if (noBackup) {
-    console.log('⚠️  Backup skipped (--no-backup flag)');
-    return;
-  }
-
-  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-  const backupPath = path.join(BACKUP_DIR, timestamp);
-  
-  await fs.mkdir(backupPath, { recursive: true });
-  
-  for (const locale of locales) {
-    try {
-      const data = await loadTranslationFile(locale);
-      const backupFilePath = path.join(backupPath, `${locale}.json`);
-      
-      const backupData = {
-        data: JSON.parse(JSON.stringify(data.pages?.about || {})),
-        timestamp: new Date().toISOString(),
-        version: '1.0.0',
-      };
-      
-      if (!isDryRun) {
-        await fs.writeFile(backupFilePath, JSON.stringify({
-          originalFile: `${locale}.json`,
-          migrationTimestamp: new Date().toISOString(),
-          ...backupData
-        }, null, 2), 'utf8');
-      }
-      
-      console.log(`💾 ${isDryRun ? '[DRY RUN] Would backup' : 'Backed up'}: ${locale} -> ${backupFilePath}`);
-    } catch (error) {
-      console.error(`❌ Failed to backup ${locale}:`, error);
-    }
-  }
-}
-
-/**
- * Check if about page data is already in dynamic format
- */
-function isAlreadyDynamicFormat(aboutData) {
-  return aboutData && 
-         Array.isArray(aboutData.sections) && 
-         aboutData.sections.length > 0 &&
-         aboutData.sections[0].id &&
-         aboutData.sections[0].layout &&
-         Array.isArray(aboutData.sections[0].columns);
-}
-
-/**
- * Extract legacy about data from translation object
- */
-function extractLegacyAboutData(translationData) {
-  const aboutData = translationData?.pages?.about;
-  
-  if (!aboutData) {
-    return null;
-  }
-
-  // If already dynamic format, return null
-  if (isAlreadyDynamicFormat(aboutData)) {
-    return null;
-  }
-
-  return {
-    title: aboutData.title || '',
-    subtitle: aboutData.subtitle || '',
-    mission: {
-      title: aboutData.mission?.title || 'Our Mission',
-      description: aboutData.mission?.description || ''
-    },
-    values: {
-      title: aboutData.values?.title || 'Our Values',
-      items: aboutData.values?.items || []
-    },
-    buttonText: aboutData.buttonText || '',
-    copyright: aboutData.copyright || {
-      prefix: '',
-      linkText: '',
-      suffix: ''
-    }
-  };
-}
-
-/**
- * Calculate migration statistics
- */
-function calculateStats(legacy, migrated) {
-  const sectionsCreated = migrated.sections?.length || 0;
-  const componentsCreated = migrated.sections?.reduce((total, section) => {
-    return total + section.columns.reduce((colTotal, column) => colTotal + column.length, 0);
-  }, 0) || 0;
-  
-  const originalDataSize = JSON.stringify(legacy).length;
-  const migratedDataSize = JSON.stringify(migrated).length;
-
-  return {
-    sectionsCreated,
-    componentsCreated,
-    originalDataSize,
-    migratedDataSize
-  };
-}
-
-/**
- * Migrate a single locale
- */
-async function migrateLocale(locale) {
-  const warnings = [];
-  
-  try {
-    console.log(`\n🔄 Processing ${locale}...`);
-    
-    // Load translation data
-    const translationData = await loadTranslationFile(locale);
-    const legacyAboutData = extractLegacyAboutData(translationData);
-    
-    if (!legacyAboutData) {
-      if (isAlreadyDynamicFormat(translationData?.pages?.about)) {
-        console.log(`✅ ${locale} already uses dynamic format - skipping`);
-        return {
-          locale,
-          success: true,
-          warnings: ['Already in dynamic format'],
-          stats: { sectionsCreated: 0, componentsCreated: 0, originalDataSize: 0, migratedDataSize: 0 }
-        };
-      }
-      
-      console.log(`⚠️  ${locale} has no about page data - skipping`);
-      return {
-        locale,
-        success: true,
-        warnings: ['No about page data found'],
-        stats: { sectionsCreated: 0, componentsCreated: 0, originalDataSize: 0, migratedDataSize: 0 }
-      };
-    }
-
-    // Validate legacy data
-    if (!legacyAboutData.title && !legacyAboutData.subtitle) {
-      warnings.push('Missing title and subtitle');
-    }
-    
-    if (!legacyAboutData.mission?.description) {
-      warnings.push('Missing mission description');
-    }
-    
-    if (!legacyAboutData.values?.items?.length) {
-      warnings.push('No value items found');
-    }
-
-    // Migrate to dynamic structure
-    console.log(`🔧 Migrating ${locale} from legacy to dynamic format...`);
-    const migratedData = migrateLegacyToSections(legacyAboutData);
-    
-    // Add metadata
-    const aboutTranslationData = {
-      sections: migratedData.sections,
-      metadata: {
-        ...migratedData.metadata,
-        migrated: true,
-      }
-    };
-
-    // Validate migrated data
-    const validation = validateMigratedData(aboutTranslationData);
-    if (!validation.isValid) {
-      throw new Error(`Migration validation failed: ${validation.errors.join(', ')}`);
-    }
-
-    // Calculate statistics
-    const stats = calculateStats(legacyAboutData, aboutTranslationData);
-
-    // Update translation data structure
-    const updatedTranslationData = {
-      ...translationData,
-      pages: {
-        ...translationData.pages,
-        about: aboutTranslationData
-      }
-    };
-
-    // Save migrated data
-    await saveTranslationFile(locale, updatedTranslationData);
-    
-    console.log(`✅ ${locale} migration completed:`);
-    console.log(`   📊 Sections created: ${stats.sectionsCreated}`);
-    console.log(`   🧩 Components created: ${stats.componentsCreated}`);
-    console.log(`   📏 Data size: ${stats.originalDataSize}B → ${stats.migratedDataSize}B`);
-    
-    if (warnings.length > 0) {
-      console.log(`   ⚠️  Warnings: ${warnings.join(', ')}`);
-    }
-
-    return {
-      locale,
-      success: true,
-      warnings,
-      stats
-    };
-
-  } catch (error) {
-    console.error(`❌ Failed to migrate ${locale}:`, error);
-    return {
-      locale,
-      success: false,
-      error: error instanceof Error ? error.message : String(error),
-      warnings,
-      stats: { sectionsCreated: 0, componentsCreated: 0, originalDataSize: 0, migratedDataSize: 0 }
-    };
-  }
-}
-
-/**
- * Main migration function
- */
-async function runMigration() {
-  console.log('🚀 Starting About Page Dynamic Component Migration');
-  console.log('=================================================');
-  
-  if (isDryRun) {
-    console.log('🔍 DRY RUN MODE - No files will be modified');
-  }
-  
-  if (targetLocale && !SUPPORTED_LOCALES.includes(targetLocale)) {
-    console.error(`❌ Unsupported locale: ${targetLocale}`);
-    console.log(`Supported locales: ${SUPPORTED_LOCALES.join(', ')}`);
-    process.exit(1);
-  }
-
-  const localeList = targetLocale ? [targetLocale] : SUPPORTED_LOCALES;
-  console.log(`📋 Target locales: ${localeList.join(', ')}`);
-
-  try {
-    // Create backups
-    console.log('\n📦 Creating backups...');
-    await createBackups(localeList);
-
-    // Run migrations
-    console.log('\n🔄 Running migrations...');
-    const results = [];
-    
-    for (const locale of localeList) {
-      const result = await migrateLocale(locale);
-      results.push(result);
-    }
-
-    // Summary report
-    console.log('\n📊 Migration Summary');
-    console.log('===================');
-    
-    const successful = results.filter(r => r.success);
-    const failed = results.filter(r => !r.success);
-    
-    console.log(`✅ Successful: ${successful.length}/${results.length}`);
-    console.log(`❌ Failed: ${failed.length}/${results.length}`);
-    
-    if (successful.length > 0) {
-      const totalSections = successful.reduce((sum, r) => sum + r.stats.sectionsCreated, 0);
-      const totalComponents = successful.reduce((sum, r) => sum + r.stats.componentsCreated, 0);
-      
-      console.log(`📊 Total sections created: ${totalSections}`);
-      console.log(`🧩 Total components created: ${totalComponents}`);
-    }
-
-    // List failures
-    if (failed.length > 0) {
-      console.log('\n❌ Failed migrations:');
-      failed.forEach(result => {
-        console.log(`   ${result.locale}: ${result.error}`);
-      });
-    }
-
-    // List warnings
-    const withWarnings = results.filter(r => r.warnings.length > 0);
-    if (withWarnings.length > 0) {
-      console.log('\n⚠️  Migrations with warnings:');
-      withWarnings.forEach(result => {
-        console.log(`   ${result.locale}: ${result.warnings.join(', ')}`);
-      });
-    }
-
-    if (isDryRun) {
-      console.log('\n🔍 Dry run completed - no files were modified');
-      console.log('Run without --dry-run to apply changes');
-    } else {
-      console.log('\n🎉 Migration completed successfully!');
-      console.log('   📁 Backup files saved to:', BACKUP_DIR);
-      console.log('   🔄 Please restart your development server');
-      console.log('   ✅ Run type checking: pnpm type-check');
-    }
-
-  } catch (error) {
-    console.error('\n💥 Migration failed:', error);
-    process.exit(1);
-  }
-}
-
-// Run migration
-runMigration().catch(error => {
-  console.error('💥 Unexpected error:', error);
-  process.exit(1);
-});
\ No newline at end of file

From 5555de3fcef065ab7bef78b7f5c346e6df713fc8 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Tue, 12 Aug 2025 21:35:25 +0800
Subject: [PATCH 37/66] chore(migration): remove unused migration files

---
 .../admin/content/component-renderer.tsx      |   2 +-
 lib/types/about-page-components.ts            | 124 +++++++--------
 lib/utils/data-migration.ts                   | 142 +++++++++---------
 scripts/migrate-home-data.ts                  |  94 ------------
 4 files changed, 137 insertions(+), 225 deletions(-)
 delete mode 100644 scripts/migrate-home-data.ts

diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index ef3f2bad..9efab26c 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -303,7 +303,7 @@ const ComponentRenderer: React.FC<ComponentRendererProps> = ({
     );
   }
 
-  // 获取合并后的最终属性 (包含属性继承逻辑)
+  // Final properties after merge (including inheritance logic)
   const resolvedProps = getResolvedComponentProps(
     component,
     sectionCommonProps
diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
index 03dd9765..2091c1e9 100644
--- a/lib/types/about-page-components.ts
+++ b/lib/types/about-page-components.ts
@@ -1,19 +1,19 @@
 /**
- * 动态关于页面组件类型定义
+ * Dynamic "About" Page Component Type Definitions
  *
- * 这个文件定义了动态组件编辑器所需的所有类型，包括：
- * - 组件类型枚举
- * - 布局类型枚举
- * - 组件实例结构
- * - 页面段落结构
- * - 页面内容结构
- * - 各种组件的 props 接口定义
+ * This file defines all the types required for the dynamic component editor, including:
+ * - Component type enums
+ * - Layout type enums
+ * - Component instance structure
+ * - Page section structure
+ * - Page content structure
+ * - Prop interface definitions for various components
  */
 
-// 支持的布局类型
+// Supported layout types
 export type LayoutType = 'single-column' | 'two-column' | 'three-column';
 
-// 支持的组件类型
+// Supported component types
 export type ComponentType =
   | 'heading'
   | 'paragraph'
@@ -22,50 +22,50 @@ export type ComponentType =
   | 'image'
   | 'divider';
 
-// 组件实例接口
+// Component instance interface
 export interface ComponentInstance {
   id: string;
   type: ComponentType;
   props: Record<string, unknown>;
-  // 是否继承section的共享属性 (默认true)
+  // Whether to inherit shared properties from the section (defaults to true)
   inheritFromSection?: boolean;
-  // 要覆盖的section属性键名列表
+  // List of section property keys to override
   overrideProps?: string[];
 }
 
-// Section共享属性接口
+// Section shared properties interface
 export interface SectionCommonProps {
-  // 样式主题
+  // Style theme
   theme?: 'light' | 'dark' | 'auto';
-  // 间距设置
+  // Spacing settings
   spacing?: 'compact' | 'normal' | 'spacious';
-  // 文本对齐
+  // Text alignment
   textAlign?: 'left' | 'center' | 'right';
-  // 动画效果
+  // Animation effect
   animation?: 'fade' | 'slide' | 'none';
-  // 是否可交互
+  // Whether it is interactive
   interactive?: boolean;
-  // 拖拽行为
+  // Drag behavior
   dragBehavior?: 'inherit' | 'custom';
-  // 背景样式
+  // Background style
   backgroundColor?: string;
-  // 边框样式
+  // Border style
   borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
-  // 自定义属性扩展
+  // Custom property extension
   [key: string]: unknown;
 }
 
-// 页面段落接口
+// Page section interface
 export interface PageSection {
   id: string;
   layout: LayoutType;
   columns: ComponentInstance[][];
   shouldDelete?: boolean;
-  // 新增：section级别的共享属性
+  // New: Section-level shared properties
   commonProps?: SectionCommonProps;
 }
 
-// 页面内容接口
+// Page content interface
 export interface PageContent {
   sections: PageSection[];
   metadata?: {
@@ -75,22 +75,22 @@ export interface PageContent {
   };
 }
 
-// === 组件 Props 接口定义 ===
+// === Component Props Interface Definitions ===
 
-// 标题组件 Props
+// Heading component Props
 export interface HeadingProps {
   content: string;
   level: 1 | 2 | 3 | 4 | 5 | 6;
   textAlign: 'left' | 'center' | 'right';
 }
 
-// 段落组件 Props
+// Paragraph component Props
 export interface ParagraphProps {
   content: string;
   textAlign: 'left' | 'center' | 'right';
 }
 
-// 卡片组件 Props
+// Cards component Props
 export interface CardsProps {
   layout: 'grid' | 'list';
   items: Array<{
@@ -100,13 +100,13 @@ export interface CardsProps {
   }>;
 }
 
-// 按钮组件 Props
+// Button component Props
 export interface ButtonProps {
   text: string;
   variant: 'solid' | 'outline';
   action: 'link' | 'submit' | 'external';
   url?: string;
-  // 可选的第二个按钮
+  // Optional second button
   secondaryButton?: {
     text: string;
     variant: 'solid' | 'outline';
@@ -115,7 +115,7 @@ export interface ButtonProps {
   };
 }
 
-// 图片组件 Props
+// Image component Props
 export interface ImageProps {
   src: string;
   alt: string;
@@ -125,14 +125,14 @@ export interface ImageProps {
   height?: string | number;
 }
 
-// 分隔线组件 Props
+// Divider component Props
 export interface DividerProps {
   style: 'solid' | 'dashed' | 'dotted';
   color?: string;
   thickness?: 'thin' | 'medium' | 'thick';
 }
 
-// 组件 Props 联合类型
+// Component Props union type
 export type ComponentProps =
   | HeadingProps
   | ParagraphProps
@@ -141,7 +141,7 @@ export type ComponentProps =
   | ImageProps
   | DividerProps;
 
-// 组件定义接口 (用于组件注册系统)
+// Component definition interface (for the component registration system)
 export interface ComponentDefinition {
   type: ComponentType;
   name: string;
@@ -151,7 +151,7 @@ export interface ComponentDefinition {
   description?: string;
 }
 
-// 编辑器状态接口
+// Editor state interface
 export interface AboutEditorState {
   pageContent: PageContent | null;
   selectedComponentId: string | null;
@@ -161,7 +161,7 @@ export interface AboutEditorState {
   isLoading: boolean;
 }
 
-// 拖拽结果接口 (来自 react-beautiful-dnd)
+// Drag result interface (from react-beautiful-dnd)
 export interface DragResult {
   draggableId: string;
   type: string;
@@ -175,10 +175,10 @@ export interface DragResult {
   } | null;
 }
 
-// ID 生成相关类型
+// ID generation related types
 export type IdPrefix = 'section' | 'comp';
 
-// 数据迁移相关接口
+// Data migration related interfaces
 export interface LegacyAboutData {
   title?: string;
   subtitle?: string;
@@ -199,12 +199,12 @@ export interface LegacyAboutData {
   };
 }
 
-// 扩展的 About 翻译数据接口，支持动态组件结构
+// Extended "About" translation data interface, supporting dynamic component structure
 export interface AboutTranslationData {
-  // 新的动态组件结构
+  // New dynamic component structure
   sections?: PageSection[];
 
-  // 向后兼容：保留原有的固定结构 (用于数据迁移)
+  // Backward compatibility: Retain the original fixed structure (for data migration)
   title?: string;
   subtitle?: string;
   mission?: {
@@ -223,21 +223,21 @@ export interface AboutTranslationData {
     suffix?: string;
   };
 
-  // 元数据
+  // Metadata
   metadata?: {
     version?: string;
     lastModified?: string;
     author?: string;
-    migrated?: boolean; // 标记是否已从固定结构迁移到动态结构
+    migrated?: boolean; // Flag to indicate if migration from fixed to dynamic structure has occurred
   };
 }
 
-// 检查数据是否为新的动态格式
+// Checks if the data is in the new dynamic format
 export function isDynamicFormat(data: AboutTranslationData): boolean {
   return Boolean(data && data.sections && data.sections.length > 0);
 }
 
-// 检查数据是否为旧的固定格式
+// Checks if the data is in the old legacy format
 export function isLegacyFormat(data: AboutTranslationData): boolean {
   return Boolean(
     !data.sections &&
@@ -261,30 +261,30 @@ export {
   createBackupData,
 } from '@lib/utils/data-migration';
 
-// === 属性继承工具函数 ===
+// === Property Inheritance Utility Functions ===
 
 /**
- * 合并section公共属性和组件特有属性
+ * Merges section common properties and component-specific properties
  *
- * @param sectionCommonProps - Section级别的公共属性
- * @param componentProps - 组件特有属性
- * @param overrideProps - 要覆盖的公共属性键名列表
- * @returns 合并后的最终属性对象
+ * @param sectionCommonProps - Section-level common properties
+ * @param componentProps - Component-specific properties
+ * @param overrideProps - List of common property keys to override
+ * @returns The merged final properties object
  */
 export function mergeComponentProps(
   sectionCommonProps: SectionCommonProps = {},
   componentProps: Record<string, unknown> = {},
   overrideProps: string[] = []
 ): Record<string, unknown> {
-  // 创建section属性副本
+  // Create a copy of section properties
   const inherited = { ...sectionCommonProps };
 
-  // 移除被覆盖的属性
+  // Remove the overridden properties
   overrideProps.forEach(key => {
     delete inherited[key];
   });
 
-  // 组件特有属性优先级更高
+  // Component-specific properties have higher priority
   return {
     ...inherited,
     ...componentProps,
@@ -292,22 +292,22 @@ export function mergeComponentProps(
 }
 
 /**
- * 获取组件的最终属性 (包含继承逻辑)
+ * Gets the final resolved properties for a component (including inheritance logic)
  *
- * @param component - 组件实例
- * @param sectionCommonProps - Section的公共属性
- * @returns 解析后的最终属性对象
+ * @param component - The component instance
+ * @param sectionCommonProps - The common properties of the section
+ * @returns The resolved final properties object
  */
 export function getResolvedComponentProps(
   component: ComponentInstance,
   sectionCommonProps?: SectionCommonProps
 ): Record<string, unknown> {
-  // 如果不继承或没有section公共属性，直接返回组件props
+  // If not inheriting or no section common props exist, return component props directly
   if (component.inheritFromSection === false || !sectionCommonProps) {
     return component.props;
   }
 
-  // 合并属性 (默认继承)
+  // Merge properties (default inheritance)
   return mergeComponentProps(
     sectionCommonProps,
     component.props,
diff --git a/lib/utils/data-migration.ts b/lib/utils/data-migration.ts
index 7569190a..5292b267 100644
--- a/lib/utils/data-migration.ts
+++ b/lib/utils/data-migration.ts
@@ -1,7 +1,7 @@
 /**
- * 数据迁移工具
+ * Data Migration Tool
  *
- * 提供从固定结构到动态组件结构的迁移功能
+ * Provides functionality to migrate from a fixed structure to a dynamic component structure.
  */
 import {
   AboutTranslationData,
@@ -13,7 +13,7 @@ import {
   PageSection,
 } from '@lib/types/about-page-components';
 
-// 重新导出类型，以便其他模块使用
+// Re-export types for use in other modules
 export type {
   LegacyAboutData,
   AboutTranslationData,
@@ -24,7 +24,7 @@ export type {
   IdPrefix,
 } from '@lib/types/about-page-components';
 
-// 主页数据结构接口
+// Home page data structure interface
 export interface LegacyHomeData {
   title?: string;
   subtitle?: string;
@@ -41,12 +41,12 @@ export interface LegacyHomeData {
   };
 }
 
-// 扩展主页翻译数据接口，支持动态组件结构
+// Extended home page translation data interface, supporting a dynamic component structure
 export interface HomeTranslationData {
-  // 新的动态组件结构
+  // New dynamic component structure
   sections?: PageSection[];
 
-  // 向后兼容：保留原有的固定结构 (用于数据迁移)
+  // Backward compatibility: Retain the original fixed structure (for data migration)
   title?: string;
   subtitle?: string;
   getStarted?: string;
@@ -61,28 +61,28 @@ export interface HomeTranslationData {
     suffix?: string;
   };
 
-  // 元数据
+  // Metadata
   metadata?: {
     version?: string;
     lastModified?: string;
     author?: string;
-    migrated?: boolean; // 标记是否已从固定结构迁移到动态结构
+    migrated?: boolean; // Flag to indicate if migration from fixed to dynamic structure has occurred
   };
 }
 
-// ID 生成函数
+// ID generation function
 export function generateUniqueId(prefix: IdPrefix): string {
   const timestamp = Date.now();
   const random = Math.random().toString(36).substr(2, 9);
   return `${prefix}-${timestamp}-${random}`;
 }
 
-// 生成多个唯一ID
+// Generate multiple unique IDs
 export function generateUniqueIds(prefix: IdPrefix, count: number): string[] {
   return Array.from({ length: count }, () => generateUniqueId(prefix));
 }
 
-// 创建默认组件实例
+// Create a default component instance
 export function createDefaultComponent(
   type: ComponentType,
   content?: string
@@ -127,13 +127,13 @@ export function createDefaultComponent(
     id,
     type,
     props: defaultProps[type] || {},
-    // 默认继承section属性
+    // Inherit section properties by default
     inheritFromSection: true,
     overrideProps: [],
   };
 }
 
-// 创建默认段落
+// Create a default section
 export function createDefaultSection(
   layout: 'single-column' | 'two-column' | 'three-column' = 'single-column'
 ): PageSection {
@@ -147,7 +147,7 @@ export function createDefaultSection(
     columns: Array(columnCount)
       .fill([])
       .map(() => []),
-    // 默认的section公共属性
+    // Default common properties for the section
     commonProps: {
       theme: 'auto',
       spacing: 'normal',
@@ -159,11 +159,11 @@ export function createDefaultSection(
   };
 }
 
-// 从固定结构迁移到动态组件结构
+// Migrate from a fixed structure to a dynamic component structure
 export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
   const sections: PageSection[] = [];
 
-  // 标题和副标题段落
+  // Title and subtitle section
   if (legacy.title || legacy.subtitle) {
     const titleComponents: ComponentInstance[] = [];
 
@@ -189,7 +189,7 @@ export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
     }
   }
 
-  // 使命段落
+  // Mission section
   if (legacy.mission?.description) {
     sections.push({
       id: generateUniqueId('section'),
@@ -203,7 +203,7 @@ export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
     });
   }
 
-  // 价值观段落
+  // Values section
   if (legacy.values?.items && legacy.values.items.length > 0) {
     const valuesSection: PageSection = {
       id: generateUniqueId('section'),
@@ -211,7 +211,7 @@ export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
       columns: [[createDefaultComponent('heading', 'Our Values')]],
     };
 
-    // 添加卡片组件
+    // Add cards component
     const cardsComponent = createDefaultComponent('cards');
     cardsComponent.props = {
       layout: 'grid',
@@ -222,7 +222,7 @@ export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
     sections.push(valuesSection);
   }
 
-  // 按钮段落
+  // Button section
   if (legacy.buttonText) {
     const buttonComponent = createDefaultComponent('button', legacy.buttonText);
     buttonComponent.props.textAlign = 'center';
@@ -233,7 +233,7 @@ export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
     });
   }
 
-  // 版权段落
+  // Copyright section
   if (legacy.copyright) {
     const copyrightText = [
       legacy.copyright.prefix?.replace(
@@ -269,16 +269,16 @@ export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
   };
 }
 
-// 迁移完整的翻译数据
+// Migrate complete translation data
 export function migrateAboutTranslationData(
   legacy: AboutTranslationData
 ): AboutTranslationData {
-  // 如果已经是动态格式，直接返回
+  // If it's already in the dynamic format, return directly
   if (legacy.sections && legacy.sections.length > 0) {
     return legacy;
   }
 
-  // 迁移固定结构到动态结构
+  // Migrate the fixed structure to the dynamic structure
   const pageContent = migrateLegacyToSections(legacy);
 
   return {
@@ -291,7 +291,7 @@ export function migrateAboutTranslationData(
   };
 }
 
-// 批量迁移多语言数据
+// Batch migrate multi-language data
 export function batchMigrateTranslations(
   translations: Record<string, AboutTranslationData>
 ): Record<string, AboutTranslationData> {
@@ -304,56 +304,58 @@ export function batchMigrateTranslations(
   return migratedTranslations;
 }
 
-// 验证迁移后的数据完整性
+// Validate the integrity of the migrated data
 export function validateMigratedData(data: AboutTranslationData): {
   isValid: boolean;
   errors: string[];
 } {
   const errors: string[] = [];
 
-  // 检查是否有sections
+  // Check if sections exist
   if (!data.sections || data.sections.length === 0) {
-    errors.push('迁移后的数据缺少sections');
+    errors.push('Migrated data is missing sections');
   }
 
-  // 检查每个section的完整性
+  // Check the integrity of each section
   data.sections?.forEach((section: PageSection, index: number) => {
     if (!section.id) {
-      errors.push(`Section ${index} 缺少ID`);
+      errors.push(`Section ${index} is missing an ID`);
     }
 
     if (!section.layout) {
-      errors.push(`Section ${index} 缺少布局配置`);
+      errors.push(`Section ${index} is missing a layout configuration`);
     }
 
     if (!section.columns || !Array.isArray(section.columns)) {
-      errors.push(`Section ${index} 缺少或无效的columns`);
+      errors.push(`Section ${index} has missing or invalid columns`);
     }
 
-    // 检查组件完整性
+    // Check component integrity
     section.columns?.forEach(
       (column: ComponentInstance[], columnIndex: number) => {
         if (!Array.isArray(column)) {
-          errors.push(`Section ${index}, Column ${columnIndex} 不是数组`);
+          errors.push(
+            `Section ${index}, Column ${columnIndex} is not an array`
+          );
           return;
         }
 
         column.forEach((component, componentIndex) => {
           if (!component.id) {
             errors.push(
-              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少ID`
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing an ID`
             );
           }
 
           if (!component.type) {
             errors.push(
-              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少类型`
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing a type`
             );
           }
 
           if (!component.props) {
             errors.push(
-              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少props`
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing props`
             );
           }
         });
@@ -367,14 +369,14 @@ export function validateMigratedData(data: AboutTranslationData): {
   };
 }
 
-// === 主页数据迁移功能 ===
+// === Home Page Data Migration Functions ===
 
-// 检查主页数据是否为新的动态格式
+// Check if the home page data is in the new dynamic format
 export function isHomeDynamicFormat(data: HomeTranslationData): boolean {
   return Boolean(data && data.sections && data.sections.length > 0);
 }
 
-// 检查主页数据是否为旧的固定格式
+// Check if the home page data is in the old fixed format
 export function isHomeLegacyFormat(data: HomeTranslationData): boolean {
   return Boolean(
     !data.sections &&
@@ -386,13 +388,13 @@ export function isHomeLegacyFormat(data: HomeTranslationData): boolean {
   );
 }
 
-// 从主页固定结构迁移到动态组件结构
+// Migrate from the home page's fixed structure to a dynamic component structure
 export function migrateHomeLegacyToSections(
   legacy: LegacyHomeData
 ): PageContent {
   const sections: PageSection[] = [];
 
-  // 标题和副标题段落
+  // Title and subtitle section
   if (legacy.title || legacy.subtitle) {
     const titleComponents: ComponentInstance[] = [];
 
@@ -418,7 +420,7 @@ export function migrateHomeLegacyToSections(
     }
   }
 
-  // 特性卡片段落
+  // Features cards section
   if (legacy.features && legacy.features.length > 0) {
     const cardsComponent = createDefaultComponent('cards');
     cardsComponent.props = {
@@ -433,14 +435,14 @@ export function migrateHomeLegacyToSections(
     });
   }
 
-  // 双按钮段落
+  // Double button section
   if (legacy.getStarted || legacy.learnMore) {
     const buttonComponent = createDefaultComponent(
       'button',
       legacy.getStarted || 'Get Started'
     );
 
-    // 如果有两个按钮，使用双按钮功能
+    // If there are two buttons, use the double button feature
     if (legacy.getStarted && legacy.learnMore) {
       buttonComponent.props = {
         text: legacy.getStarted,
@@ -455,7 +457,7 @@ export function migrateHomeLegacyToSections(
         },
       };
     } else {
-      // 单按钮
+      // Single button
       buttonComponent.props = {
         text: legacy.getStarted || legacy.learnMore,
         variant: 'solid',
@@ -471,7 +473,7 @@ export function migrateHomeLegacyToSections(
     });
   }
 
-  // 版权段落
+  // Copyright section
   if (legacy.copyright) {
     const copyrightText = [
       legacy.copyright.prefix?.replace(
@@ -507,16 +509,16 @@ export function migrateHomeLegacyToSections(
   };
 }
 
-// 迁移完整的主页翻译数据
+// Migrate complete home page translation data
 export function migrateHomeTranslationData(
   legacy: HomeTranslationData
 ): HomeTranslationData {
-  // 如果已经是动态格式，直接返回
+  // If it's already in the dynamic format, return directly
   if (legacy.sections && legacy.sections.length > 0) {
     return legacy;
   }
 
-  // 迁移固定结构到动态结构
+  // Migrate the fixed structure to the dynamic structure
   const pageContent = migrateHomeLegacyToSections(legacy);
 
   return {
@@ -529,7 +531,7 @@ export function migrateHomeTranslationData(
   };
 }
 
-// 批量迁移主页多语言数据
+// Batch migrate multi-language home page data
 export function batchMigrateHomeTranslations(
   translations: Record<string, HomeTranslationData>
 ): Record<string, HomeTranslationData> {
@@ -542,56 +544,60 @@ export function batchMigrateHomeTranslations(
   return migratedTranslations;
 }
 
-// 验证主页迁移后的数据完整性
+// Validate the integrity of the migrated home page data
 export function validateHomeMigratedData(data: HomeTranslationData): {
   isValid: boolean;
   errors: string[];
 } {
   const errors: string[] = [];
 
-  // 检查是否有sections
+  // Check if sections exist
   if (!data.sections || data.sections.length === 0) {
-    errors.push('迁移后的主页数据缺少sections');
+    errors.push('Migrated home page data is missing sections');
   }
 
-  // 检查每个section的完整性
+  // Check the integrity of each section
   data.sections?.forEach((section: PageSection, index: number) => {
     if (!section.id) {
-      errors.push(`主页 Section ${index} 缺少ID`);
+      errors.push(`Home page Section ${index} is missing an ID`);
     }
 
     if (!section.layout) {
-      errors.push(`主页 Section ${index} 缺少布局配置`);
+      errors.push(
+        `Home page Section ${index} is missing a layout configuration`
+      );
     }
 
     if (!section.columns || !Array.isArray(section.columns)) {
-      errors.push(`主页 Section ${index} 缺少或无效的columns`);
+      errors.push(`Home page Section ${index} has missing or invalid columns`);
     }
 
-    // 检查组件完整性
+    // Check component integrity
     section.columns?.forEach(
       (column: ComponentInstance[], columnIndex: number) => {
         if (!Array.isArray(column)) {
-          errors.push(`主页 Section ${index}, Column ${columnIndex} 不是数组`);
+          errors.push(
+            `Home page Section ${index}, Column ${columnIndex} is not an array`
+          );
           return;
         }
 
         column.forEach((component, componentIndex) => {
           if (!component.id) {
             errors.push(
-              `主页 Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少ID`
+              `Home page Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing an ID`
             );
           }
 
           if (!component.type) {
             errors.push(
-              `主页 Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少类型`
+              `Home page Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing a type`
             );
           }
 
           if (!component.props) {
             errors.push(
-              `主页 Section ${index}, Column ${columnIndex}, Component ${componentIndex} 缺少props`
+              `Home page Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing props`
             );
           }
         });
@@ -605,27 +611,27 @@ export function validateHomeMigratedData(data: HomeTranslationData): {
   };
 }
 
-// 创建备份数据
+// Create backup data
 export function createBackupData(data: AboutTranslationData): {
   data: AboutTranslationData;
   timestamp: string;
   version: string;
 } {
   return {
-    data: JSON.parse(JSON.stringify(data)), // 深拷贝
+    data: JSON.parse(JSON.stringify(data)), // Deep copy
     timestamp: new Date().toISOString(),
     version: '1.0.0',
   };
 }
 
-// 创建主页备份数据
+// Create home page backup data
 export function createHomeBackupData(data: HomeTranslationData): {
   data: HomeTranslationData;
   timestamp: string;
   version: string;
 } {
   return {
-    data: JSON.parse(JSON.stringify(data)), // 深拷贝
+    data: JSON.parse(JSON.stringify(data)), // Deep copy
     timestamp: new Date().toISOString(),
     version: '1.0.0',
   };
diff --git a/scripts/migrate-home-data.ts b/scripts/migrate-home-data.ts
deleted file mode 100644
index d61acd01..00000000
--- a/scripts/migrate-home-data.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import {
-  isHomeDynamicFormat,
-  migrateHomeTranslationData,
-} from '../lib/utils/data-migration';
-
-/**
- * 批量迁移脚本 - 将所有语言文件中的主页数据从静态格式转换为动态sections格式
- */
-
-const MESSAGES_DIR = path.join(__dirname, '../messages');
-const supportedLocales = [
-  'en-US',
-  'zh-CN',
-  'zh-TW',
-  'ja-JP',
-  'de-DE',
-  'fr-FR',
-  'ru-RU',
-  'it-IT',
-  'pt-PT',
-  'es-ES',
-];
-
-interface MessageFile {
-  pages: {
-    home: unknown;
-    [key: string]: unknown;
-  };
-  [key: string]: unknown;
-}
-
-async function migrateAllHomeData() {
-  console.log('🚀 开始迁移主页数据...');
-
-  for (const locale of supportedLocales) {
-    const filePath = path.join(MESSAGES_DIR, `${locale}.json`);
-
-    if (!fs.existsSync(filePath)) {
-      console.warn(`⚠️  文件不存在: ${filePath}`);
-      continue;
-    }
-
-    try {
-      console.log(`📝 处理语言文件: ${locale}.json`);
-
-      // 读取文件
-      const fileContent = fs.readFileSync(filePath, 'utf-8');
-      const data: MessageFile = JSON.parse(fileContent);
-
-      // 检查是否有主页数据
-      if (!data.pages?.home) {
-        console.warn(`⚠️  ${locale}.json 中没有找到主页数据`);
-        continue;
-      }
-
-      // 检查是否已经是动态格式
-      if (isHomeDynamicFormat(data.pages.home)) {
-        console.log(`✅ ${locale}.json 主页数据已经是动态格式，跳过`);
-        continue;
-      }
-
-      console.log(`🔄 转换 ${locale}.json 中的主页数据...`);
-
-      // 转换主页数据
-      const migratedHomeData = migrateHomeTranslationData(data.pages.home);
-
-      // 更新数据
-      data.pages.home = migratedHomeData;
-
-      // 备份原文件
-      const backupPath = `${filePath}.backup-${Date.now()}`;
-      fs.copyFileSync(filePath, backupPath);
-      console.log(`💾 已备份原文件到: ${path.basename(backupPath)}`);
-
-      // 保存新文件
-      fs.writeFileSync(filePath, JSON.stringify(data, null, 2), 'utf-8');
-      console.log(`✅ 已更新 ${locale}.json`);
-    } catch (error) {
-      console.error(`❌ 处理 ${locale}.json 时出错:`, error);
-    }
-  }
-
-  console.log('🎉 主页数据迁移完成!');
-}
-
-// 如果直接运行此脚本
-if (require.main === module) {
-  migrateAllHomeData().catch(console.error);
-}
-
-export { migrateAllHomeData };

From 6156c8275a9aad1213afdcd01811fee58756a1e2 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Wed, 13 Aug 2025 09:43:45 +0800
Subject: [PATCH 38/66] fix(hooks): fix useDebouncedCallback dependency array
 to prevent stale closures

---
 lib/utils/performance.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/utils/performance.ts b/lib/utils/performance.ts
index f18d7940..4fa68552 100644
--- a/lib/utils/performance.ts
+++ b/lib/utils/performance.ts
@@ -67,7 +67,7 @@ export function useDebouncedCallback<T extends (...args: any[]) => any>(
   const debouncedCallback = React.useMemo(
     () => debounce(callback, delay),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    deps
+    [callback, delay, ...deps]
   );
 
   // Cleanup on unmount

From af7e13334fdafd17c231982d61f38fc74c26c074 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Wed, 13 Aug 2025 13:17:33 +0800
Subject: [PATCH 39/66] perf: optimize deep copy performance in
 about-editor-store

- Add deepClone and clonePageContent utilities to performance.ts
- Replace JSON.parse(JSON.stringify()) with optimized deep clone
- Use structuredClone for modern browsers with JSON fallback
- Improve editor performance for component operations
---
 lib/stores/about-editor-store.ts | 13 ++++---------
 lib/utils/performance.ts         | 27 +++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index f023de13..cd4ec67d 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -7,6 +7,7 @@ import {
   createDefaultSection,
   generateUniqueId,
 } from '@lib/types/about-page-components';
+import { clonePageContent } from '@lib/utils/performance';
 import { create } from 'zustand';
 
 /**
@@ -102,9 +103,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     if (!pageContent) return;
 
     // Create deep copy of page content
-    const newPageContent = JSON.parse(
-      JSON.stringify(pageContent)
-    ) as PageContent;
+    const newPageContent = clonePageContent(pageContent);
 
     // Find and update the component
     let updated = false;
@@ -143,9 +142,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     const state = get();
     if (!state.pageContent) return;
 
-    const newPageContent = JSON.parse(
-      JSON.stringify(state.pageContent)
-    ) as PageContent;
+    const newPageContent = clonePageContent(state.pageContent);
 
     const section = newPageContent.sections.find(s => s.id === sectionId);
     if (section && section.columns[columnIndex]) {
@@ -166,9 +163,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     const state = get();
     if (!state.pageContent) return;
 
-    const newPageContent = JSON.parse(
-      JSON.stringify(state.pageContent)
-    ) as PageContent;
+    const newPageContent = clonePageContent(state.pageContent);
     let deleted = false;
 
     // Find and remove the component
diff --git a/lib/utils/performance.ts b/lib/utils/performance.ts
index 4fa68552..5ca3e680 100644
--- a/lib/utils/performance.ts
+++ b/lib/utils/performance.ts
@@ -5,6 +5,7 @@
  * for better performance in dynamic component editing.
  */
 import React from 'react';
+import { PageContent } from '@lib/types/about-page-components';
 
 /**
  * Debounce function - delays execution until after delay period of inactivity
@@ -272,3 +273,29 @@ function deepEqual(a: any, b: any): boolean {
 
   return true;
 }
+
+/**
+ * Optimized deep clone using structuredClone with fallback
+ */
+export function deepClone<T>(obj: T): T {
+  if (typeof structuredClone !== 'undefined') {
+    return structuredClone(obj);
+  }
+  
+  // Fallback for older browsers
+  return JSON.parse(JSON.stringify(obj));
+}
+
+/**
+ * Specialized clone function for PageContent with optimized structure copying
+ */
+export function clonePageContent(pageContent: PageContent): PageContent {
+  return {
+    ...pageContent,
+    sections: pageContent.sections.map(section => ({
+      ...section,
+      columns: section.columns.map(column => [...column.map(comp => ({ ...comp, props: { ...comp.props } }))])
+    })),
+    metadata: pageContent.metadata ? { ...pageContent.metadata } : undefined
+  };
+}

From 490ad781f6e43f67d73651b9e1d09d748b28059b Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Wed, 13 Aug 2025 14:20:43 +0800
Subject: [PATCH 40/66] feat: improve TypeScript type safety in
 SectionCommonProps interface

- Replace index signature [key: string]: unknown with customProps?: Record<string, unknown>
- Refactor mergeComponentProps function to handle new property structure
- Maintain backward compatibility while improving type safety
- Fix TypeScript compilation errors related to dynamic property access
---
 lib/types/about-page-components.ts | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
index 2091c1e9..90e40b3d 100644
--- a/lib/types/about-page-components.ts
+++ b/lib/types/about-page-components.ts
@@ -52,7 +52,7 @@ export interface SectionCommonProps {
   // Border style
   borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
   // Custom property extension
-  [key: string]: unknown;
+  customProps?: Record<string, unknown>;
 }
 
 // Page section interface
@@ -276,13 +276,21 @@ export function mergeComponentProps(
   componentProps: Record<string, unknown> = {},
   overrideProps: string[] = []
 ): Record<string, unknown> {
-  // Create a copy of section properties
-  const inherited = { ...sectionCommonProps };
+  // Extract known properties and customProps from sectionCommonProps
+  const { customProps, ...knownSectionProps } = sectionCommonProps;
 
-  // Remove the overridden properties
-  overrideProps.forEach(key => {
-    delete inherited[key];
-  });
+  // Create a copy of all section properties (known + custom)
+  const allSectionProps = {
+    ...knownSectionProps,
+    ...(customProps || {}),
+  };
+
+  // Create inherited properties by removing overridden ones
+  const inherited = Object.fromEntries(
+    Object.entries(allSectionProps).filter(
+      ([key]) => !overrideProps.includes(key)
+    )
+  );
 
   // Component-specific properties have higher priority
   return {

From 4da99c82b5d22a5da34ef979e099de5e69134745 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Wed, 13 Aug 2025 14:29:49 +0800
Subject: [PATCH 41/66] chore(cleanup): remove unused backup files and improve
 TypeScript types

---
 .../2025-08-08T12-23-05-484Z/de-DE.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/en-US.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/es-ES.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/fr-FR.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/it-IT.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/ja-JP.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/pt-PT.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/ru-RU.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/zh-CN.json       | 42 -------------------
 .../2025-08-08T12-23-05-484Z/zh-TW.json       | 42 -------------------
 10 files changed, 420 deletions(-)
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
 delete mode 100644 backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json

diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
deleted file mode 100644
index 4d100ed8..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/de-DE.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "de-DE.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.497Z",
-  "data": {
-    "title": "Über AgentifUI",
-    "subtitle": "KI mit Unternehmen verbinden, neue Erfahrungen mit großen Sprachmodellen schaffen",
-    "loading": "Laden...",
-    "mission": {
-      "title": "Unsere Mission",
-      "description": "AgentifUI ist bestrebt, die Kraft großer Sprachmodelle zu nutzen, um innovative Anwendungslösungen für Unternehmen bereitzustellen. Wir integrieren Fähigkeiten von mehreren Modellanbietern und bieten stabile, zuverlässige Dienste basierend auf Dify-Backend, um Organisationen dabei zu helfen, den Wert der KI-Technologie voll auszuschöpfen."
-    },
-    "values": {
-      "title": "Unsere Werte",
-      "items": [
-        {
-          "title": "Technische Innovation",
-          "description": "Kontinuierliche Integration von Spitzentechnologien großer Modelle, um führende KI-Lösungen für Unternehmen bereitzustellen"
-        },
-        {
-          "title": "Datensicherheit",
-          "description": "Unterstützung für private Bereitstellung und strenge Datenschutzmaßnahmen, um die Sicherheit und Privatsphäre von Unternehmensdaten zu gewährleisten"
-        },
-        {
-          "title": "Flexible Anpassung",
-          "description": "Bereitstellung hochgradig anpassbarer Lösungen, um spezifische Anforderungen verschiedener Branchen und Szenarien zu erfüllen"
-        },
-        {
-          "title": "Wissenserweiterung",
-          "description": "Integration privater Wissensdatenbanken durch RAG-Technologie, um die kontextuelle Wahrnehmungsfähigkeiten des Modells zu verbessern"
-        }
-      ]
-    },
-    "buttonText": "Entdeckung beginnen",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". Die Zukunft großer Modellanwendungen erkunden."
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.497Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
deleted file mode 100644
index 3e5f5192..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/en-US.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "en-US.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.489Z",
-  "data": {
-    "title": "About AgentifUI",
-    "subtitle": "Connecting AI with enterprises, creating new experiences with large language models",
-    "loading": "Loading...",
-    "mission": {
-      "title": "Our Mission",
-      "description": "AgentifUI is committed to leveraging the power of large language models to provide innovative application solutions for enterprises. We integrate capabilities from multiple model providers and provide stable, reliable services based on Dify backend, helping organizations fully utilize the value of AI technology."
-    },
-    "values": {
-      "title": "Our Values",
-      "items": [
-        {
-          "title": "Technical Innovation",
-          "description": "Continuously integrate cutting-edge large model technologies to provide leading AI solutions for enterprises"
-        },
-        {
-          "title": "Data Security",
-          "description": "Support private deployment and strict data protection measures to ensure the security and privacy of enterprise data"
-        },
-        {
-          "title": "Flexible Customization",
-          "description": "Provide highly customizable solutions to meet specific needs of different industries and scenarios"
-        },
-        {
-          "title": "Knowledge Enhancement",
-          "description": "Integrate private knowledge bases through RAG technology to enhance model's contextual awareness capabilities"
-        }
-      ]
-    },
-    "buttonText": "Start Exploring",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". Explore the future of large model applications."
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.489Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
deleted file mode 100644
index d299da6f..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/es-ES.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "es-ES.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.507Z",
-  "data": {
-    "title": "Acerca de AgentifUI",
-    "subtitle": "Conectando IA con empresas, creando nuevas experiencias con modelos de lenguaje grandes",
-    "loading": "Cargando...",
-    "mission": {
-      "title": "Nuestra Misión",
-      "description": "AgentifUI se compromete a aprovechar el poder de los modelos de lenguaje grandes para proporcionar soluciones de aplicación innovadoras para empresas. Integramos capacidades de múltiples proveedores de modelos y proporcionamos servicios estables y confiables basados en backend Dify, ayudando a las organizaciones a utilizar completamente el valor de la tecnología IA."
-    },
-    "values": {
-      "title": "Nuestros Valores",
-      "items": [
-        {
-          "title": "Innovación Técnica",
-          "description": "Integrar continuamente tecnologías de modelos grandes de vanguardia para proporcionar soluciones IA líderes para empresas"
-        },
-        {
-          "title": "Seguridad de Datos",
-          "description": "Soporte para despliegue privado y medidas estrictas de protección de datos para garantizar la seguridad y privacidad de los datos empresariales"
-        },
-        {
-          "title": "Personalización Flexible",
-          "description": "Proporcionar soluciones altamente personalizables para satisfacer necesidades específicas de diferentes industrias y escenarios"
-        },
-        {
-          "title": "Mejora de Conocimiento",
-          "description": "Integrar bases de conocimiento privadas a través de tecnología RAG para mejorar las capacidades de conciencia contextual del modelo"
-        }
-      ]
-    },
-    "buttonText": "Comenzar a Explorar",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". Explora el futuro de las aplicaciones de modelos grandes."
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.507Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
deleted file mode 100644
index fbdc43b9..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/fr-FR.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "fr-FR.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.498Z",
-  "data": {
-    "title": "À propos d'AgentifUI",
-    "subtitle": "Connecter l'IA aux entreprises, créer de nouvelles expériences avec les grands modèles de langage",
-    "loading": "Chargement...",
-    "mission": {
-      "title": "Notre mission",
-      "description": "AgentifUI s'engage à exploiter la puissance des grands modèles de langage pour fournir des solutions applicatives innovantes aux entreprises. Nous intégrons les capacités de plusieurs fournisseurs de modèles et fournissons des services stables et fiables basés sur le backend Dify, aidant les organisations à utiliser pleinement la valeur de la technologie IA."
-    },
-    "values": {
-      "title": "Nos valeurs",
-      "items": [
-        {
-          "title": "Innovation technique",
-          "description": "Intégrer en continu les technologies de pointe des grands modèles pour fournir des solutions IA de premier plan aux entreprises"
-        },
-        {
-          "title": "Sécurité des données",
-          "description": "Soutenir le déploiement privé et des mesures strictes de protection des données pour garantir la sécurité et la confidentialité des données de l'entreprise"
-        },
-        {
-          "title": "Personnalisation flexible",
-          "description": "Fournir des solutions hautement personnalisables pour répondre aux besoins spécifiques des différentes industries et scénarios"
-        },
-        {
-          "title": "Amélioration des connaissances",
-          "description": "Intégrer des bases de connaissances privées via la technologie RAG pour améliorer les capacités de conscience contextuelle du modèle"
-        }
-      ]
-    },
-    "buttonText": "Commencer à explorer",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". Explorez l'avenir des applications de grands modèles."
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.498Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
deleted file mode 100644
index 3b1cba6c..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/it-IT.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "it-IT.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.502Z",
-  "data": {
-    "title": "Informazioni su AgentifUI",
-    "subtitle": "Connettere l'IA con le imprese, creando nuove esperienze con grandi modelli linguistici",
-    "loading": "Caricamento...",
-    "mission": {
-      "title": "La Nostra Missione",
-      "description": "AgentifUI si impegna a sfruttare la potenza dei grandi modelli linguistici per fornire soluzioni applicative innovative per le imprese. Integriamo le capacità di più fornitori di modelli e forniamo servizi stabili e affidabili basati sul backend di Dify, aiutando le organizzazioni a utilizzare appieno il valore della tecnologia IA."
-    },
-    "values": {
-      "title": "I Nostri Valori",
-      "items": [
-        {
-          "title": "Innovazione Tecnica",
-          "description": "Integrare continuamente tecnologie all'avanguardia di grandi modelli per fornire soluzioni IA leader per le imprese"
-        },
-        {
-          "title": "Sicurezza dei Dati",
-          "description": "Supportare la distribuzione privata e rigorose misure di protezione dei dati per garantire la sicurezza e la privacy dei dati aziendali"
-        },
-        {
-          "title": "Personalizzazione Flessibile",
-          "description": "Fornire soluzioni altamente personalizzabili per soddisfare le esigenze specifiche di diversi settori e scenari"
-        },
-        {
-          "title": "Miglioramento della Conoscenza",
-          "description": "Integrare basi di conoscenza private tramite la tecnologia RAG per migliorare le capacità di consapevolezza contestuale del modello"
-        }
-      ]
-    },
-    "buttonText": "Inizia a Esplorare",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". Esplora il futuro delle applicazioni di grandi modelli."
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.502Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
deleted file mode 100644
index d69bed6a..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ja-JP.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "ja-JP.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.495Z",
-  "data": {
-    "title": "AgentifUIについて",
-    "subtitle": "AIと企業を繋ぎ、大規模言語モデルで新しい体験を創造",
-    "loading": "読み込み中...",
-    "mission": {
-      "title": "私たちの使命",
-      "description": "AgentifUIは大規模言語モデルの力を活用し、企業に革新的なアプリケーションソリューションを提供することに取り組んでいます。複数のモデルプロバイダーの能力を統合し、Difyバックエンドに基づく安定した信頼性の高いサービスを提供し、組織がAI技術の価値を最大限に活用できるよう支援します。"
-    },
-    "values": {
-      "title": "私たちの価値観",
-      "items": [
-        {
-          "title": "技術革新",
-          "description": "最先端の大規模モデル技術を継続的に統合し、企業に最先端のAIソリューションを提供"
-        },
-        {
-          "title": "データセキュリティ",
-          "description": "プライベート展開と厳格なデータ保護措置をサポートし、企業データのセキュリティとプライバシーを保証"
-        },
-        {
-          "title": "柔軟なカスタマイズ",
-          "description": "高度にカスタマイズ可能なソリューションを提供し、異なる業界とシナリオの特定のニーズに対応"
-        },
-        {
-          "title": "知識強化",
-          "description": "RAG技術を通じてプライベート知識ベースを統合し、モデルのコンテキスト認識能力を強化"
-        }
-      ]
-    },
-    "buttonText": "探索を始める",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": "。大規模モデルアプリケーションの未来を探求。"
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.495Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
deleted file mode 100644
index 6717a12a..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/pt-PT.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "pt-PT.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.503Z",
-  "data": {
-    "title": "Sobre o AgentifUI",
-    "subtitle": "A conectar a IA com empresas, criando novas experiências com modelos de linguagem grandes",
-    "loading": "A carregar...",
-    "mission": {
-      "title": "A Nossa Missão",
-      "description": "O AgentifUI está empenhado em alavancar o poder dos modelos de linguagem grandes para fornecer soluções de aplicação inovadoras para empresas. Integramos capacidades de múltiplos fornecedores de modelos e fornecemos serviços estáveis e fiáveis baseados no backend Dify, ajudando as organizações a utilizar plenamente o valor da tecnologia de IA."
-    },
-    "values": {
-      "title": "Os Nossos Valores",
-      "items": [
-        {
-          "title": "Inovação Tecnológica",
-          "description": "Integrar continuamente tecnologias de ponta de modelos grandes para fornecer soluções de IA líderes para empresas"
-        },
-        {
-          "title": "Segurança de Dados",
-          "description": "Suportar implementação privada e medidas rigorosas de proteção de dados para garantir a segurança e privacidade dos dados empresariais"
-        },
-        {
-          "title": "Personalização Flexível",
-          "description": "Fornecer soluções altamente personalizáveis para satisfazer as necessidades específicas de diferentes indústrias e cenários"
-        },
-        {
-          "title": "Melhoria de Conhecimento",
-          "description": "Integrar bases de conhecimento privadas através da tecnologia RAG para melhorar as capacidades de consciência contextual do modelo"
-        }
-      ]
-    },
-    "buttonText": "Começar a Explorar",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". Explore o futuro das aplicações de modelos grandes."
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.503Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
deleted file mode 100644
index 20b6f51a..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/ru-RU.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "ru-RU.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.500Z",
-  "data": {
-    "title": "О AgentifUI",
-    "subtitle": "Соединяем ИИ с предприятиями, создаем новые впечатления с помощью больших языковых моделей",
-    "loading": "Загрузка...",
-    "mission": {
-      "title": "Наша миссия",
-      "description": "AgentifUI стремится использовать мощь больших языковых моделей для предоставления инновационных прикладных решений для предприятий. Мы интегрируем возможности нескольких поставщиков моделей и предоставляем стабильные, надежные услуги на базе бэкенда Dify, помогая организациям в полной мере использовать ценность технологий ИИ."
-    },
-    "values": {
-      "title": "Наши ценности",
-      "items": [
-        {
-          "title": "Технологические инновации",
-          "description": "Постоянно интегрируем передовые технологии больших моделей, чтобы предоставлять ведущие ИИ-решения для предприятий"
-        },
-        {
-          "title": "Безопасность данных",
-          "description": "Поддерживаем частное развертывание и строгие меры защиты данных для обеспечения безопасности и конфиденциальности данных предприятия"
-        },
-        {
-          "title": "Гибкая настройка",
-          "description": "Предоставляем высоко настраиваемые решения для удовлетворения конкретных потребностей различных отраслей и сценариев"
-        },
-        {
-          "title": "Улучшение знаний",
-          "description": "Интегрируем частные базы знаний с помощью технологии RAG для улучшения контекстной осведомленности модели"
-        }
-      ]
-    },
-    "buttonText": "Начать исследование",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". Исследуйте будущее приложений больших моделей."
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.500Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
deleted file mode 100644
index 87f19b49..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-CN.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "zh-CN.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.491Z",
-  "data": {
-    "title": "关于 AgentifUI",
-    "subtitle": "连接 AI 与企业，打造大模型应用新体验",
-    "loading": "加载中...",
-    "mission": {
-      "title": "我们的使命",
-      "description": "AgentifUI 致力于利用大型语言模型的力量，为企业提供创新的应用解决方案。我们整合了多种模型供应商的能力，并基于 Dify 后端提供稳定、可靠的服务，帮助团队充分利用 AI 技术的价值。"
-    },
-    "values": {
-      "title": "我们的价值观",
-      "items": [
-        {
-          "title": "技术创新",
-          "description": "持续集成前沿的大模型技术，为企业提供领先的 AI 解决方案"
-        },
-        {
-          "title": "数据安全",
-          "description": "支持私有化部署和严格的数据保护措施，确保企业数据的安全与隐私"
-        },
-        {
-          "title": "灵活定制",
-          "description": "提供高度可定制的解决方案，满足不同行业和场景的特定需求"
-        },
-        {
-          "title": "知识增强",
-          "description": "通过 RAG 技术实现私有知识库的整合，增强模型的上下文感知能力"
-        }
-      ]
-    },
-    "buttonText": "开始探索",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". 探索大模型应用的未来。"
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.491Z",
-  "version": "1.0.0"
-}
diff --git a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json b/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json
deleted file mode 100644
index 4ab0aad5..00000000
--- a/backups/about-page-migration/2025-08-08T12-23-05-484Z/zh-TW.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "originalFile": "zh-TW.json",
-  "migrationTimestamp": "2025-08-08T12:23:05.493Z",
-  "data": {
-    "title": "關於 AgentifUI",
-    "subtitle": "連接 AI 與企業，打造大模型應用新體驗",
-    "loading": "載入中...",
-    "mission": {
-      "title": "我們的使命",
-      "description": "AgentifUI 致力於利用大型語言模型的力量，為企業提供創新的應用解決方案。我們整合了多種模型供應商的能力，並基於 Dify 後端提供穩定、可靠的服務，幫助組織充分利用 AI 技術的價值。"
-    },
-    "values": {
-      "title": "我們的價值觀",
-      "items": [
-        {
-          "title": "技術創新",
-          "description": "持續整合前沿的大模型技術，為企業提供領先的 AI 解決方案"
-        },
-        {
-          "title": "資料安全",
-          "description": "支援私有化部署和嚴格的資料保護措施，確保企業資料的安全與隱私"
-        },
-        {
-          "title": "靈活客製",
-          "description": "提供高度可客製的解決方案，滿足不同行業和情境的特定需求"
-        },
-        {
-          "title": "知識增強",
-          "description": "透過 RAG 技術實現私有知識庫的整合，增強模型的上下文感知能力"
-        }
-      ]
-    },
-    "buttonText": "開始探索",
-    "copyright": {
-      "prefix": "© {year} ",
-      "linkText": "AgentifUI",
-      "suffix": ". 探索大模型應用的未來。"
-    }
-  },
-  "timestamp": "2025-08-08T12:23:05.493Z",
-  "version": "1.0.0"
-}

From eaeda2c349ea3b00136d020f1f2558103dd7bdf9 Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Wed, 13 Aug 2025 15:00:14 +0800
Subject: [PATCH 42/66] chore: update pkg

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d4b33d9a..069d305c 100644
--- a/package.json
+++ b/package.json
@@ -146,6 +146,5 @@
     "**/*.ts?(x)": [
       "eslint --fix"
     ]
-  },
-  "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad"
+  }
 }

From d4e849a171c0a594119d9526ba55f639f94453aa Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Wed, 13 Aug 2025 15:06:15 +0800
Subject: [PATCH 43/66] chore: update i18n messages

---
 messages/de-DE.json | 280 +++++++++++++++++++++++++++++++++++--------
 messages/en-US.json | 281 ++++++++++++++++++++++++++++++++++++--------
 messages/es-ES.json | 280 +++++++++++++++++++++++++++++++++++--------
 messages/fr-FR.json | 280 +++++++++++++++++++++++++++++++++++--------
 messages/it-IT.json | 280 +++++++++++++++++++++++++++++++++++--------
 messages/ja-JP.json | 281 ++++++++++++++++++++++++++++++++++++--------
 messages/pt-PT.json | 280 +++++++++++++++++++++++++++++++++++--------
 messages/ru-RU.json | 280 +++++++++++++++++++++++++++++++++++--------
 messages/zh-CN.json | 281 ++++++++++++++++++++++++++++++++++++--------
 messages/zh-TW.json | 281 ++++++++++++++++++++++++++++++++++++--------
 10 files changed, 2324 insertions(+), 480 deletions(-)

diff --git a/messages/de-DE.json b/messages/de-DE.json
index 2bef628e..bc13acfb 100644
--- a/messages/de-DE.json
+++ b/messages/de-DE.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Entdecken Sie die unendlichen Möglichkeiten der KI und schaffen Sie intelligente neue Erfahrungen",
-      "getStarted": "Loslegen",
-      "learnMore": "Mehr erfahren",
-      "features": [
+      "sections": [
         {
-          "title": "Integration großer Modelle",
-          "description": "Unterstützung für mehrere Modellanbieter wie OpenAI, Anthropic, Dify usw., um verschiedene Unternehmensanforderungen zu erfüllen"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Entdecken Sie die unendlichen Möglichkeiten der KI und schaffen Sie intelligente neue Erfahrungen",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Integration großer Modelle",
+                      "description": "Unterstützung für mehrere Modellanbieter wie OpenAI, Anthropic, Dify usw., um verschiedene Unternehmensanforderungen zu erfüllen"
+                    },
+                    {
+                      "title": "RAG-Wissenserweiterung",
+                      "description": "Integration der Retrieval-Augmented Generation (RAG) Technologie für private Wissensdatenbanken und Kontextbewusstsein"
+                    },
+                    {
+                      "title": "Unternehmensbereitstellung",
+                      "description": "Unterstützung für private Bereitstellung, Gewährleistung der Datensicherheit, Bereitstellung stabiler und zuverlässiger Dienste basierend auf Dify-Backend"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG-Wissenserweiterung",
-          "description": "Integration der Retrieval-Augmented Generation (RAG) Technologie für private Wissensdatenbanken und Kontextbewusstsein"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Loslegen",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Mehr erfahren",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Unternehmensbereitstellung",
-          "description": "Unterstützung für private Bereitstellung, Gewährleistung der Datensicherheit, Bereitstellung stabiler und zuverlässiger Dienste basierend auf Dify-Backend"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Entdecken Sie die unendlichen Möglichkeiten der KI.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Entdecken Sie die unendlichen Möglichkeiten der KI."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "de-DE"
       }
     },
     "chat": {
@@ -1926,39 +2007,142 @@
       }
     },
     "about": {
-      "title": "Über AgentifUI",
-      "subtitle": "KI mit Unternehmen verbinden, neue Erfahrungen mit großen Sprachmodellen schaffen",
-      "loading": "Laden...",
-      "mission": {
-        "title": "Unsere Mission",
-        "description": "AgentifUI ist bestrebt, die Kraft großer Sprachmodelle zu nutzen, um innovative Anwendungslösungen für Unternehmen bereitzustellen. Wir integrieren Fähigkeiten von mehreren Modellanbietern und bieten stabile, zuverlässige Dienste basierend auf Dify-Backend, um Organisationen dabei zu helfen, den Wert der KI-Technologie voll auszuschöpfen."
-      },
-      "values": {
-        "title": "Unsere Werte",
-        "items": [
-          {
-            "title": "Technische Innovation",
-            "description": "Kontinuierliche Integration von Spitzentechnologien großer Modelle, um führende KI-Lösungen für Unternehmen bereitzustellen"
-          },
-          {
-            "title": "Datensicherheit",
-            "description": "Unterstützung für private Bereitstellung und strenge Datenschutzmaßnahmen, um die Sicherheit und Privatsphäre von Unternehmensdaten zu gewährleisten"
-          },
-          {
-            "title": "Flexible Anpassung",
-            "description": "Bereitstellung hochgradig anpassbarer Lösungen, um spezifische Anforderungen verschiedener Branchen und Szenarien zu erfüllen"
-          },
-          {
-            "title": "Wissenserweiterung",
-            "description": "Integration privater Wissensdatenbanken durch RAG-Technologie, um die kontextuelle Wahrnehmungsfähigkeiten des Modells zu verbessern"
-          }
-        ]
-      },
-      "buttonText": "Entdeckung beginnen",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Die Zukunft großer Modellanwendungen erkunden."
+      "sections": [
+        {
+          "id": "section-1754655785523-melks92kj",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-1mt7ry2h1",
+                "type": "heading",
+                "props": {
+                  "content": "Über AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785523-bsuhbox61",
+                "type": "paragraph",
+                "props": {
+                  "content": "KI mit Unternehmen verbinden, neue Erfahrungen mit großen Sprachmodellen schaffen",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785523-ryaz5ht6j",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-6gq22iobt",
+                "type": "heading",
+                "props": {
+                  "content": "Unsere Mission",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785523-c0x35q9wh",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI ist bestrebt, die Kraft großer Sprachmodelle zu nutzen, um innovative Anwendungslösungen für Unternehmen bereitzustellen. Wir integrieren Fähigkeiten von mehreren Modellanbietern und bieten stabile, zuverlässige Dienste basierend auf Dify-Backend, um Organisationen dabei zu helfen, den Wert der KI-Technologie voll auszuschöpfen.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785523-8ohef4opd",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-kvs53j5t5",
+                "type": "heading",
+                "props": {
+                  "content": "Unsere Werte",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785523-w07dgvlu8",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Technische Innovation",
+                      "description": "Kontinuierliche Integration von Spitzentechnologien großer Modelle, um führende KI-Lösungen für Unternehmen bereitzustellen"
+                    },
+                    {
+                      "title": "Datensicherheit",
+                      "description": "Unterstützung für private Bereitstellung und strenge Datenschutzmaßnahmen, um die Sicherheit und Privatsphäre von Unternehmensdaten zu gewährleisten"
+                    },
+                    {
+                      "title": "Flexible Anpassung",
+                      "description": "Bereitstellung hochgradig anpassbarer Lösungen, um spezifische Anforderungen verschiedener Branchen und Szenarien zu erfüllen"
+                    },
+                    {
+                      "title": "Wissenserweiterung",
+                      "description": "Integration privater Wissensdatenbanken durch RAG-Technologie, um die kontextuelle Wahrnehmungsfähigkeiten des Modells zu verbessern"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785523-cpif88jjm",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-vzki74h7g",
+                "type": "button",
+                "props": {
+                  "text": "Entdeckung beginnen",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785523-gdsjspvrz",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785523-yqfx2g011",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Die Zukunft großer Modellanwendungen erkunden.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.523Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.523Z",
+        "locale": "de-DE"
       }
     }
   },
diff --git a/messages/en-US.json b/messages/en-US.json
index 17d566c0..64e07543 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -45,28 +45,110 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explore the infinite possibilities of AI and create intelligent new experiences",
-      "getStarted": "Get Started",
-      "learnMore": "Learn More",
-      "features": [
+      "sections": [
         {
-          "title": "Large Model Integration",
-          "description": "Support for multiple model providers including OpenAI, Anthropic, Dify, etc., meeting different enterprise needs"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Explore the infinite possibilities of AI and create intelligent new experiences",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Large Model Integration",
+                      "description": "Support for multiple model providers including OpenAI, Anthropic, Dify, etc., meeting different enterprise needs"
+                    },
+                    {
+                      "title": "RAG Knowledge Enhancement",
+                      "description": "Integrate Retrieval-Augmented Generation (RAG) technology to enable private knowledge bases and context awareness"
+                    },
+                    {
+                      "title": "Enterprise Deployment",
+                      "description": "Support for private deployment, ensuring data security, providing stable and reliable services based on Dify backend"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG Knowledge Enhancement",
-          "description": "Integrate Retrieval-Augmented Generation (RAG) technology to enable private knowledge bases and context awareness"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Get Started",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Learn More",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Enterprise Deployment",
-          "description": "Support for private deployment, ensuring data security, providing stable and reliable services based on Dify backend"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explore the infinite possibilities of AI.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore the infinite possibilities of AI."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "en-US"
       }
     },
     "chat": {
@@ -1926,39 +2008,142 @@
       }
     },
     "about": {
-      "title": "About AgentifUI",
-      "subtitle": "Connecting AI with enterprises, creating new experiences with large language models",
-      "loading": "Loading...",
-      "mission": {
-        "title": "Our Mission",
-        "description": "AgentifUI is committed to leveraging the power of large language models to provide innovative application solutions for enterprises. We integrate capabilities from multiple model providers and provide stable, reliable services based on Dify backend, helping organizations fully utilize the value of AI technology."
-      },
-      "values": {
-        "title": "Our Values",
-        "items": [
-          {
-            "title": "Technical Innovation",
-            "description": "Continuously integrate cutting-edge large model technologies to provide leading AI solutions for enterprises"
-          },
-          {
-            "title": "Data Security",
-            "description": "Support private deployment and strict data protection measures to ensure the security and privacy of enterprise data"
-          },
-          {
-            "title": "Flexible Customization",
-            "description": "Provide highly customizable solutions to meet specific needs of different industries and scenarios"
-          },
-          {
-            "title": "Knowledge Enhancement",
-            "description": "Integrate private knowledge bases through RAG technology to enhance model's contextual awareness capabilities"
-          }
-        ]
-      },
-      "buttonText": "Start Exploring",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore the future of large model applications."
+      "sections": [
+        {
+          "id": "section-1754655785510-hi9o34kms",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-9wmd3qfbr",
+                "type": "heading",
+                "props": {
+                  "content": "About AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785510-8kgg6bug1",
+                "type": "paragraph",
+                "props": {
+                  "content": "Connecting AI with enterprises, creating new experiences with large language models",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-4gy9xxu1j",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-wmcqou18g",
+                "type": "heading",
+                "props": {
+                  "content": "Our Mission",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785510-422a30k5a",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI is committed to leveraging the power of large language models to provide innovative application solutions for enterprises. We integrate capabilities from multiple model providers and provide stable, reliable services based on Dify backend, helping organizations fully utilize the value of AI technology.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-ftxgzp8bp",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-trc6k02bt",
+                "type": "heading",
+                "props": {
+                  "content": "Our Values",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785510-rat1vf5ow",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Technical Innovation",
+                      "description": "Continuously integrate cutting-edge large model technologies to provide leading AI solutions for enterprises"
+                    },
+                    {
+                      "title": "Data Security",
+                      "description": "Support private deployment and strict data protection measures to ensure the security and privacy of enterprise data"
+                    },
+                    {
+                      "title": "Flexible Customization",
+                      "description": "Provide highly customizable solutions to meet specific needs of different industries and scenarios"
+                    },
+                    {
+                      "title": "Knowledge Enhancement",
+                      "description": "Integrate private knowledge bases through RAG technology to enhance model's contextual awareness capabilities"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-ul1fhhk7e",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-ac4fm11q8",
+                "type": "button",
+                "props": {
+                  "text": "Start Exploring",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785510-7dkmyp6wa",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785510-8fd66745a",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explore the future of large model applications.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.510Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.510Z",
+        "locale": "en-US"
       }
     }
   },
diff --git a/messages/es-ES.json b/messages/es-ES.json
index 8fbfbbc2..1560eb7d 100644
--- a/messages/es-ES.json
+++ b/messages/es-ES.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explora las posibilidades infinitas de la IA y crea nuevas experiencias inteligentes",
-      "getStarted": "Comenzar",
-      "learnMore": "Saber más",
-      "features": [
+      "sections": [
         {
-          "title": "Integración de Modelos Grandes",
-          "description": "Soporte para múltiples proveedores de modelos incluyendo OpenAI, Anthropic, Dify, etc., satisfaciendo diferentes necesidades empresariales"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Explora las posibilidades infinitas de la IA y crea nuevas experiencias inteligentes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Integración de Modelos Grandes",
+                      "description": "Soporte para múltiples proveedores de modelos incluyendo OpenAI, Anthropic, Dify, etc., satisfaciendo diferentes necesidades empresariales"
+                    },
+                    {
+                      "title": "Mejora de Conocimiento RAG",
+                      "description": "Integra tecnología de Generación Aumentada por Recuperación (RAG) para habilitar bases de conocimiento privadas y conciencia contextual"
+                    },
+                    {
+                      "title": "Despliegue Empresarial",
+                      "description": "Soporte para despliegue privado, garantizando la seguridad de datos, proporcionando servicios estables y confiables basados en backend Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Mejora de Conocimiento RAG",
-          "description": "Integra tecnología de Generación Aumentada por Recuperación (RAG) para habilitar bases de conocimiento privadas y conciencia contextual"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Comenzar",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Saber más",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Despliegue Empresarial",
-          "description": "Soporte para despliegue privado, garantizando la seguridad de datos, proporcionando servicios estables y confiables basados en backend Dify"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explora las posibilidades infinitas de la IA.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explora las posibilidades infinitas de la IA."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "es-ES"
       }
     },
     "chat": {
@@ -1926,39 +2007,142 @@
       }
     },
     "about": {
-      "title": "Acerca de AgentifUI",
-      "subtitle": "Conectando IA con empresas, creando nuevas experiencias con modelos de lenguaje grandes",
-      "loading": "Cargando...",
-      "mission": {
-        "title": "Nuestra Misión",
-        "description": "AgentifUI se compromete a aprovechar el poder de los modelos de lenguaje grandes para proporcionar soluciones de aplicación innovadoras para empresas. Integramos capacidades de múltiples proveedores de modelos y proporcionamos servicios estables y confiables basados en backend Dify, ayudando a las organizaciones a utilizar completamente el valor de la tecnología IA."
-      },
-      "values": {
-        "title": "Nuestros Valores",
-        "items": [
-          {
-            "title": "Innovación Técnica",
-            "description": "Integrar continuamente tecnologías de modelos grandes de vanguardia para proporcionar soluciones IA líderes para empresas"
-          },
-          {
-            "title": "Seguridad de Datos",
-            "description": "Soporte para despliegue privado y medidas estrictas de protección de datos para garantizar la seguridad y privacidad de los datos empresariales"
-          },
-          {
-            "title": "Personalización Flexible",
-            "description": "Proporcionar soluciones altamente personalizables para satisfacer necesidades específicas de diferentes industrias y escenarios"
-          },
-          {
-            "title": "Mejora de Conocimiento",
-            "description": "Integrar bases de conocimiento privadas a través de tecnología RAG para mejorar las capacidades de conciencia contextual del modelo"
-          }
-        ]
-      },
-      "buttonText": "Comenzar a Explorar",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explora el futuro de las aplicaciones de modelos grandes."
+      "sections": [
+        {
+          "id": "section-1754655785539-c19suif9u",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-i1ftzar4w",
+                "type": "heading",
+                "props": {
+                  "content": "Acerca de AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785539-b2qh6e8dc",
+                "type": "paragraph",
+                "props": {
+                  "content": "Conectando IA con empresas, creando nuevas experiencias con modelos de lenguaje grandes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785539-ukusawm02",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-8n5zs2eaz",
+                "type": "heading",
+                "props": {
+                  "content": "Nuestra Misión",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785539-npz3qmgyg",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI se compromete a aprovechar el poder de los modelos de lenguaje grandes para proporcionar soluciones de aplicación innovadoras para empresas. Integramos capacidades de múltiples proveedores de modelos y proporcionamos servicios estables y confiables basados en backend Dify, ayudando a las organizaciones a utilizar completamente el valor de la tecnología IA.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785539-u1p9lrnhb",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-bd7il5wtx",
+                "type": "heading",
+                "props": {
+                  "content": "Nuestros Valores",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785539-au21wwllc",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Innovación Técnica",
+                      "description": "Integrar continuamente tecnologías de modelos grandes de vanguardia para proporcionar soluciones IA líderes para empresas"
+                    },
+                    {
+                      "title": "Seguridad de Datos",
+                      "description": "Soporte para despliegue privado y medidas estrictas de protección de datos para garantizar la seguridad y privacidad de los datos empresariales"
+                    },
+                    {
+                      "title": "Personalización Flexible",
+                      "description": "Proporcionar soluciones altamente personalizables para satisfacer necesidades específicas de diferentes industrias y escenarios"
+                    },
+                    {
+                      "title": "Mejora de Conocimiento",
+                      "description": "Integrar bases de conocimiento privadas a través de tecnología RAG para mejorar las capacidades de conciencia contextual del modelo"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785539-0435zlw1u",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-d19fs9aut",
+                "type": "button",
+                "props": {
+                  "text": "Comenzar a Explorar",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785539-e0s3c1c3j",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785539-sxxoy6s4k",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explora el futuro de las aplicaciones de modelos grandes.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.539Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.539Z",
+        "locale": "es-ES"
       }
     }
   },
diff --git a/messages/fr-FR.json b/messages/fr-FR.json
index b38aaf31..835b5a1a 100644
--- a/messages/fr-FR.json
+++ b/messages/fr-FR.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explorez les possibilités infinies de l'IA et créez de nouvelles expériences intelligentes",
-      "getStarted": "Commencer",
-      "learnMore": "En savoir plus",
-      "features": [
+      "sections": [
         {
-          "title": "Intégration de grands modèles",
-          "description": "Prise en charge de plusieurs fournisseurs de modèles, y compris OpenAI, Anthropic, Dify, etc., pour répondre aux différents besoins des entreprises"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Explorez les possibilités infinies de l'IA et créez de nouvelles expériences intelligentes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Intégration de grands modèles",
+                      "description": "Prise en charge de plusieurs fournisseurs de modèles, y compris OpenAI, Anthropic, Dify, etc., pour répondre aux différents besoins des entreprises"
+                    },
+                    {
+                      "title": "Amélioration des connaissances RAG",
+                      "description": "Intégrez la technologie de génération augmentée par récupération (RAG) pour permettre des bases de connaissances privées et une conscience contextuelle"
+                    },
+                    {
+                      "title": "Déploiement en entreprise",
+                      "description": "Prise en charge du déploiement privé, garantissant la sécurité des données, fournissant des services stables et fiables basés sur le backend Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Amélioration des connaissances RAG",
-          "description": "Intégrez la technologie de génération augmentée par récupération (RAG) pour permettre des bases de connaissances privées et une conscience contextuelle"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Commencer",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "En savoir plus",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Déploiement en entreprise",
-          "description": "Prise en charge du déploiement privé, garantissant la sécurité des données, fournissant des services stables et fiables basés sur le backend Dify"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explorez les possibilités infinies de l'IA.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explorez les possibilités infinies de l'IA."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "fr-FR"
       }
     },
     "chat": {
@@ -1926,39 +2007,142 @@
       }
     },
     "about": {
-      "title": "À propos d'AgentifUI",
-      "subtitle": "Connecter l'IA aux entreprises, créer de nouvelles expériences avec les grands modèles de langage",
-      "loading": "Chargement...",
-      "mission": {
-        "title": "Notre mission",
-        "description": "AgentifUI s'engage à exploiter la puissance des grands modèles de langage pour fournir des solutions applicatives innovantes aux entreprises. Nous intégrons les capacités de plusieurs fournisseurs de modèles et fournissons des services stables et fiables basés sur le backend Dify, aidant les organisations à utiliser pleinement la valeur de la technologie IA."
-      },
-      "values": {
-        "title": "Nos valeurs",
-        "items": [
-          {
-            "title": "Innovation technique",
-            "description": "Intégrer en continu les technologies de pointe des grands modèles pour fournir des solutions IA de premier plan aux entreprises"
-          },
-          {
-            "title": "Sécurité des données",
-            "description": "Soutenir le déploiement privé et des mesures strictes de protection des données pour garantir la sécurité et la confidentialité des données de l'entreprise"
-          },
-          {
-            "title": "Personnalisation flexible",
-            "description": "Fournir des solutions hautement personnalisables pour répondre aux besoins spécifiques des différentes industries et scénarios"
-          },
-          {
-            "title": "Amélioration des connaissances",
-            "description": "Intégrer des bases de connaissances privées via la technologie RAG pour améliorer les capacités de conscience contextuelle du modèle"
-          }
-        ]
-      },
-      "buttonText": "Commencer à explorer",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explorez l'avenir des applications de grands modèles."
+      "sections": [
+        {
+          "id": "section-1754655785527-9372afg5u",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-r5env4t5w",
+                "type": "heading",
+                "props": {
+                  "content": "À propos d'AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785527-l8xn5ixxl",
+                "type": "paragraph",
+                "props": {
+                  "content": "Connecter l'IA aux entreprises, créer de nouvelles expériences avec les grands modèles de langage",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785527-3m5genq0l",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-r4aulvhjk",
+                "type": "heading",
+                "props": {
+                  "content": "Notre mission",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785527-uo6h0hoog",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI s'engage à exploiter la puissance des grands modèles de langage pour fournir des solutions applicatives innovantes aux entreprises. Nous intégrons les capacités de plusieurs fournisseurs de modèles et fournissons des services stables et fiables basés sur le backend Dify, aidant les organisations à utiliser pleinement la valeur de la technologie IA.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785527-zm5tcp7tt",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-vvejqx8sf",
+                "type": "heading",
+                "props": {
+                  "content": "Nos valeurs",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785527-ex4409e7y",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Innovation technique",
+                      "description": "Intégrer en continu les technologies de pointe des grands modèles pour fournir des solutions IA de premier plan aux entreprises"
+                    },
+                    {
+                      "title": "Sécurité des données",
+                      "description": "Soutenir le déploiement privé et des mesures strictes de protection des données pour garantir la sécurité et la confidentialité des données de l'entreprise"
+                    },
+                    {
+                      "title": "Personnalisation flexible",
+                      "description": "Fournir des solutions hautement personnalisables pour répondre aux besoins spécifiques des différentes industries et scénarios"
+                    },
+                    {
+                      "title": "Amélioration des connaissances",
+                      "description": "Intégrer des bases de connaissances privées via la technologie RAG pour améliorer les capacités de conscience contextuelle du modèle"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785527-y4yiipyyk",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-1r3lxt6xc",
+                "type": "button",
+                "props": {
+                  "text": "Commencer à explorer",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785527-i2m407ojn",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785527-m8l8x5hm2",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explorez l'avenir des applications de grands modèles.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.527Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.527Z",
+        "locale": "fr-FR"
       }
     }
   },
diff --git a/messages/it-IT.json b/messages/it-IT.json
index 64dc5c46..7de12b5d 100644
--- a/messages/it-IT.json
+++ b/messages/it-IT.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Esplora le infinite possibilità dell'IA e crea nuove esperienze intelligenti",
-      "getStarted": "Inizia",
-      "learnMore": "Scopri di più",
-      "features": [
+      "sections": [
         {
-          "title": "Integrazione di Grandi Modelli",
-          "description": "Supporto per più fornitori di modelli, tra cui OpenAI, Anthropic, Dify, ecc., per soddisfare le diverse esigenze aziendali"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Esplora le infinite possibilità dell'IA e crea nuove esperienze intelligenti",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Integrazione di Grandi Modelli",
+                      "description": "Supporto per più fornitori di modelli, tra cui OpenAI, Anthropic, Dify, ecc., per soddisfare le diverse esigenze aziendali"
+                    },
+                    {
+                      "title": "Miglioramento della Conoscenza con RAG",
+                      "description": "Integra la tecnologia Retrieval-Augmented Generation (RAG) per abilitare basi di conoscenza private e consapevolezza del contesto"
+                    },
+                    {
+                      "title": "Distribuzione Aziendale",
+                      "description": "Supporto per la distribuzione privata, garantendo la sicurezza dei dati e fornendo servizi stabili e affidabili basati sul backend di Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Miglioramento della Conoscenza con RAG",
-          "description": "Integra la tecnologia Retrieval-Augmented Generation (RAG) per abilitare basi di conoscenza private e consapevolezza del contesto"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Inizia",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Scopri di più",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Distribuzione Aziendale",
-          "description": "Supporto per la distribuzione privata, garantendo la sicurezza dei dati e fornendo servizi stabili e affidabili basati sul backend di Dify"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Esplora le infinite possibilità dell'IA.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Esplora le infinite possibilità dell'IA."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "it-IT"
       }
     },
     "chat": {
@@ -1926,39 +2007,142 @@
       }
     },
     "about": {
-      "title": "Informazioni su AgentifUI",
-      "subtitle": "Connettere l'IA con le imprese, creando nuove esperienze con grandi modelli linguistici",
-      "loading": "Caricamento...",
-      "mission": {
-        "title": "La Nostra Missione",
-        "description": "AgentifUI si impegna a sfruttare la potenza dei grandi modelli linguistici per fornire soluzioni applicative innovative per le imprese. Integriamo le capacità di più fornitori di modelli e forniamo servizi stabili e affidabili basati sul backend di Dify, aiutando le organizzazioni a utilizzare appieno il valore della tecnologia IA."
-      },
-      "values": {
-        "title": "I Nostri Valori",
-        "items": [
-          {
-            "title": "Innovazione Tecnica",
-            "description": "Integrare continuamente tecnologie all'avanguardia di grandi modelli per fornire soluzioni IA leader per le imprese"
-          },
-          {
-            "title": "Sicurezza dei Dati",
-            "description": "Supportare la distribuzione privata e rigorose misure di protezione dei dati per garantire la sicurezza e la privacy dei dati aziendali"
-          },
-          {
-            "title": "Personalizzazione Flessibile",
-            "description": "Fornire soluzioni altamente personalizzabili per soddisfare le esigenze specifiche di diversi settori e scenari"
-          },
-          {
-            "title": "Miglioramento della Conoscenza",
-            "description": "Integrare basi di conoscenza private tramite la tecnologia RAG per migliorare le capacità di consapevolezza contestuale del modello"
-          }
-        ]
-      },
-      "buttonText": "Inizia a Esplorare",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Esplora il futuro delle applicazioni di grandi modelli."
+      "sections": [
+        {
+          "id": "section-1754655785533-eloh11o61",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-z38dxe2cr",
+                "type": "heading",
+                "props": {
+                  "content": "Informazioni su AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785533-qnxmx4ycv",
+                "type": "paragraph",
+                "props": {
+                  "content": "Connettere l'IA con le imprese, creando nuove esperienze con grandi modelli linguistici",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785533-0c0tqr23z",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-dc7y75lx4",
+                "type": "heading",
+                "props": {
+                  "content": "La Nostra Missione",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785533-uokca1y3i",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI si impegna a sfruttare la potenza dei grandi modelli linguistici per fornire soluzioni applicative innovative per le imprese. Integriamo le capacità di più fornitori di modelli e forniamo servizi stabili e affidabili basati sul backend di Dify, aiutando le organizzazioni a utilizzare appieno il valore della tecnologia IA.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785533-jwrlxby40",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-nw7469jtw",
+                "type": "heading",
+                "props": {
+                  "content": "I Nostri Valori",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785533-j6hungucq",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Innovazione Tecnica",
+                      "description": "Integrare continuamente tecnologie all'avanguardia di grandi modelli per fornire soluzioni IA leader per le imprese"
+                    },
+                    {
+                      "title": "Sicurezza dei Dati",
+                      "description": "Supportare la distribuzione privata e rigorose misure di protezione dei dati per garantire la sicurezza e la privacy dei dati aziendali"
+                    },
+                    {
+                      "title": "Personalizzazione Flessibile",
+                      "description": "Fornire soluzioni altamente personalizzabili per soddisfare le esigenze specifiche di diversi settori e scenari"
+                    },
+                    {
+                      "title": "Miglioramento della Conoscenza",
+                      "description": "Integrare basi di conoscenza private tramite la tecnologia RAG per migliorare le capacità di consapevolezza contestuale del modello"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785533-0o4u0z1ex",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-79q1kzcs2",
+                "type": "button",
+                "props": {
+                  "text": "Inizia a Esplorare",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785533-68esngg0h",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785533-7piv2dhg7",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Esplora il futuro delle applicazioni di grandi modelli.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.533Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.533Z",
+        "locale": "it-IT"
       }
     }
   },
diff --git a/messages/ja-JP.json b/messages/ja-JP.json
index 0e748084..b82027d0 100644
--- a/messages/ja-JP.json
+++ b/messages/ja-JP.json
@@ -45,28 +45,110 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "AIの無限の可能性を探求し、インテリジェントな新体験を創造",
-      "getStarted": "始める",
-      "learnMore": "詳しく見る",
-      "features": [
+      "sections": [
         {
-          "title": "大規模モデル統合",
-          "description": "OpenAI、Anthropic、Difyなど複数のモデルプロバイダーをサポートし、様々な企業ニーズに対応"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "AIの無限の可能性を探求し、インテリジェントな新体験を創造",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "大規模モデル統合",
+                      "description": "OpenAI、Anthropic、Difyなど複数のモデルプロバイダーをサポートし、様々な企業ニーズに対応"
+                    },
+                    {
+                      "title": "RAG知識強化",
+                      "description": "検索拡張生成（RAG）技術を統合し、プライベート知識ベースとコンテキスト認識を実現"
+                    },
+                    {
+                      "title": "エンタープライズ展開",
+                      "description": "プライベート展開をサポートし、データセキュリティを保証、Difyバックエンドに基づく安定した信頼性の高いサービスを提供"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG知識強化",
-          "description": "検索拡張生成（RAG）技術を統合し、プライベート知識ベースとコンテキスト認識を実現"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "始める",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "詳しく見る",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "エンタープライズ展開",
-          "description": "プライベート展開をサポートし、データセキュリティを保証、Difyバックエンドに基づく安定した信頼性の高いサービスを提供"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI。AIの無限の可能性を探求。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": "。AIの無限の可能性を探求。"
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "ja-JP"
       }
     },
     "chat": {
@@ -1926,39 +2008,142 @@
       }
     },
     "about": {
-      "title": "AgentifUIについて",
-      "subtitle": "AIと企業を繋ぎ、大規模言語モデルで新しい体験を創造",
-      "loading": "読み込み中...",
-      "mission": {
-        "title": "私たちの使命",
-        "description": "AgentifUIは大規模言語モデルの力を活用し、企業に革新的なアプリケーションソリューションを提供することに取り組んでいます。複数のモデルプロバイダーの能力を統合し、Difyバックエンドに基づく安定した信頼性の高いサービスを提供し、組織がAI技術の価値を最大限に活用できるよう支援します。"
-      },
-      "values": {
-        "title": "私たちの価値観",
-        "items": [
-          {
-            "title": "技術革新",
-            "description": "最先端の大規模モデル技術を継続的に統合し、企業に最先端のAIソリューションを提供"
-          },
-          {
-            "title": "データセキュリティ",
-            "description": "プライベート展開と厳格なデータ保護措置をサポートし、企業データのセキュリティとプライバシーを保証"
-          },
-          {
-            "title": "柔軟なカスタマイズ",
-            "description": "高度にカスタマイズ可能なソリューションを提供し、異なる業界とシナリオの特定のニーズに対応"
-          },
-          {
-            "title": "知識強化",
-            "description": "RAG技術を通じてプライベート知識ベースを統合し、モデルのコンテキスト認識能力を強化"
-          }
-        ]
-      },
-      "buttonText": "探索を始める",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": "。大規模モデルアプリケーションの未来を探求。"
+      "sections": [
+        {
+          "id": "section-1754655785520-817etyg0d",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-22626u94f",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUIについて",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785520-9e9qre6gq",
+                "type": "paragraph",
+                "props": {
+                  "content": "AIと企業を繋ぎ、大規模言語モデルで新しい体験を創造",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785520-lt84rggrn",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-tdp6yjlmz",
+                "type": "heading",
+                "props": {
+                  "content": "私たちの使命",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785520-9vsha3qtk",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUIは大規模言語モデルの力を活用し、企業に革新的なアプリケーションソリューションを提供することに取り組んでいます。複数のモデルプロバイダーの能力を統合し、Difyバックエンドに基づく安定した信頼性の高いサービスを提供し、組織がAI技術の価値を最大限に活用できるよう支援します。",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785520-rp9u08tjy",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-yldbhhn6i",
+                "type": "heading",
+                "props": {
+                  "content": "私たちの価値観",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785520-9lcaoqkek",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "技術革新",
+                      "description": "最先端の大規模モデル技術を継続的に統合し、企業に最先端のAIソリューションを提供"
+                    },
+                    {
+                      "title": "データセキュリティ",
+                      "description": "プライベート展開と厳格なデータ保護措置をサポートし、企業データのセキュリティとプライバシーを保証"
+                    },
+                    {
+                      "title": "柔軟なカスタマイズ",
+                      "description": "高度にカスタマイズ可能なソリューションを提供し、異なる業界とシナリオの特定のニーズに対応"
+                    },
+                    {
+                      "title": "知識強化",
+                      "description": "RAG技術を通じてプライベート知識ベースを統合し、モデルのコンテキスト認識能力を強化"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785520-3s050qgmy",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-a3uo1m6lo",
+                "type": "button",
+                "props": {
+                  "text": "探索を始める",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785520-sfsoc34ab",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785520-sukotrhas",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI。大規模モデルアプリケーションの未来を探求。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.520Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.520Z",
+        "locale": "ja-JP"
       }
     }
   },
diff --git a/messages/pt-PT.json b/messages/pt-PT.json
index 55749d3a..d84e8c8a 100644
--- a/messages/pt-PT.json
+++ b/messages/pt-PT.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explore as infinitas possibilidades da IA e crie novas experiências inteligentes",
-      "getStarted": "Começar",
-      "learnMore": "Saber mais",
-      "features": [
+      "sections": [
         {
-          "title": "Integração de Grandes Modelos",
-          "description": "Suporte para múltiplos fornecedores de modelos, incluindo OpenAI, Anthropic, Dify, etc., para satisfazer as diferentes necessidades empresariais"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Explore as infinitas possibilidades da IA e crie novas experiências inteligentes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Integração de Grandes Modelos",
+                      "description": "Suporte para múltiplos fornecedores de modelos, incluindo OpenAI, Anthropic, Dify, etc., para satisfazer as diferentes necessidades empresariais"
+                    },
+                    {
+                      "title": "Melhoria de Conhecimento com RAG",
+                      "description": "Integre a tecnologia de Geração Aumentada por Recuperação (RAG) para permitir bases de conhecimento privadas e consciência de contexto"
+                    },
+                    {
+                      "title": "Implementação Empresarial",
+                      "description": "Suporte para implementação privada, garantindo a segurança dos dados, e fornecendo serviços estáveis e fiáveis baseados no backend Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Melhoria de Conhecimento com RAG",
-          "description": "Integre a tecnologia de Geração Aumentada por Recuperação (RAG) para permitir bases de conhecimento privadas e consciência de contexto"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Começar",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Saber mais",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Implementação Empresarial",
-          "description": "Suporte para implementação privada, garantindo a segurança dos dados, e fornecendo serviços estáveis e fiáveis baseados no backend Dify"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Explore as infinitas possibilidades da IA.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore as infinitas possibilidades da IA."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "pt-PT"
       }
     },
     "chat": {
@@ -1926,39 +2007,142 @@
       }
     },
     "about": {
-      "title": "Sobre o AgentifUI",
-      "subtitle": "A conectar a IA com empresas, criando novas experiências com modelos de linguagem grandes",
-      "loading": "A carregar...",
-      "mission": {
-        "title": "A Nossa Missão",
-        "description": "O AgentifUI está empenhado em alavancar o poder dos modelos de linguagem grandes para fornecer soluções de aplicação inovadoras para empresas. Integramos capacidades de múltiplos fornecedores de modelos e fornecemos serviços estáveis e fiáveis baseados no backend Dify, ajudando as organizações a utilizar plenamente o valor da tecnologia de IA."
-      },
-      "values": {
-        "title": "Os Nossos Valores",
-        "items": [
-          {
-            "title": "Inovação Tecnológica",
-            "description": "Integrar continuamente tecnologias de ponta de modelos grandes para fornecer soluções de IA líderes para empresas"
-          },
-          {
-            "title": "Segurança de Dados",
-            "description": "Suportar implementação privada e medidas rigorosas de proteção de dados para garantir a segurança e privacidade dos dados empresariais"
-          },
-          {
-            "title": "Personalização Flexível",
-            "description": "Fornecer soluções altamente personalizáveis para satisfazer as necessidades específicas de diferentes indústrias e cenários"
-          },
-          {
-            "title": "Melhoria de Conhecimento",
-            "description": "Integrar bases de conhecimento privadas através da tecnologia RAG para melhorar as capacidades de consciência contextual do modelo"
-          }
-        ]
-      },
-      "buttonText": "Começar a Explorar",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore o futuro das aplicações de modelos grandes."
+      "sections": [
+        {
+          "id": "section-1754655785536-fggk34aml",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-no51c4iks",
+                "type": "heading",
+                "props": {
+                  "content": "Sobre o AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785536-p51acxm7s",
+                "type": "paragraph",
+                "props": {
+                  "content": "A conectar a IA com empresas, criando novas experiências com modelos de linguagem grandes",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785536-bjqx7y3hq",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-srdun3d41",
+                "type": "heading",
+                "props": {
+                  "content": "A Nossa Missão",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785536-99r6172ti",
+                "type": "paragraph",
+                "props": {
+                  "content": "O AgentifUI está empenhado em alavancar o poder dos modelos de linguagem grandes para fornecer soluções de aplicação inovadoras para empresas. Integramos capacidades de múltiplos fornecedores de modelos e fornecemos serviços estáveis e fiáveis baseados no backend Dify, ajudando as organizações a utilizar plenamente o valor da tecnologia de IA.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785536-rs6murtq2",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-q26j7prhd",
+                "type": "heading",
+                "props": {
+                  "content": "Os Nossos Valores",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785536-vjc6a0pp2",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Inovação Tecnológica",
+                      "description": "Integrar continuamente tecnologias de ponta de modelos grandes para fornecer soluções de IA líderes para empresas"
+                    },
+                    {
+                      "title": "Segurança de Dados",
+                      "description": "Suportar implementação privada e medidas rigorosas de proteção de dados para garantir a segurança e privacidade dos dados empresariais"
+                    },
+                    {
+                      "title": "Personalização Flexível",
+                      "description": "Fornecer soluções altamente personalizáveis para satisfazer as necessidades específicas de diferentes indústrias e cenários"
+                    },
+                    {
+                      "title": "Melhoria de Conhecimento",
+                      "description": "Integrar bases de conhecimento privadas através da tecnologia RAG para melhorar as capacidades de consciência contextual do modelo"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785536-wzk6bznx9",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-8jkrh1ax0",
+                "type": "button",
+                "props": {
+                  "text": "Começar a Explorar",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785536-dwv0bz2jy",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785536-ihwp8sjl9",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Explore o futuro das aplicações de modelos grandes.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.536Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.536Z",
+        "locale": "pt-PT"
       }
     }
   },
diff --git a/messages/ru-RU.json b/messages/ru-RU.json
index bccde5b9..2db95a54 100644
--- a/messages/ru-RU.json
+++ b/messages/ru-RU.json
@@ -45,28 +45,109 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "Исследуйте безграничные возможности ИИ и создавайте новые интеллектуальные решения",
-      "getStarted": "Начать",
-      "learnMore": "Узнать больше",
-      "features": [
+      "sections": [
         {
-          "title": "Интеграция больших моделей",
-          "description": "Поддержка нескольких поставщиков моделей, включая OpenAI, Anthropic, Dify и т.д., для удовлетворения различных потребностей предприятий"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "Исследуйте безграничные возможности ИИ и создавайте новые интеллектуальные решения",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Интеграция больших моделей",
+                      "description": "Поддержка нескольких поставщиков моделей, включая OpenAI, Anthropic, Dify и т.д., для удовлетворения различных потребностей предприятий"
+                    },
+                    {
+                      "title": "Улучшение знаний с помощью RAG",
+                      "description": "Интеграция технологии Retrieval-Augmented Generation (RAG) для использования частных баз знаний и контекстной осведомленности"
+                    },
+                    {
+                      "title": "Развертывание на предприятии",
+                      "description": "Поддержка частного развертывания, обеспечивающая безопасность данных и предоставляющая стабильные и надежные услуги на базе бэкенда Dify"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Улучшение знаний с помощью RAG",
-          "description": "Интеграция технологии Retrieval-Augmented Generation (RAG) для использования частных баз знаний и контекстной осведомленности"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "Начать",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "Узнать больше",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "Развертывание на предприятии",
-          "description": "Поддержка частного развертывания, обеспечивающая безопасность данных и предоставляющая стабильные и надежные услуги на базе бэкенда Dify"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. Исследуйте безграничные возможности ИИ.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Исследуйте безграничные возможности ИИ."
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "ru-RU"
       }
     },
     "chat": {
@@ -1926,39 +2007,142 @@
       }
     },
     "about": {
-      "title": "О AgentifUI",
-      "subtitle": "Соединяем ИИ с предприятиями, создаем новые впечатления с помощью больших языковых моделей",
-      "loading": "Загрузка...",
-      "mission": {
-        "title": "Наша миссия",
-        "description": "AgentifUI стремится использовать мощь больших языковых моделей для предоставления инновационных прикладных решений для предприятий. Мы интегрируем возможности нескольких поставщиков моделей и предоставляем стабильные, надежные услуги на базе бэкенда Dify, помогая организациям в полной мере использовать ценность технологий ИИ."
-      },
-      "values": {
-        "title": "Наши ценности",
-        "items": [
-          {
-            "title": "Технологические инновации",
-            "description": "Постоянно интегрируем передовые технологии больших моделей, чтобы предоставлять ведущие ИИ-решения для предприятий"
-          },
-          {
-            "title": "Безопасность данных",
-            "description": "Поддерживаем частное развертывание и строгие меры защиты данных для обеспечения безопасности и конфиденциальности данных предприятия"
-          },
-          {
-            "title": "Гибкая настройка",
-            "description": "Предоставляем высоко настраиваемые решения для удовлетворения конкретных потребностей различных отраслей и сценариев"
-          },
-          {
-            "title": "Улучшение знаний",
-            "description": "Интегрируем частные базы знаний с помощью технологии RAG для улучшения контекстной осведомленности модели"
-          }
-        ]
-      },
-      "buttonText": "Начать исследование",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Исследуйте будущее приложений больших моделей."
+      "sections": [
+        {
+          "id": "section-1754655785530-fmrppai9k",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-zy13p3of7",
+                "type": "heading",
+                "props": {
+                  "content": "О AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785530-zm2ujx2vd",
+                "type": "paragraph",
+                "props": {
+                  "content": "Соединяем ИИ с предприятиями, создаем новые впечатления с помощью больших языковых моделей",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785530-918ad1vth",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-mp1j070s1",
+                "type": "heading",
+                "props": {
+                  "content": "Наша миссия",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785530-zyx3fzq2n",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI стремится использовать мощь больших языковых моделей для предоставления инновационных прикладных решений для предприятий. Мы интегрируем возможности нескольких поставщиков моделей и предоставляем стабильные, надежные услуги на базе бэкенда Dify, помогая организациям в полной мере использовать ценность технологий ИИ.",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785530-7kef2520w",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-bd5nzxcyi",
+                "type": "heading",
+                "props": {
+                  "content": "Наши ценности",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785530-fegb2e1cp",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "Технологические инновации",
+                      "description": "Постоянно интегрируем передовые технологии больших моделей, чтобы предоставлять ведущие ИИ-решения для предприятий"
+                    },
+                    {
+                      "title": "Безопасность данных",
+                      "description": "Поддерживаем частное развертывание и строгие меры защиты данных для обеспечения безопасности и конфиденциальности данных предприятия"
+                    },
+                    {
+                      "title": "Гибкая настройка",
+                      "description": "Предоставляем высоко настраиваемые решения для удовлетворения конкретных потребностей различных отраслей и сценариев"
+                    },
+                    {
+                      "title": "Улучшение знаний",
+                      "description": "Интегрируем частные базы знаний с помощью технологии RAG для улучшения контекстной осведомленности модели"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785530-3x3l6zpn1",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-t40laywew",
+                "type": "button",
+                "props": {
+                  "text": "Начать исследование",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785530-jumlsf7aa",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785530-ewyln1yz7",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. Исследуйте будущее приложений больших моделей.",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.530Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.530Z",
+        "locale": "ru-RU"
       }
     }
   },
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index 77487d52..60df1c2f 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -45,28 +45,110 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "探索AI的无限可能，打造智能新体验",
-      "getStarted": "立即开始",
-      "learnMore": "了解更多",
-      "features": [
+      "sections": [
         {
-          "title": "大模型集成",
-          "description": "支持多种模型供应商，包括OpenAI、Anthropic、Dify等，满足不同企业需求"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "探索AI的无限可能，打造智能新体验",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "大模型集成",
+                      "description": "支持多种模型供应商，包括OpenAI、Anthropic、Dify等，满足不同企业需求"
+                    },
+                    {
+                      "title": "RAG知识增强",
+                      "description": "集成检索增强生成(RAG)技术，实现私有知识库和上下文感知"
+                    },
+                    {
+                      "title": "企业级部署",
+                      "description": "支持私有化部署，保障数据安全，基于Dify后端提供稳定可靠的服务"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG知识增强",
-          "description": "集成检索增强生成(RAG)技术，实现私有知识库和上下文感知"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "立即开始",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "了解更多",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "企业级部署",
-          "description": "支持私有化部署，保障数据安全，基于Dify后端提供稳定可靠的服务"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. 探索AI的无限可能。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索AI的无限可能。"
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "zh-CN"
       }
     },
     "chat": {
@@ -1926,39 +2008,142 @@
       }
     },
     "about": {
-      "title": "关于 AgentifUI",
-      "subtitle": "连接 AI 与企业，打造大模型应用新体验",
-      "loading": "加载中...",
-      "mission": {
-        "title": "我们的使命",
-        "description": "AgentifUI 致力于利用大型语言模型的力量，为企业提供创新的应用解决方案。我们整合了多种模型供应商的能力，并基于 Dify 后端提供稳定、可靠的服务，帮助团队充分利用 AI 技术的价值。"
-      },
-      "values": {
-        "title": "我们的价值观",
-        "items": [
-          {
-            "title": "技术创新",
-            "description": "持续集成前沿的大模型技术，为企业提供领先的 AI 解决方案"
-          },
-          {
-            "title": "数据安全",
-            "description": "支持私有化部署和严格的数据保护措施，确保企业数据的安全与隐私"
-          },
-          {
-            "title": "灵活定制",
-            "description": "提供高度可定制的解决方案，满足不同行业和场景的特定需求"
-          },
-          {
-            "title": "知识增强",
-            "description": "通过 RAG 技术实现私有知识库的整合，增强模型的上下文感知能力"
-          }
-        ]
-      },
-      "buttonText": "开始探索",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索大模型应用的未来。"
+      "sections": [
+        {
+          "id": "section-1754655785513-1coqlomn8",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-drqxj9u2y",
+                "type": "heading",
+                "props": {
+                  "content": "关于 AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785513-9ofzcdpsf",
+                "type": "paragraph",
+                "props": {
+                  "content": "连接 AI 与企业，打造大模型应用新体验",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-9prn2le6b",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-tx96kmz4r",
+                "type": "heading",
+                "props": {
+                  "content": "我们的使命",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785513-kjjf0b6zo",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI 致力于利用大型语言模型的力量，为企业提供创新的应用解决方案。我们整合了多种模型供应商的能力，并基于 Dify 后端提供稳定、可靠的服务，帮助团队充分利用 AI 技术的价值。",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-s2cs5yr9y",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-ldeft2c7k",
+                "type": "heading",
+                "props": {
+                  "content": "我们的价值观",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785513-igu96ir94",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "技术创新",
+                      "description": "持续集成前沿的大模型技术，为企业提供领先的 AI 解决方案"
+                    },
+                    {
+                      "title": "数据安全",
+                      "description": "支持私有化部署和严格的数据保护措施，确保企业数据的安全与隐私"
+                    },
+                    {
+                      "title": "灵活定制",
+                      "description": "提供高度可定制的解决方案，满足不同行业和场景的特定需求"
+                    },
+                    {
+                      "title": "知识增强",
+                      "description": "通过 RAG 技术实现私有知识库的整合，增强模型的上下文感知能力"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-2pmrtihgq",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-3l83pa52m",
+                "type": "button",
+                "props": {
+                  "text": "开始探索",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785513-byfail2zl",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785513-ip1qbopuu",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. 探索大模型应用的未来。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.513Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.513Z",
+        "locale": "zh-CN"
       }
     }
   },
diff --git a/messages/zh-TW.json b/messages/zh-TW.json
index 7b1d51a8..0268e48f 100644
--- a/messages/zh-TW.json
+++ b/messages/zh-TW.json
@@ -45,28 +45,110 @@
   },
   "pages": {
     "home": {
-      "title": "AgentifUI",
-      "subtitle": "探索AI的無限可能，打造智慧新體驗",
-      "getStarted": "立即開始",
-      "learnMore": "了解更多",
-      "features": [
+      "sections": [
         {
-          "title": "大模型整合",
-          "description": "支援多種模型供應商，包括OpenAI、Anthropic、Dify等，滿足不同企業需求"
+          "id": "section-home-hero",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-title",
+                "type": "heading",
+                "props": {
+                  "content": "AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-home-subtitle",
+                "type": "paragraph",
+                "props": {
+                  "content": "探索AI的無限可能，打造智慧新體驗",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-home-features",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-features",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "大模型整合",
+                      "description": "支援多種模型供應商，包括OpenAI、Anthropic、Dify等，滿足不同企業需求"
+                    },
+                    {
+                      "title": "RAG知識增強",
+                      "description": "整合檢索增強生成(RAG)技術，實現私有知識庫和上下文感知"
+                    },
+                    {
+                      "title": "企業級部署",
+                      "description": "支援私有化部署，保障資料安全，基於Dify後端提供穩定可靠的服務"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "RAG知識增強",
-          "description": "整合檢索增強生成(RAG)技術，實現私有知識庫和上下文感知"
+          "id": "section-home-buttons",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-button-primary",
+                "type": "button",
+                "props": {
+                  "text": "立即開始",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "/chat",
+                  "textAlign": "center",
+                  "secondaryButton": {
+                    "text": "了解更多",
+                    "variant": "outline",
+                    "action": "link",
+                    "url": "/about"
+                  }
+                }
+              }
+            ]
+          ]
         },
         {
-          "title": "企業級部署",
-          "description": "支援私有化部署，保障資料安全，基於Dify後端提供穩定可靠的服務"
+          "id": "section-home-footer",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-home-copyright",
+                "type": "paragraph",
+                "props": {
+                  "content": "© {year} AgentifUI. 探索AI的無限可能。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
         }
       ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索AI的無限可能。"
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-12T12:00:00.000Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-12T12:00:00.000Z",
+        "locale": "zh-TW"
       }
     },
     "chat": {
@@ -1926,39 +2008,142 @@
       }
     },
     "about": {
-      "title": "關於 AgentifUI",
-      "subtitle": "連接 AI 與企業，打造大模型應用新體驗",
-      "loading": "載入中...",
-      "mission": {
-        "title": "我們的使命",
-        "description": "AgentifUI 致力於利用大型語言模型的力量，為企業提供創新的應用解決方案。我們整合了多種模型供應商的能力，並基於 Dify 後端提供穩定、可靠的服務，幫助組織充分利用 AI 技術的價值。"
-      },
-      "values": {
-        "title": "我們的價值觀",
-        "items": [
-          {
-            "title": "技術創新",
-            "description": "持續整合前沿的大模型技術，為企業提供領先的 AI 解決方案"
-          },
-          {
-            "title": "資料安全",
-            "description": "支援私有化部署和嚴格的資料保護措施，確保企業資料的安全與隱私"
-          },
-          {
-            "title": "靈活客製",
-            "description": "提供高度可客製的解決方案，滿足不同行業和情境的特定需求"
-          },
-          {
-            "title": "知識增強",
-            "description": "透過 RAG 技術實現私有知識庫的整合，增強模型的上下文感知能力"
-          }
-        ]
-      },
-      "buttonText": "開始探索",
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索大模型應用的未來。"
+      "sections": [
+        {
+          "id": "section-1754655785516-0gtnyowfz",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-arpgn8u9r",
+                "type": "heading",
+                "props": {
+                  "content": "關於 AgentifUI",
+                  "level": 1,
+                  "textAlign": "center"
+                }
+              },
+              {
+                "id": "comp-1754655785516-kwyablkrd",
+                "type": "paragraph",
+                "props": {
+                  "content": "連接 AI 與企業，打造大模型應用新體驗",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785516-cmmopg4cw",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-5ie7wbie9",
+                "type": "heading",
+                "props": {
+                  "content": "我們的使命",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785516-h6vlfnfvd",
+                "type": "paragraph",
+                "props": {
+                  "content": "AgentifUI 致力於利用大型語言模型的力量，為企業提供創新的應用解決方案。我們整合了多種模型供應商的能力，並基於 Dify 後端提供穩定、可靠的服務，幫助組織充分利用 AI 技術的價值。",
+                  "textAlign": "left"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785516-cxcotoc0i",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-4ajdcbfpz",
+                "type": "heading",
+                "props": {
+                  "content": "我們的價值觀",
+                  "level": 2,
+                  "textAlign": "left"
+                }
+              },
+              {
+                "id": "comp-1754655785516-qkn65c0pz",
+                "type": "cards",
+                "props": {
+                  "layout": "grid",
+                  "items": [
+                    {
+                      "title": "技術創新",
+                      "description": "持續整合前沿的大模型技術，為企業提供領先的 AI 解決方案"
+                    },
+                    {
+                      "title": "資料安全",
+                      "description": "支援私有化部署和嚴格的資料保護措施，確保企業資料的安全與隱私"
+                    },
+                    {
+                      "title": "靈活客製",
+                      "description": "提供高度可客製的解決方案，滿足不同行業和情境的特定需求"
+                    },
+                    {
+                      "title": "知識增強",
+                      "description": "透過 RAG 技術實現私有知識庫的整合，增強模型的上下文感知能力"
+                    }
+                  ]
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785516-u3wi14baf",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-5fomxvrls",
+                "type": "button",
+                "props": {
+                  "text": "開始探索",
+                  "variant": "solid",
+                  "action": "link",
+                  "url": "#",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        },
+        {
+          "id": "section-1754655785516-sty7g2pgd",
+          "layout": "single-column",
+          "columns": [
+            [
+              {
+                "id": "comp-1754655785516-4wtktv1bg",
+                "type": "paragraph",
+                "props": {
+                  "content": "© 2025 AgentifUI. 探索大模型應用的未來。",
+                  "textAlign": "center"
+                }
+              }
+            ]
+          ]
+        }
+      ],
+      "metadata": {
+        "version": "1.0.0",
+        "lastModified": "2025-08-08T12:23:05.516Z",
+        "author": "system-migration",
+        "migratedFrom": "legacy-format",
+        "migrationTimestamp": "2025-08-08T12:23:05.516Z",
+        "locale": "zh-TW"
       }
     }
   },

From e12b04d36db533ca00cac32c2b8106d431181f97 Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Wed, 13 Aug 2025 15:07:26 +0800
Subject: [PATCH 44/66] chore: update pkg

---
 package.json   |  4 +++
 pnpm-lock.yaml | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)

diff --git a/package.json b/package.json
index 0cd96df5..069d305c 100644
--- a/package.json
+++ b/package.json
@@ -59,10 +59,14 @@
     }
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9906a85b..9a2f1c23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,15 @@ importers:
 
   .:
     dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.1.1)
       '@heroicons/react':
         specifier: ^2.2.0
         version: 2.2.0(react@19.1.1)
@@ -23,6 +32,9 @@ importers:
       '@radix-ui/react-select':
         specifier: ^2.2.5
         version: 2.2.5(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-slot':
         specifier: ^1.2.3
         version: 1.2.3(@types/react@19.1.9)(react@19.1.1)
@@ -513,6 +525,28 @@ packages:
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   '@emnapi/core@1.4.5':
     resolution: {integrity: sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==}
 
@@ -1161,6 +1195,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -5111,6 +5158,31 @@ snapshots:
 
   '@discoveryjs/json-ext@0.5.7': {}
 
+  '@dnd-kit/accessibility@3.1.1(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.1.1)
+      '@dnd-kit/utilities': 3.2.2(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@dnd-kit/utilities': 3.2.2(react@19.1.1)
+      react: 19.1.1
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+      tslib: 2.8.1
+
   '@emnapi/core@1.4.5':
     dependencies:
       '@emnapi/wasi-threads': 1.0.4
@@ -5838,6 +5910,15 @@ snapshots:
       '@types/react': 19.1.9
       '@types/react-dom': 19.1.7(@types/react@19.1.9)
 
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.7(@types/react@19.1.9))(@types/react@19.1.9)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.9
+      '@types/react-dom': 19.1.7(@types/react@19.1.9)
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.9)(react@19.1.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.9)(react@19.1.1)

From d09b661a7226f556b73c98512c2cfcbf8c49178e Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Wed, 13 Aug 2025 15:09:26 +0800
Subject: [PATCH 45/66] feat: add drag and drop improvements to about page

---
 app/about/page.tsx                            | 193 +---
 app/admin/content/page.tsx                    | 261 +++--
 components/admin/content/about-editor.tsx     | 978 +++++++++++-------
 components/admin/content/about-preview.tsx    | 408 ++++----
 .../admin/content/component-palette.tsx       | 246 +++++
 components/admin/content/context-menu.tsx     | 520 ++++++++++
 components/admin/content/dnd-components.tsx   | 319 ++++++
 components/admin/content/dnd-context.tsx      | 139 +++
 .../admin/content/home-preview-dynamic.tsx    | 208 ++++
 components/home/home-dynamic.tsx              | 222 ++++
 components/home/index.tsx                     |  48 +-
 components/ui/separator.tsx                   |  32 +
 lib/stores/about-editor-store.ts              | 792 ++++++++++++++
 lib/stores/home-editor-store.ts               | 252 +++++
 lib/types/about-page-components.ts            | 324 ++++++
 lib/utils/data-migration.ts                   | 638 ++++++++++++
 16 files changed, 4697 insertions(+), 883 deletions(-)
 create mode 100644 components/admin/content/component-palette.tsx
 create mode 100644 components/admin/content/context-menu.tsx
 create mode 100644 components/admin/content/dnd-components.tsx
 create mode 100644 components/admin/content/dnd-context.tsx
 create mode 100644 components/admin/content/home-preview-dynamic.tsx
 create mode 100644 components/home/home-dynamic.tsx
 create mode 100644 components/ui/separator.tsx
 create mode 100644 lib/stores/about-editor-store.ts
 create mode 100644 lib/stores/home-editor-store.ts
 create mode 100644 lib/types/about-page-components.ts
 create mode 100644 lib/utils/data-migration.ts

diff --git a/app/about/page.tsx b/app/about/page.tsx
index ffe269ac..bd6d0ed7 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import { Button } from '@components/ui/button';
+import { DynamicAboutRenderer } from '@components/about/dynamic-about-renderer';
 import { PageLoader } from '@components/ui/page-loader';
 import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
 import { useTheme } from '@lib/hooks/use-theme';
 import { createClient } from '@lib/supabase/client';
-import { cn } from '@lib/utils';
-import { motion } from 'framer-motion';
+import type { AboutTranslationData } from '@lib/types/about-page-components';
 
 import { useEffect, useState } from 'react';
 
@@ -109,168 +108,38 @@ export default function AboutPage() {
     return <PageLoader />;
   }
 
-  // Extract value cards data from translations (using static raw method for array data)
-  const valueCards = staticT.raw('values.items') as Array<{
-    title: string;
-    description: string;
-  }>;
+  // Create translation data object for the dynamic renderer
+  const translationData: AboutTranslationData = {
+    // Try to get dynamic sections first
+    sections: dynamicT('sections', 'pages.about') || undefined,
+
+    // Fallback to legacy format for backward compatibility
+    title: t('title'),
+    subtitle: t('subtitle'),
+    mission: {
+      description: t('mission.description'),
+    },
+    values: {
+      items: staticT.raw('values.items') as Array<{
+        title: string;
+        description: string;
+      }>,
+    },
+    buttonText: t('buttonText'),
+    copyright: {
+      prefix: t('copyright.prefix', { year: new Date().getFullYear() }),
+      linkText: t('copyright.linkText'),
+      suffix: t('copyright.suffix'),
+    },
+  };
 
   return (
     <main className="min-h-screen w-full overflow-x-hidden px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
-      <div className="mx-auto max-w-5xl">
-        {/* title */}
-        <motion.section
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6 }}
-          className="mb-6 text-center sm:mb-8 lg:mb-10"
-        >
-          <motion.h1
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-            className={cn(
-              'bg-gradient-to-r bg-clip-text py-2 leading-tight font-bold text-transparent',
-              'mb-4 text-3xl sm:mb-6 sm:text-4xl md:text-5xl',
-              `${colors.titleGradient}`
-            )}
-          >
-            {t('title')}
-          </motion.h1>
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            className={cn(
-              'mx-auto max-w-3xl font-light',
-              'text-base sm:text-lg lg:text-xl',
-              colors.textColor
-            )}
-          >
-            {t('subtitle')}
-          </motion.p>
-        </motion.section>
-
-        {/* mission */}
-        <motion.section
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.3 }}
-          className="mb-6 sm:mb-8 lg:mb-10"
-        >
-          <h2
-            className={cn(
-              'mb-4 font-bold sm:mb-6',
-              'text-xl sm:text-2xl',
-              colors.headingColor
-            )}
-          >
-            {t('mission.title')}
-          </h2>
-          <p
-            className={cn(
-              'text-sm leading-relaxed sm:text-base lg:text-lg',
-              colors.paragraphColor
-            )}
-          >
-            {t('mission.description')}
-          </p>
-        </motion.section>
-
-        {/* values */}
-        <motion.section
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
-          className="mb-6 sm:mb-8 lg:mb-10"
-        >
-          <h2
-            className={cn(
-              'mb-4 font-bold sm:mb-6',
-              'text-xl sm:text-2xl',
-              colors.headingColor
-            )}
-          >
-            {t('values.title')}
-          </h2>
-          <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2">
-            {valueCards.map((value, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.5 + index * 0.1 }}
-                className={cn(
-                  'rounded-xl border',
-                  'p-4 sm:p-6',
-                  colors.cardBg,
-                  colors.cardShadow,
-                  colors.cardBorder
-                )}
-              >
-                <h3
-                  className={cn(
-                    'mb-2 font-semibold',
-                    'text-base sm:text-lg',
-                    colors.cardHeadingColor
-                  )}
-                >
-                  {value.title}
-                </h3>
-                <p
-                  className={cn(
-                    'text-sm leading-relaxed sm:text-base',
-                    colors.cardTextColor
-                  )}
-                >
-                  {value.description}
-                </p>
-              </motion.div>
-            ))}
-          </div>
-        </motion.section>
-
-        {/* join us */}
-        <motion.section
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.6 }}
-          className="mb-6 text-center sm:mb-8 lg:mb-10"
-        >
-          <Button
-            size="lg"
-            className={cn(
-              'h-auto rounded-lg font-medium transition-all duration-200',
-              'px-6 py-2 text-sm sm:px-8 sm:py-3 sm:text-base',
-              colors.buttonClass
-            )}
-            onClick={handleExploreClick}
-          >
-            {t('buttonText')}
-          </Button>
-        </motion.section>
-
-        {/* bottom info */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.8 }}
-          className={cn('text-center', 'text-xs sm:text-sm', colors.textColor)}
-        >
-          <p>
-            {t('copyright.prefix', { year: new Date().getFullYear() })}
-            <a
-              href="https://github.com/ifLabX/AgentifUI"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-all duration-200 hover:underline hover:opacity-80"
-            >
-              {t('copyright.linkText')}
-            </a>
-            {t('copyright.suffix')}
-          </p>
-        </motion.div>
-      </div>
+      <DynamicAboutRenderer
+        translationData={translationData}
+        colors={colors}
+        onButtonClick={handleExploreClick}
+      />
     </main>
   );
 }
diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index b88a4e02..207ff32f 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -4,8 +4,7 @@ import { AboutEditor } from '@components/admin/content/about-editor';
 import { AboutPreview } from '@components/admin/content/about-preview';
 import { ContentTabs } from '@components/admin/content/content-tabs';
 import { EditorSkeleton } from '@components/admin/content/editor-skeleton';
-import { HomeEditor } from '@components/admin/content/home-editor';
-import { HomePreview } from '@components/admin/content/home-preview';
+import { HomePreviewDynamic } from '@components/admin/content/home-preview-dynamic';
 import { PreviewToolbar } from '@components/admin/content/preview-toolbar';
 import { ResizableSplitPane } from '@components/ui/resizable-split-pane';
 import type { SupportedLocale } from '@lib/config/language-config';
@@ -13,7 +12,22 @@ import { getCurrentLocaleFromCookie } from '@lib/config/language-config';
 import { clearTranslationCache } from '@lib/hooks/use-dynamic-translations';
 import { useTheme } from '@lib/hooks/use-theme';
 import { TranslationService } from '@lib/services/admin/content/translation-service';
+import { useAboutEditorStore } from '@lib/stores/about-editor-store';
+import { useHomeEditorStore } from '@lib/stores/home-editor-store';
+import type {
+  AboutTranslationData,
+  PageContent,
+} from '@lib/types/about-page-components';
+import {
+  isDynamicFormat,
+  migrateAboutTranslationData,
+} from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
+import type { HomeTranslationData } from '@lib/utils/data-migration';
+import {
+  isHomeDynamicFormat,
+  migrateHomeTranslationData,
+} from '@lib/utils/data-migration';
 import { Eye } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -22,21 +36,6 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter, useSearchParams } from 'next/navigation';
 
-interface ValueCard {
-  id: string;
-  title: string;
-  description: string;
-}
-
-interface AboutPageConfig {
-  title: string;
-  subtitle: string;
-  mission: string;
-  valueCards: ValueCard[];
-  buttonText: string;
-  copyrightText: string;
-}
-
 interface FeatureCard {
   title: string;
   description: string;
@@ -61,6 +60,12 @@ export default function ContentManagementPage() {
   const router = useRouter();
   const t = useTranslations('pages.admin.content.page');
 
+  // Editor stores for resetting editor state
+  const { setPageContent: setAboutPageContent, reset: resetAboutEditor } =
+    useAboutEditorStore();
+  const { setPageContent: setHomePageContent, reset: resetHomeEditor } =
+    useHomeEditorStore();
+
   const [activeTab, setActiveTab] = useState<'about' | 'home'>('about');
   const [showPreview, setShowPreview] = useState(true);
   const [previewDevice, setPreviewDevice] = useState<
@@ -178,9 +183,61 @@ export default function ContentManagementPage() {
 
   const handleReset = () => {
     if (activeTab === 'about' && originalAboutTranslations) {
+      // Reset page-level state
       setAboutTranslations({ ...originalAboutTranslations });
+
+      // Reset editor state to match the original data
+      const currentTranslation = originalAboutTranslations[currentLocale] || {};
+      let translation = currentTranslation;
+
+      // Ensure it's in dynamic format
+      if (!isDynamicFormat(translation)) {
+        translation = migrateAboutTranslationData(translation);
+      }
+
+      if (translation.sections) {
+        const content: PageContent = {
+          sections: translation.sections,
+          metadata: translation.metadata || {
+            version: '1.0.0',
+            lastModified: new Date().toISOString(),
+            author: 'admin',
+          },
+        };
+
+        // Reset the editor state completely - this clears undo/redo stacks
+        resetAboutEditor();
+        // Set the page content to original state
+        setAboutPageContent(content);
+      }
     } else if (activeTab === 'home' && originalHomeTranslations) {
+      // Reset page-level state for home tab
       setHomeTranslations({ ...originalHomeTranslations });
+
+      // Reset home editor state to match the original data
+      const currentTranslation = originalHomeTranslations[currentLocale] || {};
+      let translation = currentTranslation;
+
+      // Ensure it's in dynamic format
+      if (!isHomeDynamicFormat(translation)) {
+        translation = migrateHomeTranslationData(translation);
+      }
+
+      if (translation.sections) {
+        const content: PageContent = {
+          sections: translation.sections,
+          metadata: translation.metadata || {
+            version: '1.0.0',
+            lastModified: new Date().toISOString(),
+            author: 'admin',
+          },
+        };
+
+        // Reset the home editor state completely - this clears undo/redo stacks
+        resetHomeEditor();
+        // Set the page content to original state
+        setHomePageContent(content);
+      }
     }
   };
 
@@ -204,57 +261,6 @@ export default function ContentManagementPage() {
     setShowFullscreenPreview(false);
   };
 
-  interface AboutTranslationData {
-    title?: string;
-    subtitle?: string;
-    mission?: { description?: string };
-    values?: { items?: Array<{ title: string; description: string }> };
-    buttonText?: string;
-    copyright?: {
-      prefix?: string;
-      linkText?: string;
-      suffix?: string;
-    };
-  }
-
-  const transformToAboutPreviewConfig = (
-    translations: Record<SupportedLocale, AboutTranslationData> | null,
-    locale: SupportedLocale
-  ): AboutPageConfig | null => {
-    const t = translations?.[locale];
-    if (!t) return null;
-
-    return {
-      title: t.title || '',
-      subtitle: t.subtitle || '',
-      mission: t.mission?.description || '',
-      valueCards: (t.values?.items || []).map(
-        (item: { title: string; description: string }, index: number) => ({
-          id: `value-${index}`,
-          title: item.title,
-          description: item.description,
-        })
-      ),
-      buttonText: t.buttonText || '',
-      copyrightText: t.copyright
-        ? `${(t.copyright.prefix || '').replace('{year}', new Date().getFullYear().toString())}${t.copyright.linkText || ''}${t.copyright.suffix || ''}`
-        : '',
-    };
-  };
-
-  interface HomeTranslationData {
-    title?: string;
-    subtitle?: string;
-    getStarted?: string;
-    learnMore?: string;
-    features?: FeatureCard[];
-    copyright?: {
-      prefix?: string;
-      linkText?: string;
-      suffix?: string;
-    };
-  }
-
   const transformToHomePreviewConfig = (
     translations: Record<SupportedLocale, HomeTranslationData> | null,
     locale: SupportedLocale
@@ -278,10 +284,6 @@ export default function ContentManagementPage() {
     };
   };
 
-  const aboutPreviewConfig = transformToAboutPreviewConfig(
-    aboutTranslations,
-    currentLocale
-  );
   const homePreviewConfig = transformToHomePreviewConfig(
     homeTranslations,
     currentLocale
@@ -305,12 +307,33 @@ export default function ContentManagementPage() {
     }
 
     if (activeTab === 'home') {
-      return homeTranslations ? (
-        <HomeEditor
-          translations={homeTranslations}
+      // Convert HomeTranslationData to AboutTranslationData format for dynamic editing
+      const convertedHomeTranslations = homeTranslations
+        ? (Object.fromEntries(
+            Object.entries(homeTranslations).map(([locale, translation]) => [
+              locale,
+              isHomeDynamicFormat(translation)
+                ? translation
+                : migrateHomeTranslationData(translation),
+            ])
+          ) as Record<SupportedLocale, AboutTranslationData>)
+        : null;
+
+      return convertedHomeTranslations ? (
+        <AboutEditor
+          translations={convertedHomeTranslations}
           currentLocale={currentLocale}
           supportedLocales={supportedLocales}
-          onTranslationsChange={handleHomeTranslationsChange}
+          onTranslationsChange={newTranslations => {
+            // Convert back to HomeTranslationData format
+            const convertedBack = Object.fromEntries(
+              Object.entries(newTranslations).map(([locale, translation]) => [
+                locale,
+                translation as HomeTranslationData,
+              ])
+            ) as Record<SupportedLocale, HomeTranslationData>;
+            handleHomeTranslationsChange(convertedBack);
+          }}
           onLocaleChange={setCurrentLocale}
         />
       ) : (
@@ -322,9 +345,11 @@ export default function ContentManagementPage() {
 
   const renderPreview = () => {
     if (activeTab === 'about') {
-      return aboutPreviewConfig ? (
+      // Use the most up-to-date translation data that includes real-time edits
+      const currentTranslation = aboutTranslations?.[currentLocale];
+      return currentTranslation ? (
         <AboutPreview
-          config={aboutPreviewConfig}
+          translation={currentTranslation}
           previewDevice={previewDevice}
         />
       ) : (
@@ -332,8 +357,13 @@ export default function ContentManagementPage() {
       );
     }
     if (activeTab === 'home') {
-      return homePreviewConfig ? (
-        <HomePreview config={homePreviewConfig} previewDevice={previewDevice} />
+      // Use the most up-to-date home translation data that includes real-time edits
+      const currentHomeTranslation = homeTranslations?.[currentLocale];
+      return currentHomeTranslation ? (
+        <HomePreviewDynamic
+          translation={currentHomeTranslation}
+          previewDevice={previewDevice}
+        />
       ) : (
         <div>{t('loadingPreview')}</div>
       );
@@ -344,7 +374,7 @@ export default function ContentManagementPage() {
   return (
     <div
       className={cn(
-        'flex h-screen flex-col overflow-hidden',
+        'flex h-[calc(100vh-3rem)] flex-col overflow-hidden',
         isDark ? 'bg-stone-950' : 'bg-stone-100'
       )}
     >
@@ -409,7 +439,9 @@ export default function ContentManagementPage() {
                   isDark ? 'bg-stone-900' : 'bg-white'
                 )}
               >
-                <div className="flex-1 overflow-auto p-6">{renderEditor()}</div>
+                <div className="flex-1 overflow-auto px-6">
+                  {renderEditor()}
+                </div>
                 <div
                   className={cn(
                     'flex-shrink-0 p-4',
@@ -478,7 +510,7 @@ export default function ContentManagementPage() {
                   onPreviewToggle={() => setShowPreview(!showPreview)}
                   onFullscreenPreview={handleFullscreenPreview}
                 />
-                <div className="min-h-0 flex-1 overflow-auto">
+                <div className="min-h-0 flex-1 overflow-hidden">
                   {renderPreview()}
                 </div>
               </div>
@@ -487,68 +519,11 @@ export default function ContentManagementPage() {
         ) : (
           <div
             className={cn(
-              'relative flex-1',
+              'relative flex-1 overflow-hidden',
               isDark ? 'bg-stone-900' : 'bg-white'
             )}
           >
-            <div className="h-full overflow-auto p-6">{renderEditor()}</div>
-            <div
-              className={cn(
-                'absolute right-0 bottom-0 left-0 p-4',
-                isDark ? 'bg-stone-900/80' : 'bg-white/80',
-                'backdrop-blur-sm'
-              )}
-            >
-              <div className="flex items-center justify-between">
-                <div>
-                  {hasChanges && (
-                    <div
-                      className={cn(
-                        'flex items-center gap-2 text-sm',
-                        isDark ? 'text-stone-400' : 'text-stone-500'
-                      )}
-                    >
-                      <div className="h-2 w-2 rounded-full bg-orange-500" />
-                      <span>{t('saveActions.hasChanges')}</span>
-                    </div>
-                  )}
-                </div>
-                <div className="flex items-center gap-3">
-                  <button
-                    onClick={handleReset}
-                    disabled={!hasChanges || isSaving}
-                    className={cn(
-                      'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
-                      !hasChanges || isSaving
-                        ? 'cursor-not-allowed text-stone-500'
-                        : isDark
-                          ? 'text-stone-300 hover:bg-stone-800'
-                          : 'text-stone-600 hover:bg-stone-100'
-                    )}
-                  >
-                    {t('saveActions.reset')}
-                  </button>
-                  <button
-                    onClick={handleSave}
-                    disabled={!hasChanges || isSaving}
-                    className={cn(
-                      'rounded-lg px-6 py-2 text-sm font-medium shadow-sm transition-colors',
-                      !hasChanges || isSaving
-                        ? isDark
-                          ? 'cursor-not-allowed bg-stone-700 text-stone-400'
-                          : 'cursor-not-allowed bg-stone-300 text-stone-500'
-                        : isDark
-                          ? 'bg-stone-100 text-stone-900 hover:bg-white'
-                          : 'bg-stone-900 text-white hover:bg-stone-800'
-                    )}
-                  >
-                    {isSaving
-                      ? t('saveActions.saving_')
-                      : t('saveActions.save')}
-                  </button>
-                </div>
-              </div>
-            </div>
+            <div className="h-full overflow-auto px-6">{renderEditor()}</div>
           </div>
         )}
       </div>
@@ -577,7 +552,7 @@ export default function ContentManagementPage() {
                 >
                   {t('fullscreenPreview')} -
                   {activeTab === 'about'
-                    ? aboutPreviewConfig?.title
+                    ? aboutTranslations?.[currentLocale]?.title || 'About'
                     : homePreviewConfig?.title}
                 </span>
               </div>
diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index e86b5d45..26066ef0 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Badge } from '@components/ui/badge';
+import { Button } from '@components/ui/button';
 import {
   Select,
   SelectContent,
@@ -7,46 +9,40 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@components/ui/select';
+import { Separator } from '@components/ui/separator';
 import type { SupportedLocale } from '@lib/config/language-config';
 import { getLanguageInfo } from '@lib/config/language-config';
-import { useTheme } from '@lib/hooks/use-theme';
+import { useAboutEditorStore } from '@lib/stores/about-editor-store';
+import {
+  AboutTranslationData,
+  ComponentInstance,
+  PageContent,
+  isDynamicFormat,
+  migrateAboutTranslationData,
+} from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
-import { Plus, Trash2 } from 'lucide-react';
+import {
+  useDebouncedCallback,
+  useThrottledCallback,
+} from '@lib/utils/performance';
+import { Plus, Redo2, Trash2, Undo2 } from 'lucide-react';
 
-import React from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-interface ValueItem {
-  title: string;
-  description: string;
-}
-
-interface Copyright {
-  prefix?: string;
-  linkText?: string;
-  suffix?: string;
-}
-
-interface AboutTranslation {
-  title?: string;
-  subtitle?: string;
-  mission?: {
-    description?: string;
-  };
-  values?: {
-    items?: ValueItem[];
-  };
-  buttonText?: string;
-  copyright?: Copyright;
-}
+import ComponentPalette from './component-palette';
+import ComponentRenderer from './component-renderer';
+import { ContextMenu } from './context-menu';
+import { Droppable, Sortable, SortableContainer } from './dnd-components';
+import { DndContextWrapper } from './dnd-context';
 
 interface AboutEditorProps {
-  translations: Record<SupportedLocale, AboutTranslation>;
+  translations: Record<SupportedLocale, AboutTranslationData>;
   currentLocale: SupportedLocale;
   supportedLocales: SupportedLocale[];
   onTranslationsChange: (
-    newTranslations: Record<SupportedLocale, AboutTranslation>
+    newTranslations: Record<SupportedLocale, AboutTranslationData>
   ) => void;
   onLocaleChange: (newLocale: SupportedLocale) => void;
 }
@@ -58,359 +54,647 @@ export function AboutEditor({
   onTranslationsChange,
   onLocaleChange,
 }: AboutEditorProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.admin.content.editor');
-  const currentTranslation = translations[currentLocale] || {};
-
-  const handleFieldChange = (field: string, value: string | ValueItem[]) => {
-    const newTranslations = JSON.parse(JSON.stringify(translations)) as Record<
-      SupportedLocale,
-      AboutTranslation
-    >;
-    const fieldParts = field.split('.');
-    let current = newTranslations[currentLocale] as any;
-
-    for (let i = 0; i < fieldParts.length - 1; i++) {
-      if (!current[fieldParts[i]]) {
-        current[fieldParts[i]] = {};
+
+  // Context menu state
+  const [contextMenu, setContextMenu] = React.useState<{
+    x: number;
+    y: number;
+    componentId: string;
+  } | null>(null);
+
+  // Inline editing state
+  const [editingComponent, setEditingComponent] = React.useState<{
+    componentId: string;
+    content: string;
+  } | null>(null);
+
+  // Zustand store
+  const {
+    pageContent,
+    selectedComponentId,
+    undoStack,
+    redoStack,
+    isDirty,
+    setPageContent,
+    setSelectedComponent,
+    updateComponentProps,
+    deleteComponent,
+    deleteSection,
+    handleDragEnd,
+    addSection,
+    undo,
+    redo,
+    setCurrentLanguage,
+  } = useAboutEditorStore();
+
+  // Get current translation and ensure it's in dynamic format
+  const currentTranslation = useMemo(() => {
+    let translation = translations[currentLocale] || {};
+
+    // If it's not already in dynamic format, migrate it
+    if (!isDynamicFormat(translation)) {
+      translation = migrateAboutTranslationData(translation);
+    }
+
+    return translation;
+  }, [translations, currentLocale]);
+
+  // Get selected component from page content (currently unused but kept for future use)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const selectedComponent = useMemo(() => {
+    if (!pageContent || !selectedComponentId) return null;
+
+    for (const section of pageContent.sections) {
+      for (const column of section.columns) {
+        const component = column.find(comp => comp.id === selectedComponentId);
+        if (component) return component;
       }
-      current = current[fieldParts[i]];
     }
+    return null;
+  }, [pageContent, selectedComponentId]);
 
-    current[fieldParts[fieldParts.length - 1]] = value;
-    onTranslationsChange(newTranslations);
+  // Get context menu component (dynamically updated)
+  const contextMenuComponent = useMemo(() => {
+    if (!pageContent || !contextMenu?.componentId) return null;
+
+    for (const section of pageContent.sections) {
+      for (const column of section.columns) {
+        const component = column.find(
+          comp => comp.id === contextMenu.componentId
+        );
+        if (component) return component;
+      }
+    }
+    return null;
+  }, [pageContent, contextMenu?.componentId]);
+
+  // Initial load and locale change handling
+  useEffect(() => {
+    if (currentTranslation.sections) {
+      const content: PageContent = {
+        sections: currentTranslation.sections,
+        metadata: currentTranslation.metadata || {
+          version: '1.0.0',
+          lastModified: new Date().toISOString(),
+          author: 'admin',
+        },
+      };
+      setPageContent(content);
+    }
+    setCurrentLanguage(currentLocale);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentLocale, setPageContent, setCurrentLanguage]); // Only reload on locale change, not on translation data updates
+
+  // Debounced auto-save function
+  const debouncedSave = useDebouncedCallback(
+    useCallback(() => {
+      if (!pageContent) return;
+
+      const updatedTranslation: AboutTranslationData = {
+        sections: pageContent.sections,
+        metadata: {
+          ...pageContent.metadata,
+          lastModified: new Date().toISOString(),
+        },
+      };
+
+      const newTranslations = {
+        ...translations,
+        [currentLocale]: updatedTranslation,
+      };
+
+      onTranslationsChange(newTranslations);
+    }, [pageContent, translations, currentLocale, onTranslationsChange]),
+    100, // 100ms delay for near real-time sync
+    [pageContent, translations, currentLocale]
+  );
+
+  // Auto-save when pageContent changes
+  useEffect(() => {
+    if (pageContent) {
+      debouncedSave();
+    }
+  }, [pageContent, debouncedSave]);
+
+  // Throttled property change handler for better performance
+  const throttledPropsChange = useThrottledCallback(
+    useCallback(
+      (newProps: Record<string, unknown>) => {
+        if (selectedComponentId) {
+          updateComponentProps(selectedComponentId, newProps);
+          debouncedSave(); // Auto-save after prop changes
+        }
+      },
+      [selectedComponentId, updateComponentProps, debouncedSave]
+    ),
+    100, // 100ms throttle
+    [selectedComponentId, updateComponentProps]
+  );
+
+  // Handle property changes (currently unused but kept for future use)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const handlePropsChange = throttledPropsChange;
+
+  // Handle component deletion
+  const handleDeleteComponent = (componentId: string) => {
+    deleteComponent(componentId);
+    setContextMenu(null);
   };
 
-  const handleValueCardChange = (
-    index: number,
-    field: 'title' | 'description',
-    value: string
-  ) => {
-    const newItems = [...(currentTranslation.values?.items || [])];
-    newItems[index] = { ...newItems[index], [field]: value };
-    handleFieldChange('values.items', newItems);
+  // Handle component selection
+  const handleComponentClick = (componentId: string) => {
+    setSelectedComponent(componentId);
+    // Focus the main container so keyboard events work
+    const container = document.querySelector('[tabindex="0"]') as HTMLElement;
+    if (container) {
+      container.focus();
+    }
   };
 
-  const addValueCard = () => {
-    const newItems = [
-      ...(currentTranslation.values?.items || []),
-      { title: '', description: '' },
-    ];
-    handleFieldChange('values.items', newItems);
+  // Handle right-click context menu
+  const handleContextMenu = (e: React.MouseEvent, componentId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Find the component
+    let targetComponent: ComponentInstance | null = null;
+    for (const section of pageContent?.sections || []) {
+      for (const column of section.columns) {
+        const component = column.find(comp => comp.id === componentId);
+        if (component) {
+          targetComponent = component;
+          break;
+        }
+      }
+      if (targetComponent) break;
+    }
+
+    if (targetComponent) {
+      setSelectedComponent(componentId); // Set as selected when right-clicking
+      setContextMenu({
+        x: e.clientX,
+        y: e.clientY,
+        componentId: componentId,
+      });
+      // Focus the main container so keyboard events work
+      const container = document.querySelector('[tabindex="0"]') as HTMLElement;
+      if (container) {
+        container.focus();
+      }
+    }
   };
 
-  const removeValueCard = (index: number) => {
-    const newItems = (currentTranslation.values?.items || []).filter(
-      (_: ValueItem, i: number) => i !== index
-    );
-    handleFieldChange('values.items', newItems);
+  // Handle context menu props change
+  const handleContextMenuPropsChange = (newProps: Record<string, unknown>) => {
+    if (contextMenu?.componentId) {
+      updateComponentProps(contextMenu.componentId, newProps);
+      debouncedSave(); // Auto-save after prop changes
+    }
   };
 
-  return (
-    <div className="space-y-6">
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('common.editLanguage')}
-        </label>
-        <Select
-          value={currentLocale}
-          onValueChange={value => onLocaleChange(value as SupportedLocale)}
-        >
-          <SelectTrigger
-            className={cn(
-              'w-full transition-all duration-200 focus:ring-2 focus:ring-offset-2',
-              isDark
-                ? 'border-stone-600 bg-stone-800 text-stone-100 hover:border-stone-500 hover:bg-stone-700 focus:ring-stone-400'
-                : 'border-stone-300 bg-white text-stone-900 hover:border-stone-400 hover:bg-stone-50 focus:ring-stone-500'
-            )}
-          >
-            <SelectValue>
-              <div className="flex items-center gap-2">
-                <span className="text-xs opacity-60">
-                  {getLanguageInfo(currentLocale).code}
-                </span>
-                <span className="font-medium">
-                  {getLanguageInfo(currentLocale).nativeName}
-                </span>
-              </div>
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent
-            className={cn(
-              'border shadow-lg',
-              isDark
-                ? 'border-stone-600 bg-stone-800'
-                : 'border-stone-200 bg-white'
-            )}
-          >
-            {supportedLocales.map(locale => {
-              const langInfo = getLanguageInfo(locale);
-              return (
-                <SelectItem
-                  key={locale}
-                  value={locale}
-                  className={cn(
-                    'cursor-pointer transition-colors',
-                    isDark
-                      ? 'hover:bg-stone-700 focus:bg-stone-700'
-                      : 'hover:bg-stone-100 focus:bg-stone-100'
-                  )}
-                >
-                  <div className="flex w-full items-center justify-between">
-                    <span className="font-medium">{langInfo.nativeName}</span>
-                    <span className="ml-2 text-xs opacity-60">
-                      {langInfo.code}
-                    </span>
-                  </div>
-                </SelectItem>
-              );
-            })}
-          </SelectContent>
-        </Select>
-      </div>
+  // Handle keyboard shortcuts
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Delete' && selectedComponentId) {
+      e.preventDefault();
+      handleDeleteComponent(selectedComponentId);
+    }
+    if (e.key === 'Escape' && editingComponent) {
+      e.preventDefault();
+      setEditingComponent(null);
+    }
+  };
 
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.pageTitle')}
-        </label>
-        <input
-          type="text"
-          value={currentTranslation.title || ''}
-          onChange={e => handleFieldChange('title', e.target.value)}
-          className={cn(
-            'w-full rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
-          )}
-        />
-      </div>
+  // Handle double-click to edit content
+  const handleDoubleClick = (componentId: string) => {
+    // Find the component
+    let targetComponent: ComponentInstance | null = null;
+    for (const section of pageContent?.sections || []) {
+      for (const column of section.columns) {
+        const component = column.find(comp => comp.id === componentId);
+        if (component) {
+          targetComponent = component;
+          break;
+        }
+      }
+      if (targetComponent) break;
+    }
 
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.subtitle')}
-        </label>
-        <input
-          type="text"
-          value={currentTranslation.subtitle || ''}
-          onChange={e => handleFieldChange('subtitle', e.target.value)}
-          className={cn(
-            'w-full rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
-          )}
-        />
+    if (targetComponent && targetComponent.props.content) {
+      setEditingComponent({
+        componentId,
+        content: String(targetComponent.props.content || ''),
+      });
+    }
+  };
+
+  // Handle saving inline edit
+  const handleSaveEdit = () => {
+    if (editingComponent) {
+      updateComponentProps(editingComponent.componentId, {
+        content: editingComponent.content,
+      });
+      setEditingComponent(null);
+      debouncedSave();
+    }
+  };
+
+  // Handle input change during editing
+  const handleEditInputChange = (value: string) => {
+    if (editingComponent) {
+      setEditingComponent({
+        ...editingComponent,
+        content: value,
+      });
+    }
+  };
+
+  // Global context menu handler as fallback - finds component under cursor
+  const handleGlobalContextMenu = (e: React.MouseEvent) => {
+    // Only handle if no specific component context menu was triggered
+    if (contextMenu) return;
+
+    // Find the closest component element
+    const target = e.target as HTMLElement;
+    const componentElement = target.closest(
+      '[data-component-id]'
+    ) as HTMLElement;
+
+    if (componentElement) {
+      const componentId = componentElement.getAttribute('data-component-id');
+      if (componentId) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleContextMenu(e, componentId);
+      }
+    }
+  };
+
+  if (!pageContent) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-muted-foreground">Loading editor...</p>
       </div>
+    );
+  }
 
-      <div>
-        <label
+  return (
+    <DndContextWrapper onDragEnd={handleDragEnd}>
+      <div
+        className="flex h-full flex-col focus:outline-none"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+      >
+        {/* Header */}
+        <div
           className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
+            'space-y-4 border-b p-4',
+            'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
           )}
         >
-          {t('about.mission')}
-        </label>
-        <textarea
-          value={currentTranslation.mission?.description || ''}
-          onChange={e =>
-            handleFieldChange('mission.description', e.target.value)
-          }
-          rows={4}
-          className={cn(
-            'w-full resize-none rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
-          )}
-        />
-      </div>
+          {/* Language Selector */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <label className="text-sm font-medium">
+                {t('common.editLanguage')}
+              </label>
+              <Select
+                value={currentLocale}
+                onValueChange={value =>
+                  onLocaleChange(value as SupportedLocale)
+                }
+              >
+                <SelectTrigger className="w-64">
+                  <SelectValue>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs opacity-60">
+                        {getLanguageInfo(currentLocale).code}
+                      </span>
+                      <span className="font-medium">
+                        {getLanguageInfo(currentLocale).nativeName}
+                      </span>
+                    </div>
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {supportedLocales.map(locale => {
+                    const langInfo = getLanguageInfo(locale);
+                    return (
+                      <SelectItem key={locale} value={locale}>
+                        <div className="flex w-full items-center justify-between">
+                          <span className="font-medium">
+                            {langInfo.nativeName}
+                          </span>
+                          <span className="ml-2 text-xs opacity-60">
+                            {langInfo.code}
+                          </span>
+                        </div>
+                      </SelectItem>
+                    );
+                  })}
+                </SelectContent>
+              </Select>
+            </div>
 
-      <div>
-        <div className="mb-3 flex items-center justify-between">
-          <label
-            className={cn(
-              'block text-sm font-medium',
-              isDark ? 'text-stone-300' : 'text-stone-700'
-            )}
-          >
-            {t('about.values')}
-          </label>
-          <button
-            onClick={addValueCard}
+            {/* Status Badges */}
+            <div className="flex items-center gap-2">
+              {isDirty && <Badge variant="secondary">Unsaved</Badge>}
+              <Badge variant="outline">
+                {pageContent.sections.length} sections
+              </Badge>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={undo}
+                disabled={undoStack.length === 0}
+              >
+                <Undo2 className="mr-2 h-4 w-4" />
+                Undo
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={redo}
+                disabled={redoStack.length === 0}
+              >
+                <Redo2 className="mr-2 h-4 w-4" />
+                Redo
+              </Button>
+              <Separator orientation="vertical" className="h-8" />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => addSection('single-column')}
+              >
+                <Plus className="mr-2 h-4 w-4" />
+                Add Section
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex min-h-0 flex-1">
+          {/* Left Panel - Component Palette */}
+          <div
             className={cn(
-              'rounded p-1 transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-300 hover:bg-stone-600'
-                : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
+              'w-64 overflow-x-hidden overflow-y-auto border-r p-4',
+              'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-900'
             )}
           >
-            <Plus className="h-4 w-4" />
-          </button>
-        </div>
+            <ComponentPalette />
+          </div>
 
-        <div className="space-y-4">
-          {(currentTranslation.values?.items || []).map(
-            (card: ValueItem, index: number) => (
-              <div
-                key={index}
-                className={cn(
-                  'rounded-lg border p-4',
-                  isDark ? 'border-stone-600' : 'border-stone-200'
-                )}
-              >
-                <div className="flex items-center justify-between">
-                  <p
-                    className={cn(
-                      'text-sm font-medium',
-                      isDark ? 'text-stone-300' : 'text-stone-700'
-                    )}
-                  >
-                    {t('common.cardNumber', { number: index + 1 })}
-                  </p>
-                  <button
-                    onClick={() => removeValueCard(index)}
+          {/* Canvas */}
+          <div className="flex-1 overflow-y-auto">
+            <div
+              className="space-y-6 p-6"
+              onContextMenu={handleGlobalContextMenu}
+            >
+              {pageContent.sections.map((section, sectionIndex) => (
+                <div key={section.id} className="space-y-4">
+                  {/* Section Drop Zone (before each section) */}
+                  {sectionIndex > 0 && (
+                    <Droppable
+                      id={`section-drop-${sectionIndex}`}
+                      className="h-2 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-stone-400 hover:bg-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-800"
+                    >
+                      {(isOver: boolean) => (
+                        <div
+                          className={cn(
+                            'flex h-full items-center justify-center text-sm font-medium text-stone-600 transition-opacity duration-200 dark:text-stone-400',
+                            isOver || undefined
+                              ? 'opacity-100'
+                              : 'opacity-0 hover:opacity-100'
+                          )}
+                        >
+                          Drop here to create new section
+                        </div>
+                      )}
+                    </Droppable>
+                  )}
+
+                  {/* Section Content */}
+                  <div
                     className={cn(
-                      'rounded p-1 text-red-500 transition-colors',
-                      isDark ? 'hover:bg-red-900/50' : 'hover:bg-red-100'
+                      'rounded-lg border p-4',
+                      'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
                     )}
                   >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
+                    <div className="pb-3">
+                      <div className="flex items-center justify-between">
+                        <h3
+                          className={cn(
+                            'text-sm font-medium',
+                            'text-stone-600 dark:text-stone-400'
+                          )}
+                        >
+                          Section {sectionIndex + 1} • {section.layout}
+                        </h3>
+                        <button
+                          onClick={() => {
+                            deleteSection(section.id);
+                          }}
+                          className={cn(
+                            'flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors',
+                            'hover:bg-red-100 dark:hover:bg-red-900/50'
+                          )}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      className={cn(
+                        'grid gap-4',
+                        section.layout === 'single-column' && 'grid-cols-1',
+                        section.layout === 'two-column' && 'grid-cols-2',
+                        section.layout === 'three-column' && 'grid-cols-3'
+                      )}
+                    >
+                      {section.columns.map((column, columnIndex) => {
+                        const columnItems = column.map(comp => comp.id);
+                        return (
+                          <SortableContainer
+                            key={`${section.id}-${columnIndex}`}
+                            id={`section-${section.id}-${columnIndex}`}
+                            items={columnItems}
+                            className={cn(
+                              'min-h-24 rounded-md border-2 border-dashed p-3 transition-all duration-200',
+                              'border-stone-300 bg-stone-50 hover:border-stone-400 hover:bg-stone-100',
+                              'dark:border-stone-600 dark:bg-stone-700/50 dark:hover:border-stone-500 dark:hover:bg-stone-600/50'
+                            )}
+                          >
+                            {column.length === 0 && (
+                              <div
+                                className={cn(
+                                  'flex h-16 items-center justify-center text-sm',
+                                  'text-stone-500 dark:text-stone-400'
+                                )}
+                              >
+                                Drop components here
+                              </div>
+                            )}
+
+                            {column.map(component => {
+                              const componentPreview = (
+                                <div
+                                  className={cn(
+                                    'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                    'border-stone-200 bg-white dark:border-stone-600 dark:bg-stone-800'
+                                  )}
+                                >
+                                  <ComponentRenderer component={component} />
+                                </div>
+                              );
+
+                              return (
+                                <Sortable
+                                  key={component.id}
+                                  id={component.id}
+                                  preview={componentPreview}
+                                  className={cn(
+                                    'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                    selectedComponentId === component.id
+                                      ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
+                                      : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
+                                  )}
+                                  onClick={() =>
+                                    handleComponentClick(component.id)
+                                  }
+                                  onDoubleClick={() =>
+                                    handleDoubleClick(component.id)
+                                  }
+                                  onContextMenu={e =>
+                                    handleContextMenu(e, component.id)
+                                  }
+                                  data-component-id={component.id}
+                                >
+                                  {editingComponent?.componentId ===
+                                  component.id ? (
+                                    <div
+                                      className="space-y-2"
+                                      onClick={e => {
+                                        // Prevent event bubbling to parent Sortable component
+                                        e.stopPropagation();
+                                      }}
+                                      onMouseDown={e => {
+                                        // Prevent event bubbling to parent Sortable component
+                                        e.stopPropagation();
+                                      }}
+                                    >
+                                      <textarea
+                                        value={editingComponent.content}
+                                        onChange={e =>
+                                          handleEditInputChange(e.target.value)
+                                        }
+                                        onClick={e => {
+                                          // Prevent event bubbling when clicking inside textarea
+                                          e.stopPropagation();
+                                        }}
+                                        onMouseDown={e => {
+                                          // Prevent event bubbling when mouse down in textarea
+                                          e.stopPropagation();
+                                        }}
+                                        onKeyDown={e => {
+                                          if (e.key === 'Enter' && e.ctrlKey) {
+                                            e.preventDefault();
+                                            handleSaveEdit();
+                                          }
+                                          if (e.key === 'Escape') {
+                                            e.preventDefault();
+                                            setEditingComponent(null);
+                                          }
+                                          e.stopPropagation(); // Prevent parent keyboard handlers
+                                        }}
+                                        className="resize-vertical min-h-[60px] w-full rounded border p-2 text-sm focus:ring-2 focus:ring-stone-500 focus:outline-none"
+                                        placeholder="Enter content..."
+                                        autoFocus
+                                        onBlur={e => {
+                                          // Only auto-save if focus is truly leaving the editing area
+                                          // Check if focus is moving to another element outside the editing container
+                                          const relatedTarget =
+                                            e.relatedTarget as HTMLElement;
+                                          const editContainer =
+                                            e.currentTarget.closest(
+                                              '.space-y-2'
+                                            );
+
+                                          if (
+                                            !relatedTarget ||
+                                            !editContainer?.contains(
+                                              relatedTarget
+                                            )
+                                          ) {
+                                            // Auto-save on blur if there are changes and focus truly left
+                                            setTimeout(() => {
+                                              if (editingComponent) {
+                                                handleSaveEdit();
+                                              }
+                                            }, 100);
+                                          }
+                                        }}
+                                      />
+                                      <div className="text-muted-foreground flex gap-2 text-xs">
+                                        <span>
+                                          Ctrl+Enter to save • Escape to cancel
+                                        </span>
+                                      </div>
+                                    </div>
+                                  ) : (
+                                    <ComponentRenderer component={component} />
+                                  )}
+                                </Sortable>
+                              );
+                            })}
+                          </SortableContainer>
+                        );
+                      })}
+                    </div>
+                  </div>
                 </div>
+              ))}
 
-                <div className="mt-4 space-y-3">
-                  <input
-                    type="text"
-                    placeholder={t('about.valueTitle')}
-                    value={card.title}
-                    onChange={e =>
-                      handleValueCardChange(index, 'title', e.target.value)
-                    }
-                    className={cn(
-                      'w-full rounded-md border px-3 py-1.5 text-sm',
-                      isDark
-                        ? 'border-stone-500 bg-stone-600 text-stone-100'
-                        : 'border-stone-300 bg-white text-stone-900'
-                    )}
-                  />
-                  <textarea
-                    placeholder={t('about.valueDescription')}
-                    value={card.description}
-                    onChange={e =>
-                      handleValueCardChange(
-                        index,
-                        'description',
-                        e.target.value
-                      )
-                    }
-                    rows={3}
+              {/* Final Drop Zone */}
+              <Droppable
+                id="section-drop-final"
+                className="h-8 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-stone-400 hover:bg-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-800"
+              >
+                {(isOver: boolean) => (
+                  <div
                     className={cn(
-                      'w-full resize-none rounded-md border px-3 py-1.5 text-sm',
-                      isDark
-                        ? 'border-stone-500 bg-stone-600 text-stone-100'
-                        : 'border-stone-300 bg-white text-stone-900'
+                      'flex h-full items-center justify-center text-sm font-medium text-stone-600 transition-opacity duration-200 dark:text-stone-400',
+                      isOver || undefined
+                        ? 'opacity-100'
+                        : 'opacity-0 hover:opacity-100'
                     )}
-                  />
-                </div>
-              </div>
-            )
-          )}
+                  >
+                    Drop here to create new section
+                  </div>
+                )}
+              </Droppable>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.buttonText')}
-        </label>
-        <input
-          type="text"
-          value={currentTranslation.buttonText || ''}
-          onChange={e => handleFieldChange('buttonText', e.target.value)}
-          className={cn(
-            'w-full rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
-          )}
+      {/* Context Menu */}
+      {contextMenu && contextMenuComponent && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          component={contextMenuComponent}
+          onPropsChange={handleContextMenuPropsChange}
+          onDelete={handleDeleteComponent}
+          onClose={() => setContextMenu(null)}
         />
-      </div>
-
-      <div>
-        <label
-          className={cn(
-            'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
-          )}
-        >
-          {t('about.copyright')}
-        </label>
-        <div className="space-y-3">
-          <input
-            type="text"
-            placeholder={t('about.copyrightPrefix')}
-            value={currentTranslation.copyright?.prefix || ''}
-            onChange={e =>
-              handleFieldChange('copyright.prefix', e.target.value)
-            }
-            className={cn(
-              'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
-            )}
-          />
-          <input
-            type="text"
-            placeholder={t('about.copyrightLinkText')}
-            value={currentTranslation.copyright?.linkText || ''}
-            onChange={e =>
-              handleFieldChange('copyright.linkText', e.target.value)
-            }
-            className={cn(
-              'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
-            )}
-          />
-          <input
-            type="text"
-            placeholder={t('about.copyrightSuffix')}
-            value={currentTranslation.copyright?.suffix || ''}
-            onChange={e =>
-              handleFieldChange('copyright.suffix', e.target.value)
-            }
-            className={cn(
-              'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
-            )}
-          />
-        </div>
-      </div>
-    </div>
+      )}
+    </DndContextWrapper>
   );
 }
diff --git a/components/admin/content/about-preview.tsx b/components/admin/content/about-preview.tsx
index 932ec01d..a179e602 100644
--- a/components/admin/content/about-preview.tsx
+++ b/components/admin/content/about-preview.tsx
@@ -1,67 +1,83 @@
 'use client';
 
 import { useTheme } from '@lib/hooks/use-theme';
+import {
+  AboutTranslationData,
+  PageContent,
+  isDynamicFormat,
+  migrateAboutTranslationData,
+} from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
+import { AnimatePresence, motion } from 'framer-motion';
 
 import React from 'react';
 
-export interface ValueCard {
-  id: string;
-  title: string;
-  description: string;
-}
-
-export interface AboutPageConfig {
-  title: string;
-  subtitle: string;
-  mission: string;
-  valueCards: ValueCard[];
-  buttonText: string;
-  copyrightText: string;
-}
+import ComponentRenderer from './component-renderer';
 
 interface AboutPreviewProps {
-  config: AboutPageConfig;
+  /**
+   * Translation data for the about page
+   * Can be either legacy or dynamic format
+   */
+  translation: AboutTranslationData;
+  /**
+   * Preview device type for responsive preview
+   */
   previewDevice: 'desktop' | 'tablet' | 'mobile';
 }
 
-export function AboutPreview({ config, previewDevice }: AboutPreviewProps) {
+/**
+ * About Page Preview Component
+ *
+ * Displays a preview of the about page with homepage-style visual effects
+ * Unified styling with stone color system, animations, and shadows
+ */
+export function AboutPreview({
+  translation,
+  previewDevice,
+}: AboutPreviewProps) {
   const { isDark } = useTheme();
 
+  // Ensure translation is in dynamic format
+  const dynamicTranslation = React.useMemo(() => {
+    if (!isDynamicFormat(translation)) {
+      return migrateAboutTranslationData(translation);
+    }
+    return translation;
+  }, [translation]);
+
+  // Create page content from translation
+  const pageContent: PageContent = React.useMemo(() => {
+    return {
+      sections: dynamicTranslation.sections || [],
+      metadata: dynamicTranslation.metadata || {
+        version: '1.0.0',
+        lastModified: new Date().toISOString(),
+        author: 'preview',
+      },
+    };
+  }, [dynamicTranslation]);
+
+  // Get homepage-style colors
   const getColors = () => {
     if (isDark) {
       return {
-        titleGradient: 'from-stone-300 to-stone-500',
+        bgColor: '#1c1917',
         textColor: 'text-gray-300',
-        headingColor: 'text-gray-100',
-        paragraphColor: 'text-gray-400',
-        cardBg: 'bg-stone-700',
-        cardBorder: 'border-stone-600',
-        cardShadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.3)]',
-        cardHeadingColor: 'text-stone-300',
-        cardTextColor: 'text-gray-400',
-        buttonClass:
-          'bg-stone-600 hover:bg-stone-500 text-gray-100 cursor-pointer hover:scale-105',
       };
     } else {
       return {
-        titleGradient: 'from-stone-700 to-stone-900',
+        bgColor: '#f5f5f4',
         textColor: 'text-stone-700',
-        headingColor: 'text-stone-800',
-        paragraphColor: 'text-stone-600',
-        cardBg: 'bg-stone-100',
-        cardBorder: 'border-stone-200',
-        cardShadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.1)]',
-        cardHeadingColor: 'text-stone-700',
-        cardTextColor: 'text-stone-600',
-        buttonClass:
-          'bg-stone-800 hover:bg-stone-700 text-gray-100 cursor-pointer hover:scale-105',
       };
     }
   };
 
   const colors = getColors();
 
+  /**
+   * Get device-specific container styles with homepage styling
+   */
   const getDeviceStyles = () => {
     switch (previewDevice) {
       case 'mobile':
@@ -70,8 +86,7 @@ export function AboutPreview({ config, previewDevice }: AboutPreviewProps) {
           screen:
             'w-[375px] h-[667px] bg-white rounded-[1.75rem] overflow-hidden relative',
           content: 'h-full overflow-y-auto',
-          mainClass: 'min-h-full w-full py-4 px-4',
-          innerContainer: 'w-full',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
         };
       case 'tablet':
         return {
@@ -79,8 +94,7 @@ export function AboutPreview({ config, previewDevice }: AboutPreviewProps) {
           screen:
             'w-[768px] h-[1024px] bg-white rounded-lg overflow-hidden relative',
           content: 'h-full overflow-y-auto',
-          mainClass: 'min-h-full w-full py-6 px-6',
-          innerContainer: 'max-w-2xl mx-auto',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
         };
       case 'desktop':
       default:
@@ -88,206 +102,164 @@ export function AboutPreview({ config, previewDevice }: AboutPreviewProps) {
           container: 'w-full h-full',
           screen: 'w-full h-full overflow-hidden relative',
           content: 'h-full overflow-y-auto',
-          mainClass:
-            'min-h-screen w-full py-6 px-4 sm:px-6 lg:px-8 overflow-x-hidden',
-          innerContainer: 'max-w-5xl mx-auto',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
         };
     }
   };
 
   const deviceStyles = getDeviceStyles();
 
-  const getResponsiveClasses = () => {
-    switch (previewDevice) {
-      case 'mobile':
-        return {
-          title: 'text-3xl font-bold mb-4 leading-tight py-1',
-          subtitle: 'text-base font-light',
-          missionTitle: 'text-xl font-bold mb-4',
-          missionContent: 'text-sm',
-          valuesTitle: 'text-xl font-bold mb-4',
-          cardTitle: 'text-base font-semibold mb-2',
-          cardContent: 'text-sm',
-          button: 'px-6 py-2 text-sm font-medium rounded-lg',
-          copyright: 'text-xs',
-          spacing: {
-            section: 'mb-6',
-            missionPadding: 'p-4',
-            cardPadding: 'p-4',
-            cardGap: 'gap-4',
-          },
-        };
-      case 'tablet':
-        return {
-          title: 'text-4xl md:text-4xl font-bold mb-4 leading-tight py-1',
-          subtitle: 'text-lg font-light',
-          missionTitle: 'text-2xl font-bold mb-4',
-          missionContent: 'text-base',
-          valuesTitle: 'text-2xl font-bold mb-4',
-          cardTitle: 'text-lg font-semibold mb-2',
-          cardContent: 'text-sm',
-          button: 'px-6 py-2.5 text-base font-medium rounded-lg',
-          copyright: 'text-sm',
-          spacing: {
-            section: 'mb-8',
-            missionPadding: 'p-6',
-            cardPadding: 'p-5',
-            cardGap: 'gap-5',
-          },
-        };
-      case 'desktop':
-      default:
-        return {
-          title: 'text-4xl md:text-5xl font-bold mb-6 leading-tight py-2',
-          subtitle: 'text-xl font-light',
-          missionTitle: 'text-2xl font-bold mb-6',
-          missionContent: 'text-lg',
-          valuesTitle: 'text-2xl font-bold mb-6',
-          cardTitle: 'text-lg font-semibold mb-2',
-          cardContent: '',
-          button: 'px-8 py-3 text-base font-medium rounded-lg',
-          copyright: 'text-sm',
-          spacing: {
-            section: 'mb-10',
-            missionPadding: '',
-            cardPadding: 'p-6',
-            cardGap: 'gap-6',
-          },
-        };
+  /**
+   * Render page sections with homepage-style animations and layout
+   */
+  const renderSections = () => {
+    if (!pageContent.sections || pageContent.sections.length === 0) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className={cn(
+            'flex h-64 items-center justify-center',
+            colors.textColor
+          )}
+        >
+          <p>No content to preview</p>
+        </motion.div>
+      );
     }
-  };
 
-  const responsive = getResponsiveClasses();
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        className="mx-auto max-w-5xl space-y-16"
+      >
+        {pageContent.sections.map((section, sectionIndex) => (
+          <motion.section
+            key={section.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              duration: 0.6,
+              delay: 0.1 + sectionIndex * 0.1,
+            }}
+            className="w-full"
+          >
+            <div
+              className={cn(
+                'gap-8',
+                section.layout === 'single-column' && 'space-y-8',
+                section.layout === 'two-column' &&
+                  'grid grid-cols-1 md:grid-cols-2',
+                section.layout === 'three-column' &&
+                  'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+              )}
+            >
+              {section.columns.map((column, columnIndex) => (
+                <div key={columnIndex} className="space-y-8">
+                  {column.map((component, componentIndex) => (
+                    <motion.div
+                      key={component.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{
+                        duration: 0.5,
+                        delay: 0.2 + sectionIndex * 0.1 + componentIndex * 0.05,
+                      }}
+                    >
+                      <ComponentRenderer
+                        component={component}
+                        sectionCommonProps={section.commonProps}
+                      />
+                    </motion.div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </motion.section>
+        ))}
+      </motion.div>
+    );
+  };
 
   return (
     <div
       className={cn(
-        'flex h-full items-center justify-center',
+        'flex h-full w-full items-center justify-center',
         previewDevice !== 'desktop' && 'p-4'
       )}
     >
       <div className={deviceStyles.container}>
         <div
-          className={cn(
-            deviceStyles.screen,
-            previewDevice === 'desktop'
-              ? isDark
-                ? 'bg-stone-900'
-                : 'bg-stone-50'
-              : isDark
-                ? 'bg-stone-800'
-                : 'bg-white'
-          )}
+          className={cn(deviceStyles.screen)}
+          style={{ backgroundColor: colors.bgColor }}
         >
           <div className={deviceStyles.content}>
-            <main className={deviceStyles.mainClass}>
-              <div className={deviceStyles.innerContainer}>
-                <section
-                  className={cn('text-center', responsive.spacing.section)}
-                >
-                  <h1
-                    className={cn(
-                      responsive.title,
-                      `bg-gradient-to-r ${colors.titleGradient} bg-clip-text text-transparent`
-                    )}
-                  >
-                    {config.title}
-                  </h1>
-                  <p
-                    className={cn(
-                      responsive.subtitle,
-                      colors.textColor,
-                      'mx-auto max-w-3xl'
-                    )}
-                  >
-                    {config.subtitle}
-                  </p>
-                </section>
-
-                <section className={responsive.spacing.section}>
-                  <p
-                    className={cn(
-                      responsive.missionContent,
-                      colors.paragraphColor
-                    )}
-                  >
-                    {config.mission}
-                  </p>
-                </section>
-
-                <section className={responsive.spacing.section}>
-                  <div
-                    className={cn(
-                      'grid',
-                      previewDevice === 'mobile'
-                        ? 'grid-cols-1'
-                        : previewDevice === 'tablet'
-                          ? 'grid-cols-1 sm:grid-cols-2'
-                          : 'grid-cols-1 md:grid-cols-2',
-                      responsive.spacing.cardGap
-                    )}
-                  >
-                    {config.valueCards.map(value => (
-                      <div
-                        key={value.id}
-                        className={cn(
-                          colors.cardBg,
-                          colors.cardShadow,
-                          'border',
-                          colors.cardBorder,
-                          'rounded-xl',
-                          responsive.spacing.cardPadding
-                        )}
-                      >
-                        <h3
-                          className={cn(
-                            responsive.cardTitle,
-                            colors.cardHeadingColor
-                          )}
-                        >
-                          {value.title}
-                        </h3>
-                        <p
-                          className={cn(
-                            responsive.cardContent,
-                            colors.cardTextColor
-                          )}
-                        >
-                          {value.description}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </section>
-
-                <section
-                  className={cn('text-center', responsive.spacing.section)}
-                >
-                  <button
-                    className={cn(
-                      responsive.button,
-                      colors.buttonClass,
-                      'h-auto transition-all duration-200'
-                    )}
-                  >
-                    {config.buttonText}
-                  </button>
-                </section>
-
-                <div
-                  className={cn(
-                    'text-center',
-                    colors.textColor,
-                    responsive.copyright
-                  )}
-                >
-                  <p>{config.copyrightText}</p>
-                </div>
-              </div>
-            </main>
+            <AnimatePresence>
+              <main className={deviceStyles.mainClass}>{renderSections()}</main>
+            </AnimatePresence>
           </div>
         </div>
       </div>
     </div>
   );
 }
+
+/**
+ * Legacy interface for backward compatibility
+ * This is for existing components that still use the old preview format
+ */
+export interface ValueCard {
+  id: string;
+  title: string;
+  description: string;
+}
+
+export interface AboutPageConfig {
+  title: string;
+  subtitle: string;
+  mission: string;
+  valueCards: ValueCard[];
+  buttonText: string;
+  copyrightText: string;
+}
+
+/**
+ * Legacy preview component for backward compatibility
+ * @deprecated Use AboutPreview with dynamic translation data instead
+ */
+export function LegacyAboutPreview({
+  config,
+  previewDevice,
+}: {
+  config: AboutPageConfig;
+  previewDevice: 'desktop' | 'tablet' | 'mobile';
+}) {
+  // Convert legacy config to new format
+  const legacyTranslation: AboutTranslationData = {
+    title: config.title,
+    subtitle: config.subtitle,
+    mission: { description: config.mission },
+    values: {
+      items: config.valueCards.map(card => ({
+        title: card.title,
+        description: card.description,
+      })),
+    },
+    buttonText: config.buttonText,
+    copyright: {
+      prefix: config.copyrightText,
+      linkText: '',
+      suffix: '',
+    },
+  };
+
+  return (
+    <AboutPreview
+      translation={legacyTranslation}
+      previewDevice={previewDevice}
+    />
+  );
+}
diff --git a/components/admin/content/component-palette.tsx b/components/admin/content/component-palette.tsx
new file mode 100644
index 00000000..4ca70535
--- /dev/null
+++ b/components/admin/content/component-palette.tsx
@@ -0,0 +1,246 @@
+'use client';
+
+import { ComponentType } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import {
+  AlignLeft,
+  Grid3x3,
+  Image as ImageIcon,
+  Minus,
+  MousePointer,
+  Palette,
+  Type,
+} from 'lucide-react';
+
+import React from 'react';
+
+import { Draggable, Droppable } from './dnd-components';
+
+/**
+ * Available component definitions for the palette
+ */
+interface ComponentDefinition {
+  type: ComponentType;
+  name: string;
+  icon: React.ReactNode;
+  description: string;
+  defaultProps: Record<string, unknown>;
+  category: 'basic' | 'content' | 'media' | 'layout';
+}
+
+const availableComponents: ComponentDefinition[] = [
+  {
+    type: 'heading',
+    name: 'Heading',
+    icon: <Type className="h-4 w-4" />,
+    description: 'Add headings (H1-H6)',
+    defaultProps: {
+      content: 'New Heading',
+      level: 2,
+      textAlign: 'left',
+    },
+    category: 'basic',
+  },
+  {
+    type: 'paragraph',
+    name: 'Paragraph',
+    icon: <AlignLeft className="h-4 w-4" />,
+    description: 'Add paragraph text',
+    defaultProps: {
+      content: 'New paragraph text.',
+      textAlign: 'left',
+    },
+    category: 'basic',
+  },
+  {
+    type: 'button',
+    name: 'Button',
+    icon: <MousePointer className="h-4 w-4" />,
+    description: 'Interactive button',
+    defaultProps: {
+      text: 'Click me',
+      variant: 'solid',
+      action: 'link',
+      url: '#',
+    },
+    category: 'content',
+  },
+  {
+    type: 'cards',
+    name: 'Cards',
+    icon: <Grid3x3 className="h-4 w-4" />,
+    description: 'Grid or list of cards',
+    defaultProps: {
+      layout: 'grid',
+      items: [
+        { title: 'Card 1', description: 'Description for card 1' },
+        { title: 'Card 2', description: 'Description for card 2' },
+      ],
+    },
+    category: 'content',
+  },
+  {
+    type: 'image',
+    name: 'Image',
+    icon: <ImageIcon className="h-4 w-4" />,
+    description: 'Add images with captions',
+    defaultProps: {
+      src: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=400&h=200&fit=crop',
+      alt: 'Placeholder Image',
+      caption: '',
+      alignment: 'center',
+      width: 'auto',
+      height: 'auto',
+    },
+    category: 'media',
+  },
+  {
+    type: 'divider',
+    name: 'Divider',
+    icon: <Minus className="h-4 w-4" />,
+    description: 'Horizontal divider line',
+    defaultProps: {
+      style: 'solid',
+      thickness: 'thin',
+      color: 'gray',
+    },
+    category: 'layout',
+  },
+];
+
+/**
+ * Component categories for organization
+ */
+const categories = [
+  { id: 'basic' as const, name: 'Basic', icon: <Type className="h-4 w-4" /> },
+  {
+    id: 'content' as const,
+    name: 'Content',
+    icon: <Grid3x3 className="h-4 w-4" />,
+  },
+  {
+    id: 'media' as const,
+    name: 'Media',
+    icon: <ImageIcon className="h-4 w-4" />,
+  },
+  {
+    id: 'layout' as const,
+    name: 'Layout',
+    icon: <Palette className="h-4 w-4" />,
+  },
+];
+
+interface ComponentPaletteProps {
+  className?: string;
+}
+
+/**
+ * Component Palette
+ *
+ * Displays available components that can be dragged to the editor
+ */
+const ComponentPalette: React.FC<ComponentPaletteProps> = ({ className }) => {
+  return (
+    <div
+      className={cn(
+        'flex h-0 min-h-full flex-col rounded-lg border',
+        'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800',
+        className
+      )}
+    >
+      <div className="border-b border-stone-200 p-4 dark:border-stone-700">
+        <h3
+          className={cn(
+            'flex items-center gap-2 text-lg font-medium',
+            'text-stone-900 dark:text-stone-100'
+          )}
+        >
+          <Palette className="h-5 w-5" />
+          Components
+        </h3>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto p-0">
+        <Droppable
+          id="component-palette"
+          disabled={true}
+          className="space-y-6 px-4 pb-4"
+        >
+          {categories.map(category => {
+            const categoryComponents = availableComponents.filter(
+              comp => comp.category === category.id
+            );
+
+            if (categoryComponents.length === 0) return null;
+
+            return (
+              <div key={category.id} className="space-y-2">
+                <h3
+                  className={cn(
+                    'flex items-center gap-2 text-sm font-medium',
+                    'text-stone-600 dark:text-stone-400'
+                  )}
+                >
+                  {category.icon}
+                  {category.name}
+                </h3>
+                <div className="space-y-2">
+                  {categoryComponents.map(comp => {
+                    const componentPreview = (
+                      <div
+                        className={cn(
+                          'flex cursor-grab items-center gap-3 rounded-md border p-3 transition-colors active:cursor-grabbing',
+                          'border-stone-200 bg-stone-50 hover:border-stone-300 hover:bg-stone-100',
+                          'dark:border-stone-600 dark:bg-stone-700 dark:hover:border-stone-500 dark:hover:bg-stone-600'
+                        )}
+                      >
+                        <div
+                          className={cn(
+                            'flex-shrink-0',
+                            'text-stone-600 dark:text-stone-400'
+                          )}
+                        >
+                          {comp.icon}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p
+                            className={cn(
+                              'truncate text-sm font-medium',
+                              'text-stone-900 dark:text-stone-100'
+                            )}
+                          >
+                            {comp.name}
+                          </p>
+                          <p
+                            className={cn(
+                              'truncate text-xs',
+                              'text-stone-600 dark:text-stone-400'
+                            )}
+                          >
+                            {comp.description}
+                          </p>
+                        </div>
+                      </div>
+                    );
+
+                    return (
+                      <Draggable
+                        key={comp.type}
+                        id={`palette-${comp.type}`}
+                        preview={componentPreview}
+                      >
+                        {componentPreview}
+                      </Draggable>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </Droppable>
+      </div>
+    </div>
+  );
+};
+
+export default ComponentPalette;
+export { availableComponents };
diff --git a/components/admin/content/context-menu.tsx b/components/admin/content/context-menu.tsx
new file mode 100644
index 00000000..afb73ea0
--- /dev/null
+++ b/components/admin/content/context-menu.tsx
@@ -0,0 +1,520 @@
+'use client';
+
+import { Input } from '@components/ui/input';
+import { Label } from '@components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@components/ui/select';
+import { Textarea } from '@components/ui/textarea';
+import { ComponentInstance } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import { Plus, Trash2, X } from 'lucide-react';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  component: ComponentInstance | null;
+  onPropsChange: (newProps: Record<string, unknown>) => void;
+  onDelete: (componentId: string) => void;
+  onClose: () => void;
+}
+
+/**
+ * Context Menu Component
+ *
+ * Right-click context menu that directly shows property editor
+ */
+export const ContextMenu: React.FC<ContextMenuProps> = ({
+  x,
+  y,
+  component,
+  onPropsChange,
+  onDelete,
+  onClose,
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x, y });
+
+  useEffect(() => {
+    if (modalRef.current) {
+      const modal = modalRef.current;
+      const rect = modal.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let newX = x;
+      let newY = y;
+
+      // Adjust position if modal would go outside viewport
+      if (x + rect.width > viewportWidth) {
+        newX = viewportWidth - rect.width - 20;
+      }
+      if (y + rect.height > viewportHeight) {
+        newY = viewportHeight - rect.height - 20;
+      }
+      if (newX < 20) newX = 20;
+      if (newY < 20) newY = 20;
+
+      setPosition({ x: newX, y: newY });
+    }
+  }, [x, y]);
+
+  const handleInputChange = (name: string, value: unknown) => {
+    if (!component) return;
+    onPropsChange({ ...component.props, [name]: value });
+  };
+
+  const handleSecondaryButtonChange = (key: string, value: unknown) => {
+    if (!component) return;
+    const currentSecondaryButton =
+      (component.props.secondaryButton as Record<string, unknown>) || {};
+    const updatedSecondaryButton = { ...currentSecondaryButton, [key]: value };
+    onPropsChange({
+      ...component.props,
+      secondaryButton: updatedSecondaryButton,
+    });
+  };
+
+  const handleAddSecondaryButton = () => {
+    if (!component) return;
+    const defaultSecondaryButton = {
+      text: 'Secondary Button',
+      variant: 'outline',
+      action: 'link',
+      url: '#',
+    };
+    onPropsChange({
+      ...component.props,
+      secondaryButton: defaultSecondaryButton,
+    });
+  };
+
+  const handleRemoveSecondaryButton = () => {
+    if (!component) return;
+    const newProps = { ...component.props };
+    delete newProps.secondaryButton;
+    onPropsChange(newProps);
+  };
+
+  const handleItemsChange = (newItems: Array<Record<string, unknown>>) => {
+    handleInputChange('items', newItems);
+  };
+
+  const handleItemChange = (index: number, key: string, value: unknown) => {
+    if (!component) return;
+    const items = component.props.items as Array<Record<string, unknown>>;
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [key]: value };
+    handleItemsChange(newItems);
+  };
+
+  const handleAddItem = () => {
+    if (!component) return;
+    const items =
+      (component.props.items as Array<Record<string, unknown>>) || [];
+    const newItem = {
+      title: 'New Item',
+      description: 'Add description here',
+    };
+    handleItemsChange([...items, newItem]);
+  };
+
+  const handleRemoveItem = (index: number) => {
+    if (!component) return;
+    const items = component.props.items as Array<Record<string, unknown>>;
+    const newItems = items.filter((_, i) => i !== index);
+    handleItemsChange(newItems);
+  };
+
+  const handleDelete = () => {
+    if (component) {
+      onDelete(component.id);
+      onClose();
+    }
+  };
+
+  if (!component) return null;
+
+  const renderPropertyField = (key: string, value: unknown) => {
+    const fieldId = `prop-${key}`;
+
+    // Array properties (cards items)
+    if (key === 'items' && component.type === 'cards') {
+      const items = value as Array<Record<string, unknown>>;
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="capitalize">
+            {key}
+          </Label>
+          <div className="max-h-48 space-y-2 overflow-y-auto">
+            {items.map((item, index) => (
+              <div
+                key={index}
+                className={cn(
+                  'rounded-lg border p-3',
+                  'border-stone-200 bg-stone-50 dark:border-stone-600 dark:bg-stone-700'
+                )}
+              >
+                <div className="flex items-center justify-between pb-2">
+                  <h5 className="text-xs font-medium text-stone-600 dark:text-stone-400">
+                    Item {index + 1}
+                  </h5>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveItem(index)}
+                    className="flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </button>
+                </div>
+                <div className="space-y-2">
+                  {Object.entries(item).map(([itemKey, itemValue]) => (
+                    <div key={itemKey}>
+                      <Label className="text-xs capitalize">{itemKey}</Label>
+                      <Textarea
+                        value={String(itemValue || '')}
+                        onChange={e =>
+                          handleItemChange(index, itemKey, e.target.value)
+                        }
+                        className="min-h-[40px] text-xs"
+                        placeholder={`Enter ${itemKey}`}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+            <button
+              type="button"
+              onClick={handleAddItem}
+              className={cn(
+                'w-full rounded-md border px-3 py-2 text-xs font-medium transition-colors',
+                'border-stone-300 bg-white text-stone-900 hover:bg-stone-50',
+                'dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:hover:bg-stone-700',
+                'flex items-center justify-center gap-2'
+              )}
+            >
+              <Plus className="h-3 w-3" />
+              Add Item
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    // Secondary button for button component
+    if (key === 'secondaryButton' && component.type === 'button') {
+      const secondaryButton = value as Record<string, unknown> | undefined;
+
+      if (!secondaryButton) {
+        return (
+          <div key={key} className="space-y-2">
+            <Label className="text-sm">Secondary Button</Label>
+            <button
+              type="button"
+              onClick={handleAddSecondaryButton}
+              className={cn(
+                'w-full rounded-md border px-3 py-2 text-xs font-medium transition-colors',
+                'border-stone-300 bg-white text-stone-900 hover:bg-stone-50',
+                'dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:hover:bg-stone-700',
+                'flex items-center justify-center gap-2'
+              )}
+            >
+              <Plus className="h-3 w-3" />
+              Add Second Button
+            </button>
+          </div>
+        );
+      }
+
+      return (
+        <div key={key} className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-sm">Secondary Button</Label>
+            <button
+              type="button"
+              onClick={handleRemoveSecondaryButton}
+              className="flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+            >
+              <Trash2 className="h-3 w-3" />
+            </button>
+          </div>
+          <div
+            className={cn(
+              'space-y-3 rounded-lg border p-3',
+              'border-stone-200 bg-stone-50 dark:border-stone-600 dark:bg-stone-700'
+            )}
+          >
+            {/* Text field */}
+            <div className="space-y-2">
+              <Label className="text-xs">Text</Label>
+              <Input
+                type="text"
+                value={String(secondaryButton.text || '')}
+                onChange={e =>
+                  handleSecondaryButtonChange('text', e.target.value)
+                }
+                placeholder="Enter button text"
+                className="h-8 text-sm"
+              />
+            </div>
+
+            {/* Variant field */}
+            <div className="space-y-2">
+              <Label className="text-xs">Variant</Label>
+              <Select
+                value={String(secondaryButton.variant || 'outline')}
+                onValueChange={newValue =>
+                  handleSecondaryButtonChange('variant', newValue)
+                }
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Select variant" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="solid">Solid</SelectItem>
+                  <SelectItem value="outline">Outline</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Action field */}
+            <div className="space-y-2">
+              <Label className="text-xs">Action</Label>
+              <Select
+                value={String(secondaryButton.action || 'link')}
+                onValueChange={newValue =>
+                  handleSecondaryButtonChange('action', newValue)
+                }
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="Select action" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="link">Link</SelectItem>
+                  <SelectItem value="submit">Submit</SelectItem>
+                  <SelectItem value="external">External</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* URL field */}
+            <div className="space-y-2">
+              <Label className="text-xs">URL</Label>
+              <Input
+                type="text"
+                value={String(secondaryButton.url || '')}
+                onChange={e =>
+                  handleSecondaryButtonChange('url', e.target.value)
+                }
+                placeholder="Enter URL"
+                className="h-8 text-sm"
+              />
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // Select fields
+    const selectFields: Record<
+      string,
+      Array<{ value: string; label: string }>
+    > = {
+      layout: [
+        { value: 'grid', label: 'Grid' },
+        { value: 'list', label: 'List' },
+      ],
+      thickness: [
+        { value: 'thin', label: 'Thin' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'thick', label: 'Thick' },
+      ],
+      style: [
+        { value: 'solid', label: 'Solid' },
+        { value: 'dashed', label: 'Dashed' },
+        { value: 'dotted', label: 'Dotted' },
+      ],
+      alignment: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+        { value: 'right', label: 'Right' },
+      ],
+      textAlign: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+        { value: 'right', label: 'Right' },
+      ],
+      action: [
+        { value: 'link', label: 'Link' },
+        { value: 'submit', label: 'Submit' },
+        { value: 'external', label: 'External' },
+      ],
+      variant: [
+        { value: 'solid', label: 'Solid' },
+        { value: 'outline', label: 'Outline' },
+      ],
+      level: [
+        { value: '1', label: 'H1' },
+        { value: '2', label: 'H2' },
+        { value: '3', label: 'H3' },
+        { value: '4', label: 'H4' },
+        { value: '5', label: 'H5' },
+        { value: '6', label: 'H6' },
+      ],
+    };
+
+    if (selectFields[key]) {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="text-sm capitalize">
+            {key}
+          </Label>
+          <Select
+            value={String(value || '')}
+            onValueChange={newValue =>
+              handleInputChange(
+                key,
+                key === 'level' ? Number(newValue) : newValue
+              )
+            }
+          >
+            <SelectTrigger className="h-8 text-sm">
+              <SelectValue placeholder={`Select ${key}`} />
+            </SelectTrigger>
+            <SelectContent>
+              {selectFields[key].map(option => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      );
+    }
+
+    // Multi-line text fields
+    if (
+      key === 'content' &&
+      (component.type === 'paragraph' || component.type === 'heading')
+    ) {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="text-sm capitalize">
+            {key}
+          </Label>
+          <Textarea
+            id={fieldId}
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, e.target.value)}
+            placeholder={`Enter ${key}`}
+            className="min-h-[60px] text-sm"
+          />
+        </div>
+      );
+    }
+
+    // Number fields
+    if (typeof value === 'number') {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="text-sm capitalize">
+            {key}
+          </Label>
+          <Input
+            id={fieldId}
+            type="number"
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, Number(e.target.value) || 0)}
+            placeholder={`Enter ${key}`}
+            className="h-8 text-sm"
+          />
+        </div>
+      );
+    }
+
+    // String fields
+    if (typeof value === 'string') {
+      return (
+        <div key={key} className="space-y-2">
+          <Label htmlFor={fieldId} className="text-sm capitalize">
+            {key}
+          </Label>
+          <Input
+            id={fieldId}
+            type="text"
+            value={String(value || '')}
+            onChange={e => handleInputChange(key, e.target.value)}
+            placeholder={`Enter ${key}`}
+            className="h-8 text-sm"
+          />
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-40 bg-black/20" onClick={onClose} />
+
+      {/* Property Editor Modal */}
+      <div
+        ref={modalRef}
+        className={cn(
+          'fixed z-50 max-h-96 w-80 overflow-y-auto',
+          'rounded-lg border shadow-lg',
+          'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
+        )}
+        style={{
+          left: position.x,
+          top: position.y,
+        }}
+      >
+        <div className="border-b border-stone-200 p-3 dark:border-stone-700">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-medium text-stone-900 capitalize dark:text-stone-100">
+              {component.type} Properties
+            </h3>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleDelete}
+                className="flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors hover:bg-red-100 dark:hover:bg-red-900/50"
+                title="Delete Component"
+              >
+                <Trash2 className="h-3 w-3" />
+              </button>
+              <button
+                type="button"
+                onClick={onClose}
+                className="flex h-6 w-6 items-center justify-center rounded p-0 text-stone-500 transition-colors hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-700"
+                title="Close"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-3 p-3">
+          {Object.entries(component.props).map(([key, value]) =>
+            renderPropertyField(key, value)
+          )}
+          {/* Always show secondary button option for button components */}
+          {component.type === 'button' &&
+            !component.props.secondaryButton &&
+            renderPropertyField('secondaryButton', undefined)}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/components/admin/content/dnd-components.tsx b/components/admin/content/dnd-components.tsx
new file mode 100644
index 00000000..1fedb44a
--- /dev/null
+++ b/components/admin/content/dnd-components.tsx
@@ -0,0 +1,319 @@
+'use client';
+
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import {
+  SortableContext,
+  SortingStrategy,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '@lib/utils';
+
+import React from 'react';
+
+import { useDndState } from './dnd-context';
+
+// Re-export arrayMove for convenience
+export { arrayMove };
+
+// Droppable component interface
+interface DroppableProps {
+  id: string;
+  children: React.ReactNode | ((isOver: boolean) => React.ReactNode);
+  className?: string;
+  disabled?: boolean;
+}
+
+/**
+ * DndKit Droppable Component
+ *
+ * Replaces react-beautiful-dnd's Droppable
+ */
+export function Droppable({
+  id,
+  children,
+  className,
+  disabled = false,
+}: DroppableProps) {
+  const { isOver, setNodeRef } = useDroppable({
+    id,
+    disabled,
+  });
+
+  // Check if this is a section drop zone that should have special hover effects
+  const isSectionDropZone = id.includes('section-drop');
+
+  // Apply drag-over styles that mimic hover effects for section drop zones
+  const dragOverStyles =
+    isSectionDropZone && isOver
+      ? {
+          height: '4rem', // equivalent to h-16
+          borderColor: 'rgb(168 162 158)', // stone-400
+          backgroundColor: 'rgb(245 245 244)', // stone-100 light mode
+        }
+      : {};
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        className,
+        // Apply enhanced styles for section drop zones when dragging over
+        isSectionDropZone &&
+          isOver &&
+          'h-16 border-stone-400 bg-stone-100 dark:border-stone-500 dark:bg-stone-800',
+        // Default ring effect for other droppables
+        !isSectionDropZone && isOver && 'ring-opacity-50 ring-2 ring-stone-500'
+      )}
+      style={dragOverStyles}
+    >
+      {typeof children === 'function'
+        ? (children as (isOver: boolean) => React.ReactNode)(isOver)
+        : children}
+    </div>
+  );
+}
+
+// Draggable component interface
+interface DraggableProps {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  preview?: React.ReactNode;
+}
+
+/**
+ * DndKit Draggable Component
+ *
+ * Replaces react-beautiful-dnd's Draggable
+ */
+export function Draggable({
+  id,
+  children,
+  className,
+  disabled = false,
+  preview,
+}: DraggableProps) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id,
+      disabled,
+      data: {
+        type: id.startsWith('palette-') ? 'palette-item' : 'component',
+        preview,
+      },
+    });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        className,
+        isDragging && 'scale-95 opacity-50',
+        !disabled && 'cursor-grab active:cursor-grabbing'
+      )}
+      {...listeners}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Sortable component for within containers
+interface SortableProps {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  preview?: React.ReactNode;
+  onClick?: () => void;
+  onDoubleClick?: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+}
+
+/**
+ * DndKit Sortable Component
+ *
+ * For sortable items within containers
+ */
+export function Sortable({
+  id,
+  children,
+  className,
+  disabled = false,
+  preview,
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+}: SortableProps) {
+  const { isDraggingFromPalette } = useDndState();
+
+  // Normal sortable behavior - always call hooks at the top level
+  const shouldDisable = disabled;
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+    isOver,
+  } = useSortable({
+    id,
+    disabled: shouldDisable,
+    data: {
+      type: 'component',
+      preview,
+    },
+  });
+
+  // Filter out context menu interfering events and handle them separately
+  // IMPORTANT: This hook must be called before any conditional returns!
+  const filteredListeners = React.useMemo(() => {
+    if (!listeners) return {};
+
+    // Create a copy without onContextMenu to prevent conflicts
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { onContextMenu: _, ...otherListeners } = listeners as Record<
+      string,
+      unknown
+    >;
+    return otherListeners;
+  }, [listeners]);
+
+  // Conditional rendering after all hooks are called
+  if (isDraggingFromPalette) {
+    console.log('🚫 SORTABLE RENDERED AS PLAIN DIV:', {
+      componentId: id,
+      isDraggingFromPalette,
+      reason: 'palette dragging - avoiding drop conflicts',
+    });
+
+    return (
+      <div
+        className={cn(className, 'pointer-events-none')}
+        style={{ opacity: 0.5 }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  // Log component dragging state
+  if (isDragging) {
+    console.log('🔥 COMPONENT BEING DRAGGED:', {
+      componentId: id,
+      isDragging,
+      transform,
+      isDraggingFromPalette,
+    });
+  }
+
+  // Log if somehow this component is still receiving hover events
+  if (isDraggingFromPalette && isOver) {
+    console.log('⚠️ SORTABLE STILL HOVERING (Should not happen!):', {
+      componentId: id,
+      isOver,
+      shouldDisable,
+      isDraggingFromPalette,
+    });
+  }
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        className,
+        isDragging && 'z-50 scale-105 opacity-60',
+        !shouldDisable && 'cursor-grab active:cursor-grabbing'
+      )}
+      {...filteredListeners}
+      {...attributes}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onContextMenu={e => {
+        // Call the provided context menu handler if available
+        if (onContextMenu) {
+          onContextMenu(e);
+        }
+        // Don't prevent default or stop propagation to ensure proper handling
+      }}
+      data-component-id={id}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Sortable Container
+interface SortableContainerProps {
+  id: string;
+  items: string[];
+  children: React.ReactNode;
+  className?: string;
+  strategy?: SortingStrategy;
+}
+
+/**
+ * DndKit Sortable Container
+ *
+ * Provides sortable context for child components
+ */
+export function SortableContainer({
+  id,
+  items,
+  children,
+  className,
+  strategy = verticalListSortingStrategy,
+}: SortableContainerProps) {
+  const { isDraggingFromPalette } = useDndState();
+
+  const { isOver, setNodeRef } = useDroppable({
+    id,
+    data: {
+      type: 'container',
+      accepts: ['component', 'palette-item'],
+    },
+  });
+
+  // Log hover events when dragging from palette
+  if (isDraggingFromPalette && isOver) {
+    console.log('📦 CONTAINER HOVER:', {
+      containerId: id,
+      isOver,
+      isDraggingFromPalette,
+      itemCount: items.length,
+    });
+  }
+
+  return (
+    <SortableContext items={items} strategy={strategy}>
+      <div
+        ref={setNodeRef}
+        className={cn(
+          className,
+          isOver &&
+            'ring-opacity-75 bg-stone-50/50 ring-2 ring-stone-400 dark:bg-stone-900/20'
+        )}
+      >
+        {children}
+      </div>
+    </SortableContext>
+  );
+}
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
new file mode 100644
index 00000000..72db924f
--- /dev/null
+++ b/components/admin/content/dnd-context.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { createPortal } from 'react-dom';
+
+import React, { createContext, useContext, useState } from 'react';
+
+interface DndContextWrapperProps {
+  children: React.ReactNode;
+  onDragEnd: (event: DragEndEvent) => boolean; // Return true if drop was successful
+}
+
+interface DndStateContextValue {
+  isDraggingFromPalette: boolean;
+}
+
+const DndStateContext = createContext<DndStateContextValue>({
+  isDraggingFromPalette: false,
+});
+
+export const useDndState = () => useContext(DndStateContext);
+
+/**
+ * DndKit Context Wrapper
+ *
+ * Provides drag and drop context using @dnd-kit/core
+ * Replaces react-beautiful-dnd's DragDropContext
+ */
+export function DndContextWrapper({
+  children,
+  onDragEnd,
+}: DndContextWrapperProps) {
+  const [activeItem, setActiveItem] = useState<{
+    id: string;
+    content: React.ReactNode;
+  } | null>(null);
+
+  const [isDraggingFromPalette, setIsDraggingFromPalette] = useState(false);
+  const [dropWasSuccessful, setDropWasSuccessful] = useState(false);
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const activeId = String(active.id);
+
+    // Check if dragging from palette
+    const isFromPalette = activeId.startsWith('palette-');
+    setIsDraggingFromPalette(isFromPalette);
+
+    console.log('🚀 DND START:', {
+      activeId,
+      isFromPalette,
+      isDraggingFromPalette: isFromPalette,
+      activeData: active.data.current,
+    });
+
+    setActiveItem({
+      id: activeId,
+      content: active.data.current?.preview || activeId,
+    });
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    console.log('🏁 DND END:', {
+      activeId: event.active.id,
+      overId: event.over?.id,
+      overData: event.over?.data.current,
+      isDraggingFromPalette,
+    });
+
+    // Call the store's drag end handler and get success status
+    const wasSuccessful = onDragEnd(event);
+    setDropWasSuccessful(wasSuccessful);
+
+    if (wasSuccessful && activeItem) {
+      // For successful drops, animate out in place
+      setIsAnimatingOut(true);
+
+      // Clear the item after animation completes
+      setTimeout(() => {
+        setActiveItem(null);
+        setIsDraggingFromPalette(false);
+        setDropWasSuccessful(false);
+        setIsAnimatingOut(false);
+      }, 200); // 200ms fade out animation
+    } else {
+      // For failed drops, clear immediately (allows default return animation)
+      setActiveItem(null);
+      setIsDraggingFromPalette(false);
+      setDropWasSuccessful(false);
+      setIsAnimatingOut(false);
+    }
+  };
+
+  return (
+    <DndStateContext.Provider value={{ isDraggingFromPalette }}>
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        {children}
+        {typeof document !== 'undefined' &&
+          createPortal(
+            <DragOverlay dropAnimation={dropWasSuccessful ? null : undefined}>
+              {activeItem ? (
+                <div
+                  className={`rounded-lg border bg-white p-2 shadow-lg transition-all duration-200 dark:bg-gray-800 ${
+                    isAnimatingOut
+                      ? 'scale-95 transform opacity-0'
+                      : 'scale-100 opacity-100'
+                  }`}
+                >
+                  {activeItem.content}
+                </div>
+              ) : null}
+            </DragOverlay>,
+            document.body
+          )}
+      </DndContext>
+    </DndStateContext.Provider>
+  );
+}
diff --git a/components/admin/content/home-preview-dynamic.tsx b/components/admin/content/home-preview-dynamic.tsx
new file mode 100644
index 00000000..20f19efd
--- /dev/null
+++ b/components/admin/content/home-preview-dynamic.tsx
@@ -0,0 +1,208 @@
+'use client';
+
+import { useTheme } from '@lib/hooks/use-theme';
+import { PageContent } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import type { HomeTranslationData } from '@lib/utils/data-migration';
+import {
+  isHomeDynamicFormat,
+  migrateHomeTranslationData,
+} from '@lib/utils/data-migration';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import React from 'react';
+
+import ComponentRenderer from './component-renderer';
+
+interface HomePreviewDynamicProps {
+  /**
+   * Translation data for the home page
+   * Can be either legacy or dynamic format
+   */
+  translation: HomeTranslationData;
+  /**
+   * Preview device type for responsive preview
+   */
+  previewDevice: 'desktop' | 'tablet' | 'mobile';
+}
+
+/**
+ * Home Page Preview Component (Dynamic)
+ *
+ * Displays a preview of the home page using the dynamic component system
+ * Reuses the same ComponentRenderer as AboutPreview for consistency
+ */
+export function HomePreviewDynamic({
+  translation,
+  previewDevice,
+}: HomePreviewDynamicProps) {
+  const { isDark } = useTheme();
+
+  // Ensure translation is in dynamic format
+  const dynamicTranslation = React.useMemo(() => {
+    if (!isHomeDynamicFormat(translation)) {
+      return migrateHomeTranslationData(translation);
+    }
+    return translation;
+  }, [translation]);
+
+  // Create page content from translation
+  const pageContent: PageContent = React.useMemo(() => {
+    return {
+      sections: dynamicTranslation.sections || [],
+      metadata: dynamicTranslation.metadata || {
+        version: '1.0.0',
+        lastModified: new Date().toISOString(),
+        author: 'preview',
+      },
+    };
+  }, [dynamicTranslation]);
+
+  // Get homepage-style colors
+  const getColors = () => {
+    if (isDark) {
+      return {
+        bgColor: '#1c1917',
+        textColor: 'text-gray-300',
+      };
+    } else {
+      return {
+        bgColor: '#f5f5f4',
+        textColor: 'text-stone-700',
+      };
+    }
+  };
+
+  const colors = getColors();
+
+  /**
+   * Get device-specific container styles with homepage styling
+   */
+  const getDeviceStyles = () => {
+    switch (previewDevice) {
+      case 'mobile':
+        return {
+          container: 'mx-auto bg-black rounded-[2rem] p-2 shadow-2xl',
+          screen:
+            'w-[375px] h-[667px] bg-white rounded-[1.75rem] overflow-hidden relative',
+          content: 'h-full overflow-y-auto',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
+        };
+      case 'tablet':
+        return {
+          container: 'mx-auto bg-black rounded-xl p-3 shadow-2xl mt-50',
+          screen:
+            'w-[768px] h-[1024px] bg-white rounded-lg overflow-hidden relative',
+          content: 'h-full overflow-y-auto',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
+        };
+      case 'desktop':
+      default:
+        return {
+          container: 'w-full h-full',
+          screen: 'w-full h-full overflow-hidden relative',
+          content: 'h-full overflow-y-auto',
+          mainClass: 'relative w-full px-4 py-12 sm:px-6 lg:px-8',
+        };
+    }
+  };
+
+  const deviceStyles = getDeviceStyles();
+
+  /**
+   * Render page sections with homepage-style animations and layout
+   */
+  const renderSections = () => {
+    if (!pageContent.sections || pageContent.sections.length === 0) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className={cn(
+            'flex h-64 items-center justify-center',
+            colors.textColor
+          )}
+        >
+          <p>No content to preview</p>
+        </motion.div>
+      );
+    }
+
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        className="mx-auto max-w-5xl space-y-16"
+      >
+        {pageContent.sections.map((section, sectionIndex) => (
+          <motion.section
+            key={section.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              duration: 0.6,
+              delay: 0.1 + sectionIndex * 0.1,
+            }}
+            className="w-full"
+          >
+            <div
+              className={cn(
+                'gap-8',
+                section.layout === 'single-column' && 'space-y-8',
+                section.layout === 'two-column' &&
+                  'grid grid-cols-1 md:grid-cols-2',
+                section.layout === 'three-column' &&
+                  'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+              )}
+            >
+              {section.columns.map((column, columnIndex) => (
+                <div key={columnIndex} className="space-y-8">
+                  {column.map((component, componentIndex) => (
+                    <motion.div
+                      key={component.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{
+                        duration: 0.5,
+                        delay: 0.2 + sectionIndex * 0.1 + componentIndex * 0.05,
+                      }}
+                    >
+                      <ComponentRenderer
+                        component={component}
+                        sectionCommonProps={section.commonProps}
+                      />
+                    </motion.div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </motion.section>
+        ))}
+      </motion.div>
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex h-full w-full items-center justify-center',
+        previewDevice !== 'desktop' && 'p-4'
+      )}
+    >
+      <div className={deviceStyles.container}>
+        <div
+          className={cn(deviceStyles.screen)}
+          style={{ backgroundColor: colors.bgColor }}
+        >
+          <div className={deviceStyles.content}>
+            <AnimatePresence>
+              <main className={deviceStyles.mainClass}>{renderSections()}</main>
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/home/home-dynamic.tsx b/components/home/home-dynamic.tsx
new file mode 100644
index 00000000..40cacfeb
--- /dev/null
+++ b/components/home/home-dynamic.tsx
@@ -0,0 +1,222 @@
+'use client';
+
+import { AdminButton } from '@components/admin/admin-button';
+import ComponentRenderer from '@components/admin/content/component-renderer';
+import { LanguageSwitcher } from '@components/ui/language-switcher';
+import { PageLoader } from '@components/ui/page-loader';
+import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
+import { useTheme } from '@lib/hooks/use-theme';
+import type { PageContent } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import type { HomeTranslationData } from '@lib/utils/data-migration';
+import {
+  isHomeDynamicFormat,
+  migrateHomeTranslationData,
+} from '@lib/utils/data-migration';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+/**
+ * Dynamic Home Page Component
+ *
+ * Uses the dynamic component system to render the home page
+ * Supports both legacy static format and new dynamic sections format
+ */
+export function HomeDynamic() {
+  const { isDark } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const staticT = useTranslations('pages.home');
+  const { t: dynamicT, isLoading } = useDynamicTranslations({
+    sections: ['pages.home'],
+  });
+
+  // Enhanced translation function with dynamic/static fallback
+  const t = useCallback(
+    (key: string, params?: Record<string, string | number | Date>) => {
+      const dynamicValue = dynamicT(key, 'pages.home', params);
+      return dynamicValue || staticT(key, params);
+    },
+    [dynamicT, staticT]
+  );
+
+  // Ensure client-side rendering consistency
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Get homepage data and convert to dynamic format if needed
+  const [pageContent, setPageContent] = useState<PageContent | null>(null);
+
+  useEffect(() => {
+    // Convert translation data to PageContent
+    const createPageContent = () => {
+      try {
+        // Get the raw home translation data
+        const homeData: HomeTranslationData = {
+          title: t('title'),
+          subtitle: t('subtitle'),
+          getStarted: t('getStarted'),
+          learnMore: t('learnMore'),
+          features: staticT.raw('features') as Array<{
+            title: string;
+            description: string;
+          }>,
+          copyright: {
+            prefix: t('copyright.prefix'),
+            linkText: t('copyright.linkText'),
+            suffix: t('copyright.suffix'),
+          },
+        };
+
+        // Migrate to dynamic format if needed
+        const dynamicData = isHomeDynamicFormat(homeData)
+          ? homeData
+          : migrateHomeTranslationData(homeData);
+
+        if (dynamicData.sections) {
+          const content: PageContent = {
+            sections: dynamicData.sections,
+            metadata: dynamicData.metadata || {
+              version: '1.0.0',
+              lastModified: new Date().toISOString(),
+              author: 'system',
+            },
+          };
+          setPageContent(content);
+        }
+      } catch (error) {
+        console.error('Failed to create page content:', error);
+      }
+    };
+
+    if (mounted && !isLoading) {
+      createPageContent();
+    }
+  }, [mounted, isLoading, t, staticT]);
+
+  // Get colors based on theme
+  const getColors = () => {
+    if (isDark) {
+      return {
+        bgColor: '#1c1917',
+        textColor: 'text-gray-300',
+      };
+    } else {
+      return {
+        bgColor: '#f5f5f4',
+        textColor: 'text-stone-700',
+      };
+    }
+  };
+
+  const colors = getColors();
+
+  // Show loading state while mounting or dynamic translations load
+  if (!mounted || isLoading || !pageContent) {
+    return <PageLoader />;
+  }
+
+  /**
+   * Render page sections using ComponentRenderer
+   */
+  const renderSections = () => {
+    if (!pageContent.sections || pageContent.sections.length === 0) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className={cn(
+            'flex h-64 items-center justify-center',
+            colors.textColor
+          )}
+        >
+          <p>No content to display</p>
+        </motion.div>
+      );
+    }
+
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        className="mx-auto max-w-5xl space-y-16"
+      >
+        {pageContent.sections.map((section, sectionIndex) => (
+          <motion.section
+            key={section.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              duration: 0.6,
+              delay: 0.1 + sectionIndex * 0.1,
+            }}
+            className="w-full"
+          >
+            <div
+              className={cn(
+                'gap-8',
+                section.layout === 'single-column' && 'space-y-8',
+                section.layout === 'two-column' &&
+                  'grid grid-cols-1 md:grid-cols-2',
+                section.layout === 'three-column' &&
+                  'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+              )}
+            >
+              {section.columns.map((column, columnIndex) => (
+                <div key={columnIndex} className="space-y-8">
+                  {column.map((component, componentIndex) => (
+                    <motion.div
+                      key={component.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{
+                        duration: 0.5,
+                        delay: 0.2 + sectionIndex * 0.1 + componentIndex * 0.05,
+                      }}
+                    >
+                      <ComponentRenderer
+                        component={component}
+                        sectionCommonProps={section.commonProps}
+                      />
+                    </motion.div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </motion.section>
+        ))}
+      </motion.div>
+    );
+  };
+
+  return (
+    <AnimatePresence>
+      <div
+        className="relative w-full px-4 py-12 sm:px-6 lg:px-8"
+        style={{ backgroundColor: colors.bgColor }}
+      >
+        {/* Top-right toolbar: Admin button (left) + Language switcher (right) */}
+        {/* Uses absolute positioning with responsive design, hidden on mobile to avoid layout issues */}
+        <div className="fixed top-4 right-4 z-50 hidden flex-col items-end gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3 lg:top-6 lg:right-6">
+          <AdminButton />
+          <LanguageSwitcher variant="floating" />
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.6 }}
+          className="mx-auto max-w-5xl"
+        >
+          {renderSections()}
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+}
diff --git a/components/home/index.tsx b/components/home/index.tsx
index 987fe6ca..28202e83 100644
--- a/components/home/index.tsx
+++ b/components/home/index.tsx
@@ -14,19 +14,21 @@ import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 
+import { HomeDynamic } from './home-dynamic';
+
 export function Home() {
   const router = useRouter();
   const { isDark } = useTheme();
   const supabase = createClient();
-  const [currentUser, setCurrentUser] = useState<any>(null);
   const [mounted, setMounted] = useState(false);
+  const [useDynamicRender, setUseDynamicRender] = useState(false);
   const staticT = useTranslations('pages.home');
   const { t: dynamicT, isLoading } = useDynamicTranslations({
     sections: ['pages.home'],
   });
 
   // Enhanced translation function with dynamic/static fallback
-  const t = (key: string, params?: any) => {
+  const t = (key: string, params?: Record<string, string | number | Date>) => {
     const dynamicValue = dynamicT(key, 'pages.home', params);
     return dynamicValue || staticT(key, params);
   };
@@ -36,19 +38,34 @@ export function Home() {
     setMounted(true);
   }, []);
 
-  // Check current user authentication status
+  // Check if we should use dynamic rendering (if dynamic sections data is available)
   useEffect(() => {
-    const getCurrentUser = async () => {
-      // 🔒 Security fix: use getUser() for server-side verification
-      // Avoid relying on potentially tampered local session data
-      const {
-        data: { user },
-      } = await supabase.auth.getUser();
-      setCurrentUser(user);
+    const checkForDynamicData = async () => {
+      try {
+        // Check if the translation data has sections (indicating dynamic format)
+        const homeData = dynamicT('', 'pages.home'); // Get full section data
+        if (
+          homeData &&
+          typeof homeData === 'object' &&
+          'sections' in homeData
+        ) {
+          setUseDynamicRender(true);
+        }
+      } catch {
+        console.log('Using static rendering as fallback');
+        setUseDynamicRender(false);
+      }
     };
 
-    getCurrentUser();
-  }, [supabase]);
+    if (mounted && !isLoading) {
+      checkForDynamicData();
+    }
+  }, [mounted, isLoading, dynamicT]);
+
+  // If dynamic rendering is available and enabled, use it
+  if (mounted && !isLoading && useDynamicRender) {
+    return <HomeDynamic />;
+  }
 
   const handleStartClick = async () => {
     try {
@@ -156,7 +173,12 @@ export function Home() {
             transition={{ duration: 0.6, delay: 0.3 }}
             className="mb-16 grid grid-cols-1 gap-8 md:grid-cols-3"
           >
-            {(staticT.raw('features') as any[]).map((feature, index) => (
+            {(
+              staticT.raw('features') as Array<{
+                title: string;
+                description: string;
+              }>
+            ).map((feature, index) => (
               <motion.div
                 key={index}
                 initial={{ opacity: 0, y: 20 }}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 00000000..eec50090
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { cn } from '@lib/utils';
+
+import * as React from 'react';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
new file mode 100644
index 00000000..cd4ec67d
--- /dev/null
+++ b/lib/stores/about-editor-store.ts
@@ -0,0 +1,792 @@
+import { availableComponents } from '@components/admin/content/component-palette';
+import { arrayMove } from '@components/admin/content/dnd-components';
+import { DragEndEvent } from '@dnd-kit/core';
+import {
+  ComponentInstance,
+  PageContent,
+  createDefaultSection,
+  generateUniqueId,
+} from '@lib/types/about-page-components';
+import { clonePageContent } from '@lib/utils/performance';
+import { create } from 'zustand';
+
+/**
+ * About Editor State Interface
+ *
+ * Manages the state of the dynamic about page editor
+ */
+interface AboutEditorState {
+  // Current page content being edited
+  pageContent: PageContent | null;
+  // ID of the currently selected component
+  selectedComponentId: string | null;
+  // Undo stack for history management
+  undoStack: PageContent[];
+  // Redo stack for history management
+  redoStack: PageContent[];
+  // Whether there are unsaved changes
+  isDirty: boolean;
+  // Whether the editor is loading
+  isLoading: boolean;
+  // Current language being edited
+  currentLanguage: string;
+
+  // Actions
+  // Set the entire page content
+  setPageContent: (content: PageContent) => void;
+  // Set the currently selected component
+  setSelectedComponent: (id: string | null) => void;
+  // Update properties of a specific component
+  updateComponentProps: (id: string, props: Record<string, unknown>) => void;
+  // Add a new component to a specific section and column
+  addComponent: (
+    sectionId: string,
+    columnIndex: number,
+    component: ComponentInstance
+  ) => void;
+  // Delete a component by ID
+  deleteComponent: (id: string) => void;
+  // Handle drag and drop operations - returns true if drop was successful
+  handleDragEnd: (event: DragEndEvent) => boolean;
+  // Create a new section
+  addSection: (
+    layout?: 'single-column' | 'two-column' | 'three-column'
+  ) => void;
+  // Delete a section by ID
+  deleteSection: (sectionId: string) => void;
+  // Undo last change
+  undo: () => void;
+  // Redo last undone change
+  redo: () => void;
+  // Set loading state
+  setLoading: (loading: boolean) => void;
+  // Set dirty state
+  setDirty: (dirty: boolean) => void;
+  // Set current language
+  setCurrentLanguage: (language: string) => void;
+  // Reset editor to initial state
+  reset: () => void;
+}
+
+/**
+ * About Editor Store
+ *
+ * Zustand store for managing the dynamic about page editor state
+ */
+export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
+  // Initial state
+  pageContent: null,
+  selectedComponentId: null,
+  undoStack: [],
+  redoStack: [],
+  isDirty: false,
+  isLoading: false,
+  currentLanguage: 'en-US',
+
+  // Set page content
+  setPageContent: (content: PageContent) => {
+    set({
+      pageContent: content,
+      selectedComponentId: null,
+      isDirty: false,
+    });
+  },
+
+  // Set selected component
+  setSelectedComponent: (id: string | null) => {
+    set({ selectedComponentId: id });
+  },
+
+  // Update component properties
+  updateComponentProps: (id: string, props: Record<string, unknown>) => {
+    const { pageContent } = get();
+    if (!pageContent) return;
+
+    // Create deep copy of page content
+    const newPageContent = clonePageContent(pageContent);
+
+    // Find and update the component
+    let updated = false;
+    for (const section of newPageContent.sections) {
+      for (const column of section.columns) {
+        const componentIndex = column.findIndex(comp => comp.id === id);
+        if (componentIndex !== -1) {
+          column[componentIndex].props = {
+            ...column[componentIndex].props,
+            ...props,
+          };
+          updated = true;
+          break;
+        }
+      }
+      if (updated) break;
+    }
+
+    if (updated) {
+      // Save current state to undo stack before updating
+      set(state => ({
+        pageContent: newPageContent,
+        undoStack: [...state.undoStack, pageContent].slice(-20), // Keep last 20 states
+        redoStack: [], // Clear redo stack on new change
+        isDirty: true,
+      }));
+    }
+  },
+
+  // Add component
+  addComponent: (
+    sectionId: string,
+    columnIndex: number,
+    component: ComponentInstance
+  ) => {
+    const state = get();
+    if (!state.pageContent) return;
+
+    const newPageContent = clonePageContent(state.pageContent);
+
+    const section = newPageContent.sections.find(s => s.id === sectionId);
+    if (section && section.columns[columnIndex]) {
+      section.columns[columnIndex].push(component);
+
+      // Save to undo stack
+      set(state => ({
+        pageContent: newPageContent,
+        undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+        redoStack: [],
+        isDirty: true,
+      }));
+    }
+  },
+
+  // Delete component
+  deleteComponent: (id: string) => {
+    const state = get();
+    if (!state.pageContent) return;
+
+    const newPageContent = clonePageContent(state.pageContent);
+    let deleted = false;
+
+    // Find and remove the component
+    for (const section of newPageContent.sections) {
+      for (const column of section.columns) {
+        const componentIndex = column.findIndex(comp => comp.id === id);
+        if (componentIndex !== -1) {
+          column.splice(componentIndex, 1);
+          deleted = true;
+          break;
+        }
+      }
+      if (deleted) break;
+    }
+
+    // Clean up empty sections
+    const cleanedSections = newPageContent.sections.filter(section =>
+      section.columns.some(column => column.length > 0)
+    );
+
+    if (deleted) {
+      set(state => ({
+        pageContent: { ...newPageContent, sections: cleanedSections },
+        undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+        redoStack: [],
+        selectedComponentId:
+          state.selectedComponentId === id ? null : state.selectedComponentId,
+        isDirty: true,
+      }));
+    }
+  },
+
+  // Handle drag and drop (optimized with performance considerations)
+  handleDragEnd: (event: DragEndEvent): boolean => {
+    const { active, over } = event;
+
+    if (!over) {
+      console.log('❌ NO DROP TARGET - returning false');
+      return false;
+    }
+
+    const state = get();
+    if (!state.pageContent) {
+      console.log('❌ NO PAGE CONTENT - returning false');
+      return false;
+    }
+
+    // More efficient cloning - only clone what we need to modify
+    const newPageContent: PageContent = {
+      ...state.pageContent,
+      sections: state.pageContent.sections.map(section => ({
+        ...section,
+        columns: section.columns.map(column => [...column]),
+      })),
+    };
+
+    const activeId = String(active.id);
+    const overId = String(over.id);
+
+    console.log('Drag End - Active:', activeId, 'Over:', overId);
+    console.log('Active data:', active.data.current);
+    console.log('Over data:', over.data.current);
+
+    // Handle dragging from component palette
+    if (activeId.startsWith('palette-')) {
+      const componentType = activeId.replace('palette-', '');
+      const componentDef = availableComponents.find(
+        comp => comp.type === componentType
+      );
+      if (!componentDef) {
+        console.log('❌ Component definition not found for:', componentType);
+        return false;
+      }
+
+      console.log('🎨 PALETTE DROP DETECTED:', {
+        componentType,
+        overId,
+        overData: over.data.current,
+      });
+
+      // Parse destination - handle direct drops on containers
+      let targetContainerId = overId;
+      let insertIndex = -1; // -1 means append to end
+
+      // Handle dropping on section drop zones (creates new section)
+      if (overId.startsWith('section-drop-')) {
+        console.log('Dropping on section drop zone:', overId);
+
+        // Create a new section
+        const newSection = createDefaultSection('single-column');
+        const newComponent: ComponentInstance = {
+          id: generateUniqueId('comp'),
+          type: componentDef.type,
+          props: { ...componentDef.defaultProps },
+        };
+
+        // Add component to the new section
+        newSection.columns[0].push(newComponent);
+
+        // Handle different drop zones
+        if (overId === 'section-drop-final') {
+          // Add to the end
+          newPageContent.sections.push(newSection);
+        } else {
+          // Parse the drop zone index to insert at the right position
+          const dropIndex = parseInt(overId.replace('section-drop-', ''));
+          newPageContent.sections.splice(dropIndex, 0, newSection);
+        }
+
+        console.log('New section created with component:', newComponent.id);
+
+        // Save changes and return success
+        set(state => ({
+          pageContent: newPageContent,
+          undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+          redoStack: [],
+          isDirty: true,
+        }));
+
+        console.log('✅ SECTION DROP SUCCESSFUL');
+        return true;
+      }
+
+      // Check if we're dropping directly on a container
+      if (overId.startsWith('section-')) {
+        targetContainerId = overId;
+        console.log('Dropping on container:', targetContainerId);
+      } else {
+        // Find which container this component belongs to and get insert position
+        for (const section of newPageContent.sections) {
+          for (
+            let colIndex = 0;
+            colIndex < section.columns.length;
+            colIndex++
+          ) {
+            const componentIndex = section.columns[colIndex].findIndex(
+              comp => comp.id === overId
+            );
+            if (componentIndex !== -1) {
+              targetContainerId = `section-${section.id}-${colIndex}`;
+              insertIndex = componentIndex; // Insert before this component
+              console.log(
+                'Dropping before component:',
+                overId,
+                'at index:',
+                insertIndex
+              );
+              break;
+            }
+          }
+        }
+      }
+
+      const targetParts = targetContainerId.split('-');
+      // Format is: section-{sectionId}-{columnIndex}
+      // But sectionId might contain hyphens, so we need to handle this carefully
+      const type = targetParts[0];
+      const columnIndex = targetParts[targetParts.length - 1];
+      const sectionId = targetParts.slice(1, -1).join('-'); // Everything between type and columnIndex
+
+      console.log('🔍 PARSING TARGET CONTAINER:', {
+        targetContainerId,
+        targetParts,
+        parsed: { type, sectionId, columnIndex },
+        insertIndex,
+      });
+
+      if (type === 'section' && sectionId && columnIndex !== undefined) {
+        const section = newPageContent.sections.find(s => s.id === sectionId);
+
+        console.log('🎯 FOUND SECTION:', {
+          section: section?.id,
+          hasColumn: section?.columns[parseInt(columnIndex)] !== undefined,
+          columnLength: section?.columns[parseInt(columnIndex)]?.length,
+        });
+
+        if (section && section.columns[parseInt(columnIndex)]) {
+          const newComponent: ComponentInstance = {
+            id: generateUniqueId('comp'),
+            type: componentDef.type,
+            props: { ...componentDef.defaultProps },
+          };
+
+          // Insert at the specified position or append to end
+          if (insertIndex === -1) {
+            section.columns[parseInt(columnIndex)].push(newComponent);
+          } else {
+            section.columns[parseInt(columnIndex)].splice(
+              insertIndex,
+              0,
+              newComponent
+            );
+          }
+
+          console.log('✅ COMPONENT ADDED SUCCESSFULLY:', {
+            componentId: newComponent.id,
+            sectionId,
+            columnIndex,
+            newColumnLength: section.columns[parseInt(columnIndex)].length,
+          });
+
+          // Save changes and return success for component drop
+          const cleanedSections = newPageContent.sections.filter(section =>
+            section.columns.some(column => column.length > 0)
+          );
+
+          set(state => ({
+            pageContent: { ...newPageContent, sections: cleanedSections },
+            undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+            redoStack: [],
+            isDirty: true,
+          }));
+
+          return true;
+        } else {
+          console.log('❌ FAILED TO FIND SECTION OR COLUMN:', {
+            sectionFound: !!section,
+            columnExists: !!section?.columns[parseInt(columnIndex)],
+          });
+          return false;
+        }
+      } else {
+        console.log('❌ INVALID TARGET CONTAINER FORMAT:', {
+          type,
+          sectionId,
+          columnIndex,
+          targetContainerId,
+        });
+        return false;
+      }
+    } else {
+      // Handle moving existing components within or between containers
+      const activeContainer = active.data.current?.sortable?.containerId;
+      const overContainer = over.data.current?.sortable?.containerId || overId;
+
+      console.log('🔄 COMPONENT REORDERING:', {
+        activeId,
+        overId,
+        activeContainer,
+        overContainer,
+        activeData: active.data.current,
+        overData: over.data.current,
+      });
+
+      if (activeContainer && overContainer) {
+        if (activeContainer === overContainer) {
+          // Reordering within the same container
+          console.log('📋 SAME CONTAINER REORDER - ORIGINAL:', {
+            activeContainer,
+            overContainer,
+          });
+
+          // DndKit generates container IDs automatically, need to map them back to our section IDs
+          // Find the section and column based on the component positions
+          let targetSectionId = null;
+          let targetColumnIndex = null;
+
+          // Search through all sections to find where these components are located
+          for (const section of newPageContent.sections) {
+            for (
+              let colIndex = 0;
+              colIndex < section.columns.length;
+              colIndex++
+            ) {
+              const column = section.columns[colIndex];
+              if (
+                column.some(comp => comp.id === activeId) &&
+                column.some(comp => comp.id === overId)
+              ) {
+                targetSectionId = section.id;
+                targetColumnIndex = colIndex;
+                break;
+              }
+            }
+            if (targetSectionId) break;
+          }
+
+          console.log('📋 FOUND TARGET LOCATION:', {
+            targetSectionId,
+            targetColumnIndex,
+          });
+
+          if (targetSectionId && targetColumnIndex !== null) {
+            const section = newPageContent.sections.find(
+              s => s.id === targetSectionId
+            );
+            if (section && section.columns[targetColumnIndex]) {
+              const column = section.columns[targetColumnIndex];
+              const activeIndex = column.findIndex(
+                comp => comp.id === activeId
+              );
+              const overIndex = column.findIndex(comp => comp.id === overId);
+
+              console.log('🎯 REORDER INDICES:', {
+                activeIndex,
+                overIndex,
+                columnLength: column.length,
+                targetSectionId,
+                targetColumnIndex,
+              });
+
+              if (
+                activeIndex !== -1 &&
+                overIndex !== -1 &&
+                activeIndex !== overIndex
+              ) {
+                // Use arrayMove to reorder within the same container
+                const originalColumn = [...column];
+                section.columns[targetColumnIndex] = arrayMove(
+                  column,
+                  activeIndex,
+                  overIndex
+                );
+
+                console.log('✅ REORDER APPLIED:', {
+                  before: originalColumn.map(c => c.id),
+                  after: section.columns[targetColumnIndex].map(c => c.id),
+                });
+
+                // Save changes and return success for reordering
+                const cleanedSections = newPageContent.sections.filter(
+                  section => section.columns.some(column => column.length > 0)
+                );
+
+                set(state => ({
+                  pageContent: { ...newPageContent, sections: cleanedSections },
+                  undoStack: [...state.undoStack, state.pageContent!].slice(
+                    -20
+                  ),
+                  redoStack: [],
+                  isDirty: true,
+                }));
+
+                return true;
+              } else {
+                console.log('❌ REORDER FAILED - Invalid indices');
+                return false;
+              }
+            } else {
+              console.log('❌ REORDER FAILED - Section or column not found');
+              return false;
+            }
+          } else {
+            console.log('❌ REORDER FAILED - Target location not found');
+            return false;
+          }
+        } else {
+          // Moving between containers - find components by their actual locations
+          console.log('🔄 CROSS-CONTAINER MOVE DETECTED:', {
+            activeId,
+            overId,
+            activeContainer,
+            overContainer,
+          });
+
+          // Helper function to find component location
+          const findComponentLocation = (componentId: string) => {
+            for (
+              let sectionIndex = 0;
+              sectionIndex < newPageContent.sections.length;
+              sectionIndex++
+            ) {
+              const section = newPageContent.sections[sectionIndex];
+              for (
+                let columnIndex = 0;
+                columnIndex < section.columns.length;
+                columnIndex++
+              ) {
+                const column = section.columns[columnIndex];
+                const componentIndex = column.findIndex(
+                  comp => comp.id === componentId
+                );
+                if (componentIndex !== -1) {
+                  return {
+                    sectionIndex,
+                    columnIndex,
+                    componentIndex,
+                    section,
+                    column,
+                    component: column[componentIndex],
+                  };
+                }
+              }
+            }
+            return null;
+          };
+
+          const sourceLocation = findComponentLocation(activeId);
+
+          // Check if dropping directly on an empty container (overId is container ID)
+          if (overId.startsWith('section-')) {
+            const targetParts = overId.split('-');
+            const sectionId = targetParts.slice(1, -1).join('-');
+            const columnIndex = targetParts[targetParts.length - 1];
+
+            console.log('📦 DROPPING ON EMPTY CONTAINER:', {
+              overId,
+              sectionId,
+              columnIndex,
+              sourceLocation: sourceLocation
+                ? sourceLocation.section.id
+                : 'not found',
+            });
+
+            if (sourceLocation && sectionId && columnIndex !== undefined) {
+              const targetSection = newPageContent.sections.find(
+                s => s.id === sectionId
+              );
+              if (
+                targetSection &&
+                targetSection.columns[parseInt(columnIndex)]
+              ) {
+                // Remove component from source
+                const [removed] = sourceLocation.column.splice(
+                  sourceLocation.componentIndex,
+                  1
+                );
+
+                // Add to target empty container
+                targetSection.columns[parseInt(columnIndex)].push(removed);
+
+                console.log('✅ MOVE TO EMPTY CONTAINER SUCCESSFUL:', {
+                  movedComponent: removed.id,
+                  fromSection: sourceLocation.section.id,
+                  fromColumn: sourceLocation.columnIndex,
+                  toSection: targetSection.id,
+                  toColumn: parseInt(columnIndex),
+                });
+
+                // Save changes and return success
+                const cleanedSections = newPageContent.sections.filter(
+                  section => section.columns.some(column => column.length > 0)
+                );
+
+                set(state => ({
+                  pageContent: {
+                    ...newPageContent,
+                    sections: cleanedSections,
+                  },
+                  undoStack: [...state.undoStack, state.pageContent!].slice(
+                    -20
+                  ),
+                  redoStack: [],
+                  isDirty: true,
+                }));
+
+                return true;
+              }
+            }
+          } else {
+            // Moving to a location with existing components
+            const destLocation = findComponentLocation(overId);
+
+            console.log('📍 COMPONENT LOCATIONS:', {
+              source: sourceLocation
+                ? {
+                    sectionId: sourceLocation.section.id,
+                    sectionIndex: sourceLocation.sectionIndex,
+                    columnIndex: sourceLocation.columnIndex,
+                    componentIndex: sourceLocation.componentIndex,
+                  }
+                : null,
+              dest: destLocation
+                ? {
+                    sectionId: destLocation.section.id,
+                    sectionIndex: destLocation.sectionIndex,
+                    columnIndex: destLocation.columnIndex,
+                    componentIndex: destLocation.componentIndex,
+                  }
+                : null,
+            });
+
+            if (sourceLocation && destLocation) {
+              // Remove component from source
+              const [removed] = sourceLocation.column.splice(
+                sourceLocation.componentIndex,
+                1
+              );
+
+              // Insert into destination - insert before the target component
+              destLocation.column.splice(
+                destLocation.componentIndex,
+                0,
+                removed
+              );
+
+              console.log('✅ CROSS-CONTAINER MOVE SUCCESSFUL:', {
+                movedComponent: removed.id,
+                fromSection: sourceLocation.section.id,
+                fromColumn: sourceLocation.columnIndex,
+                toSection: destLocation.section.id,
+                toColumn: destLocation.columnIndex,
+                insertIndex: destLocation.componentIndex,
+              });
+
+              // Save changes and return success
+              const cleanedSections = newPageContent.sections.filter(section =>
+                section.columns.some(column => column.length > 0)
+              );
+
+              set(state => ({
+                pageContent: {
+                  ...newPageContent,
+                  sections: cleanedSections,
+                },
+                undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+                redoStack: [],
+                isDirty: true,
+              }));
+
+              return true;
+            }
+          }
+
+          console.log(
+            '❌ CROSS-CONTAINER MOVE FAILED - Could not find component locations or target container:',
+            {
+              sourceFound: !!sourceLocation,
+              overId,
+              activeId,
+            }
+          );
+          return false;
+        }
+      } else {
+        console.log('❌ NO CONTAINERS FOUND - Drag operation failed');
+        return false;
+      }
+    }
+  },
+
+  // Add new section
+  addSection: (layout = 'single-column') => {
+    const { pageContent } = get();
+    if (!pageContent) return;
+
+    const newSection = createDefaultSection(layout);
+    const newPageContent = {
+      ...pageContent,
+      sections: [...pageContent.sections, newSection],
+    };
+
+    set(state => ({
+      pageContent: newPageContent,
+      undoStack: [...state.undoStack, pageContent].slice(-20),
+      redoStack: [],
+      isDirty: true,
+    }));
+  },
+
+  // Delete section
+  deleteSection: (sectionId: string) => {
+    const { pageContent } = get();
+    if (!pageContent) return;
+
+    const newSections = pageContent.sections.filter(s => s.id !== sectionId);
+    const newPageContent = { ...pageContent, sections: newSections };
+
+    set(state => ({
+      pageContent: newPageContent,
+      undoStack: [...state.undoStack, pageContent].slice(-20),
+      redoStack: [],
+      isDirty: true,
+    }));
+  },
+
+  // Undo
+  undo: () => {
+    const state = get();
+    if (state.undoStack.length === 0 || !state.pageContent) return;
+
+    const previousState = state.undoStack[state.undoStack.length - 1];
+    const newUndoStack = state.undoStack.slice(0, -1);
+
+    set({
+      pageContent: previousState,
+      undoStack: newUndoStack,
+      redoStack: [state.pageContent, ...state.redoStack].slice(0, 20),
+      selectedComponentId: null,
+    });
+  },
+
+  // Redo
+  redo: () => {
+    const state = get();
+    if (state.redoStack.length === 0 || !state.pageContent) return;
+
+    const nextState = state.redoStack[0];
+    const newRedoStack = state.redoStack.slice(1);
+
+    set({
+      pageContent: nextState,
+      undoStack: [...state.undoStack, state.pageContent].slice(-20),
+      redoStack: newRedoStack,
+      selectedComponentId: null,
+    });
+  },
+
+  // Set loading state
+  setLoading: (loading: boolean) => {
+    set({ isLoading: loading });
+  },
+
+  // Set dirty state
+  setDirty: (dirty: boolean) => {
+    set({ isDirty: dirty });
+  },
+
+  // Set current language
+  setCurrentLanguage: (language: string) => {
+    set({ currentLanguage: language });
+  },
+
+  // Reset editor
+  reset: () => {
+    set({
+      pageContent: null,
+      selectedComponentId: null,
+      undoStack: [],
+      redoStack: [],
+      isDirty: false,
+      isLoading: false,
+      currentLanguage: 'en-US',
+    });
+  },
+}));
diff --git a/lib/stores/home-editor-store.ts b/lib/stores/home-editor-store.ts
new file mode 100644
index 00000000..b54cd015
--- /dev/null
+++ b/lib/stores/home-editor-store.ts
@@ -0,0 +1,252 @@
+import type {
+  PageContent,
+  PageSection,
+} from '@lib/types/about-page-components';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+interface HomeEditorState {
+  pageContent: PageContent | null;
+  selectedComponentId: string | null;
+  undoStack: PageContent[];
+  redoStack: PageContent[];
+  isDirty: boolean;
+  isLoading: boolean;
+}
+
+interface HomeEditorActions {
+  // Core state management
+  setPageContent: (content: PageContent) => void;
+  setSelectedComponentId: (id: string | null) => void;
+  setLoading: (loading: boolean) => void;
+
+  // Undo/Redo functionality
+  pushToUndoStack: (content: PageContent) => void;
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+
+  // Section management
+  addSection: (section: PageSection, index?: number) => void;
+  removeSection: (sectionId: string) => void;
+  updateSection: (
+    sectionId: string,
+    updatedSection: Partial<PageSection>
+  ) => void;
+  duplicateSection: (sectionId: string) => void;
+
+  // Utility actions
+  markAsDirty: () => void;
+  markAsClean: () => void;
+  reset: () => void;
+}
+
+type HomeEditorStore = HomeEditorState & HomeEditorActions;
+
+// Maximum number of undo steps to keep
+const MAX_UNDO_STEPS = 50;
+
+export const useHomeEditorStore = create<HomeEditorStore>()(
+  devtools(
+    (set, get) => ({
+      // Initial state
+      pageContent: null,
+      selectedComponentId: null,
+      undoStack: [],
+      redoStack: [],
+      isDirty: false,
+      isLoading: false,
+
+      // Core state management
+      setPageContent: content => {
+        set({ pageContent: content, isDirty: false });
+      },
+
+      setSelectedComponentId: id => {
+        set({ selectedComponentId: id });
+      },
+
+      setLoading: loading => {
+        set({ isLoading: loading });
+      },
+
+      // Undo/Redo functionality
+      pushToUndoStack: content => {
+        const { undoStack } = get();
+        const newUndoStack = [content, ...undoStack].slice(0, MAX_UNDO_STEPS);
+        set({
+          undoStack: newUndoStack,
+          redoStack: [], // Clear redo stack when new action is performed
+          isDirty: true,
+        });
+      },
+
+      undo: () => {
+        const { pageContent, undoStack, redoStack } = get();
+        if (undoStack.length === 0 || !pageContent) return;
+
+        const [previousContent, ...remainingUndoStack] = undoStack;
+        const newRedoStack = [pageContent, ...redoStack];
+
+        set({
+          pageContent: previousContent,
+          undoStack: remainingUndoStack,
+          redoStack: newRedoStack,
+          isDirty: remainingUndoStack.length > 0,
+        });
+      },
+
+      redo: () => {
+        const { pageContent, undoStack, redoStack } = get();
+        if (redoStack.length === 0 || !pageContent) return;
+
+        const [nextContent, ...remainingRedoStack] = redoStack;
+        const newUndoStack = [pageContent, ...undoStack];
+
+        set({
+          pageContent: nextContent,
+          undoStack: newUndoStack,
+          redoStack: remainingRedoStack,
+          isDirty: true,
+        });
+      },
+
+      canUndo: () => {
+        const { undoStack } = get();
+        return undoStack.length > 0;
+      },
+
+      canRedo: () => {
+        const { redoStack } = get();
+        return redoStack.length > 0;
+      },
+
+      // Section management
+      addSection: (section, index) => {
+        const { pageContent, pushToUndoStack } = get();
+        if (!pageContent) return;
+
+        // Save current state to undo stack
+        pushToUndoStack(pageContent);
+
+        const newSections = [...pageContent.sections];
+        const insertIndex = index !== undefined ? index : newSections.length;
+        newSections.splice(insertIndex, 0, section);
+
+        const updatedContent: PageContent = {
+          ...pageContent,
+          sections: newSections,
+          metadata: {
+            ...pageContent.metadata,
+            lastModified: new Date().toISOString(),
+          },
+        };
+
+        set({ pageContent: updatedContent, isDirty: true });
+      },
+
+      removeSection: sectionId => {
+        const { pageContent, pushToUndoStack } = get();
+        if (!pageContent) return;
+
+        // Save current state to undo stack
+        pushToUndoStack(pageContent);
+
+        const newSections = pageContent.sections.filter(
+          section => section.id !== sectionId
+        );
+
+        const updatedContent: PageContent = {
+          ...pageContent,
+          sections: newSections,
+          metadata: {
+            ...pageContent.metadata,
+            lastModified: new Date().toISOString(),
+          },
+        };
+
+        set({ pageContent: updatedContent, isDirty: true });
+      },
+
+      updateSection: (sectionId, updatedSection) => {
+        const { pageContent, pushToUndoStack } = get();
+        if (!pageContent) return;
+
+        // Save current state to undo stack
+        pushToUndoStack(pageContent);
+
+        const newSections = pageContent.sections.map(section =>
+          section.id === sectionId ? { ...section, ...updatedSection } : section
+        );
+
+        const updatedContent: PageContent = {
+          ...pageContent,
+          sections: newSections,
+          metadata: {
+            ...pageContent.metadata,
+            lastModified: new Date().toISOString(),
+          },
+        };
+
+        set({ pageContent: updatedContent, isDirty: true });
+      },
+
+      duplicateSection: sectionId => {
+        const { pageContent, pushToUndoStack } = get();
+        if (!pageContent) return;
+
+        const sectionIndex = pageContent.sections.findIndex(
+          section => section.id === sectionId
+        );
+        if (sectionIndex === -1) return;
+
+        // Save current state to undo stack
+        pushToUndoStack(pageContent);
+
+        const originalSection = pageContent.sections[sectionIndex];
+        const duplicatedSection: PageSection = {
+          ...JSON.parse(JSON.stringify(originalSection)), // Deep clone
+          id: `section-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, // Generate new ID
+        };
+
+        const newSections = [...pageContent.sections];
+        newSections.splice(sectionIndex + 1, 0, duplicatedSection);
+
+        const updatedContent: PageContent = {
+          ...pageContent,
+          sections: newSections,
+          metadata: {
+            ...pageContent.metadata,
+            lastModified: new Date().toISOString(),
+          },
+        };
+
+        set({ pageContent: updatedContent, isDirty: true });
+      },
+
+      // Utility actions
+      markAsDirty: () => {
+        set({ isDirty: true });
+      },
+
+      markAsClean: () => {
+        set({ isDirty: false });
+      },
+
+      reset: () => {
+        set({
+          pageContent: null,
+          selectedComponentId: null,
+          undoStack: [],
+          redoStack: [],
+          isDirty: false,
+          isLoading: false,
+        });
+      },
+    }),
+    {
+      name: 'home-editor-store',
+    }
+  )
+);
diff --git a/lib/types/about-page-components.ts b/lib/types/about-page-components.ts
new file mode 100644
index 00000000..90e40b3d
--- /dev/null
+++ b/lib/types/about-page-components.ts
@@ -0,0 +1,324 @@
+/**
+ * Dynamic "About" Page Component Type Definitions
+ *
+ * This file defines all the types required for the dynamic component editor, including:
+ * - Component type enums
+ * - Layout type enums
+ * - Component instance structure
+ * - Page section structure
+ * - Page content structure
+ * - Prop interface definitions for various components
+ */
+
+// Supported layout types
+export type LayoutType = 'single-column' | 'two-column' | 'three-column';
+
+// Supported component types
+export type ComponentType =
+  | 'heading'
+  | 'paragraph'
+  | 'cards'
+  | 'button'
+  | 'image'
+  | 'divider';
+
+// Component instance interface
+export interface ComponentInstance {
+  id: string;
+  type: ComponentType;
+  props: Record<string, unknown>;
+  // Whether to inherit shared properties from the section (defaults to true)
+  inheritFromSection?: boolean;
+  // List of section property keys to override
+  overrideProps?: string[];
+}
+
+// Section shared properties interface
+export interface SectionCommonProps {
+  // Style theme
+  theme?: 'light' | 'dark' | 'auto';
+  // Spacing settings
+  spacing?: 'compact' | 'normal' | 'spacious';
+  // Text alignment
+  textAlign?: 'left' | 'center' | 'right';
+  // Animation effect
+  animation?: 'fade' | 'slide' | 'none';
+  // Whether it is interactive
+  interactive?: boolean;
+  // Drag behavior
+  dragBehavior?: 'inherit' | 'custom';
+  // Background style
+  backgroundColor?: string;
+  // Border style
+  borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
+  // Custom property extension
+  customProps?: Record<string, unknown>;
+}
+
+// Page section interface
+export interface PageSection {
+  id: string;
+  layout: LayoutType;
+  columns: ComponentInstance[][];
+  shouldDelete?: boolean;
+  // New: Section-level shared properties
+  commonProps?: SectionCommonProps;
+}
+
+// Page content interface
+export interface PageContent {
+  sections: PageSection[];
+  metadata?: {
+    version?: string;
+    lastModified?: string;
+    author?: string;
+  };
+}
+
+// === Component Props Interface Definitions ===
+
+// Heading component Props
+export interface HeadingProps {
+  content: string;
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  textAlign: 'left' | 'center' | 'right';
+}
+
+// Paragraph component Props
+export interface ParagraphProps {
+  content: string;
+  textAlign: 'left' | 'center' | 'right';
+}
+
+// Cards component Props
+export interface CardsProps {
+  layout: 'grid' | 'list';
+  items: Array<{
+    title: string;
+    description: string;
+    icon?: string;
+  }>;
+}
+
+// Button component Props
+export interface ButtonProps {
+  text: string;
+  variant: 'solid' | 'outline';
+  action: 'link' | 'submit' | 'external';
+  url?: string;
+  // Optional second button
+  secondaryButton?: {
+    text: string;
+    variant: 'solid' | 'outline';
+    action: 'link' | 'submit' | 'external';
+    url?: string;
+  };
+}
+
+// Image component Props
+export interface ImageProps {
+  src: string;
+  alt: string;
+  caption?: string;
+  alignment: 'left' | 'center' | 'right';
+  width?: string | number;
+  height?: string | number;
+}
+
+// Divider component Props
+export interface DividerProps {
+  style: 'solid' | 'dashed' | 'dotted';
+  color?: string;
+  thickness?: 'thin' | 'medium' | 'thick';
+}
+
+// Component Props union type
+export type ComponentProps =
+  | HeadingProps
+  | ParagraphProps
+  | CardsProps
+  | ButtonProps
+  | ImageProps
+  | DividerProps;
+
+// Component definition interface (for the component registration system)
+export interface ComponentDefinition {
+  type: ComponentType;
+  name: string;
+  icon: string;
+  defaultProps: Record<string, unknown>;
+  category: 'basic' | 'layout' | 'content' | 'media';
+  description?: string;
+}
+
+// Editor state interface
+export interface AboutEditorState {
+  pageContent: PageContent | null;
+  selectedComponentId: string | null;
+  undoStack: PageContent[];
+  redoStack: PageContent[];
+  isDirty: boolean;
+  isLoading: boolean;
+}
+
+// Drag result interface (from react-beautiful-dnd)
+export interface DragResult {
+  draggableId: string;
+  type: string;
+  source: {
+    droppableId: string;
+    index: number;
+  };
+  destination?: {
+    droppableId: string;
+    index: number;
+  } | null;
+}
+
+// ID generation related types
+export type IdPrefix = 'section' | 'comp';
+
+// Data migration related interfaces
+export interface LegacyAboutData {
+  title?: string;
+  subtitle?: string;
+  mission?: {
+    description?: string;
+  };
+  values?: {
+    items?: Array<{
+      title: string;
+      description: string;
+    }>;
+  };
+  buttonText?: string;
+  copyright?: {
+    prefix?: string;
+    linkText?: string;
+    suffix?: string;
+  };
+}
+
+// Extended "About" translation data interface, supporting dynamic component structure
+export interface AboutTranslationData {
+  // New dynamic component structure
+  sections?: PageSection[];
+
+  // Backward compatibility: Retain the original fixed structure (for data migration)
+  title?: string;
+  subtitle?: string;
+  mission?: {
+    description?: string;
+  };
+  values?: {
+    items?: Array<{
+      title: string;
+      description: string;
+    }>;
+  };
+  buttonText?: string;
+  copyright?: {
+    prefix?: string;
+    linkText?: string;
+    suffix?: string;
+  };
+
+  // Metadata
+  metadata?: {
+    version?: string;
+    lastModified?: string;
+    author?: string;
+    migrated?: boolean; // Flag to indicate if migration from fixed to dynamic structure has occurred
+  };
+}
+
+// Checks if the data is in the new dynamic format
+export function isDynamicFormat(data: AboutTranslationData): boolean {
+  return Boolean(data && data.sections && data.sections.length > 0);
+}
+
+// Checks if the data is in the old legacy format
+export function isLegacyFormat(data: AboutTranslationData): boolean {
+  return Boolean(
+    !data.sections &&
+      (data.title ||
+        data.subtitle ||
+        data.mission ||
+        data.values ||
+        data.buttonText)
+  );
+}
+
+// Re-export utility functions from data-migration for convenience
+export {
+  generateUniqueId,
+  createDefaultComponent,
+  createDefaultSection,
+  migrateLegacyToSections,
+  migrateAboutTranslationData,
+  batchMigrateTranslations,
+  validateMigratedData,
+  createBackupData,
+} from '@lib/utils/data-migration';
+
+// === Property Inheritance Utility Functions ===
+
+/**
+ * Merges section common properties and component-specific properties
+ *
+ * @param sectionCommonProps - Section-level common properties
+ * @param componentProps - Component-specific properties
+ * @param overrideProps - List of common property keys to override
+ * @returns The merged final properties object
+ */
+export function mergeComponentProps(
+  sectionCommonProps: SectionCommonProps = {},
+  componentProps: Record<string, unknown> = {},
+  overrideProps: string[] = []
+): Record<string, unknown> {
+  // Extract known properties and customProps from sectionCommonProps
+  const { customProps, ...knownSectionProps } = sectionCommonProps;
+
+  // Create a copy of all section properties (known + custom)
+  const allSectionProps = {
+    ...knownSectionProps,
+    ...(customProps || {}),
+  };
+
+  // Create inherited properties by removing overridden ones
+  const inherited = Object.fromEntries(
+    Object.entries(allSectionProps).filter(
+      ([key]) => !overrideProps.includes(key)
+    )
+  );
+
+  // Component-specific properties have higher priority
+  return {
+    ...inherited,
+    ...componentProps,
+  };
+}
+
+/**
+ * Gets the final resolved properties for a component (including inheritance logic)
+ *
+ * @param component - The component instance
+ * @param sectionCommonProps - The common properties of the section
+ * @returns The resolved final properties object
+ */
+export function getResolvedComponentProps(
+  component: ComponentInstance,
+  sectionCommonProps?: SectionCommonProps
+): Record<string, unknown> {
+  // If not inheriting or no section common props exist, return component props directly
+  if (component.inheritFromSection === false || !sectionCommonProps) {
+    return component.props;
+  }
+
+  // Merge properties (default inheritance)
+  return mergeComponentProps(
+    sectionCommonProps,
+    component.props,
+    component.overrideProps || []
+  );
+}
diff --git a/lib/utils/data-migration.ts b/lib/utils/data-migration.ts
new file mode 100644
index 00000000..5292b267
--- /dev/null
+++ b/lib/utils/data-migration.ts
@@ -0,0 +1,638 @@
+/**
+ * Data Migration Tool
+ *
+ * Provides functionality to migrate from a fixed structure to a dynamic component structure.
+ */
+import {
+  AboutTranslationData,
+  ComponentInstance,
+  ComponentType,
+  IdPrefix,
+  LegacyAboutData,
+  PageContent,
+  PageSection,
+} from '@lib/types/about-page-components';
+
+// Re-export types for use in other modules
+export type {
+  LegacyAboutData,
+  AboutTranslationData,
+  PageContent,
+  PageSection,
+  ComponentInstance,
+  ComponentType,
+  IdPrefix,
+} from '@lib/types/about-page-components';
+
+// Home page data structure interface
+export interface LegacyHomeData {
+  title?: string;
+  subtitle?: string;
+  getStarted?: string;
+  learnMore?: string;
+  features?: Array<{
+    title: string;
+    description: string;
+  }>;
+  copyright?: {
+    prefix?: string;
+    linkText?: string;
+    suffix?: string;
+  };
+}
+
+// Extended home page translation data interface, supporting a dynamic component structure
+export interface HomeTranslationData {
+  // New dynamic component structure
+  sections?: PageSection[];
+
+  // Backward compatibility: Retain the original fixed structure (for data migration)
+  title?: string;
+  subtitle?: string;
+  getStarted?: string;
+  learnMore?: string;
+  features?: Array<{
+    title: string;
+    description: string;
+  }>;
+  copyright?: {
+    prefix?: string;
+    linkText?: string;
+    suffix?: string;
+  };
+
+  // Metadata
+  metadata?: {
+    version?: string;
+    lastModified?: string;
+    author?: string;
+    migrated?: boolean; // Flag to indicate if migration from fixed to dynamic structure has occurred
+  };
+}
+
+// ID generation function
+export function generateUniqueId(prefix: IdPrefix): string {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).substr(2, 9);
+  return `${prefix}-${timestamp}-${random}`;
+}
+
+// Generate multiple unique IDs
+export function generateUniqueIds(prefix: IdPrefix, count: number): string[] {
+  return Array.from({ length: count }, () => generateUniqueId(prefix));
+}
+
+// Create a default component instance
+export function createDefaultComponent(
+  type: ComponentType,
+  content?: string
+): ComponentInstance {
+  const id = generateUniqueId('comp');
+
+  const defaultProps: Record<ComponentType, Record<string, unknown>> = {
+    heading: {
+      content: content || 'New Heading',
+      level: 2,
+      textAlign: 'left',
+    },
+    paragraph: {
+      content: content || 'New paragraph text',
+      textAlign: 'left',
+    },
+    button: {
+      text: content || 'New Button',
+      variant: 'solid',
+      action: 'link',
+      url: '#',
+    },
+    cards: {
+      layout: 'grid',
+      items: [],
+    },
+    image: {
+      src: '',
+      alt: content || 'Image',
+      alignment: 'center',
+      width: 'auto',
+      height: 'auto',
+    },
+    divider: {
+      style: 'solid',
+      color: 'gray',
+      thickness: 'medium',
+    },
+  };
+
+  return {
+    id,
+    type,
+    props: defaultProps[type] || {},
+    // Inherit section properties by default
+    inheritFromSection: true,
+    overrideProps: [],
+  };
+}
+
+// Create a default section
+export function createDefaultSection(
+  layout: 'single-column' | 'two-column' | 'three-column' = 'single-column'
+): PageSection {
+  const id = generateUniqueId('section');
+  const columnCount =
+    layout === 'single-column' ? 1 : layout === 'two-column' ? 2 : 3;
+
+  return {
+    id,
+    layout,
+    columns: Array(columnCount)
+      .fill([])
+      .map(() => []),
+    // Default common properties for the section
+    commonProps: {
+      theme: 'auto',
+      spacing: 'normal',
+      textAlign: 'left',
+      animation: 'none',
+      interactive: true,
+      dragBehavior: 'inherit',
+    },
+  };
+}
+
+// Migrate from a fixed structure to a dynamic component structure
+export function migrateLegacyToSections(legacy: LegacyAboutData): PageContent {
+  const sections: PageSection[] = [];
+
+  // Title and subtitle section
+  if (legacy.title || legacy.subtitle) {
+    const titleComponents: ComponentInstance[] = [];
+
+    if (legacy.title) {
+      titleComponents.push(createDefaultComponent('heading', legacy.title));
+      titleComponents[titleComponents.length - 1].props.level = 1;
+      titleComponents[titleComponents.length - 1].props.textAlign = 'center';
+    }
+
+    if (legacy.subtitle) {
+      titleComponents.push(
+        createDefaultComponent('paragraph', legacy.subtitle)
+      );
+      titleComponents[titleComponents.length - 1].props.textAlign = 'center';
+    }
+
+    if (titleComponents.length > 0) {
+      sections.push({
+        id: generateUniqueId('section'),
+        layout: 'single-column',
+        columns: [titleComponents],
+      });
+    }
+  }
+
+  // Mission section
+  if (legacy.mission?.description) {
+    sections.push({
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [
+        [
+          createDefaultComponent('heading', 'Our Mission'),
+          createDefaultComponent('paragraph', legacy.mission.description),
+        ],
+      ],
+    });
+  }
+
+  // Values section
+  if (legacy.values?.items && legacy.values.items.length > 0) {
+    const valuesSection: PageSection = {
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [[createDefaultComponent('heading', 'Our Values')]],
+    };
+
+    // Add cards component
+    const cardsComponent = createDefaultComponent('cards');
+    cardsComponent.props = {
+      layout: 'grid',
+      items: legacy.values.items,
+    };
+
+    valuesSection.columns[0].push(cardsComponent);
+    sections.push(valuesSection);
+  }
+
+  // Button section
+  if (legacy.buttonText) {
+    const buttonComponent = createDefaultComponent('button', legacy.buttonText);
+    buttonComponent.props.textAlign = 'center';
+    sections.push({
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [[buttonComponent]],
+    });
+  }
+
+  // Copyright section
+  if (legacy.copyright) {
+    const copyrightText = [
+      legacy.copyright.prefix?.replace(
+        '{year}',
+        new Date().getFullYear().toString()
+      ) || '',
+      legacy.copyright.linkText || '',
+      legacy.copyright.suffix || '',
+    ].join('');
+
+    if (copyrightText.trim()) {
+      const copyrightComponent = createDefaultComponent(
+        'paragraph',
+        copyrightText
+      );
+      copyrightComponent.props.textAlign = 'center';
+
+      sections.push({
+        id: generateUniqueId('section'),
+        layout: 'single-column',
+        columns: [[copyrightComponent]],
+      });
+    }
+  }
+
+  return {
+    sections,
+    metadata: {
+      version: '1.0.0',
+      lastModified: new Date().toISOString(),
+      author: 'system-migration',
+    },
+  };
+}
+
+// Migrate complete translation data
+export function migrateAboutTranslationData(
+  legacy: AboutTranslationData
+): AboutTranslationData {
+  // If it's already in the dynamic format, return directly
+  if (legacy.sections && legacy.sections.length > 0) {
+    return legacy;
+  }
+
+  // Migrate the fixed structure to the dynamic structure
+  const pageContent = migrateLegacyToSections(legacy);
+
+  return {
+    sections: pageContent.sections,
+    metadata: {
+      ...legacy.metadata,
+      ...pageContent.metadata,
+      migrated: true,
+    },
+  };
+}
+
+// Batch migrate multi-language data
+export function batchMigrateTranslations(
+  translations: Record<string, AboutTranslationData>
+): Record<string, AboutTranslationData> {
+  const migratedTranslations: Record<string, AboutTranslationData> = {};
+
+  for (const [locale, data] of Object.entries(translations)) {
+    migratedTranslations[locale] = migrateAboutTranslationData(data);
+  }
+
+  return migratedTranslations;
+}
+
+// Validate the integrity of the migrated data
+export function validateMigratedData(data: AboutTranslationData): {
+  isValid: boolean;
+  errors: string[];
+} {
+  const errors: string[] = [];
+
+  // Check if sections exist
+  if (!data.sections || data.sections.length === 0) {
+    errors.push('Migrated data is missing sections');
+  }
+
+  // Check the integrity of each section
+  data.sections?.forEach((section: PageSection, index: number) => {
+    if (!section.id) {
+      errors.push(`Section ${index} is missing an ID`);
+    }
+
+    if (!section.layout) {
+      errors.push(`Section ${index} is missing a layout configuration`);
+    }
+
+    if (!section.columns || !Array.isArray(section.columns)) {
+      errors.push(`Section ${index} has missing or invalid columns`);
+    }
+
+    // Check component integrity
+    section.columns?.forEach(
+      (column: ComponentInstance[], columnIndex: number) => {
+        if (!Array.isArray(column)) {
+          errors.push(
+            `Section ${index}, Column ${columnIndex} is not an array`
+          );
+          return;
+        }
+
+        column.forEach((component, componentIndex) => {
+          if (!component.id) {
+            errors.push(
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing an ID`
+            );
+          }
+
+          if (!component.type) {
+            errors.push(
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing a type`
+            );
+          }
+
+          if (!component.props) {
+            errors.push(
+              `Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing props`
+            );
+          }
+        });
+      }
+    );
+  });
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}
+
+// === Home Page Data Migration Functions ===
+
+// Check if the home page data is in the new dynamic format
+export function isHomeDynamicFormat(data: HomeTranslationData): boolean {
+  return Boolean(data && data.sections && data.sections.length > 0);
+}
+
+// Check if the home page data is in the old fixed format
+export function isHomeLegacyFormat(data: HomeTranslationData): boolean {
+  return Boolean(
+    !data.sections &&
+      (data.title ||
+        data.subtitle ||
+        data.getStarted ||
+        data.learnMore ||
+        data.features)
+  );
+}
+
+// Migrate from the home page's fixed structure to a dynamic component structure
+export function migrateHomeLegacyToSections(
+  legacy: LegacyHomeData
+): PageContent {
+  const sections: PageSection[] = [];
+
+  // Title and subtitle section
+  if (legacy.title || legacy.subtitle) {
+    const titleComponents: ComponentInstance[] = [];
+
+    if (legacy.title) {
+      titleComponents.push(createDefaultComponent('heading', legacy.title));
+      titleComponents[titleComponents.length - 1].props.level = 1;
+      titleComponents[titleComponents.length - 1].props.textAlign = 'center';
+    }
+
+    if (legacy.subtitle) {
+      titleComponents.push(
+        createDefaultComponent('paragraph', legacy.subtitle)
+      );
+      titleComponents[titleComponents.length - 1].props.textAlign = 'center';
+    }
+
+    if (titleComponents.length > 0) {
+      sections.push({
+        id: generateUniqueId('section'),
+        layout: 'single-column',
+        columns: [titleComponents],
+      });
+    }
+  }
+
+  // Features cards section
+  if (legacy.features && legacy.features.length > 0) {
+    const cardsComponent = createDefaultComponent('cards');
+    cardsComponent.props = {
+      layout: 'grid',
+      items: legacy.features,
+    };
+
+    sections.push({
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [[cardsComponent]],
+    });
+  }
+
+  // Double button section
+  if (legacy.getStarted || legacy.learnMore) {
+    const buttonComponent = createDefaultComponent(
+      'button',
+      legacy.getStarted || 'Get Started'
+    );
+
+    // If there are two buttons, use the double button feature
+    if (legacy.getStarted && legacy.learnMore) {
+      buttonComponent.props = {
+        text: legacy.getStarted,
+        variant: 'solid',
+        action: 'link',
+        url: '/chat',
+        secondaryButton: {
+          text: legacy.learnMore,
+          variant: 'outline',
+          action: 'link',
+          url: '/about',
+        },
+      };
+    } else {
+      // Single button
+      buttonComponent.props = {
+        text: legacy.getStarted || legacy.learnMore,
+        variant: 'solid',
+        action: 'link',
+        url: legacy.getStarted ? '/chat' : '/about',
+      };
+    }
+
+    sections.push({
+      id: generateUniqueId('section'),
+      layout: 'single-column',
+      columns: [[buttonComponent]],
+    });
+  }
+
+  // Copyright section
+  if (legacy.copyright) {
+    const copyrightText = [
+      legacy.copyright.prefix?.replace(
+        '{year}',
+        new Date().getFullYear().toString()
+      ) || '',
+      legacy.copyright.linkText || '',
+      legacy.copyright.suffix || '',
+    ].join('');
+
+    if (copyrightText.trim()) {
+      const copyrightComponent = createDefaultComponent(
+        'paragraph',
+        copyrightText
+      );
+      copyrightComponent.props.textAlign = 'center';
+
+      sections.push({
+        id: generateUniqueId('section'),
+        layout: 'single-column',
+        columns: [[copyrightComponent]],
+      });
+    }
+  }
+
+  return {
+    sections,
+    metadata: {
+      version: '1.0.0',
+      lastModified: new Date().toISOString(),
+      author: 'system-migration',
+    },
+  };
+}
+
+// Migrate complete home page translation data
+export function migrateHomeTranslationData(
+  legacy: HomeTranslationData
+): HomeTranslationData {
+  // If it's already in the dynamic format, return directly
+  if (legacy.sections && legacy.sections.length > 0) {
+    return legacy;
+  }
+
+  // Migrate the fixed structure to the dynamic structure
+  const pageContent = migrateHomeLegacyToSections(legacy);
+
+  return {
+    sections: pageContent.sections,
+    metadata: {
+      ...legacy.metadata,
+      ...pageContent.metadata,
+      migrated: true,
+    },
+  };
+}
+
+// Batch migrate multi-language home page data
+export function batchMigrateHomeTranslations(
+  translations: Record<string, HomeTranslationData>
+): Record<string, HomeTranslationData> {
+  const migratedTranslations: Record<string, HomeTranslationData> = {};
+
+  for (const [locale, data] of Object.entries(translations)) {
+    migratedTranslations[locale] = migrateHomeTranslationData(data);
+  }
+
+  return migratedTranslations;
+}
+
+// Validate the integrity of the migrated home page data
+export function validateHomeMigratedData(data: HomeTranslationData): {
+  isValid: boolean;
+  errors: string[];
+} {
+  const errors: string[] = [];
+
+  // Check if sections exist
+  if (!data.sections || data.sections.length === 0) {
+    errors.push('Migrated home page data is missing sections');
+  }
+
+  // Check the integrity of each section
+  data.sections?.forEach((section: PageSection, index: number) => {
+    if (!section.id) {
+      errors.push(`Home page Section ${index} is missing an ID`);
+    }
+
+    if (!section.layout) {
+      errors.push(
+        `Home page Section ${index} is missing a layout configuration`
+      );
+    }
+
+    if (!section.columns || !Array.isArray(section.columns)) {
+      errors.push(`Home page Section ${index} has missing or invalid columns`);
+    }
+
+    // Check component integrity
+    section.columns?.forEach(
+      (column: ComponentInstance[], columnIndex: number) => {
+        if (!Array.isArray(column)) {
+          errors.push(
+            `Home page Section ${index}, Column ${columnIndex} is not an array`
+          );
+          return;
+        }
+
+        column.forEach((component, componentIndex) => {
+          if (!component.id) {
+            errors.push(
+              `Home page Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing an ID`
+            );
+          }
+
+          if (!component.type) {
+            errors.push(
+              `Home page Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing a type`
+            );
+          }
+
+          if (!component.props) {
+            errors.push(
+              `Home page Section ${index}, Column ${columnIndex}, Component ${componentIndex} is missing props`
+            );
+          }
+        });
+      }
+    );
+  });
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+}
+
+// Create backup data
+export function createBackupData(data: AboutTranslationData): {
+  data: AboutTranslationData;
+  timestamp: string;
+  version: string;
+} {
+  return {
+    data: JSON.parse(JSON.stringify(data)), // Deep copy
+    timestamp: new Date().toISOString(),
+    version: '1.0.0',
+  };
+}
+
+// Create home page backup data
+export function createHomeBackupData(data: HomeTranslationData): {
+  data: HomeTranslationData;
+  timestamp: string;
+  version: string;
+} {
+  return {
+    data: JSON.parse(JSON.stringify(data)), // Deep copy
+    timestamp: new Date().toISOString(),
+    version: '1.0.0',
+  };
+}

From e6c61c2ec73f67b0ef386b2bc7c410ea24bce0c7 Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Wed, 13 Aug 2025 15:10:30 +0800
Subject: [PATCH 46/66] need resolve

---
 components/about/dynamic-about-renderer.tsx   | 386 ++++++++++++++++++
 .../admin/content/component-renderer.tsx      | 319 +++++++++++++++
 lib/utils/performance.ts                      | 301 ++++++++++++++
 3 files changed, 1006 insertions(+)
 create mode 100644 components/about/dynamic-about-renderer.tsx
 create mode 100644 components/admin/content/component-renderer.tsx
 create mode 100644 lib/utils/performance.ts

diff --git a/components/about/dynamic-about-renderer.tsx b/components/about/dynamic-about-renderer.tsx
new file mode 100644
index 00000000..1e694ae8
--- /dev/null
+++ b/components/about/dynamic-about-renderer.tsx
@@ -0,0 +1,386 @@
+'use client';
+
+import { Button } from '@components/ui/button';
+import { createClient } from '@lib/supabase/client';
+import type {
+  AboutTranslationData,
+  ComponentInstance,
+  PageContent,
+  PageSection,
+} from '@lib/types/about-page-components';
+import {
+  isDynamicFormat,
+  migrateAboutTranslationData,
+} from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import { motion } from 'framer-motion';
+
+import React, { Suspense, lazy, memo, useMemo } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+interface DynamicAboutRendererProps {
+  /**
+   * Translation data for the about page (legacy or dynamic format)
+   */
+  translationData: AboutTranslationData;
+  /**
+   * Theme colors object
+   */
+  colors: {
+    titleGradient: string;
+    textColor: string;
+    headingColor: string;
+    paragraphColor: string;
+    cardBg: string;
+    cardBorder: string;
+    cardShadow: string;
+    cardHeadingColor: string;
+    cardTextColor: string;
+    buttonClass: string;
+  };
+  /**
+   * Handle button click action
+   */
+  onButtonClick?: (url?: string) => void;
+}
+
+/**
+ * Dynamic About Page Renderer
+ *
+ * Renders about page content using dynamic component structure
+ * Falls back to legacy structure if dynamic data is not available
+ */
+export function DynamicAboutRenderer({
+  translationData,
+  colors,
+  onButtonClick,
+}: DynamicAboutRendererProps) {
+  const router = useRouter();
+
+  // Ensure we have dynamic format data
+  const dynamicData = React.useMemo(() => {
+    if (!isDynamicFormat(translationData)) {
+      return migrateAboutTranslationData(translationData);
+    }
+    return translationData;
+  }, [translationData]);
+
+  // Create page content from translation data
+  const pageContent: PageContent = React.useMemo(() => {
+    return {
+      sections: dynamicData.sections || [],
+      metadata: dynamicData.metadata || {
+        version: '1.0.0',
+        lastModified: new Date().toISOString(),
+        author: 'frontend',
+      },
+    };
+  }, [dynamicData]);
+
+  /**
+   * Handle button component clicks
+   */
+  const handleButtonClick = (component: ComponentInstance) => {
+    const { action, url } = component.props;
+
+    if (onButtonClick) {
+      onButtonClick(url as string);
+      return;
+    }
+
+    // Default button behavior based on action type
+    if (action === 'external' && url) {
+      window.open(url as string, '_blank', 'noopener,noreferrer');
+    } else if (action === 'link' && url) {
+      router.push(url as string);
+    } else {
+      // Default "Start Exploring" behavior - call the provided handler or navigate to chat
+      handleExploreClick();
+    }
+  };
+
+  // Default explore click handler
+  const handleExploreClick = async () => {
+    try {
+      const supabase = createClient();
+      const {
+        data: { user },
+      } = await supabase.auth.getUser();
+
+      if (user) {
+        router.push('/chat');
+      } else {
+        router.push('/login');
+      }
+    } catch (error) {
+      console.error('check login status failed:', error);
+      router.push('/login');
+    }
+  };
+
+  /**
+   * Memoized component loader for better performance
+   */
+  const ComponentLoader = memo<{ component: ComponentInstance; index: number }>(
+    ({ component, index }) => {
+      return renderComponentInternal(component, index, colors);
+    }
+  );
+
+  ComponentLoader.displayName = 'ComponentLoader';
+
+  /**
+   * Render individual component based on type
+   */
+  const renderComponentInternal = (
+    component: ComponentInstance,
+    index: number,
+    colors: any
+  ) => {
+    const { type, props } = component;
+
+    const baseAnimation = {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.6, delay: index * 0.1 },
+    };
+
+    switch (type) {
+      case 'heading':
+        const level = (props.level as number) || 1;
+        const HeadingTag = `h${level}` as
+          | 'h1'
+          | 'h2'
+          | 'h3'
+          | 'h4'
+          | 'h5'
+          | 'h6';
+        const headingSize = {
+          1: 'text-3xl sm:text-4xl md:text-5xl font-bold',
+          2: 'text-xl sm:text-2xl font-bold',
+          3: 'text-lg sm:text-xl font-semibold',
+          4: 'text-base sm:text-lg font-semibold',
+          5: 'text-sm sm:text-base font-medium',
+          6: 'text-xs sm:text-sm font-medium',
+        };
+
+        return (
+          <motion.div key={component.id} {...baseAnimation}>
+            <HeadingTag
+              className={cn(
+                headingSize[level as keyof typeof headingSize] ||
+                  headingSize[2],
+                level === 1 &&
+                  `bg-gradient-to-r bg-clip-text text-transparent ${colors.titleGradient}`,
+                level > 1 && colors.headingColor,
+                `text-${props.textAlign || 'left'}`,
+                level === 1 ? 'mb-4 sm:mb-6' : 'mb-4'
+              )}
+            >
+              {props.content as string}
+            </HeadingTag>
+          </motion.div>
+        );
+
+      case 'paragraph':
+        return (
+          <motion.p
+            key={component.id}
+            {...baseAnimation}
+            className={cn(
+              'text-sm leading-relaxed sm:text-base lg:text-lg',
+              colors.paragraphColor,
+              `text-${props.textAlign || 'left'}`
+            )}
+          >
+            {props.content as string}
+          </motion.p>
+        );
+
+      case 'cards':
+        const items =
+          (props.items as Array<{ title: string; description: string }>) || [];
+        return (
+          <motion.div
+            key={component.id}
+            {...baseAnimation}
+            className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2"
+          >
+            {items.map((item, cardIndex) => (
+              <motion.div
+                key={cardIndex}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.5 + cardIndex * 0.1 }}
+                className={cn(
+                  'rounded-xl border p-4 sm:p-6',
+                  colors.cardBg,
+                  colors.cardShadow,
+                  colors.cardBorder
+                )}
+              >
+                <h3
+                  className={cn(
+                    'mb-2 text-base font-semibold sm:text-lg',
+                    colors.cardHeadingColor
+                  )}
+                >
+                  {item.title}
+                </h3>
+                <p
+                  className={cn(
+                    'text-sm leading-relaxed sm:text-base',
+                    colors.cardTextColor
+                  )}
+                >
+                  {item.description}
+                </p>
+              </motion.div>
+            ))}
+          </motion.div>
+        );
+
+      case 'button':
+        return (
+          <motion.div
+            key={component.id}
+            {...baseAnimation}
+            className={cn(
+              props.textAlign === 'center' && 'text-center',
+              props.textAlign === 'right' && 'text-right'
+            )}
+          >
+            <Button
+              size="lg"
+              className={cn(
+                'h-auto rounded-lg font-medium transition-all duration-200',
+                'px-6 py-2 text-sm sm:px-8 sm:py-3 sm:text-base',
+                colors.buttonClass
+              )}
+              onClick={() => handleButtonClick(component)}
+            >
+              {props.text as string}
+            </Button>
+          </motion.div>
+        );
+
+      case 'image':
+        return (
+          <motion.div
+            key={component.id}
+            {...baseAnimation}
+            className={cn(
+              'flex flex-col',
+              props.alignment === 'center' && 'items-center',
+              props.alignment === 'right' && 'items-end'
+            )}
+          >
+            <img
+              src={props.src as string}
+              alt={props.alt as string}
+              className="rounded-lg shadow-lg"
+              style={{
+                width:
+                  props.width !== 'auto'
+                    ? (props.width as string | number)
+                    : undefined,
+                height:
+                  props.height !== 'auto'
+                    ? (props.height as string | number)
+                    : undefined,
+              }}
+            />
+            {typeof props.caption === 'string' && props.caption && (
+              <p className={cn('mt-2 text-sm', colors.paragraphColor)}>
+                {props.caption}
+              </p>
+            )}
+          </motion.div>
+        );
+
+      case 'divider':
+        return (
+          <motion.hr
+            key={component.id}
+            {...baseAnimation}
+            className={cn(
+              'my-6 border-0',
+              props.thickness === 'thin' && 'h-px',
+              props.thickness === 'medium' && 'h-0.5',
+              props.thickness === 'thick' && 'h-1',
+              props.style === 'dashed' && 'border-t border-dashed',
+              props.style === 'dotted' && 'border-t border-dotted',
+              props.color === 'gray' && 'bg-gray-300 dark:bg-gray-600',
+              !props.color && 'bg-gray-300 dark:bg-gray-600'
+            )}
+          />
+        );
+
+      default:
+        return (
+          <motion.div
+            key={component.id}
+            {...baseAnimation}
+            className="rounded-lg border border-red-200 bg-red-50 p-4 text-center text-red-600 dark:border-red-700 dark:bg-red-900/20 dark:text-red-400"
+          >
+            <p>Unknown component type: {type}</p>
+          </motion.div>
+        );
+    }
+  };
+
+  /**
+   * Render section with responsive layout
+   */
+  const renderSection = (section: PageSection, sectionIndex: number) => {
+    return (
+      <motion.section
+        key={section.id}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, delay: sectionIndex * 0.1 }}
+        className="mb-6 sm:mb-8 lg:mb-10"
+      >
+        <div
+          className={cn(
+            'grid gap-4 md:gap-6',
+            section.layout === 'single-column' && 'grid-cols-1',
+            section.layout === 'two-column' && 'grid-cols-1 md:grid-cols-2',
+            section.layout === 'three-column' &&
+              'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+          )}
+        >
+          {section.columns.map((column, columnIndex) => (
+            <div key={columnIndex} className="space-y-4">
+              {column.map((component, componentIndex) => (
+                <ComponentLoader
+                  key={component.id}
+                  component={component}
+                  index={sectionIndex + componentIndex}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </motion.section>
+    );
+  };
+
+  // Render all sections
+  if (!pageContent.sections || pageContent.sections.length === 0) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className={cn('text-lg', colors.textColor)}>No content available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl">
+      {pageContent.sections.map((section, index) =>
+        renderSection(section, index)
+      )}
+    </div>
+  );
+}
diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
new file mode 100644
index 00000000..9efab26c
--- /dev/null
+++ b/components/admin/content/component-renderer.tsx
@@ -0,0 +1,319 @@
+'use client';
+
+import {
+  CardsProps,
+  ComponentInstance,
+  DividerProps,
+  ButtonProps as DynamicButtonProps,
+  HeadingProps,
+  ImageProps,
+  ParagraphProps,
+  SectionCommonProps,
+  getResolvedComponentProps,
+} from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+
+import React from 'react';
+
+/**
+ * Heading component renderer
+ *
+ * Renders heading elements with homepage-style gradients and styling
+ */
+const Heading: React.FC<HeadingProps> = ({ content, level, textAlign }) => {
+  const textAlignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  const alignmentClass = textAlignClasses[textAlign];
+
+  // Define font sizes for different heading levels with responsive design
+  const sizeClasses = {
+    1: 'text-5xl md:text-6xl',
+    2: 'text-3xl sm:text-4xl md:text-5xl',
+    3: 'text-2xl sm:text-3xl md:text-4xl',
+    4: 'text-xl sm:text-2xl md:text-3xl',
+    5: 'text-lg sm:text-xl md:text-2xl',
+    6: 'text-base sm:text-lg md:text-xl',
+  };
+
+  // Apply gradient for large headings (H1, H2)
+  const shouldUseGradient = level <= 2;
+
+  if (shouldUseGradient) {
+    return React.createElement(
+      `h${level}`,
+      {
+        className: cn(
+          'bg-gradient-to-r from-stone-700 to-stone-900 dark:from-stone-300 dark:to-stone-500',
+          'mb-6 bg-clip-text py-3 leading-normal font-bold text-transparent',
+          sizeClasses[level],
+          alignmentClass
+        ),
+      },
+      content
+    );
+  }
+
+  return React.createElement(
+    `h${level}`,
+    {
+      className: cn(
+        'mb-4 font-bold text-stone-900 sm:mb-6 dark:text-stone-100',
+        sizeClasses[level],
+        alignmentClass
+      ),
+    },
+    content
+  );
+};
+
+/**
+ * Paragraph component renderer
+ *
+ * Renders paragraph text with stone color system styling
+ */
+const Paragraph: React.FC<ParagraphProps> = ({ content, textAlign }) => {
+  const textAlignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  return (
+    <p
+      className={cn(
+        'mb-4 text-lg leading-relaxed font-light text-stone-700 md:text-xl dark:text-stone-300',
+        'mx-auto max-w-3xl',
+        textAlignClasses[textAlign]
+      )}
+    >
+      {content}
+    </p>
+  );
+};
+
+/**
+ * Cards component renderer
+ *
+ * Renders a grid or list of cards with homepage-inspired shadows and stone color system
+ */
+const Cards: React.FC<CardsProps> = ({ items, layout }) => {
+  const gridClass = layout === 'grid' ? 'md:grid-cols-2' : 'grid-cols-1';
+
+  return (
+    <div className={cn('mb-6 grid grid-cols-1 gap-4 sm:gap-6', gridClass)}>
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className={cn(
+            'flex flex-col items-center rounded-xl p-4 text-center transition-all duration-200 sm:p-6',
+            'border border-stone-200 bg-stone-100 shadow-[0_4px_20px_rgba(0,0,0,0.1)]',
+            'hover:-translate-y-1 hover:shadow-[0_6px_25px_rgba(0,0,0,0.15)]',
+            'dark:border-stone-600 dark:bg-stone-700 dark:shadow-[0_4px_20px_rgba(0,0,0,0.3)]',
+            'dark:hover:shadow-[0_6px_25px_rgba(0,0,0,0.4)]'
+          )}
+        >
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-stone-200 dark:bg-stone-600">
+            <span className="text-xl text-stone-600 dark:text-stone-300">
+              #{index + 1}
+            </span>
+          </div>
+          <h3 className="mb-2 text-base font-semibold text-stone-900 sm:text-lg dark:text-stone-100">
+            {item.title}
+          </h3>
+          <p className="text-sm leading-relaxed text-stone-700 sm:text-base dark:text-stone-300">
+            {item.description}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Button component renderer
+ *
+ * Renders interactive buttons with stone color system variants
+ * Supports dual button layout with homepage-style spacing
+ */
+const DynamicButton: React.FC<DynamicButtonProps> = ({
+  text,
+  variant,
+  action,
+  url,
+  secondaryButton,
+}) => {
+  const handleClick = (
+    e: React.MouseEvent,
+    buttonAction?: string,
+    buttonUrl?: string
+  ) => {
+    if (buttonAction === 'link' && buttonUrl === '#') {
+      e.preventDefault();
+      // In preview mode, prevent default action
+    }
+  };
+
+  const buttonStyles = {
+    solid: cn(
+      'inline-flex items-center justify-center rounded-lg px-8 py-3 text-base font-medium transition-all duration-200',
+      'min-w-[8rem] bg-stone-900 text-white hover:scale-105 hover:bg-stone-800 focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-none',
+      'dark:bg-stone-100 dark:text-stone-900 dark:hover:bg-stone-200 dark:focus:ring-stone-400'
+    ),
+    outline: cn(
+      'inline-flex items-center justify-center rounded-lg px-8 py-3 text-base font-medium transition-all duration-200',
+      'min-w-[8rem] border border-stone-300 bg-transparent text-stone-900 hover:scale-105 hover:bg-stone-50 focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-none',
+      'dark:border-stone-600 dark:text-stone-100 dark:hover:bg-stone-800 dark:focus:ring-stone-400'
+    ),
+  };
+
+  return (
+    <div className="mb-6 flex flex-wrap justify-center gap-4">
+      <a
+        href={url || '#'}
+        onClick={e => handleClick(e, action, url)}
+        className={buttonStyles[variant]}
+      >
+        {text}
+      </a>
+      {secondaryButton && (
+        <a
+          href={secondaryButton.url || '#'}
+          onClick={e =>
+            handleClick(e, secondaryButton.action, secondaryButton.url)
+          }
+          className={buttonStyles[secondaryButton.variant]}
+        >
+          {secondaryButton.text}
+        </a>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Image component renderer
+ *
+ * Renders images with captions and alignment
+ */
+const Image: React.FC<ImageProps> = ({
+  src,
+  alt,
+  caption,
+  alignment,
+  width,
+  height,
+}) => {
+  const alignmentClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  const imageStyle: React.CSSProperties = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+    maxWidth: '100%',
+  };
+
+  return (
+    <div className={cn('mb-6', alignmentClasses[alignment])}>
+      <img
+        src={src}
+        alt={alt}
+        style={imageStyle}
+        className="rounded-lg shadow-sm"
+      />
+      {caption && (
+        <p className="text-muted-foreground mt-2 text-sm italic">{caption}</p>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Divider component renderer
+ *
+ * Renders horizontal dividers with different styles
+ */
+const Divider: React.FC<DividerProps> = ({ style, thickness, color }) => {
+  let borderStyle = 'border-solid';
+  if (style === 'dashed') borderStyle = 'border-dashed';
+  if (style === 'dotted') borderStyle = 'border-dotted';
+
+  let borderThickness = 'border-t';
+  if (thickness === 'medium') borderThickness = 'border-t-2';
+  if (thickness === 'thick') borderThickness = 'border-t-4';
+
+  const borderColor = color ? `border-${color}-300` : 'border-border';
+
+  return (
+    <hr className={cn(borderStyle, borderThickness, borderColor, 'my-6')} />
+  );
+};
+
+/**
+ * Component type to React component mapping
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const componentMap: Record<string, React.FC<any>> = {
+  heading: Heading,
+  paragraph: Paragraph,
+  cards: Cards,
+  button: DynamicButton,
+  image: Image,
+  divider: Divider,
+};
+
+/**
+ * Main component renderer
+ *
+ * Dynamically renders components based on their type
+ */
+interface ComponentRendererProps {
+  component: ComponentInstance;
+  className?: string;
+  sectionCommonProps?: SectionCommonProps;
+}
+
+const ComponentRenderer: React.FC<ComponentRendererProps> = ({
+  component,
+  className,
+  sectionCommonProps,
+}) => {
+  const Component = componentMap[component.type];
+
+  if (!Component) {
+    // Fallback for unregistered components
+    return (
+      <div
+        className={cn(
+          'border-destructive/50 bg-destructive/10 text-destructive rounded-lg border p-4 text-center',
+          className
+        )}
+      >
+        <p className="font-medium">
+          Component type &quot;{component.type}&quot; not found.
+        </p>
+        <p className="text-sm">Please check the component registration.</p>
+      </div>
+    );
+  }
+
+  // Final properties after merge (including inheritance logic)
+  const resolvedProps = getResolvedComponentProps(
+    component,
+    sectionCommonProps
+  );
+
+  return (
+    <div className={className}>
+      <Component {...resolvedProps} />
+    </div>
+  );
+};
+
+export default ComponentRenderer;
diff --git a/lib/utils/performance.ts b/lib/utils/performance.ts
new file mode 100644
index 00000000..5ca3e680
--- /dev/null
+++ b/lib/utils/performance.ts
@@ -0,0 +1,301 @@
+/**
+ * Performance optimization utilities
+ *
+ * Provides debouncing, throttling, and lazy loading utilities
+ * for better performance in dynamic component editing.
+ */
+import React from 'react';
+import { PageContent } from '@lib/types/about-page-components';
+
+/**
+ * Debounce function - delays execution until after delay period of inactivity
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+      timeoutId = null;
+    }, delay);
+  };
+}
+
+/**
+ * Throttle function - limits execution to at most once per delay period
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let lastCall = 0;
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return (...args: Parameters<T>) => {
+    const now = Date.now();
+
+    if (now - lastCall >= delay) {
+      lastCall = now;
+      func(...args);
+    } else if (!timeoutId) {
+      timeoutId = setTimeout(
+        () => {
+          lastCall = Date.now();
+          func(...args);
+          timeoutId = null;
+        },
+        delay - (now - lastCall)
+      );
+    }
+  };
+}
+
+/**
+ * Create a debounced callback using React hooks
+ */
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number,
+  deps: React.DependencyList
+): T {
+  const debouncedCallback = React.useMemo(
+    () => debounce(callback, delay),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [callback, delay, ...deps]
+  );
+
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => {
+      // Cancel any pending debounced calls
+      const debouncedFn = debouncedCallback as any;
+      if (debouncedFn.cancel) {
+        debouncedFn.cancel();
+      }
+    };
+  }, [debouncedCallback]);
+
+  return debouncedCallback as T;
+}
+
+/**
+ * Throttled callback hook
+ */
+export function useThrottledCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number,
+  deps: React.DependencyList
+): T {
+  const throttledCallback = React.useMemo(
+    () => throttle(callback, delay),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    deps
+  );
+
+  return throttledCallback as T;
+}
+
+/**
+ * Virtual scrolling helper for large lists
+ */
+export interface VirtualScrollOptions {
+  itemHeight: number;
+  containerHeight: number;
+  overscan?: number;
+}
+
+export interface VirtualScrollResult {
+  startIndex: number;
+  endIndex: number;
+  offsetY: number;
+  totalHeight: number;
+}
+
+export function calculateVirtualScroll(
+  scrollTop: number,
+  itemCount: number,
+  options: VirtualScrollOptions
+): VirtualScrollResult {
+  const { itemHeight, containerHeight, overscan = 2 } = options;
+
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(
+    itemCount - 1,
+    Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
+  );
+
+  return {
+    startIndex,
+    endIndex,
+    offsetY: startIndex * itemHeight,
+    totalHeight: itemCount * itemHeight,
+  };
+}
+
+/**
+ * Intersection Observer hook for lazy loading
+ */
+export function useIntersectionObserver(
+  ref: React.RefObject<Element>,
+  options: IntersectionObserverInit = {}
+) {
+  const [isIntersecting, setIsIntersecting] = React.useState(false);
+  const [hasIntersected, setHasIntersected] = React.useState(false);
+
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      const isElementIntersecting = entry.isIntersecting;
+      setIsIntersecting(isElementIntersecting);
+
+      if (isElementIntersecting && !hasIntersected) {
+        setHasIntersected(true);
+      }
+    }, options);
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  }, [ref, options, hasIntersected]);
+
+  return { isIntersecting, hasIntersected };
+}
+
+/**
+ * Performance monitoring utilities
+ */
+export class PerformanceMonitor {
+  private static measurements = new Map<string, number>();
+
+  static startMeasurement(name: string): void {
+    this.measurements.set(name, performance.now());
+  }
+
+  static endMeasurement(name: string): number | null {
+    const startTime = this.measurements.get(name);
+    if (!startTime) return null;
+
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+
+    this.measurements.delete(name);
+
+    // Log slow operations in development
+    if (process.env.NODE_ENV === 'development' && duration > 16) {
+      console.warn(
+        `Slow operation detected: ${name} took ${duration.toFixed(2)}ms`
+      );
+    }
+
+    return duration;
+  }
+
+  static measureAsync<T>(name: string, fn: () => Promise<T>): Promise<T> {
+    this.startMeasurement(name);
+    return fn().finally(() => {
+      this.endMeasurement(name);
+    });
+  }
+
+  static measure<T>(name: string, fn: () => T): T {
+    this.startMeasurement(name);
+    try {
+      return fn();
+    } finally {
+      this.endMeasurement(name);
+    }
+  }
+}
+
+/**
+ * Memoization utilities
+ */
+export function createMemoizedSelector<T, R>(
+  selector: (input: T) => R,
+  areEqual: (a: T, b: T) => boolean = Object.is
+): (input: T) => R {
+  let lastInput: T;
+  let lastResult: R;
+  let hasResult = false;
+
+  return (input: T): R => {
+    if (!hasResult || !areEqual(input, lastInput)) {
+      lastInput = input;
+      lastResult = selector(input);
+      hasResult = true;
+    }
+    return lastResult;
+  };
+}
+
+/**
+ * Deep comparison for React dependency arrays
+ */
+export function useDeepCompareMemoize<T>(value: T): T {
+  const ref = React.useRef<T>(value);
+  const signalRef = React.useRef<number>(0);
+
+  if (!deepEqual(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useMemo(() => ref.current, [signalRef.current]);
+}
+
+/**
+ * Simple deep equality check
+ */
+function deepEqual(a: any, b: any): boolean {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== 'object') return a === b;
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false;
+    if (!deepEqual(a[key], b[key])) return false;
+  }
+
+  return true;
+}
+
+/**
+ * Optimized deep clone using structuredClone with fallback
+ */
+export function deepClone<T>(obj: T): T {
+  if (typeof structuredClone !== 'undefined') {
+    return structuredClone(obj);
+  }
+  
+  // Fallback for older browsers
+  return JSON.parse(JSON.stringify(obj));
+}
+
+/**
+ * Specialized clone function for PageContent with optimized structure copying
+ */
+export function clonePageContent(pageContent: PageContent): PageContent {
+  return {
+    ...pageContent,
+    sections: pageContent.sections.map(section => ({
+      ...section,
+      columns: section.columns.map(column => [...column.map(comp => ({ ...comp, props: { ...comp.props } }))])
+    })),
+    metadata: pageContent.metadata ? { ...pageContent.metadata } : undefined
+  };
+}

From 70413f3d88503ca26398bee7f8bb608a0435c271 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Wed, 13 Aug 2025 15:22:10 +0800
Subject: [PATCH 47/66] fix(eslint): clean up unused imports and add necessary
 eslint disables

---
 components/about/dynamic-about-renderer.tsx | 15 +++++++++--
 lib/utils/performance.ts                    | 29 ++++++++++++++-------
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/components/about/dynamic-about-renderer.tsx b/components/about/dynamic-about-renderer.tsx
index 1e694ae8..165febcf 100644
--- a/components/about/dynamic-about-renderer.tsx
+++ b/components/about/dynamic-about-renderer.tsx
@@ -15,7 +15,7 @@ import {
 import { cn } from '@lib/utils';
 import { motion } from 'framer-motion';
 
-import React, { Suspense, lazy, memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -136,7 +136,18 @@ export function DynamicAboutRenderer({
   const renderComponentInternal = (
     component: ComponentInstance,
     index: number,
-    colors: any
+    colors: {
+      titleGradient: string;
+      textColor: string;
+      headingColor: string;
+      paragraphColor: string;
+      cardBg: string;
+      cardBorder: string;
+      cardShadow: string;
+      cardHeadingColor: string;
+      cardTextColor: string;
+      buttonClass: string;
+    }
   ) => {
     const { type, props } = component;
 
diff --git a/lib/utils/performance.ts b/lib/utils/performance.ts
index 5ca3e680..346dd5e1 100644
--- a/lib/utils/performance.ts
+++ b/lib/utils/performance.ts
@@ -4,13 +4,14 @@
  * Provides debouncing, throttling, and lazy loading utilities
  * for better performance in dynamic component editing.
  */
-import React from 'react';
 import { PageContent } from '@lib/types/about-page-components';
 
+import React from 'react';
+
 /**
  * Debounce function - delays execution until after delay period of inactivity
  */
-export function debounce<T extends (...args: any[]) => any>(
+export function debounce<T extends (...args: unknown[]) => unknown>(
   func: T,
   delay: number
 ): (...args: Parameters<T>) => void {
@@ -31,7 +32,7 @@ export function debounce<T extends (...args: any[]) => any>(
 /**
  * Throttle function - limits execution to at most once per delay period
  */
-export function throttle<T extends (...args: any[]) => any>(
+export function throttle<T extends (...args: unknown[]) => unknown>(
   func: T,
   delay: number
 ): (...args: Parameters<T>) => void {
@@ -60,6 +61,7 @@ export function throttle<T extends (...args: any[]) => any>(
 /**
  * Create a debounced callback using React hooks
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useDebouncedCallback<T extends (...args: any[]) => any>(
   callback: T,
   delay: number,
@@ -75,7 +77,7 @@ export function useDebouncedCallback<T extends (...args: any[]) => any>(
   React.useEffect(() => {
     return () => {
       // Cancel any pending debounced calls
-      const debouncedFn = debouncedCallback as any;
+      const debouncedFn = debouncedCallback as { cancel?: () => void };
       if (debouncedFn.cancel) {
         debouncedFn.cancel();
       }
@@ -88,6 +90,7 @@ export function useDebouncedCallback<T extends (...args: any[]) => any>(
 /**
  * Throttled callback hook
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useThrottledCallback<T extends (...args: any[]) => any>(
   callback: T,
   delay: number,
@@ -256,7 +259,7 @@ export function useDeepCompareMemoize<T>(value: T): T {
 /**
  * Simple deep equality check
  */
-function deepEqual(a: any, b: any): boolean {
+function deepEqual(a: unknown, b: unknown): boolean {
   if (a === b) return true;
   if (a == null || b == null) return a === b;
   if (typeof a !== typeof b) return false;
@@ -268,7 +271,13 @@ function deepEqual(a: any, b: any): boolean {
 
   for (const key of keysA) {
     if (!keysB.includes(key)) return false;
-    if (!deepEqual(a[key], b[key])) return false;
+    if (
+      !deepEqual(
+        (a as Record<string, unknown>)[key],
+        (b as Record<string, unknown>)[key]
+      )
+    )
+      return false;
   }
 
   return true;
@@ -281,7 +290,7 @@ export function deepClone<T>(obj: T): T {
   if (typeof structuredClone !== 'undefined') {
     return structuredClone(obj);
   }
-  
+
   // Fallback for older browsers
   return JSON.parse(JSON.stringify(obj));
 }
@@ -294,8 +303,10 @@ export function clonePageContent(pageContent: PageContent): PageContent {
     ...pageContent,
     sections: pageContent.sections.map(section => ({
       ...section,
-      columns: section.columns.map(column => [...column.map(comp => ({ ...comp, props: { ...comp.props } }))])
+      columns: section.columns.map(column =>
+        column.map(comp => ({ ...comp, props: { ...comp.props } }))
+      ),
     })),
-    metadata: pageContent.metadata ? { ...pageContent.metadata } : undefined
+    metadata: pageContent.metadata ? { ...pageContent.metadata } : undefined,
   };
 }

From a93ac48ddb542a9c336e3c53995e5703dca32125 Mon Sep 17 00:00:00 2001
From: lijiapeng365 <lijiapeng365@163.com>
Date: Thu, 14 Aug 2025 13:38:45 +0800
Subject: [PATCH 48/66] feat(admin): add ESC key support to close context menu

Add keyboard shortcut to close component edit menu in admin content editor.
Users can now press ESC key to dismiss the context menu in addition to
existing X button and backdrop click methods.
---
 components/admin/content/context-menu.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/components/admin/content/context-menu.tsx b/components/admin/content/context-menu.tsx
index afb73ea0..b6d92140 100644
--- a/components/admin/content/context-menu.tsx
+++ b/components/admin/content/context-menu.tsx
@@ -65,6 +65,20 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
     }
   }, [x, y]);
 
+  // Handle ESC key press to close the context menu
+  useEffect(() => {
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeKey);
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [onClose]);
+
   const handleInputChange = (name: string, value: unknown) => {
     if (!component) return;
     onPropsChange({ ...component.props, [name]: value });

From ca4b0874cd412a8baa8dc1baa4400647caa2156f Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Thu, 14 Aug 2025 14:26:49 +0800
Subject: [PATCH 49/66] refactor(admin): remove unused useTheme import and
 isDark variable

- Clean up after merge conflict resolution
- Remove unused import from useTheme hook
- Remove unused isDark destructured variable
---
 app/admin/content/page.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index 77b16747..a1441019 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -10,7 +10,6 @@ import { ResizableSplitPane } from '@components/ui/resizable-split-pane';
 import type { SupportedLocale } from '@lib/config/language-config';
 import { getCurrentLocaleFromCookie } from '@lib/config/language-config';
 import { clearTranslationCache } from '@lib/hooks/use-dynamic-translations';
-import { useTheme } from '@lib/hooks/use-theme';
 import { TranslationService } from '@lib/services/admin/content/translation-service';
 import { useAboutEditorStore } from '@lib/stores/about-editor-store';
 import { useHomeEditorStore } from '@lib/stores/home-editor-store';
@@ -55,7 +54,6 @@ interface HomePageConfig {
 }
 
 export default function ContentManagementPage() {
-  const { isDark } = useTheme();
   const searchParams = useSearchParams();
   const router = useRouter();
   const t = useTranslations('pages.admin.content.page');

From c15a922a8a5d2a776a45859500b8a91056365bb3 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Thu, 14 Aug 2025 14:34:39 +0800
Subject: [PATCH 50/66] fix(admin): restore correct height calculation for
 content page

- Change h-screen back to h-[calc(100vh-3rem)] to account for admin header
- Fixes page scrolling issue introduced during upstream merge
- Admin layout has fixed header with ~3rem height that needs to be excluded
- Restores original behavior where only component containers scroll, not the whole page
---
 app/admin/content/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index a1441019..b95b9547 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -372,7 +372,7 @@ export default function ContentManagementPage() {
   return (
     <div
       className={cn(
-        'flex h-screen flex-col overflow-hidden',
+        'flex h-[calc(100vh-3rem)] flex-col overflow-hidden',
         'bg-stone-100 dark:bg-stone-950'
       )}
     >

From 8c5a46e081f9c00655b498d9061fb8dc64f4b7aa Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Thu, 14 Aug 2025 14:40:51 +0800
Subject: [PATCH 51/66] feat(admin): optimize content editor header layout

- Move toolbar buttons (Undo, Redo, Add Section) to same line as language selector
- Improve space utilization by combining header elements in single row
- Use items-end alignment to properly align buttons with select dropdown
- Remove unnecessary vertical spacing now that header is single row
- Enhance UI compactness while maintaining visual hierarchy
---
 components/admin/content/about-editor.tsx | 84 +++++++++++------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 26066ef0..399bacd2 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -348,12 +348,12 @@ export function AboutEditor({
         {/* Header */}
         <div
           className={cn(
-            'space-y-4 border-b p-4',
+            'border-b p-4',
             'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
           )}
         >
-          {/* Language Selector */}
-          <div className="flex items-center justify-between">
+          {/* Language Selector and Action Buttons */}
+          <div className="flex items-end justify-between gap-4">
             <div className="space-y-1">
               <label className="text-sm font-medium">
                 {t('common.editLanguage')}
@@ -396,45 +396,45 @@ export function AboutEditor({
               </Select>
             </div>
 
-            {/* Status Badges */}
-            <div className="flex items-center gap-2">
-              {isDirty && <Badge variant="secondary">Unsaved</Badge>}
-              <Badge variant="outline">
-                {pageContent.sections.length} sections
-              </Badge>
-            </div>
-          </div>
-
-          {/* Action Buttons */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={undo}
-                disabled={undoStack.length === 0}
-              >
-                <Undo2 className="mr-2 h-4 w-4" />
-                Undo
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={redo}
-                disabled={redoStack.length === 0}
-              >
-                <Redo2 className="mr-2 h-4 w-4" />
-                Redo
-              </Button>
-              <Separator orientation="vertical" className="h-8" />
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => addSection('single-column')}
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                Add Section
-              </Button>
+            <div className="flex items-center gap-4">
+              {/* Action Buttons */}
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={undo}
+                  disabled={undoStack.length === 0}
+                >
+                  <Undo2 className="mr-2 h-4 w-4" />
+                  Undo
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={redo}
+                  disabled={redoStack.length === 0}
+                >
+                  <Redo2 className="mr-2 h-4 w-4" />
+                  Redo
+                </Button>
+                <Separator orientation="vertical" className="h-8" />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => addSection('single-column')}
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add Section
+                </Button>
+              </div>
+
+              {/* Status Badges */}
+              <div className="flex items-center gap-2">
+                {isDirty && <Badge variant="secondary">Unsaved</Badge>}
+                <Badge variant="outline">
+                  {pageContent.sections.length} sections
+                </Badge>
+              </div>
             </div>
           </div>
         </div>

From 3431426b8f3132e71b64c4124f650fbfeff957a6 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Thu, 14 Aug 2025 15:08:51 +0800
Subject: [PATCH 52/66] feat(admin): improve drag preview experience with
 simplified component previews
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add DragPreviewRenderer component for compact drag previews
- Replace full component rendering with simplified previews during drag
- Show component type, icon, and content summary instead of full content
- Optimize DragOverlay with max dimensions (300px × 80px)
- Enhance shadow and styling for better visual feedback
- Preserve all component data and functionality after drop
- Significantly improve drag experience for large components
---
 components/admin/content/about-editor.tsx     |  15 +-
 components/admin/content/dnd-context.tsx      |   6 +-
 .../admin/content/drag-preview-renderer.tsx   | 141 ++++++++++++++++++
 3 files changed, 151 insertions(+), 11 deletions(-)
 create mode 100644 components/admin/content/drag-preview-renderer.tsx

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index 399bacd2..f9659b65 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -36,6 +36,7 @@ import ComponentRenderer from './component-renderer';
 import { ContextMenu } from './context-menu';
 import { Droppable, Sortable, SortableContainer } from './dnd-components';
 import { DndContextWrapper } from './dnd-context';
+import { DragPreviewRenderer } from './drag-preview-renderer';
 
 interface AboutEditorProps {
   translations: Record<SupportedLocale, AboutTranslationData>;
@@ -543,22 +544,16 @@ export function AboutEditor({
                             )}
 
                             {column.map(component => {
-                              const componentPreview = (
-                                <div
-                                  className={cn(
-                                    'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
-                                    'border-stone-200 bg-white dark:border-stone-600 dark:bg-stone-800'
-                                  )}
-                                >
-                                  <ComponentRenderer component={component} />
-                                </div>
+                              // Use simplified drag preview for better drag experience
+                              const dragPreview = (
+                                <DragPreviewRenderer component={component} />
                               );
 
                               return (
                                 <Sortable
                                   key={component.id}
                                   id={component.id}
-                                  preview={componentPreview}
+                                  preview={dragPreview}
                                   className={cn(
                                     'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
                                     selectedComponentId === component.id
diff --git a/components/admin/content/dnd-context.tsx b/components/admin/content/dnd-context.tsx
index 72db924f..1b08236e 100644
--- a/components/admin/content/dnd-context.tsx
+++ b/components/admin/content/dnd-context.tsx
@@ -121,11 +121,15 @@ export function DndContextWrapper({
             <DragOverlay dropAnimation={dropWasSuccessful ? null : undefined}>
               {activeItem ? (
                 <div
-                  className={`rounded-lg border bg-white p-2 shadow-lg transition-all duration-200 dark:bg-gray-800 ${
+                  className={`rounded-lg border bg-white shadow-xl transition-all duration-200 dark:bg-gray-800 ${
                     isAnimatingOut
                       ? 'scale-95 transform opacity-0'
                       : 'scale-100 opacity-100'
                   }`}
+                  style={{
+                    maxWidth: '300px',
+                    maxHeight: '80px',
+                  }}
                 >
                   {activeItem.content}
                 </div>
diff --git a/components/admin/content/drag-preview-renderer.tsx b/components/admin/content/drag-preview-renderer.tsx
new file mode 100644
index 00000000..02f10ea8
--- /dev/null
+++ b/components/admin/content/drag-preview-renderer.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import type { ComponentInstance } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import {
+  AlignLeft,
+  Grid3x3,
+  Image as ImageIcon,
+  Minus,
+  MousePointer,
+  Type,
+} from 'lucide-react';
+
+import React from 'react';
+
+interface DragPreviewRendererProps {
+  component: ComponentInstance;
+  className?: string;
+}
+
+/**
+ * Simplified drag preview renderer for components
+ *
+ * Displays a compact preview that shows the component type and key information
+ * without taking up too much screen space during drag operations
+ */
+export function DragPreviewRenderer({
+  component,
+  className,
+}: DragPreviewRendererProps) {
+  const getComponentIcon = (type: string) => {
+    switch (type) {
+      case 'heading':
+        return <Type className="h-4 w-4" />;
+      case 'paragraph':
+        return <AlignLeft className="h-4 w-4" />;
+      case 'button':
+        return <MousePointer className="h-4 w-4" />;
+      case 'cards':
+        return <Grid3x3 className="h-4 w-4" />;
+      case 'image':
+        return <ImageIcon className="h-4 w-4" />;
+      case 'divider':
+        return <Minus className="h-4 w-4" />;
+      default:
+        return <Type className="h-4 w-4" />;
+    }
+  };
+
+  const getPreviewText = (component: ComponentInstance): string => {
+    const { type, props } = component;
+
+    switch (type) {
+      case 'heading':
+        return `Heading: "${String(props.content || 'New Heading').slice(0, 30)}${String(props.content || '').length > 30 ? '...' : ''}"`;
+
+      case 'paragraph':
+        return `Paragraph: "${String(props.content || 'New paragraph').slice(0, 35)}${String(props.content || '').length > 35 ? '...' : ''}"`;
+
+      case 'button':
+        return `Button: "${String(props.text || 'Click me')}"`;
+
+      case 'cards':
+        const items = props.items as Array<{ title?: string }> | undefined;
+        const itemCount = items?.length || 0;
+        return `Cards: ${itemCount} item${itemCount !== 1 ? 's' : ''}`;
+
+      case 'image':
+        const alt = String(props.alt || 'Image');
+        return `Image: ${alt}`;
+
+      case 'divider':
+        return `Divider`;
+
+      default:
+        return `Component: ${type}`;
+    }
+  };
+
+  const getComponentTypeName = (type: string): string => {
+    switch (type) {
+      case 'heading':
+        return 'Heading';
+      case 'paragraph':
+        return 'Paragraph';
+      case 'button':
+        return 'Button';
+      case 'cards':
+        return 'Cards';
+      case 'image':
+        return 'Image';
+      case 'divider':
+        return 'Divider';
+      default:
+        return 'Component';
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-md border p-3 transition-colors',
+        'min-h-[60px] max-w-[280px]',
+        'border-stone-200 bg-stone-50 shadow-sm',
+        'dark:border-stone-600 dark:bg-stone-700',
+        className
+      )}
+    >
+      {/* Component Icon */}
+      <div
+        className={cn(
+          'flex-shrink-0 rounded-md p-2',
+          'bg-stone-200 text-stone-600',
+          'dark:bg-stone-600 dark:text-stone-300'
+        )}
+      >
+        {getComponentIcon(component.type)}
+      </div>
+
+      {/* Component Info */}
+      <div className="min-w-0 flex-1">
+        <p
+          className={cn(
+            'text-sm font-medium',
+            'text-stone-900 dark:text-stone-100'
+          )}
+        >
+          {getComponentTypeName(component.type)}
+        </p>
+        <p
+          className={cn(
+            'truncate text-xs',
+            'text-stone-600 dark:text-stone-400'
+          )}
+        >
+          {getPreviewText(component)}
+        </p>
+      </div>
+    </div>
+  );
+}

From d36b5046eceecdeda4d00ddc4869a4e6d933942b Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Thu, 14 Aug 2025 15:21:55 +0800
Subject: [PATCH 53/66] feat(admin): add section drag and drop reordering
 capability

- Add SectionDragPreview component for compact section previews
- Enable section dragging by wrapping sections in Sortable components
- Add grip handle icon that appears on hover for clear drag affordance
- Extend handleDragEnd logic to support section reordering
- Allow dropping sections on existing drop zones between sections
- Preserve all section content and layout during reordering
- Add proper drag state visual feedback and cursor changes
- Improve user experience with intuitive section organization
---
 components/admin/content/about-editor.tsx     | 387 ++++++++++--------
 .../admin/content/section-drag-preview.tsx    |  95 +++++
 lib/stores/about-editor-store.ts              |  79 ++++
 3 files changed, 383 insertions(+), 178 deletions(-)
 create mode 100644 components/admin/content/section-drag-preview.tsx

diff --git a/components/admin/content/about-editor.tsx b/components/admin/content/about-editor.tsx
index f9659b65..30a97042 100644
--- a/components/admin/content/about-editor.tsx
+++ b/components/admin/content/about-editor.tsx
@@ -25,7 +25,7 @@ import {
   useDebouncedCallback,
   useThrottledCallback,
 } from '@lib/utils/performance';
-import { Plus, Redo2, Trash2, Undo2 } from 'lucide-react';
+import { GripVertical, Plus, Redo2, Trash2, Undo2 } from 'lucide-react';
 
 import React, { useCallback, useEffect, useMemo } from 'react';
 
@@ -37,6 +37,7 @@ import { ContextMenu } from './context-menu';
 import { Droppable, Sortable, SortableContainer } from './dnd-components';
 import { DndContextWrapper } from './dnd-context';
 import { DragPreviewRenderer } from './drag-preview-renderer';
+import { SectionDragPreview } from './section-drag-preview';
 
 interface AboutEditorProps {
   translations: Record<SupportedLocale, AboutTranslationData>;
@@ -458,203 +459,233 @@ export function AboutEditor({
               className="space-y-6 p-6"
               onContextMenu={handleGlobalContextMenu}
             >
-              {pageContent.sections.map((section, sectionIndex) => (
-                <div key={section.id} className="space-y-4">
-                  {/* Section Drop Zone (before each section) */}
-                  {sectionIndex > 0 && (
-                    <Droppable
-                      id={`section-drop-${sectionIndex}`}
-                      className="h-2 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-stone-400 hover:bg-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-800"
-                    >
-                      {(isOver: boolean) => (
-                        <div
-                          className={cn(
-                            'flex h-full items-center justify-center text-sm font-medium text-stone-600 transition-opacity duration-200 dark:text-stone-400',
-                            isOver || undefined
-                              ? 'opacity-100'
-                              : 'opacity-0 hover:opacity-100'
-                          )}
-                        >
-                          Drop here to create new section
-                        </div>
-                      )}
-                    </Droppable>
-                  )}
-
-                  {/* Section Content */}
-                  <div
-                    className={cn(
-                      'rounded-lg border p-4',
-                      'border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800'
+              {pageContent.sections.map((section, sectionIndex) => {
+                // Create drag preview for section
+                const sectionDragPreview = (
+                  <SectionDragPreview
+                    section={section}
+                    sectionIndex={sectionIndex}
+                  />
+                );
+
+                return (
+                  <div key={section.id} className="space-y-4">
+                    {/* Section Drop Zone (before each section) */}
+                    {sectionIndex > 0 && (
+                      <Droppable
+                        id={`section-drop-${sectionIndex}`}
+                        className="h-2 rounded-lg border-2 border-dashed border-transparent transition-all duration-200 hover:h-16 hover:border-stone-400 hover:bg-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-800"
+                      >
+                        {(isOver: boolean) => (
+                          <div
+                            className={cn(
+                              'flex h-full items-center justify-center text-sm font-medium text-stone-600 transition-opacity duration-200 dark:text-stone-400',
+                              isOver || undefined
+                                ? 'opacity-100'
+                                : 'opacity-0 hover:opacity-100'
+                            )}
+                          >
+                            Drop here to reorder sections
+                          </div>
+                        )}
+                      </Droppable>
                     )}
-                  >
-                    <div className="pb-3">
-                      <div className="flex items-center justify-between">
-                        <h3
-                          className={cn(
-                            'text-sm font-medium',
-                            'text-stone-600 dark:text-stone-400'
-                          )}
-                        >
-                          Section {sectionIndex + 1} • {section.layout}
-                        </h3>
-                        <button
-                          onClick={() => {
-                            deleteSection(section.id);
-                          }}
-                          className={cn(
-                            'flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors',
-                            'hover:bg-red-100 dark:hover:bg-red-900/50'
-                          )}
-                        >
-                          <Trash2 className="h-3 w-3" />
-                        </button>
-                      </div>
-                    </div>
-                    <div
+
+                    {/* Draggable Section Content */}
+                    <Sortable
+                      id={`section-${section.id}`}
+                      preview={sectionDragPreview}
                       className={cn(
-                        'grid gap-4',
-                        section.layout === 'single-column' && 'grid-cols-1',
-                        section.layout === 'two-column' && 'grid-cols-2',
-                        section.layout === 'three-column' && 'grid-cols-3'
+                        'group cursor-grab rounded-lg border p-4 transition-all',
+                        'border-stone-200 bg-white hover:border-stone-300 hover:shadow-md',
+                        'dark:border-stone-700 dark:bg-stone-800 dark:hover:border-stone-600'
                       )}
                     >
-                      {section.columns.map((column, columnIndex) => {
-                        const columnItems = column.map(comp => comp.id);
-                        return (
-                          <SortableContainer
-                            key={`${section.id}-${columnIndex}`}
-                            id={`section-${section.id}-${columnIndex}`}
-                            items={columnItems}
+                      <div className="pb-3">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <GripVertical
+                              className={cn(
+                                'h-4 w-4 text-stone-400 opacity-0 transition-opacity group-hover:opacity-100',
+                                'dark:text-stone-500'
+                              )}
+                            />
+                            <h3
+                              className={cn(
+                                'text-sm font-medium',
+                                'text-stone-600 dark:text-stone-400'
+                              )}
+                            >
+                              Section {sectionIndex + 1} • {section.layout}
+                            </h3>
+                          </div>
+                          <button
+                            onClick={e => {
+                              e.stopPropagation();
+                              deleteSection(section.id);
+                            }}
                             className={cn(
-                              'min-h-24 rounded-md border-2 border-dashed p-3 transition-all duration-200',
-                              'border-stone-300 bg-stone-50 hover:border-stone-400 hover:bg-stone-100',
-                              'dark:border-stone-600 dark:bg-stone-700/50 dark:hover:border-stone-500 dark:hover:bg-stone-600/50'
+                              'flex h-6 w-6 items-center justify-center rounded p-0 text-red-500 transition-colors',
+                              'hover:bg-red-100 dark:hover:bg-red-900/50'
                             )}
                           >
-                            {column.length === 0 && (
-                              <div
-                                className={cn(
-                                  'flex h-16 items-center justify-center text-sm',
-                                  'text-stone-500 dark:text-stone-400'
-                                )}
-                              >
-                                Drop components here
-                              </div>
-                            )}
-
-                            {column.map(component => {
-                              // Use simplified drag preview for better drag experience
-                              const dragPreview = (
-                                <DragPreviewRenderer component={component} />
-                              );
-
-                              return (
-                                <Sortable
-                                  key={component.id}
-                                  id={component.id}
-                                  preview={dragPreview}
+                            <Trash2 className="h-3 w-3" />
+                          </button>
+                        </div>
+                      </div>
+                      <div
+                        className={cn(
+                          'grid gap-4',
+                          section.layout === 'single-column' && 'grid-cols-1',
+                          section.layout === 'two-column' && 'grid-cols-2',
+                          section.layout === 'three-column' && 'grid-cols-3'
+                        )}
+                      >
+                        {section.columns.map((column, columnIndex) => {
+                          const columnItems = column.map(comp => comp.id);
+                          return (
+                            <SortableContainer
+                              key={`${section.id}-${columnIndex}`}
+                              id={`section-${section.id}-${columnIndex}`}
+                              items={columnItems}
+                              className={cn(
+                                'min-h-24 rounded-md border-2 border-dashed p-3 transition-all duration-200',
+                                'border-stone-300 bg-stone-50 hover:border-stone-400 hover:bg-stone-100',
+                                'dark:border-stone-600 dark:bg-stone-700/50 dark:hover:border-stone-500 dark:hover:bg-stone-600/50'
+                              )}
+                            >
+                              {column.length === 0 && (
+                                <div
                                   className={cn(
-                                    'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
-                                    selectedComponentId === component.id
-                                      ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
-                                      : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
+                                    'flex h-16 items-center justify-center text-sm',
+                                    'text-stone-500 dark:text-stone-400'
                                   )}
-                                  onClick={() =>
-                                    handleComponentClick(component.id)
-                                  }
-                                  onDoubleClick={() =>
-                                    handleDoubleClick(component.id)
-                                  }
-                                  onContextMenu={e =>
-                                    handleContextMenu(e, component.id)
-                                  }
-                                  data-component-id={component.id}
                                 >
-                                  {editingComponent?.componentId ===
-                                  component.id ? (
-                                    <div
-                                      className="space-y-2"
-                                      onClick={e => {
-                                        // Prevent event bubbling to parent Sortable component
-                                        e.stopPropagation();
-                                      }}
-                                      onMouseDown={e => {
-                                        // Prevent event bubbling to parent Sortable component
-                                        e.stopPropagation();
-                                      }}
-                                    >
-                                      <textarea
-                                        value={editingComponent.content}
-                                        onChange={e =>
-                                          handleEditInputChange(e.target.value)
-                                        }
+                                  Drop components here
+                                </div>
+                              )}
+
+                              {column.map(component => {
+                                // Use simplified drag preview for better drag experience
+                                const dragPreview = (
+                                  <DragPreviewRenderer component={component} />
+                                );
+
+                                return (
+                                  <Sortable
+                                    key={component.id}
+                                    id={component.id}
+                                    preview={dragPreview}
+                                    className={cn(
+                                      'mb-3 cursor-pointer rounded-lg border p-3 transition-all',
+                                      selectedComponentId === component.id
+                                        ? 'border-stone-500 bg-stone-100 dark:border-stone-400 dark:bg-stone-700'
+                                        : 'border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50 dark:border-stone-600 dark:bg-stone-800 dark:hover:border-stone-500 dark:hover:bg-stone-700'
+                                    )}
+                                    onClick={() =>
+                                      handleComponentClick(component.id)
+                                    }
+                                    onDoubleClick={() =>
+                                      handleDoubleClick(component.id)
+                                    }
+                                    onContextMenu={e =>
+                                      handleContextMenu(e, component.id)
+                                    }
+                                    data-component-id={component.id}
+                                  >
+                                    {editingComponent?.componentId ===
+                                    component.id ? (
+                                      <div
+                                        className="space-y-2"
                                         onClick={e => {
-                                          // Prevent event bubbling when clicking inside textarea
+                                          // Prevent event bubbling to parent Sortable component
                                           e.stopPropagation();
                                         }}
                                         onMouseDown={e => {
-                                          // Prevent event bubbling when mouse down in textarea
+                                          // Prevent event bubbling to parent Sortable component
                                           e.stopPropagation();
                                         }}
-                                        onKeyDown={e => {
-                                          if (e.key === 'Enter' && e.ctrlKey) {
-                                            e.preventDefault();
-                                            handleSaveEdit();
-                                          }
-                                          if (e.key === 'Escape') {
-                                            e.preventDefault();
-                                            setEditingComponent(null);
-                                          }
-                                          e.stopPropagation(); // Prevent parent keyboard handlers
-                                        }}
-                                        className="resize-vertical min-h-[60px] w-full rounded border p-2 text-sm focus:ring-2 focus:ring-stone-500 focus:outline-none"
-                                        placeholder="Enter content..."
-                                        autoFocus
-                                        onBlur={e => {
-                                          // Only auto-save if focus is truly leaving the editing area
-                                          // Check if focus is moving to another element outside the editing container
-                                          const relatedTarget =
-                                            e.relatedTarget as HTMLElement;
-                                          const editContainer =
-                                            e.currentTarget.closest(
-                                              '.space-y-2'
-                                            );
-
-                                          if (
-                                            !relatedTarget ||
-                                            !editContainer?.contains(
-                                              relatedTarget
+                                      >
+                                        <textarea
+                                          value={editingComponent.content}
+                                          onChange={e =>
+                                            handleEditInputChange(
+                                              e.target.value
                                             )
-                                          ) {
-                                            // Auto-save on blur if there are changes and focus truly left
-                                            setTimeout(() => {
-                                              if (editingComponent) {
-                                                handleSaveEdit();
-                                              }
-                                            }, 100);
                                           }
-                                        }}
-                                      />
-                                      <div className="text-muted-foreground flex gap-2 text-xs">
-                                        <span>
-                                          Ctrl+Enter to save • Escape to cancel
-                                        </span>
+                                          onClick={e => {
+                                            // Prevent event bubbling when clicking inside textarea
+                                            e.stopPropagation();
+                                          }}
+                                          onMouseDown={e => {
+                                            // Prevent event bubbling when mouse down in textarea
+                                            e.stopPropagation();
+                                          }}
+                                          onKeyDown={e => {
+                                            if (
+                                              e.key === 'Enter' &&
+                                              e.ctrlKey
+                                            ) {
+                                              e.preventDefault();
+                                              handleSaveEdit();
+                                            }
+                                            if (e.key === 'Escape') {
+                                              e.preventDefault();
+                                              setEditingComponent(null);
+                                            }
+                                            e.stopPropagation(); // Prevent parent keyboard handlers
+                                          }}
+                                          className="resize-vertical min-h-[60px] w-full rounded border p-2 text-sm focus:ring-2 focus:ring-stone-500 focus:outline-none"
+                                          placeholder="Enter content..."
+                                          autoFocus
+                                          onBlur={e => {
+                                            // Only auto-save if focus is truly leaving the editing area
+                                            // Check if focus is moving to another element outside the editing container
+                                            const relatedTarget =
+                                              e.relatedTarget as HTMLElement;
+                                            const editContainer =
+                                              e.currentTarget.closest(
+                                                '.space-y-2'
+                                              );
+
+                                            if (
+                                              !relatedTarget ||
+                                              !editContainer?.contains(
+                                                relatedTarget
+                                              )
+                                            ) {
+                                              // Auto-save on blur if there are changes and focus truly left
+                                              setTimeout(() => {
+                                                if (editingComponent) {
+                                                  handleSaveEdit();
+                                                }
+                                              }, 100);
+                                            }
+                                          }}
+                                        />
+                                        <div className="text-muted-foreground flex gap-2 text-xs">
+                                          <span>
+                                            Ctrl+Enter to save • Escape to
+                                            cancel
+                                          </span>
+                                        </div>
                                       </div>
-                                    </div>
-                                  ) : (
-                                    <ComponentRenderer component={component} />
-                                  )}
-                                </Sortable>
-                              );
-                            })}
-                          </SortableContainer>
-                        );
-                      })}
-                    </div>
+                                    ) : (
+                                      <ComponentRenderer
+                                        component={component}
+                                      />
+                                    )}
+                                  </Sortable>
+                                );
+                              })}
+                            </SortableContainer>
+                          );
+                        })}
+                      </div>
+                    </Sortable>
                   </div>
-                </div>
-              ))}
+                );
+              })}
 
               {/* Final Drop Zone */}
               <Droppable
diff --git a/components/admin/content/section-drag-preview.tsx b/components/admin/content/section-drag-preview.tsx
new file mode 100644
index 00000000..e27f23ef
--- /dev/null
+++ b/components/admin/content/section-drag-preview.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import type { PageSection } from '@lib/types/about-page-components';
+import { cn } from '@lib/utils';
+import { Columns, Grid2x2, Grid3x3 } from 'lucide-react';
+
+import React from 'react';
+
+interface SectionDragPreviewProps {
+  section: PageSection;
+  sectionIndex: number;
+  className?: string;
+}
+
+/**
+ * Simplified drag preview renderer for sections
+ *
+ * Displays a compact preview that shows the section layout and component count
+ * without taking up too much screen space during drag operations
+ */
+export function SectionDragPreview({
+  section,
+  sectionIndex,
+  className,
+}: SectionDragPreviewProps) {
+  const getLayoutIcon = (layout: string) => {
+    switch (layout) {
+      case 'single-column':
+        return <Columns className="h-4 w-4" />;
+      case 'two-column':
+        return <Grid2x2 className="h-4 w-4" />;
+      case 'three-column':
+        return <Grid3x3 className="h-4 w-4" />;
+      default:
+        return <Columns className="h-4 w-4" />;
+    }
+  };
+
+  const getLayoutName = (layout: string): string => {
+    switch (layout) {
+      case 'single-column':
+        return 'single-column';
+      case 'two-column':
+        return 'two-column';
+      case 'three-column':
+        return 'three-column';
+      default:
+        return layout;
+    }
+  };
+
+  // Calculate total component count across all columns
+  const totalComponents = section.columns.reduce(
+    (total, column) => total + column.length,
+    0
+  );
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-md border p-3 transition-colors',
+        'min-h-[60px] max-w-[280px]',
+        'border-stone-300 bg-stone-100 shadow-sm',
+        'dark:border-stone-500 dark:bg-stone-800',
+        className
+      )}
+    >
+      {/* Section Icon */}
+      <div
+        className={cn(
+          'flex-shrink-0 rounded-md p-2',
+          'bg-stone-200 text-stone-600',
+          'dark:bg-stone-600 dark:text-stone-300'
+        )}
+      >
+        {getLayoutIcon(section.layout)}
+      </div>
+
+      {/* Section Info */}
+      <div className="min-w-0 flex-1">
+        <p
+          className={cn(
+            'text-sm font-medium',
+            'text-stone-900 dark:text-stone-100'
+          )}
+        >
+          Section {sectionIndex + 1} • {getLayoutName(section.layout)}
+        </p>
+        <p className={cn('text-xs', 'text-stone-600 dark:text-stone-400')}>
+          {totalComponents} component{totalComponents !== 1 ? 's' : ''}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index cd4ec67d..bcfd2c99 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -227,6 +227,85 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     console.log('Active data:', active.data.current);
     console.log('Over data:', over.data.current);
 
+    // Handle section reordering
+    if (activeId.startsWith('section-')) {
+      const activeSectionId = activeId.replace('section-', '');
+
+      // Find the active section
+      const activeSectionIndex = newPageContent.sections.findIndex(
+        section => section.id === activeSectionId
+      );
+
+      if (activeSectionIndex === -1) {
+        console.log('❌ Active section not found:', activeSectionId);
+        return false;
+      }
+
+      let targetIndex = -1;
+
+      // Handle dropping on section drop zones
+      if (overId.startsWith('section-drop-')) {
+        if (overId === 'section-drop-final') {
+          // Drop at the end
+          targetIndex = newPageContent.sections.length;
+        } else {
+          // Drop before a specific section
+          const dropIndex = parseInt(overId.replace('section-drop-', ''));
+          targetIndex = dropIndex;
+        }
+      } else {
+        console.log('❌ Invalid drop target for section:', overId);
+        return false;
+      }
+
+      // Ensure valid target index (allow insertion at the end)
+      if (targetIndex < 0 || targetIndex > newPageContent.sections.length) {
+        console.log(
+          '❌ Invalid target index for section reordering:',
+          targetIndex
+        );
+        return false;
+      }
+
+      // Adjust target index if moving forward
+      let finalTargetIndex = targetIndex;
+      if (activeSectionIndex < targetIndex) {
+        finalTargetIndex = targetIndex - 1;
+      }
+
+      // Don't move if dropping on the same position
+      if (activeSectionIndex === finalTargetIndex) {
+        console.log('✅ Section dropped on same position, no change needed');
+        return true;
+      }
+
+      console.log('🔄 SECTION REORDER:', {
+        activeSectionId,
+        activeSectionIndex,
+        targetIndex,
+        finalTargetIndex,
+        totalSections: newPageContent.sections.length,
+      });
+
+      // Remove the section from its current position
+      const [movedSection] = newPageContent.sections.splice(
+        activeSectionIndex,
+        1
+      );
+
+      // Insert the section at the new position
+      newPageContent.sections.splice(finalTargetIndex, 0, movedSection);
+
+      // Update the state
+      set({
+        pageContent: newPageContent,
+        isDirty: true,
+      });
+
+      console.log('✅ Section reordered successfully');
+      return true;
+    }
+
     // Handle dragging from component palette
     if (activeId.startsWith('palette-')) {
       const componentType = activeId.replace('palette-', '');

From c6f653402d2dd6e118ba2e0f43a4d3a2de084fba Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Thu, 14 Aug 2025 19:06:47 +0800
Subject: [PATCH 54/66] fix(admin): restore content editor scrolling when
 preview panel is disabled

---
 app/admin/content/page.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/admin/content/page.tsx b/app/admin/content/page.tsx
index b95b9547..825346bc 100644
--- a/app/admin/content/page.tsx
+++ b/app/admin/content/page.tsx
@@ -506,14 +506,12 @@ export default function ContentManagementPage() {
             }
           />
         ) : (
-          <div className={cn('relative flex-1', 'bg-white dark:bg-stone-900')}>
-            <div className="h-full overflow-auto p-6">{renderEditor()}</div>
+          <div
+            className={cn('flex h-full flex-col', 'bg-white dark:bg-stone-900')}
+          >
+            <div className="flex-1 overflow-auto px-6">{renderEditor()}</div>
             <div
-              className={cn(
-                'absolute right-0 bottom-0 left-0 p-4',
-                'bg-white/80 dark:bg-stone-900/80',
-                'backdrop-blur-sm'
-              )}
+              className={cn('flex-shrink-0 p-4', 'bg-white dark:bg-stone-900')}
             >
               <div className="flex items-center justify-between">
                 <div>

From 646757dd4734d440b90f858a210d75b62a2f50f8 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Thu, 14 Aug 2025 19:30:33 +0800
Subject: [PATCH 55/66] feat(admin): optimize mobile card layout in content
 preview

- Add previewDevice parameter to ComponentRenderer interface
- Update Cards component to force single-column layout on mobile preview
- Pass previewDevice from AboutPreview and HomePreviewDynamic to ComponentRenderer
- Maintain responsive two-column layout for desktop and tablet previews
---
 components/admin/content/about-preview.tsx    |  1 +
 .../admin/content/component-renderer.tsx      | 27 ++++++++++++++++---
 .../admin/content/home-preview-dynamic.tsx    |  1 +
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/components/admin/content/about-preview.tsx b/components/admin/content/about-preview.tsx
index a179e602..cc332ed6 100644
--- a/components/admin/content/about-preview.tsx
+++ b/components/admin/content/about-preview.tsx
@@ -172,6 +172,7 @@ export function AboutPreview({
                       <ComponentRenderer
                         component={component}
                         sectionCommonProps={section.commonProps}
+                        previewDevice={previewDevice}
                       />
                     </motion.div>
                   ))}
diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index 9efab26c..a1178b7f 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -100,8 +100,21 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, textAlign }) => {
  *
  * Renders a grid or list of cards with homepage-inspired shadows and stone color system
  */
-const Cards: React.FC<CardsProps> = ({ items, layout }) => {
-  const gridClass = layout === 'grid' ? 'md:grid-cols-2' : 'grid-cols-1';
+const Cards: React.FC<
+  CardsProps & { previewDevice?: 'desktop' | 'tablet' | 'mobile' }
+> = ({ items, layout, previewDevice = 'desktop' }) => {
+  // Determine grid layout based on layout prop and preview device
+  const getGridClass = () => {
+    if (layout !== 'grid') return 'grid-cols-1';
+
+    // For mobile preview, always use single column
+    if (previewDevice === 'mobile') return 'grid-cols-1';
+
+    // For desktop and tablet, use responsive two-column layout
+    return 'md:grid-cols-2';
+  };
+
+  const gridClass = getGridClass();
 
   return (
     <div className={cn('mb-6 grid grid-cols-1 gap-4 sm:gap-6', gridClass)}>
@@ -277,12 +290,14 @@ interface ComponentRendererProps {
   component: ComponentInstance;
   className?: string;
   sectionCommonProps?: SectionCommonProps;
+  previewDevice?: 'desktop' | 'tablet' | 'mobile';
 }
 
 const ComponentRenderer: React.FC<ComponentRendererProps> = ({
   component,
   className,
   sectionCommonProps,
+  previewDevice = 'desktop',
 }) => {
   const Component = componentMap[component.type];
 
@@ -309,9 +324,15 @@ const ComponentRenderer: React.FC<ComponentRendererProps> = ({
     sectionCommonProps
   );
 
+  // Add previewDevice to props if component supports it
+  const componentProps =
+    component.type === 'cards'
+      ? { ...resolvedProps, previewDevice }
+      : resolvedProps;
+
   return (
     <div className={className}>
-      <Component {...resolvedProps} />
+      <Component {...componentProps} />
     </div>
   );
 };
diff --git a/components/admin/content/home-preview-dynamic.tsx b/components/admin/content/home-preview-dynamic.tsx
index 20f19efd..fae0b3a6 100644
--- a/components/admin/content/home-preview-dynamic.tsx
+++ b/components/admin/content/home-preview-dynamic.tsx
@@ -172,6 +172,7 @@ export function HomePreviewDynamic({
                       <ComponentRenderer
                         component={component}
                         sectionCommonProps={section.commonProps}
+                        previewDevice={previewDevice}
                       />
                     </motion.div>
                   ))}

From 6e00b31a8a8137df4f54a40b57f6be7093ceaed3 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Fri, 15 Aug 2025 19:10:39 +0800
Subject: [PATCH 56/66] fix(admin): enable dragging existing components to
 empty areas to create new sections

Previously, only components dragged from the palette could create new sections
when dropped on empty areas. Existing components dragged to empty areas would
fail because the drag handler only checked for palette components.

Now both palette components and existing components can create new sections
when dropped on section-drop zones, providing consistent drag behavior.
---
 lib/stores/about-editor-store.ts | 85 ++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index bcfd2c99..45214927 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -474,6 +474,91 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
         return false;
       }
     } else {
+      // Handle dropping existing components on section drop zones (creates new section)
+      if (overId.startsWith('section-drop-')) {
+        console.log('🔄 EXISTING COMPONENT DROP ON SECTION-DROP:', overId);
+
+        // Find the source component
+        let sourceLocation = null;
+        for (
+          let sectionIndex = 0;
+          sectionIndex < newPageContent.sections.length;
+          sectionIndex++
+        ) {
+          const section = newPageContent.sections[sectionIndex];
+          for (
+            let columnIndex = 0;
+            columnIndex < section.columns.length;
+            columnIndex++
+          ) {
+            const column = section.columns[columnIndex];
+            const componentIndex = column.findIndex(
+              comp => comp.id === activeId
+            );
+            if (componentIndex !== -1) {
+              sourceLocation = {
+                sectionIndex,
+                columnIndex,
+                componentIndex,
+                section,
+                column,
+                component: column[componentIndex],
+              };
+              break;
+            }
+          }
+          if (sourceLocation) break;
+        }
+
+        if (!sourceLocation) {
+          console.log('❌ SOURCE COMPONENT NOT FOUND:', activeId);
+          return false;
+        }
+
+        // Remove component from source
+        const [movedComponent] = sourceLocation.column.splice(
+          sourceLocation.componentIndex,
+          1
+        );
+
+        // Create a new section with the moved component
+        const newSection = createDefaultSection('single-column');
+        newSection.columns[0].push(movedComponent);
+
+        // Handle different drop zones
+        if (overId === 'section-drop-final') {
+          // Add to the end
+          newPageContent.sections.push(newSection);
+        } else {
+          // Parse the drop zone index to insert at the right position
+          const dropIndex = parseInt(overId.replace('section-drop-', ''));
+          newPageContent.sections.splice(dropIndex, 0, newSection);
+        }
+
+        console.log('✅ NEW SECTION CREATED WITH EXISTING COMPONENT:', {
+          componentId: movedComponent.id,
+          fromSection: sourceLocation.section.id,
+          fromColumn: sourceLocation.columnIndex,
+          newSectionId: newSection.id,
+        });
+
+        // Clean up empty sections
+        const cleanedSections = newPageContent.sections.filter(section =>
+          section.columns.some(column => column.length > 0)
+        );
+
+        // Save changes and return success
+        set(state => ({
+          pageContent: { ...newPageContent, sections: cleanedSections },
+          undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+          redoStack: [],
+          isDirty: true,
+        }));
+
+        console.log('✅ EXISTING COMPONENT SECTION DROP SUCCESSFUL');
+        return true;
+      }
+
       // Handle moving existing components within or between containers
       const activeContainer = active.data.current?.sortable?.containerId;
       const overContainer = over.data.current?.sortable?.containerId || overId;

From 470d77ba22929445bf50eb552927d672e1a53ea1 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Fri, 15 Aug 2025 19:58:56 +0800
Subject: [PATCH 57/66] fix(home): update dynamic data detection to use
 sections array directly

- Modified Home component to check for 'sections' array instead of full home object
- Updated HomeDynamic component to extract sections directly from translation data
- Removed unused imports and variables to pass linting
- Fixes IntlError and "No dynamic home data found" issues
- Home page now correctly detects and renders dynamic content
- Preserves language switcher and admin button functionality

Resolves issues with home page not displaying due to translation data structure changes.
---
 components/home/home-dynamic.tsx |  60 +++-----
 components/home/index.tsx        | 227 ++++++-------------------------
 2 files changed, 60 insertions(+), 227 deletions(-)

diff --git a/components/home/home-dynamic.tsx b/components/home/home-dynamic.tsx
index 40cacfeb..1215c0fc 100644
--- a/components/home/home-dynamic.tsx
+++ b/components/home/home-dynamic.tsx
@@ -8,16 +8,9 @@ import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
 import { useTheme } from '@lib/hooks/use-theme';
 import type { PageContent } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
-import type { HomeTranslationData } from '@lib/utils/data-migration';
-import {
-  isHomeDynamicFormat,
-  migrateHomeTranslationData,
-} from '@lib/utils/data-migration';
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { useCallback, useEffect, useState } from 'react';
-
-import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
 
 /**
  * Dynamic Home Page Component
@@ -28,20 +21,10 @@ import { useTranslations } from 'next-intl';
 export function HomeDynamic() {
   const { isDark } = useTheme();
   const [mounted, setMounted] = useState(false);
-  const staticT = useTranslations('pages.home');
   const { t: dynamicT, isLoading } = useDynamicTranslations({
     sections: ['pages.home'],
   });
 
-  // Enhanced translation function with dynamic/static fallback
-  const t = useCallback(
-    (key: string, params?: Record<string, string | number | Date>) => {
-      const dynamicValue = dynamicT(key, 'pages.home', params);
-      return dynamicValue || staticT(key, params);
-    },
-    [dynamicT, staticT]
-  );
-
   // Ensure client-side rendering consistency
   useEffect(() => {
     setMounted(true);
@@ -54,48 +37,37 @@ export function HomeDynamic() {
     // Convert translation data to PageContent
     const createPageContent = () => {
       try {
-        // Get the raw home translation data
-        const homeData: HomeTranslationData = {
-          title: t('title'),
-          subtitle: t('subtitle'),
-          getStarted: t('getStarted'),
-          learnMore: t('learnMore'),
-          features: staticT.raw('features') as Array<{
-            title: string;
-            description: string;
-          }>,
-          copyright: {
-            prefix: t('copyright.prefix'),
-            linkText: t('copyright.linkText'),
-            suffix: t('copyright.suffix'),
-          },
-        };
-
-        // Migrate to dynamic format if needed
-        const dynamicData = isHomeDynamicFormat(homeData)
-          ? homeData
-          : migrateHomeTranslationData(homeData);
+        // Directly get sections array from the translation data
+        const sections = dynamicT('sections', 'pages.home');
 
-        if (dynamicData.sections) {
+        if (sections && Array.isArray(sections) && sections.length > 0) {
+          // Direct dynamic format
           const content: PageContent = {
-            sections: dynamicData.sections,
-            metadata: dynamicData.metadata || {
+            sections: sections,
+            metadata: {
               version: '1.0.0',
               lastModified: new Date().toISOString(),
               author: 'system',
             },
           };
           setPageContent(content);
+          console.log(
+            'HomeDynamic: Page content created with',
+            sections.length,
+            'sections'
+          );
+        } else {
+          console.error('HomeDynamic: No valid dynamic home sections found');
         }
       } catch (error) {
-        console.error('Failed to create page content:', error);
+        console.error('HomeDynamic: Failed to create page content:', error);
       }
     };
 
     if (mounted && !isLoading) {
       createPageContent();
     }
-  }, [mounted, isLoading, t, staticT]);
+  }, [mounted, isLoading, dynamicT]);
 
   // Get colors based on theme
   const getColors = () => {
diff --git a/components/home/index.tsx b/components/home/index.tsx
index a4702c8b..a8b87423 100644
--- a/components/home/index.tsx
+++ b/components/home/index.tsx
@@ -1,36 +1,23 @@
 'use client';
 
-import { AdminButton } from '@components/admin/admin-button';
 import { Button } from '@components/ui/button';
-import { LanguageSwitcher } from '@components/ui/language-switcher';
 import { PageLoader } from '@components/ui/page-loader';
 import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
-import { createClient } from '@lib/supabase/client';
-import { AnimatePresence, motion } from 'framer-motion';
 
 import { useEffect, useState } from 'react';
 
-import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 
 import { HomeDynamic } from './home-dynamic';
 
 export function Home() {
   const router = useRouter();
-  const supabase = createClient();
   const [mounted, setMounted] = useState(false);
   const [useDynamicRender, setUseDynamicRender] = useState(false);
-  const staticT = useTranslations('pages.home');
   const { t: dynamicT, isLoading } = useDynamicTranslations({
     sections: ['pages.home'],
   });
 
-  // Enhanced translation function with dynamic/static fallback
-  const t = (key: string, params?: Record<string, string | number | Date>) => {
-    const dynamicValue = dynamicT(key, 'pages.home', params);
-    return dynamicValue || staticT(key, params);
-  };
-
   // Ensure client-side rendering consistency
   useEffect(() => {
     setMounted(true);
@@ -40,17 +27,23 @@ export function Home() {
   useEffect(() => {
     const checkForDynamicData = async () => {
       try {
-        // Check if the translation data has sections (indicating dynamic format)
-        const homeData = dynamicT('', 'pages.home'); // Get full section data
-        if (
-          homeData &&
-          typeof homeData === 'object' &&
-          'sections' in homeData
-        ) {
+        // Directly check for sections array in the translation data
+        const sections = dynamicT('sections', 'pages.home');
+        if (sections && Array.isArray(sections) && sections.length > 0) {
+          console.log(
+            'Dynamic home sections found:',
+            sections.length,
+            'sections'
+          );
           setUseDynamicRender(true);
+        } else {
+          console.error(
+            'No dynamic home sections found - please configure home page in admin/content'
+          );
+          setUseDynamicRender(false);
         }
-      } catch {
-        console.log('Using static rendering as fallback');
+      } catch (error) {
+        console.error('Failed to load dynamic home sections:', error);
         setUseDynamicRender(false);
       }
     };
@@ -60,175 +53,43 @@ export function Home() {
     }
   }, [mounted, isLoading, dynamicT]);
 
-  // If dynamic rendering is available and enabled, use it
-  if (mounted && !isLoading && useDynamicRender) {
-    return <HomeDynamic />;
-  }
-
-  const handleStartClick = async () => {
-    try {
-      // Check if user is logged in
-      const {
-        data: { session },
-      } = await supabase.auth.getSession();
-
-      if (session) {
-        // User is logged in, jump to chat page
-        router.push('/chat');
-      } else {
-        // User is not logged in, jump to login page
-        router.push('/login');
-      }
-    } catch (error) {
-      console.error('Check login status failed:', error);
-      // Default jump to login page if error occurs
-      router.push('/login');
-    }
-  };
-
-  const handleLearnMoreClick = () => {
-    router.push('/about');
-  };
-
-  // Static color classes for both light and dark themes
-  const colors = {
-    titleGradient:
-      'from-stone-700 to-stone-900 dark:from-stone-300 dark:to-stone-500',
-    textColor: 'text-stone-700 dark:text-gray-300',
-    cardBg: 'bg-stone-100 dark:bg-stone-700',
-    cardBorder: 'border-stone-200 dark:border-stone-600',
-    cardShadow:
-      'shadow-[0_4px_20px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_20px_rgba(0,0,0,0.3)]',
-    primaryButton:
-      'bg-stone-800 hover:bg-stone-700 text-gray-100 dark:bg-stone-600 dark:hover:bg-stone-500',
-    secondaryButton:
-      'border-stone-400 text-stone-800 hover:bg-stone-200 dark:border-stone-500 dark:text-gray-200 dark:hover:bg-stone-600',
-    featureIconBg: 'bg-stone-200 dark:bg-stone-600',
-    featureTextColor: 'text-stone-700 dark:text-gray-300',
-  };
-
   // Show loading state while mounting or dynamic translations load
   if (!mounted || isLoading) {
     return <PageLoader />;
   }
 
-  return (
-    <AnimatePresence>
-      <div className="relative w-full px-4 py-12 sm:px-6 lg:px-8">
-        {/* Top-right toolbar: Admin button (left) + Language switcher (right) */}
-        {/* Uses absolute positioning with responsive design, hidden on mobile to avoid layout issues */}
-        <div className="fixed top-4 right-4 z-50 hidden flex-col items-end gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3 lg:top-6 lg:right-6">
-          <AdminButton />
-          <LanguageSwitcher variant="floating" />
-        </div>
-
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.6 }}
-          className="mx-auto max-w-5xl"
-        >
-          {/* Main title area */}
-          <div className="mb-16 text-center">
-            <motion.h1
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6 }}
-              className={`bg-gradient-to-r text-5xl font-bold md:text-6xl ${colors.titleGradient} mb-6 bg-clip-text py-2 leading-normal text-transparent`}
-            >
-              {t('title')}
-            </motion.h1>
-
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className={`text-xl md:text-2xl ${colors.textColor} mx-auto max-w-3xl font-light`}
-            >
-              {t('subtitle')}
-            </motion.p>
-          </div>
-
-          {/* Feature card area */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.3 }}
-            className="mb-16 grid grid-cols-1 gap-8 md:grid-cols-3"
-          >
-            {(
-              staticT.raw('features') as Array<{
-                title: string;
-                description: string;
-              }>
-            ).map((feature, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
-                className={`${colors.cardBg} ${colors.cardShadow} border ${colors.cardBorder} flex flex-col items-center rounded-xl p-6 text-center`}
-              >
-                <div
-                  className={`${colors.featureIconBg} mb-4 flex h-12 w-12 items-center justify-center rounded-full`}
-                >
-                  <span className="text-xl">#{index + 1}</span>
-                </div>
-                <h3 className="mb-2 text-xl font-semibold">{feature.title}</h3>
-                <p className={`${colors.featureTextColor} text-sm`}>
-                  {feature.description}
-                </p>
-              </motion.div>
-            ))}
-          </motion.div>
+  // If dynamic rendering is available and enabled, use it
+  if (useDynamicRender) {
+    return <HomeDynamic />;
+  }
 
-          {/* Button area */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.6 }}
-            className="mb-16 flex flex-col justify-center gap-4 sm:flex-row"
+  // If no dynamic data is available, show error message
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+      <div className="max-w-md text-center">
+        <h1 className="mb-4 text-2xl font-bold text-stone-900 dark:text-stone-100">
+          Home Page Not Configured
+        </h1>
+        <p className="mb-6 text-stone-600 dark:text-stone-400">
+          The home page content is not configured. Please configure it in the
+          admin panel.
+        </p>
+        <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
+          <Button
+            onClick={() => router.push('/admin/content?tab=home')}
+            className="bg-stone-800 text-gray-100 hover:bg-stone-700 dark:bg-stone-600 dark:hover:bg-stone-500"
           >
-            <Button
-              size="lg"
-              className={`${colors.primaryButton} h-auto cursor-pointer rounded-lg px-8 py-3 text-base font-medium transition-all duration-200 hover:scale-105`}
-              onClick={handleStartClick}
-            >
-              {t('getStarted')}
-            </Button>
-            <Button
-              size="lg"
-              variant="outline"
-              className={`${colors.secondaryButton} h-auto cursor-pointer rounded-lg px-8 py-3 text-base font-medium transition-all duration-200 hover:scale-105`}
-              onClick={handleLearnMoreClick}
-            >
-              {t('learnMore')}
-            </Button>
-          </motion.div>
-
-          {/* Bottom information */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.6, delay: 0.8 }}
-            className={`text-center ${colors.textColor} text-sm`}
+            Configure Home Page
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => router.push('/about')}
+            className="border-stone-400 text-stone-800 hover:bg-stone-200 dark:border-stone-500 dark:text-gray-200 dark:hover:bg-stone-600"
           >
-            <p>
-              {t('copyright.prefix', { year: new Date().getFullYear() })}
-              <a
-                href="https://github.com/ifLabX/AgentifUI"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="transition-all duration-200 hover:underline hover:opacity-80"
-              >
-                {t('copyright.linkText')}
-              </a>
-              {t('copyright.suffix')}
-            </p>
-          </motion.div>
-        </motion.div>
+            Go to About Page
+          </Button>
+        </div>
       </div>
-    </AnimatePresence>
+    </div>
   );
 }

From dc28f2a2c7e01c0dcfbae6a0d8eb59d63e167483 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Fri, 15 Aug 2025 21:18:39 +0800
Subject: [PATCH 58/66] feat(about): align about page styling with admin
 preview

- Update app/about/page.tsx to use homepage-style layout and colors
- Add AdminButton and LanguageSwitcher in top-right corner
- Replace custom component rendering with unified ComponentRenderer
- Remove 250+ lines of duplicate rendering logic from dynamic-about-renderer
- Ensure visual consistency between live page and admin preview
- Use same background colors (#1c1917 dark, #f5f5f4 light) as other pages
---
 app/about/page.tsx                          |  65 ++--
 components/about/dynamic-about-renderer.tsx | 400 ++++----------------
 2 files changed, 95 insertions(+), 370 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index bd6d0ed7..59d20804 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { DynamicAboutRenderer } from '@components/about/dynamic-about-renderer';
+import { AdminButton } from '@components/admin/admin-button';
+import { LanguageSwitcher } from '@components/ui/language-switcher';
 import { PageLoader } from '@components/ui/page-loader';
 import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
 import { useTheme } from '@lib/hooks/use-theme';
@@ -32,53 +34,22 @@ export default function AboutPage() {
     setMounted(true);
   }, []);
 
-  // get colors based on theme
+  // get homepage-style colors based on theme
   const getColors = () => {
     if (isDark) {
       return {
-        titleGradient: 'from-stone-300 to-stone-500',
+        bgColor: '#1c1917',
         textColor: 'text-gray-300',
-        headingColor: 'text-gray-100',
-        paragraphColor: 'text-gray-400',
-        cardBg: 'bg-stone-700',
-        cardBorder: 'border-stone-600',
-        cardShadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.3)]',
-        cardHeadingColor: 'text-stone-300',
-        cardTextColor: 'text-gray-400',
-        buttonClass:
-          'bg-stone-600 hover:bg-stone-500 text-gray-100 cursor-pointer hover:scale-105',
       };
     } else {
       return {
-        titleGradient: 'from-stone-700 to-stone-900',
+        bgColor: '#f5f5f4',
         textColor: 'text-stone-700',
-        headingColor: 'text-stone-800',
-        paragraphColor: 'text-stone-600',
-        cardBg: 'bg-stone-100',
-        cardBorder: 'border-stone-200',
-        cardShadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.1)]',
-        cardHeadingColor: 'text-stone-700',
-        cardTextColor: 'text-stone-600',
-        buttonClass:
-          'bg-stone-800 hover:bg-stone-700 text-gray-100 cursor-pointer hover:scale-105',
       };
     }
   };
 
-  const colors = mounted
-    ? getColors()
-    : {
-        titleGradient: '',
-        textColor: '',
-        headingColor: '',
-        paragraphColor: '',
-        cardBg: '',
-        cardBorder: '',
-        cardShadow: '',
-        cardHeadingColor: '',
-        cardTextColor: '',
-        buttonClass: '',
-      };
+  const colors = getColors();
 
   // handle "start exploring" button click
   const handleExploreClick = async () => {
@@ -134,12 +105,22 @@ export default function AboutPage() {
   };
 
   return (
-    <main className="min-h-screen w-full overflow-x-hidden px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
-      <DynamicAboutRenderer
-        translationData={translationData}
-        colors={colors}
-        onButtonClick={handleExploreClick}
-      />
-    </main>
+    <div
+      className="relative min-h-screen w-full px-4 py-12 sm:px-6 lg:px-8"
+      style={{ backgroundColor: colors.bgColor }}
+    >
+      {/* Top-right toolbar: Admin button (left) + Language switcher (right) */}
+      <div className="fixed top-4 right-4 z-50 hidden flex-col items-end gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3 lg:top-6 lg:right-6">
+        <AdminButton />
+        <LanguageSwitcher variant="floating" />
+      </div>
+
+      <main className="mx-auto max-w-5xl">
+        <DynamicAboutRenderer
+          translationData={translationData}
+          onButtonClick={handleExploreClick}
+        />
+      </main>
+    </div>
   );
 }
diff --git a/components/about/dynamic-about-renderer.tsx b/components/about/dynamic-about-renderer.tsx
index 165febcf..5c6beaad 100644
--- a/components/about/dynamic-about-renderer.tsx
+++ b/components/about/dynamic-about-renderer.tsx
@@ -1,44 +1,24 @@
 'use client';
 
-import { Button } from '@components/ui/button';
-import { createClient } from '@lib/supabase/client';
+import ComponentRenderer from '@components/admin/content/component-renderer';
 import type {
   AboutTranslationData,
-  ComponentInstance,
   PageContent,
-  PageSection,
 } from '@lib/types/about-page-components';
 import {
   isDynamicFormat,
   migrateAboutTranslationData,
 } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 
-import React, { memo } from 'react';
-
-import { useRouter } from 'next/navigation';
+import React from 'react';
 
 interface DynamicAboutRendererProps {
   /**
    * Translation data for the about page (legacy or dynamic format)
    */
   translationData: AboutTranslationData;
-  /**
-   * Theme colors object
-   */
-  colors: {
-    titleGradient: string;
-    textColor: string;
-    headingColor: string;
-    paragraphColor: string;
-    cardBg: string;
-    cardBorder: string;
-    cardShadow: string;
-    cardHeadingColor: string;
-    cardTextColor: string;
-    buttonClass: string;
-  };
   /**
    * Handle button click action
    */
@@ -53,11 +33,7 @@ interface DynamicAboutRendererProps {
  */
 export function DynamicAboutRenderer({
   translationData,
-  colors,
-  onButtonClick,
 }: DynamicAboutRendererProps) {
-  const router = useRouter();
-
   // Ensure we have dynamic format data
   const dynamicData = React.useMemo(() => {
     if (!isDynamicFormat(translationData)) {
@@ -79,319 +55,87 @@ export function DynamicAboutRenderer({
   }, [dynamicData]);
 
   /**
-   * Handle button component clicks
+   * Render page sections with homepage-style animations and layout
    */
-  const handleButtonClick = (component: ComponentInstance) => {
-    const { action, url } = component.props;
-
-    if (onButtonClick) {
-      onButtonClick(url as string);
-      return;
-    }
-
-    // Default button behavior based on action type
-    if (action === 'external' && url) {
-      window.open(url as string, '_blank', 'noopener,noreferrer');
-    } else if (action === 'link' && url) {
-      router.push(url as string);
-    } else {
-      // Default "Start Exploring" behavior - call the provided handler or navigate to chat
-      handleExploreClick();
-    }
-  };
-
-  // Default explore click handler
-  const handleExploreClick = async () => {
-    try {
-      const supabase = createClient();
-      const {
-        data: { user },
-      } = await supabase.auth.getUser();
-
-      if (user) {
-        router.push('/chat');
-      } else {
-        router.push('/login');
-      }
-    } catch (error) {
-      console.error('check login status failed:', error);
-      router.push('/login');
-    }
-  };
-
-  /**
-   * Memoized component loader for better performance
-   */
-  const ComponentLoader = memo<{ component: ComponentInstance; index: number }>(
-    ({ component, index }) => {
-      return renderComponentInternal(component, index, colors);
-    }
-  );
-
-  ComponentLoader.displayName = 'ComponentLoader';
-
-  /**
-   * Render individual component based on type
-   */
-  const renderComponentInternal = (
-    component: ComponentInstance,
-    index: number,
-    colors: {
-      titleGradient: string;
-      textColor: string;
-      headingColor: string;
-      paragraphColor: string;
-      cardBg: string;
-      cardBorder: string;
-      cardShadow: string;
-      cardHeadingColor: string;
-      cardTextColor: string;
-      buttonClass: string;
+  const renderSections = () => {
+    if (!pageContent.sections || pageContent.sections.length === 0) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="flex h-64 items-center justify-center text-gray-300 dark:text-stone-700"
+        >
+          <p>No content to display</p>
+        </motion.div>
+      );
     }
-  ) => {
-    const { type, props } = component;
-
-    const baseAnimation = {
-      initial: { opacity: 0, y: 20 },
-      animate: { opacity: 1, y: 0 },
-      transition: { duration: 0.6, delay: index * 0.1 },
-    };
-
-    switch (type) {
-      case 'heading':
-        const level = (props.level as number) || 1;
-        const HeadingTag = `h${level}` as
-          | 'h1'
-          | 'h2'
-          | 'h3'
-          | 'h4'
-          | 'h5'
-          | 'h6';
-        const headingSize = {
-          1: 'text-3xl sm:text-4xl md:text-5xl font-bold',
-          2: 'text-xl sm:text-2xl font-bold',
-          3: 'text-lg sm:text-xl font-semibold',
-          4: 'text-base sm:text-lg font-semibold',
-          5: 'text-sm sm:text-base font-medium',
-          6: 'text-xs sm:text-sm font-medium',
-        };
 
-        return (
-          <motion.div key={component.id} {...baseAnimation}>
-            <HeadingTag
-              className={cn(
-                headingSize[level as keyof typeof headingSize] ||
-                  headingSize[2],
-                level === 1 &&
-                  `bg-gradient-to-r bg-clip-text text-transparent ${colors.titleGradient}`,
-                level > 1 && colors.headingColor,
-                `text-${props.textAlign || 'left'}`,
-                level === 1 ? 'mb-4 sm:mb-6' : 'mb-4'
-              )}
-            >
-              {props.content as string}
-            </HeadingTag>
-          </motion.div>
-        );
-
-      case 'paragraph':
-        return (
-          <motion.p
-            key={component.id}
-            {...baseAnimation}
-            className={cn(
-              'text-sm leading-relaxed sm:text-base lg:text-lg',
-              colors.paragraphColor,
-              `text-${props.textAlign || 'left'}`
-            )}
-          >
-            {props.content as string}
-          </motion.p>
-        );
-
-      case 'cards':
-        const items =
-          (props.items as Array<{ title: string; description: string }>) || [];
-        return (
-          <motion.div
-            key={component.id}
-            {...baseAnimation}
-            className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2"
-          >
-            {items.map((item, cardIndex) => (
-              <motion.div
-                key={cardIndex}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.5 + cardIndex * 0.1 }}
-                className={cn(
-                  'rounded-xl border p-4 sm:p-6',
-                  colors.cardBg,
-                  colors.cardShadow,
-                  colors.cardBorder
-                )}
-              >
-                <h3
-                  className={cn(
-                    'mb-2 text-base font-semibold sm:text-lg',
-                    colors.cardHeadingColor
-                  )}
-                >
-                  {item.title}
-                </h3>
-                <p
-                  className={cn(
-                    'text-sm leading-relaxed sm:text-base',
-                    colors.cardTextColor
-                  )}
-                >
-                  {item.description}
-                </p>
-              </motion.div>
-            ))}
-          </motion.div>
-        );
-
-      case 'button':
-        return (
-          <motion.div
-            key={component.id}
-            {...baseAnimation}
-            className={cn(
-              props.textAlign === 'center' && 'text-center',
-              props.textAlign === 'right' && 'text-right'
-            )}
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        className="space-y-16"
+      >
+        {pageContent.sections.map((section, sectionIndex) => (
+          <motion.section
+            key={section.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              duration: 0.6,
+              delay: 0.1 + sectionIndex * 0.1,
+            }}
+            className="w-full"
           >
-            <Button
-              size="lg"
+            <div
               className={cn(
-                'h-auto rounded-lg font-medium transition-all duration-200',
-                'px-6 py-2 text-sm sm:px-8 sm:py-3 sm:text-base',
-                colors.buttonClass
+                'gap-8',
+                section.layout === 'single-column' && 'space-y-8',
+                section.layout === 'two-column' &&
+                  'grid grid-cols-1 md:grid-cols-2',
+                section.layout === 'three-column' &&
+                  'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
               )}
-              onClick={() => handleButtonClick(component)}
             >
-              {props.text as string}
-            </Button>
-          </motion.div>
-        );
-
-      case 'image':
-        return (
-          <motion.div
-            key={component.id}
-            {...baseAnimation}
-            className={cn(
-              'flex flex-col',
-              props.alignment === 'center' && 'items-center',
-              props.alignment === 'right' && 'items-end'
-            )}
-          >
-            <img
-              src={props.src as string}
-              alt={props.alt as string}
-              className="rounded-lg shadow-lg"
-              style={{
-                width:
-                  props.width !== 'auto'
-                    ? (props.width as string | number)
-                    : undefined,
-                height:
-                  props.height !== 'auto'
-                    ? (props.height as string | number)
-                    : undefined,
-              }}
-            />
-            {typeof props.caption === 'string' && props.caption && (
-              <p className={cn('mt-2 text-sm', colors.paragraphColor)}>
-                {props.caption}
-              </p>
-            )}
-          </motion.div>
-        );
-
-      case 'divider':
-        return (
-          <motion.hr
-            key={component.id}
-            {...baseAnimation}
-            className={cn(
-              'my-6 border-0',
-              props.thickness === 'thin' && 'h-px',
-              props.thickness === 'medium' && 'h-0.5',
-              props.thickness === 'thick' && 'h-1',
-              props.style === 'dashed' && 'border-t border-dashed',
-              props.style === 'dotted' && 'border-t border-dotted',
-              props.color === 'gray' && 'bg-gray-300 dark:bg-gray-600',
-              !props.color && 'bg-gray-300 dark:bg-gray-600'
-            )}
-          />
-        );
-
-      default:
-        return (
-          <motion.div
-            key={component.id}
-            {...baseAnimation}
-            className="rounded-lg border border-red-200 bg-red-50 p-4 text-center text-red-600 dark:border-red-700 dark:bg-red-900/20 dark:text-red-400"
-          >
-            <p>Unknown component type: {type}</p>
-          </motion.div>
-        );
-    }
-  };
-
-  /**
-   * Render section with responsive layout
-   */
-  const renderSection = (section: PageSection, sectionIndex: number) => {
-    return (
-      <motion.section
-        key={section.id}
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, delay: sectionIndex * 0.1 }}
-        className="mb-6 sm:mb-8 lg:mb-10"
-      >
-        <div
-          className={cn(
-            'grid gap-4 md:gap-6',
-            section.layout === 'single-column' && 'grid-cols-1',
-            section.layout === 'two-column' && 'grid-cols-1 md:grid-cols-2',
-            section.layout === 'three-column' &&
-              'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
-          )}
-        >
-          {section.columns.map((column, columnIndex) => (
-            <div key={columnIndex} className="space-y-4">
-              {column.map((component, componentIndex) => (
-                <ComponentLoader
-                  key={component.id}
-                  component={component}
-                  index={sectionIndex + componentIndex}
-                />
+              {section.columns.map((column, columnIndex) => (
+                <div key={columnIndex} className="space-y-8">
+                  {column.map((component, componentIndex) => (
+                    <motion.div
+                      key={component.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{
+                        duration: 0.5,
+                        delay: 0.2 + sectionIndex * 0.1 + componentIndex * 0.05,
+                      }}
+                    >
+                      <ComponentRenderer
+                        component={component}
+                        sectionCommonProps={section.commonProps}
+                      />
+                    </motion.div>
+                  ))}
+                </div>
               ))}
             </div>
-          ))}
-        </div>
-      </motion.section>
+          </motion.section>
+        ))}
+      </motion.div>
     );
   };
 
-  // Render all sections
-  if (!pageContent.sections || pageContent.sections.length === 0) {
-    return (
-      <div className="flex h-64 items-center justify-center">
-        <p className={cn('text-lg', colors.textColor)}>No content available</p>
-      </div>
-    );
-  }
-
   return (
-    <div className="mx-auto max-w-5xl">
-      {pageContent.sections.map((section, index) =>
-        renderSection(section, index)
-      )}
-    </div>
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.6 }}
+      >
+        {renderSections()}
+      </motion.div>
+    </AnimatePresence>
   );
 }

From 343f3da649bafe75cc9ece0de7b18d39de7670df Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Tue, 19 Aug 2025 16:20:11 +0800
Subject: [PATCH 59/66] refactor(admin): replace isDark with Tailwind dark:
 prefix in content components

Convert all /admin/content components from isDark conditional logic to
Tailwind dark: classes:
- content-tabs.tsx: tab styling
- preview-toolbar.tsx: toolbar elements
- save-actions.tsx: action buttons and status indicators
- about-preview.tsx: dynamic color calculations
- home-preview-dynamic.tsx: dynamic color calculations
- home-editor.tsx: form elements and labels

- Remove all useTheme imports and isDark usage
- Maintain consistent visual appearance in both modes
- Improve performance by eliminating runtime conditional logic
- Fix TypeScript lint errors with proper typing

All admin content components now follow modernized dark mode strategy.
---
 components/admin/content/about-preview.tsx    | 27 ++-----
 components/admin/content/content-tabs.tsx     | 12 +--
 components/admin/content/home-editor.tsx      | 78 ++++++-------------
 .../admin/content/home-preview-dynamic.tsx    | 27 ++-----
 components/admin/content/preview-toolbar.tsx  | 22 ++----
 components/admin/content/save-actions.tsx     | 42 ++--------
 6 files changed, 52 insertions(+), 156 deletions(-)

diff --git a/components/admin/content/about-preview.tsx b/components/admin/content/about-preview.tsx
index cc332ed6..cc5bdf00 100644
--- a/components/admin/content/about-preview.tsx
+++ b/components/admin/content/about-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import {
   AboutTranslationData,
   PageContent,
@@ -36,8 +35,6 @@ export function AboutPreview({
   translation,
   previewDevice,
 }: AboutPreviewProps) {
-  const { isDark } = useTheme();
-
   // Ensure translation is in dynamic format
   const dynamicTranslation = React.useMemo(() => {
     if (!isDynamicFormat(translation)) {
@@ -58,23 +55,12 @@ export function AboutPreview({
     };
   }, [dynamicTranslation]);
 
-  // Get homepage-style colors
-  const getColors = () => {
-    if (isDark) {
-      return {
-        bgColor: '#1c1917',
-        textColor: 'text-gray-300',
-      };
-    } else {
-      return {
-        bgColor: '#f5f5f4',
-        textColor: 'text-stone-700',
-      };
-    }
+  // Homepage-style colors using Tailwind classes that respond to dark mode
+  const colors = {
+    bgClass: 'bg-stone-100 dark:bg-stone-900',
+    textColor: 'text-stone-700 dark:text-gray-300',
   };
 
-  const colors = getColors();
-
   /**
    * Get device-specific container styles with homepage styling
    */
@@ -193,10 +179,7 @@ export function AboutPreview({
       )}
     >
       <div className={deviceStyles.container}>
-        <div
-          className={cn(deviceStyles.screen)}
-          style={{ backgroundColor: colors.bgColor }}
-        >
+        <div className={cn(deviceStyles.screen, colors.bgClass)}>
           <div className={deviceStyles.content}>
             <AnimatePresence>
               <main className={deviceStyles.mainClass}>{renderSections()}</main>
diff --git a/components/admin/content/content-tabs.tsx b/components/admin/content/content-tabs.tsx
index 8c111c33..aac67158 100644
--- a/components/admin/content/content-tabs.tsx
+++ b/components/admin/content/content-tabs.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 
 import { useTranslations } from 'next-intl';
@@ -11,7 +10,6 @@ interface ContentTabsProps {
 }
 
 export function ContentTabs({ activeTab, onTabChange }: ContentTabsProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.admin.content.tabs');
 
   const tabs = [
@@ -23,7 +21,7 @@ export function ContentTabs({ activeTab, onTabChange }: ContentTabsProps) {
     <div
       className={cn(
         'flex items-center space-x-2 rounded-lg p-1',
-        isDark ? 'bg-stone-700' : 'bg-stone-200'
+        'bg-stone-200 dark:bg-stone-700'
       )}
     >
       {tabs.map(tab => (
@@ -33,12 +31,8 @@ export function ContentTabs({ activeTab, onTabChange }: ContentTabsProps) {
           className={cn(
             'rounded-md px-4 py-1.5 text-sm font-medium transition-colors',
             activeTab === tab.id
-              ? isDark
-                ? 'bg-stone-500 text-white shadow-sm'
-                : 'bg-white text-stone-900 shadow-sm'
-              : isDark
-                ? 'text-stone-300 hover:bg-stone-600'
-                : 'text-stone-600 hover:bg-stone-100'
+              ? 'bg-white text-stone-900 shadow-sm dark:bg-stone-500 dark:text-white'
+              : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-600'
           )}
         >
           {tab.label}
diff --git a/components/admin/content/home-editor.tsx b/components/admin/content/home-editor.tsx
index ef9ed84e..943feaa5 100644
--- a/components/admin/content/home-editor.tsx
+++ b/components/admin/content/home-editor.tsx
@@ -9,7 +9,6 @@ import {
 } from '@components/ui/select';
 import type { SupportedLocale } from '@lib/config/language-config';
 import { getLanguageInfo } from '@lib/config/language-config';
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { Plus, Trash2 } from 'lucide-react';
 
@@ -52,7 +51,6 @@ export function HomeEditor({
   onTranslationsChange,
   onLocaleChange,
 }: HomeEditorProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.admin.content.editor');
   const currentTranslation = translations[currentLocale] || {};
 
@@ -62,13 +60,13 @@ export function HomeEditor({
       HomeTranslation
     >;
     const fieldParts = field.split('.');
-    let current = newTranslations[currentLocale] as any;
+    let current = newTranslations[currentLocale] as Record<string, unknown>;
 
     for (let i = 0; i < fieldParts.length - 1; i++) {
       if (!current[fieldParts[i]]) {
         current[fieldParts[i]] = {};
       }
-      current = current[fieldParts[i]];
+      current = current[fieldParts[i]] as Record<string, unknown>;
     }
 
     current[fieldParts[fieldParts.length - 1]] = value;
@@ -106,7 +104,7 @@ export function HomeEditor({
         <label
           className={cn(
             'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
+            'text-stone-700 dark:text-stone-300'
           )}
         >
           {t('common.editLanguage')}
@@ -118,9 +116,7 @@ export function HomeEditor({
           <SelectTrigger
             className={cn(
               'w-full transition-all duration-200 focus:ring-2 focus:ring-offset-2',
-              isDark
-                ? 'border-stone-600 bg-stone-800 text-stone-100 hover:border-stone-500 hover:bg-stone-700 focus:ring-stone-400'
-                : 'border-stone-300 bg-white text-stone-900 hover:border-stone-400 hover:bg-stone-50 focus:ring-stone-500'
+              'border-stone-300 bg-white text-stone-900 hover:border-stone-400 hover:bg-stone-50 focus:ring-stone-500 dark:border-stone-600 dark:bg-stone-800 dark:text-stone-100 dark:hover:border-stone-500 dark:hover:bg-stone-700 dark:focus:ring-stone-400'
             )}
           >
             <SelectValue>
@@ -137,9 +133,7 @@ export function HomeEditor({
           <SelectContent
             className={cn(
               'border shadow-lg',
-              isDark
-                ? 'border-stone-600 bg-stone-800'
-                : 'border-stone-200 bg-white'
+              'border-stone-200 bg-white dark:border-stone-600 dark:bg-stone-800'
             )}
           >
             {supportedLocales.map(locale => {
@@ -150,9 +144,7 @@ export function HomeEditor({
                   value={locale}
                   className={cn(
                     'cursor-pointer transition-colors',
-                    isDark
-                      ? 'hover:bg-stone-700 focus:bg-stone-700'
-                      : 'hover:bg-stone-100 focus:bg-stone-100'
+                    'hover:bg-stone-100 focus:bg-stone-100 dark:hover:bg-stone-700 dark:focus:bg-stone-700'
                   )}
                 >
                   <div className="flex w-full items-center justify-between">
@@ -172,7 +164,7 @@ export function HomeEditor({
         <label
           className={cn(
             'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
+            'text-stone-700 dark:text-stone-300'
           )}
         >
           {t('home.pageTitle')}
@@ -183,9 +175,7 @@ export function HomeEditor({
           onChange={e => handleFieldChange('title', e.target.value)}
           className={cn(
             'w-full rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
+            'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-700 dark:text-stone-100'
           )}
         />
       </div>
@@ -194,7 +184,7 @@ export function HomeEditor({
         <label
           className={cn(
             'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
+            'text-stone-700 dark:text-stone-300'
           )}
         >
           {t('home.subtitle')}
@@ -205,9 +195,7 @@ export function HomeEditor({
           rows={3}
           className={cn(
             'w-full resize-none rounded-lg border px-3 py-2 text-sm',
-            isDark
-              ? 'border-stone-600 bg-stone-700 text-stone-100'
-              : 'border-stone-300 bg-white text-stone-900'
+            'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-700 dark:text-stone-100'
           )}
         />
       </div>
@@ -217,7 +205,7 @@ export function HomeEditor({
           <label
             className={cn(
               'block text-sm font-medium',
-              isDark ? 'text-stone-300' : 'text-stone-700'
+              'text-stone-700 dark:text-stone-300'
             )}
           >
             {t('home.features')}
@@ -226,9 +214,7 @@ export function HomeEditor({
             onClick={addFeatureCard}
             className={cn(
               'rounded p-1 transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-300 hover:bg-stone-600'
-                : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
+              'bg-stone-100 text-stone-600 hover:bg-stone-200 dark:bg-stone-700 dark:text-stone-300 dark:hover:bg-stone-600'
             )}
           >
             <Plus className="h-4 w-4" />
@@ -242,14 +228,14 @@ export function HomeEditor({
                 key={index}
                 className={cn(
                   'rounded-lg border p-4',
-                  isDark ? 'border-stone-600' : 'border-stone-200'
+                  'border-stone-200 dark:border-stone-600'
                 )}
               >
                 <div className="flex items-center justify-between">
                   <p
                     className={cn(
                       'text-sm font-medium',
-                      isDark ? 'text-stone-300' : 'text-stone-700'
+                      'text-stone-700 dark:text-stone-300'
                     )}
                   >
                     {t('common.cardNumber', { number: index + 1 })}
@@ -258,7 +244,7 @@ export function HomeEditor({
                     onClick={() => removeFeatureCard(index)}
                     className={cn(
                       'rounded p-1 text-red-500 transition-colors',
-                      isDark ? 'hover:bg-red-900/50' : 'hover:bg-red-100'
+                      'hover:bg-red-100 dark:hover:bg-red-900/50'
                     )}
                   >
                     <Trash2 className="h-4 w-4" />
@@ -275,9 +261,7 @@ export function HomeEditor({
                     }
                     className={cn(
                       'w-full rounded-md border px-3 py-1.5 text-sm',
-                      isDark
-                        ? 'border-stone-500 bg-stone-600 text-stone-100'
-                        : 'border-stone-300 bg-white text-stone-900'
+                      'border-stone-300 bg-white text-stone-900 dark:border-stone-500 dark:bg-stone-600 dark:text-stone-100'
                     )}
                   />
                   <textarea
@@ -293,9 +277,7 @@ export function HomeEditor({
                     rows={3}
                     className={cn(
                       'w-full resize-none rounded-md border px-3 py-1.5 text-sm',
-                      isDark
-                        ? 'border-stone-500 bg-stone-600 text-stone-100'
-                        : 'border-stone-300 bg-white text-stone-900'
+                      'border-stone-300 bg-white text-stone-900 dark:border-stone-500 dark:bg-stone-600 dark:text-stone-100'
                     )}
                   />
                 </div>
@@ -310,7 +292,7 @@ export function HomeEditor({
           <label
             className={cn(
               'mb-2 block text-sm font-medium',
-              isDark ? 'text-stone-300' : 'text-stone-700'
+              'text-stone-700 dark:text-stone-300'
             )}
           >
             {t('home.getStarted')}
@@ -321,9 +303,7 @@ export function HomeEditor({
             onChange={e => handleFieldChange('getStarted', e.target.value)}
             className={cn(
               'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
+              'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-700 dark:text-stone-100'
             )}
           />
         </div>
@@ -331,7 +311,7 @@ export function HomeEditor({
           <label
             className={cn(
               'mb-2 block text-sm font-medium',
-              isDark ? 'text-stone-300' : 'text-stone-700'
+              'text-stone-700 dark:text-stone-300'
             )}
           >
             {t('home.learnMore')}
@@ -342,9 +322,7 @@ export function HomeEditor({
             onChange={e => handleFieldChange('learnMore', e.target.value)}
             className={cn(
               'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
+              'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-700 dark:text-stone-100'
             )}
           />
         </div>
@@ -354,7 +332,7 @@ export function HomeEditor({
         <label
           className={cn(
             'mb-2 block text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
+            'text-stone-700 dark:text-stone-300'
           )}
         >
           {t('home.copyright')}
@@ -369,9 +347,7 @@ export function HomeEditor({
             }
             className={cn(
               'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
+              'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-700 dark:text-stone-100'
             )}
           />
           <input
@@ -383,9 +359,7 @@ export function HomeEditor({
             }
             className={cn(
               'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
+              'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-700 dark:text-stone-100'
             )}
           />
           <input
@@ -397,9 +371,7 @@ export function HomeEditor({
             }
             className={cn(
               'w-full rounded-lg border px-3 py-2 text-sm',
-              isDark
-                ? 'border-stone-600 bg-stone-700 text-stone-100'
-                : 'border-stone-300 bg-white text-stone-900'
+              'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-700 dark:text-stone-100'
             )}
           />
         </div>
diff --git a/components/admin/content/home-preview-dynamic.tsx b/components/admin/content/home-preview-dynamic.tsx
index fae0b3a6..5ade94f4 100644
--- a/components/admin/content/home-preview-dynamic.tsx
+++ b/components/admin/content/home-preview-dynamic.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { PageContent } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
 import type { HomeTranslationData } from '@lib/utils/data-migration';
@@ -36,8 +35,6 @@ export function HomePreviewDynamic({
   translation,
   previewDevice,
 }: HomePreviewDynamicProps) {
-  const { isDark } = useTheme();
-
   // Ensure translation is in dynamic format
   const dynamicTranslation = React.useMemo(() => {
     if (!isHomeDynamicFormat(translation)) {
@@ -58,23 +55,12 @@ export function HomePreviewDynamic({
     };
   }, [dynamicTranslation]);
 
-  // Get homepage-style colors
-  const getColors = () => {
-    if (isDark) {
-      return {
-        bgColor: '#1c1917',
-        textColor: 'text-gray-300',
-      };
-    } else {
-      return {
-        bgColor: '#f5f5f4',
-        textColor: 'text-stone-700',
-      };
-    }
+  // Homepage-style colors using Tailwind classes that respond to dark mode
+  const colors = {
+    bgClass: 'bg-stone-100 dark:bg-stone-900',
+    textColor: 'text-stone-700 dark:text-gray-300',
   };
 
-  const colors = getColors();
-
   /**
    * Get device-specific container styles with homepage styling
    */
@@ -193,10 +179,7 @@ export function HomePreviewDynamic({
       )}
     >
       <div className={deviceStyles.container}>
-        <div
-          className={cn(deviceStyles.screen)}
-          style={{ backgroundColor: colors.bgColor }}
-        >
+        <div className={cn(deviceStyles.screen, colors.bgClass)}>
           <div className={deviceStyles.content}>
             <AnimatePresence>
               <main className={deviceStyles.mainClass}>{renderSections()}</main>
diff --git a/components/admin/content/preview-toolbar.tsx b/components/admin/content/preview-toolbar.tsx
index 556c23e1..353cb0b5 100644
--- a/components/admin/content/preview-toolbar.tsx
+++ b/components/admin/content/preview-toolbar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { Fullscreen, Monitor, Smartphone, Tablet, X } from 'lucide-react';
 
@@ -22,7 +21,6 @@ export function PreviewToolbar({
   onPreviewToggle,
   onFullscreenPreview,
 }: PreviewToolbarProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.admin.content.previewToolbar');
 
   const deviceIcons = [
@@ -35,14 +33,14 @@ export function PreviewToolbar({
     <div
       className={cn(
         'flex h-14 flex-shrink-0 items-center justify-between border-b px-4',
-        isDark ? 'border-stone-600 bg-stone-800' : 'border-stone-200 bg-white'
+        'border-stone-200 bg-white dark:border-stone-600 dark:bg-stone-800'
       )}
     >
       <div className="flex items-center gap-2">
         <span
           className={cn(
             'text-sm font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
+            'text-stone-700 dark:text-stone-300'
           )}
         >
           {activeTab === 'about' ? t('aboutPreview') : t('homePreview')}
@@ -57,12 +55,8 @@ export function PreviewToolbar({
             className={cn(
               'rounded-md p-2 transition-colors',
               previewDevice === name
-                ? isDark
-                  ? 'bg-stone-600 text-stone-100'
-                  : 'bg-stone-200 text-stone-900'
-                : isDark
-                  ? 'text-stone-400 hover:bg-stone-700 hover:text-stone-200'
-                  : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700'
+                ? 'bg-stone-200 text-stone-900 dark:bg-stone-600 dark:text-stone-100'
+                : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-200'
             )}
           >
             <Icon className="h-5 w-5" />
@@ -75,9 +69,7 @@ export function PreviewToolbar({
           onClick={onFullscreenPreview}
           className={cn(
             'rounded-md p-2 transition-colors',
-            isDark
-              ? 'text-stone-400 hover:bg-stone-700 hover:text-stone-200'
-              : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700'
+            'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-200'
           )}
         >
           <Fullscreen className="h-5 w-5" />
@@ -87,9 +79,7 @@ export function PreviewToolbar({
           onClick={onPreviewToggle}
           className={cn(
             'rounded-md p-2 transition-colors',
-            isDark
-              ? 'text-stone-400 hover:bg-stone-700 hover:text-stone-200'
-              : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700'
+            'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-stone-200'
           )}
         >
           <X className="h-5 w-5" />
diff --git a/components/admin/content/save-actions.tsx b/components/admin/content/save-actions.tsx
index d158a2e5..de4e6f31 100644
--- a/components/admin/content/save-actions.tsx
+++ b/components/admin/content/save-actions.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { Loader2, RotateCcw, Save } from 'lucide-react';
 
@@ -21,16 +20,13 @@ export function SaveActions({
   onSave,
   onReset,
 }: SaveActionsProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.admin.content.saveActions');
 
   return (
     <div
       className={cn(
         'flex items-center justify-between border-t bg-gradient-to-r p-4',
-        isDark
-          ? 'to-stone-750 border-stone-600 from-stone-800'
-          : 'border-stone-200 from-stone-50 to-white'
+        'dark:to-stone-750 border-stone-200 from-stone-50 to-white dark:border-stone-600 dark:from-stone-800'
       )}
     >
       {/* Status indicator */}
@@ -39,10 +35,7 @@ export function SaveActions({
           <>
             <div className="h-2 w-2 rounded-full bg-orange-500" />
             <span
-              className={cn(
-                'text-sm',
-                isDark ? 'text-stone-300' : 'text-stone-600'
-              )}
+              className={cn('text-sm', 'text-stone-600 dark:text-stone-300')}
             >
               {t('hasChanges')}
             </span>
@@ -52,22 +45,14 @@ export function SaveActions({
           <>
             <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
             <span
-              className={cn(
-                'text-sm',
-                isDark ? 'text-stone-300' : 'text-stone-600'
-              )}
+              className={cn('text-sm', 'text-stone-600 dark:text-stone-300')}
             >
               {t('saving')}
             </span>
           </>
         )}
         {!hasChanges && !isSaving && (
-          <span
-            className={cn(
-              'text-sm',
-              isDark ? 'text-stone-400' : 'text-stone-500'
-            )}
-          >
+          <span className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}>
             {t('allSaved')}
           </span>
         )}
@@ -81,11 +66,8 @@ export function SaveActions({
           className={cn(
             'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors',
             hasChanges && !isSaving
-              ? isDark
-                ? 'bg-stone-700 text-stone-100 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-700 hover:bg-stone-300'
-              : 'cursor-not-allowed opacity-50',
-            isDark ? 'text-stone-400' : 'text-stone-500'
+              ? 'bg-stone-200 text-stone-700 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-100 dark:hover:bg-stone-600'
+              : 'cursor-not-allowed text-stone-500 opacity-50 dark:text-stone-400'
           )}
         >
           <RotateCcw className="h-4 w-4" />
@@ -98,16 +80,8 @@ export function SaveActions({
           className={cn(
             'flex items-center gap-2 rounded-lg px-6 py-2 text-sm font-medium transition-colors',
             hasChanges && !isSaving
-              ? isDark
-                ? 'bg-stone-100 text-stone-900 hover:bg-white'
-                : 'bg-stone-900 text-white hover:bg-stone-800'
-              : 'cursor-not-allowed opacity-50',
-            isDark && (!hasChanges || isSaving)
-              ? 'bg-stone-600 text-stone-400'
-              : '',
-            !isDark && (!hasChanges || isSaving)
-              ? 'bg-stone-300 text-stone-500'
-              : ''
+              ? 'bg-stone-900 text-white hover:bg-stone-800 dark:bg-stone-100 dark:text-stone-900 dark:hover:bg-white'
+              : 'cursor-not-allowed bg-stone-300 text-stone-500 opacity-50 dark:bg-stone-600 dark:text-stone-400'
           )}
         >
           {isSaving ? (

From 4ca1d72fa6ba7eabb0376d7cc37c79d0a38b0ef7 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Tue, 19 Aug 2025 18:28:19 +0800
Subject: [PATCH 60/66] chore: align with upstream main branch - remove test
 files, backups and restore .gitignore

- Remove __tests__/utils/data-migration.test.ts (not in upstream)
- Remove messages/en-US.json.backup (not in upstream)
- Remove messages/zh-CN.json.backup (not in upstream)
- Restore .gitignore to upstream version (remove personal additions)

This ensures test files, backup files, and .gitignore match upstream main branch
as requested for project consistency.
---
 .gitignore                             |    7 +-
 __tests__/utils/data-migration.test.ts |  358 ----
 messages/en-US.json.backup             | 2500 ------------------------
 messages/zh-CN.json.backup             | 2500 ------------------------
 4 files changed, 1 insertion(+), 5364 deletions(-)
 delete mode 100644 __tests__/utils/data-migration.test.ts
 delete mode 100644 messages/en-US.json.backup
 delete mode 100644 messages/zh-CN.json.backup

diff --git a/.gitignore b/.gitignore
index 1a6c017a..68630add 100644
--- a/.gitignore
+++ b/.gitignore
@@ -55,9 +55,4 @@ next-env.d.ts
 docs/security
 
 # pm2
-pm2-logs/
-
-# demo projects
-about-page-standalone/
-
-/picture 
\ No newline at end of file
+pm2-logs/
\ No newline at end of file
diff --git a/__tests__/utils/data-migration.test.ts b/__tests__/utils/data-migration.test.ts
deleted file mode 100644
index b575a806..00000000
--- a/__tests__/utils/data-migration.test.ts
+++ /dev/null
@@ -1,358 +0,0 @@
-import { isDynamicFormat } from '@lib/types/about-page-components';
-import type {
-  AboutTranslationData,
-  ComponentInstance,
-  LegacyAboutData,
-  PageContent,
-} from '@lib/types/about-page-components';
-import {
-  createDefaultComponent,
-  generateUniqueId,
-  migrateAboutTranslationData,
-  migrateLegacyToSections,
-  validateMigratedData,
-} from '@lib/utils/data-migration';
-
-describe('Data Migration Utilities', () => {
-  describe('generateUniqueId', () => {
-    it('generates unique IDs with correct prefix', () => {
-      const id1 = generateUniqueId('comp');
-      const id2 = generateUniqueId('comp');
-
-      expect(id1).toMatch(/^comp-\d+-[a-z0-9]+$/);
-      expect(id2).toMatch(/^comp-\d+-[a-z0-9]+$/);
-      expect(id1).not.toBe(id2);
-    });
-
-    it('generates IDs with different prefixes', () => {
-      const compId = generateUniqueId('comp');
-      const sectionId = generateUniqueId('section');
-
-      expect(compId).toMatch(/^comp-/);
-      expect(sectionId).toMatch(/^section-/);
-    });
-  });
-
-  describe('createDefaultComponent', () => {
-    it('creates default heading component', () => {
-      const component = createDefaultComponent('heading', 'Test Heading');
-
-      expect(component.type).toBe('heading');
-      expect(component.props.content).toBe('Test Heading');
-      expect(component.props.level).toBe(2);
-      expect(component.props.textAlign).toBe('left');
-      expect(component.id).toMatch(/^comp-/);
-    });
-
-    it('creates default paragraph component', () => {
-      const component = createDefaultComponent('paragraph', 'Test paragraph');
-
-      expect(component.type).toBe('paragraph');
-      expect(component.props.content).toBe('Test paragraph');
-      expect(component.props.textAlign).toBe('left');
-    });
-
-    it('creates default button component', () => {
-      const component = createDefaultComponent('button', 'Click Me');
-
-      expect(component.type).toBe('button');
-      expect(component.props.text).toBe('Click Me');
-      expect(component.props.variant).toBe('primary');
-      expect(component.props.action).toBe('link');
-      expect(component.props.url).toBe('#');
-    });
-
-    it('creates default cards component', () => {
-      const component = createDefaultComponent('cards');
-
-      expect(component.type).toBe('cards');
-      expect(component.props.layout).toBe('grid');
-      expect(component.props.items).toEqual([]);
-    });
-
-    it('uses fallback content when no content provided', () => {
-      const component = createDefaultComponent('heading');
-
-      expect(component.props.content).toBe('New Heading');
-    });
-  });
-
-  describe('isDynamicFormat', () => {
-    it('identifies dynamic format correctly', () => {
-      const dynamicData: AboutTranslationData = {
-        sections: [
-          {
-            id: 'section-1',
-            layout: 'single-column',
-            columns: [[]],
-          },
-        ],
-        metadata: {
-          version: '1.0.0',
-          lastModified: '2024-01-01T00:00:00.000Z',
-          author: 'test',
-        },
-      };
-
-      expect(isDynamicFormat(dynamicData)).toBe(true);
-    });
-
-    it('identifies legacy format correctly', () => {
-      const legacyData = {
-        title: 'Legacy Title',
-        subtitle: 'Legacy Subtitle',
-        mission: { description: 'Mission' },
-        values: { items: [] },
-        buttonText: 'Button',
-        copyright: { prefix: '', linkText: '', suffix: '' },
-      };
-
-      expect(isDynamicFormat(legacyData as any)).toBe(false);
-    });
-
-    it('handles empty/null data', () => {
-      expect(isDynamicFormat(null as any)).toBe(false);
-      expect(isDynamicFormat({} as any)).toBe(false);
-      expect(isDynamicFormat({ sections: [] } as any)).toBe(false);
-    });
-  });
-
-  describe('migrateLegacyToSections', () => {
-    const createLegacyData = (): LegacyAboutData => ({
-      title: 'About Our Company',
-      subtitle: 'Innovation and Excellence',
-      mission: {
-        description: 'To provide excellent services to our customers.',
-      },
-      values: {
-        items: [
-          { title: 'Quality', description: 'We deliver high-quality products' },
-          { title: 'Innovation', description: 'We embrace new technologies' },
-        ],
-      },
-      buttonText: 'Get Started',
-      copyright: {
-        prefix: `© ${new Date().getFullYear()} `,
-        linkText: 'Company Name',
-        suffix: '. All rights reserved.',
-      },
-    });
-
-    it('migrates title and subtitle correctly', () => {
-      const legacy = createLegacyData();
-      const migrated = migrateLegacyToSections(legacy);
-
-      expect(migrated.sections).toHaveLength(5); // title, mission, values, button, copyright
-
-      const titleSection = migrated.sections[0];
-      expect(titleSection.layout).toBe('single-column');
-      expect(titleSection.columns[0]).toHaveLength(2); // title + subtitle
-
-      expect(titleSection.columns[0][0].type).toBe('heading');
-      expect(titleSection.columns[0][0].props.content).toBe(
-        'About Our Company'
-      );
-      expect(titleSection.columns[0][0].props.level).toBe(1);
-      expect(titleSection.columns[0][0].props.textAlign).toBe('center');
-
-      expect(titleSection.columns[0][1].type).toBe('paragraph');
-      expect(titleSection.columns[0][1].props.content).toBe(
-        'Innovation and Excellence'
-      );
-      expect(titleSection.columns[0][1].props.textAlign).toBe('center');
-    });
-
-    it('migrates mission section correctly', () => {
-      const legacy = createLegacyData();
-      const migrated = migrateLegacyToSections(legacy);
-
-      const missionSection = migrated.sections[1];
-      expect(missionSection.columns[0]).toHaveLength(2); // heading + paragraph
-
-      expect(missionSection.columns[0][0].type).toBe('heading');
-      expect(missionSection.columns[0][0].props.content).toBe('Our Mission');
-
-      expect(missionSection.columns[0][1].type).toBe('paragraph');
-      expect(missionSection.columns[0][1].props.content).toBe(
-        'To provide excellent services to our customers.'
-      );
-    });
-
-    it('migrates values section with cards correctly', () => {
-      const legacy = createLegacyData();
-      const migrated = migrateLegacyToSections(legacy);
-
-      const valuesSection = migrated.sections[2];
-      expect(valuesSection.columns[0]).toHaveLength(2); // heading + cards
-
-      expect(valuesSection.columns[0][0].type).toBe('heading');
-      expect(valuesSection.columns[0][0].props.content).toBe('Our Values');
-
-      expect(valuesSection.columns[0][1].type).toBe('cards');
-      expect(valuesSection.columns[0][1].props.items).toEqual([
-        { title: 'Quality', description: 'We deliver high-quality products' },
-        { title: 'Innovation', description: 'We embrace new technologies' },
-      ]);
-    });
-
-    it('migrates button section correctly', () => {
-      const legacy = createLegacyData();
-      const migrated = migrateLegacyToSections(legacy);
-
-      const buttonSection = migrated.sections[3];
-      expect(buttonSection.columns[0]).toHaveLength(1);
-
-      const buttonComponent = buttonSection.columns[0][0];
-      expect(buttonComponent.type).toBe('button');
-      expect(buttonComponent.props.text).toBe('Get Started');
-      expect(buttonComponent.props.textAlign).toBe('center');
-    });
-
-    it('migrates copyright section correctly', () => {
-      const legacy = createLegacyData();
-      const migrated = migrateLegacyToSections(legacy);
-
-      const copyrightSection = migrated.sections[4];
-      expect(copyrightSection.columns[0]).toHaveLength(1);
-
-      const copyrightComponent = copyrightSection.columns[0][0];
-      expect(copyrightComponent.type).toBe('paragraph');
-      expect(copyrightComponent.props.content).toContain(
-        new Date().getFullYear().toString()
-      ); // Current year
-      expect(copyrightComponent.props.content).toContain('Company Name');
-      expect(copyrightComponent.props.textAlign).toBe('center');
-    });
-
-    it('handles missing optional fields', () => {
-      const minimal: LegacyAboutData = {
-        title: 'Title Only',
-        subtitle: '',
-        mission: { description: '' },
-        values: { items: [] },
-        buttonText: '',
-        copyright: { prefix: '', linkText: '', suffix: '' },
-      };
-
-      const migrated = migrateLegacyToSections(minimal);
-
-      // Should only create title section (other sections should be skipped for empty content)
-      expect(migrated.sections).toHaveLength(1);
-      expect(migrated.sections[0].columns[0][0].props.content).toBe(
-        'Title Only'
-      );
-    });
-
-    it('includes proper metadata', () => {
-      const legacy = createLegacyData();
-      const migrated = migrateLegacyToSections(legacy);
-
-      expect(migrated.metadata?.version).toBe('1.0.0');
-      expect(migrated.metadata?.author).toBe('system-migration');
-      expect(migrated.metadata?.lastModified).toBeDefined();
-    });
-  });
-
-  describe('validateMigratedData', () => {
-    const createValidData = (): AboutTranslationData => ({
-      sections: [
-        {
-          id: 'section-1',
-          layout: 'single-column',
-          columns: [
-            [
-              {
-                id: 'comp-1',
-                type: 'heading',
-                props: { content: 'Test', level: 1 },
-              },
-            ],
-          ],
-        },
-      ],
-      metadata: {
-        version: '1.0.0',
-        lastModified: '2024-01-01T00:00:00.000Z',
-        author: 'test',
-      },
-    });
-
-    it('validates correct data successfully', () => {
-      const data = createValidData();
-      const result = validateMigratedData(data);
-
-      expect(result.isValid).toBe(true);
-      expect(result.errors).toHaveLength(0);
-    });
-
-    it('detects missing sections', () => {
-      const data = { sections: [], metadata: {} } as AboutTranslationData;
-      const result = validateMigratedData(data);
-
-      expect(result.isValid).toBe(false);
-      expect(result.errors).toContain('迁移后的数据缺少sections');
-    });
-
-    it('detects missing section ID', () => {
-      const data = createValidData();
-      delete (data.sections?.[0] as any).id;
-
-      const result = validateMigratedData(data);
-
-      expect(result.isValid).toBe(false);
-      expect(result.errors).toContain('Section 0 缺少ID');
-    });
-
-    it('detects missing component properties', () => {
-      const data = createValidData();
-      delete (data.sections?.[0]?.columns[0][0] as any).props;
-
-      const result = validateMigratedData(data);
-
-      expect(result.isValid).toBe(false);
-      expect(result.errors).toContain(
-        'Section 0, Column 0, Component 0 缺少props'
-      );
-    });
-  });
-
-  describe('migrateAboutTranslationData', () => {
-    it('returns dynamic data unchanged', () => {
-      const dynamicData: AboutTranslationData = {
-        sections: [
-          {
-            id: 'section-1',
-            layout: 'single-column',
-            columns: [[]],
-          },
-        ],
-        metadata: {
-          version: '1.0.0',
-          lastModified: '2024-01-01',
-          author: 'test',
-        },
-      };
-
-      const result = migrateAboutTranslationData(dynamicData);
-
-      expect(result).toBe(dynamicData); // Should return same object
-    });
-
-    it('migrates legacy data to dynamic format', () => {
-      const legacyData = {
-        title: 'Test Title',
-        subtitle: 'Test Subtitle',
-        mission: { description: 'Test mission' },
-        values: { items: [{ title: 'Value', description: 'Description' }] },
-        buttonText: 'Button',
-        copyright: { prefix: '© ', linkText: 'Test', suffix: '' },
-      } as any;
-
-      const result = migrateAboutTranslationData(legacyData);
-
-      expect(result.sections).toBeDefined();
-      expect(result.sections!.length).toBeGreaterThan(0);
-      expect(result.metadata?.migrated).toBe(true);
-    });
-  });
-});
diff --git a/messages/en-US.json.backup b/messages/en-US.json.backup
deleted file mode 100644
index 7aaa9d79..00000000
--- a/messages/en-US.json.backup
+++ /dev/null
@@ -1,2500 +0,0 @@
-{
-  "common": {
-    "ui": {
-      "cancel": "Cancel",
-      "back": "Back",
-      "loading": "Loading...",
-      "retry": "Retry",
-      "remove": "Remove",
-      "error": "Error",
-      "download": "Download",
-      "copy": "Copy",
-      "copied": "Copied!",
-      "open": "Open",
-      "dismiss": "Dismiss",
-      "customSelect": {
-        "placeholder": "Please select..."
-      },
-      "exportButton": {
-        "tooltip": "Export file",
-        "ariaLabel": "Export file"
-      },
-      "logoutDialog": {
-        "title": "Logout",
-        "message": "Are you sure you want to logout? You will need to log in again to access your account.",
-        "confirm": "Logout",
-        "cancel": "Cancel",
-        "loggingOut": "Logging out..."
-      },
-      "moreButton": {
-        "ariaLabel": "More options"
-      }
-    },
-    "time": {
-      "notRecorded": "Not recorded",
-      "invalidDate": "Invalid date",
-      "formatError": "Format error",
-      "greeting": {
-        "morning": "Good morning",
-        "afternoon": "Good afternoon",
-        "evening": "Good evening",
-        "night": "It's getting late",
-        "default": "Hello"
-      }
-    }
-  },
-  "pages": {
-    "home": {
-      "title": "AgentifUI",
-      "subtitle": "Explore the infinite possibilities of AI and create intelligent new experiences",
-      "getStarted": "Get Started",
-      "learnMore": "Learn More",
-      "features": [
-        {
-          "title": "Large Model Integration",
-          "description": "Support for multiple model providers including OpenAI, Anthropic, Dify, etc., meeting different enterprise needs"
-        },
-        {
-          "title": "RAG Knowledge Enhancement",
-          "description": "Integrate Retrieval-Augmented Generation (RAG) technology to enable private knowledge bases and context awareness"
-        },
-        {
-          "title": "Enterprise Deployment",
-          "description": "Support for private deployment, ensuring data security, providing stable and reliable services based on Dify backend"
-        }
-      ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". Explore the infinite possibilities of AI."
-      }
-    },
-    "chat": {
-      "newChat": "New Chat",
-      "sendMessage": "Send",
-      "inputPlaceholder": "Type your message...",
-      "noMessages": "No messages yet",
-      "typing": "Typing...",
-      "recentChats": "Recent Chats",
-      "historyChats": "Chat History",
-      "input": {
-        "placeholder": "Type your message...",
-        "sendMessage": "Send message",
-        "stopGeneration": "Stop generation",
-        "attachFile": "Attach file",
-        "selectModel": "Select model",
-        "noModelAvailable": "No models available",
-        "pleaseSelectModel": "Please select a model",
-        "sending": "Sending...",
-        "uploading": "Uploading...",
-        "uploadFailed": "Upload failed",
-        "retryUpload": "Retry upload",
-        "removeFile": "Remove file",
-        "fileUploadError": "File upload error",
-        "messageSendFailed": "Message send failed",
-        "unknownError": "Unknown error",
-        "validatingConfig": "Validating app configuration...",
-        "cannotSubmit": "Cannot submit",
-        "addAttachment": "Add attachment",
-        "retryUploadTooltip": "Retry upload",
-        "removeAttachment": "Remove attachment",
-        "scrollToBottom": "Scroll to bottom"
-      },
-      "fileUpload": {
-        "selectFileType": "Select file type",
-        "image": "Image",
-        "document": "Document",
-        "audio": "Audio",
-        "video": "Video",
-        "custom": "Custom",
-        "uploadProgress": "Upload progress",
-        "uploadComplete": "Upload complete",
-        "uploadError": "Upload error",
-        "fileTooLarge": "File too large",
-        "unsupportedFormat": "Unsupported file format"
-      },
-      "fileTypeSelector": {
-        "ariaLabel": "Add attachment",
-        "notSupported": "This app does not support file uploads",
-        "noLimit": "File upload limit is 0",
-        "noTypesConfigured": "No supported file types configured",
-        "maxFilesReached": "Maximum file limit reached ({maxFiles})",
-        "addAttachment": "Add attachment ({currentFiles}/{maxFiles})",
-        "loading": "Loading...",
-        "loadError": "Failed to load file types",
-        "reachedLimit": "Limit reached ({currentFiles}/{maxFiles})",
-        "maxUpload": "Upload up to {maxFiles} files",
-        "noUploadLimit": "No upload limit"
-      },
-      "modelSelector": {
-        "noModelsAvailable": "No models available",
-        "selectModel": "Select model",
-        "appNotFound": "App not found: {appId}"
-      },
-      "messages": {
-        "assistant": "Assistant",
-        "user": "You",
-        "thinking": "Thinking...",
-        "stopped": "Stopped",
-        "completed": "Completed",
-        "copyMessage": "Copy message",
-        "editMessage": "Edit message",
-        "deleteMessage": "Delete message",
-        "regenerate": "Regenerate",
-        "feedback": "Feedback",
-        "like": "Like",
-        "dislike": "Dislike",
-        "copied": "Copied",
-        "copyFailed": "Copy failed",
-        "imageLink": "Image link",
-        "viewImage": "View image",
-        "clickToView": "Click to view",
-        "clickToViewWithAlt": "Click to view: {alt}"
-      },
-      "suggestedQuestions": {
-        "moreQuestions": "{count} more questions..."
-      }
-    },
-    "chatflow": {
-      "loading": {
-        "inputConfig": "Loading input configuration..."
-      },
-      "form": {
-        "question": {
-          "label": "Your Question or Request",
-          "placeholder": "Please describe your question or request in detail...",
-          "required": "Please enter your question or request",
-          "tooLong": "Question description cannot exceed {maxLength} characters"
-        },
-        "additionalInfo": "Additional Information",
-        "reset": "Reset Form",
-        "processing": "Processing...",
-        "startConversation": "Start Conversation",
-        "checkAndCorrectErrors": "Please check and correct the errors marked in the form",
-        "defaultAppName": "AI Chat",
-        "defaultDescription": "Please enter your question to start an intelligent conversation"
-      },
-      "floatingController": {
-        "showTracker": "Show Node Tracker",
-        "hideTracker": "Hide Node Tracker"
-      },
-      "nodeTracker": {
-        "title": "Node Execution Progress",
-        "starting": "Starting Chatflow",
-        "noRecords": "No node execution records",
-        "waitingUpdate": "Waiting for node status update...",
-        "showProgress": "Node execution progress will be shown after starting conversation",
-        "executionError": "Execution Error:"
-      },
-      "executionBar": {
-        "status": {
-          "iterating": "Iterating",
-          "iterationCompleted": "Iteration Complete",
-          "iterationFailed": "Iteration Failed",
-          "waitingIteration": "Waiting Iteration",
-          "looping": "Looping",
-          "loopCompleted": "Loop Complete",
-          "loopFailed": "Loop Failed",
-          "waitingLoop": "Waiting Loop",
-          "executing": "Executing",
-          "completed": "Completed",
-          "failed": "Failed",
-          "waiting": "Waiting",
-          "unknown": "Unknown",
-          "executing_": "Executing..."
-        },
-        "nodeTypes": {
-          "start": "Start Node",
-          "llm": "LLM Inference",
-          "knowledgeRetrieval": "Knowledge Retrieval",
-          "questionClassifier": "Question Classifier",
-          "ifElse": "Conditional Branch",
-          "code": "Code Execution",
-          "templateTransform": "Template Transform",
-          "variableAssigner": "Variable Assigner",
-          "variableAggregator": "Variable Aggregator",
-          "documentExtractor": "Document Extractor",
-          "parameterExtractor": "Parameter Extractor",
-          "httpRequest": "HTTP Request",
-          "listOperator": "List Operator",
-          "iteration": "Loop Iteration",
-          "end": "End Node",
-          "node": "Node"
-        },
-        "progressType": {
-          "iteration": "Iteration Progress",
-          "branch": "Branch Progress"
-        },
-        "branch": {
-          "label": "Branch"
-        }
-      }
-    },
-    "workflow": {
-      "form": {
-        "inputPlaceholder": "Please enter {label}",
-        "selectPlaceholder": "Please select {label}",
-        "rangeHint": "Range: {min} - {max}",
-        "minValueHint": "Minimum value: {min}",
-        "maxValueHint": "Maximum value: {max}",
-        "stepHint": "Step: {step}",
-        "precisionHint": "Decimal places: {precision}",
-        "defaultLabel": "Input text",
-        "loading": "Loading form configuration...",
-        "noFormConfig": "This app has no input form configured",
-        "reset": "Reset form",
-        "executing": "Executing...",
-        "startExecution": "Start execution",
-        "errors": {
-          "instanceNotFound": "Service instance with instanceId {instanceId} not found"
-        },
-        "validation": {
-          "required": "{label} is required",
-          "invalidNumber": "{label} must be a valid number",
-          "minValue": "{label} cannot be less than {min}",
-          "maxValue": "{label} cannot be greater than {max}",
-          "stepValue": "{label} must be a multiple of {step}",
-          "precisionExceeded": "{label} decimal places cannot exceed {precision} digits",
-          "maxLengthExceeded": "{label} length cannot exceed {maxLength} characters",
-          "invalidSelection": "Invalid value selected for {label}",
-          "tooManyFiles": "{label} file count cannot exceed {maxFiles}",
-          "fileTooLarge": "File \"{fileName}\" in {label} exceeds {maxSize}MB",
-          "unsupportedFileType": "File \"{fileName}\" in {label} is not supported, supported types: {allowedTypes}"
-        }
-      },
-      "status": {
-        "running": "Workflow executing",
-        "completed": "Execution completed",
-        "failed": "Execution failed",
-        "stopped": "Execution stopped",
-        "pending": "Waiting for execution",
-        "unknown": "Unknown",
-        "totalTime": "Total time: {time}s"
-      },
-      "nodeStatus": {
-        "iterating": "Iterating...",
-        "iterationCompleted": "Iteration completed",
-        "iterationFailed": "Iteration failed",
-        "waitingIteration": "Waiting for iteration",
-        "looping": "Looping",
-        "loopCompleted": "Loop completed",
-        "loopFailed": "Loop failed",
-        "waitingLoop": "Waiting for loop",
-        "parallelRunning": "Parallel executing...",
-        "parallelCompleted": "Parallel completed",
-        "parallelFailed": "Parallel failed",
-        "waitingParallel": "Waiting for parallel execution",
-        "executing": "Executing...",
-        "nodeCompleted": "Execution completed",
-        "nodeFailed": "Execution failed",
-        "nodePending": "Waiting for execution",
-        "nodeUnknown": "Unknown status"
-      },
-      "nodeTypes": {
-        "start": "Start Node",
-        "llm": "LLM Inference",
-        "knowledgeRetrieval": "Knowledge Retrieval",
-        "questionClassifier": "Question Classifier",
-        "ifElse": "Conditional Branch",
-        "code": "Code Execution",
-        "templateTransform": "Template Transform",
-        "variableAssigner": "Variable Assigner",
-        "variableAggregator": "Variable Aggregator",
-        "documentExtractor": "Document Extractor",
-        "parameterExtractor": "Parameter Extractor",
-        "httpRequest": "HTTP Request",
-        "listOperator": "List Operator",
-        "iteration": "Loop Iteration",
-        "parallel": "Parallel Branch",
-        "end": "End Node"
-      },
-      "iterationDetails": {
-        "roundIteration": "Round {round} Iteration",
-        "roundLoop": "Round {round} Loop",
-        "nodeNumber": "Node {number}"
-      },
-      "buttons": {
-        "retry": "Retry",
-        "close": "Close",
-        "copy": "Copy result",
-        "copied": "Copied",
-        "download": "Download result",
-        "retryUpload": "Retry upload",
-        "removeFile": "Remove file",
-        "viewResult": "View result",
-        "stop": "Stop",
-        "reset": "Reset"
-      },
-      "history": {
-        "showHistory": "View history",
-        "hideHistory": "Close history",
-        "noDetailData": "This execution record has no detailed result data, but you can view basic information",
-        "title": "Execution History",
-        "selected": "{count} selected",
-        "batchDelete": "Batch delete",
-        "deleteSelected": "Delete selected {count} items",
-        "cancelSelection": "Cancel selection",
-        "loading": "Loading execution history...",
-        "noRecords": "No execution records",
-        "getDetailFailed": "Failed to get execution details",
-        "unknownError": "Unknown error",
-        "userNotLoggedIn": "User not logged in"
-      },
-      "fileUpload": {
-        "uploading": "Uploading file...",
-        "dropOrClick": "Drag files here or click to upload",
-        "uploadFailed": "Upload failed",
-        "supportAllTypes": "Support uploading various file types",
-        "supportTypes": "Support uploading: {types}",
-        "fileTypes": {
-          "image": "Image",
-          "document": "Document",
-          "audio": "Audio",
-          "video": "Video",
-          "custom": "Other files"
-        },
-        "uploaded": "Uploaded",
-        "maxFiles": "Upload up to {maxFiles} files ({remaining} remaining)",
-        "maxFileSize": "Maximum file size {size}MB",
-        "maxFilesReached": "Maximum file limit reached ({current}/{max})",
-        "selectedFiles": "Selected files"
-      },
-      "tabs": {
-        "inputForm": "Input Form",
-        "executionStatus": "Execution Status",
-        "history": "History"
-      },
-      "resultViewer": {
-        "title": "Workflow Execution Result",
-        "noData": "No result data",
-        "copy": "Copy result",
-        "copied": "Copied",
-        "download": "Download result"
-      }
-    },
-    "textGeneration": {
-      "status": {
-        "generating": "Generating text...",
-        "completed": "Generation completed",
-        "failed": "Generation failed",
-        "stopped": "Stopped",
-        "waiting": "Waiting to generate",
-        "result": "Generation result"
-      },
-      "progress": "Progress: {percent}%",
-      "buttons": {
-        "copy": "Copy text",
-        "copied": "Copied",
-        "download": "Download text",
-        "stop": "Stop",
-        "retry": "Retry",
-        "reset": "Reset",
-        "close": "Close"
-      },
-      "emptyState": {
-        "title": "Waiting to generate text",
-        "description": "Fill out the form on the left and click the execute button to start text generation"
-      },
-      "placeholder": {
-        "generating": "Generating text...",
-        "result": "Generated text will be displayed here"
-      },
-      "loadingState": {
-        "title": "Generating Text",
-        "description": "Please wait, generating content for you..."
-      },
-      "streamingIndicator": "Generating",
-      "stats": {
-        "characters": "Characters: {count}",
-        "words": "Words: {count}",
-        "tokensUsed": "Tokens used: {count}"
-      }
-    },
-    "apps": {
-      "startChatWith": "Start chatting with {appName}...",
-      "continueChatWith": "Continue chatting with {appName}...",
-      "defaultApp": "App",
-      "loadFailed": "App failed to load",
-      "backToMarket": "Back to App Market",
-      "loading": {
-        "app": "Loading app...",
-        "validating": "Validating app configuration...",
-        "default": "Loading..."
-      },
-      "errors": {
-        "appNotFound": "App not found",
-        "initializationFailed": "Initialization failed",
-        "appLoadFailed": "App failed to load"
-      },
-      "status": {
-        "loadingApp": "Loading app...",
-        "validatingConfig": "Validating app configuration...",
-        "loading": "Loading..."
-      },
-      "buttons": {
-        "backToMarket": "Back to App Market"
-      },
-      "market": {
-        "categories": {
-          "all": "All",
-          "favorite": "Popular",
-          "writing": "Writing",
-          "translation": "Translation",
-          "programming": "Programming",
-          "codeGeneration": "Code Generation",
-          "analysis": "Analysis",
-          "summary": "Summary",
-          "conversation": "Conversation",
-          "assistant": "Assistant",
-          "textGeneration": "Text Generation",
-          "document": "Document",
-          "dataAnalysis": "Data Analysis",
-          "development": "Development",
-          "generation": "Generation",
-          "conversationModel": "Conversation Model",
-          "reasoningModel": "Reasoning Model",
-          "documentModel": "Document Model",
-          "multimodal": "Multimodal",
-          "highPrecision": "High Precision",
-          "fastResponse": "Fast",
-          "localDeployment": "Local",
-          "enterprise": "Enterprise",
-          "private": "Private",
-          "tools": "Tools",
-          "general": "General",
-          "professional": "Professional"
-        },
-        "search": {
-          "placeholder": "Search apps..."
-        },
-        "tryAdjustSearch": "Try adjusting search criteria or browse other categories",
-        "viewMode": {
-          "grid": "Grid",
-          "list": "List"
-        },
-        "appCard": {
-          "noDescription": "No description",
-          "defaultType": "App"
-        },
-        "header": {
-          "title": "App Market",
-          "totalApps": "{count} apps in total",
-          "categoryApps": "{category} · {count} apps",
-          "totalLabel": "{count} total"
-        },
-        "categoryKeys": {
-          "all": "All",
-          "commonApps": "Popular Apps"
-        },
-        "unknownAppType": "Unknown Dify app type",
-        "useDefaultRoute": "Use default route",
-        "routeJump": "Route jump",
-        "app": "App",
-        "type": "Type",
-        "path": "Path",
-        "openAppFailed": "Failed to open app"
-      }
-    },
-    "auth": {
-      "login": {
-        "title": "Login",
-        "subtitle": "Welcome to Intelligent Assistant",
-        "emailLabel": "Email",
-        "passwordLabel": "Password",
-        "emailPlaceholder": "your@email.com",
-        "passwordPlaceholder": "••••••••",
-        "loginButton": "Login",
-        "forgotPasswordLink": "Forgot password?",
-        "phoneLoginLink": "📱 Login with phone verification",
-        "noAccountText": "Don't have an account?",
-        "registerLink": "Sign up now",
-        "showPassword": "Show password",
-        "hidePassword": "Hide password",
-        "orSeparator": "Login with email and password",
-        "orSeparatorSso": "Or use email and password",
-        "alerts": {
-          "registered": "Registration successful! Please check your email to verify your account, then login.",
-          "resetSuccess": "Password reset successful! Please login with your new password."
-        },
-        "errors": {
-          "oauthFailed": "OAuth login failed, please try again or use other login methods",
-          "ssoCallbackFailed": "SSO authentication callback failed, please try to login again",
-          "ticketValidationFailed": "SSO ticket validation failed, please login again",
-          "invalidEmployeeNumber": "Employee number format is incorrect, please contact administrator",
-          "userCreationFailed": "Account creation failed, this may be due to inconsistent account data. Please try to login again, if the problem persists, please contact administrator",
-          "accountDataInconsistent": "Account data is inconsistent, system is trying to automatically repair. Please wait a moment and login again",
-          "profileCreationFailed": "User profile creation failed, please contact administrator for assistance",
-          "ssoProviderNotFound": "SSO service configuration error, please contact administrator",
-          "missingTicket": "Authentication parameters missing, please login again",
-          "default": "An error occurred during login, please try again later",
-          "loginFailed": "Login failed, please check your email and password"
-        }
-      },
-      "register": {
-        "title": "Register",
-        "subtitle": "Join AgentifUI and start your AI journey",
-        "nameLabel": "Full Name",
-        "usernameLabel": "Username",
-        "usernameOptional": "(optional)",
-        "emailLabel": "Email",
-        "passwordLabel": "Password",
-        "confirmPasswordLabel": "Confirm Password",
-        "namePlaceholder": "Enter your full name",
-        "usernamePlaceholder": "Choose a username",
-        "emailPlaceholder": "your@email.com",
-        "passwordPlaceholder": "••••••••",
-        "createAccountButton": "Create Account",
-        "phoneLoginLink": "📱 Login with phone verification",
-        "hasAccountText": "Already have an account?",
-        "loginLink": "Sign in now",
-        "showPassword": "Show password",
-        "hidePassword": "Hide password",
-        "showConfirmPassword": "Show confirm password",
-        "hideConfirmPassword": "Hide confirm password",
-        "orSeparator": "Or use email and password",
-        "errors": {
-          "nameRequired": "Please enter your full name",
-          "emailRequired": "Please enter email address",
-          "passwordTooShort": "Password must be at least 6 characters",
-          "passwordMismatch": "Passwords do not match",
-          "usernameInvalid": "Username can only contain letters, numbers, underscores and hyphens, 2-20 characters long",
-          "emailExists": "This email is already registered, please use a different email or login directly",
-          "passwordWeak": "Password is not strong enough, please use a more complex password",
-          "emailInvalid": "Email format is incorrect, please check and try again",
-          "registerFailed": "Registration failed, please try again later"
-        }
-      },
-      "phoneLoginPage": {
-        "title": "AgentifUI",
-        "subtitle": "Intelligent conversation at your fingertips",
-        "orSeparator": "Or",
-        "emailLoginLink": "Login with email and password",
-        "registerLink": "Don't have an account? Sign up now",
-        "termsText": "By logging in, you agree to our",
-        "termsLink": "Terms of Service",
-        "privacyLink": "Privacy Policy",
-        "andText": "and"
-      },
-      "ssoProcessing": {
-        "title": "SSO Login",
-        "loading": "Loading..."
-      },
-      "forgotPassword": {
-        "title": "Forgot Password",
-        "subtitle": "Enter your email address and we'll send you a password reset link",
-        "emailLabel": "Email Address",
-        "emailPlaceholder": "your@email.com",
-        "sendButton": "Send Reset Link",
-        "sendingButton": "Sending...",
-        "backToLogin": "Back to Login",
-        "success": {
-          "title": "Email Sent",
-          "message": "We've sent a password reset link to {email}",
-          "instructions": "Please check your email (including spam folder) and click the link to reset your password.",
-          "noEmail": "If you don't receive the email, please check if the email address is correct or try again later."
-        },
-        "errors": {
-          "emailRequired": "Please enter a valid email address",
-          "rateLimited": "Too many requests, please try again later",
-          "sendFailed": "Failed to send, please try again later"
-        }
-      },
-      "resetPassword": {
-        "title": "Reset Password",
-        "subtitle": "Please enter your new password",
-        "verifying": "Verifying",
-        "verifyingSubtitle": "Verifying reset link...",
-        "invalidTitle": "Invalid Link",
-        "invalidSubtitle": "Password reset link has expired or is invalid",
-        "successTitle": "Password Reset Successful",
-        "successSubtitle": "Your password has been successfully reset",
-        "passwordLabel": "New Password",
-        "confirmPasswordLabel": "Confirm Password",
-        "passwordPlaceholder": "Enter new password",
-        "confirmPasswordPlaceholder": "Enter new password again",
-        "resetButton": "Reset Password",
-        "resettingButton": "Resetting...",
-        "showPassword": "Show new password",
-        "hidePassword": "Hide new password",
-        "showConfirmPassword": "Show confirm password",
-        "hideConfirmPassword": "Hide confirm password",
-        "passwordHint": "Password must contain uppercase and lowercase letters, numbers, at least 8 characters",
-        "backToLogin": "Go to Login",
-        "retryReset": "Request password reset again",
-        "successMessage": "You can now login to your account with the new password.",
-        "errors": {
-          "passwordRequired": "Please enter new password",
-          "passwordTooShort": "Password must be at least 6 characters",
-          "passwordMismatch": "Passwords do not match",
-          "passwordWeak": "Password is not strong enough, please use a more complex password",
-          "sessionExpired": "Session has expired, please request password reset again",
-          "resetFailed": "Password reset failed, please try again later",
-          "linkInvalid": "Reset link verification failed",
-          "linkExpired": "Reset link is invalid or expired, please request password reset again",
-          "verifyFailed": "Verification failed, please request password reset again"
-        }
-      },
-      "phoneLogin": {
-        "title": "Phone Login",
-        "subtitle": "Login using phone number to receive verification code",
-        "otpSubtitle": "Please enter the 6-digit verification code you received",
-        "phoneLabel": "Phone Number",
-        "otpLabel": "Verification Code",
-        "phonePlaceholder": "13812345678",
-        "otpPlaceholder": "Enter 6-digit code",
-        "sendOtpButton": "Send Verification Code",
-        "sendingButton": "Sending...",
-        "verifyButton": "Verify Code",
-        "verifyingButton": "Verifying...",
-        "resendButton": "Resend Verification Code",
-        "changePhoneButton": "Change Phone Number",
-        "otpSentTo": "Verification code sent to +86{phone}",
-        "errors": {
-          "phoneRequired": "Please enter phone number",
-          "phoneInvalid": "Please enter a valid Chinese mainland phone number",
-          "otpRequired": "Please enter verification code",
-          "otpInvalid": "Verification code should be 6 digits",
-          "sendFailed": "Failed to send verification code, please try again later",
-          "verifyFailed": "Verification code is incorrect, please re-enter"
-        },
-        "success": {
-          "otpSent": "Verification code has been sent, please check your SMS",
-          "verifySuccess": "Verification successful! Logging in..."
-        }
-      },
-      "sso": {
-        "title": "Single Sign-On Authentication",
-        "subtitle": "Login with your unified authentication account",
-        "button": "Login with SSO",
-        "simpleButton": "🏛️ Single Sign-On",
-        "jumpingButton": "Redirecting...",
-        "helpText": "Account will be created automatically on first login",
-        "contactText": "Please contact system administrator if you have any questions",
-        "startError": "Failed to start SSO login, please try again later",
-        "noProvider": "No SSO login methods available at the moment",
-        "processing": {
-          "title": "SSO Login",
-          "processing": "Processing SSO login...",
-          "welcome": "Welcome {name}, establishing session...",
-          "verifying": "Verifying identity...",
-          "sessionCheck": "Verifying session...",
-          "success": "Login successful! Redirecting...",
-          "failed": "Login failed",
-          "redirecting": "Will automatically redirect to login page in 3 seconds...",
-          "errors": {
-            "missingParams": "SSO parameters missing or invalid",
-            "userDataNotFound": "SSO user data not found",
-            "sessionExpired": "SSO session expired, please login again",
-            "loginFailed": "SSO login failed",
-            "sessionValidationFailed": "Session validation failed",
-            "noValidSessionData": "Server did not return valid session data",
-            "processingFailed": "SSO processing failed"
-          }
-        }
-      },
-      "social": {
-        "github": {
-          "login": "Login with GitHub",
-          "register": "Register with GitHub",
-          "failed": "GitHub login failed"
-        }
-      }
-    },
-    "settings": {
-      "title": "Settings",
-      "profile": "Profile",
-      "account": "Account",
-      "appearance": "Appearance",
-      "language": "Language",
-      "navigation": {
-        "overview": "Overview",
-        "profileNav": "Profile",
-        "accountNav": "Account",
-        "appearanceNav": "Appearance",
-        "languageNav": "Language"
-      },
-      "descriptions": {
-        "overview": "Manage your personal preferences and customize your app experience",
-        "profileDesc": "Update personal information, avatar and account settings",
-        "accountDesc": "Manage your account security and login information",
-        "appearanceDesc": "Customize themes, colors, interface layout and timezone settings",
-        "languageDesc": "Choose your preferred display language and region settings"
-      },
-      "accountSettings": {
-        "title": "Account Settings",
-        "accountInfo": "Account Information",
-        "loginEmail": "Login Email",
-        "authMethod": "Authentication Method",
-        "emailPasswordAuth": "Email & Password",
-        "securitySettings": "Security Settings",
-        "logoutAccount": "Logout of current account",
-        "confirmLogout": "Are you sure you want to logout?",
-        "confirmLogoutBtn": "Confirm Logout",
-        "logout": "Logout",
-        "loggingOut": "Logging out...",
-        "loadAccountError": "Error loading account information",
-        "retry": "Retry",
-        "deleteAccount": "Delete Account"
-      },
-      "profileSettings": {
-        "title": "Profile",
-        "accountInfo": "Account Information",
-        "registrationTime": "Registration Time",
-        "accountRole": "Account Role",
-        "lastLogin": "Last Login",
-        "editProfile": "Edit Profile",
-        "name": "Name",
-        "nickname": "Username",
-        "profileUpdated": "Profile updated successfully",
-        "updateFailed": "Failed to update profile",
-        "saving": "Saving...",
-        "saveChanges": "Save Changes",
-        "namePlaceholder": "Enter your name",
-        "usernamePlaceholder": "Enter your username",
-        "roles": {
-          "admin": "Administrator",
-          "manager": "Manager",
-          "user": "User"
-        },
-        "status": {
-          "notRecorded": "Not recorded",
-          "notSet": "Not set"
-        },
-        "loadProfileError": "Error loading profile",
-        "avatar": {
-          "defaultUser": "User",
-          "userAvatar": "{userName}'s avatar",
-          "editHover": "Edit",
-          "uploadSuccess": "Avatar uploaded successfully",
-          "deleteSuccess": "Avatar deleted successfully"
-        }
-      },
-      "avatarModal": {
-        "title": "Avatar Settings",
-        "subtitle": "Click to upload or drag image to the area below",
-        "currentAvatar": "Current Avatar",
-        "supportedFormats": "Supports JPEG, JPG, PNG, WebP formats • Max 5MB",
-        "crop": {
-          "zoom": "Zoom",
-          "cancel": "Reselect",
-          "confirm": "Confirm Crop",
-          "uploading": "Uploading..."
-        },
-        "uploadArea": {
-          "uploading": "Uploading...",
-          "changeAvatar": "Click to change avatar",
-          "uploadAvatar": "Click to upload avatar",
-          "uploadProgress": "Upload progress: {progress}%",
-          "dragHint": "Or drag image here"
-        },
-        "buttons": {
-          "deleteAvatar": "Delete Avatar",
-          "complete": "Complete",
-          "uploading": "Uploading...",
-          "cancel": "Cancel",
-          "confirmDelete": "Confirm Delete",
-          "deleting": "Deleting..."
-        },
-        "deleteConfirm": {
-          "title": "Delete Avatar",
-          "message": "Are you sure you want to delete the current avatar? This action cannot be undone."
-        },
-        "status": {
-          "success": "Operation completed successfully"
-        },
-        "errors": {
-          "unsupportedType": "Unsupported file type. Please select JPEG, JPG, PNG or WebP format images.",
-          "fileTooLarge": "File too large. Please select images smaller than 5MB.",
-          "userNotLoggedIn": "User not logged in",
-          "uploadFailed": "Upload failed",
-          "deleteFailed": "Delete failed"
-        }
-      },
-      "avatarUpload": {
-        "errors": {
-          "unsupportedFileType": "Unsupported file type. Supported formats: {types}",
-          "fileTooLarge": "File too large. Maximum supported {maxSize}MB",
-          "uploadFailed": "Upload failed: {message}",
-          "getUrlFailed": "Failed to get avatar URL",
-          "updateDatabaseFailed": "Failed to update database: {message}",
-          "deleteFailed": "Delete failed: {message}",
-          "uploadFailedGeneric": "Upload failed",
-          "deleteFailedGeneric": "Delete failed"
-        }
-      },
-      "appearanceSettings": {
-        "title": "Appearance Settings",
-        "theme": "Theme",
-        "themeDescription": "Choose your preferred display mode",
-        "themes": {
-          "light": "Light Mode",
-          "dark": "Dark Mode",
-          "system": "Follow System"
-        },
-        "preview": {
-          "light": "Light",
-          "dark": "Dark",
-          "system": "System"
-        },
-        "timezone": "Timezone Settings",
-        "timezoneDescription": "Select your timezone to affect time display format",
-        "currentTimezone": "Current Timezone",
-        "timezoneRegions": {
-          "asia": "Asia",
-          "europe": "Europe",
-          "america": "Americas",
-          "africa": "Africa",
-          "australia": "Oceania",
-          "utc": "Coordinated Universal Time"
-        },
-        "timezoneCities": {
-          "shanghai": "Shanghai",
-          "beijing": "Beijing",
-          "hongKong": "Hong Kong",
-          "taipei": "Taipei",
-          "tokyo": "Tokyo",
-          "seoul": "Seoul",
-          "singapore": "Singapore",
-          "bangkok": "Bangkok",
-          "dubai": "Dubai",
-          "kolkata": "Kolkata",
-          "london": "London",
-          "paris": "Paris",
-          "berlin": "Berlin",
-          "rome": "Rome",
-          "madrid": "Madrid",
-          "amsterdam": "Amsterdam",
-          "moscow": "Moscow",
-          "newYork": "New York",
-          "losAngeles": "Los Angeles",
-          "chicago": "Chicago",
-          "denver": "Denver",
-          "toronto": "Toronto",
-          "saoPaulo": "São Paulo",
-          "mexicoCity": "Mexico City",
-          "sydney": "Sydney",
-          "melbourne": "Melbourne",
-          "perth": "Perth",
-          "auckland": "Auckland",
-          "cairo": "Cairo",
-          "johannesburg": "Johannesburg",
-          "lagos": "Lagos",
-          "utc": "UTC"
-        },
-        "timezoneSearch": "Search timezone...",
-        "systemTimezone": "System Timezone",
-        "customTimezone": "Custom Timezone",
-        "timezonePreview": "Preview time: {time}",
-        "timezoneUpdated": "Timezone settings updated"
-      },
-      "languageSettings": {
-        "title": "Language Settings",
-        "language": "Language",
-        "languageDescription": "Choose your preferred display language",
-        "currentLanguage": "Current Language",
-        "switchLanguage": "Switch Language"
-      }
-    },
-    "admin": {
-      "title": "Admin Panel",
-      "main": {
-        "title": "Admin Panel Overview",
-        "subtitle": "Welcome to the AgentifUI Admin Panel. Here you can manage various system configurations and settings"
-      },
-      "layout": {
-        "headerTitle": "AgentifUI Admin Panel",
-        "breadcrumbRoot": "Admin Panel",
-        "menuItems": {
-          "main": {
-            "text": "Admin Home",
-            "description": "Admin panel overview"
-          },
-          "apiConfig": {
-            "text": "API Configuration",
-            "description": "Manage application instances and configuration parameters"
-          },
-          "content": {
-            "text": "Content Management",
-            "description": "Manage home and about page content"
-          },
-          "users": {
-            "text": "User Management",
-            "description": "Manage user accounts and permissions"
-          },
-          "ssoProviders": {
-            "text": "SSO Providers Management",
-            "description": "Manage SSO provider configurations"
-          },
-          "groups": {
-            "text": "Group Management",
-            "description": "Manage users and groups, configure group application permissions"
-          },
-          "permissions": {
-            "text": "App Permission Management",
-            "description": "Manage application visibility and group permissions"
-          }
-        },
-        "actions": {
-          "rebuildButton": {
-            "text": "Rebuild",
-            "messages": {
-              "startRebuild": "Starting rebuild and deployment...",
-              "startRebuildDescription": "This process may take a few minutes, please be patient.",
-              "buildInProgress": "Build in progress",
-              "buildInProgressDescription": "Please wait for the current build to complete before trying again.",
-              "authFailed": "Authentication failed",
-              "authFailedDescription": "Please log in again and try.",
-              "permissionDenied": "Permission denied",
-              "permissionDeniedDescription": "You do not have permission to perform this operation.",
-              "unknownError": "Unknown error occurred",
-              "buildComplete": "Build complete!",
-              "buildCompleteDescription": "The application will automatically restart in 2 seconds to apply changes.",
-              "appRestarting": "Application restarting...",
-              "appRestartingDescription": "The page will automatically refresh after restart is complete.",
-              "deployFailed": "Deployment failed",
-              "networkError": "Network error, please check connection and try again."
-            }
-          },
-          "returnToChatButton": {
-            "text": "Return to Chat"
-          }
-        },
-        "common": {
-          "actions": {
-            "refresh": "Refresh Data",
-            "save": "Save Changes",
-            "saving": "Saving...",
-            "reset": "Reset",
-            "create": "Create",
-            "cancel": "Cancel",
-            "confirm": "Confirm"
-          },
-          "status": {
-            "hasUnsavedChanges": "Has unsaved changes",
-            "saving": "Saving...",
-            "allChangesSaved": "All changes saved"
-          }
-        }
-      },
-      "apiConfig": {
-        "emptyState": {
-          "title": "Select Application Instance",
-          "description": "Select an application instance from the left list to view and edit its configuration, or click the add button to create a new application instance"
-        },
-        "formActions": {
-          "save": "Save",
-          "saving": "Saving...",
-          "cancel": "Cancel"
-        },
-        "providerManagement": {
-          "buttonText": "Manage Providers",
-          "modal": {
-            "title": "Manage Service Providers",
-            "providerList": "Provider List",
-            "addProvider": "Add Provider",
-            "editProvider": "Edit Provider",
-            "addNewProvider": "Add New Provider",
-            "loading": "Loading...",
-            "noProviders": "No providers configured",
-            "deleteConfirm": "Are you sure you want to delete provider \"{name}\"? This action cannot be undone.",
-            "messages": {
-              "loadFailed": "Failed to load provider list",
-              "createSuccess": "Provider created successfully",
-              "createFailed": "Failed to create provider",
-              "updateSuccess": "Provider updated successfully",
-              "updateFailed": "Failed to update provider",
-              "deleteSuccess": "Provider deleted successfully",
-              "deleteFailed": "Failed to delete provider",
-              "saveFailed": "Failed to save provider"
-            },
-            "providerTypes": {
-              "llm": "LLM (Large Language Model)",
-              "platform": "Platform (Aggregation Platform)",
-              "embedding": "Embedding (Vectorization)",
-              "tts": "TTS (Text to Speech)",
-              "stt": "STT (Speech to Text)",
-              "vision": "Vision (Image Recognition)",
-              "multimodal": "Multimodal"
-            },
-            "authTypes": {
-              "api_key": "API Key",
-              "bearer_token": "Bearer Token",
-              "oauth2": "OAuth 2.0",
-              "basic_auth": "Basic Auth"
-            },
-            "status": {
-              "enabled": "Enabled",
-              "disabled": "Disabled",
-              "default": "Default Provider"
-            },
-            "form": {
-              "name": {
-                "label": "Provider Name",
-                "placeholder": "e.g.: Dify, OpenAI, Claude",
-                "required": "Provider name cannot be empty"
-              },
-              "type": {
-                "label": "Provider Type",
-                "placeholder": "Select provider type",
-                "required": "Please select provider type"
-              },
-              "baseUrl": {
-                "label": "API URL",
-                "placeholder": "e.g.: https://api.dify.ai/v1",
-                "required": "API URL cannot be empty",
-                "invalid": "Please enter a valid URL format"
-              },
-              "authType": {
-                "label": "Authentication Type",
-                "placeholder": "Select authentication type",
-                "required": "Please select authentication type"
-              },
-              "isActive": {
-                "label": "Enable Status"
-              },
-              "isDefault": {
-                "label": "Default Provider",
-                "description": "Only one default provider can exist in the system. Setting this will automatically clear the default status of other providers.",
-                "setAsDefault": "Set as Default",
-                "notDefault": "Not Default"
-              },
-              "authMethod": "Authentication Method"
-            },
-            "buttons": {
-              "delete": "Delete",
-              "cancel": "Cancel",
-              "save": "Save",
-              "saving": "Saving..."
-            }
-          }
-        },
-        "layout": {
-          "loading": "Loading application instances...",
-          "noInstances": "No application instances",
-          "noInstancesForProvider": "No application instances for this provider",
-          "addFirstApp": "Add first application",
-          "searchPlaceholder": "Search applications...",
-          "defaultApp": "Default",
-          "delete": "Delete",
-          "deleteConfirm": "Are you sure you want to delete this application instance? This action cannot be undone.",
-          "defaultAppCannotDelete": "Default application cannot be deleted. Please set another application as default first.",
-          "instanceNotFound": "Instance to delete not found",
-          "deleteInstanceFailed": "Failed to delete application instance",
-          "setDefaultConfirm": "Are you sure you want to set \"{name}\" as the default application?",
-          "instanceNotFoundForDefault": "Instance to set as default not found",
-          "setDefaultFailed": "Failed to set default application",
-          "setAsDefault": "Set as Default"
-        },
-        "fields": {
-          "apiUrl": "API URL (config.api_url)",
-          "apiKey": "API Key (key_value)",
-          "providerBinding": "Provider Binding",
-          "urlPlaceholder": "URL will automatically use the selected provider's configuration",
-          "urlBindingInfo": "URL is bound to service provider, modify in \"Manage Providers\"",
-          "currentProvider": "Current provider: {name}",
-          "unknownProvider": "Unknown provider",
-          "keyConfigured": "Configured",
-          "keyNotConfigured": "Not configured",
-          "keyPlaceholderEdit": "Leave empty to keep existing API key",
-          "keyPlaceholderNew": "Enter API key",
-          "keyEditHint": "Leaving the input field empty will keep the existing key unchanged",
-          "tagsLabel": "Application Tags (tags)",
-          "tagCategories": {
-            "modelType": "Model Type",
-            "useCase": "Use Case",
-            "features": "Technical Features"
-          },
-          "predefinedTags": {
-            "conversationModel": "Conversation Model",
-            "reasoningModel": "Reasoning Model",
-            "documentModel": "Document Model",
-            "multimodal": "Multimodal",
-            "textGeneration": "Text Generation",
-            "codeGeneration": "Code Generation",
-            "dataAnalysis": "Data Analysis",
-            "translation": "Translation",
-            "highAccuracy": "High Accuracy",
-            "fastResponse": "Fast Response",
-            "localDeployment": "Local Deployment",
-            "enterpriseGrade": "Enterprise Grade"
-          },
-          "customTagPlaceholder": "Custom tag (press Enter to add)",
-          "tagHelpText": "Tags are used for application classification and search"
-        },
-        "providerSelector": {
-          "placeholder": "Please select provider",
-          "defaultLabel": "Default",
-          "noProviders": "No available service providers"
-        },
-        "customProviderSelector": {
-          "placeholder": "Please select provider",
-          "defaultLabel": "Default",
-          "noProviders": "No available service providers"
-        },
-        "instanceFilter": {
-          "allApps": "All Applications",
-          "providerApps": "{name} Applications",
-          "defaultLabel": "Default",
-          "totalCount": "Total {count}",
-          "noProviders": "No available service providers"
-        },
-        "events": {
-          "defaultSetSuccess": "Default application set successfully"
-        },
-        "instanceSaveHandlers": {
-          "errors": {
-            "selectProvider": "Please select a service provider",
-            "invalidProvider": "Selected service provider is invalid",
-            "inactiveProvider": "Selected service provider is not active",
-            "createFailed": "Failed to create application instance",
-            "updateFailed": "Failed to update application instance",
-            "setDefaultFailed": "Failed to set default application"
-          },
-          "success": {
-            "instanceCreated": "Application instance created successfully",
-            "instanceUpdated": "Application instance updated successfully",
-            "setAsDefault": "Application instance set as default"
-          },
-          "warnings": {
-            "createSuccessButDefaultFailed": "Application created successfully, but failed to set as default"
-          }
-        },
-        "difyParametersPanel": {
-          "title": "{instanceName} - Dify Parameter Configuration",
-          "defaultInstanceName": "this app",
-          "unsavedChanges": "You have unsaved changes",
-          "sections": {
-            "basic": {
-              "title": "Basic Configuration",
-              "openingStatement": {
-                "label": "Opening Statement",
-                "placeholder": "Enter opening statement..."
-              },
-              "suggestedQuestions": {
-                "label": "Suggested Questions",
-                "addButton": "Add Suggested Question",
-                "placeholder": "Enter suggested question..."
-              }
-            },
-            "fileUpload": {
-              "title": "File Upload Feature",
-              "enabled": "Enabled",
-              "disabled": "Disabled"
-            },
-            "speechToText": {
-              "title": "Speech to Text",
-              "enabled": "Enabled",
-              "disabled": "Disabled"
-            },
-            "textToSpeech": {
-              "title": "Text to Speech",
-              "enabled": "Enabled",
-              "disabled": "Disabled",
-              "enableLabel": "Enable Text to Speech",
-              "voiceType": {
-                "label": "Voice Type",
-                "placeholder": "e.g.: alloy, echo, fable"
-              },
-              "language": {
-                "label": "Language",
-                "selectPlaceholder": "Select Language",
-                "options": {
-                  "zh": "Chinese",
-                  "en": "English",
-                  "ja": "Japanese",
-                  "ko": "Korean"
-                }
-              },
-              "autoPlay": {
-                "label": "Auto Play",
-                "enabled": "On",
-                "disabled": "Off"
-              }
-            },
-            "retrieverResource": {
-              "title": "Citation and Attribution"
-            },
-            "annotationReply": {
-              "title": "Annotation Reply"
-            },
-            "userInputForm": {
-              "title": "User Input Form",
-              "fieldsCount": "{count} fields",
-              "description": "User input form configuration is usually auto-generated by Dify application. It's recommended to get the latest configuration through sync function.",
-              "fieldInfo": "Variable: {variable} | Required: {required} | Default: {defaultValue}",
-              "fieldRequired": "Yes",
-              "fieldOptional": "No",
-              "fieldNoDefault": "None",
-              "fieldLabel": "Field {index}",
-              "noFields": "No user input form configuration"
-            },
-            "systemParameters": {
-              "title": "System Parameters",
-              "fileSizeLimit": "Document Size Limit (MB)",
-              "imageSizeLimit": "Image Size Limit (MB)",
-              "audioSizeLimit": "Audio Size Limit (MB)",
-              "videoSizeLimit": "Video Size Limit (MB)"
-            }
-          },
-          "fileUploadModal": {
-            "title": "File Upload Configuration",
-            "uploadMethod": {
-              "label": "Upload Method",
-              "local": "Local Upload",
-              "url": "URL Link",
-              "both": "Both Methods"
-            },
-            "maxFiles": {
-              "label": "Maximum File Count",
-              "description": "Documents < 15MB, Images < 10MB, Audio < 50MB, Video < 100MB"
-            },
-            "fileTypes": {
-              "label": "Supported File Types",
-              "image": "Image",
-              "document": "Document",
-              "audio": "Audio",
-              "video": "Video",
-              "other": "Other File Types",
-              "customPlaceholder": "e.g.: zip, rar, 7z, tar",
-              "customDescription": "Supported formats: zip, rar, 7z, tar, gz, bz2, xz, etc."
-            }
-          },
-          "buttons": {
-            "cancel": "Cancel",
-            "save": "Save",
-            "confirm": "Confirm"
-          }
-        },
-        "page": {
-          "title": {
-            "edit": "Edit Application Instance",
-            "add": "Add Application Instance"
-          },
-          "unsavedChanges": "Unsaved changes",
-          "validation": {
-            "instanceId": {
-              "noSpaces": "Cannot contain spaces (affects URL routing)",
-              "invalidChars": "Can only contain letters, numbers, hyphens (-), underscores (_), and dots (.)",
-              "tooLong": "Length cannot exceed 50 characters",
-              "mustStartWithAlphanumeric": "Must start with a letter or number",
-              "formatError": "Application ID format error",
-              "notModifiable": "Application ID cannot be modified after creation",
-              "formatDescription": "Can only contain letters, numbers, hyphens (-), underscores (_), and dots (.). No spaces allowed. You can sync configuration to auto-generate."
-            },
-            "formValidationFailed": "Form validation failed",
-            "fillApiCredentials": "Please fill in API URL and API Key first",
-            "fillInstanceId": "Please fill in Application ID first"
-          },
-          "sync": {
-            "basicInfo": "Basic Information",
-            "paramConfig": "Parameter Configuration",
-            "noDataReceived": "Unable to retrieve any configuration data from Dify API. Please check if Application ID and API configuration are correct",
-            "successMessage": "Successfully synced {items} from Dify API!",
-            "autoGeneratedId": " Auto-generated Application ID: {instanceId}",
-            "syncFailed": "Configuration sync failed",
-            "syncFailedTitle": "Sync Failed",
-            "syncing": "Syncing...",
-            "syncFromDify": "Sync from Dify",
-            "syncFromDifyWithAutoId": "Sync from Dify API (will auto-generate Application ID if empty)",
-            "syncFromDifyDescription": "Sync configuration from Dify API",
-            "syncButtonDisabled": "Please fill in API URL and API Key first"
-          },
-          "defaultApp": {
-            "setAsDefault": "Set as Default",
-            "isDefault": "Default App",
-            "willSetAsDefault": "Will Set as Default",
-            "setDefaultConfirm": "Are you sure you want to set \"{name}\" as the default application?",
-            "setDefaultSuccess": "Default application set successfully",
-            "setDefaultFailed": "Failed to set default application",
-            "instanceNotFound": "Instance ID does not exist, cannot set as default application"
-          },
-          "provider": {
-            "title": "Service Provider",
-            "current": "Current application service provider (cannot be modified)",
-            "select": "Select service provider",
-            "unknown": "Unknown Provider",
-            "selectPlaceholder": "Please select provider",
-            "configUpdated": "Provider configuration updated"
-          },
-          "fields": {
-            "instanceId": {
-              "label": "Application ID (instance_id) *",
-              "placeholder": "Enter Application ID",
-              "generateButton": "Generate ID",
-              "generateTooltip": "Click to generate random UUID as Application ID"
-            },
-            "displayName": {
-              "label": "Display Name (display_name) *",
-              "placeholder": "Enter display name"
-            },
-            "description": {
-              "label": "Application Description (description)",
-              "placeholder": "Enter application description"
-            }
-          },
-          "appType": {
-            "label": "Application Type (app_type) *",
-            "model": {
-              "title": "Model",
-              "description": "For model switching"
-            },
-            "marketplace": {
-              "title": "Marketplace",
-              "description": "For application marketplace"
-            },
-            "note": "Applications with \"Model\" type will appear in the chat interface model selector"
-          },
-          "syncConfirm": {
-            "updateDescription": "Update description to: \"{description}\"?"
-          },
-          "difyAppTypeSelector": {
-            "title": "Dify Application Type (dify_apptype) *",
-            "titleCompact": "Dify Application Type",
-            "description": "Choose the Dify application type that fits your use case. Different types have different features and applicable scenarios."
-          },
-          "difyConfig": {
-            "title": "Dify Parameter Configuration",
-            "appTypeNote": "Applications with \"Model\" type will appear in the chat interface model selector"
-          }
-        },
-        "useApiConfigEvents": {
-          "defaultInstanceSetSuccess": "Default application set successfully"
-        }
-      },
-      "content": {
-        "page": {
-          "title": "Content Management",
-          "subtitle": "Manage multilingual content for home and about pages",
-          "showPreview": "Show Preview",
-          "fullscreenPreview": "Fullscreen Preview",
-          "closePreview": "Close Preview",
-          "loadingEditor": {
-            "about": "Unable to load about page editor.",
-            "home": "Unable to load home page editor."
-          },
-          "loadingPreview": "Loading preview...",
-          "messages": {
-            "loadFailed": "Failed to load translation data",
-            "saveSuccess": "Configuration saved successfully",
-            "saveFailed": "Failed to save configuration, please try again"
-          },
-          "saveActions": {
-            "hasChanges": "Unsaved changes",
-            "saving": "Saving...",
-            "allSaved": "All changes saved",
-            "reset": "Reset",
-            "save": "Save Changes",
-            "saving_": "Saving..."
-          }
-        },
-        "tabs": {
-          "about": "About Page",
-          "home": "Home Page"
-        },
-        "previewToolbar": {
-          "aboutPreview": "About Page Preview",
-          "homePreview": "Home Page Preview"
-        },
-        "editor": {
-          "common": {
-            "editLanguage": "Edit Language",
-            "selectLanguage": "Select Language",
-            "cardNumber": "Card #{number}"
-          },
-          "home": {
-            "pageTitle": "Page Title (title)",
-            "subtitle": "Subtitle (subtitle)",
-            "features": "Feature Cards (features)",
-            "featureTitle": "Title (title)",
-            "featureDescription": "Description (description)",
-            "getStarted": "Primary Button (getStarted)",
-            "learnMore": "Secondary Button (learnMore)",
-            "copyright": "Copyright Info (copyright)",
-            "copyrightPrefix": "Prefix (prefix)",
-            "copyrightLinkText": "Link Text (linkText)",
-            "copyrightSuffix": "Suffix (suffix)"
-          },
-          "about": {
-            "pageTitle": "Page Title (title)",
-            "subtitle": "Subtitle (subtitle)",
-            "mission": "Mission Description (mission.description)",
-            "values": "Value Cards (values.items)",
-            "valueTitle": "Title (title)",
-            "valueDescription": "Description (description)",
-            "buttonText": "Button Text (buttonText)",
-            "copyright": "Copyright Info (copyright)",
-            "copyrightPrefix": "Prefix (prefix)",
-            "copyrightLinkText": "Link Text (linkText)",
-            "copyrightSuffix": "Suffix (suffix)"
-          }
-        }
-      },
-      "users": {
-        "title": "User Management",
-        "subtitle": "Manage system user accounts, permissions and access control",
-        "stats": {
-          "totalUsers": "Total Users",
-          "activeUsers": "Active Users",
-          "suspendedUsers": "Suspended",
-          "pendingUsers": "Pending",
-          "adminUsers": "Administrators",
-          "managerUsers": "Managers",
-          "regularUsers": "Regular Users",
-          "newUsersToday": "New Today",
-          "activeUsersRatio": "Percentage of total users",
-          "newUsersThisWeek": "Other days this week"
-        },
-        "filters": {
-          "searchPlaceholder": "Search user email, name or username...",
-          "advancedFilters": "Advanced Filters",
-          "reset": "Reset",
-          "rolePermissions": "Role Permissions",
-          "accountStatus": "Account Status",
-          "authSource": "Authentication Source",
-          "roleOptions": {
-            "all": "All Roles",
-            "admin": "Administrator",
-            "manager": "Manager",
-            "user": "Regular User"
-          },
-          "statusOptions": {
-            "all": "All Status",
-            "active": "Active",
-            "suspended": "Suspended",
-            "pending": "Pending"
-          },
-          "authSourceOptions": {
-            "all": "All Sources",
-            "email": "📧 Email",
-            "sso": "SSO Authentication",
-            "phone": "📱 Phone"
-          },
-          "sortBy": "Sort By",
-          "sortOptions": {
-            "createdAt": "Registration Time",
-            "lastSignIn": "Last Login",
-            "email": "Email",
-            "fullName": "Name"
-          },
-          "sortOrder": {
-            "desc": "Newest First",
-            "asc": "Oldest First"
-          }
-        },
-        "table": {
-          "headers": {
-            "userInfo": "User Information",
-            "contact": "Contact",
-            "groups": "Groups",
-            "rolePermissions": "Role Permissions",
-            "status": "Status",
-            "lastLogin": "Last Login",
-            "registerTime": "Registration Time"
-          },
-          "loading": "Loading user data...",
-          "loadingSubtext": "Please wait, fetching latest user information",
-          "noData": "No user data",
-          "noDataSubtext": "No users found matching the criteria, please try adjusting filters",
-          "noDataHint": "You can reset filters or contact administrator to add new users"
-        },
-        "batchOperations": {
-          "selected": "Selected {count} users",
-          "cancelSelection": "Cancel Selection",
-          "setAsAdmin": "Set as Administrator",
-          "setAsManager": "Set as Manager",
-          "setAsUser": "Set as Regular User",
-          "activate": "Activate",
-          "suspend": "Suspend"
-        },
-        "actions": {
-          "refreshData": "Refresh Data",
-          "addUser": "Add User",
-          "addUserInDevelopment": "Add user feature in development",
-          "viewUser": "View user: {name}",
-          "editUser": "Edit user: {name}",
-          "viewDetails": "View Details",
-          "editInfo": "Edit Information",
-          "changeRole": "Change Role",
-          "changeStatus": "Change Status",
-          "deleteUser": "Delete User",
-          "confirm": "Confirm",
-          "current": "(Current)",
-          "self": "(Self)",
-          "admin": "(Admin)",
-          "notSet": "Not Set",
-          "notSetEmail": "Email not set",
-          "notSetPhone": "Phone not set",
-          "defaultUser": "User",
-          "emailIcon": "📧",
-          "phoneIcon": "📱",
-          "moreGroups": "+{count} groups",
-          "notInGroup": "Not in any group",
-          "moreGroupsTooltip": "{count} more groups: {names}"
-        },
-        "pagination": {
-          "showing": "Showing {start} - {end} of {total} records",
-          "previous": "Previous",
-          "next": "Next"
-        },
-        "messages": {
-          "cannotIncludeSelf": "Cannot include yourself in batch operations",
-          "cannotDowngradeAdmin": "Cannot downgrade other administrators in batch operations",
-          "cannotChangeOwnRole": "Cannot modify your own role",
-          "cannotDowngradeOtherAdmin": "Cannot downgrade other administrators",
-          "cannotDeleteSelf": "Cannot delete yourself",
-          "cannotDeleteOtherAdmin": "Cannot delete other administrators",
-          "roleChangeSuccess": "Changed {name}'s role to {role}",
-          "statusChangeSuccess": "Changed {name}'s status to {status}",
-          "batchRoleChangeSuccess": "Batch changed {count} users' roles",
-          "batchStatusChangeSuccess": "Batch changed {count} users' status",
-          "roleChangeConfirm": "Change {name}'s role to {role}?",
-          "statusChangeConfirm": "Change {name}'s status to {status}?",
-          "batchRoleChangeConfirm": "Change {count} users' roles to {role}?",
-          "batchStatusChangeConfirm": "Change {count} users' status to {status}?",
-          "deleteConfirm": "Are you sure you want to delete user {name}? This action cannot be undone.",
-          "deleteSuccess": "Deleted user {name}",
-          "roles": {
-            "admin": "Administrator",
-            "manager": "Manager",
-            "user": "Regular User"
-          },
-          "statuses": {
-            "active": "Active",
-            "suspended": "Suspended",
-            "pending": "Pending"
-          }
-        }
-      },
-      "ssoProviders": {
-        "title": "SSO Provider Management",
-        "subtitle": "Manage single sign-on providers and their configurations",
-        "addProvider": "Add Provider",
-        "refresh": "Refresh Data",
-        "error": "Error",
-        "filters": {
-          "searchPlaceholder": "Search provider name or protocol...",
-          "reset": "Reset"
-        },
-        "table": {
-          "headers": {
-            "name": "Name",
-            "protocol": "Protocol",
-            "status": "Status",
-            "order": "Order",
-            "created": "Created At"
-          },
-          "enabled": "Enabled",
-          "disabled": "Disabled",
-          "button": "Button",
-          "noProviders": "No SSO providers found",
-          "createFirst": "Create your first SSO provider to get started",
-          "loadingProviders": "Loading SSO providers...",
-          "actions": {
-            "viewDetails": "View Details",
-            "edit": "Edit",
-            "enable": "Enable",
-            "disable": "Disable",
-            "delete": "Delete"
-          }
-        },
-        "form": {
-          "createTitle": "Create SSO Provider",
-          "editTitle": "Edit SSO Provider",
-          "createDescription": "Configure a new single sign-on provider",
-          "editDescription": "Modify the configuration of an existing SSO provider",
-          "tabs": {
-            "basicInfo": "Basic Info",
-            "protocolConfig": "Protocol Config",
-            "security": "Security",
-            "uiSettings": "UI Settings"
-          },
-          "fields": {
-            "providerName": "Provider Name",
-            "providerNamePlaceholder": "Example University SSO",
-            "protocol": "Protocol",
-            "selectProtocol": "Select Protocol",
-            "displayOrder": "Display Order",
-            "buttonText": "Button Text",
-            "buttonTextPlaceholder": "Leave blank to use provider name",
-            "enableProvider": "Enable this provider",
-            "baseUrl": "Base URL",
-            "baseUrlPlaceholder": "https://sso.example.com",
-            "loginEndpoint": "Login Endpoint",
-            "loginEndpointPlaceholder": "/login",
-            "logoutEndpoint": "Logout Endpoint",
-            "logoutEndpointPlaceholder": "/logout",
-            "validateEndpoint": "Validate Endpoint",
-            "validateEndpointPlaceholder": "/serviceValidate",
-            "validateV3Endpoint": "V3 Validate Endpoint",
-            "validateV3EndpointPlaceholder": "/p3/serviceValidate",
-            "attributeMapping": "Attribute Mapping",
-            "employeeId": "Employee ID",
-            "employeeIdPlaceholder": "cas:user",
-            "username": "Username",
-            "usernamePlaceholder": "cas:username",
-            "requireHttps": "Require HTTPS",
-            "validateCertificates": "Validate SSL Certificates",
-            "allowedRedirectHosts": "Allowed Redirect Hosts",
-            "allowedRedirectHostsPlaceholder": "example.com\nsubdomain.example.com",
-            "allowedRedirectHostsHint": "Enter one host per line",
-            "icon": "Icon",
-            "iconPlaceholder": "🏛️",
-            "theme": "Theme",
-            "logoUrl": "Logo URL",
-            "logoUrlPlaceholder": "https://example.com/logo.png",
-            "description": "Description",
-            "descriptionPlaceholder": "University SSO System"
-          },
-          "themes": {
-            "primary": "Primary",
-            "secondary": "Secondary",
-            "default": "Default",
-            "outline": "Outline"
-          },
-          "advancedSettings": "Advanced Settings",
-          "showRawJson": "Show Raw JSON",
-          "hideRawJson": "Hide Raw JSON",
-          "rawJsonConfig": "Raw JSON Configuration",
-          "actions": {
-            "cancel": "Cancel",
-            "save": "Save",
-            "saving": "Saving..."
-          },
-          "messages": {
-            "fixJsonErrors": "Please fix JSON errors before saving",
-            "createSuccess": "SSO provider created successfully",
-            "updateSuccess": "SSO provider updated successfully",
-            "unexpectedError": "An unexpected error occurred"
-          }
-        },
-        "deleteDialog": {
-          "title": "Confirm Deletion",
-          "message": "Are you sure you want to delete the SSO provider \"{name}\"? This action cannot be undone and will disable SSO login for users of this provider.",
-          "cancel": "Cancel",
-          "delete": "Delete",
-          "deleting": "Deleting...",
-          "success": "\"{name}\" has been successfully deleted"
-        },
-        "detailsModal": {
-          "title": "Provider Details and Configuration Overview",
-          "basicInfo": "Basic Information",
-          "protocol": "Protocol",
-          "status": "Status",
-          "displayOrder": "Display Order",
-          "buttonText": "Button Text",
-          "protocolConfig": "Protocol Configuration",
-          "baseUrl": "Base URL",
-          "login": "Login",
-          "logout": "Logout",
-          "securitySettings": "Security Settings",
-          "requireHttps": "Require HTTPS",
-          "validateCertificates": "Validate Certificates",
-          "yes": "Yes",
-          "no": "No",
-          "uiConfig": "UI Configuration",
-          "theme": "Theme",
-          "icon": "Icon",
-          "description": "Description",
-          "timestamps": "Timestamps",
-          "created": "Created At",
-          "updated": "Updated At",
-          "actions": {
-            "close": "Close",
-            "editProvider": "Edit Provider"
-          }
-        },
-        "stats": {
-          "totalProviders": "Total Providers",
-          "allSsoProviders": "All SSO providers are configured",
-          "enabled": "Enabled",
-          "percentOfTotal": "of total",
-          "noProviders": "No providers configured",
-          "disabled": "Disabled",
-          "activeProtocols": "Active Protocols",
-          "differentProtocolTypes": "different protocol types",
-          "protocolBreakdown": "Protocol Breakdown"
-        }
-      },
-      "groups": {
-        "title": "Group Management",
-        "subtitle": "Manage user groups and application permission assignments",
-        "stats": {
-          "totalGroups": "Total Groups",
-          "totalMembers": "Total Members",
-          "averageMembers": "Average Members",
-          "activeGroups": "Active Groups"
-        },
-        "header": {
-          "title": "Group Management",
-          "subtitle": "Manage user groups and application permission assignments",
-          "refreshData": "Refresh Data",
-          "createGroup": "Create Group"
-        },
-        "search": {
-          "placeholder": "Search group name or description...",
-          "searchResults": "Search Results",
-          "keyword": "Keyword",
-          "noResults": "No matching groups found",
-          "noResultsHint": "Try using different keywords"
-        },
-        "list": {
-          "noGroups": "No Groups",
-          "noGroupsHint": "Click \"Create Group\" button to create your first group",
-          "loading": "Loading group list...",
-          "memberCount": "{count} members",
-          "createdAt": "Created",
-          "actions": {
-            "manageMembers": "Manage Members",
-            "editGroup": "Edit Group",
-            "deleteGroup": "Delete Group"
-          }
-        },
-        "createModal": {
-          "title": "Create Group",
-          "nameLabel": "Group Name",
-          "nameRequired": "Group name cannot be empty",
-          "nameTooShort": "Group name must be at least 2 characters",
-          "nameTooLong": "Group name cannot exceed 50 characters",
-          "namePlaceholder": "Enter group name",
-          "descriptionLabel": "Group Description",
-          "descriptionTooLong": "Description cannot exceed 200 characters",
-          "descriptionPlaceholder": "Enter group description (optional)",
-          "creating": "Creating...",
-          "createButton": "Create Group",
-          "cancel": "Cancel",
-          "createSuccess": "Group \"{name}\" created successfully"
-        },
-        "editModal": {
-          "title": "Edit Group",
-          "nameLabel": "Group Name",
-          "nameRequired": "Group name cannot be empty",
-          "nameTooShort": "Group name must be at least 2 characters",
-          "nameTooLong": "Group name cannot exceed 50 characters",
-          "namePlaceholder": "Enter group name",
-          "descriptionLabel": "Group Description",
-          "descriptionTooLong": "Description cannot exceed 200 characters",
-          "descriptionPlaceholder": "Enter group description (optional)",
-          "updating": "Updating...",
-          "updateButton": "Save Changes",
-          "cancel": "Cancel",
-          "noChanges": "No changes detected",
-          "updateSuccess": "Group \"{name}\" updated successfully"
-        },
-        "membersModal": {
-          "title": "Group Member Management",
-          "subtitle": "{groupName} · {count} members total",
-          "addMember": "Add Member",
-          "searchPlaceholder": "Search members...",
-          "loading": "Loading member list...",
-          "noMembers": "No group members",
-          "noMembersHint": "Click \"Add Member\" button to invite users to join the group",
-          "noSearchResults": "No matching members found",
-          "noSearchResultsHint": "Try using different keywords",
-          "unknownUser": "Unknown User",
-          "joinedAt": "Joined",
-          "removeMember": "Remove Member",
-          "removeMemberConfirm": "Are you sure you want to remove \"{memberName}\" from group \"{groupName}\"?",
-          "removeMemberSuccess": "Removed member \"{memberName}\""
-        },
-        "addMembersModal": {
-          "title": "Add Members",
-          "subtitle": "Select users to add to group \"{groupName}\"",
-          "searchPlaceholder": "Search username, name or email...",
-          "loading": "Loading user list...",
-          "noUsers": "No users available to add",
-          "noSearchResults": "No matching users found",
-          "selectAll": "Select All",
-          "deselectAll": "Deselect All",
-          "addSelected": "Add {count} members",
-          "tableHeaders": {
-            "userInfo": "User Info",
-            "role": "Role"
-          },
-          "userRoles": {
-            "admin": "Administrator",
-            "manager": "Manager",
-            "user": "Regular User"
-          },
-          "unknownUser": "Unknown User",
-          "pagination": {
-            "showing": "Showing {start} - {end} of {total} records",
-            "previous": "Previous",
-            "next": "Next"
-          },
-          "addSuccess": "Successfully added {count} members to group",
-          "addPartialSuccess": "{errorCount} members failed to add"
-        },
-        "messages": {
-          "deleteConfirm": "Are you sure you want to delete group \"{name}\"? This action cannot be undone.",
-          "deleteSuccess": "Deleted group \"{name}\"",
-          "loadError": "Failed to load group data",
-          "createError": "Failed to create group",
-          "updateError": "Failed to update group",
-          "deleteError": "Failed to delete group",
-          "addMemberError": "Failed to add member",
-          "removeMemberError": "Failed to remove member"
-        }
-      },
-      "permissions": {
-        "header": {
-          "title": "Application Permission Management",
-          "subtitle": "Unified management of application visibility and group permissions",
-          "refreshButton": "Refresh Data"
-        },
-        "searchAndFilter": {
-          "searchPlaceholder": "Search application name or description...",
-          "filterLabel": "Application Type:",
-          "filterOptions": {
-            "all": "All Applications",
-            "public": "Public Applications",
-            "groupOnly": "Group Applications",
-            "private": "Private Applications"
-          }
-        },
-        "layout": {
-          "appListTitle": "Application List",
-          "appListSubtitle": "Select an application to configure permissions",
-          "permissionPanelTitle": "Permission Configuration",
-          "permissionPanelSubtitle": "Manage application visibility and group permissions"
-        },
-        "appList": {
-          "noApps": "No Applications",
-          "noAppsDescription": "Please create application instances first",
-          "loading": "Loading...",
-          "unknown": "Unknown",
-          "visibility": {
-            "public": "Public",
-            "groupOnly": "Group",
-            "private": "Private"
-          }
-        },
-        "permissionPanel": {
-          "selectApp": {
-            "title": "Select Application",
-            "description": "Choose an application from the left list to configure permissions"
-          },
-          "visibilitySettings": {
-            "title": "Visibility Settings",
-            "currentSetting": "Current",
-            "options": {
-              "public": {
-                "label": "Public Application",
-                "description": "All users can access this application"
-              },
-              "groupOnly": {
-                "label": "Group Application",
-                "description": "Only authorized group members can access"
-              },
-              "private": {
-                "label": "Private Application",
-                "description": "Only administrators can access this application"
-              }
-            }
-          },
-          "groupPermissions": {
-            "title": "Group Permissions",
-            "description": "Select which groups can access this application",
-            "noGroups": {
-              "title": "No Groups",
-              "description": "Please create groups first to set application permissions"
-            },
-            "status": {
-              "enabled": "Enabled",
-              "disabled": "Disabled"
-            },
-            "actions": {
-              "enable": "Enable Access",
-              "disable": "Disable Access"
-            },
-            "memberCount": "{count} members"
-          },
-          "permissionExplanation": {
-            "title": "Permission Explanation",
-            "public": "Public Application: All users can access",
-            "groupOnly": "Group Application: Only authorized group members can access",
-            "private": "Private Application: Only administrators can access"
-          }
-        },
-        "messages": {
-          "visibilityUpdateSuccess": "Application visibility updated to \"{visibility}\"",
-          "groupPermissionEnabled": "Enabled {groupName} access to this application",
-          "groupPermissionDisabled": "Disabled {groupName} access to this application",
-          "loadAppsError": "Failed to load application list",
-          "loadGroupsError": "Failed to load group list",
-          "updateVisibilityError": "Failed to update application visibility",
-          "updateGroupPermissionError": "Failed to update group permissions"
-        }
-      }
-    },
-    "about": {
-      "sections": [
-        {
-          "id": "section-1754655785510-hi9o34kms",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785510-9wmd3qfbr",
-                "type": "heading",
-                "props": {
-                  "content": "About AgentifUI",
-                  "level": 1,
-                  "textAlign": "center"
-                }
-              },
-              {
-                "id": "comp-1754655785510-8kgg6bug1",
-                "type": "paragraph",
-                "props": {
-                  "content": "Connecting AI with enterprises, creating new experiences with large language models",
-                  "textAlign": "center"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-1754655785510-4gy9xxu1j",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785510-wmcqou18g",
-                "type": "heading",
-                "props": {
-                  "content": "Our Mission",
-                  "level": 2,
-                  "textAlign": "left"
-                }
-              },
-              {
-                "id": "comp-1754655785510-422a30k5a",
-                "type": "paragraph",
-                "props": {
-                  "content": "AgentifUI is committed to leveraging the power of large language models to provide innovative application solutions for enterprises. We integrate capabilities from multiple model providers and provide stable, reliable services based on Dify backend, helping organizations fully utilize the value of AI technology.",
-                  "textAlign": "left"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-1754655785510-ftxgzp8bp",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785510-trc6k02bt",
-                "type": "heading",
-                "props": {
-                  "content": "Our Values",
-                  "level": 2,
-                  "textAlign": "left"
-                }
-              },
-              {
-                "id": "comp-1754655785510-rat1vf5ow",
-                "type": "cards",
-                "props": {
-                  "layout": "grid",
-                  "items": [
-                    {
-                      "title": "Technical Innovation",
-                      "description": "Continuously integrate cutting-edge large model technologies to provide leading AI solutions for enterprises"
-                    },
-                    {
-                      "title": "Data Security",
-                      "description": "Support private deployment and strict data protection measures to ensure the security and privacy of enterprise data"
-                    },
-                    {
-                      "title": "Flexible Customization",
-                      "description": "Provide highly customizable solutions to meet specific needs of different industries and scenarios"
-                    },
-                    {
-                      "title": "Knowledge Enhancement",
-                      "description": "Integrate private knowledge bases through RAG technology to enhance model's contextual awareness capabilities"
-                    }
-                  ]
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-1754655785510-ul1fhhk7e",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785510-ac4fm11q8",
-                "type": "button",
-                "props": {
-                  "text": "Start Exploring",
-                  "variant": "solid",
-                  "action": "link",
-                  "url": "#",
-                  "textAlign": "center"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-1754655785510-7dkmyp6wa",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785510-8fd66745a",
-                "type": "paragraph",
-                "props": {
-                  "content": "© 2025 AgentifUI. Explore the future of large model applications.",
-                  "textAlign": "center"
-                }
-              }
-            ]
-          ]
-        }
-      ],
-      "metadata": {
-        "version": "1.0.0",
-        "lastModified": "2025-08-08T12:23:05.510Z",
-        "author": "system-migration",
-        "migratedFrom": "legacy-format",
-        "migrationTimestamp": "2025-08-08T12:23:05.510Z",
-        "locale": "en-US"
-      }
-    }
-  },
-  "components": {
-    "chat": {
-      "messageActions": {
-        "copy": "Copy",
-        "copied": "Copied",
-        "edit": "Edit",
-        "regenerate": "Regenerate",
-        "useful": "Useful",
-        "notUseful": "Not useful",
-        "rated": "Rated"
-      },
-      "referenceSources": {
-        "title": "Referenced {count} knowledge base resources",
-        "knowledgeBase": "Knowledge Base",
-        "expand": "Expand full text",
-        "collapse": "Collapse",
-        "copy": "Copy",
-        "copied": "Copied",
-        "copyFailed": "Copy failed",
-        "relevanceScore": "Relevance",
-        "wordCount": "{count} words",
-        "page": "Page {page}"
-      },
-      "thinkBlock": {
-        "thinking": "Deep thinking",
-        "stopped": "Thinking stopped",
-        "completed": "Deep thought completed"
-      }
-    },
-    "chatInput": {
-      "attachmentPreview": {
-        "fileLimitExceeded": "File limit exceeded ({current}/{max}), please remove some files"
-      }
-    },
-    "ui": {
-      "resizableSplitPane": {
-        "tooltip": "Drag to resize panels, double-click to reset"
-      },
-      "notificationBar": {
-        "closeNotification": "Close notification"
-      },
-      "suggestedQuestionButton": {
-        "ariaLabel": "Suggested question: {question}"
-      },
-      "copyButton": {
-        "copy": "Copy content",
-        "copied": "Copied",
-        "noContent": "No content to copy"
-      },
-      "userAvatar": {
-        "alt": "'s avatar"
-      }
-    }
-  },
-  "debug": {
-    "setDefaultApp": "Setting default app - passed ID:",
-    "currentInstances": "Current all instances:",
-    "instanceNotFound": "Instance not found, passed ID:",
-    "foundInstance": "Found instance:",
-    "setDefaultFailed": "Failed to set default app:",
-    "syncConfig": "Sync config",
-    "syncFailed": "Sync failed:",
-    "syncSuccess": "Sync success"
-  },
-  "buttons": {
-    "syncInProgress": "Syncing...",
-    "syncConfig": "Sync Config",
-    "tooltip": {
-      "syncFromDify": "Sync configuration from Dify API",
-      "syncFromDifyEdit": "Sync configuration from Dify API",
-      "syncFromDifyCreate": "Sync configuration from Dify API (auto-generate ID if empty)",
-      "fillCredentials": "Please fill in API URL and API Key first"
-    }
-  },
-  "confirmDialog": {
-    "updateDisplayName": "Update display name to: \"{name}\"?"
-  },
-  "errors": {
-    "notFound": "Page not found",
-    "serverError": "Server error",
-    "unauthorized": "Unauthorized access"
-  },
-  "navbar": {
-    "user": {
-      "userMenu": "User Menu",
-      "login": "Login",
-      "logout": "Logout",
-      "loggingOut": "Logging out...",
-      "register": "Register",
-      "history": "Chat History",
-      "settings": "Settings",
-      "about": "About",
-      "admin": "Admin Panel",
-      "loginPrompt": "Login to access more features",
-      "loginDescription": "Access your chat history and personal settings"
-    },
-    "conversation": {
-      "newChat": "New Chat",
-      "creating": "Creating...",
-      "loading": "Loading...",
-      "rename": "Rename",
-      "delete": "Delete Chat",
-      "star": "Add to Favorites",
-      "unstar": "Remove from Favorites",
-      "appsMarket": "App Market",
-      "renameDialog": {
-        "title": "Rename Chat",
-        "placeholder": "Enter new chat name",
-        "confirmText": "Confirm Rename"
-      },
-      "deleteDialog": {
-        "title": "Delete Chat",
-        "message": "Are you sure you want to delete chat \"{title}\"? This action cannot be undone.",
-        "confirmText": "Confirm Delete"
-      },
-      "createInProgress": "Chat is being created, please try again later.",
-      "incompleteInfo": "Chat information is incomplete, cannot proceed.",
-      "renameFailed": "Failed to rename chat.",
-      "deleteFailed": "Failed to delete chat.",
-      "operationError": "Operation failed, please try again later."
-    },
-    "workflow": {
-      "history": "History",
-      "closeHistory": "Close History",
-      "viewHistory": "View History",
-      "closeHistoryShort": "Close History",
-      "historyShort": "History"
-    }
-  },
-  "sidebar": {
-    "appName": "AgentifUI",
-    "expand": "Expand",
-    "collapse": "Collapse",
-    "newChat": "New Chat",
-    "historyChats": "Chat History",
-    "appsMarket": "App Market",
-    "settings": "Settings",
-    "recentChats": "Recent Chats",
-    "moreOptions": "More Options",
-    "rename": "Rename",
-    "delete": "Delete Chat",
-    "untitled": "Untitled",
-    "creating": "Creating...",
-    "favoriteApps": "Favorite Apps",
-    "loading": "Loading...",
-    "startWorkflow": "Start Workflow",
-    "startTextGeneration": "Start Text Generation",
-    "startChat": "Start Chat",
-    "hideApp": "Hide App",
-    "renameDialog": {
-      "title": "Rename Chat",
-      "label": "Chat Name",
-      "placeholder": "Enter new chat name",
-      "confirmText": "Confirm Rename"
-    },
-    "deleteDialog": {
-      "title": "Delete Chat",
-      "message": "Are you sure you want to delete chat \"{title}\"? This action cannot be undone.",
-      "confirmText": "Confirm Delete"
-    },
-    "syncingMessage": "Chat data is syncing, please try to {action} later.",
-    "operationFailed": "Operation failed, please try again later.",
-    "saveFailed": "Failed to save chat",
-    "createFailed": "Failed to create chat"
-  },
-  "mobile": {
-    "navigation": {
-      "openMenu": "Open Menu",
-      "openUserMenu": "Open User Menu"
-    },
-    "user": {
-      "defaultUser": "User",
-      "loginRegister": "Login/Register",
-      "avatarAlt": "{userName}'s avatar",
-      "loginPrompt": "Login to access more features"
-    },
-    "bottomSheet": {
-      "userMenu": "User Menu",
-      "account": "Account"
-    },
-    "menu": {
-      "settings": "Settings",
-      "logout": "Logout",
-      "login": "Login",
-      "register": "Register",
-      "adminPanel": "Admin Panel",
-      "about": "About"
-    }
-  },
-  "loading": {
-    "default": "Loading...",
-    "app": "Loading app...",
-    "appList": "Loading app list...",
-    "messages": "Loading more messages...",
-    "moreMessages": "Load more history messages",
-    "retry": "Retry",
-    "failed": "Loading failed",
-    "loadingFailed": "Failed to load messages: {error}",
-    "spinner": "Loading",
-    "pageLoader": {
-      "title": "Loading"
-    }
-  },
-  "dynamicTitle": {
-    "base": "AgentifUI",
-    "settings": {
-      "main": "Settings",
-      "profile": "Profile",
-      "account": "Account Settings",
-      "appearance": "Appearance Settings",
-      "language": "Language Settings"
-    },
-    "admin": {
-      "main": "Admin Panel",
-      "users": "User Management",
-      "apiConfig": "API Configuration",
-      "security": "Security Settings",
-      "analytics": "Data Analytics",
-      "content": "Content Management"
-    },
-    "auth": {
-      "login": "Login",
-      "register": "Register",
-      "phoneLogin": "Phone Login",
-      "resetPassword": "Reset Password",
-      "forgotPassword": "Forgot Password",
-      "ssoProcessing": "SSO Login Processing"
-    },
-    "apps": {
-      "market": "App Market",
-      "agent": "Agent App",
-      "chatbot": "Chatbot App",
-      "chatflow": "Chatflow App",
-      "workflow": "Workflow App",
-      "textGeneration": "Text Generation App",
-      "details": "App Details",
-      "loading": "Loading App..."
-    },
-    "chat": {
-      "main": "Chat",
-      "new": "New Chat",
-      "history": "Chat History",
-      "loading": "Loading Chat...",
-      "notFound": "Chat Not Found"
-    },
-    "about": "About"
-  },
-  "history": {
-    "title": "Chat History",
-    "loading": "Loading conversation records...",
-    "noRecords": "No conversation history",
-    "totalCount": "Found {total} conversations",
-    "searchResults": "Search results: {count} conversations",
-    "totalRecords": "Total {total} conversations",
-    "searchPlaceholder": "Search chat history...",
-    "newChat": "New Chat",
-    "noMessagePreview": "No message preview",
-    "batchDelete": "Batch Delete",
-    "exitSelection": "Exit Selection",
-    "selectAll": "Select All",
-    "deselectAll": "Deselect All",
-    "selected": "Selected {count} / {total} conversations",
-    "deleteCount": "Delete ({count})",
-    "deleting": "Deleting...",
-    "cancel": "Cancel",
-    "rename": "Rename",
-    "delete": "Delete Chat",
-    "moreOptions": "More Options",
-    "noSearchResults": "No matching conversations found",
-    "searchHint": "Try using different search terms",
-    "noHistoryTitle": "No chat history",
-    "noHistoryDesc": "Start a new conversation",
-    "renameDialog": {
-      "title": "Rename Chat",
-      "label": "Chat Name",
-      "placeholder": "Enter new chat name",
-      "confirmText": "Confirm Rename"
-    },
-    "deleteDialog": {
-      "title": "Delete Chat",
-      "message": "Are you sure you want to delete chat \"{title}\"? This action cannot be undone.",
-      "confirmText": "Confirm Delete"
-    },
-    "batchDeleteDialog": {
-      "title": "Batch Delete Chats",
-      "message": "Are you sure you want to delete the selected {count} chats? This action cannot be undone.",
-      "confirmText": "Delete",
-      "cancelText": "Cancel"
-    },
-    "operations": {
-      "renameFailed": "Failed to rename chat",
-      "deleteFailed": "Failed to delete chat",
-      "batchDeleteSuccess": "Successfully deleted {success} conversations, {failed} failed to delete",
-      "batchDeleteFailed": "Deletion failed, please try again later",
-      "error": "Operation failed, please try again later"
-    }
-  },
-  "difyAppTypes": {
-    "workflow": {
-      "label": "Workflow",
-      "description": "Automated workflow process",
-      "features": {
-        "automation": "Automation",
-        "batchProcessing": "Batch Processing",
-        "processControl": "Process Control"
-      }
-    },
-    "text-generation": {
-      "label": "Text Generation",
-      "description": "Single text generation application",
-      "features": {
-        "textGeneration": "Text Generation",
-        "contentCreation": "Content Creation",
-        "formattedOutput": "Formatted Output"
-      },
-      "resultViewer": {
-        "title": "Generation Result",
-        "defaultTitle": "Text Generation Result",
-        "actions": {
-          "copy": "Copy Result",
-          "copied": "Copied",
-          "download": "Download Result"
-        },
-        "executionInfo": {
-          "title": "Execution Info",
-          "status": "Status:",
-          "createdAt": "Created At:",
-          "elapsedTime": "Elapsed Time:",
-          "statusValues": {
-            "completed": "Completed",
-            "failed": "Failed",
-            "stopped": "Stopped"
-          }
-        },
-        "content": {
-          "title": "Generated Content",
-          "noContent": "No content available"
-        }
-      }
-    },
-    "chatbot": {
-      "label": "Chatbot",
-      "description": "Basic conversational chatbot",
-      "features": {
-        "conversation": "Conversation",
-        "fileUpload": "File Upload",
-        "speechToText": "Speech to Text"
-      }
-    },
-    "agent": {
-      "label": "Agent",
-      "description": "Intelligent agent with tool calling",
-      "features": {
-        "conversation": "Conversation",
-        "toolCalling": "Tool Calling",
-        "reasoningChain": "Reasoning Chain",
-        "multiTurnTasks": "Multi-turn Tasks"
-      }
-    },
-    "chatflow": {
-      "label": "Chatflow",
-      "description": "Conversational workflow application",
-      "features": {
-        "processOrchestration": "Process Orchestration",
-        "conditionalBranching": "Conditional Branching",
-        "conversationManagement": "Conversation Management"
-      }
-    }
-  },
-  "filePreview": {
-    "loading": "Loading file content...",
-    "failed": "Failed to load file",
-    "retryButton": "Retry",
-    "dismissButton": "Dismiss",
-    "downloadButton": "Download File",
-    "closeButton": "Close preview",
-    "noFileSelected": "No file selected",
-    "previewNotSupported": "Preview not supported for this file type. You can download it to view the content.",
-    "textPreview": {
-      "title": "Text Preview",
-      "copyButton": "Copy",
-      "copiedButton": "Copied!",
-      "downloadButton": "Download",
-      "charactersCount": "{count} characters"
-    },
-    "pdfPreview": {
-      "title": "PDF Preview",
-      "openButton": "Open",
-      "downloadButton": "Download",
-      "fileSize": "{size} MB"
-    },
-    "imagePreview": {
-      "title": "Image Preview",
-      "downloadButton": "Download",
-      "loadError": "Failed to load image",
-      "downloadToView": "Download to view",
-      "filename": "Filename",
-      "fileSize": "File Size",
-      "fileType": "File Type"
-    },
-    "audio": {
-      "title": "Audio Preview",
-      "duration": "Duration",
-      "loadError": "Failed to load audio file",
-      "notSupported": "Your browser does not support audio playback"
-    },
-    "video": {
-      "title": "Video Preview",
-      "duration": "Duration",
-      "resolution": "Resolution",
-      "loadError": "Failed to load video file",
-      "notSupported": "Your browser does not support video playback"
-    },
-    "markdownPreview": {
-      "title": "Markdown Preview",
-      "renderedMode": "Rendered",
-      "rawMode": "Raw",
-      "downloadButton": "Download",
-      "charactersCount": "{count} characters"
-    },
-    "errors": {
-      "noAppId": "No application ID available for file preview",
-      "downloadNoAppId": "No application ID available for file download"
-    },
-    "fileInfo": {
-      "title": "File Information",
-      "name": "Name:",
-      "type": "Type:",
-      "size": "Size:"
-    }
-  }
-}
diff --git a/messages/zh-CN.json.backup b/messages/zh-CN.json.backup
deleted file mode 100644
index fdfb767c..00000000
--- a/messages/zh-CN.json.backup
+++ /dev/null
@@ -1,2500 +0,0 @@
-{
-  "common": {
-    "ui": {
-      "cancel": "取消",
-      "back": "返回",
-      "loading": "加载中...",
-      "retry": "重试",
-      "remove": "移除",
-      "error": "错误",
-      "download": "下载",
-      "copy": "复制",
-      "copied": "已复制！",
-      "open": "打开",
-      "dismiss": "关闭",
-      "customSelect": {
-        "placeholder": "请选择..."
-      },
-      "exportButton": {
-        "tooltip": "导出文件",
-        "ariaLabel": "导出文件"
-      },
-      "logoutDialog": {
-        "title": "退出登录",
-        "message": "确定要退出登录吗？退出后需要重新登录才能访问您的账户。",
-        "confirm": "确认退出",
-        "cancel": "取消",
-        "loggingOut": "退出中..."
-      },
-      "moreButton": {
-        "ariaLabel": "更多选项"
-      }
-    },
-    "time": {
-      "notRecorded": "未记录",
-      "invalidDate": "无效日期",
-      "formatError": "格式化错误",
-      "greeting": {
-        "morning": "早上好",
-        "afternoon": "下午好",
-        "evening": "晚上好",
-        "night": "夜深了",
-        "default": "您好"
-      }
-    }
-  },
-  "pages": {
-    "home": {
-      "title": "AgentifUI",
-      "subtitle": "探索AI的无限可能，打造智能新体验",
-      "getStarted": "立即开始",
-      "learnMore": "了解更多",
-      "features": [
-        {
-          "title": "大模型集成",
-          "description": "支持多种模型供应商，包括OpenAI、Anthropic、Dify等，满足不同企业需求"
-        },
-        {
-          "title": "RAG知识增强",
-          "description": "集成检索增强生成(RAG)技术，实现私有知识库和上下文感知"
-        },
-        {
-          "title": "企业级部署",
-          "description": "支持私有化部署，保障数据安全，基于Dify后端提供稳定可靠的服务"
-        }
-      ],
-      "copyright": {
-        "prefix": "© {year} ",
-        "linkText": "AgentifUI",
-        "suffix": ". 探索AI的无限可能。"
-      }
-    },
-    "chat": {
-      "newChat": "新对话",
-      "sendMessage": "发送",
-      "inputPlaceholder": "输入您的消息...",
-      "noMessages": "还没有消息",
-      "typing": "正在输入...",
-      "recentChats": "近期对话",
-      "historyChats": "历史对话",
-      "input": {
-        "placeholder": "输入消息...",
-        "sendMessage": "发送消息",
-        "stopGeneration": "停止生成",
-        "attachFile": "附加文件",
-        "selectModel": "选择模型",
-        "noModelAvailable": "没有可用的模型",
-        "pleaseSelectModel": "请选择一个模型",
-        "sending": "发送中...",
-        "uploading": "上传中...",
-        "uploadFailed": "上传失败",
-        "retryUpload": "重试上传",
-        "removeFile": "移除文件",
-        "fileUploadError": "文件上传错误",
-        "messageSendFailed": "消息发送失败",
-        "unknownError": "未知错误",
-        "validatingConfig": "正在验证应用配置...",
-        "cannotSubmit": "无法提交",
-        "addAttachment": "添加附件",
-        "retryUploadTooltip": "重新上传",
-        "removeAttachment": "移除附件",
-        "scrollToBottom": "滚动到底部"
-      },
-      "fileUpload": {
-        "selectFileType": "选择文件类型",
-        "image": "图片",
-        "document": "文档",
-        "audio": "音频",
-        "video": "视频",
-        "custom": "自定义",
-        "uploadProgress": "上传进度",
-        "uploadComplete": "上传完成",
-        "uploadError": "上传失败",
-        "fileTooLarge": "文件过大",
-        "unsupportedFormat": "不支持的文件格式"
-      },
-      "fileTypeSelector": {
-        "ariaLabel": "添加附件",
-        "notSupported": "该应用不支持上传文件",
-        "noLimit": "文件上传数量限制为0",
-        "noTypesConfigured": "未配置支持的文件类型",
-        "maxFilesReached": "已达到最大文件数量限制 ({maxFiles})",
-        "addAttachment": "添加附件 ({currentFiles}/{maxFiles})",
-        "loading": "加载中...",
-        "loadError": "加载文件类型失败",
-        "reachedLimit": "已达上限 ({currentFiles}/{maxFiles})",
-        "maxUpload": "最多上传 {maxFiles} 个文件",
-        "noUploadLimit": "无上传限制"
-      },
-      "modelSelector": {
-        "noModelsAvailable": "暂无可用模型",
-        "selectModel": "选择模型",
-        "appNotFound": "未找到应用: {appId}"
-      },
-      "messages": {
-        "assistant": "助手",
-        "user": "您",
-        "thinking": "思考中...",
-        "stopped": "已停止",
-        "completed": "完成",
-        "copyMessage": "复制消息",
-        "editMessage": "编辑消息",
-        "deleteMessage": "删除消息",
-        "regenerate": "重新生成",
-        "feedback": "反馈",
-        "like": "赞",
-        "dislike": "踩",
-        "copied": "已复制",
-        "copyFailed": "复制失败",
-        "imageLink": "图片链接",
-        "viewImage": "查看图片",
-        "clickToView": "点击查看",
-        "clickToViewWithAlt": "点击查看: {alt}"
-      },
-      "suggestedQuestions": {
-        "moreQuestions": "还有 {count} 个问题..."
-      }
-    },
-    "chatflow": {
-      "loading": {
-        "inputConfig": "正在加载输入配置..."
-      },
-      "form": {
-        "question": {
-          "label": "您的问题或需求",
-          "placeholder": "请详细描述您的问题或需求...",
-          "required": "请输入您的问题或需求",
-          "tooLong": "问题描述长度不能超过{maxLength}个字符"
-        },
-        "additionalInfo": "补充信息",
-        "reset": "重置表单",
-        "processing": "处理中...",
-        "startConversation": "开始对话",
-        "checkAndCorrectErrors": "请检查并修正表单中标记的错误信息",
-        "defaultAppName": "AI 对话",
-        "defaultDescription": "请输入您的问题，开始智能对话"
-      },
-      "floatingController": {
-        "showTracker": "显示节点跟踪器",
-        "hideTracker": "隐藏节点跟踪器"
-      },
-      "nodeTracker": {
-        "title": "节点执行进度",
-        "starting": "正在启动 Chatflow",
-        "noRecords": "暂无节点执行记录",
-        "waitingUpdate": "等待节点状态更新...",
-        "showProgress": "开始对话后将显示节点执行进度",
-        "executionError": "执行错误："
-      },
-      "executionBar": {
-        "status": {
-          "iterating": "正在迭代",
-          "iterationCompleted": "迭代完成",
-          "iterationFailed": "迭代失败",
-          "waitingIteration": "等待迭代",
-          "looping": "正在循环",
-          "loopCompleted": "循环完成",
-          "loopFailed": "循环失败",
-          "waitingLoop": "等待循环",
-          "executing": "正在执行",
-          "completed": "处理完成",
-          "failed": "处理失败",
-          "waiting": "等待处理",
-          "unknown": "未知状态",
-          "executing_": "执行中..."
-        },
-        "nodeTypes": {
-          "start": "开始节点",
-          "llm": "LLM 推理",
-          "knowledgeRetrieval": "知识检索",
-          "questionClassifier": "问题分类器",
-          "ifElse": "条件分支",
-          "code": "代码执行",
-          "templateTransform": "模板转换",
-          "variableAssigner": "变量赋值",
-          "variableAggregator": "变量聚合器",
-          "documentExtractor": "文档提取器",
-          "parameterExtractor": "参数提取器",
-          "httpRequest": "HTTP 请求",
-          "listOperator": "列表操作",
-          "iteration": "循环迭代",
-          "end": "结束节点",
-          "node": "节点"
-        },
-        "progressType": {
-          "iteration": "迭代进度",
-          "branch": "分支进度"
-        },
-        "branch": {
-          "label": "分支"
-        }
-      }
-    },
-    "workflow": {
-      "form": {
-        "inputPlaceholder": "请输入{label}",
-        "selectPlaceholder": "请选择{label}",
-        "rangeHint": "范围：{min} - {max}",
-        "minValueHint": "最小值：{min}",
-        "maxValueHint": "最大值：{max}",
-        "stepHint": "步长：{step}",
-        "precisionHint": "小数位数：{precision}",
-        "defaultLabel": "输入文本",
-        "loading": "正在加载表单配置...",
-        "noFormConfig": "该应用未配置输入表单",
-        "reset": "重置表单",
-        "executing": "执行中...",
-        "startExecution": "开始执行",
-        "errors": {
-          "instanceNotFound": "未找到 instanceId 为 {instanceId} 的服务实例"
-        },
-        "validation": {
-          "required": "{label}为必填项",
-          "invalidNumber": "{label}必须是有效的数字",
-          "minValue": "{label}不能小于{min}",
-          "maxValue": "{label}不能大于{max}",
-          "stepValue": "{label}必须是{step}的倍数",
-          "precisionExceeded": "{label}小数位数不能超过{precision}位",
-          "maxLengthExceeded": "{label}长度不能超过{maxLength}个字符",
-          "invalidSelection": "{label}选择的值无效",
-          "tooManyFiles": "{label}文件数量不能超过{maxFiles}个",
-          "fileTooLarge": "{label}中的文件\"{fileName}\"大小超过{maxSize}MB",
-          "unsupportedFileType": "{label}中的文件\"{fileName}\"类型不支持，支持的类型：{allowedTypes}"
-        }
-      },
-      "status": {
-        "running": "工作流执行中",
-        "completed": "执行完成",
-        "failed": "执行失败",
-        "stopped": "执行已停止",
-        "pending": "等待执行",
-        "unknown": "未知",
-        "totalTime": "总耗时: {time}s"
-      },
-      "nodeStatus": {
-        "iterating": "正在迭代...",
-        "iterationCompleted": "迭代完成",
-        "iterationFailed": "迭代失败",
-        "waitingIteration": "等待迭代",
-        "looping": "正在循环",
-        "loopCompleted": "循环完成",
-        "loopFailed": "循环失败",
-        "waitingLoop": "等待循环",
-        "parallelRunning": "并行执行中...",
-        "parallelCompleted": "并行完成",
-        "parallelFailed": "并行失败",
-        "waitingParallel": "等待并行执行",
-        "executing": "正在执行...",
-        "nodeCompleted": "执行完成",
-        "nodeFailed": "执行失败",
-        "nodePending": "等待执行",
-        "nodeUnknown": "未知状态"
-      },
-      "nodeTypes": {
-        "start": "开始节点",
-        "llm": "LLM 推理",
-        "knowledgeRetrieval": "知识检索",
-        "questionClassifier": "问题分类器",
-        "ifElse": "条件分支",
-        "code": "代码执行",
-        "templateTransform": "模板转换",
-        "variableAssigner": "变量赋值",
-        "variableAggregator": "变量聚合器",
-        "documentExtractor": "文档提取器",
-        "parameterExtractor": "参数提取器",
-        "httpRequest": "HTTP 请求",
-        "listOperator": "列表操作",
-        "iteration": "循环迭代",
-        "parallel": "并行分支",
-        "end": "结束节点"
-      },
-      "iterationDetails": {
-        "roundIteration": "第 {round} 轮迭代",
-        "roundLoop": "第 {round} 轮循环",
-        "nodeNumber": "节点 {number}"
-      },
-      "buttons": {
-        "retry": "重试",
-        "close": "关闭",
-        "copy": "复制结果",
-        "copied": "已复制",
-        "download": "下载结果",
-        "retryUpload": "重新上传",
-        "removeFile": "移除文件",
-        "viewResult": "查看结果",
-        "stop": "停止",
-        "reset": "重置"
-      },
-      "history": {
-        "showHistory": "查看历史记录",
-        "hideHistory": "关闭历史记录",
-        "noDetailData": "该执行记录暂无详细结果数据，但可以查看基本信息",
-        "title": "执行历史",
-        "selected": "已选 {count} 项",
-        "batchDelete": "批量删除",
-        "deleteSelected": "删除选中的 {count} 项",
-        "cancelSelection": "取消选择",
-        "loading": "正在加载历史记录...",
-        "noRecords": "暂无执行记录",
-        "getDetailFailed": "获取执行详情失败",
-        "unknownError": "未知错误",
-        "userNotLoggedIn": "用户未登录"
-      },
-      "fileUpload": {
-        "uploading": "正在上传文件...",
-        "dropOrClick": "拖拽文件到此处或点击上传",
-        "uploadFailed": "上传失败",
-        "supportAllTypes": "支持上传各种文件类型",
-        "supportTypes": "支持上传：{types}",
-        "fileTypes": {
-          "image": "图片",
-          "document": "文档",
-          "audio": "音频",
-          "video": "视频",
-          "custom": "其他文件"
-        },
-        "uploaded": "已上传",
-        "maxFiles": "最多上传 {maxFiles} 个文件 (剩余 {remaining} 个)",
-        "maxFileSize": "单个文件最大 {size}MB",
-        "maxFilesReached": "已达到最大文件数量限制 ({current}/{max})",
-        "selectedFiles": "已选文件"
-      },
-      "tabs": {
-        "inputForm": "输入表单",
-        "executionStatus": "执行状态",
-        "history": "历史记录"
-      },
-      "resultViewer": {
-        "title": "工作流执行结果",
-        "noData": "无结果数据",
-        "copy": "复制结果",
-        "copied": "已复制",
-        "download": "下载结果"
-      }
-    },
-    "textGeneration": {
-      "status": {
-        "generating": "正在生成...",
-        "completed": "生成完成",
-        "failed": "生成失败",
-        "stopped": "已停止",
-        "waiting": "等待生成",
-        "result": "生成结果"
-      },
-      "progress": "进度: {percent}%",
-      "buttons": {
-        "copy": "复制文本",
-        "copied": "已复制",
-        "download": "下载文本",
-        "stop": "停止",
-        "retry": "重试",
-        "reset": "重置",
-        "close": "关闭"
-      },
-      "emptyState": {
-        "title": "等待生成",
-        "description": "填写左侧表单并点击执行按钮开始文本生成"
-      },
-      "placeholder": {
-        "generating": "正在生成文本...",
-        "result": "生成的文本将显示在这里"
-      },
-      "loadingState": {
-        "title": "文本生成中",
-        "description": "请稍候，正在为您生成内容..."
-      },
-      "streamingIndicator": "实时生成中",
-      "stats": {
-        "characters": "字符数: {count}",
-        "words": "词数: {count}",
-        "tokensUsed": "Token 使用: {count}"
-      }
-    },
-    "apps": {
-      "startChatWith": "与 {appName} 开始对话...",
-      "continueChatWith": "与 {appName} 继续对话...",
-      "defaultApp": "应用",
-      "loadFailed": "应用加载失败",
-      "backToMarket": "返回应用市场",
-      "loading": {
-        "app": "正在加载应用...",
-        "validating": "正在验证应用配置...",
-        "default": "加载中..."
-      },
-      "errors": {
-        "appNotFound": "应用不存在",
-        "initializationFailed": "初始化失败",
-        "appLoadFailed": "应用加载失败"
-      },
-      "status": {
-        "loadingApp": "正在加载应用...",
-        "validatingConfig": "正在验证应用配置...",
-        "loading": "加载中..."
-      },
-      "buttons": {
-        "backToMarket": "返回应用市场"
-      },
-      "market": {
-        "categories": {
-          "all": "全部",
-          "favorite": "常用",
-          "writing": "写作",
-          "translation": "翻译",
-          "programming": "编程",
-          "codeGeneration": "代码生成",
-          "analysis": "分析",
-          "summary": "总结",
-          "conversation": "对话",
-          "assistant": "助手",
-          "textGeneration": "文本生成",
-          "document": "文档",
-          "dataAnalysis": "数据分析",
-          "development": "开发",
-          "generation": "生成",
-          "conversationModel": "对话模型",
-          "reasoningModel": "推理模型",
-          "documentModel": "文档模型",
-          "multimodal": "多模态",
-          "highPrecision": "高精度",
-          "fastResponse": "快速",
-          "localDeployment": "本地",
-          "enterprise": "企业",
-          "private": "私有",
-          "tools": "工具",
-          "general": "通用",
-          "professional": "专业"
-        },
-        "search": {
-          "placeholder": "搜索应用..."
-        },
-        "tryAdjustSearch": "尝试调整搜索条件或浏览其他分类",
-        "viewMode": {
-          "grid": "网格",
-          "list": "列表"
-        },
-        "appCard": {
-          "noDescription": "暂无描述",
-          "defaultType": "应用"
-        },
-        "header": {
-          "title": "应用市场",
-          "totalApps": "共 {count} 个应用",
-          "categoryApps": "{category} · {count} 个应用",
-          "totalLabel": "共 {count} 个"
-        },
-        "categoryKeys": {
-          "all": "全部",
-          "commonApps": "常用应用"
-        },
-        "unknownAppType": "未知的Dify应用类型",
-        "useDefaultRoute": "使用默认路由",
-        "routeJump": "路由跳转",
-        "app": "应用",
-        "type": "类型",
-        "path": "路径",
-        "openAppFailed": "打开应用失败"
-      }
-    },
-    "auth": {
-      "login": {
-        "title": "登录",
-        "subtitle": "欢迎使用智能助手",
-        "emailLabel": "邮箱",
-        "passwordLabel": "密码",
-        "emailPlaceholder": "your@email.com",
-        "passwordPlaceholder": "••••••••",
-        "loginButton": "登录",
-        "forgotPasswordLink": "忘记密码？",
-        "phoneLoginLink": "📱 使用手机号验证码登录",
-        "noAccountText": "还没有账号？",
-        "registerLink": "立即注册",
-        "showPassword": "显示密码",
-        "hidePassword": "隐藏密码",
-        "orSeparator": "使用邮箱密码登录",
-        "orSeparatorSso": "或使用邮箱密码",
-        "alerts": {
-          "registered": "注册成功！请查看您的邮箱以验证账户，然后登录。",
-          "resetSuccess": "密码重置成功！请使用新密码登录。"
-        },
-        "errors": {
-          "oauthFailed": "OAuth登录失败，请重试或使用其他登录方式",
-          "ssoCallbackFailed": "SSO认证回调处理失败，请重新尝试登录",
-          "ticketValidationFailed": "SSO票据验证失败，请重新登录",
-          "invalidEmployeeNumber": "学工号格式不正确，请联系管理员",
-          "userCreationFailed": "账户创建失败，这可能是由于账户数据不一致导致的。请尝试重新登录，如果问题持续存在，请联系管理员",
-          "accountDataInconsistent": "账户数据不一致，系统正在尝试自动修复。请稍等片刻后重新登录",
-          "profileCreationFailed": "用户档案创建失败，请联系管理员协助解决",
-          "ssoProviderNotFound": "SSO服务配置错误，请联系管理员",
-          "missingTicket": "认证参数缺失，请重新登录",
-          "default": "登录过程中出现错误，请稍后重试",
-          "loginFailed": "登录失败，请检查您的邮箱和密码"
-        }
-      },
-      "register": {
-        "title": "注册",
-        "subtitle": "加入 AgentifUI，开启 AI 智能之旅",
-        "nameLabel": "姓名",
-        "usernameLabel": "昵称",
-        "usernameOptional": "(可选)",
-        "emailLabel": "邮箱",
-        "passwordLabel": "密码",
-        "confirmPasswordLabel": "确认密码",
-        "namePlaceholder": "输入您的姓名",
-        "usernamePlaceholder": "选择一个用户名",
-        "emailPlaceholder": "your@email.com",
-        "passwordPlaceholder": "••••••••",
-        "createAccountButton": "创建账户",
-        "phoneLoginLink": "📱 使用手机号验证码登录",
-        "hasAccountText": "已有账户？",
-        "loginLink": "立即登录",
-        "showPassword": "显示密码",
-        "hidePassword": "隐藏密码",
-        "showConfirmPassword": "显示确认密码",
-        "hideConfirmPassword": "隐藏确认密码",
-        "orSeparator": "或使用邮箱密码",
-        "errors": {
-          "nameRequired": "请输入姓名",
-          "emailRequired": "请输入邮箱地址",
-          "passwordTooShort": "密码长度至少6位",
-          "passwordMismatch": "两次输入的密码不一致",
-          "usernameInvalid": "昵称只能包含字母、数字、下划线和连字符，长度2-20位",
-          "emailExists": "该邮箱已被注册，请使用其他邮箱或直接登录",
-          "passwordWeak": "密码强度不够，请使用更复杂的密码",
-          "emailInvalid": "邮箱格式不正确，请检查后重试",
-          "registerFailed": "注册失败，请稍后再试"
-        }
-      },
-      "phoneLoginPage": {
-        "title": "AgentifUI",
-        "subtitle": "智能对话，触手可及",
-        "orSeparator": "或者",
-        "emailLoginLink": "使用邮箱密码登录",
-        "registerLink": "还没有账号？立即注册",
-        "termsText": "登录即表示您同意我们的",
-        "termsLink": "服务条款",
-        "privacyLink": "隐私政策",
-        "andText": "和"
-      },
-      "ssoProcessing": {
-        "title": "SSO 登录",
-        "loading": "加载中..."
-      },
-      "forgotPassword": {
-        "title": "忘记密码",
-        "subtitle": "输入您的邮箱地址，我们将发送重置密码链接",
-        "emailLabel": "邮箱地址",
-        "emailPlaceholder": "your@email.com",
-        "sendButton": "发送重置链接",
-        "sendingButton": "发送中...",
-        "backToLogin": "返回登录",
-        "success": {
-          "title": "邮件已发送",
-          "message": "我们已向 {email} 发送了重置密码链接",
-          "instructions": "请检查您的邮箱（包括垃圾邮件文件夹）并点击链接重置密码。",
-          "noEmail": "如果您没有收到邮件，请检查邮箱地址是否正确或稍后重试。"
-        },
-        "errors": {
-          "emailRequired": "请输入有效的邮箱地址",
-          "rateLimited": "发送过于频繁，请稍后再试",
-          "sendFailed": "发送失败，请稍后再试"
-        }
-      },
-      "resetPassword": {
-        "title": "重置密码",
-        "subtitle": "请输入您的新密码",
-        "verifying": "验证中",
-        "verifyingSubtitle": "正在验证重置链接...",
-        "invalidTitle": "链接无效",
-        "invalidSubtitle": "重置密码链接已过期或无效",
-        "successTitle": "密码重置成功",
-        "successSubtitle": "您的密码已成功重置",
-        "passwordLabel": "新密码",
-        "confirmPasswordLabel": "确认密码",
-        "passwordPlaceholder": "输入新密码",
-        "confirmPasswordPlaceholder": "再次输入新密码",
-        "resetButton": "重置密码",
-        "resettingButton": "重置中...",
-        "showPassword": "显示新密码",
-        "hidePassword": "隐藏新密码",
-        "showConfirmPassword": "显示确认密码",
-        "hideConfirmPassword": "隐藏确认密码",
-        "passwordHint": "密码需包含大小写字母、数字，至少8位",
-        "backToLogin": "前往登录",
-        "retryReset": "重新申请重置密码",
-        "successMessage": "您现在可以使用新密码登录您的账户。",
-        "errors": {
-          "passwordRequired": "请输入新密码",
-          "passwordTooShort": "密码长度至少6位",
-          "passwordMismatch": "两次输入的密码不一致",
-          "passwordWeak": "密码强度不够，请使用更复杂的密码",
-          "sessionExpired": "会话已过期，请重新申请重置密码",
-          "resetFailed": "密码重置失败，请稍后再试",
-          "linkInvalid": "重置链接验证失败",
-          "linkExpired": "重置链接无效或已过期，请重新申请重置密码",
-          "verifyFailed": "验证失败，请重新申请重置密码"
-        }
-      },
-      "phoneLogin": {
-        "title": "手机号登录",
-        "subtitle": "使用手机号接收验证码登录",
-        "otpSubtitle": "请输入收到的6位验证码",
-        "phoneLabel": "手机号",
-        "otpLabel": "验证码",
-        "phonePlaceholder": "13812345678",
-        "otpPlaceholder": "请输入6位验证码",
-        "sendOtpButton": "发送验证码",
-        "sendingButton": "发送中...",
-        "verifyButton": "确认验证码",
-        "verifyingButton": "验证中...",
-        "resendButton": "重新发送验证码",
-        "changePhoneButton": "修改手机号",
-        "otpSentTo": "验证码已发送至 +86{phone}",
-        "errors": {
-          "phoneRequired": "请输入手机号",
-          "phoneInvalid": "请输入正确的中国大陆手机号",
-          "otpRequired": "请输入验证码",
-          "otpInvalid": "验证码应为6位数字",
-          "sendFailed": "发送验证码失败，请稍后重试",
-          "verifyFailed": "验证码错误，请重新输入"
-        },
-        "success": {
-          "otpSent": "验证码已发送，请查收短信",
-          "verifySuccess": "验证成功！正在登录..."
-        }
-      },
-      "sso": {
-        "title": "统一身份认证",
-        "subtitle": "使用您的统一认证账号登录",
-        "button": "使用统一认证登录",
-        "simpleButton": "🏛️ 统一身份认证",
-        "jumpingButton": "正在跳转...",
-        "helpText": "首次登录将自动创建账户",
-        "contactText": "如有问题请联系系统管理员",
-        "startError": "启动SSO登录失败，请稍后重试",
-        "noProvider": "暂无可用的SSO登录方式",
-        "processing": {
-          "title": "SSO 登录",
-          "processing": "正在处理SSO登录...",
-          "welcome": "欢迎 {name}，正在建立会话...",
-          "verifying": "正在验证身份...",
-          "sessionCheck": "正在验证会话...",
-          "success": "登录成功！正在跳转...",
-          "failed": "登录失败",
-          "redirecting": "3秒后将自动跳转到登录页面...",
-          "errors": {
-            "missingParams": "SSO参数缺失或无效",
-            "userDataNotFound": "SSO用户数据未找到",
-            "sessionExpired": "SSO会话已过期，请重新登录",
-            "loginFailed": "SSO登录失败",
-            "sessionValidationFailed": "会话验证失败",
-            "noValidSessionData": "服务器未返回有效会话数据",
-            "processingFailed": "SSO处理失败"
-          }
-        }
-      },
-      "social": {
-        "github": {
-          "login": "使用 GitHub 登录",
-          "register": "使用 GitHub 注册",
-          "failed": "GitHub 登录失败"
-        }
-      }
-    },
-    "settings": {
-      "title": "设置",
-      "profile": "个人资料",
-      "account": "账户",
-      "appearance": "外观",
-      "language": "语言",
-      "navigation": {
-        "overview": "概览",
-        "profileNav": "个人资料",
-        "accountNav": "账户",
-        "appearanceNav": "外观",
-        "languageNav": "语言"
-      },
-      "descriptions": {
-        "overview": "管理您的个人偏好，自定义应用体验",
-        "profileDesc": "更新个人信息、头像和账户设置",
-        "accountDesc": "管理您的账户安全和登录信息",
-        "appearanceDesc": "自定义主题、颜色、界面布局和时区设置",
-        "languageDesc": "选择您偏好的显示语言和地区设置"
-      },
-      "accountSettings": {
-        "title": "账户设置",
-        "accountInfo": "账户信息",
-        "loginEmail": "登录邮箱",
-        "authMethod": "认证方式",
-        "emailPasswordAuth": "邮箱密码",
-        "securitySettings": "安全设置",
-        "logoutAccount": "退出当前账户",
-        "confirmLogout": "确定要退出登录吗？",
-        "confirmLogoutBtn": "确认退出",
-        "logout": "退出登录",
-        "loggingOut": "退出中...",
-        "loadAccountError": "加载账户信息时出错",
-        "retry": "重试",
-        "deleteAccount": "删除账户"
-      },
-      "profileSettings": {
-        "title": "个人资料",
-        "accountInfo": "账户信息",
-        "registrationTime": "注册时间",
-        "accountRole": "账户角色",
-        "lastLogin": "上次登录",
-        "editProfile": "编辑个人资料",
-        "name": "姓名",
-        "nickname": "昵称",
-        "profileUpdated": "个人资料已更新",
-        "updateFailed": "更新资料失败",
-        "saving": "保存中...",
-        "saveChanges": "保存修改",
-        "namePlaceholder": "请输入您的姓名",
-        "usernamePlaceholder": "请输入您的用户名",
-        "roles": {
-          "admin": "管理员",
-          "manager": "经理",
-          "user": "普通用户"
-        },
-        "status": {
-          "notRecorded": "未记录",
-          "notSet": "未设置"
-        },
-        "loadProfileError": "加载资料时出错",
-        "avatar": {
-          "defaultUser": "用户",
-          "userAvatar": "{userName}的头像",
-          "editHover": "编辑",
-          "uploadSuccess": "头像上传成功",
-          "deleteSuccess": "头像删除成功"
-        }
-      },
-      "avatarModal": {
-        "title": "头像设置",
-        "subtitle": "点击上传或拖拽图片到下方区域",
-        "currentAvatar": "当前头像",
-        "supportedFormats": "支持 JPEG、JPG、PNG、WebP 格式 • 最大 5MB",
-        "crop": {
-          "zoom": "缩放",
-          "cancel": "重新选择",
-          "confirm": "确认裁切",
-          "uploading": "上传中..."
-        },
-        "uploadArea": {
-          "uploading": "正在上传...",
-          "changeAvatar": "点击更换头像",
-          "uploadAvatar": "点击上传头像",
-          "uploadProgress": "上传进度：{progress}%",
-          "dragHint": "或将图片拖拽到此处"
-        },
-        "buttons": {
-          "deleteAvatar": "删除头像",
-          "complete": "完成",
-          "uploading": "上传中...",
-          "cancel": "取消",
-          "confirmDelete": "确认删除",
-          "deleting": "删除中..."
-        },
-        "deleteConfirm": {
-          "title": "删除头像",
-          "message": "确定要删除当前头像吗？此操作无法撤销。"
-        },
-        "status": {
-          "success": "操作成功完成"
-        },
-        "errors": {
-          "unsupportedType": "不支持的文件类型。请选择 JPEG、JPG、PNG 或 WebP 格式的图片。",
-          "fileTooLarge": "文件过大。请选择小于 5MB 的图片。",
-          "userNotLoggedIn": "用户未登录",
-          "uploadFailed": "上传失败",
-          "deleteFailed": "删除失败"
-        }
-      },
-      "avatarUpload": {
-        "errors": {
-          "unsupportedFileType": "不支持的文件类型。支持的格式：{types}",
-          "fileTooLarge": "文件过大。最大支持 {maxSize}MB",
-          "uploadFailed": "上传失败: {message}",
-          "getUrlFailed": "获取头像URL失败",
-          "updateDatabaseFailed": "更新数据库失败: {message}",
-          "deleteFailed": "删除失败: {message}",
-          "uploadFailedGeneric": "上传失败",
-          "deleteFailedGeneric": "删除失败"
-        }
-      },
-      "appearanceSettings": {
-        "title": "外观设置",
-        "theme": "主题",
-        "themeDescription": "选择您偏好的显示模式",
-        "themes": {
-          "light": "浅色模式",
-          "dark": "深色模式",
-          "system": "跟随系统"
-        },
-        "preview": {
-          "light": "亮色",
-          "dark": "暗色",
-          "system": "系统"
-        },
-        "timezone": "时区设置",
-        "timezoneDescription": "选择您所在的时区，影响时间显示格式",
-        "currentTimezone": "当前时区",
-        "timezoneRegions": {
-          "asia": "亚洲",
-          "europe": "欧洲",
-          "america": "美洲",
-          "africa": "非洲",
-          "australia": "大洋洲",
-          "utc": "协调世界时"
-        },
-        "timezoneCities": {
-          "shanghai": "上海",
-          "beijing": "北京",
-          "hongKong": "香港",
-          "taipei": "台北",
-          "tokyo": "东京",
-          "seoul": "首尔",
-          "singapore": "新加坡",
-          "bangkok": "曼谷",
-          "dubai": "迪拜",
-          "kolkata": "加尔各答",
-          "london": "伦敦",
-          "paris": "巴黎",
-          "berlin": "柏林",
-          "rome": "罗马",
-          "madrid": "马德里",
-          "amsterdam": "阿姆斯特丹",
-          "moscow": "莫斯科",
-          "newYork": "纽约",
-          "losAngeles": "洛杉矶",
-          "chicago": "芝加哥",
-          "denver": "丹佛",
-          "toronto": "多伦多",
-          "saoPaulo": "圣保罗",
-          "mexicoCity": "墨西哥城",
-          "sydney": "悉尼",
-          "melbourne": "墨尔本",
-          "perth": "珀斯",
-          "auckland": "奥克兰",
-          "cairo": "开罗",
-          "johannesburg": "约翰内斯堡",
-          "lagos": "拉各斯",
-          "utc": "UTC"
-        },
-        "timezoneSearch": "搜索时区...",
-        "systemTimezone": "系统时区",
-        "customTimezone": "自定义时区",
-        "timezonePreview": "预览时间：{time}",
-        "timezoneUpdated": "时区设置已更新"
-      },
-      "languageSettings": {
-        "title": "语言设置",
-        "language": "语言",
-        "languageDescription": "选择您偏好的显示语言",
-        "currentLanguage": "当前语言",
-        "switchLanguage": "切换语言"
-      }
-    },
-    "admin": {
-      "title": "管理后台",
-      "main": {
-        "title": "管理后台概览",
-        "subtitle": "欢迎使用 AgentifUI 管理后台，在这里您可以管理系统的各项配置和设置"
-      },
-      "layout": {
-        "headerTitle": "AgentifUI 管理后台",
-        "breadcrumbRoot": "管理后台",
-        "menuItems": {
-          "main": {
-            "text": "管理主页",
-            "description": "管理后台概览"
-          },
-          "apiConfig": {
-            "text": "API 配置",
-            "description": "管理应用实例和配置参数"
-          },
-          "content": {
-            "text": "页面内容管理",
-            "description": "管理主页和关于页面的内容"
-          },
-          "users": {
-            "text": "用户管理",
-            "description": "管理用户账户和权限"
-          },
-          "ssoProviders": {
-            "text": "SSO提供商管理",
-            "description": "管理SSO提供商配置"
-          },
-          "groups": {
-            "text": "群组管理",
-            "description": "管理用户和群组，配置群组应用权限"
-          },
-          "permissions": {
-            "text": "应用权限管理",
-            "description": "管理应用可见性和群组权限"
-          }
-        },
-        "actions": {
-          "rebuildButton": {
-            "text": "重新编译",
-            "messages": {
-              "startRebuild": "开始重新编译和部署...",
-              "startRebuildDescription": "这个过程可能需要几分钟，请保持耐心。",
-              "buildInProgress": "构建正在进行中",
-              "buildInProgressDescription": "请等待当前构建完成后再试。",
-              "authFailed": "认证失败",
-              "authFailedDescription": "请重新登录后再试。",
-              "permissionDenied": "权限不足",
-              "permissionDeniedDescription": "您没有权限执行此操作。",
-              "unknownError": "发生未知错误",
-              "buildComplete": "构建完成！",
-              "buildCompleteDescription": "应用将在2秒后自动重启以应用更改。",
-              "appRestarting": "应用重启中...",
-              "appRestartingDescription": "页面将在重启完成后自动刷新。",
-              "deployFailed": "部署失败",
-              "networkError": "网络错误，请检查连接后重试。"
-            }
-          },
-          "returnToChatButton": {
-            "text": "返回对话"
-          }
-        },
-        "common": {
-          "actions": {
-            "refresh": "刷新数据",
-            "save": "保存更改",
-            "saving": "保存中...",
-            "reset": "重置",
-            "create": "创建",
-            "cancel": "取消",
-            "confirm": "确定"
-          },
-          "status": {
-            "hasUnsavedChanges": "有未保存的更改",
-            "saving": "正在保存...",
-            "allChangesSaved": "所有更改已保存"
-          }
-        }
-      },
-      "apiConfig": {
-        "emptyState": {
-          "title": "选择应用实例",
-          "description": "从左侧列表中选择一个应用实例来查看和编辑其配置，或点击添加按钮创建新的应用实例"
-        },
-        "formActions": {
-          "save": "保存",
-          "saving": "保存中...",
-          "cancel": "取消"
-        },
-        "providerManagement": {
-          "buttonText": "管理提供商",
-          "modal": {
-            "title": "管理服务提供商",
-            "providerList": "提供商列表",
-            "addProvider": "添加提供商",
-            "editProvider": "编辑提供商",
-            "addNewProvider": "添加新提供商",
-            "loading": "加载中...",
-            "noProviders": "暂无提供商配置",
-            "deleteConfirm": "确定要删除提供商\"{name}\"吗？此操作不可撤销。",
-            "messages": {
-              "loadFailed": "加载提供商列表失败",
-              "createSuccess": "提供商创建成功",
-              "createFailed": "创建提供商失败",
-              "updateSuccess": "提供商更新成功",
-              "updateFailed": "更新提供商失败",
-              "deleteSuccess": "提供商删除成功",
-              "deleteFailed": "删除提供商失败",
-              "saveFailed": "保存提供商失败"
-            },
-            "providerTypes": {
-              "llm": "LLM (大语言模型)",
-              "platform": "Platform (聚合平台)",
-              "embedding": "Embedding (向量化)",
-              "tts": "TTS (文本转语音)",
-              "stt": "STT (语音转文本)",
-              "vision": "Vision (图像识别)",
-              "multimodal": "Multimodal (多模态)"
-            },
-            "authTypes": {
-              "api_key": "API Key",
-              "bearer_token": "Bearer Token",
-              "oauth2": "OAuth 2.0",
-              "basic_auth": "Basic Auth"
-            },
-            "status": {
-              "enabled": "已启用",
-              "disabled": "已禁用",
-              "default": "默认提供商"
-            },
-            "form": {
-              "name": {
-                "label": "提供商名称",
-                "placeholder": "例如：Dify、OpenAI、Claude",
-                "required": "提供商名称不能为空"
-              },
-              "type": {
-                "label": "提供商类型",
-                "placeholder": "选择提供商类型",
-                "required": "请选择提供商类型"
-              },
-              "baseUrl": {
-                "label": "API URL",
-                "placeholder": "例如：https://api.dify.ai/v1",
-                "required": "API URL不能为空",
-                "invalid": "请输入有效的URL格式"
-              },
-              "authType": {
-                "label": "认证类型",
-                "placeholder": "选择认证类型",
-                "required": "请选择认证类型"
-              },
-              "isActive": {
-                "label": "启用状态"
-              },
-              "isDefault": {
-                "label": "默认提供商",
-                "description": "系统中只能有一个默认提供商，设置后其他提供商的默认状态将被自动清除",
-                "setAsDefault": "设为默认",
-                "notDefault": "非默认"
-              },
-              "authMethod": "认证方式"
-            },
-            "buttons": {
-              "cancel": "取消",
-              "save": "保存",
-              "saving": "保存中...",
-              "delete": "删除"
-            }
-          }
-        },
-        "layout": {
-          "loading": "加载应用实例中...",
-          "noInstances": "暂无应用实例",
-          "noInstancesForProvider": "该提供商暂无应用实例",
-          "addFirstApp": "添加第一个应用",
-          "searchPlaceholder": "搜索应用...",
-          "defaultApp": "默认",
-          "delete": "删除",
-          "deleteConfirm": "确定要删除此应用实例吗？此操作不可撤销。",
-          "defaultAppCannotDelete": "默认应用不可删除，请先设置其他应用为默认应用",
-          "instanceNotFound": "未找到要删除的实例",
-          "deleteInstanceFailed": "删除应用实例失败",
-          "setDefaultConfirm": "确定要将\"{name}\"设置为默认应用吗？",
-          "instanceNotFoundForDefault": "未找到要设置的实例",
-          "setDefaultFailed": "设置默认应用失败",
-          "setAsDefault": "设为默认应用"
-        },
-        "fields": {
-          "apiUrl": "API URL (config.api_url)",
-          "apiKey": "API 密钥 (key_value)",
-          "providerBinding": "供应商绑定",
-          "urlPlaceholder": "URL 将自动使用所选供应商的配置",
-          "urlBindingInfo": "URL 与服务供应商绑定，修改请在\"管理提供商\"中操作",
-          "currentProvider": "当前供应商: {name}",
-          "unknownProvider": "未知供应商",
-          "keyConfigured": "已配置",
-          "keyNotConfigured": "未配置",
-          "keyPlaceholderEdit": "留空则不更新 API 密钥",
-          "keyPlaceholderNew": "输入 API 密钥",
-          "keyEditHint": "留空输入框将保持现有密钥不变",
-          "tagsLabel": "应用标签 (tags)",
-          "tagCategories": {
-            "modelType": "模型类型",
-            "useCase": "应用场景",
-            "features": "技术特性"
-          },
-          "predefinedTags": {
-            "conversationModel": "对话模型",
-            "reasoningModel": "推理模型",
-            "documentModel": "文档模型",
-            "multimodal": "多模态",
-            "textGeneration": "文本生成",
-            "codeGeneration": "代码生成",
-            "dataAnalysis": "数据分析",
-            "translation": "翻译",
-            "highAccuracy": "高精度",
-            "fastResponse": "快速响应",
-            "localDeployment": "本地部署",
-            "enterpriseGrade": "企业级"
-          },
-          "customTagPlaceholder": "自定义标签（回车添加）",
-          "tagHelpText": "标签用于应用分类和搜索"
-        },
-        "providerSelector": {
-          "placeholder": "请选择提供商",
-          "defaultLabel": "默认",
-          "noProviders": "暂无可用的服务提供商"
-        },
-        "customProviderSelector": {
-          "placeholder": "请选择提供商",
-          "defaultLabel": "默认",
-          "noProviders": "暂无可用的服务提供商"
-        },
-        "instanceFilter": {
-          "allApps": "全部应用",
-          "providerApps": "{name}应用",
-          "defaultLabel": "默认",
-          "totalCount": "共 {count} 个",
-          "noProviders": "暂无可用的服务提供商"
-        },
-        "events": {
-          "defaultSetSuccess": "默认应用设置成功"
-        },
-        "instanceSaveHandlers": {
-          "errors": {
-            "selectProvider": "请选择服务提供商",
-            "invalidProvider": "选择的服务提供商无效",
-            "inactiveProvider": "选择的服务提供商未激活",
-            "createFailed": "创建应用实例失败",
-            "updateFailed": "更新应用实例失败",
-            "setDefaultFailed": "设置默认应用失败"
-          },
-          "success": {
-            "instanceCreated": "应用实例创建成功",
-            "instanceUpdated": "应用实例更新成功",
-            "setAsDefault": "应用实例已设为默认应用"
-          },
-          "warnings": {
-            "createSuccessButDefaultFailed": "应用创建成功，但设置默认应用失败"
-          }
-        },
-        "difyParametersPanel": {
-          "title": "{instanceName} - Dify 参数配置",
-          "defaultInstanceName": "应用实例",
-          "unsavedChanges": "您有未保存的更改",
-          "sections": {
-            "basic": {
-              "title": "基础配置",
-              "openingStatement": {
-                "label": "开场白内容",
-                "placeholder": "输入开场白内容..."
-              },
-              "suggestedQuestions": {
-                "label": "开场推荐问题",
-                "addButton": "添加推荐问题",
-                "placeholder": "输入推荐问题..."
-              }
-            },
-            "fileUpload": {
-              "title": "文件上传功能",
-              "enabled": "已启用",
-              "disabled": "已禁用"
-            },
-            "speechToText": {
-              "title": "语音转文本",
-              "enabled": "已启用",
-              "disabled": "已禁用"
-            },
-            "textToSpeech": {
-              "title": "文本转语音",
-              "enabled": "已启用",
-              "disabled": "已禁用",
-              "enableLabel": "启用文本转语音",
-              "voiceType": {
-                "label": "语音类型",
-                "placeholder": "例如: alloy, echo, fable"
-              },
-              "language": {
-                "label": "语言",
-                "selectPlaceholder": "选择语言",
-                "options": {
-                  "zh": "中文",
-                  "en": "英文",
-                  "ja": "日文",
-                  "ko": "韩文"
-                }
-              },
-              "autoPlay": {
-                "label": "自动播放",
-                "enabled": "开启",
-                "disabled": "关闭"
-              }
-            },
-            "retrieverResource": {
-              "title": "引用和归属"
-            },
-            "annotationReply": {
-              "title": "标记回复"
-            },
-            "userInputForm": {
-              "title": "用户输入表单",
-              "fieldsCount": "{count} 个字段",
-              "description": "用户输入表单配置通常由 Dify 应用自动生成，建议通过同步功能获取最新配置。",
-              "fieldInfo": "变量名: {variable} | 必填: {required} | 默认值: {defaultValue}",
-              "fieldRequired": "是",
-              "fieldOptional": "否",
-              "fieldNoDefault": "无",
-              "fieldLabel": "字段 {index}",
-              "noFields": "暂无用户输入表单配置"
-            },
-            "systemParameters": {
-              "title": "系统参数",
-              "fileSizeLimit": "文档大小限制 (MB)",
-              "imageSizeLimit": "图片大小限制 (MB)",
-              "audioSizeLimit": "音频大小限制 (MB)",
-              "videoSizeLimit": "视频大小限制 (MB)"
-            }
-          },
-          "fileUploadModal": {
-            "title": "文件上传配置",
-            "uploadMethod": {
-              "label": "上传文件类型",
-              "local": "本地上传",
-              "url": "URL链接",
-              "both": "两种方式"
-            },
-            "maxFiles": {
-              "label": "最大文件数量",
-              "description": "文档 < 15MB, 图片 < 10MB, 音频 < 50MB, 视频 < 100MB"
-            },
-            "fileTypes": {
-              "label": "支持的文件类型",
-              "image": "图片",
-              "document": "文档",
-              "audio": "音频",
-              "video": "视频",
-              "other": "其他文件类型",
-              "customPlaceholder": "例如: zip, rar, 7z, tar",
-              "customDescription": "支持格式：zip, rar, 7z, tar, gz, bz2, xz 等"
-            }
-          },
-          "buttons": {
-            "cancel": "取消",
-            "save": "保存",
-            "confirm": "确定"
-          }
-        },
-        "page": {
-          "title": {
-            "edit": "编辑应用实例",
-            "add": "添加应用实例"
-          },
-          "unsavedChanges": "有未保存的更改",
-          "validation": {
-            "instanceId": {
-              "noSpaces": "不能包含空格（会影响URL路由）",
-              "invalidChars": "只能包含字母、数字、连字符(-)、下划线(_)和点(.)",
-              "tooLong": "长度不能超过50个字符",
-              "mustStartWithAlphanumeric": "必须以字母或数字开头",
-              "formatError": "应用ID格式错误",
-              "notModifiable": "应用 ID 创建后不可修改",
-              "formatDescription": "只能包含字母、数字、连字符(-)、下划线(_)和点(.)，不能包含空格。可先同步配置自动生成。"
-            },
-            "formValidationFailed": "表单验证失败",
-            "fillApiCredentials": "请先填写API URL和API Key",
-            "fillInstanceId": "请先填写应用ID"
-          },
-          "sync": {
-            "basicInfo": "基本信息",
-            "paramConfig": "参数配置",
-            "noDataReceived": "未能从 Dify API 获取到任何配置数据，请检查应用ID和API配置是否正确",
-            "successMessage": "成功从 Dify API 同步{items}！",
-            "autoGeneratedId": " 已自动生成应用ID：{instanceId}",
-            "syncFailed": "同步配置失败",
-            "syncFailedTitle": "同步失败",
-            "syncing": "同步中...",
-            "syncFromDify": "从Dify同步配置",
-            "syncFromDifyWithAutoId": "从 Dify API 同步配置（应用ID为空时将自动生成）",
-            "syncFromDifyDescription": "从 Dify API 同步配置",
-            "syncButtonDisabled": "请先填写API URL和API Key"
-          },
-          "defaultApp": {
-            "setAsDefault": "设为默认",
-            "isDefault": "默认应用",
-            "willSetAsDefault": "将设为默认",
-            "setDefaultConfirm": "确定要将\"{name}\"设置为默认应用吗？",
-            "setDefaultSuccess": "默认应用设置成功",
-            "setDefaultFailed": "设置默认应用失败",
-            "instanceNotFound": "实例ID不存在，无法设置为默认应用"
-          },
-          "provider": {
-            "title": "服务提供商",
-            "current": "当前应用的服务提供商（不可修改）",
-            "select": "选择服务提供商",
-            "unknown": "未知提供商",
-            "selectPlaceholder": "请选择提供商",
-            "configUpdated": "提供商配置已更新"
-          },
-          "fields": {
-            "instanceId": {
-              "label": "应用 ID (instance_id) *",
-              "placeholder": "输入应用 ID",
-              "generateButton": "生成ID",
-              "generateTooltip": "点击生成随机UUID作为应用ID"
-            },
-            "displayName": {
-              "label": "显示名称 (display_name) *",
-              "placeholder": "输入显示名称"
-            },
-            "description": {
-              "label": "应用描述 (description)",
-              "placeholder": "输入应用描述"
-            }
-          },
-          "appType": {
-            "label": "应用类型 (app_type) *",
-            "model": {
-              "title": "模型 (Model)",
-              "description": "用于模型切换"
-            },
-            "marketplace": {
-              "title": "应用市场 (Marketplace)",
-              "description": "用于应用市场"
-            },
-            "note": "选择\"模型\"类型的应用会出现在聊天界面的模型选择器中"
-          },
-          "syncConfirm": {
-            "updateDescription": "是否将描述更新为：\"{description}\"？"
-          },
-          "difyAppTypeSelector": {
-            "title": "Dify 应用类型 (dify_apptype) *",
-            "titleCompact": "Dify 应用类型",
-            "description": "选择适合您应用场景的 Dify 应用类型。不同类型具有不同的功能特性和适用场景。"
-          },
-          "difyConfig": {
-            "title": "Dify 参数配置",
-            "appTypeNote": "选择\"模型\"类型的应用会出现在聊天界面的模型选择器中"
-          }
-        },
-        "useApiConfigEvents": {
-          "defaultInstanceSetSuccess": "默认应用设置成功"
-        }
-      },
-      "content": {
-        "page": {
-          "title": "内容管理",
-          "subtitle": "管理主页和关于页面的多语言内容",
-          "showPreview": "显示预览",
-          "fullscreenPreview": "全屏预览",
-          "closePreview": "关闭预览",
-          "loadingEditor": {
-            "about": "无法加载关于页面编辑器。",
-            "home": "无法加载主页编辑器。"
-          },
-          "loadingPreview": "加载预览...",
-          "messages": {
-            "loadFailed": "加载翻译数据失败",
-            "saveSuccess": "配置保存成功",
-            "saveFailed": "保存配置失败，请重试"
-          },
-          "saveActions": {
-            "hasChanges": "有未保存的更改",
-            "saving": "正在保存...",
-            "allSaved": "所有更改已保存",
-            "reset": "重置",
-            "save": "保存更改",
-            "saving_": "保存中..."
-          }
-        },
-        "tabs": {
-          "about": "关于页面",
-          "home": "主页"
-        },
-        "previewToolbar": {
-          "aboutPreview": "关于页面预览",
-          "homePreview": "主页预览"
-        },
-        "editor": {
-          "common": {
-            "editLanguage": "编辑语言",
-            "selectLanguage": "选择语言",
-            "cardNumber": "卡片 #{number}"
-          },
-          "home": {
-            "pageTitle": "页面标题 (title)",
-            "subtitle": "副标题 (subtitle)",
-            "features": "特性卡片 (features)",
-            "featureTitle": "标题 (title)",
-            "featureDescription": "描述 (description)",
-            "getStarted": "主按钮 (getStarted)",
-            "learnMore": "次按钮 (learnMore)",
-            "copyright": "版权信息 (copyright)",
-            "copyrightPrefix": "前缀 (prefix)",
-            "copyrightLinkText": "链接文字 (linkText)",
-            "copyrightSuffix": "后缀 (suffix)"
-          },
-          "about": {
-            "pageTitle": "页面标题 (title)",
-            "subtitle": "副标题 (subtitle)",
-            "mission": "使命描述 (mission.description)",
-            "values": "价值观卡片 (values.items)",
-            "valueTitle": "标题 (title)",
-            "valueDescription": "描述 (description)",
-            "buttonText": "按钮文字 (buttonText)",
-            "copyright": "版权信息 (copyright)",
-            "copyrightPrefix": "前缀 (prefix)",
-            "copyrightLinkText": "链接文字 (linkText)",
-            "copyrightSuffix": "后缀 (suffix)"
-          }
-        }
-      },
-      "users": {
-        "title": "用户管理",
-        "subtitle": "管理系统用户账户、权限和访问控制",
-        "stats": {
-          "totalUsers": "总用户数",
-          "activeUsers": "活跃用户",
-          "suspendedUsers": "已暂停",
-          "pendingUsers": "待激活",
-          "adminUsers": "管理员",
-          "managerUsers": "经理",
-          "regularUsers": "普通用户",
-          "newUsersToday": "今日新增",
-          "activeUsersRatio": "占总用户比例",
-          "newUsersThisWeek": "本周其他天数"
-        },
-        "filters": {
-          "searchPlaceholder": "搜索用户邮箱、姓名或用户名...",
-          "advancedFilters": "高级筛选",
-          "reset": "重置",
-          "rolePermissions": "角色权限",
-          "accountStatus": "账户状态",
-          "authSource": "认证来源",
-          "sortBy": "排序方式",
-          "roleOptions": {
-            "all": "全部角色",
-            "admin": "管理员",
-            "manager": "经理",
-            "user": "普通用户"
-          },
-          "statusOptions": {
-            "all": "全部状态",
-            "active": "活跃",
-            "suspended": "已暂停",
-            "pending": "待激活"
-          },
-          "authSourceOptions": {
-            "all": "全部来源",
-            "email": "📧 邮箱",
-            "sso": "SSO认证",
-            "phone": "📱 手机号"
-          },
-          "sortOptions": {
-            "createdAt": "注册时间",
-            "lastSignIn": "最后登录",
-            "email": "邮箱",
-            "fullName": "姓名"
-          },
-          "sortOrder": {
-            "desc": "最新在前",
-            "asc": "最旧在前"
-          }
-        },
-        "table": {
-          "headers": {
-            "userInfo": "用户信息",
-            "contact": "联系方式",
-            "groups": "群组",
-            "rolePermissions": "角色权限",
-            "status": "状态",
-            "lastLogin": "最后登录",
-            "registerTime": "注册时间"
-          },
-          "loading": "加载用户数据中...",
-          "loadingSubtext": "请稍候，正在获取最新的用户信息",
-          "noData": "暂无用户数据",
-          "noDataSubtext": "没有找到符合条件的用户，请尝试调整筛选条件",
-          "noDataHint": "您可以重置筛选条件或联系管理员添加新用户"
-        },
-        "batchOperations": {
-          "selected": "已选择 {count} 个用户",
-          "cancelSelection": "取消选择",
-          "setAsAdmin": "设为管理员",
-          "setAsManager": "设为经理",
-          "setAsUser": "设为普通用户",
-          "activate": "激活",
-          "suspend": "暂停"
-        },
-        "actions": {
-          "refreshData": "刷新数据",
-          "addUser": "添加用户",
-          "addUserInDevelopment": "添加用户功能开发中",
-          "viewUser": "查看用户：{name}",
-          "editUser": "编辑用户：{name}",
-          "viewDetails": "查看详情",
-          "editInfo": "编辑信息",
-          "changeRole": "更改角色",
-          "changeStatus": "更改状态",
-          "deleteUser": "删除用户",
-          "current": "(当前)",
-          "self": "(自己)",
-          "admin": "(管理员)",
-          "notSet": "未设置",
-          "notSetEmail": "未设置邮箱",
-          "notSetPhone": "未设置手机",
-          "defaultUser": "用户",
-          "emailIcon": "📧",
-          "phoneIcon": "📱",
-          "moreGroups": "+{count} 个群组",
-          "notInGroup": "未加入群组",
-          "moreGroupsTooltip": "还有 {count} 个群组：{names}",
-          "confirm": "确认"
-        },
-        "pagination": {
-          "showing": "显示第 {start} - {end} 条， 共 {total} 条记录",
-          "previous": "上一页",
-          "next": "下一页"
-        },
-        "messages": {
-          "cannotIncludeSelf": "不能在批量操作中包含自己",
-          "cannotDowngradeAdmin": "不能在批量操作中降级其他管理员",
-          "cannotChangeOwnRole": "不能修改自己的角色",
-          "cannotDowngradeOtherAdmin": "不能降级其他管理员",
-          "cannotDeleteSelf": "不能删除自己",
-          "cannotDeleteOtherAdmin": "不能删除其他管理员",
-          "roleChangeSuccess": "已将 {name} 的角色更改为{role}",
-          "statusChangeSuccess": "已将 {name} 的状态更改为{status}",
-          "batchRoleChangeSuccess": "已批量更改 {count} 个用户的角色",
-          "batchStatusChangeSuccess": "已批量更改 {count} 个用户的状态",
-          "deleteConfirm": "确定要删除用户 {name} 吗？此操作不可撤销。",
-          "deleteSuccess": "已删除用户 {name}",
-          "roles": {
-            "admin": "管理员",
-            "manager": "经理",
-            "user": "普通用户"
-          },
-          "statuses": {
-            "active": "活跃",
-            "suspended": "已暂停",
-            "pending": "待激活"
-          },
-          "roleChangeConfirm": "将{name}的角色更改为{role} ？",
-          "statusChangeConfirm": "将{name}的状态更改为{status} ？",
-          "batchRoleChangeConfirm": "将{count}个用户的角色更改为{role} ？",
-          "batchStatusChangeConfirm": "将{count}个用户的状态更改为{status} ？"
-        }
-      },
-      "ssoProviders": {
-        "title": "SSO提供商管理",
-        "subtitle": "管理单点登录提供商及其配置",
-        "addProvider": "添加提供商",
-        "refresh": "刷新数据",
-        "error": "错误",
-        "filters": {
-          "searchPlaceholder": "搜索提供商名称或协议...",
-          "reset": "重置"
-        },
-        "table": {
-          "headers": {
-            "name": "名称",
-            "protocol": "协议",
-            "status": "状态",
-            "order": "顺序",
-            "created": "创建时间"
-          },
-          "enabled": "已启用",
-          "disabled": "已禁用",
-          "button": "按钮",
-          "noProviders": "未找到SSO提供商",
-          "createFirst": "创建您的第一个SSO提供商开始使用",
-          "loadingProviders": "正在加载SSO提供商...",
-          "actions": {
-            "viewDetails": "查看详情",
-            "edit": "编辑",
-            "enable": "启用",
-            "disable": "禁用",
-            "delete": "删除"
-          }
-        },
-        "form": {
-          "createTitle": "创建SSO提供商",
-          "editTitle": "编辑SSO提供商",
-          "createDescription": "配置新的单点登录提供商",
-          "editDescription": "修改现有SSO提供商的配置",
-          "tabs": {
-            "basicInfo": "基本信息",
-            "protocolConfig": "协议配置",
-            "security": "安全设置",
-            "uiSettings": "界面设置"
-          },
-          "fields": {
-            "providerName": "提供商名称",
-            "providerNamePlaceholder": "示例大学SSO",
-            "protocol": "协议",
-            "selectProtocol": "选择协议",
-            "displayOrder": "显示顺序",
-            "buttonText": "按钮文本",
-            "buttonTextPlaceholder": "留空则使用提供商名称",
-            "enableProvider": "启用此提供商",
-            "baseUrl": "基础URL",
-            "baseUrlPlaceholder": "https://sso.example.com",
-            "loginEndpoint": "登录端点",
-            "loginEndpointPlaceholder": "/login",
-            "logoutEndpoint": "注销端点",
-            "logoutEndpointPlaceholder": "/logout",
-            "validateEndpoint": "验证端点",
-            "validateEndpointPlaceholder": "/serviceValidate",
-            "validateV3Endpoint": "V3验证端点",
-            "validateV3EndpointPlaceholder": "/p3/serviceValidate",
-            "attributeMapping": "属性映射",
-            "employeeId": "员工ID",
-            "employeeIdPlaceholder": "cas:user",
-            "username": "用户名",
-            "usernamePlaceholder": "cas:username",
-            "requireHttps": "要求HTTPS",
-            "validateCertificates": "验证SSL证书",
-            "allowedRedirectHosts": "允许的重定向主机",
-            "allowedRedirectHostsPlaceholder": "example.com\nsubdomain.example.com",
-            "allowedRedirectHostsHint": "每行输入一个主机",
-            "icon": "图标",
-            "iconPlaceholder": "🏛️",
-            "theme": "主题",
-            "logoUrl": "Logo URL",
-            "logoUrlPlaceholder": "https://example.com/logo.png",
-            "description": "描述",
-            "descriptionPlaceholder": "大学SSO系统"
-          },
-          "themes": {
-            "primary": "主要",
-            "secondary": "次要",
-            "default": "默认",
-            "outline": "轮廓"
-          },
-          "advancedSettings": "高级设置",
-          "showRawJson": "显示原始JSON",
-          "hideRawJson": "隐藏原始JSON",
-          "rawJsonConfig": "原始JSON配置",
-          "actions": {
-            "cancel": "取消",
-            "save": "保存",
-            "saving": "保存中..."
-          },
-          "messages": {
-            "fixJsonErrors": "请先修复JSON错误再保存",
-            "createSuccess": "SSO提供商创建成功",
-            "updateSuccess": "SSO提供商更新成功",
-            "unexpectedError": "发生意外错误"
-          }
-        },
-        "deleteDialog": {
-          "title": "确认删除",
-          "message": "确定要删除SSO提供商\"{name}\"吗？此操作不可撤销，将禁用使用此提供商的用户的SSO登录功能。",
-          "cancel": "取消",
-          "delete": "删除",
-          "deleting": "删除中...",
-          "success": "\"{name}\"已成功删除"
-        },
-        "detailsModal": {
-          "title": "提供商详情和配置概览",
-          "basicInfo": "基本信息",
-          "protocol": "协议",
-          "status": "状态",
-          "displayOrder": "显示顺序",
-          "buttonText": "按钮文本",
-          "protocolConfig": "协议配置",
-          "baseUrl": "基础URL",
-          "login": "登录",
-          "logout": "注销",
-          "securitySettings": "安全设置",
-          "requireHttps": "要求HTTPS",
-          "validateCertificates": "验证证书",
-          "yes": "是",
-          "no": "否",
-          "uiConfig": "界面配置",
-          "theme": "主题",
-          "icon": "图标",
-          "description": "描述",
-          "timestamps": "时间戳",
-          "created": "创建于",
-          "updated": "更新于",
-          "actions": {
-            "close": "关闭",
-            "editProvider": "编辑提供商"
-          }
-        },
-        "stats": {
-          "totalProviders": "提供商总数",
-          "allSsoProviders": "所有SSO提供商已配置",
-          "enabled": "已启用",
-          "percentOfTotal": "占总数",
-          "noProviders": "暂无配置的提供商",
-          "disabled": "已禁用",
-          "activeProtocols": "活跃协议",
-          "differentProtocolTypes": "不同协议类型",
-          "protocolBreakdown": "协议分布"
-        }
-      },
-      "groups": {
-        "title": "群组管理",
-        "subtitle": "管理用户群组和应用权限分配",
-        "stats": {
-          "totalGroups": "群组总数",
-          "totalMembers": "成员总数",
-          "averageMembers": "平均成员数",
-          "activeGroups": "活跃群组"
-        },
-        "header": {
-          "title": "群组管理",
-          "subtitle": "管理用户群组和应用权限分配",
-          "refreshData": "刷新数据",
-          "createGroup": "创建群组"
-        },
-        "search": {
-          "placeholder": "搜索群组名称或描述...",
-          "searchResults": "搜索结果",
-          "keyword": "关键词",
-          "noResults": "未找到匹配的群组",
-          "noResultsHint": "尝试使用其他关键词搜索"
-        },
-        "list": {
-          "noGroups": "暂无群组",
-          "noGroupsHint": "点击\"创建群组\"按钮来创建第一个群组",
-          "loading": "加载群组列表...",
-          "memberCount": "{count} 成员",
-          "createdAt": "创建时间",
-          "actions": {
-            "manageMembers": "成员管理",
-            "editGroup": "编辑群组",
-            "deleteGroup": "删除群组"
-          }
-        },
-        "createModal": {
-          "title": "创建群组",
-          "nameLabel": "群组名称",
-          "nameRequired": "群组名称不能为空",
-          "nameTooShort": "群组名称至少需要2个字符",
-          "nameTooLong": "群组名称不能超过50个字符",
-          "namePlaceholder": "请输入群组名称",
-          "descriptionLabel": "群组描述",
-          "descriptionTooLong": "描述不能超过200个字符",
-          "descriptionPlaceholder": "请输入群组描述（可选）",
-          "creating": "创建中...",
-          "createButton": "创建群组",
-          "cancel": "取消",
-          "createSuccess": "群组\"{name}\"创建成功"
-        },
-        "editModal": {
-          "title": "编辑群组",
-          "nameLabel": "群组名称",
-          "nameRequired": "群组名称不能为空",
-          "nameTooShort": "群组名称至少需要2个字符",
-          "nameTooLong": "群组名称不能超过50个字符",
-          "namePlaceholder": "请输入群组名称",
-          "descriptionLabel": "群组描述",
-          "descriptionTooLong": "描述不能超过200个字符",
-          "descriptionPlaceholder": "请输入群组描述（可选）",
-          "updating": "更新中...",
-          "updateButton": "保存更改",
-          "cancel": "取消",
-          "noChanges": "没有检测到任何更改",
-          "updateSuccess": "群组\"{name}\"更新成功"
-        },
-        "membersModal": {
-          "title": "群组成员管理",
-          "subtitle": "{groupName} · 共 {count} 个成员",
-          "addMember": "添加成员",
-          "searchPlaceholder": "搜索成员...",
-          "loading": "加载成员列表...",
-          "noMembers": "暂无群组成员",
-          "noMembersHint": "点击\"添加成员\"按钮来邀请用户加入群组",
-          "noSearchResults": "未找到匹配的成员",
-          "noSearchResultsHint": "尝试使用其他关键词搜索",
-          "unknownUser": "未知用户",
-          "joinedAt": "加入于",
-          "removeMember": "移除成员",
-          "removeMemberConfirm": "确定要将\"{memberName}\"从群组\"{groupName}\"中移除吗？",
-          "removeMemberSuccess": "已移除成员\"{memberName}\""
-        },
-        "addMembersModal": {
-          "title": "添加成员",
-          "subtitle": "选择用户并将其添加到群组\"{groupName}\"",
-          "searchPlaceholder": "搜索用户名、姓名或邮箱...",
-          "loading": "加载用户列表...",
-          "noUsers": "没有可添加的用户",
-          "noSearchResults": "未找到匹配的用户",
-          "selectAll": "全选",
-          "deselectAll": "取消全选",
-          "addSelected": "添加 {count} 个成员",
-          "tableHeaders": {
-            "userInfo": "用户信息",
-            "role": "角色"
-          },
-          "userRoles": {
-            "admin": "管理员",
-            "manager": "经理",
-            "user": "普通用户"
-          },
-          "unknownUser": "未知用户",
-          "pagination": {
-            "showing": "显示第 {start} - {end} 条，共 {total} 条记录",
-            "previous": "上一页",
-            "next": "下一页"
-          },
-          "addSuccess": "成功添加 {count} 个成员到群组",
-          "addPartialSuccess": "{errorCount} 个成员添加失败"
-        },
-        "messages": {
-          "deleteConfirm": "确定要删除群组\"{name}\"吗？此操作不可撤销。",
-          "deleteSuccess": "已删除群组\"{name}\"",
-          "loadError": "加载群组数据失败",
-          "createError": "创建群组失败",
-          "updateError": "更新群组失败",
-          "deleteError": "删除群组失败",
-          "addMemberError": "添加成员失败",
-          "removeMemberError": "移除成员失败"
-        }
-      },
-      "permissions": {
-        "header": {
-          "title": "应用权限管理",
-          "subtitle": "统一管理应用可见性和群组权限分配",
-          "refreshButton": "刷新数据"
-        },
-        "searchAndFilter": {
-          "searchPlaceholder": "搜索应用名称或描述...",
-          "filterLabel": "应用类型：",
-          "filterOptions": {
-            "all": "全部应用",
-            "public": "公开应用",
-            "groupOnly": "群组应用",
-            "private": "私有应用"
-          }
-        },
-        "layout": {
-          "appListTitle": "应用列表",
-          "appListSubtitle": "选择应用来配置权限",
-          "permissionPanelTitle": "权限配置",
-          "permissionPanelSubtitle": "管理应用可见性和群组权限"
-        },
-        "appList": {
-          "noApps": "暂无应用",
-          "noAppsDescription": "请先创建应用实例",
-          "loading": "加载中...",
-          "unknown": "未知",
-          "visibility": {
-            "public": "公开",
-            "groupOnly": "群组",
-            "private": "私有"
-          }
-        },
-        "permissionPanel": {
-          "selectApp": {
-            "title": "选择应用",
-            "description": "从左侧应用列表中选择一个应用来配置权限"
-          },
-          "visibilitySettings": {
-            "title": "可见性设置",
-            "currentSetting": "当前设置",
-            "options": {
-              "public": {
-                "label": "公开应用",
-                "description": "所有用户都可以访问此应用"
-              },
-              "groupOnly": {
-                "label": "群组应用",
-                "description": "仅授权群组的成员可以访问"
-              },
-              "private": {
-                "label": "私有应用",
-                "description": "仅管理员可以访问此应用"
-              }
-            }
-          },
-          "groupPermissions": {
-            "title": "群组权限",
-            "description": "选择哪些群组可以访问此应用",
-            "noGroups": {
-              "title": "暂无群组",
-              "description": "请先创建群组才能设置应用权限"
-            },
-            "status": {
-              "enabled": "已启用",
-              "disabled": "已禁用"
-            },
-            "actions": {
-              "enable": "启用访问",
-              "disable": "禁用访问"
-            },
-            "memberCount": "{count} 成员"
-          },
-          "permissionExplanation": {
-            "title": "权限说明",
-            "public": "公开应用：所有用户都可以访问",
-            "groupOnly": "群组应用：仅授权群组的成员可以访问",
-            "private": "私有应用：仅管理员可以访问"
-          }
-        },
-        "messages": {
-          "visibilityUpdateSuccess": "应用可见性已更新为\"{visibility}\"",
-          "groupPermissionEnabled": "已启用{groupName}对此应用的访问权限",
-          "groupPermissionDisabled": "已禁用{groupName}对此应用的访问权限",
-          "loadAppsError": "加载应用列表失败",
-          "loadGroupsError": "加载群组列表失败",
-          "updateVisibilityError": "更新应用可见性失败",
-          "updateGroupPermissionError": "更新群组权限失败"
-        }
-      }
-    },
-    "about": {
-      "sections": [
-        {
-          "id": "section-1754655785513-1coqlomn8",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785513-drqxj9u2y",
-                "type": "heading",
-                "props": {
-                  "content": "关于 AgentifUI",
-                  "level": 1,
-                  "textAlign": "center"
-                }
-              },
-              {
-                "id": "comp-1754655785513-9ofzcdpsf",
-                "type": "paragraph",
-                "props": {
-                  "content": "连接 AI 与企业，打造大模型应用新体验",
-                  "textAlign": "center"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-1754655785513-9prn2le6b",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785513-tx96kmz4r",
-                "type": "heading",
-                "props": {
-                  "content": "我们的使命",
-                  "level": 2,
-                  "textAlign": "left"
-                }
-              },
-              {
-                "id": "comp-1754655785513-kjjf0b6zo",
-                "type": "paragraph",
-                "props": {
-                  "content": "AgentifUI 致力于利用大型语言模型的力量，为企业提供创新的应用解决方案。我们整合了多种模型供应商的能力，并基于 Dify 后端提供稳定、可靠的服务，帮助团队充分利用 AI 技术的价值。",
-                  "textAlign": "left"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-1754655785513-s2cs5yr9y",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785513-ldeft2c7k",
-                "type": "heading",
-                "props": {
-                  "content": "我们的价值观",
-                  "level": 2,
-                  "textAlign": "left"
-                }
-              },
-              {
-                "id": "comp-1754655785513-igu96ir94",
-                "type": "cards",
-                "props": {
-                  "layout": "grid",
-                  "items": [
-                    {
-                      "title": "技术创新",
-                      "description": "持续集成前沿的大模型技术，为企业提供领先的 AI 解决方案"
-                    },
-                    {
-                      "title": "数据安全",
-                      "description": "支持私有化部署和严格的数据保护措施，确保企业数据的安全与隐私"
-                    },
-                    {
-                      "title": "灵活定制",
-                      "description": "提供高度可定制的解决方案，满足不同行业和场景的特定需求"
-                    },
-                    {
-                      "title": "知识增强",
-                      "description": "通过 RAG 技术实现私有知识库的整合，增强模型的上下文感知能力"
-                    }
-                  ]
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-1754655785513-2pmrtihgq",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785513-3l83pa52m",
-                "type": "button",
-                "props": {
-                  "text": "开始探索",
-                  "variant": "solid",
-                  "action": "link",
-                  "url": "#",
-                  "textAlign": "center"
-                }
-              }
-            ]
-          ]
-        },
-        {
-          "id": "section-1754655785513-byfail2zl",
-          "layout": "single-column",
-          "columns": [
-            [
-              {
-                "id": "comp-1754655785513-ip1qbopuu",
-                "type": "paragraph",
-                "props": {
-                  "content": "© 2025 AgentifUI. 探索大模型应用的未来。",
-                  "textAlign": "center"
-                }
-              }
-            ]
-          ]
-        }
-      ],
-      "metadata": {
-        "version": "1.0.0",
-        "lastModified": "2025-08-08T12:23:05.513Z",
-        "author": "system-migration",
-        "migratedFrom": "legacy-format",
-        "migrationTimestamp": "2025-08-08T12:23:05.513Z",
-        "locale": "zh-CN"
-      }
-    }
-  },
-  "components": {
-    "chat": {
-      "messageActions": {
-        "copy": "复制",
-        "copied": "已复制",
-        "edit": "编辑",
-        "regenerate": "重新生成",
-        "useful": "有用",
-        "notUseful": "无用",
-        "rated": "已评价"
-      },
-      "referenceSources": {
-        "title": "引用了 {count} 个知识库资源",
-        "knowledgeBase": "知识库",
-        "expand": "展开全文",
-        "collapse": "收起",
-        "copy": "复制",
-        "copied": "已复制",
-        "copyFailed": "复制失败",
-        "relevanceScore": "相关度",
-        "wordCount": "{count} 字",
-        "page": "第 {page} 页"
-      },
-      "thinkBlock": {
-        "thinking": "正在深度思考",
-        "stopped": "思考已停止",
-        "completed": "已深度思考"
-      }
-    },
-    "chatInput": {
-      "attachmentPreview": {
-        "fileLimitExceeded": "已超出文件数量限制 ({current}/{max})，请删除部分文件"
-      }
-    },
-    "ui": {
-      "resizableSplitPane": {
-        "tooltip": "拖拽调整面板大小，双击重置"
-      },
-      "notificationBar": {
-        "closeNotification": "关闭通知"
-      },
-      "suggestedQuestionButton": {
-        "ariaLabel": "推荐问题: {question}"
-      },
-      "copyButton": {
-        "copy": "复制内容",
-        "copied": "已复制",
-        "noContent": "无内容可复制"
-      },
-      "userAvatar": {
-        "alt": "的头像"
-      }
-    }
-  },
-  "debug": {
-    "setDefaultApp": "设置默认应用 - 传入ID:",
-    "currentInstances": "当前所有实例:",
-    "instanceNotFound": "未找到实例，传入ID:",
-    "foundInstance": "找到实例:",
-    "setDefaultFailed": "设置默认应用失败:",
-    "syncConfig": "同步配置",
-    "syncFailed": "同步失败:",
-    "syncSuccess": "同步成功"
-  },
-  "buttons": {
-    "syncInProgress": "同步中...",
-    "syncConfig": "同步配置",
-    "tooltip": {
-      "syncFromDify": "从 Dify API 同步配置",
-      "syncFromDifyEdit": "从 Dify API 同步配置",
-      "syncFromDifyCreate": "从 Dify API 同步配置（应用ID为空时将自动生成）",
-      "fillCredentials": "请先填写API URL和API Key"
-    }
-  },
-  "confirmDialog": {
-    "updateDisplayName": "是否将显示名称更新为：\"{name}\"？"
-  },
-  "errors": {
-    "notFound": "页面未找到",
-    "serverError": "服务器错误",
-    "unauthorized": "未授权访问"
-  },
-  "navbar": {
-    "user": {
-      "userMenu": "用户菜单",
-      "login": "登录",
-      "logout": "退出登录",
-      "loggingOut": "退出中...",
-      "register": "注册新账户",
-      "history": "历史对话",
-      "settings": "设置",
-      "about": "关于",
-      "admin": "管理后台",
-      "loginPrompt": "登录以使用更多功能",
-      "loginDescription": "访问您的对话历史和个人设置"
-    },
-    "conversation": {
-      "newChat": "新对话",
-      "creating": "创建中...",
-      "loading": "加载中...",
-      "rename": "重命名",
-      "delete": "删除对话",
-      "star": "收藏",
-      "unstar": "取消收藏",
-      "appsMarket": "应用市场",
-      "renameDialog": {
-        "title": "重命名对话",
-        "placeholder": "输入新的对话名称",
-        "confirmText": "确认重命名"
-      },
-      "deleteDialog": {
-        "title": "删除对话",
-        "message": "确定要删除会话 \"{title}\" 吗？此操作无法撤销。",
-        "confirmText": "确认删除"
-      },
-      "createInProgress": "对话正在创建中，请稍后再试。",
-      "incompleteInfo": "对话信息不完整，无法操作。",
-      "renameFailed": "重命名会话失败。",
-      "deleteFailed": "删除会话失败。",
-      "operationError": "操作出错，请稍后再试。"
-    },
-    "workflow": {
-      "history": "历史记录",
-      "closeHistory": "关闭历史记录",
-      "viewHistory": "查看历史记录",
-      "closeHistoryShort": "关闭历史",
-      "historyShort": "历史记录"
-    }
-  },
-  "sidebar": {
-    "appName": "AgentifUI",
-    "expand": "展开",
-    "collapse": "收起",
-    "newChat": "新对话",
-    "historyChats": "历史对话",
-    "appsMarket": "应用市场",
-    "settings": "设置",
-    "recentChats": "近期对话",
-    "moreOptions": "更多选项",
-    "rename": "重命名",
-    "delete": "删除对话",
-    "untitled": "无标题",
-    "creating": "创建中...",
-    "favoriteApps": "常用应用",
-    "loading": "加载中...",
-    "startWorkflow": "开始工作流",
-    "startTextGeneration": "开始文本生成",
-    "startChat": "开始对话",
-    "hideApp": "隐藏该应用",
-    "renameDialog": {
-      "title": "重命名对话",
-      "label": "对话名称",
-      "placeholder": "输入新的对话名称",
-      "confirmText": "确认重命名"
-    },
-    "deleteDialog": {
-      "title": "删除对话",
-      "message": "确定要删除会话 \"{title}\" 吗？此操作无法撤销。",
-      "confirmText": "确认删除"
-    },
-    "syncingMessage": "对话数据正在同步中，请稍后再尝试{action}。",
-    "operationFailed": "操作失败，请稍后再试。",
-    "saveFailed": "保存对话失败",
-    "createFailed": "创建对话失败"
-  },
-  "mobile": {
-    "navigation": {
-      "openMenu": "打开菜单",
-      "openUserMenu": "打开用户菜单"
-    },
-    "user": {
-      "defaultUser": "用户",
-      "loginRegister": "登录/注册",
-      "avatarAlt": "{userName}的头像",
-      "loginPrompt": "登录以使用更多功能"
-    },
-    "bottomSheet": {
-      "userMenu": "用户菜单",
-      "account": "账户"
-    },
-    "menu": {
-      "settings": "设置",
-      "logout": "退出登录",
-      "login": "登录",
-      "register": "注册新账户",
-      "adminPanel": "管理后台",
-      "about": "关于"
-    }
-  },
-  "loading": {
-    "default": "加载中...",
-    "app": "正在加载应用...",
-    "appList": "加载应用列表...",
-    "messages": "加载更多消息...",
-    "moreMessages": "加载更多历史消息",
-    "retry": "重试",
-    "failed": "加载失败",
-    "loadingFailed": "加载消息失败: {error}",
-    "spinner": "加载中",
-    "pageLoader": {
-      "title": "正在加载"
-    }
-  },
-  "dynamicTitle": {
-    "base": "AgentifUI",
-    "settings": {
-      "main": "设置",
-      "profile": "个人资料",
-      "account": "账户设置",
-      "appearance": "外观设置",
-      "language": "语言设置"
-    },
-    "admin": {
-      "main": "管理后台",
-      "users": "用户管理",
-      "apiConfig": "API配置",
-      "security": "安全设置",
-      "analytics": "数据分析",
-      "content": "页面内容管理"
-    },
-    "auth": {
-      "login": "登录",
-      "register": "注册",
-      "phoneLogin": "手机号登录",
-      "resetPassword": "重置密码",
-      "forgotPassword": "忘记密码",
-      "ssoProcessing": "SSO登录处理中"
-    },
-    "apps": {
-      "market": "应用市场",
-      "agent": "Agent应用",
-      "chatbot": "Chatbot应用",
-      "chatflow": "Chatflow应用",
-      "workflow": "Workflow应用",
-      "textGeneration": "文本生成应用",
-      "details": "应用详情",
-      "loading": "加载应用..."
-    },
-    "chat": {
-      "main": "聊天",
-      "new": "新对话",
-      "history": "历史对话",
-      "loading": "加载对话...",
-      "notFound": "对话不存在"
-    },
-    "about": "关于"
-  },
-  "history": {
-    "title": "历史对话",
-    "loading": "会话记录加载中...",
-    "noRecords": "暂无会话历史",
-    "totalCount": "共找到 {total} 个对话",
-    "searchResults": "搜索结果：{count} 个对话",
-    "totalRecords": "共 {total} 个对话",
-    "searchPlaceholder": "搜索聊天历史...",
-    "newChat": "新对话",
-    "noMessagePreview": "无消息预览",
-    "batchDelete": "批量删除",
-    "exitSelection": "退出选择",
-    "selectAll": "全选",
-    "deselectAll": "取消全选",
-    "selected": "已选择 {count} / {total} 个对话",
-    "deleteCount": "删除 ({count})",
-    "deleting": "删除中...",
-    "cancel": "取消",
-    "rename": "重命名",
-    "delete": "删除对话",
-    "moreOptions": "更多选项",
-    "noSearchResults": "未找到匹配的对话",
-    "searchHint": "请尝试其他搜索词",
-    "noHistoryTitle": "暂无聊天历史",
-    "noHistoryDesc": "开始一个新对话吧",
-    "renameDialog": {
-      "title": "重命名对话",
-      "label": "对话名称",
-      "placeholder": "输入新的对话名称",
-      "confirmText": "确认重命名"
-    },
-    "deleteDialog": {
-      "title": "删除对话",
-      "message": "确定要删除对话 \"{title}\" 吗？此操作无法撤销。",
-      "confirmText": "确认删除"
-    },
-    "batchDeleteDialog": {
-      "title": "批量删除对话",
-      "message": "确定要删除选中的 {count} 个对话吗？此操作无法撤销。",
-      "confirmText": "删除",
-      "cancelText": "取消"
-    },
-    "operations": {
-      "renameFailed": "对话重命名失败",
-      "deleteFailed": "对话删除失败",
-      "batchDeleteSuccess": "成功删除 {success} 个对话，{failed} 个删除失败",
-      "batchDeleteFailed": "删除失败，请稍后重试",
-      "error": "操作出错，请稍后再试"
-    }
-  },
-  "difyAppTypes": {
-    "workflow": {
-      "label": "工作流",
-      "description": "自动化工作流程",
-      "features": {
-        "automation": "自动化",
-        "batchProcessing": "批处理",
-        "processControl": "流程控制"
-      }
-    },
-    "text-generation": {
-      "label": "文本生成",
-      "description": "单次文本生成应用",
-      "features": {
-        "textGeneration": "文本生成",
-        "contentCreation": "内容创作",
-        "formattedOutput": "格式化输出"
-      },
-      "resultViewer": {
-        "title": "生成结果",
-        "defaultTitle": "文本生成结果",
-        "actions": {
-          "copy": "复制结果",
-          "copied": "已复制",
-          "download": "下载结果"
-        },
-        "executionInfo": {
-          "title": "执行信息",
-          "status": "状态：",
-          "createdAt": "创建时间：",
-          "elapsedTime": "耗时：",
-          "statusValues": {
-            "completed": "已完成",
-            "failed": "已失败",
-            "stopped": "已停止"
-          }
-        },
-        "content": {
-          "title": "生成内容",
-          "noContent": "暂无内容"
-        }
-      }
-    },
-    "chatbot": {
-      "label": "聊天机器人",
-      "description": "基础对话聊天机器人",
-      "features": {
-        "conversation": "对话",
-        "fileUpload": "文件上传",
-        "speechToText": "语音转文字"
-      }
-    },
-    "agent": {
-      "label": "智能代理",
-      "description": "支持工具调用的智能代理",
-      "features": {
-        "conversation": "对话",
-        "toolCalling": "工具调用",
-        "reasoningChain": "推理链",
-        "multiTurnTasks": "多轮任务"
-      }
-    },
-    "chatflow": {
-      "label": "对话流",
-      "description": "对话流程编排应用",
-      "features": {
-        "processOrchestration": "流程编排",
-        "conditionalBranching": "条件分支",
-        "conversationManagement": "对话管理"
-      }
-    }
-  },
-  "filePreview": {
-    "loading": "正在加载文件内容...",
-    "failed": "文件加载失败",
-    "retryButton": "重试",
-    "dismissButton": "关闭",
-    "downloadButton": "下载文件",
-    "closeButton": "关闭预览",
-    "noFileSelected": "未选择文件",
-    "previewNotSupported": "不支持预览此文件类型。您可以下载查看内容。",
-    "textPreview": {
-      "title": "文本预览",
-      "copyButton": "复制",
-      "copiedButton": "已复制！",
-      "downloadButton": "下载",
-      "charactersCount": "{count} 个字符"
-    },
-    "pdfPreview": {
-      "title": "PDF 预览",
-      "openButton": "打开",
-      "downloadButton": "下载",
-      "fileSize": "{size} MB"
-    },
-    "imagePreview": {
-      "title": "图片预览",
-      "downloadButton": "下载",
-      "loadError": "图片加载失败",
-      "downloadToView": "下载查看",
-      "filename": "文件名",
-      "fileSize": "文件大小",
-      "fileType": "文件类型"
-    },
-    "audio": {
-      "title": "音频预览",
-      "duration": "时长",
-      "loadError": "音频文件加载失败",
-      "notSupported": "您的浏览器不支持音频播放"
-    },
-    "video": {
-      "title": "视频预览",
-      "duration": "时长",
-      "resolution": "分辨率",
-      "loadError": "视频文件加载失败",
-      "notSupported": "您的浏览器不支持视频播放"
-    },
-    "markdownPreview": {
-      "title": "Markdown 预览",
-      "renderedMode": "渲染模式",
-      "rawMode": "原始模式",
-      "downloadButton": "下载",
-      "charactersCount": "{count} 个字符"
-    },
-    "errors": {
-      "noAppId": "文件预览缺少应用程序 ID",
-      "downloadNoAppId": "文件下载缺少应用程序 ID"
-    },
-    "fileInfo": {
-      "title": "文件信息",
-      "name": "名称：",
-      "type": "类型：",
-      "size": "大小："
-    }
-  }
-}

From ab000ec01068c5654d38d5b015459a4319a761e5 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Tue, 19 Aug 2025 19:12:01 +0800
Subject: [PATCH 61/66] refactor: complete isDark to Tailwind dark: conversion
 for remaining components

Convert remaining components from isDark conditional logic to Tailwind
dark: classes:
- app/about/page.tsx: replace dynamic color calculations
- components/home/home-dynamic.tsx: replace dynamic color calculations
- components/admin/content/home-preview.tsx: replace complex color system
- Remove all useTheme imports and isDark usage in new/modified files
- Replace runtime conditional logic with Tailwind responsive classes
- Maintain identical visual appearance across light/dark modes

All components in current branch now use Tailwind dark: prefix exclusively,
completing the modernized dark mode implementation strategy.
---
 app/about/page.tsx                        | 23 ++--------
 components/admin/content/home-preview.tsx | 54 +++++++----------------
 components/home/home-dynamic.tsx          | 24 +++-------
 3 files changed, 26 insertions(+), 75 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 59d20804..fd6b0f7b 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -5,7 +5,6 @@ import { AdminButton } from '@components/admin/admin-button';
 import { LanguageSwitcher } from '@components/ui/language-switcher';
 import { PageLoader } from '@components/ui/page-loader';
 import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
-import { useTheme } from '@lib/hooks/use-theme';
 import { createClient } from '@lib/supabase/client';
 import type { AboutTranslationData } from '@lib/types/about-page-components';
 
@@ -16,7 +15,6 @@ import { useRouter } from 'next/navigation';
 
 export default function AboutPage() {
   const router = useRouter();
-  const { isDark } = useTheme();
   const staticT = useTranslations('pages.about');
   const { t: dynamicT, isLoading } = useDynamicTranslations({
     sections: ['pages.about'],
@@ -34,23 +32,11 @@ export default function AboutPage() {
     setMounted(true);
   }, []);
 
-  // get homepage-style colors based on theme
-  const getColors = () => {
-    if (isDark) {
-      return {
-        bgColor: '#1c1917',
-        textColor: 'text-gray-300',
-      };
-    } else {
-      return {
-        bgColor: '#f5f5f4',
-        textColor: 'text-stone-700',
-      };
-    }
+  // Homepage-style colors using Tailwind classes
+  const colors = {
+    bgClass: 'bg-stone-100 dark:bg-stone-900',
   };
 
-  const colors = getColors();
-
   // handle "start exploring" button click
   const handleExploreClick = async () => {
     try {
@@ -106,8 +92,7 @@ export default function AboutPage() {
 
   return (
     <div
-      className="relative min-h-screen w-full px-4 py-12 sm:px-6 lg:px-8"
-      style={{ backgroundColor: colors.bgColor }}
+      className={`relative min-h-screen w-full px-4 py-12 sm:px-6 lg:px-8 ${colors.bgClass}`}
     >
       {/* Top-right toolbar: Admin button (left) + Language switcher (right) */}
       <div className="fixed top-4 right-4 z-50 hidden flex-col items-end gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3 lg:top-6 lg:right-6">
diff --git a/components/admin/content/home-preview.tsx b/components/admin/content/home-preview.tsx
index d9610824..05552910 100644
--- a/components/admin/content/home-preview.tsx
+++ b/components/admin/content/home-preview.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { Button } from '@components/ui/button';
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -29,40 +28,24 @@ interface HomePreviewProps {
 }
 
 export function HomePreview({ config, previewDevice }: HomePreviewProps) {
-  const { isDark } = useTheme();
-
-  const getColors = () => {
-    if (isDark) {
-      return {
-        titleGradient: 'from-stone-300 to-stone-500',
-        textColor: 'text-gray-300',
-        cardBg: 'bg-stone-700',
-        cardBorder: 'border-stone-600',
-        cardShadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.3)]',
-        primaryButton: 'bg-stone-600 hover:bg-stone-500 text-gray-100',
-        secondaryButton: 'border-stone-500 text-gray-200 hover:bg-stone-600',
-        featureIconBg: 'bg-stone-600',
-        featureTextColor: 'text-gray-300',
-        bgColor: '#1c1917',
-      };
-    } else {
-      return {
-        titleGradient: 'from-stone-700 to-stone-900',
-        textColor: 'text-stone-700',
-        cardBg: 'bg-stone-100',
-        cardBorder: 'border-stone-200',
-        cardShadow: 'shadow-[0_4px_20px_rgba(0,0,0,0.1)]',
-        primaryButton: 'bg-stone-800 hover:bg-stone-700 text-gray-100',
-        secondaryButton: 'border-stone-400 text-stone-800 hover:bg-stone-200',
-        featureIconBg: 'bg-stone-200',
-        featureTextColor: 'text-stone-700',
-        bgColor: '#f5f5f4',
-      };
-    }
+  // Tailwind classes for responsive dark mode
+  const colors = {
+    bgClass: 'bg-stone-100 dark:bg-stone-900',
+    titleGradient:
+      'from-stone-700 to-stone-900 dark:from-stone-300 dark:to-stone-500',
+    textColor: 'text-stone-700 dark:text-gray-300',
+    cardBg: 'bg-stone-100 dark:bg-stone-700',
+    cardBorder: 'border-stone-200 dark:border-stone-600',
+    cardShadow:
+      'shadow-[0_4px_20px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_20px_rgba(0,0,0,0.3)]',
+    primaryButton:
+      'bg-stone-800 hover:bg-stone-700 text-gray-100 dark:bg-stone-600 dark:hover:bg-stone-500',
+    secondaryButton:
+      'border-stone-400 text-stone-800 hover:bg-stone-200 dark:border-stone-500 dark:text-gray-200 dark:hover:bg-stone-600',
+    featureIconBg: 'bg-stone-200 dark:bg-stone-600',
+    featureTextColor: 'text-stone-700 dark:text-gray-300',
   };
 
-  const colors = getColors();
-
   const getDeviceStyles = () => {
     switch (previewDevice) {
       case 'mobile':
@@ -121,10 +104,7 @@ export function HomePreview({ config, previewDevice }: HomePreviewProps) {
       )}
     >
       <div className={deviceStyles.container}>
-        <div
-          className={cn(deviceStyles.screen)}
-          style={{ backgroundColor: colors.bgColor }}
-        >
+        <div className={cn(deviceStyles.screen, colors.bgClass)}>
           <div className={deviceStyles.content}>
             <AnimatePresence>
               <main className={deviceStyles.mainClass}>
diff --git a/components/home/home-dynamic.tsx b/components/home/home-dynamic.tsx
index 1215c0fc..19d69229 100644
--- a/components/home/home-dynamic.tsx
+++ b/components/home/home-dynamic.tsx
@@ -5,7 +5,6 @@ import ComponentRenderer from '@components/admin/content/component-renderer';
 import { LanguageSwitcher } from '@components/ui/language-switcher';
 import { PageLoader } from '@components/ui/page-loader';
 import { useDynamicTranslations } from '@lib/hooks/use-dynamic-translations';
-import { useTheme } from '@lib/hooks/use-theme';
 import type { PageContent } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -19,7 +18,6 @@ import { useEffect, useState } from 'react';
  * Supports both legacy static format and new dynamic sections format
  */
 export function HomeDynamic() {
-  const { isDark } = useTheme();
   const [mounted, setMounted] = useState(false);
   const { t: dynamicT, isLoading } = useDynamicTranslations({
     sections: ['pages.home'],
@@ -69,23 +67,12 @@ export function HomeDynamic() {
     }
   }, [mounted, isLoading, dynamicT]);
 
-  // Get colors based on theme
-  const getColors = () => {
-    if (isDark) {
-      return {
-        bgColor: '#1c1917',
-        textColor: 'text-gray-300',
-      };
-    } else {
-      return {
-        bgColor: '#f5f5f4',
-        textColor: 'text-stone-700',
-      };
-    }
+  // Homepage-style colors using Tailwind classes
+  const colors = {
+    bgClass: 'bg-stone-100 dark:bg-stone-900',
+    textColor: 'text-stone-700 dark:text-gray-300',
   };
 
-  const colors = getColors();
-
   // Show loading state while mounting or dynamic translations load
   if (!mounted || isLoading || !pageContent) {
     return <PageLoader />;
@@ -169,8 +156,7 @@ export function HomeDynamic() {
   return (
     <AnimatePresence>
       <div
-        className="relative w-full px-4 py-12 sm:px-6 lg:px-8"
-        style={{ backgroundColor: colors.bgColor }}
+        className={`relative w-full px-4 py-12 sm:px-6 lg:px-8 ${colors.bgClass}`}
       >
         {/* Top-right toolbar: Admin button (left) + Language switcher (right) */}
         {/* Uses absolute positioning with responsive design, hidden on mobile to avoid layout issues */}

From e04e594c5383b289f2933ef8cee9f20789678c1e Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Wed, 20 Aug 2025 13:12:51 +0800
Subject: [PATCH 62/66] refactor(utils): improve type safety in
 debounced/throttled callback hooks

- Fix return type from T to (...args: Parameters<T>) => void
- Align with underlying debounce/throttle function signatures
- Maintain parameter type safety while fixing type system inconsistency

This resolves type compatibility issues found during code review.
---
 lib/utils/performance.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/utils/performance.ts b/lib/utils/performance.ts
index 346dd5e1..05bec668 100644
--- a/lib/utils/performance.ts
+++ b/lib/utils/performance.ts
@@ -66,7 +66,7 @@ export function useDebouncedCallback<T extends (...args: any[]) => any>(
   callback: T,
   delay: number,
   deps: React.DependencyList
-): T {
+): (...args: Parameters<T>) => void {
   const debouncedCallback = React.useMemo(
     () => debounce(callback, delay),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,7 +84,7 @@ export function useDebouncedCallback<T extends (...args: any[]) => any>(
     };
   }, [debouncedCallback]);
 
-  return debouncedCallback as T;
+  return debouncedCallback;
 }
 
 /**
@@ -95,14 +95,14 @@ export function useThrottledCallback<T extends (...args: any[]) => any>(
   callback: T,
   delay: number,
   deps: React.DependencyList
-): T {
+): (...args: Parameters<T>) => void {
   const throttledCallback = React.useMemo(
     () => throttle(callback, delay),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     deps
   );
 
-  return throttledCallback as T;
+  return throttledCallback;
 }
 
 /**

From c605da1c497df7317d21f703b2c5f90d0faac528 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Wed, 20 Aug 2025 13:25:50 +0800
Subject: [PATCH 63/66] refactor(stores): replace magic number with
 MAX_UNDO_STEPS constant

- Add MAX_UNDO_STEPS constant (20) to improve code maintainability
- Replace all hardcoded -20 and 20 in undo/redo stack management
- Enhance code readability and ensure consistent undo stack size limit
- Update related comments to reference the constant

This addresses code review feedback about magic numbers and improves
maintainability of the undo/redo system in the about editor.
---
 lib/stores/about-editor-store.ts | 42 +++++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/lib/stores/about-editor-store.ts b/lib/stores/about-editor-store.ts
index 45214927..6ed17124 100644
--- a/lib/stores/about-editor-store.ts
+++ b/lib/stores/about-editor-store.ts
@@ -10,6 +10,11 @@ import {
 import { clonePageContent } from '@lib/utils/performance';
 import { create } from 'zustand';
 
+/**
+ * Maximum number of undo/redo states to keep in memory
+ */
+const MAX_UNDO_STEPS = 20;
+
 /**
  * About Editor State Interface
  *
@@ -126,7 +131,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       // Save current state to undo stack before updating
       set(state => ({
         pageContent: newPageContent,
-        undoStack: [...state.undoStack, pageContent].slice(-20), // Keep last 20 states
+        undoStack: [...state.undoStack, pageContent].slice(-MAX_UNDO_STEPS), // Keep last MAX_UNDO_STEPS states
         redoStack: [], // Clear redo stack on new change
         isDirty: true,
       }));
@@ -151,7 +156,9 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
       // Save to undo stack
       set(state => ({
         pageContent: newPageContent,
-        undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+        undoStack: [...state.undoStack, state.pageContent!].slice(
+          -MAX_UNDO_STEPS
+        ),
         redoStack: [],
         isDirty: true,
       }));
@@ -187,7 +194,9 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     if (deleted) {
       set(state => ({
         pageContent: { ...newPageContent, sections: cleanedSections },
-        undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+        undoStack: [...state.undoStack, state.pageContent!].slice(
+          -MAX_UNDO_STEPS
+        ),
         redoStack: [],
         selectedComponentId:
           state.selectedComponentId === id ? null : state.selectedComponentId,
@@ -357,7 +366,9 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
         // Save changes and return success
         set(state => ({
           pageContent: newPageContent,
-          undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+          undoStack: [...state.undoStack, state.pageContent!].slice(
+            -MAX_UNDO_STEPS
+          ),
           redoStack: [],
           isDirty: true,
         }));
@@ -451,7 +462,9 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
 
           set(state => ({
             pageContent: { ...newPageContent, sections: cleanedSections },
-            undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+            undoStack: [...state.undoStack, state.pageContent!].slice(
+              -MAX_UNDO_STEPS
+            ),
             redoStack: [],
             isDirty: true,
           }));
@@ -550,7 +563,9 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
         // Save changes and return success
         set(state => ({
           pageContent: { ...newPageContent, sections: cleanedSections },
-          undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+          undoStack: [...state.undoStack, state.pageContent!].slice(
+            -MAX_UNDO_STEPS
+          ),
           redoStack: [],
           isDirty: true,
         }));
@@ -833,7 +848,9 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
                   ...newPageContent,
                   sections: cleanedSections,
                 },
-                undoStack: [...state.undoStack, state.pageContent!].slice(-20),
+                undoStack: [...state.undoStack, state.pageContent!].slice(
+                  -MAX_UNDO_STEPS
+                ),
                 redoStack: [],
                 isDirty: true,
               }));
@@ -872,7 +889,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
 
     set(state => ({
       pageContent: newPageContent,
-      undoStack: [...state.undoStack, pageContent].slice(-20),
+      undoStack: [...state.undoStack, pageContent].slice(-MAX_UNDO_STEPS),
       redoStack: [],
       isDirty: true,
     }));
@@ -888,7 +905,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
 
     set(state => ({
       pageContent: newPageContent,
-      undoStack: [...state.undoStack, pageContent].slice(-20),
+      undoStack: [...state.undoStack, pageContent].slice(-MAX_UNDO_STEPS),
       redoStack: [],
       isDirty: true,
     }));
@@ -905,7 +922,10 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
     set({
       pageContent: previousState,
       undoStack: newUndoStack,
-      redoStack: [state.pageContent, ...state.redoStack].slice(0, 20),
+      redoStack: [state.pageContent, ...state.redoStack].slice(
+        0,
+        MAX_UNDO_STEPS
+      ),
       selectedComponentId: null,
     });
   },
@@ -920,7 +940,7 @@ export const useAboutEditorStore = create<AboutEditorState>((set, get) => ({
 
     set({
       pageContent: nextState,
-      undoStack: [...state.undoStack, state.pageContent].slice(-20),
+      undoStack: [...state.undoStack, state.pageContent].slice(-MAX_UNDO_STEPS),
       redoStack: newRedoStack,
       selectedComponentId: null,
     });

From 7fc65a8df0e4aba83c017016340918cb25610569 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Thu, 21 Aug 2025 14:22:06 +0800
Subject: [PATCH 64/66] fix(utils): fix useThrottledCallback dependency array
 inconsistency

- Include callback and delay in useMemo dependency array
- Align with useDebouncedCallback implementation for consistency
- Ensures throttled function updates when callback or delay changes
- Prevents potential stale closure issues

This resolves a technical debt where useThrottledCallback had
inconsistent dependency handling compared to useDebouncedCallback.
---
 lib/utils/performance.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/utils/performance.ts b/lib/utils/performance.ts
index 05bec668..643be65f 100644
--- a/lib/utils/performance.ts
+++ b/lib/utils/performance.ts
@@ -99,7 +99,7 @@ export function useThrottledCallback<T extends (...args: any[]) => any>(
   const throttledCallback = React.useMemo(
     () => throttle(callback, delay),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    deps
+    [callback, delay, ...deps]
   );
 
   return throttledCallback;

From 343e43d2f14f00bde83ecaa19094f4a0627a0aa8 Mon Sep 17 00:00:00 2001
From: pixelsama <pixelsama64@gmail.com>
Date: Fri, 22 Aug 2025 17:56:31 +0800
Subject: [PATCH 65/66] feat(i18n): implement dynamic year placeholders in
 footer components

- Add text processing utility for placeholder replacement
- Update ComponentRenderer Paragraph to process {year} placeholder
- Replace hardcoded 2025 with {year} placeholder in all language files
- Remove legacy year parameter code from about page
- Unify dynamic year handling across homepage and about page footers
---
 app/about/page.tsx                            |  2 +-
 .../admin/content/component-renderer.tsx      |  6 ++++-
 lib/utils/text-processing.ts                  | 24 +++++++++++++++++++
 messages/de-DE.json                           |  2 +-
 messages/en-US.json                           |  2 +-
 messages/es-ES.json                           |  2 +-
 messages/fr-FR.json                           |  2 +-
 messages/it-IT.json                           |  2 +-
 messages/ja-JP.json                           |  2 +-
 messages/pt-PT.json                           |  2 +-
 messages/ru-RU.json                           |  2 +-
 messages/zh-CN.json                           |  2 +-
 messages/zh-TW.json                           |  2 +-
 13 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 lib/utils/text-processing.ts

diff --git a/app/about/page.tsx b/app/about/page.tsx
index fd6b0f7b..2535f3a1 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -84,7 +84,7 @@ export default function AboutPage() {
     },
     buttonText: t('buttonText'),
     copyright: {
-      prefix: t('copyright.prefix', { year: new Date().getFullYear() }),
+      prefix: t('copyright.prefix'),
       linkText: t('copyright.linkText'),
       suffix: t('copyright.suffix'),
     },
diff --git a/components/admin/content/component-renderer.tsx b/components/admin/content/component-renderer.tsx
index a1178b7f..e2668962 100644
--- a/components/admin/content/component-renderer.tsx
+++ b/components/admin/content/component-renderer.tsx
@@ -12,6 +12,7 @@ import {
   getResolvedComponentProps,
 } from '@lib/types/about-page-components';
 import { cn } from '@lib/utils';
+import { processTextPlaceholders } from '@lib/utils/text-processing';
 
 import React from 'react';
 
@@ -82,6 +83,9 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, textAlign }) => {
     right: 'text-right',
   };
 
+  // Process text placeholders like {year}
+  const processedContent = processTextPlaceholders(content);
+
   return (
     <p
       className={cn(
@@ -90,7 +94,7 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, textAlign }) => {
         textAlignClasses[textAlign]
       )}
     >
-      {content}
+      {processedContent}
     </p>
   );
 };
diff --git a/lib/utils/text-processing.ts b/lib/utils/text-processing.ts
new file mode 100644
index 00000000..3dd3db04
--- /dev/null
+++ b/lib/utils/text-processing.ts
@@ -0,0 +1,24 @@
+/**
+ * Text processing utilities for dynamic content
+ *
+ * Handles placeholder replacement in text content
+ */
+
+/**
+ * Process text placeholders and replace them with actual values
+ *
+ * Currently supports:
+ * - {year} - Current year (e.g., 2025)
+ *
+ * @param text - The text containing placeholders to process
+ * @returns Text with placeholders replaced by actual values
+ */
+export function processTextPlaceholders(text: string): string {
+  if (!text || typeof text !== 'string') {
+    return text;
+  }
+
+  // Replace {year} with current year
+  const currentYear = new Date().getFullYear();
+  return text.replace(/\{year\}/g, currentYear.toString());
+}
diff --git a/messages/de-DE.json b/messages/de-DE.json
index bc13acfb..cb7c3ead 100644
--- a/messages/de-DE.json
+++ b/messages/de-DE.json
@@ -2128,7 +2128,7 @@
                 "id": "comp-1754655785523-yqfx2g011",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. Die Zukunft großer Modellanwendungen erkunden.",
+                  "content": "© {year} AgentifUI. Die Zukunft großer Modellanwendungen erkunden.",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/en-US.json b/messages/en-US.json
index 64e07543..08d1211c 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -2129,7 +2129,7 @@
                 "id": "comp-1754655785510-8fd66745a",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. Explore the future of large model applications.",
+                  "content": "© {year} AgentifUI. Explore the future of large model applications.",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/es-ES.json b/messages/es-ES.json
index 1560eb7d..67733346 100644
--- a/messages/es-ES.json
+++ b/messages/es-ES.json
@@ -2128,7 +2128,7 @@
                 "id": "comp-1754655785539-sxxoy6s4k",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. Explora el futuro de las aplicaciones de modelos grandes.",
+                  "content": "© {year} AgentifUI. Explora el futuro de las aplicaciones de modelos grandes.",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/fr-FR.json b/messages/fr-FR.json
index 835b5a1a..35762c10 100644
--- a/messages/fr-FR.json
+++ b/messages/fr-FR.json
@@ -2128,7 +2128,7 @@
                 "id": "comp-1754655785527-m8l8x5hm2",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. Explorez l'avenir des applications de grands modèles.",
+                  "content": "© {year} AgentifUI. Explorez l'avenir des applications de grands modèles.",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/it-IT.json b/messages/it-IT.json
index 7de12b5d..3d95e107 100644
--- a/messages/it-IT.json
+++ b/messages/it-IT.json
@@ -2128,7 +2128,7 @@
                 "id": "comp-1754655785533-7piv2dhg7",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. Esplora il futuro delle applicazioni di grandi modelli.",
+                  "content": "© {year} AgentifUI. Esplora il futuro delle applicazioni di grandi modelli.",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/ja-JP.json b/messages/ja-JP.json
index b82027d0..9e1e8f76 100644
--- a/messages/ja-JP.json
+++ b/messages/ja-JP.json
@@ -2129,7 +2129,7 @@
                 "id": "comp-1754655785520-sukotrhas",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI。大規模モデルアプリケーションの未来を探求。",
+                  "content": "© {year} AgentifUI。大規模モデルアプリケーションの未来を探求。",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/pt-PT.json b/messages/pt-PT.json
index d84e8c8a..a9e2b7e6 100644
--- a/messages/pt-PT.json
+++ b/messages/pt-PT.json
@@ -2128,7 +2128,7 @@
                 "id": "comp-1754655785536-ihwp8sjl9",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. Explore o futuro das aplicações de modelos grandes.",
+                  "content": "© {year} AgentifUI. Explore o futuro das aplicações de modelos grandes.",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/ru-RU.json b/messages/ru-RU.json
index 2db95a54..5849029d 100644
--- a/messages/ru-RU.json
+++ b/messages/ru-RU.json
@@ -2128,7 +2128,7 @@
                 "id": "comp-1754655785530-ewyln1yz7",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. Исследуйте будущее приложений больших моделей.",
+                  "content": "© {year} AgentifUI. Исследуйте будущее приложений больших моделей.",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index 60df1c2f..10eff9d9 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -2129,7 +2129,7 @@
                 "id": "comp-1754655785513-ip1qbopuu",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. 探索大模型应用的未来。",
+                  "content": "© {year} AgentifUI. 探索大模型应用的未来。",
                   "textAlign": "center"
                 }
               }
diff --git a/messages/zh-TW.json b/messages/zh-TW.json
index 0268e48f..d9bccc44 100644
--- a/messages/zh-TW.json
+++ b/messages/zh-TW.json
@@ -2129,7 +2129,7 @@
                 "id": "comp-1754655785516-4wtktv1bg",
                 "type": "paragraph",
                 "props": {
-                  "content": "© 2025 AgentifUI. 探索大模型應用的未來。",
+                  "content": "© {year} AgentifUI. 探索大模型應用的未來。",
                   "textAlign": "center"
                 }
               }

From 5d4923d461be8393fc4d39f466812827e25e4c0e Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 22 Aug 2025 10:29:19 +0800
Subject: [PATCH 66/66] refactor: replace isDark conditional logic with
 Tailwind dark: prefix across 19 components (250+ conversions) (#240)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhangxuhe1 <xuhezhang6@gmail.com>
---
 .../chatflow/chatflow-execution-bar.tsx       | 105 +++++-----------
 .../chatflow/chatflow-floating-controller.tsx |   6 +-
 components/chatflow/chatflow-input-area.tsx   |  73 ++++-------
 components/chatflow/chatflow-node-tracker.tsx |  31 ++---
 .../file-preview/previews/audio-preview.tsx   |  38 ++----
 .../file-preview/previews/image-preview.tsx   |  30 ++---
 .../previews/markdown-preview.tsx             |  56 +++------
 .../file-preview/previews/pdf-preview.tsx     |  23 ++--
 .../file-preview/previews/text-preview.tsx    |  35 ++----
 .../file-preview/previews/video-preview.tsx   |  40 ++----
 components/history/history-list.tsx           |  49 +++-----
 components/history/history-selection-bar.tsx  |  20 +--
 components/history/index.tsx                  |  28 ++---
 components/mobile/mobile-user-button.tsx      |  22 +---
 components/mobile/ui/user-bottom-sheet.tsx    |  40 +++---
 .../text-generation-tracker.tsx               |  48 +++-----
 .../text-generation-viewer.tsx                |  58 ++++-----
 .../workflow/execution-history/index.tsx      |  40 ++----
 .../workflow-tracker/execution-bar.tsx        | 116 ++++++------------
 lib/stores/api-config-store.ts                |  10 +-
 20 files changed, 262 insertions(+), 606 deletions(-)

diff --git a/components/chatflow/chatflow-execution-bar.tsx b/components/chatflow/chatflow-execution-bar.tsx
index 6e4d9d06..1e38e57d 100644
--- a/components/chatflow/chatflow-execution-bar.tsx
+++ b/components/chatflow/chatflow-execution-bar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import type {
   ChatflowNode,
   ChatflowParallelBranch,
@@ -42,7 +41,6 @@ export function ChatflowExecutionBar({
   index,
   delay = 0,
 }: ChatflowExecutionBarProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.chatflow.executionBar');
   const [isVisible, setIsVisible] = useState(false);
   const [elapsedTime, setElapsedTime] = useState(0);
@@ -113,17 +111,14 @@ export function ChatflowExecutionBar({
           <Loader2
             className={cn(
               'h-4 w-4 animate-spin',
-              isDark ? 'text-stone-400' : 'text-stone-600'
+              'text-stone-600 dark:text-stone-400'
             )}
           />
         );
       case 'completed':
         return (
           <CheckCircle
-            className={cn(
-              'h-4 w-4',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
+            className={cn('h-4 w-4', 'text-stone-600 dark:text-stone-400')}
           />
         );
       case 'failed':
@@ -131,19 +126,13 @@ export function ChatflowExecutionBar({
       case 'pending':
         return (
           <Clock
-            className={cn(
-              'h-4 w-4',
-              isDark ? 'text-stone-500' : 'text-stone-400'
-            )}
+            className={cn('h-4 w-4', 'text-stone-400 dark:text-stone-500')}
           />
         );
       default:
         return (
           <AlertCircle
-            className={cn(
-              'h-4 w-4',
-              isDark ? 'text-stone-500' : 'text-stone-400'
-            )}
+            className={cn('h-4 w-4', 'text-stone-400 dark:text-stone-500')}
           />
         );
     }
@@ -247,7 +236,7 @@ export function ChatflowExecutionBar({
             // Use new indicator bar style
             node.isInIteration ? 'iteration-node' : 'loop-node',
             // Slight background color distinction
-            isDark ? 'bg-stone-800/20' : 'bg-stone-50/40'
+            'bg-stone-50/40 dark:bg-stone-800/20'
           )
         : '';
 
@@ -257,37 +246,27 @@ export function ChatflowExecutionBar({
       case 'running':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-600 bg-stone-700/50 shadow-lg shadow-stone-900/30'
-            : 'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50'
+          'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50 dark:shadow-lg dark:shadow-stone-900/30'
         );
       case 'completed':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-500 bg-stone-600/30'
-            : 'border-stone-300 bg-stone-100'
+          'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
         );
       case 'failed':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-red-700/50 bg-red-900/20'
-            : 'border-red-200 bg-red-50'
+          'border-red-200 bg-red-50 dark:border-red-700/50 dark:bg-red-900/20'
         );
       case 'pending':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
         );
       default:
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
         );
     }
   };
@@ -324,7 +303,7 @@ export function ChatflowExecutionBar({
             <span
               className={cn(
                 'flex-1 truncate font-serif text-sm font-medium',
-                isDark ? 'text-stone-200' : 'text-stone-800'
+                'text-stone-800 dark:text-stone-200'
               )}
             >
               {getNodeTitle()}
@@ -337,7 +316,7 @@ export function ChatflowExecutionBar({
                 <span
                   className={cn(
                     'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {(node.currentIteration || 0) + 1}/{node.totalIterations}
@@ -347,7 +326,7 @@ export function ChatflowExecutionBar({
                 <span
                   className={cn(
                     'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {node.completedBranches || 0}/{node.totalBranches}
@@ -357,7 +336,7 @@ export function ChatflowExecutionBar({
                 <span
                   className={cn(
                     'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {node.maxLoops
@@ -372,23 +351,15 @@ export function ChatflowExecutionBar({
                   node.status === 'running'
                     ? cn(
                         // Base style
-                        isDark
-                          ? 'bg-stone-600/40 text-stone-200'
-                          : 'bg-stone-300/60 text-stone-700',
+                        'bg-stone-300/60 text-stone-700 dark:bg-stone-600/40 dark:text-stone-200',
                         // Subtle pulse effect
                         'animate-pulse'
                       )
                     : node.status === 'completed'
-                      ? isDark
-                        ? 'bg-stone-500/40 text-stone-100'
-                        : 'bg-stone-200 text-stone-800'
+                      ? 'bg-stone-200 text-stone-800 dark:bg-stone-500/40 dark:text-stone-100'
                       : node.status === 'failed'
-                        ? isDark
-                          ? 'bg-red-700/30 text-red-200'
-                          : 'bg-red-100 text-red-700'
-                        : isDark
-                          ? 'bg-stone-700/50 text-stone-400'
-                          : 'bg-stone-200/80 text-stone-600'
+                        ? 'bg-red-100 text-red-700 dark:bg-red-700/30 dark:text-red-200'
+                        : 'bg-stone-200/80 text-stone-600 dark:bg-stone-700/50 dark:text-stone-400'
                 )}
               >
                 {getStatusText()}
@@ -404,7 +375,7 @@ export function ChatflowExecutionBar({
               <div
                 className={cn(
                   'font-serif text-xs',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
+                  'text-stone-500 dark:text-stone-400'
                 )}
               >
                 {formatTime(elapsedTime)}
@@ -435,7 +406,6 @@ export function ChatflowExecutionBar({
                 current={node.completedBranches || 0}
                 total={node.totalBranches}
                 type="branch"
-                isDark={isDark}
               />
             </div>
           )}
@@ -443,11 +413,7 @@ export function ChatflowExecutionBar({
           {/* Branch list */}
           <div className="space-y-1">
             {node.parallelBranches?.map(branch => (
-              <ParallelBranchItem
-                key={branch.id}
-                branch={branch}
-                isDark={isDark}
-              />
+              <ParallelBranchItem key={branch.id} branch={branch} />
             ))}
           </div>
         </div>
@@ -485,10 +451,9 @@ function CollapsibleContent({
 // --- 🎯 New: parallel branch item component ---
 interface ParallelBranchItemProps {
   branch: ChatflowParallelBranch;
-  isDark: boolean;
 }
 
-function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
+function ParallelBranchItem({ branch }: ParallelBranchItemProps) {
   const t = useTranslations('pages.chatflow.executionBar');
   const [elapsedTime, setElapsedTime] = useState(0);
 
@@ -531,13 +496,13 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
       className={cn(
         'ml-4 flex items-center gap-2 rounded-md border-l-2 px-3 py-2 font-serif',
         branch.status === 'running' &&
-          cn('border-l-stone-400', isDark ? 'bg-stone-800/20' : 'bg-stone-100'),
+          cn('border-l-stone-400', 'bg-stone-100 dark:bg-stone-800/20'),
         branch.status === 'completed' &&
-          cn('border-l-stone-500', isDark ? 'bg-stone-700/20' : 'bg-stone-50'),
+          cn('border-l-stone-500', 'bg-stone-50 dark:bg-stone-700/20'),
         branch.status === 'failed' &&
-          cn('border-l-red-500', isDark ? 'bg-red-900/20' : 'bg-red-50'),
+          cn('border-l-red-500', 'bg-red-50 dark:bg-red-900/20'),
         branch.status === 'pending' &&
-          cn('border-l-stone-300', isDark ? 'bg-stone-800/20' : 'bg-stone-50')
+          cn('border-l-stone-300', 'bg-stone-50 dark:bg-stone-800/20')
       )}
     >
       <div className="flex-shrink-0">
@@ -550,17 +515,12 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
           <span
             className={cn(
               'text-sm font-medium',
-              isDark ? 'text-stone-200' : 'text-stone-800'
+              'text-stone-800 dark:text-stone-200'
             )}
           >
             {t('branch.label')} {String.fromCharCode(65 + branch.index)}
           </span>
-          <span
-            className={cn(
-              'text-xs',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
-          >
+          <span className={cn('text-xs', 'text-stone-600 dark:text-stone-400')}>
             {branch.description || t('status.executing_')}
           </span>
         </div>
@@ -573,7 +533,7 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
           <span
             className={cn(
               'font-serif text-xs',
-              isDark ? 'text-stone-400' : 'text-stone-500'
+              'text-stone-500 dark:text-stone-400'
             )}
           >
             {formatTime(elapsedTime)}
@@ -589,10 +549,9 @@ interface ProgressBarProps {
   current: number;
   total: number;
   type: 'iteration' | 'branch';
-  isDark: boolean;
 }
 
-function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
+function ProgressBar({ current, total, type }: ProgressBarProps) {
   const t = useTranslations('pages.chatflow.executionBar');
   const percentage = total > 0 ? (current / total) * 100 : 0;
 
@@ -602,7 +561,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
         <span
           className={cn(
             'font-serif text-xs font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
+            'text-stone-700 dark:text-stone-300'
           )}
         >
           {type === 'iteration'
@@ -612,7 +571,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
         <span
           className={cn(
             'font-serif text-xs',
-            isDark ? 'text-stone-400' : 'text-stone-500'
+            'text-stone-500 dark:text-stone-400'
           )}
         >
           {current}/{total}
@@ -622,7 +581,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
       <div
         className={cn(
           'h-2 w-full overflow-hidden rounded-full',
-          isDark ? 'bg-stone-700' : 'bg-stone-200'
+          'bg-stone-200 dark:bg-stone-700'
         )}
       >
         <div
diff --git a/components/chatflow/chatflow-floating-controller.tsx b/components/chatflow/chatflow-floating-controller.tsx
index 556c0c7f..7c33a347 100644
--- a/components/chatflow/chatflow-floating-controller.tsx
+++ b/components/chatflow/chatflow-floating-controller.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { useChatflowExecutionStore } from '@lib/stores/chatflow-execution-store';
 import { cn } from '@lib/utils';
 import { Workflow } from 'lucide-react';
@@ -30,7 +29,6 @@ export function ChatflowFloatingController({
   onToggleTracker,
   className,
 }: ChatflowFloatingControllerProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.chatflow.floatingController');
 
   // Get execution status from store
@@ -61,9 +59,7 @@ export function ChatflowFloatingController({
           'h-12 w-12 rounded-full shadow-lg transition-all duration-200',
           'flex items-center justify-center',
           'hover:scale-105 hover:shadow-xl active:scale-95',
-          isDark
-            ? 'border border-stone-700 bg-stone-800 text-stone-200 hover:bg-stone-700'
-            : 'border border-stone-200 bg-white text-stone-700 hover:bg-stone-50'
+          'border border-stone-200 bg-white text-stone-700 hover:bg-stone-50 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200 dark:hover:bg-stone-700'
         )}
         title={isTrackerVisible ? t('hideTracker') : t('showTracker')}
       >
diff --git a/components/chatflow/chatflow-input-area.tsx b/components/chatflow/chatflow-input-area.tsx
index 459a5fe2..4f32cf81 100644
--- a/components/chatflow/chatflow-input-area.tsx
+++ b/components/chatflow/chatflow-input-area.tsx
@@ -5,7 +5,6 @@ import { FormField } from '@components/workflow/workflow-input-form/form-field';
 import { validateFormData } from '@components/workflow/workflow-input-form/validation';
 import { useChatWidth } from '@lib/hooks/use-chat-width';
 import { useCurrentApp } from '@lib/hooks/use-current-app';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import type { DifyUserInputFormItem } from '@lib/services/dify/types';
 import { cn } from '@lib/utils';
 import { Loader2, RotateCcw, Send, Workflow } from 'lucide-react';
@@ -44,7 +43,6 @@ export function ChatflowInputArea({
   className,
   onFormConfigChange,
 }: ChatflowInputAreaProps) {
-  const { isDark } = useThemeColors();
   const { widthClass, paddingClass } = useChatWidth();
   const { currentAppInstance } = useCurrentApp();
   const t = useTranslations('pages.chatflow');
@@ -308,13 +306,13 @@ export function ChatflowInputArea({
             <Loader2
               className={cn(
                 'mx-auto h-6 w-6 animate-spin',
-                isDark ? 'text-stone-400' : 'text-stone-500'
+                'text-stone-500 dark:text-stone-400'
               )}
             />
             <p
               className={cn(
                 'font-serif text-sm',
-                isDark ? 'text-stone-400' : 'text-stone-500'
+                'text-stone-500 dark:text-stone-400'
               )}
             >
               {t('loading.inputConfig')}
@@ -340,16 +338,14 @@ export function ChatflowInputArea({
         className={cn(
           'mx-auto max-w-2xl',
           'rounded-2xl shadow-xl backdrop-blur-xl transition-all duration-300',
-          isDark
-            ? 'border border-stone-700/60 bg-gradient-to-br from-stone-900/95 to-stone-800/95 shadow-stone-900/40 hover:shadow-stone-900/60'
-            : 'border border-stone-200/60 bg-gradient-to-br from-white/95 to-stone-50/95 shadow-stone-200/40 hover:shadow-2xl hover:shadow-stone-300/50'
+          'border border-stone-200/60 bg-gradient-to-br from-white/95 to-stone-50/95 shadow-stone-200/40 hover:shadow-2xl hover:shadow-stone-300/50 dark:border-stone-700/60 dark:bg-gradient-to-br dark:from-stone-900/95 dark:to-stone-800/95 dark:shadow-stone-900/40 dark:hover:shadow-stone-900/60'
         )}
       >
         {/* --- Form header --- */}
         <div
           className={cn(
             'border-b p-8 pb-6',
-            isDark ? 'border-stone-700/50' : 'border-stone-200/50'
+            'border-stone-200/50 dark:border-stone-700/50'
           )}
         >
           <div className="space-y-4 text-center">
@@ -357,16 +353,11 @@ export function ChatflowInputArea({
               className={cn(
                 'inline-flex h-16 w-16 items-center justify-center rounded-2xl',
                 'shadow-lg',
-                isDark
-                  ? 'border border-stone-600/50 bg-gradient-to-br from-stone-800 to-stone-700 shadow-stone-900/50'
-                  : 'border border-stone-300/50 bg-gradient-to-br from-stone-100 to-stone-200 shadow-stone-200/50'
+                'border border-stone-300/50 bg-gradient-to-br from-stone-100 to-stone-200 shadow-stone-200/50 dark:border-stone-600/50 dark:bg-gradient-to-br dark:from-stone-800 dark:to-stone-700 dark:shadow-stone-900/50'
               )}
             >
               <Workflow
-                className={cn(
-                  'h-7 w-7',
-                  isDark ? 'text-stone-300' : 'text-stone-600'
-                )}
+                className={cn('h-7 w-7', 'text-stone-600 dark:text-stone-300')}
               />
             </div>
 
@@ -374,7 +365,7 @@ export function ChatflowInputArea({
               <h1
                 className={cn(
                   'font-serif text-2xl font-bold',
-                  isDark ? 'text-stone-200' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-200'
                 )}
               >
                 {currentAppInstance?.display_name || t('form.defaultAppName')}
@@ -382,7 +373,7 @@ export function ChatflowInputArea({
               <p
                 className={cn(
                   'mx-auto max-w-md font-serif leading-relaxed',
-                  isDark ? 'text-stone-400' : 'text-stone-600'
+                  'text-stone-600 dark:text-stone-400'
                 )}
               >
                 {currentAppInstance?.description ||
@@ -406,7 +397,7 @@ export function ChatflowInputArea({
               <label
                 className={cn(
                   'font-serif text-base font-semibold',
-                  isDark ? 'text-stone-200' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-200'
                 )}
               >
                 {t('form.question.label')}{' '}
@@ -430,9 +421,7 @@ export function ChatflowInputArea({
                   'focus:shadow-lg focus:shadow-stone-500/25',
                   errors.query
                     ? 'border-red-400 focus:border-red-500 focus:ring-red-500/20'
-                    : isDark
-                      ? 'border-stone-600 bg-stone-800/80 text-stone-100 group-hover:border-stone-500 placeholder:text-stone-400 focus:bg-stone-800'
-                      : 'border-stone-300 bg-white/80 text-stone-900 group-hover:border-stone-400 placeholder:text-stone-500 focus:bg-white'
+                    : 'border-stone-300 bg-white/80 text-stone-900 group-hover:border-stone-400 placeholder:text-stone-500 focus:bg-white dark:border-stone-600 dark:bg-stone-800/80 dark:text-stone-100 dark:group-hover:border-stone-500 dark:placeholder:text-stone-400 dark:focus:bg-stone-800'
                 )}
                 disabled={isProcessing || isWaiting}
               />
@@ -441,7 +430,7 @@ export function ChatflowInputArea({
                 <div
                   className={cn(
                     'mt-3 flex items-center gap-2',
-                    isDark ? 'text-red-400' : 'text-red-600'
+                    'text-red-600 dark:text-red-400'
                   )}
                 >
                   <div className="h-1 w-1 rounded-full bg-red-500" />
@@ -459,15 +448,13 @@ export function ChatflowInputArea({
                 <div
                   className={cn(
                     'h-px flex-1 bg-gradient-to-r from-transparent to-transparent',
-                    isDark ? 'via-stone-600' : 'via-stone-300'
+                    'via-stone-300 dark:via-stone-600'
                   )}
                 />
                 <span
                   className={cn(
                     'rounded-full border px-4 py-2 font-serif text-sm',
-                    isDark
-                      ? 'border-stone-700 bg-stone-800 text-stone-400'
-                      : 'border-stone-200 bg-stone-100 text-stone-600'
+                    'border-stone-200 bg-stone-100 text-stone-600 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-400'
                   )}
                 >
                   {t('form.additionalInfo')}
@@ -475,7 +462,7 @@ export function ChatflowInputArea({
                 <div
                   className={cn(
                     'h-px flex-1 bg-gradient-to-r from-transparent to-transparent',
-                    isDark ? 'via-stone-600' : 'via-stone-300'
+                    'via-stone-300 dark:via-stone-600'
                   )}
                 />
               </div>
@@ -495,18 +482,14 @@ export function ChatflowInputArea({
                         key={`${fieldConfig.variable}-${index}`}
                         className={cn(
                           'group relative rounded-xl p-6 transition-all duration-300',
-                          isDark
-                            ? 'border border-stone-600/60 bg-gradient-to-br from-stone-800/80 to-stone-700/80 hover:border-stone-500 hover:shadow-lg hover:shadow-stone-900/50'
-                            : 'border border-stone-200/60 bg-gradient-to-br from-stone-50/80 to-white/80 hover:border-stone-300 hover:shadow-lg hover:shadow-stone-200/50'
+                          'border border-stone-200/60 bg-gradient-to-br from-stone-50/80 to-white/80 hover:border-stone-300 hover:shadow-lg hover:shadow-stone-200/50 dark:border-stone-600/60 dark:bg-gradient-to-br dark:from-stone-800/80 dark:to-stone-700/80 dark:hover:border-stone-500 dark:hover:shadow-lg dark:hover:shadow-stone-900/50'
                         )}
                       >
                         {/* Field decoration line */}
                         <div
                           className={cn(
                             'absolute top-0 left-6 h-1 w-12 rounded-full transition-all duration-300 group-hover:w-16',
-                            isDark
-                              ? 'bg-gradient-to-r from-stone-500 to-stone-600'
-                              : 'bg-gradient-to-r from-stone-400 to-stone-300'
+                            'bg-gradient-to-r from-stone-400 to-stone-300 dark:bg-gradient-to-r dark:from-stone-500 dark:to-stone-600'
                           )}
                         />
 
@@ -552,7 +535,7 @@ export function ChatflowInputArea({
           <div
             className={cn(
               'border-t pt-6',
-              isDark ? 'border-stone-700/50' : 'border-stone-200/50'
+              'border-stone-200/50 dark:border-stone-700/50'
             )}
           >
             <div className="flex flex-col gap-4 sm:flex-row">
@@ -571,9 +554,7 @@ export function ChatflowInputArea({
                 className={cn(
                   'flex items-center justify-center gap-3 rounded-xl px-6 py-3',
                   'border-2 font-serif text-sm font-medium backdrop-blur-sm transition-all duration-300',
-                  isDark
-                    ? 'border-stone-600 bg-stone-800/80 text-stone-300'
-                    : 'border-stone-300 bg-white/80 text-stone-700',
+                  'border-stone-300 bg-white/80 text-stone-700 dark:border-stone-600 dark:bg-stone-800/80 dark:text-stone-300',
                   isProcessing ||
                     isWaiting ||
                     (!query &&
@@ -583,9 +564,7 @@ export function ChatflowInputArea({
                     ? 'cursor-not-allowed opacity-50'
                     : cn(
                         'transform active:scale-[0.98]',
-                        isDark
-                          ? 'hover:border-stone-500 hover:bg-stone-700 hover:shadow-lg hover:shadow-stone-900/50'
-                          : 'hover:border-stone-400 hover:bg-stone-50 hover:shadow-lg hover:shadow-stone-200/50'
+                        'hover:border-stone-400 hover:bg-stone-50 hover:shadow-lg hover:shadow-stone-200/50 dark:hover:border-stone-500 dark:hover:bg-stone-700 dark:hover:shadow-lg dark:hover:shadow-stone-900/50'
                       )
                 )}
               >
@@ -600,16 +579,12 @@ export function ChatflowInputArea({
                 className={cn(
                   'flex flex-1 items-center justify-center gap-3 rounded-xl px-8 py-4',
                   'font-serif text-base font-semibold text-white shadow-lg transition-all duration-300',
-                  isDark
-                    ? 'bg-gradient-to-r from-stone-700 to-stone-600 shadow-stone-900/50'
-                    : 'bg-gradient-to-r from-stone-800 to-stone-700 shadow-stone-800/25',
+                  'bg-gradient-to-r from-stone-800 to-stone-700 shadow-stone-800/25 dark:bg-gradient-to-r dark:from-stone-700 dark:to-stone-600 dark:shadow-stone-900/50',
                   isProcessing || isWaiting || !canSubmit()
                     ? 'cursor-not-allowed opacity-50'
                     : cn(
                         'transform hover:scale-[1.02] active:scale-[0.98]',
-                        isDark
-                          ? 'hover:from-stone-600 hover:to-stone-500 hover:shadow-xl hover:shadow-stone-900/60'
-                          : 'hover:from-stone-700 hover:to-stone-600 hover:shadow-xl hover:shadow-stone-800/30'
+                        'hover:from-stone-700 hover:to-stone-600 hover:shadow-xl hover:shadow-stone-800/30 dark:hover:from-stone-600 dark:hover:to-stone-500 dark:hover:shadow-xl dark:hover:shadow-stone-900/60'
                       )
                 )}
               >
@@ -632,9 +607,7 @@ export function ChatflowInputArea({
               <div
                 className={cn(
                   'mt-6 rounded-xl border p-4 shadow-lg',
-                  isDark
-                    ? 'border-red-700/50 bg-gradient-to-r from-red-900/20 to-red-800/20 shadow-red-900/20'
-                    : 'border-red-200 bg-gradient-to-r from-red-50 to-red-100/50 shadow-red-100/50'
+                  'border-red-200 bg-gradient-to-r from-red-50 to-red-100/50 shadow-red-100/50 dark:border-red-700/50 dark:bg-gradient-to-r dark:from-red-900/20 dark:to-red-800/20 dark:shadow-red-900/20'
                 )}
               >
                 <div className="flex items-center gap-3">
@@ -642,7 +615,7 @@ export function ChatflowInputArea({
                   <p
                     className={cn(
                       'font-serif text-sm',
-                      isDark ? 'text-red-300' : 'text-red-700'
+                      'text-red-700 dark:text-red-300'
                     )}
                   >
                     {t('form.checkAndCorrectErrors')}
diff --git a/components/chatflow/chatflow-node-tracker.tsx b/components/chatflow/chatflow-node-tracker.tsx
index d3b72a27..9e3a425d 100644
--- a/components/chatflow/chatflow-node-tracker.tsx
+++ b/components/chatflow/chatflow-node-tracker.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { useChatflowExecutionStore } from '@lib/stores/chatflow-execution-store';
 import { cn } from '@lib/utils';
 import { Loader2, Workflow } from 'lucide-react';
@@ -30,7 +29,6 @@ export function ChatflowNodeTracker({
   isVisible,
   className,
 }: ChatflowNodeTrackerProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.chatflow.nodeTracker');
 
   // Get node status from store
@@ -114,28 +112,23 @@ export function ChatflowNodeTracker({
           'space-y-3 rounded-lg border p-4',
           // Limit actual width to avoid conflict with chat content
           'max-w-[320px] min-w-[280px]',
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50 backdrop-blur-sm'
-            : 'border-stone-200 bg-white/80 backdrop-blur-sm'
+          'border-stone-200 bg-white/80 backdrop-blur-sm dark:border-stone-700/50 dark:bg-stone-800/50'
         )}
       >
         {/* Title bar */}
         <div
           className={cn(
             'flex items-center gap-2 border-b pb-2',
-            isDark ? 'border-stone-700/50' : 'border-stone-200/50'
+            'border-stone-200/50 dark:border-stone-700/50'
           )}
         >
           <Workflow
-            className={cn(
-              'h-4 w-4',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
+            className={cn('h-4 w-4', 'text-stone-600 dark:text-stone-400')}
           />
           <span
             className={cn(
               'font-serif text-sm font-medium',
-              isDark ? 'text-stone-200' : 'text-stone-800'
+              'text-stone-800 dark:text-stone-200'
             )}
           >
             {t('title')}
@@ -151,23 +144,21 @@ export function ChatflowNodeTracker({
             <div
               className={cn(
                 'flex items-center gap-3 rounded-lg border-2 border-dashed px-4 py-3',
-                isDark
-                  ? 'border-stone-600 bg-stone-800/30'
-                  : 'border-stone-300 bg-stone-50'
+                'border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-800/30'
               )}
             >
               {isExecuting ? (
                 <Loader2
                   className={cn(
                     'h-4 w-4 animate-spin',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 />
               ) : (
                 <Workflow
                   className={cn(
                     'h-4 w-4',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 />
               )}
@@ -175,7 +166,7 @@ export function ChatflowNodeTracker({
                 <div
                   className={cn(
                     'font-serif text-sm font-medium',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {isExecuting ? t('starting') : t('noRecords')}
@@ -183,7 +174,7 @@ export function ChatflowNodeTracker({
                 <div
                   className={cn(
                     'font-serif text-xs',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 >
                   {isExecuting ? t('waitingUpdate') : t('showProgress')}
@@ -208,9 +199,7 @@ export function ChatflowNodeTracker({
           <div
             className={cn(
               'mt-3 rounded-lg border p-3',
-              isDark
-                ? 'border-red-700/50 bg-red-900/20 text-red-200'
-                : 'border-red-200 bg-red-50 text-red-700'
+              'border-red-200 bg-red-50 text-red-700 dark:border-red-700/50 dark:bg-red-900/20 dark:text-red-200'
             )}
           >
             <div className="font-serif text-sm">
diff --git a/components/file-preview/previews/audio-preview.tsx b/components/file-preview/previews/audio-preview.tsx
index 9ed2eff2..39d2a055 100644
--- a/components/file-preview/previews/audio-preview.tsx
+++ b/components/file-preview/previews/audio-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn, formatBytes } from '@lib/utils';
 import { DownloadIcon, MusicIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview');
   const audioRef = useRef<HTMLAudioElement>(null);
   const [audioUrl, setAudioUrl] = useState<string>('');
@@ -64,9 +62,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
           onClick={onDownload}
           className={cn(
             'inline-flex items-center space-x-2 rounded-md px-4 py-2 text-sm font-medium transition-colors',
-            isDark
-              ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-              : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+            'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
           )}
         >
           <DownloadIcon className="h-4 w-4" />
@@ -78,24 +74,19 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
       <div
         className={cn(
           'rounded-lg border p-6',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         {/* Filename Display */}
         <div className="mb-4 flex items-center space-x-3">
           <MusicIcon
-            className={cn(
-              'h-8 w-8',
-              isDark ? 'text-stone-400' : 'text-stone-500'
-            )}
+            className={cn('h-8 w-8', 'text-stone-500 dark:text-stone-400')}
           />
           <div>
             <p
               className={cn(
                 'truncate font-medium',
-                isDark ? 'text-stone-200' : 'text-stone-800'
+                'text-stone-800 dark:text-stone-200'
               )}
               title={filename}
             >
@@ -103,10 +94,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
             </p>
             {duration > 0 && (
               <p
-                className={cn(
-                  'text-sm',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
-                )}
+                className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}
               >
                 {formatTime(duration)}
               </p>
@@ -120,10 +108,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
             <div className="flex items-center space-x-2">
               <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>
               <span
-                className={cn(
-                  'text-sm',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
-                )}
+                className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}
               >
                 {t('loading')}
               </span>
@@ -134,12 +119,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
         {/* Error State */}
         {hasError && (
           <div className="flex items-center justify-center py-8">
-            <p
-              className={cn(
-                'text-sm',
-                isDark ? 'text-red-400' : 'text-red-600'
-              )}
-            >
+            <p className={cn('text-sm', 'text-red-600 dark:text-red-400')}>
               {t('audio.loadError')}
             </p>
           </div>
@@ -165,9 +145,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
       <div
         className={cn(
           'rounded-md border p-4 text-sm',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         <div className="space-y-1">
diff --git a/components/file-preview/previews/image-preview.tsx b/components/file-preview/previews/image-preview.tsx
index a4ba2201..aa61a7d7 100644
--- a/components/file-preview/previews/image-preview.tsx
+++ b/components/file-preview/previews/image-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { DownloadIcon, ImageIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview.imagePreview');
   const [imageUrl, setImageUrl] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
@@ -51,17 +49,14 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <div className="animate-pulse space-y-4">
         <div className="flex items-center space-x-2">
           <ImageIcon
-            className={cn(
-              'h-5 w-5',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
+            className={cn('h-5 w-5', 'text-stone-600 dark:text-stone-400')}
           />
           <h3 className="text-lg font-semibold">{t('title')}</h3>
         </div>
         <div
           className={cn(
             'aspect-video w-full rounded-md',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
+            'bg-stone-200 dark:bg-stone-700'
           )}
         />
       </div>
@@ -73,10 +68,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2">
           <ImageIcon
-            className={cn(
-              'h-5 w-5',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
+            className={cn('h-5 w-5', 'text-stone-600 dark:text-stone-400')}
           />
           <h3 className="text-lg font-semibold">{t('title')}</h3>
         </div>
@@ -84,9 +76,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
           onClick={onDownload}
           className={cn(
             'inline-flex items-center space-x-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
-            isDark
-              ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-              : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+            'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
           )}
         >
           <DownloadIcon className="h-4 w-4" />
@@ -97,16 +87,14 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <div
         className={cn(
           'overflow-hidden rounded-md border',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         {hasError ? (
           <div
             className={cn(
               'flex flex-col items-center justify-center space-y-2 py-8',
-              isDark ? 'text-stone-400' : 'text-stone-600'
+              'text-stone-600 dark:text-stone-400'
             )}
           >
             <ImageIcon className="h-12 w-12 opacity-50" />
@@ -115,7 +103,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
               onClick={onDownload}
               className={cn(
                 'text-sm underline hover:no-underline',
-                isDark ? 'text-stone-300' : 'text-stone-700'
+                'text-stone-700 dark:text-stone-300'
               )}
             >
               {t('downloadToView')}
@@ -137,9 +125,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <div
         className={cn(
           'rounded-md border p-3 text-sm',
-          isDark
-            ? 'border-stone-700 bg-stone-800 text-stone-300'
-            : 'border-stone-200 bg-stone-50 text-stone-700'
+          'border-stone-200 bg-stone-50 text-stone-700 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300'
         )}
       >
         <div className="space-y-1">
diff --git a/components/file-preview/previews/markdown-preview.tsx b/components/file-preview/previews/markdown-preview.tsx
index 4e8ed871..eefcc0ad 100644
--- a/components/file-preview/previews/markdown-preview.tsx
+++ b/components/file-preview/previews/markdown-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { CodeIcon, DownloadIcon, EyeIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview.markdownPreview');
   const [markdown, setMarkdown] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
@@ -43,23 +41,12 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
   if (isLoading) {
     return (
       <div className="animate-pulse space-y-3">
+        <div className={cn('h-4 rounded', 'bg-stone-200 dark:bg-stone-700')} />
         <div
-          className={cn(
-            'h-4 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
+          className={cn('h-4 w-3/4 rounded', 'bg-stone-200 dark:bg-stone-700')}
         />
         <div
-          className={cn(
-            'h-4 w-3/4 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
-        />
-        <div
-          className={cn(
-            'h-4 w-1/2 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
+          className={cn('h-4 w-1/2 rounded', 'bg-stone-200 dark:bg-stone-700')}
         />
       </div>
     );
@@ -95,7 +82,7 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
           <div
             className={cn(
               'inline-flex rounded-md',
-              isDark ? 'bg-stone-800' : 'bg-stone-100'
+              'bg-stone-100 dark:bg-stone-800'
             )}
           >
             <button
@@ -103,12 +90,8 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
               className={cn(
                 'inline-flex items-center space-x-1 rounded-l-md px-2 py-1 text-xs font-medium transition-colors',
                 viewMode === 'rendered'
-                  ? isDark
-                    ? 'bg-stone-600 text-stone-200'
-                    : 'bg-stone-300 text-stone-800'
-                  : isDark
-                    ? 'text-stone-400 hover:text-stone-300'
-                    : 'text-stone-600 hover:text-stone-700'
+                  ? 'bg-stone-300 text-stone-800 dark:bg-stone-600 dark:text-stone-200'
+                  : 'text-stone-600 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-300'
               )}
             >
               <EyeIcon className="h-3 w-3" />
@@ -119,12 +102,8 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
               className={cn(
                 'inline-flex items-center space-x-1 rounded-r-md px-2 py-1 text-xs font-medium transition-colors',
                 viewMode === 'raw'
-                  ? isDark
-                    ? 'bg-stone-600 text-stone-200'
-                    : 'bg-stone-300 text-stone-800'
-                  : isDark
-                    ? 'text-stone-400 hover:text-stone-300'
-                    : 'text-stone-600 hover:text-stone-700'
+                  ? 'bg-stone-300 text-stone-800 dark:bg-stone-600 dark:text-stone-200'
+                  : 'text-stone-600 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-300'
               )}
             >
               <CodeIcon className="h-3 w-3" />
@@ -135,9 +114,8 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
             onClick={onDownload}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300',
+              'dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('downloadButton')}
           >
@@ -151,17 +129,13 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
       <div
         className={cn(
           'min-h-[60vh] flex-1 overflow-auto rounded-md border p-4',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50',
+          'dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         {viewMode === 'rendered' ? (
           <div
-            className={cn(
-              'prose prose-sm max-w-none',
-              isDark ? 'prose-invert' : ''
-            )}
+            className={cn('prose prose-sm max-w-none', 'dark:prose-invert')}
             dangerouslySetInnerHTML={{
               __html: renderMarkdown(markdown),
             }}
@@ -170,7 +144,7 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
           <pre
             className={cn(
               'font-mono text-sm break-words whitespace-pre-wrap',
-              isDark ? 'text-stone-200' : 'text-stone-800'
+              'text-stone-800 dark:text-stone-200'
             )}
           >
             {markdown}
@@ -182,7 +156,7 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
       <div
         className={cn(
           'flex-shrink-0 text-xs',
-          isDark ? 'text-stone-400' : 'text-stone-500'
+          'text-stone-500 dark:text-stone-400'
         )}
       >
         {filename} • Markdown Document •{' '}
diff --git a/components/file-preview/previews/pdf-preview.tsx b/components/file-preview/previews/pdf-preview.tsx
index 112d2957..f8ee9185 100644
--- a/components/file-preview/previews/pdf-preview.tsx
+++ b/components/file-preview/previews/pdf-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { DownloadIcon, ExternalLinkIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview.pdfPreview');
   const [pdfUrl, setPdfUrl] = useState<string>('');
 
@@ -48,9 +46,8 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
             onClick={handleOpenInNewTab}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300',
+              'dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('openButton')}
           >
@@ -61,9 +58,8 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
             onClick={onDownload}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300',
+              'dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('downloadButton')}
           >
@@ -77,7 +73,7 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
       <div
         className={cn(
           'relative w-full overflow-hidden rounded-md border',
-          isDark ? 'border-stone-700' : 'border-stone-200'
+          'border-stone-200 dark:border-stone-700'
         )}
       >
         {pdfUrl ? (
@@ -91,9 +87,8 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
           <div
             className={cn(
               'flex h-96 items-center justify-center',
-              isDark
-                ? 'bg-stone-800 text-stone-400'
-                : 'bg-stone-50 text-stone-600'
+              'bg-stone-50 text-stone-600',
+              'dark:bg-stone-800 dark:text-stone-400'
             )}
           >
             Loading PDF...
@@ -102,9 +97,7 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
       </div>
 
       {/* File info */}
-      <div
-        className={cn('text-xs', isDark ? 'text-stone-400' : 'text-stone-500')}
-      >
+      <div className={cn('text-xs', 'text-stone-500 dark:text-stone-400')}>
         {filename} • PDF Document •{' '}
         {t('fileSize', { size: (content.size / 1024 / 1024).toFixed(2) })}
       </div>
diff --git a/components/file-preview/previews/text-preview.tsx b/components/file-preview/previews/text-preview.tsx
index 53170b89..2af8a986 100644
--- a/components/file-preview/previews/text-preview.tsx
+++ b/components/file-preview/previews/text-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { CopyIcon, DownloadIcon } from 'lucide-react';
 
@@ -21,7 +20,6 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
   contentType,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview.textPreview');
   const [text, setText] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
@@ -55,23 +53,12 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
   if (isLoading) {
     return (
       <div className="animate-pulse space-y-3">
+        <div className={cn('h-4 rounded', 'bg-stone-200 dark:bg-stone-700')} />
         <div
-          className={cn(
-            'h-4 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
-        />
-        <div
-          className={cn(
-            'h-4 w-3/4 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
+          className={cn('h-4 w-3/4 rounded', 'bg-stone-200 dark:bg-stone-700')}
         />
         <div
-          className={cn(
-            'h-4 w-1/2 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
+          className={cn('h-4 w-1/2 rounded', 'bg-stone-200 dark:bg-stone-700')}
         />
       </div>
     );
@@ -87,9 +74,7 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
             onClick={handleCopy}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('copyButton')}
           >
@@ -100,9 +85,7 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
             onClick={onDownload}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('downloadButton')}
           >
@@ -116,15 +99,13 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
       <div
         className={cn(
           'min-h-[60vh] flex-1 overflow-auto rounded-md border p-4',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         <pre
           className={cn(
             'font-mono text-sm break-words whitespace-pre-wrap',
-            isDark ? 'text-stone-200' : 'text-stone-800'
+            'text-stone-800 dark:text-stone-200'
           )}
         >
           {text}
@@ -135,7 +116,7 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
       <div
         className={cn(
           'flex-shrink-0 text-xs',
-          isDark ? 'text-stone-400' : 'text-stone-500'
+          'text-stone-500 dark:text-stone-400'
         )}
       >
         {filename} • {contentType} •{' '}
diff --git a/components/file-preview/previews/video-preview.tsx b/components/file-preview/previews/video-preview.tsx
index e95ad553..98defe92 100644
--- a/components/file-preview/previews/video-preview.tsx
+++ b/components/file-preview/previews/video-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn, formatBytes } from '@lib/utils';
 import { DownloadIcon, VideoIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview');
   const videoRef = useRef<HTMLVideoElement>(null);
   const [videoUrl, setVideoUrl] = useState<string>('');
@@ -77,9 +75,7 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
           onClick={onDownload}
           className={cn(
             'inline-flex items-center space-x-2 rounded-md px-4 py-2 text-sm font-medium transition-colors',
-            isDark
-              ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-              : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+            'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
           )}
         >
           <DownloadIcon className="h-4 w-4" />
@@ -91,28 +87,22 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
       <div
         className={cn(
           'overflow-hidden rounded-lg border',
-          isDark ? 'border-stone-700' : 'border-stone-200'
+          'border-stone-200 dark:border-stone-700'
         )}
       >
         {isLoading && (
           <div
             className={cn(
               'flex h-64 items-center justify-center',
-              isDark ? 'bg-stone-800' : 'bg-stone-100'
+              'bg-stone-100 dark:bg-stone-800'
             )}
           >
             <div className="flex items-center space-x-2">
               <VideoIcon
-                className={cn(
-                  'h-6 w-6',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
-                )}
+                className={cn('h-6 w-6', 'text-stone-500 dark:text-stone-400')}
               />
               <span
-                className={cn(
-                  'text-sm',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
-                )}
+                className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}
               >
                 {t('loading')}
               </span>
@@ -124,21 +114,13 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
           <div
             className={cn(
               'flex h-64 flex-col items-center justify-center space-y-2',
-              isDark ? 'bg-stone-800' : 'bg-stone-100'
+              'bg-stone-100 dark:bg-stone-800'
             )}
           >
             <VideoIcon
-              className={cn(
-                'h-12 w-12',
-                isDark ? 'text-stone-500' : 'text-stone-400'
-              )}
+              className={cn('h-12 w-12', 'text-stone-400 dark:text-stone-500')}
             />
-            <p
-              className={cn(
-                'text-sm',
-                isDark ? 'text-stone-400' : 'text-stone-500'
-              )}
-            >
+            <p className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}>
               {t('video.loadError')}
             </p>
           </div>
@@ -153,7 +135,7 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
             onError={handleVideoError}
             className={cn(
               'max-h-96 w-full object-contain',
-              isDark ? 'bg-stone-900' : 'bg-stone-50',
+              'bg-stone-50 dark:bg-stone-900',
               isLoading || hasError ? 'hidden' : 'block'
             )}
             preload="metadata"
@@ -167,9 +149,7 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
       <div
         className={cn(
           'rounded-md border p-4 text-sm',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         <div className="space-y-1">
diff --git a/components/history/history-list.tsx b/components/history/history-list.tsx
index 739526ef..e9d892db 100644
--- a/components/history/history-list.tsx
+++ b/components/history/history-list.tsx
@@ -7,7 +7,6 @@ import {
   DateFormatPresets,
   useDateFormatter,
 } from '@lib/hooks/use-date-formatter';
-import { useTheme } from '@lib/hooks/use-theme';
 import { useDropdownStore } from '@lib/stores/ui/dropdown-store';
 import { Conversation } from '@lib/types/database';
 import { cn } from '@lib/utils';
@@ -76,7 +75,6 @@ export function HistoryList({
   selectedConversations = new Set(),
   onSelectConversation,
 }: HistoryListProps): React.ReactElement {
-  const { isDark } = useTheme();
   const t = useTranslations('history');
   const { formatDate } = useDateFormatter();
 
@@ -198,19 +196,13 @@ export function HistoryList({
           // In selection mode, selected items have different styling
           isSelectionMode &&
             isSelected &&
-            (isDark
-              ? 'border-stone-500 bg-stone-700/40'
-              : 'border-stone-400 bg-stone-100'),
+            'border-stone-400 bg-stone-100 dark:border-stone-500 dark:bg-stone-700/40',
           // Normal hover styling
           !isSelected &&
-            (isDark
-              ? 'border border-stone-600 hover:border-stone-500 hover:bg-stone-700/50'
-              : 'border border-stone-300 hover:border-stone-400 hover:bg-stone-200/70'),
+            'border border-stone-300 hover:border-stone-400 hover:bg-stone-200/70 dark:border-stone-600 dark:hover:border-stone-500 dark:hover:bg-stone-700/50',
           // Selected state border
-          isSelected &&
-            (isDark ? 'border border-stone-500' : 'border border-stone-400'),
-          !isSelected &&
-            (isDark ? 'border border-stone-600' : 'border border-stone-300'),
+          isSelected && 'border border-stone-400 dark:border-stone-500',
+          !isSelected && 'border border-stone-300 dark:border-stone-600',
           'mb-3'
         )}
         onClick={handleItemClick}
@@ -225,12 +217,8 @@ export function HistoryList({
                 'transition-all duration-200 ease-in-out',
                 'hover:scale-110',
                 isSelected
-                  ? isDark
-                    ? 'border-stone-600 bg-stone-600 text-white'
-                    : 'border-stone-500 bg-stone-500 text-white'
-                  : isDark
-                    ? 'border-stone-600 hover:border-stone-500'
-                    : 'border-stone-400 hover:border-stone-500'
+                  ? 'border-stone-500 bg-stone-500 text-white dark:border-stone-600 dark:bg-stone-600'
+                  : 'border-stone-400 hover:border-stone-500 dark:border-stone-600 dark:hover:border-stone-500'
               )}
             >
               {isSelected && (
@@ -257,19 +245,14 @@ export function HistoryList({
             <h3
               className={cn(
                 'truncate font-serif text-base font-medium',
-                isDark ? 'text-stone-100' : 'text-stone-800'
+                'text-stone-800 dark:text-stone-100'
               )}
             >
               {title}
             </h3>
 
             <div className="flex items-center">
-              <span
-                className={cn(
-                  'font-serif text-xs',
-                  isDark ? 'text-stone-500' : 'text-stone-500'
-                )}
-              >
+              <span className={cn('font-serif text-xs text-stone-500')}>
                 {date}
               </span>
 
@@ -297,9 +280,9 @@ export function HistoryList({
                     className={cn(
                       'rounded-md p-1 transition-all duration-200 ease-in-out',
                       'cursor-pointer',
-                      isDark ? 'hover:bg-white/10' : 'hover:bg-black/5',
+                      'hover:bg-black/5 dark:hover:bg-white/10',
                       'hover:scale-110',
-                      isDark ? 'active:bg-white/20' : 'active:bg-black/10',
+                      'active:bg-black/10 dark:active:bg-white/20',
                       'focus-visible:ring-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
                     )}
                     data-more-button-id={`history-dropdown-${conversation.id}`}
@@ -313,9 +296,7 @@ export function HistoryList({
                     id={`history-dropdown-${conversation.id}`}
                     minWidth={150}
                     className={cn(
-                      isDark
-                        ? 'border border-stone-700 bg-stone-800'
-                        : 'border border-stone-200 bg-white',
+                      'border border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800',
                       'overflow-hidden rounded-md shadow-lg' // Add shadow and rounded corners
                     )}
                   >
@@ -344,7 +325,7 @@ export function HistoryList({
           <p
             className={cn(
               'line-clamp-2 font-serif text-sm',
-              isDark ? 'text-stone-400' : 'text-stone-600'
+              'text-stone-600 dark:text-stone-400'
             )}
           >
             {preview}
@@ -362,7 +343,7 @@ export function HistoryList({
         <div
           className={cn(
             'flex h-full flex-col items-center justify-center py-16',
-            isDark ? 'text-stone-400' : 'text-stone-500'
+            'text-stone-500 dark:text-stone-400'
           )}
         >
           {searchQuery ? (
@@ -389,9 +370,7 @@ export function HistoryList({
             <div
               className={cn(
                 'mt-4 flex items-center justify-center border-t py-6',
-                isDark
-                  ? 'border-stone-600 text-stone-500'
-                  : 'border-stone-300 text-stone-500'
+                'border-stone-300 text-stone-500 dark:border-stone-600'
               )}
             >
               <Clock className="mr-2 h-4 w-4" />
diff --git a/components/history/history-selection-bar.tsx b/components/history/history-selection-bar.tsx
index c3539062..01b2b46a 100644
--- a/components/history/history-selection-bar.tsx
+++ b/components/history/history-selection-bar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { CheckSquare, Square, Trash2, X } from 'lucide-react';
 
@@ -31,7 +30,6 @@ export function HistorySelectionBar({
   onCancelSelection,
   isDeleting = false,
 }: HistorySelectionBarProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('history');
 
   // If not in selection mode and no items are selected, do not display the operation bar
@@ -48,9 +46,7 @@ export function HistorySelectionBar({
         'sticky top-0 z-10 transition-all duration-300 ease-in-out',
         'mb-4 rounded-xl backdrop-blur-sm',
         'bg-gradient-to-r',
-        isDark
-          ? 'border border-stone-600/50 from-stone-800/95 via-stone-800/90 to-stone-800/95 shadow-lg shadow-stone-900/20'
-          : 'border border-stone-200/80 from-stone-50/95 via-white/90 to-stone-50/95 shadow-lg shadow-stone-900/10'
+        'border border-stone-200/80 from-stone-50/95 via-white/90 to-stone-50/95 shadow-lg shadow-stone-900/10 dark:border-stone-600/50 dark:from-stone-800/95 dark:via-stone-800/90 dark:to-stone-800/95 dark:shadow-stone-900/20'
       )}
     >
       <div className="px-6 py-2.5">
@@ -65,9 +61,7 @@ export function HistorySelectionBar({
                 'transition-all duration-200 ease-in-out',
                 'font-serif text-sm font-medium',
                 'hover:scale-105 hover:shadow-md',
-                isDark
-                  ? 'border border-stone-600 text-stone-300 hover:bg-stone-700'
-                  : 'border border-stone-300 text-stone-600 hover:bg-stone-200'
+                'border border-stone-300 text-stone-600 hover:bg-stone-200 dark:border-stone-600 dark:text-stone-300 dark:hover:bg-stone-700'
               )}
               disabled={totalCount === 0}
             >
@@ -84,7 +78,7 @@ export function HistorySelectionBar({
               <div
                 className={cn(
                   'font-serif text-xs',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
+                  'text-stone-500 dark:text-stone-400'
                 )}
               >
                 {t('selected', { count: selectedCount, total: totalCount })}
@@ -105,9 +99,7 @@ export function HistorySelectionBar({
                   'font-serif text-sm font-medium',
                   'hover:scale-105 hover:shadow-lg',
                   isDeleting && 'cursor-not-allowed opacity-50',
-                  isDark
-                    ? 'border border-red-800 bg-red-900/40 text-red-300 shadow-md shadow-red-900/20 hover:bg-red-900/60'
-                    : 'border border-red-300 bg-red-50 text-red-700 shadow-md shadow-red-900/10 hover:bg-red-100'
+                  'border border-red-300 bg-red-50 text-red-700 shadow-md shadow-red-900/10 hover:bg-red-100 dark:border-red-800 dark:bg-red-900/40 dark:text-red-300 dark:shadow-red-900/20 dark:hover:bg-red-900/60'
                 )}
               >
                 <Trash2 className="h-3.5 w-3.5" />
@@ -127,9 +119,7 @@ export function HistorySelectionBar({
                 'transition-all duration-200 ease-in-out',
                 'font-serif text-sm font-medium',
                 'hover:scale-105 hover:shadow-md',
-                isDark
-                  ? 'border border-stone-600 text-stone-400 hover:bg-stone-700'
-                  : 'border border-stone-300 text-stone-500 hover:bg-stone-200'
+                'border border-stone-300 text-stone-500 hover:bg-stone-200 dark:border-stone-600 dark:text-stone-400 dark:hover:bg-stone-700'
               )}
             >
               <X className="h-3.5 w-3.5" />
diff --git a/components/history/index.tsx b/components/history/index.tsx
index 487270d9..057f555c 100644
--- a/components/history/index.tsx
+++ b/components/history/index.tsx
@@ -5,8 +5,6 @@ import { useAllConversations } from '@lib/hooks/use-all-conversations';
 import { useChatInterface } from '@lib/hooks/use-chat-interface';
 import { useChatWidth } from '@lib/hooks/use-chat-width';
 import { conversationEvents } from '@lib/hooks/use-combined-conversations';
-import { useTheme } from '@lib/hooks/use-theme';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { useChatInputStore } from '@lib/stores/chat-input-store';
 import { useChatStore } from '@lib/stores/chat-store';
 import { useChatTransitionStore } from '@lib/stores/chat-transition-store';
@@ -25,8 +23,6 @@ import { HistorySelectionBar } from './history-selection-bar';
 // History conversation page component
 // Display all history conversations, support search function and multi-select delete function
 export function History() {
-  const { isDark } = useTheme();
-  const { colors } = useThemeColors();
   const t = useTranslations('history');
   const [searchQuery, setSearchQuery] = React.useState('');
   const router = useRouter();
@@ -236,7 +232,7 @@ export function History() {
     <div
       className={cn(
         'flex h-full w-full flex-col overflow-hidden',
-        colors.mainBackground.tailwind
+        'bg-white dark:bg-stone-800'
       )}
     >
       {/* Fixed header area - does not scroll */}
@@ -250,7 +246,7 @@ export function History() {
               <h1
                 className={cn(
                   'font-serif text-2xl font-bold',
-                  isDark ? 'text-stone-100' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-100'
                 )}
               >
                 {t('title')}
@@ -260,7 +256,7 @@ export function History() {
               <div
                 className={cn(
                   'mt-1 text-sm',
-                  isDark ? 'text-stone-400' : 'text-stone-600'
+                  'text-stone-600 dark:text-stone-400'
                 )}
               >
                 {total > 0 ? t('totalCount', { total }) : t('noRecords')}
@@ -277,12 +273,8 @@ export function History() {
                     'transition-all duration-200 ease-in-out',
                     'cursor-pointer hover:-translate-y-0.5 hover:shadow-md',
                     isSelectionMode
-                      ? isDark
-                        ? 'border border-stone-500 bg-stone-600 text-white shadow-md hover:bg-stone-500'
-                        : 'border border-stone-400 bg-stone-200 text-stone-800 shadow-md hover:bg-stone-300'
-                      : isDark
-                        ? 'border border-stone-600 bg-stone-700 text-white hover:bg-stone-600'
-                        : 'border border-stone-300 bg-stone-100 text-stone-700 hover:bg-stone-200'
+                      ? 'border border-stone-400 bg-stone-200 text-stone-800 shadow-md hover:bg-stone-300 dark:border-stone-500 dark:bg-stone-600 dark:text-white dark:hover:bg-stone-500'
+                      : 'border border-stone-300 bg-stone-100 text-stone-700 hover:bg-stone-200 dark:border-stone-600 dark:bg-stone-700 dark:text-white dark:hover:bg-stone-600'
                   )}
                 >
                   <Trash2 className="mr-2 h-4 w-4" />
@@ -297,9 +289,8 @@ export function History() {
                   'flex items-center rounded-lg px-3 py-2 font-serif text-sm font-medium',
                   'transition-all duration-200 ease-in-out',
                   'cursor-pointer hover:-translate-y-0.5 hover:shadow-md',
-                  isDark
-                    ? 'border border-stone-600 bg-stone-700 text-white hover:bg-stone-600'
-                    : 'border border-stone-300 bg-stone-100 text-stone-700 hover:bg-stone-200'
+                  'border border-stone-300 bg-stone-100 text-stone-700 hover:bg-stone-200',
+                  'dark:border-stone-600 dark:bg-stone-700 dark:text-white dark:hover:bg-stone-600'
                 )}
               >
                 <Edit className="mr-2 h-4 w-4" />
@@ -319,9 +310,8 @@ export function History() {
             containerClassName="w-full"
             className={cn(
               'py-2', // History specific: py-2 instead of py-2.5
-              isDark
-                ? 'border-stone-700 bg-stone-800 text-stone-200 focus:ring-stone-600 focus:ring-offset-stone-900'
-                : 'border-stone-300 bg-white text-stone-800 focus:ring-stone-400 focus:ring-offset-stone-50'
+              'border-stone-300 bg-white text-stone-800 focus:ring-stone-400 focus:ring-offset-stone-50',
+              'dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200 dark:focus:ring-stone-600 dark:focus:ring-offset-stone-900'
             )}
           />
         </div>
diff --git a/components/mobile/mobile-user-button.tsx b/components/mobile/mobile-user-button.tsx
index de16f3c3..0042ee7b 100644
--- a/components/mobile/mobile-user-button.tsx
+++ b/components/mobile/mobile-user-button.tsx
@@ -3,7 +3,6 @@
 import { LogoutConfirmDialog, UserAvatar } from '@components/ui';
 import { useMobile } from '@lib/hooks/use-mobile';
 import { useProfile } from '@lib/hooks/use-profile';
-import { useTheme } from '@lib/hooks/use-theme';
 import { useSidebarStore } from '@lib/stores/sidebar-store';
 import { cn } from '@lib/utils';
 import { User } from 'lucide-react';
@@ -20,7 +19,6 @@ import { UserBottomSheet } from './ui/user-bottom-sheet';
  * Style consistent with other sidebar buttons
  */
 export function MobileUserButton() {
-  const { isDark } = useTheme();
   const isMobile = useMobile();
   const { isExpanded } = useSidebarStore();
   const [isOpen, setIsOpen] = useState(false);
@@ -70,18 +68,10 @@ export function MobileUserButton() {
           'transition-all duration-200 ease-in-out',
           'cursor-pointer outline-none',
 
-          // Apply different styles based on theme and login status
-          !isDark && [
-            'text-stone-600',
-            'hover:bg-stone-300 hover:shadow-md',
-            isLoggedIn ? '' : 'text-blue-600',
-          ],
-
-          isDark && [
-            'text-gray-200',
-            'hover:bg-stone-600 hover:shadow-md',
-            isLoggedIn ? '' : 'text-blue-400',
-          ]
+          // Apply styles with dark mode support
+          'text-stone-600 dark:text-gray-200',
+          'hover:bg-stone-300 hover:shadow-md dark:hover:bg-stone-600 dark:hover:shadow-md',
+          isLoggedIn ? '' : 'text-blue-600 dark:text-blue-400'
         )}
         aria-label={isLoggedIn ? tNav('openUserMenu') : t('loginRegister')}
       >
@@ -99,9 +89,7 @@ export function MobileUserButton() {
               className={cn(
                 'flex h-8 w-8 items-center justify-center rounded-full',
                 'transition-all duration-200 ease-in-out',
-                isDark
-                  ? 'bg-blue-600/20 text-blue-400'
-                  : 'bg-blue-500/10 text-blue-600'
+                'bg-blue-500/10 text-blue-600 dark:bg-blue-600/20 dark:text-blue-400'
               )}
             >
               <User className="h-4 w-4" />
diff --git a/components/mobile/ui/user-bottom-sheet.tsx b/components/mobile/ui/user-bottom-sheet.tsx
index c0fa683e..ffb5e178 100644
--- a/components/mobile/ui/user-bottom-sheet.tsx
+++ b/components/mobile/ui/user-bottom-sheet.tsx
@@ -2,7 +2,6 @@
 
 import { VersionTag } from '@components/ui';
 import { useProfile } from '@lib/hooks/use-profile';
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { Info, LogOut, Sliders, UserCircle, Wrench } from 'lucide-react';
 
@@ -26,7 +25,6 @@ export function UserBottomSheet({
   isLoggedIn,
   onLogoutClick,
 }: UserBottomSheetProps) {
-  const { isDark } = useTheme();
   const router = useRouter();
   const t = useTranslations('mobile.user');
   const tBottomSheet = useTranslations('mobile.bottomSheet');
@@ -69,13 +67,9 @@ export function UserBottomSheet({
       onClick={onClick}
       className={cn(
         'flex w-full items-center rounded-lg px-4 py-3',
-        isDark
-          ? danger
-            ? 'text-red-400 hover:bg-red-900/30 hover:text-red-300'
-            : 'text-stone-300 hover:bg-stone-700 hover:text-stone-200'
-          : danger
-            ? 'text-red-600 hover:bg-red-50 hover:text-red-700'
-            : 'text-stone-700 hover:bg-stone-100 hover:text-stone-900',
+        danger
+          ? 'text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/30 dark:hover:text-red-300'
+          : 'text-stone-700 hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-700 dark:hover:text-stone-200',
         'transition-colors duration-200'
       )}
     >
@@ -100,13 +94,13 @@ export function UserBottomSheet({
           <div
             className={cn(
               'mb-3 rounded-lg px-3 py-2',
-              isDark ? 'bg-stone-700/30' : 'bg-stone-100/80'
+              'bg-stone-100/80 dark:bg-stone-700/30'
             )}
           >
             <div
               className={cn(
                 'font-serif font-medium',
-                isDark ? 'text-white' : 'text-stone-800'
+                'text-stone-800 dark:text-white'
               )}
             >
               {userName}
@@ -114,7 +108,7 @@ export function UserBottomSheet({
             <div
               className={cn(
                 'font-serif text-sm',
-                isDark ? 'text-stone-400' : 'text-stone-500'
+                'text-stone-500 dark:text-stone-400'
               )}
             >
               {userRole}
@@ -124,9 +118,9 @@ export function UserBottomSheet({
           <div
             className={cn(
               'space-y-1 overflow-hidden rounded-lg',
-              isDark ? 'bg-stone-800/50' : 'bg-stone-50',
+              'bg-stone-50 dark:bg-stone-800/50',
               'border',
-              isDark ? 'border-stone-700' : 'border-stone-200',
+              'border-stone-200 dark:border-stone-700',
               'mb-2'
             )}
           >
@@ -164,9 +158,9 @@ export function UserBottomSheet({
           <div
             className={cn(
               'overflow-hidden rounded-lg',
-              isDark ? 'bg-stone-800/50' : 'bg-stone-50',
+              'bg-stone-50 dark:bg-stone-800/50',
               'border',
-              isDark ? 'border-stone-700' : 'border-stone-200'
+              'border-stone-200 dark:border-stone-700'
             )}
           >
             {renderMenuItem(
@@ -182,15 +176,13 @@ export function UserBottomSheet({
           <div
             className={cn(
               'mb-4 rounded-lg px-4 py-4 text-center',
-              isDark
-                ? 'bg-stone-700/50 text-stone-300'
-                : 'bg-stone-100 text-stone-600'
+              'bg-stone-100 text-stone-600 dark:bg-stone-700/50 dark:text-stone-300'
             )}
           >
             <UserCircle
               className={cn(
                 'mx-auto mb-3 h-16 w-16',
-                isDark ? 'text-stone-400' : 'text-stone-500'
+                'text-stone-500 dark:text-stone-400'
               )}
             />
             <p className="font-serif">{t('loginPrompt')}</p>
@@ -200,9 +192,7 @@ export function UserBottomSheet({
             onClick={handleLogin}
             className={cn(
               'w-full rounded-lg px-4 py-3 text-center font-serif font-medium',
-              isDark
-                ? 'bg-blue-600 text-white hover:bg-blue-700'
-                : 'bg-blue-500 text-white hover:bg-blue-600',
+              'bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700',
               'shadow-sm transition-colors duration-200'
             )}
           >
@@ -213,9 +203,7 @@ export function UserBottomSheet({
             onClick={handleRegister}
             className={cn(
               'w-full rounded-lg px-4 py-3 text-center font-serif font-medium',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-700 hover:bg-stone-300',
+              'bg-stone-200 text-stone-700 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600',
               'shadow-sm transition-colors duration-200'
             )}
           >
diff --git a/components/text-generation/text-generation-tracker.tsx b/components/text-generation/text-generation-tracker.tsx
index 86ecfaf4..d94d886e 100644
--- a/components/text-generation/text-generation-tracker.tsx
+++ b/components/text-generation/text-generation-tracker.tsx
@@ -8,7 +8,6 @@ import {
 } from '@components/chat/markdown-block';
 import { TooltipWrapper } from '@components/ui/tooltip-wrapper';
 import { UnifiedStatusPanel } from '@components/workflow/workflow-tracker/unified-status-panel';
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import 'katex/dist/katex.min.css';
 import { Check, Copy, Download, FileText, Loader2 } from 'lucide-react';
@@ -51,7 +50,6 @@ export function TextGenerationTracker({
   onRetry,
   onReset,
 }: TextGenerationTrackerProps) {
-  const { isDark } = useTheme();
   const markdownContainerRef = useRef<HTMLDivElement>(null);
   const [isCopied, setIsCopied] = useState(false);
   const t = useTranslations('pages.textGeneration');
@@ -205,13 +203,13 @@ export function TextGenerationTracker({
               <div
                 className={cn(
                   'mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-dashed',
-                  isDark ? 'border-stone-600' : 'border-stone-300'
+                  'border-stone-300 dark:border-stone-600'
                 )}
               >
                 <FileText
                   className={cn(
                     'h-6 w-6',
-                    isDark ? 'text-stone-400' : 'text-stone-500'
+                    'text-stone-500 dark:text-stone-400'
                   )}
                 />
               </div>
@@ -219,7 +217,7 @@ export function TextGenerationTracker({
                 <h3
                   className={cn(
                     'font-serif text-lg font-semibold',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {t('emptyState.title')}
@@ -227,7 +225,7 @@ export function TextGenerationTracker({
                 <p
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 >
                   {t('emptyState.description')}
@@ -244,7 +242,7 @@ export function TextGenerationTracker({
                 <h3
                   className={cn(
                     'font-serif text-lg font-semibold',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {isExecuting || isStreaming
@@ -269,13 +267,7 @@ export function TextGenerationTracker({
                       onClick={handleCopyText}
                       className={cn(
                         'flex items-center justify-center rounded-lg p-2 transition-colors',
-                        isDark ? 'text-stone-400' : 'text-stone-500',
-                        isDark
-                          ? 'hover:text-stone-300'
-                          : 'hover:text-stone-700',
-                        isDark
-                          ? 'hover:bg-stone-600/40'
-                          : 'hover:bg-stone-300/40',
+                        'text-stone-500 hover:bg-stone-300/40 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-600/40 dark:hover:text-stone-300',
                         'focus:outline-none'
                       )}
                       style={{ transform: 'translateZ(0)' }}
@@ -304,13 +296,7 @@ export function TextGenerationTracker({
                       onClick={handleDownloadText}
                       className={cn(
                         'flex items-center justify-center rounded-lg p-2 transition-colors',
-                        isDark ? 'text-stone-400' : 'text-stone-500',
-                        isDark
-                          ? 'hover:text-stone-300'
-                          : 'hover:text-stone-700',
-                        isDark
-                          ? 'hover:bg-stone-600/40'
-                          : 'hover:bg-stone-300/40',
+                        'text-stone-500 hover:bg-stone-300/40 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-600/40 dark:hover:text-stone-300',
                         'focus:outline-none'
                       )}
                       style={{ transform: 'translateZ(0)' }}
@@ -330,23 +316,21 @@ export function TextGenerationTracker({
                 <div
                   className={cn(
                     'absolute inset-0 flex items-center justify-center rounded-lg border-2 border-dashed',
-                    isDark
-                      ? 'border-stone-600 bg-stone-800/50'
-                      : 'border-stone-300 bg-stone-50'
+                    'border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-800/50'
                   )}
                 >
                   <div className="flex items-center gap-3">
                     <Loader2
                       className={cn(
                         'h-5 w-5 animate-spin',
-                        isDark ? 'text-stone-400' : 'text-stone-600'
+                        'text-stone-600 dark:text-stone-400'
                       )}
                     />
                     <div>
                       <div
                         className={cn(
                           'font-serif font-medium',
-                          isDark ? 'text-stone-200' : 'text-stone-800'
+                          'text-stone-800 dark:text-stone-200'
                         )}
                       >
                         {t('loadingState.title')}
@@ -354,7 +338,7 @@ export function TextGenerationTracker({
                       <div
                         className={cn(
                           'font-serif text-sm',
-                          isDark ? 'text-stone-400' : 'text-stone-600'
+                          'text-stone-600 dark:text-stone-400'
                         )}
                       >
                         {t('loadingState.description')}
@@ -370,9 +354,7 @@ export function TextGenerationTracker({
                     'absolute inset-0 overflow-y-auto overscroll-contain rounded-lg border p-4 font-serif',
                     'focus:border-transparent focus:ring-2 focus:ring-stone-500 focus:outline-none',
                     'assistant-message-content', // Reuse the style class of the assistant message
-                    isDark
-                      ? 'border-stone-600 bg-stone-800 text-stone-200'
-                      : 'border-stone-300 bg-white text-stone-900'
+                    'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-800 dark:text-stone-200'
                   )}
                   style={{
                     scrollBehavior: 'auto',
@@ -390,7 +372,7 @@ export function TextGenerationTracker({
                     <div
                       className={cn(
                         'flex h-full items-center justify-center font-serif',
-                        isDark ? 'text-stone-400' : 'text-stone-500'
+                        'text-stone-500 dark:text-stone-400'
                       )}
                     >
                       {isExecuting
@@ -406,9 +388,7 @@ export function TextGenerationTracker({
                 <div
                   className={cn(
                     'absolute right-4 bottom-4 flex items-center gap-2 rounded-full px-3 py-1 text-xs',
-                    isDark
-                      ? 'bg-stone-700 text-stone-300'
-                      : 'bg-stone-100 text-stone-600'
+                    'bg-stone-100 text-stone-600 dark:bg-stone-700 dark:text-stone-300'
                   )}
                 >
                   <div className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
diff --git a/components/text-generation/text-generation-viewer.tsx b/components/text-generation/text-generation-viewer.tsx
index a5769f00..11bde9af 100644
--- a/components/text-generation/text-generation-viewer.tsx
+++ b/components/text-generation/text-generation-viewer.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
+import type { AppExecution } from '@lib/types/database';
 import { cn } from '@lib/utils';
 import {
   CheckCircle,
@@ -23,7 +23,7 @@ interface TextGenerationViewerProps {
   isStreaming: boolean;
   progress: number;
   generatedText: string;
-  currentExecution: any;
+  currentExecution: AppExecution | null;
   onStop?: () => void;
   onRetry?: () => void;
   onReset?: () => void;
@@ -49,7 +49,6 @@ export function TextGenerationViewer({
   onRetry,
   onReset,
 }: TextGenerationViewerProps) {
-  const { isDark } = useTheme();
   const [copied, setCopied] = useState(false);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const t = useTranslations('pages.textGeneration');
@@ -140,9 +139,8 @@ export function TextGenerationViewer({
       <div
         className={cn(
           'flex-shrink-0 border-b p-4',
-          isDark
-            ? 'border-stone-700 bg-stone-900/50'
-            : 'border-stone-200 bg-stone-50/50'
+          'border-stone-200 bg-stone-50/50',
+          'dark:border-stone-700 dark:bg-stone-900/50'
         )}
       >
         <div className="flex items-center justify-between">
@@ -153,7 +151,7 @@ export function TextGenerationViewer({
               <div
                 className={cn(
                   'font-serif font-medium',
-                  isDark ? 'text-stone-200' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-200'
                 )}
               >
                 {statusInfo.text}
@@ -162,7 +160,7 @@ export function TextGenerationViewer({
                 <div
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 >
                   {t('progress', { percent: Math.round(progress) })}
@@ -180,9 +178,8 @@ export function TextGenerationViewer({
                   onClick={handleCopyText}
                   className={cn(
                     'rounded-lg p-2 transition-colors',
-                    isDark
-                      ? 'text-stone-300 hover:bg-stone-700 hover:text-stone-200'
-                      : 'text-stone-600 hover:bg-stone-200 hover:text-stone-800'
+                    'text-stone-600 hover:bg-stone-200 hover:text-stone-800',
+                    'dark:text-stone-300 dark:hover:bg-stone-700 dark:hover:text-stone-200'
                   )}
                   title={copied ? t('buttons.copied') : t('buttons.copy')}
                 >
@@ -193,9 +190,8 @@ export function TextGenerationViewer({
                   onClick={handleDownloadText}
                   className={cn(
                     'rounded-lg p-2 transition-colors',
-                    isDark
-                      ? 'text-stone-300 hover:bg-stone-700 hover:text-stone-200'
-                      : 'text-stone-600 hover:bg-stone-200 hover:text-stone-800'
+                    'text-stone-600 hover:bg-stone-200 hover:text-stone-800',
+                    'dark:text-stone-300 dark:hover:bg-stone-700 dark:hover:text-stone-200'
                   )}
                   title={t('buttons.download')}
                 >
@@ -238,9 +234,8 @@ export function TextGenerationViewer({
                 onClick={onReset}
                 className={cn(
                   'rounded-lg px-3 py-2 font-serif transition-colors',
-                  isDark
-                    ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                    : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+                  'bg-stone-200 text-stone-800 hover:bg-stone-300',
+                  'dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
                 )}
               >
                 <RotateCcw className="mr-1 h-4 w-4" />
@@ -256,7 +251,7 @@ export function TextGenerationViewer({
             <div
               className={cn(
                 'h-2 w-full overflow-hidden rounded-full',
-                isDark ? 'bg-stone-700' : 'bg-stone-200'
+                'bg-stone-200 dark:bg-stone-700'
               )}
             >
               <div
@@ -277,13 +272,13 @@ export function TextGenerationViewer({
               <div
                 className={cn(
                   'mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-dashed',
-                  isDark ? 'border-stone-600' : 'border-stone-300'
+                  'border-stone-300 dark:border-stone-600'
                 )}
               >
                 <FileText
                   className={cn(
                     'h-6 w-6',
-                    isDark ? 'text-stone-400' : 'text-stone-500'
+                    'text-stone-500 dark:text-stone-400'
                   )}
                 />
               </div>
@@ -291,7 +286,7 @@ export function TextGenerationViewer({
                 <h3
                   className={cn(
                     'font-serif text-lg font-semibold',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {t('emptyState.title')}
@@ -299,7 +294,7 @@ export function TextGenerationViewer({
                 <p
                   className={cn(
                     'max-w-md font-serif text-sm',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 >
                   {t('emptyState.description')}
@@ -317,7 +312,7 @@ export function TextGenerationViewer({
               className={cn(
                 'h-full w-full resize-none border-0 bg-transparent focus:outline-none',
                 'font-serif text-base leading-relaxed',
-                isDark ? 'text-stone-200' : 'text-stone-800'
+                'text-stone-800 dark:text-stone-200'
               )}
               placeholder={
                 isExecuting
@@ -332,9 +327,8 @@ export function TextGenerationViewer({
                 className={cn(
                   'absolute right-6 bottom-6 flex items-center gap-2 rounded-lg px-3 py-2',
                   'border backdrop-blur-sm',
-                  isDark
-                    ? 'border-stone-600 bg-stone-800/80 text-stone-300'
-                    : 'border-stone-300 bg-white/80 text-stone-700'
+                  'border-stone-300 bg-white/80 text-stone-700',
+                  'dark:border-stone-600 dark:bg-stone-800/80 dark:text-stone-300'
                 )}
               >
                 <div className="flex space-x-1">
@@ -374,17 +368,13 @@ export function TextGenerationViewer({
         <div
           className={cn(
             'flex-shrink-0 border-t px-6 py-3',
-            isDark
-              ? 'border-stone-700 bg-stone-900/50'
-              : 'border-stone-200 bg-stone-50/50'
+            'border-stone-200 bg-stone-50/50',
+            'dark:border-stone-700 dark:bg-stone-900/50'
           )}
         >
           <div className="flex items-center justify-between text-sm">
             <div
-              className={cn(
-                'font-serif',
-                isDark ? 'text-stone-400' : 'text-stone-600'
-              )}
+              className={cn('font-serif', 'text-stone-600 dark:text-stone-400')}
             >
               {t('stats.characters', { count: generatedText.length })},{' '}
               {t('stats.words', {
@@ -398,7 +388,7 @@ export function TextGenerationViewer({
               <div
                 className={cn(
                   'font-serif',
-                  isDark ? 'text-stone-400' : 'text-stone-600'
+                  'text-stone-600 dark:text-stone-400'
                 )}
               >
                 {t('stats.tokensUsed', {
diff --git a/components/workflow/execution-history/index.tsx b/components/workflow/execution-history/index.tsx
index a180db32..32b0860d 100644
--- a/components/workflow/execution-history/index.tsx
+++ b/components/workflow/execution-history/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useProfile } from '@lib/hooks/use-profile';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { useWorkflowExecutionStore } from '@lib/stores/workflow-execution-store';
 import type { AppExecution } from '@lib/types/database';
 import { cn } from '@lib/utils';
@@ -41,7 +40,6 @@ export function ExecutionHistory({
 }: ExecutionHistoryProps) {
   const { profile } = useProfile();
   const userId = profile?.id;
-  const { colors, isDark } = useThemeColors();
   const t = useTranslations('pages.workflow.history');
   const [isLoading, setIsLoading] = useState(true);
   const [isVisible, setIsVisible] = useState(false);
@@ -345,7 +343,7 @@ export function ExecutionHistory({
       className={cn(
         'relative flex h-full flex-col overflow-hidden',
         // --- Use the same background color as the page ---
-        isDark ? 'bg-stone-950' : 'bg-stone-50',
+        'bg-stone-50 dark:bg-stone-950',
         // --- Animation effect ---
         'transition-all duration-300 ease-in-out',
         isVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0',
@@ -358,7 +356,7 @@ export function ExecutionHistory({
         <div
           className={cn(
             'flex-shrink-0 border-b p-3',
-            isDark ? 'border-stone-700/50' : 'border-stone-300/50',
+            'border-stone-300/50 dark:border-stone-700/50',
             // --- Header animation: slide in from above ---
             'transition-all delay-100 duration-300 ease-out',
             isVisible ? 'translate-y-0 opacity-100' : '-translate-y-4 opacity-0'
@@ -369,14 +367,14 @@ export function ExecutionHistory({
               <History
                 className={cn(
                   'h-4 w-4 transition-transform duration-300',
-                  isDark ? 'text-stone-400' : 'text-stone-600',
+                  'text-stone-600 dark:text-stone-400',
                   isVisible ? 'rotate-0' : 'rotate-180'
                 )}
               />
               <h2
                 className={cn(
                   'font-serif text-base font-semibold',
-                  colors.mainText.tailwind
+                  'text-stone-900 dark:text-gray-100'
                 )}
               >
                 {t('title')}
@@ -386,9 +384,7 @@ export function ExecutionHistory({
                 <span
                   className={cn(
                     'rounded-md px-2 py-1 font-serif text-sm',
-                    isDark
-                      ? 'bg-stone-700 text-stone-300'
-                      : 'bg-stone-100 text-stone-600'
+                    'bg-stone-100 text-stone-600 dark:bg-stone-700 dark:text-stone-300'
                   )}
                 >
                   {t('selected', { count: selectedIds.size })}
@@ -404,9 +400,7 @@ export function ExecutionHistory({
                   className={cn(
                     'rounded-md p-1.5 transition-all duration-200',
                     'hover:scale-110 active:scale-95',
-                    isDark
-                      ? 'text-stone-400 hover:bg-stone-700/50 hover:text-stone-300'
-                      : 'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700'
+                    'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700/50 dark:hover:text-stone-300'
                   )}
                   title={t('batchDelete')}
                 >
@@ -423,9 +417,7 @@ export function ExecutionHistory({
                       'hover:scale-110 active:scale-95',
                       selectedIds.size === 0 || isDeleting
                         ? 'cursor-not-allowed opacity-50'
-                        : isDark
-                          ? 'text-red-400 hover:bg-red-700/50 hover:text-red-300'
-                          : 'text-red-600 hover:bg-red-100/50 hover:text-red-700'
+                        : 'text-red-600 hover:bg-red-100/50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-700/50 dark:hover:text-red-300'
                     )}
                     title={t('deleteSelected', { count: selectedIds.size })}
                   >
@@ -445,9 +437,7 @@ export function ExecutionHistory({
                     className={cn(
                       'rounded-md p-1.5 transition-all duration-200',
                       'hover:scale-110 active:scale-95',
-                      isDark
-                        ? 'text-stone-400 hover:bg-stone-700/50 hover:text-stone-300'
-                        : 'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700'
+                      'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700/50 dark:hover:text-stone-300'
                     )}
                     title={t('cancelSelection')}
                   >
@@ -463,9 +453,7 @@ export function ExecutionHistory({
                   className={cn(
                     'rounded-md p-1.5 transition-all duration-200',
                     'hover:scale-110 active:scale-95',
-                    isDark
-                      ? 'text-stone-400 hover:bg-stone-700/50 hover:text-stone-300'
-                      : 'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700'
+                    'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700/50 dark:hover:text-stone-300'
                   )}
                 >
                   <X className="h-4 w-4" />
@@ -481,9 +469,7 @@ export function ExecutionHistory({
             'flex-1 overflow-x-hidden overflow-y-auto',
             // --- Custom scrollbar style ---
             'scrollbar-thin',
-            isDark
-              ? 'scrollbar-track-stone-800 scrollbar-thumb-stone-600 hover:scrollbar-thumb-stone-500'
-              : 'scrollbar-track-stone-100 scrollbar-thumb-stone-300 hover:scrollbar-thumb-stone-400',
+            'scrollbar-track-stone-100 scrollbar-thumb-stone-300 hover:scrollbar-thumb-stone-400 dark:scrollbar-track-stone-800 dark:scrollbar-thumb-stone-600 dark:hover:scrollbar-thumb-stone-500',
             // --- List animation: slide in from below ---
             'transition-all delay-200 duration-300 ease-out',
             isVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'
@@ -495,14 +481,14 @@ export function ExecutionHistory({
                 <Loader2
                   className={cn(
                     'h-4 w-4 animate-spin transition-all duration-300',
-                    isDark ? 'text-stone-500' : 'text-stone-500',
+                    'text-stone-500',
                     isVisible ? 'scale-100' : 'scale-75'
                   )}
                 />
                 <div
                   className={cn(
                     'font-serif text-sm transition-all duration-300',
-                    isDark ? 'text-stone-500' : 'text-stone-500',
+                    'text-stone-500',
                     isVisible ? 'opacity-100' : 'opacity-0'
                   )}
                 >
@@ -515,7 +501,7 @@ export function ExecutionHistory({
               <div
                 className={cn(
                   'font-serif text-sm transition-all duration-300',
-                  isDark ? 'text-stone-500' : 'text-stone-500',
+                  'text-stone-500',
                   isVisible
                     ? 'translate-y-0 opacity-100'
                     : 'translate-y-2 opacity-0'
diff --git a/components/workflow/workflow-tracker/execution-bar.tsx b/components/workflow/workflow-tracker/execution-bar.tsx
index 0d3f6896..a2a2bcd0 100644
--- a/components/workflow/workflow-tracker/execution-bar.tsx
+++ b/components/workflow/workflow-tracker/execution-bar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import type {
   WorkflowIteration,
   WorkflowLoop,
@@ -34,7 +33,6 @@ interface ExecutionBarProps {
  * - Hover effect and interaction
  */
 export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.workflow.nodeStatus');
   const tTypes = useTranslations('pages.workflow.nodeTypes');
   const tDetails = useTranslations('pages.workflow.iterationDetails');
@@ -96,18 +94,12 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
     // Set color based on status
     const colorClass =
       node.status === 'running'
-        ? isDark
-          ? 'text-stone-400'
-          : 'text-stone-600'
+        ? 'text-stone-600 dark:text-stone-400'
         : node.status === 'completed'
-          ? isDark
-            ? 'text-stone-400'
-            : 'text-stone-600'
+          ? 'text-stone-600 dark:text-stone-400'
           : node.status === 'failed'
             ? 'text-red-500'
-            : isDark
-              ? 'text-stone-500'
-              : 'text-stone-400';
+            : 'text-stone-400 dark:text-stone-500';
 
     return <div className={cn(colorClass)}>{icon}</div>;
   };
@@ -226,7 +218,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
             // Use the corresponding indicator bar style
             node.isInIteration ? 'iteration-node' : 'loop-node',
             // Slight background color distinction
-            isDark ? 'bg-stone-800/20' : 'bg-stone-50/40'
+            'bg-stone-50/40 dark:bg-stone-800/20'
           )
         : '';
 
@@ -236,37 +228,27 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
       case 'running':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-600 bg-stone-700/50 shadow-lg shadow-stone-900/30'
-            : 'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50'
+          'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50 dark:shadow-stone-900/30'
         );
       case 'completed':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-500 bg-stone-600/30'
-            : 'border-stone-300 bg-stone-100'
+          'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
         );
       case 'failed':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-red-700/50 bg-red-900/20'
-            : 'border-red-200 bg-red-50'
+          'border-red-200 bg-red-50 dark:border-red-700/50 dark:bg-red-900/20'
         );
       case 'pending':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
         );
       default:
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
         );
     }
   };
@@ -306,7 +288,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               <span
                 className={cn(
                   'truncate font-serif text-sm font-medium',
-                  isDark ? 'text-stone-200' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-200'
                 )}
               >
                 {getNodeTitle()}
@@ -320,7 +302,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'rounded-full bg-stone-200 px-2 py-0.5 font-serif text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {(node.currentIteration || 0) + 1}/{node.totalIterations}
@@ -332,7 +314,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'rounded-full bg-stone-200 px-2 py-0.5 font-serif text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {(node.currentLoop || 0) + 1}/{node.maxLoops}
@@ -344,7 +326,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'rounded-full bg-stone-200 px-2 py-0.5 font-serif text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {node.completedBranches || 0}/{node.totalBranches}
@@ -355,20 +337,12 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 className={cn(
                   'rounded-full px-2 py-0.5 font-serif text-xs',
                   node.status === 'running'
-                    ? isDark
-                      ? 'bg-stone-600/40 text-stone-200'
-                      : 'bg-stone-300/60 text-stone-700'
+                    ? 'bg-stone-300/60 text-stone-700 dark:bg-stone-600/40 dark:text-stone-200'
                     : node.status === 'completed'
-                      ? isDark
-                        ? 'bg-stone-500/40 text-stone-100'
-                        : 'bg-stone-200 text-stone-800'
+                      ? 'bg-stone-200 text-stone-800 dark:bg-stone-500/40 dark:text-stone-100'
                       : node.status === 'failed'
-                        ? isDark
-                          ? 'bg-red-700/30 text-red-200'
-                          : 'bg-red-100 text-red-700'
-                        : isDark
-                          ? 'bg-stone-700/50 text-stone-400'
-                          : 'bg-stone-200/80 text-stone-600'
+                        ? 'bg-red-100 text-red-700 dark:bg-red-700/30 dark:text-red-200'
+                        : 'bg-stone-200/80 text-stone-600 dark:bg-stone-700/50 dark:text-stone-400'
                 )}
               >
                 {getStatusText()}
@@ -384,7 +358,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               <div
                 className={cn(
                   'font-serif text-xs',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
+                  'text-stone-500 dark:text-stone-400'
                 )}
               >
                 {formatTime(elapsedTime)}
@@ -401,15 +375,11 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               key={iteration.id}
               className={cn(
                 'iteration-node relative ml-6 pl-4',
-                isDark ? 'bg-stone-800/30' : 'bg-stone-50/30',
+                'bg-stone-50/30 dark:bg-stone-800/30',
                 'flex items-center gap-3 rounded-md border px-3 py-2 font-serif transition-all duration-300',
                 iteration.status === 'running'
-                  ? isDark
-                    ? 'border-stone-600 bg-stone-700/50'
-                    : 'border-stone-300 bg-stone-200/50'
-                  : isDark
-                    ? 'border-stone-500 bg-stone-600/30'
-                    : 'border-stone-300 bg-stone-100'
+                  ? 'border-stone-300 bg-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50'
+                  : 'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
               )}
             >
               <div className="flex-shrink-0">
@@ -417,14 +387,14 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <Loader2
                     className={cn(
                       'h-3 w-3 animate-spin',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : iteration.status === 'completed' ? (
                   <CheckCircle
                     className={cn(
                       'h-3 w-3',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : (
@@ -436,7 +406,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {tDetails('roundIteration', { round: iteration.index + 1 })}
@@ -448,7 +418,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <span
                     className={cn(
                       'font-serif text-xs',
-                      isDark ? 'text-stone-400' : 'text-stone-500'
+                      'text-stone-500 dark:text-stone-400'
                     )}
                   >
                     {formatTime(iteration.endTime - iteration.startTime)}
@@ -468,15 +438,11 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               key={loop.id}
               className={cn(
                 'loop-node relative ml-6 pl-4',
-                isDark ? 'bg-stone-800/30' : 'bg-stone-50/30',
+                'bg-stone-50/30 dark:bg-stone-800/30',
                 'flex items-center gap-3 rounded-md border px-3 py-2 font-serif transition-all duration-300',
                 loop.status === 'running'
-                  ? isDark
-                    ? 'border-stone-600 bg-stone-700/50'
-                    : 'border-stone-300 bg-stone-200/50'
-                  : isDark
-                    ? 'border-stone-500 bg-stone-600/30'
-                    : 'border-stone-300 bg-stone-100'
+                  ? 'border-stone-300 bg-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50'
+                  : 'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
               )}
             >
               <div className="flex-shrink-0">
@@ -484,14 +450,14 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <Loader2
                     className={cn(
                       'h-3 w-3 animate-spin',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : loop.status === 'completed' ? (
                   <CheckCircle
                     className={cn(
                       'h-3 w-3',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : (
@@ -503,7 +469,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {tDetails('roundLoop', { round: loop.index + 1 })}
@@ -515,7 +481,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <span
                     className={cn(
                       'font-serif text-xs',
-                      isDark ? 'text-stone-400' : 'text-stone-500'
+                      'text-stone-500 dark:text-stone-400'
                     )}
                   >
                     {formatTime(loop.endTime - loop.startTime)}
@@ -535,15 +501,11 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               key={branch.id}
               className={cn(
                 'iteration-node relative ml-6 pl-4',
-                isDark ? 'bg-stone-800/30' : 'bg-stone-50/30',
+                'bg-stone-50/30 dark:bg-stone-800/30',
                 'flex items-center gap-3 rounded-md border px-3 py-2 font-serif transition-all duration-300',
                 branch.status === 'running'
-                  ? isDark
-                    ? 'border-stone-600 bg-stone-700/50'
-                    : 'border-stone-300 bg-stone-200/50'
-                  : isDark
-                    ? 'border-stone-500 bg-stone-600/30'
-                    : 'border-stone-300 bg-stone-100'
+                  ? 'border-stone-300 bg-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50'
+                  : 'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
               )}
             >
               <div className="flex-shrink-0">
@@ -551,14 +513,14 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <Loader2
                     className={cn(
                       'h-3 w-3 animate-spin',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : branch.status === 'completed' ? (
                   <CheckCircle
                     className={cn(
                       'h-3 w-3',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : (
@@ -570,7 +532,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {branch.name}
@@ -582,7 +544,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <span
                     className={cn(
                       'font-serif text-xs',
-                      isDark ? 'text-stone-400' : 'text-stone-500'
+                      'text-stone-500 dark:text-stone-400'
                     )}
                   >
                     {formatTime(branch.endTime - branch.startTime)}
diff --git a/lib/stores/api-config-store.ts b/lib/stores/api-config-store.ts
index b7d0e248..a60281a9 100644
--- a/lib/stores/api-config-store.ts
+++ b/lib/stores/api-config-store.ts
@@ -509,10 +509,7 @@ export const useApiConfigStore = create<ApiConfigState>((set, get) => ({
           base_url: newApiUrl,
         });
 
-        const updatedProvider = handleResult(
-          updatedProviderResult,
-          'Update Dify provider'
-        );
+        handleResult(updatedProviderResult, 'Update Dify provider');
 
         // update local state
         set({
@@ -580,10 +577,7 @@ export const useApiConfigStore = create<ApiConfigState>((set, get) => ({
             true // mark the key as encrypted
           );
 
-          const updatedKey = handleResult(
-            updatedKeyResult,
-            'Update default API key'
-          );
+          handleResult(updatedKeyResult, 'Update default API key');
 
           // update local state
           set({