update v3.10.1

Co-authored-by: Copilot <copilot@github.com>
2026-05-06 19:14:45 +08:00
parent c44855e573
commit 697d3773c8
13 changed files with 1415 additions and 503 deletions
@@ -0,0 +1,252 @@
+# CodeDocs 内容架构规划
+
+## 愿景
+为全栈、全端工程师打造一个**可查、可参考、可速查**的技术文档与知识库，覆盖从底层原理、框架实战、到面试突破的全链路。
+
+## 一级分类（顶部菜单）
+
+### 1. 📚 技术文档
+   主要技术栈与框架学习
+
+#### 1.1 ⚙️ 后端技术
+   **目标用户**: 后端工程师、全栈开发者
+   
+   - **Java 生态**
+     - Spring Framework / Spring Boot / Spring Cloud
+       - 核心概念 (IoC, AOP, Bean 生命周期)
+       - 常用注解与配置方式
+       - 微服务架构与分布式方案
+       - 性能优化与监控
+     - JVM 优化与性能调试
+     - 并发编程 (ThreadPool, Lock, Concurrent 工具)
+   
+   - **数据库与缓存**
+     - SQL 优化与查询计划
+     - MySQL 索引设计与事务管理
+     - NoSQL (Redis, MongoDB)
+     - 分布式缓存方案
+   
+   - **消息队列与异步**
+     - RabbitMQ / Kafka / RocketMQ
+     - 事件驱动架构
+   
+   - **分布式系统**
+     - 一致性 (Raft, Consensus)
+     - 服务治理 (Nacos, Consul)
+     - 链路追踪 (Jaeger, SkyWalking)
+
+#### 1.2 ⚛️ 前端开发
+   **目标用户**: 前端工程师、全栈开发者
+   
+   - **核心框架**
+     - React
+       - Hooks 深度解析
+       - 状态管理 (Redux, Zustand, Jotai)
+       - 性能优化 (Code Splitting, Memo, Lazy)
+       - SSR / SSG 方案
+     - Vue 3
+       - Composition API 最佳实践
+       - 响应性原理
+       - Pinia 状态管理
+   
+   - **工程化**
+     - 构建工具 (Webpack, Vite, Turbopack)
+     - 包管理 (npm, pnpm, yarn)
+     - CI/CD 流程
+   
+   - **性能与体验**
+     - Web 性能指标 (LCP, FID, CLS)
+     - 渲染优化
+     - 网络优化 (CDN, 压缩)
+   
+   - **跨端开发**
+     - React Native
+     - Electron
+     - 小程序 (微信、支付宝)
+
+#### 1.3 🧠 算法与面试
+   **目标用户**: 求职者、算法爱好者
+   
+   - **数据结构**
+     - 数组、链表、栈、队列
+     - 树 (二叉树、AVL、红黑树、B 树)
+     - 图
+     - 堆、优先队列
+   
+   - **经典算法**
+     - 排序与查找
+     - 动态规划
+     - 贪心算法
+     - 回溯与递归
+   
+   - **编程面试题**
+     - 按类型分类 (String, Array, Tree, Graph, DP)
+     - 按难度分级
+     - 按公司出现频率分类
+   
+   - **系统设计**
+     - 高并发架构设计
+     - 分布式系统设计
+     - 大数据处理
+
+---
+
+## 二级分类 - 导航示例
+
+### 技术文档 > 后端技术
+```
+├── Spring 全家桶
+│   ├── Spring Core (IoC, AOP)
+│   ├── Spring MVC
+│   ├── Spring Boot 实战
+│   ├── Spring Cloud 微服务
+│   └── Spring Data
+├── JVM 与性能
+│   ├── JVM 内存模型
+│   ├── GC 调优
+│   └── 性能分析工具
+├── 并发编程
+│   ├── 线程基础
+│   ├── 锁与同步
+│   ├── Concurrent 工具类
+│   └── 实战案例
+└── 数据库
+    ├── MySQL 核心
+    ├── 索引优化
+    ├── 事务与隔离
+    └── 分布式事务
+```
+
+### 技术文档 > 前端开发
+```
+├── React 进阶
+│   ├── Hooks 深入
+│   ├── 状态管理对比
+│   ├── 性能优化
+│   └── Next.js / Remix
+├── 工程化实践
+│   ├── 构建系统选型
+│   ├── 测试体系
+│   ├── 发布流程
+│   └── 监控与错误追踪
+└── 跨端方案
+    ├── React Native
+    ├── Electron
+    └── 小程序开发
+```
+
+---
+
+## 三级结构示例
+
+每个主题采用标准化格式：
+
+```
+## 主题名称
+
+### 📌 核心概念
+- 定义与原理
+- 为什么需要它
+
+### 🔧 实践指南
+- 快速开始
+- 常见用法
+- 最佳实践
+
+### ⚡ 性能优化
+- 性能指标
+- 瓶颈分析
+- 优化方案
+
+### 🎯 面试必考
+- 高频问题
+- 答题思路
+- 深度扩展
+
+### 📚 参考资源
+- 官方文档
+- 推荐阅读
+- 代码示例
+```
+
+---
+
+## 2️⃣ 🛠️ 工具与资源（待扩展）
+
+- **最佳实践**: 设计模式、代码规范、安全实践
+- **常用链接**: 文档汇总、在线工具、社区论坛
+- **推荐阅读**: 经典书籍、论文、博客精选
+
+---
+
+## 3️⃣ 📝 Blog
+- 技术分享
+- 学习笔记
+- 行业资讯
+
+---
+
+## 内容组织策略
+
+### 按学习路径分级
+1. **快速入门** (⏱️ 5-10分钟)
+   - 适合初学者快速上手
+   
+2. **深度学习** (⏱️ 30分钟-1小时)
+   - 详细讲解原理与实践
+   
+3. **性能与优化** (⏱️ 1-2小时)
+   - 高级技巧与优化方案
+   
+4. **面试突破** (⏱️ 灵活)
+   - 高频问题与答题框架
+
+### 搜索与过滤支持
+- 按难度筛选
+- 按学习时间筛选
+- 按使用频率筛选
+- 按技术栈筛选
+
+---
+
+## 实施优先级
+
+### Phase 1 (当前)
+- ✅ 首页设计升级（蓝色悬停动效）
+- ✅ 多级菜单配置
+- ✅ 内容分类框架
+
+### Phase 2
+- 迁移现有内容到新分类
+- 补充 Spring 系列完整文档
+- 补充 React 进阶指南
+
+### Phase 3
+- 补充算法与面试题库
+- 添加交互式代码编辑器
+- 性能与搜索优化
+
+### Phase 4
+- 用户反馈收集与迭代
+- 内容深化与补充
+- 社区建设
+
+---
+
+## 目标数据
+
+| 指标 | 当前 | 目标 |
+|-----|------|------|
+| 文档页面数 | ~30 | 200+ |
+| 一级分类 | 3 | 4+ |
+| 二级分类 | ~6 | 15+ |
+| 代码示例数 | ~10 | 100+ |
+| 日均访问 | N/A | 1000+ |
+
+---
+
+## 参考标准
+
+- 参考 Dyte Docs 的多级菜单、强大的搜索
+- 参考 MDN 的结构化学习路径
+- 参考 阿里技术文档 的工程最佳实践
@@ -0,0 +1,310 @@
+# CodeDocs 升级总结与实施指南
+
+## 📋 已完成的升级
+
+### 1️⃣ 首页样式升级 ✅
+
+#### 变更清单
+- **HomepageFeatures.tsx**: 
+  - 从 3 个简单文本卡片 → 交互式卡片组件
+  - 支持图标、颜色、渐变背景
+  - 完整的 hover 动效和动画
+  
+- **HomepageFeatures.module.css**:
+  - 新增蓝色悬停动效 (`hover:text-primary`)
+  - 新增图标背景色变化
+  - 新增箭头滑出动画
+  - 新增卡片缩放 + 投影效果
+  - 新增分层渐变背景
+  - 响应式网格布局（3列→1列）
+
+- **index.tsx**:
+  - 新增 3 个主要导航按钮
+  - 优化首页文案
+  - 增强视觉层级
+
+#### 设计理念（参考 dyte-io/docs）
+```
+卡片组成 = icon + title + description + hover-effect
+├── Icon: 根据分类变色（蓝色/青色/粉色）
+├── Title: hover 时变为主色 (#2160fd)
+├── Border: hover 时从半透明→主色
+└── Arrow: hover 时从隐藏→显示并滑入
+```
+
+---
+
+### 2️⃣ 多级菜单配置 ✅
+
+#### 变更清单
+- **docusaurus.config.ts - navbar.items**:
+
+```typescript
+items: [
+  // 技术文档 - 3 级分类
+  {
+    type: 'dropdown',
+    label: '📚 技术文档',
+    items: [
+      '⚙️ 后端技术',
+      '⚛️ 前端开发',
+      '🧠 算法与面试'
+    ]
+  },
+  
+  // 工具与资源 - 预留扩展
+  {
+    type: 'dropdown',
+    label: '🛠️ 工具与资源',
+    items: [
+      '📖 最佳实践',
+      '🔗 常用链接',
+      '📚 推荐阅读'
+    ]
+  },
+  
+  // 其他链接
+  '📝 Blog',
+  'GitHub'
+]
+```
+
+#### 菜单截图预期
+```
+顶部导航：
+[📚 技术文档 ▼]  [🛠️ 工具与资源 ▼]  [📝 Blog]  [GitHub]
+
+下拉展开：
+📚 技术文档 ▼
+├─ ⚙️ 后端技术
+├─ ⚛️ 前端开发
+└─ 🧠 算法与面试
+```
+
+---
+
+### 3️⃣ 样式系统升级 ✅
+
+#### 变更清单
+- **tailwind.config.js**: 新建
+  - 蓝色色系定义 (#2160fd)
+  - 青色色系支持
+  - 粉色色系支持
+  - 响应式断点优化
+  
+- **postcss.config.js**: 新建
+  - PostCSS 处理管道配置
+  
+- **custom.css**: 重写
+  - 原有 Infima 主色替换为蓝色 (#2160fd)
+  - 增加 Tailwind 导入（@import）
+  - 新增 CSS 变量系统（支持深色模式）
+  - 新增 hero 背景渐变
+
+#### 颜色对照表
+| 用途 | 颜色 | 十六进制 | RGB |
+|------|------|---------|-----|
+| 主色 (Primary) | 蓝色 | #2160fd | rgb(33 96 253) |
+| 悬停强调 | 深蓝 | #1850d8 | - |
+| 次色 (Secondary) | 青色 | #06b6d4 | - |
+| 三色 (Tertiary) | 粉色 | #ec4899 | - |
+
+---
+
+### 4️⃣ 内容架构规划 ✅
+
+#### 文档位置
+- `ARCHITECTURE_PLAN.md` - 完整规划书
+
+#### 结构概览
+```
+一级菜单 (4 类)
+├─ 📚 技术文档
+│  ├─ ⚙️ 后端技术 (Java/Spring/Database/MQ/分布式)
+│  ├─ ⚛️ 前端开发 (React/Vue/工程化/跨端)
+│  └─ 🧠 算法与面试 (数据结构/算法/系统设计)
+├─ 🛠️ 工具与资源 (best practices/links/reading)
+├─ 📝 Blog (分享与资讯)
+└─ GitHub (开源)
+```
+
+#### 内容分级（学习路径）
+1. **快速入门** (⏱️ 5-10 分钟) - 适合初学
+2. **深度学习** (⏱️ 30 分钟-1 小时) - 详解原理
+3. **性能优化** (⏱️ 1-2 小时) - 高级技巧
+4. **面试突破** (⏱️ 灵活) - 频考题
+
+---
+
+## 🚀 下一步操作
+
+### 步骤 1: 本地验证 (NOW)
+```bash
+cd /opt/cyy/code-docs
+
+# 若未完成 npm install，先安装依赖
+npm install
+
+# 启动开发服务器
+npm start
+
+# 验证内容：
+# ✅ 首页 3 个卡片是否显示
+# ✅ 卡片 hover 是否有蓝色效果
+# ✅ 菜单是否显示下拉箭头
+# ✅ 深色模式是否正常
+```
+
+### 步骤 2: 迁移现有内容 (Week 1)
+```
+当前文件：
+docs/
+├─ intro-docs.mdx ✅ 保留
+├─ backend-doc/     ✅ 已有结构
+├─ frontend-doc/    ✅ 已有结构
+├─ LeetCode/        ✅ 已有结构
+└─ ...
+
+需要处理：
+1. 更新 sidebars.ts 以支持新菜单
+2. 验证所有链接有效性
+3. 补充缺失的 intro-docs.md 文件
+```
+
+### 步骤 3: 菜单链接修复 (Week 1)
+在 navbar 中验证以下路由存在：
+- `/docs/backend-doc/intro-docs`
+- `/docs/frontend-doc/intro-docs`
+- `/docs/LeetCode/intro-docs`
+
+### 步骤 4: 内容扩充计划 (Phase 2)
+根据 ARCHITECTURE_PLAN.md 逐步添加：
+
+**高优先级**:
+- [ ] Spring Framework 核心（5-8 篇）
+- [ ] React Hooks 深入（3-5 篇）
+- [ ] LeetCode 精选题库（10-15 题）
+
+**中优先级**:
+- [ ] JVM 调优系列
+- [ ] Vue 3 完整指南
+- [ ] 系统设计案例
+
+**低优先级**:
+- [ ] 最佳实践合集
+- [ ] 工具对比
+- [ ] 推荐书籍
+
+---
+
+## 🎨 设计效果预览
+
+### 首页卡片效果
+```
+┌─────────────────────────────────┐
+│ [⚙️]  后端技术                    │ → hover: border-blue, text-blue, arrow-in
+│                                 │
+│ 深度讲解 Spring Boot / Spring    │
+│ Cloud 核心概念、最佳实践...      │
+│                                 │
+│                              → │ (animated)
+└─────────────────────────────────┘
+
+动效细节：
+- 渐变背景从灰→蓝色渐变
+- 图标放大 10%，背景变蓝
+- 标题变成蓝色 (#2160fd)
+- 箭头从右侧滑入
+- 整体卡片上移 4px
+- 投影增强，显示深度感
+```
+
+### 顶部菜单效果
+```
+┌─ CodeDocs ─────┐  [📚 技术文档 ▼]  [🛠️ 工具 ▼]  [📝 Blog]  [GitHub]
+                                        ↓
+                                    ┌─────────────┐
+                                    │ ⚙️ 后端    │
+                                    │ ⚛️ 前端    │
+                                    │ 🧠 算法    │
+                                    └─────────────┘
+```
+
+---
+
+## 📊 检查清单
+
+- [ ] npm install 完成
+- [ ] npm start 本地验证通过
+- [ ] 首页卡片显示正常
+- [ ] 卡片 hover 效果生效
+- [ ] 菜单下拉正常
+- [ ] 所有链接有效
+- [ ] 深色模式测试
+- [ ] 响应式（手机端）测试
+
+---
+
+## 📁 文件变更总结
+
+| 文件 | 操作 | 说明 |
+|-----|------|------|
+| `src/components/HomepageFeatures.tsx` | ✏️ 修改 | 新组件结构 + 3 色卡片 |
+| `src/components/HomepageFeatures.module.css` | ✏️ 重写 | 完整的悬停动效 |
+| `src/pages/index.tsx` | ✏️ 修改 | 新的 CTA 按钮 |
+| `src/css/custom.css` | ✏️ 重写 | 主色改蓝 + Tailwind 导入 |
+| `docusaurus.config.ts` | ✏️ 修改 | 多级菜单配置 |
+| `tailwind.config.js` | ✨ 新建 | Tailwind 配置 |
+| `postcss.config.js` | ✨ 新建 | PostCSS 管道 |
+| `package.json` | ✏️ 修改 | 已升级依赖版本 |
+| `ARCHITECTURE_PLAN.md` | ✨ 新建 | 内容架构规划 |
+
+---
+
+## 🆘 常见问题
+
+### Q1: npm install 很慢？
+**A**: 使用 pnpm 或 npm 阿里镜像加速
+```bash
+npm install -g pnpm
+pnpm install
+```
+
+### Q2: Tailwind 样式未生效？
+**A**: 需要先完成 `npm install`，再运行 `npm start`
+
+### Q3: 首页链接 404？
+**A**: 检查 `/docs` 下是否存在对应的文件夹：
+```bash
+ls -la docs/
+# 应该看到：backend-doc/ frontend-doc/ LeetCode/
+```
+
+### Q4: 深色模式图标不清晰？
+**A**: 在 custom.css 中针对 `[data-theme='dark']` 添加 color 覆盖
+
+---
+
+## 📞 后续支持
+
+需要进一步升级：
+1. **搜索优化** - 集成 Algolia 优化查询
+2. **版本管理** - 为 SDK 文档添加版本切换（参考 dyte-io/docs）
+3. **API 文档** - 集成 OpenAPI / Swagger
+4. **交互示例** - 嵌入 CodeSandbox / RunKit
+5. **反馈系统** - 页面评分与问题报告
+
+---
+
+## 参考资源
+
+- 📖 [Docusaurus 官方文档](https://docusaurus.io/)
+- 🎨 [Tailwind CSS](https://tailwindcss.com/)
+- 🔗 [dyte-io/docs 源代码](https://github.com/dyte-io/docs)
+- 📚 [MDN 文档结构参考](https://developer.mozilla.org/)
+
+---
+
+**最后更新**: 2026-05-06  
+**更新者**: CodeDocs 升级系统  
+**版本**: v2.0
@@ -50,12 +50,51 @@ const config: Config = {
      },
      items: [
        {
-          type: 'doc',
-          docId: 'intro-docs',
+          type: 'dropdown',
+          label: '📚 技术文档',
          position: 'left',
-          label: 'Docs',
+          items: [
+            {
+              type: 'doc',
+              docId: 'backend-doc/intro-docs',
+              label: '⚙️ 后端技术',
+            },
+            {
+              type: 'doc',
+              docId: 'frontend-doc/intro-docs',
+              label: '⚛️ 前端开发',
+            },
+            {
+              type: 'doc',
+              docId: 'LeetCode/intro-docs',
+              label: '🧠 算法与面试',
+            },
+          ],
+        },
+        {
+          type: 'dropdown',
+          label: '🛠️ 工具与资源',
+          position: 'left',
+          items: [
+            {
+              label: '📖 最佳实践',
+              href: '#',
+            },
+            {
+              label: '🔗 常用链接',
+              href: '#',
+            },
+            {
+              label: '📚 推荐阅读',
+              href: '#',
+            },
+          ],
+        },
+        { 
+          to: '/blog', 
+          label: '📝 Blog', 
+          position: 'left' 
        },
-        { to: '/blog', label: 'Blog', position: 'left' },
        {
          href: 'https://github.com/chuyaoyuan/code-docs',
          label: 'GitHub',
@@ -16,8 +16,8 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
-    "@docusaurus/core": "^3.7.0",
-    "@docusaurus/preset-classic": "^3.7.0",
+    "@docusaurus/core": "^3.10.1",
+    "@docusaurus/preset-classic": "^3.10.1",
    "@mdx-js/react": "^3.0.0",
    "clsx": "^2.1.1",
    "react": "^18.3.1",
@@ -26,10 +26,16 @@
    "remark-math": "^6.0.0"
  },
  "devDependencies": {
-    "@docusaurus/tsconfig": "^3.7.0",
+    "@docusaurus/tsconfig": "^3.10.1",
+    "autoprefixer": "^10.5.0",
    "dotenv": "^16.4.7",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.2.4",
    "typescript": "^5.4.5"
  },
+  "overrides": {
+    "serialize-javascript": "7.0.5"
+  },
  "browserslist": {
    "production": [
      ">0.5%",
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -3,11 +3,168 @@
 .features {
  display: flex;
  align-items: center;
-  padding: 2rem 0;
+  padding: 3rem 0;
+  width: 100%;
+  background: linear-gradient(135deg, rgba(33, 96, 253, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
+}
+
+.featureGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
  width: 100%;
 }

-.featureSvg {
-  height: 200px;
-  width: 200px;
+@media (max-width: 768px) {
+  .featureGrid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+/* Feature Card Styling */
+.featureCard {
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  height: 100%;
+}
+
+.cardInner {
+  position: relative;
+  overflow: hidden;
+  border-radius: 1.5rem;
+  border: 1px solid rgba(33, 96, 253, 0.1);
+  background: linear-gradient(135deg, rgba(33, 96, 253, 0.02), rgba(6, 182, 212, 0.02));
+  padding: 1.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.featureCard:hover .cardInner {
+  border-color: var(--card-color, #2160fd);
+  background: linear-gradient(135deg, rgba(33, 96, 253, 0.08), rgba(6, 182, 212, 0.08));
+  box-shadow: 0 10px 30px rgba(33, 96, 253, 0.1),
+              0 0 1px rgba(33, 96, 253, 0.3);
+  transform: translateY(-4px);
+}
+
+.cardIcon {
+  font-size: 2.5rem;
+  line-height: 1;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(33, 96, 253, 0.1);
+  border-radius: 1rem;
+  transition: all 0.3s ease;
+}
+
+.featureCard:hover .cardIcon {
+  background: var(--card-color, #2160fd);
+  color: white;
+  transform: scale(1.1);
+}
+
+.cardContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cardTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--docs-color-text, #1f2937);
+  transition: color 0.3s ease;
+}
+
+[data-theme='dark'] .cardTitle {
+  color: #f3f4f6;
+}
+
+.featureCard:hover .cardTitle {
+  color: var(--card-color, #2160fd);
+}
+
+.cardDescription {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin: 0;
+  color: var(--docs-color-text-secondary, #6b7280);
+  transition: color 0.3s ease;
+}
+
+[data-theme='dark'] .cardDescription {
+  color: #d1d5db;
+}
+
+.cardGradient {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  background: radial-gradient(circle at top right, rgba(33, 96, 253, 0.15), transparent 70%);
+  z-index: 0;
+}
+
+.featureCard:hover .cardGradient {
+  opacity: 1;
+}
+
+.cardArrow {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  font-size: 1.5rem;
+  opacity: 0;
+  transform: translate(8px, -8px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--card-color, #2160fd);
+}
+
+.featureCard:hover .cardArrow {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
+/* Animation */
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.cardInner {
+  animation: slideInUp 0.5s ease-out;
+}
+
+/* Stagger animation for cards */
+:nth-child(1) .cardInner {
+  animation-delay: 0.1s;
+}
+
+:nth-child(2) .cardInner {
+  animation-delay: 0.2s;
+}
+
+:nth-child(3) .cardInner {
+  animation-delay: 0.3s;
 }
@@ -1,38 +1,87 @@
 import React from 'react';
-import clsx from 'clsx';
+import Link from '@docusaurus/Link';
 import styles from './HomepageFeatures.module.css';

 interface FeatureItem {
+  id: string;
  title: string;
  description: string;
+  icon: React.ReactNode;
+  link: string;
+  color: string;
+  gradient: string;
 }

 const FeatureList: FeatureItem[] = [
  {
-    title: '📚 系统化文档',
+    id: 'backend',
+    title: '后端技术',
    description:
-      '涵盖后端（Spring Boot/Cloud）、前端（React/Vue）和算法（LeetCode），分门别类，清晰索引。',
+      '深度讲解 Spring Boot / Spring Cloud 核心概念、最佳实践与微服务架构，含真实项目案例。',
+    icon: '⚙️',
+    link: '/docs/backend-doc/intro-docs',
+    color: '#2160fd',
+    gradient: 'from-blue-500/20 to-transparent',
  },
  {
-    title: '⚡ 快速检索',
+    id: 'frontend',
+    title: '前端开发',
    description:
-      '集成 Algolia DocSearch，毫秒级全文检索，快速定位任意知识点。',
+      '系统化学习 React / Vue 现代框架、状态管理、组件设计与性能优化，打造高质量前端应用。',
+    icon: '⚛️',
+    link: '/docs/frontend-doc/intro-docs',
+    color: '#06b6d4',
+    gradient: 'from-cyan-500/20 to-transparent',
  },
  {
-    title: '🌐 持续更新',
+    id: 'algorithms',
+    title: '算法与面试',
    description:
-      '由技术团队持续维护，定期同步最新技术栈实践和面试题解析。',
+      '精选 LeetCode 题目分类讲解、编程面试题库与数据结构深度分析，快速突破算法关卡。',
+    icon: '🧠',
+    link: '/docs/LeetCode/intro-docs',
+    color: '#ec4899',
+    gradient: 'from-pink-500/20 to-transparent',
  },
 ];

-function Feature({ title, description }: FeatureItem): JSX.Element {
+interface FeatureCardProps extends FeatureItem {}
+
+function FeatureCard({
+  title,
+  description,
+  icon,
+  link,
+  color,
+  gradient,
+}: FeatureCardProps): JSX.Element {
  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
+    <Link
+      to={link}
+      className={`${styles.featureCard} group`}
+      style={
+        {
+          '--card-color': color,
+        } as React.CSSProperties & { '--card-color': string }
+      }
+    >
+      <div className={styles.cardInner}>
+        {/* Icon */}
+        <div className={styles.cardIcon}>{icon}</div>
+
+        {/* Content */}
+        <div className={styles.cardContent}>
+          <h3 className={styles.cardTitle}>{title}</h3>
+          <p className={styles.cardDescription}>{description}</p>
        </div>
+
+        {/* Gradient Background */}
+        <div className={`${styles.cardGradient} ${gradient}`}></div>
+
+        {/* Arrow Icon */}
+        <div className={styles.cardArrow}>→</div>
      </div>
+    </Link>
  );
 }

@@ -40,9 +89,9 @@ export default function HomepageFeatures(): JSX.Element {
  return (
    <section className={styles.features}>
      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
+        <div className={styles.featureGrid}>
+          {FeatureList.map((props) => (
+            <FeatureCard key={props.id} {...props} />
          ))}
        </div>
      </div>
@@ -5,21 +5,83 @@
 * work well for content-centric websites.
 */

+/* Import Tailwind CSS */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary: #2160fd;
+  --ifm-color-primary-dark: #1850d8;
+  --ifm-color-primary-darker: #1442c4;
+  --ifm-color-primary-darkest: #102ca0;
+  --ifm-color-primary-light: #4d7ffe;
+  --ifm-color-primary-lighter: #7a9eff;
+  --ifm-color-primary-lightest: #a8c0ff;
+  
+  --docs-color-primary: rgb(33 96 253);
+  --docs-color-primary-100: rgb(26 144 255);
+  --docs-color-primary-200: rgb(33 96 253);
+  
+  --docs-color-secondary-1000: rgb(0 0 0);
+  --docs-color-secondary-900: rgb(25 25 25);
+  --docs-color-secondary-800: rgb(38 38 38);
+  --docs-color-secondary-700: rgb(71 71 71);
+  
+  --docs-color-text: rgb(31 41 55);
+  --docs-color-text-100: rgb(107 114 128);
+  --docs-color-text-400: rgb(153 153 153);
+  
+  --docs-color-text-secondary: rgb(107 114 128);
+  
  --ifm-code-font-size: 95%;
 }

+[data-theme='dark'] {
+  --docs-color-text: rgb(243 244 246);
+  --docs-color-text-secondary: rgb(209 213 219);
+}
+
+/* Code highlighting */
 .docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
 }
+
+/* Enhanced link hover decoration */
+.navbar__link,
+.menu__link,
+.table-of-contents__link,
+.pagination-nav,
+.footer {
+  --ifm-link-hover-decoration: none;
+}
+
+.menu__link {
+  --ifm-link-hover-color: var(--ifm-color-primary);
+}
+
+/* Smooth transitions */
+* {
+  @apply transition-colors;
+}
+
+/* Hero section enhancements */
+.hero {
+  background: linear-gradient(
+    135deg,
+    rgba(33, 96, 253, 0.05) 0%,
+    rgba(6, 182, 212, 0.05) 100%
+  );
+}
+
+.hero--primary {
+  background-color: #f9fafb;
+}
+
+[data-theme='dark'] .hero--primary {
+  background-color: #1a1a2e;
+}
@@ -11,13 +11,28 @@ function HomepageHeader(): JSX.Element {
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <h1 className="hero__title">🚀 {siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p style={{ fontSize: '0.95rem', color: 'rgba(0,0,0,0.6)', marginBottom: '1.5rem' }}>
+          为全栈、全端工程师精心打造的<strong>技术文档 + 算法面试 + 最佳实践</strong>一站式参考库
+        </p>
        <div className={styles.buttons}>
+          <Link
+            className="button button--primary button--lg"
+            to="/docs/backend-doc/intro-docs">
+            ⚙️ 后端技术
+          </Link>
          <Link
            className="button button--secondary button--lg"
-            to="/docs/intro-docs">
-            Code Docs 介绍 - 1min ⏱️
+            to="/docs/frontend-doc/intro-docs"
+            style={{ marginLeft: '1rem' }}>
+            ⚛️ 前端开发
+          </Link>
+          <Link
+            className="button button--outline button--lg"
+            to="/docs/LeetCode/intro-docs"
+            style={{ marginLeft: '1rem' }}>
+            🧠 算法面试
          </Link>
        </div>
      </div>
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  corePlugins: {
+    preflight: false,
+  },
+  darkMode: ['class', '[data-theme="dark"]'],
+  content: ['./src/**/*.{jsx,tsx,html}', './docs/**/*.{jsx,tsx,html}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f5ff',
+          100: '#e0ebff',
+          200: '#c5d9ff',
+          300: '#a3bdff',
+          400: '#7a99ff',
+          500: '#2160fd',
+          600: '#1e4fd4',
+          700: '#1939a8',
+          800: '#15278a',
+          900: '#121d70',
+        },
+        slate: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      spacing: {
+        '1': '0.25rem',
+        '2': '0.5rem',
+        '3': '0.75rem',
+        '4': '1rem',
+        '6': '1.5rem',
+        '8': '2rem',
+        '12': '3rem',
+        '16': '4rem',
+        '20': '5rem',
+        '24': '6rem',
+      },
+      borderRadius: {
+        'sm': '0.375rem',
+        'md': '0.5rem',
+        'lg': '0.75rem',
+        'xl': '1rem',
+        '2xl': '1.5rem',
+        '3xl': '2rem',
+      },
+      boxShadow: {
+        'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'md': '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+        'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+        'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1)',
+      },
+      transitionProperty: {
+        'colors': 'color, background-color, border-color, text-decoration-color, fill, stroke',
+        'all': 'all',
+      },
+      transitionDuration: {
+        '200': '200ms',
+        '300': '300ms',
+        '500': '500ms',
+      },
+    },
+  },
+  plugins: [],
+};