docs(readme): 更新项目结构与CSS规范说明

- 添加详细的项目目录结构图
- 补充CSS命名与样式组织规范
- 完善主题管理与第三方组件样式说明
- 更新部署与自定义指南链接描述
- 增加待办事项清单及已完成任务列表
- 修复文档中的拼写错误与格式问题

DEPLOY.md

@@ -92,6 +92,64 @@ server {
 }
 ```
 
+## 项目结构规范
+
+```
+Home/
+├── index.html              # 主页
+├── about.html              # 关于页面
+├── README.md               # 项目说明文档
+├── DEPLOY.md               # 部署与自定义指南
+├── LICENSE                 # 开源许可证
+├── CNAME                   # 自定义域名配置
+├── vercel.json             # Vercel 配置文件
+├── netlify.toml            # Netlify 配置文件
+├── _headers                # Netlify 安全头配置
+├── _redirects              # Netlify 重定向配置
+├── favicon.ico             # 网站图标
+├── apple-touch-icon.png    # iOS 主屏图标
+├── css/
+│   ├── about.css           # 关于页面样式
+│   ├── style.css           # 主页样式
+│   ├── artalk.css          # 评论系统样式
+│   └── iconfont.css        # 字体图标样式
+├── js/
+│   ├── config.js           # 全局配置文件
+│   ├── main.js             # 主页脚本
+│   ├── about.js            # 关于页面脚本
+│   ├── bj.js               # 背景效果脚本
+│   └── ...                 # 其他功能脚本
+├── data/
+│   ├── articles.json       # 文章数据
+│   └── ...                 # 其他数据文件
+└── images/
+    ├── home.png            # 主页预览图
+    ├── about-day.png       # 关于页面白天模式预览图
+    ├── about-night.png     # 关于页面夜间模式预览图
+    └── ...                 # 其他图片资源
+```
+
+## CSS 规范
+
+### 命名规范
+- 使用语义化类名，如 `.profile-content`、`.tech-wrapper`
+- 组件相关类名以组件名开头，如 `.bento-card`、`.glass-panel`
+- 状态类名使用 `is-*` 或 `has-*` 前缀，如 `.is-active`
+
+### 样式组织
+- 使用 CSS 自定义属性（变量）管理主题色和常用值
+- 遵循移动优先的响应式设计原则
+- 组件样式与全局样式分离，便于维护
+
+### 主题管理
+- 白天模式样式定义在 `:root` 选择器下
+- 夜间模式样式定义在 `[data-theme="night"]` 选择器下
+- 使用 `var(--variable-name)` 引用 CSS 变量
+
+### 第三方组件样式
+- 第三方组件样式独立成专门的 CSS 文件（如 artalk.css）
+- 避免污染主样式文件，保持样式文件职责单一
+
 ## 站点配置（js/config.js）
 
 - GitHub 与 RSS
@@ -136,11 +194,52 @@ server {
 - GitHub/RSS 数据为空
   - 检查 `SiteConfig` 中的用户名与 RSS 接口；或查看浏览器控制台网络请求
 
-## 进一步扩展
+## 拓展功能
 
-- 接入更多数据源（如 Twitter/知乎/掘金）
-- 为 3D 技术栈添加交互（点击跳链接、标签分组）
-- 增加文章详情页与分页列表
+### 添加新的数据源
+1. 在 `js/config.js` 中添加新的配置项
+2. 在 `js/about.js` 的 DataManager 类中添加新的数据获取方法
+3. 创建对应的数据渲染方法
+4. 在 HTML 中添加展示区域
+5. 在 CSS 中添加样式
+
+### 自定义主题色
+1. 修改 `css/about.css` 中的 CSS 变量
+2. 调整 `:root`（白天模式）和 `[data-theme="night"]`（夜间模式）下的颜色值
+3. 确保颜色搭配符合可访问性标准
+
+### 添加新的语言支持
+1. 在 `js/about.js` 的 I18nManager 类中添加新的语言字典
+2. 在 HTML 元素上添加对应的数据属性
+3. 更新语言切换逻辑
+
+## TODO List
+
+### 已完成
+- [x] 实现响应式布局，适配桌面、平板和手机设备
+- [x] 开发白天/夜间主题切换功能
+- [x] 实现中英文国际化支持
+- [x] 集成 Artalk 评论系统
+- [x] 添加 GitHub 项目展示功能
+- [x] 添加博客文章展示功能
+- [x] 实现技术栈 3D 球体效果
+- [x] 添加一键部署到 Vercel、Netlify 等平台的支持
+- [x] 实现移动端优化，包括可拖拽悬浮按钮
+- [x] 添加骨架屏加载效果
+- [x] 实现数据缓存机制，提升页面加载速度
+- [x] 添加淡入动画效果，提升用户体验
+
+### 待完成
+- [ ] 添加更多数据源（如 Twitter、知乎等）
+- [ ] 实现技术栈标签的交互功能（点击跳转链接等）
+- [ ] 添加文章详情页与分页列表功能
+- [ ] 实现更多的个性化定制选项
+- [ ] 添加键盘快捷键支持
+- [ ] 增加更多动画效果和交互细节
+- [ ] 实现 PWA 支持，支持离线访问
+- [ ] 添加更多主题选项（如高对比度模式等）
+- [ ] 实现深色模式下的图片优化处理
+- [ ] 添加无障碍访问支持（ARIA 属性完善）
 
 ---