📝 docs(stories): update homepage UI refactor documentation

- 修改组件样式集成状态描述，反映从tcb-theme.css到组件目录的迁移
- 更新文件变更记录，增加各组件样式文件的创建记录
- 添加样式架构演进说明，记录从集中式到组件化的样式管理转变
- 完善组件样式架构重构细节，明确每个组件的样式文件和导入方式

CLAUDE.md

@@ -19,4 +19,5 @@
 - 必须用中文回答
 - **git提交**: 当遇到git锁文件冲突时，使用单条命令：`rm -f /mnt/code/184-172-template-6/.git/index.lock && git add <文件> && git commit -m "提交信息"`
 - **测试调试**: 使用 `pnpm test -t "测试名称"` 来运行特定测试查看详细信息
-- **表单调试**: 表单提交失败时，在表单form onsubmit=form.handleSubmit的第二个参数中加console.debug来看表单验证错误，例如：`form.handleSubmit(handleSubmit, (errors) => console.debug('表单验证错误:', errors))`
+- **表单调试**: 表单提交失败时，在表单form onsubmit=form.handleSubmit的第二个参数中加console.debug来看表单验证错误，例如：`form.handleSubmit(handleSubmit, (errors) => console.debug('表单验证错误:', errors))`
+- 类型检查 可以用 pnpm typecheck 加 grep来过滤要检查的 指定文件

docs/stories/001.004.homepage-ui-refactor.md

@@ -305,11 +305,11 @@ export default function TDesignSwiper({
 - ✅ 已对照：`mini/tdesign/toast/` 目录结构和功能
 - ✅ 已对照：`mini/tdesign/tabs/` 目录结构和功能
 - ✅ 已对照：`tcb-shop-demo/components/goods-card/` 目录结构和功能
-- ✅ 已集成：tcb-theme.css 中的 Search 组件样式
-- ✅ 已集成：tcb-theme.css 中的 Swiper 组件样式
-- ✅ 已集成：tcb-theme.css 中的 Toast 组件样式
-- ✅ 已集成：tcb-theme.css 中的 Tabs 组件样式
-- ✅ 已集成：tcb-theme.css 中的 Tabs 组件样式
+- ✅ 已重构：Search 组件样式移动到组件目录 (index.css)
+- ✅ 已重构：Swiper 组件样式移动到组件目录 (index.css)
+- ✅ 已重构：Toast 组件样式移动到组件目录 (index.css)
+- ✅ 已重构：Tabs 组件样式移动到组件目录 (index.css)
+- ✅ 已重构：商品卡片组件样式移动到组件目录 (index.css)
 - ✅ 已创建：商品卡片组件专用样式文件 (index.css)
 - ✅ 已优化：组件样式架构，将商品卡片样式移动到组件目录
 - ✅ 已添加：Tabs 组件 CSS 变量到 :root 主题系统
@@ -328,7 +328,15 @@ export default function TDesignSwiper({
 - **创建**: `mini/src/components/tdesign/tabs/index.tsx` - TDesign Tabs 组件
 - **创建**: `mini/src/components/goods-card/index.tsx` - 商品卡片组件
 - **创建**: `mini/src/components/goods-card/index.css` - 商品卡片组件样式
-- **修改**: `mini/src/tcb-theme.css` - 添加 Search、Swiper、Toast、Tabs 组件样式
+- **创建**: `mini/src/components/tdesign/search/index.css` - Search 组件样式
+- **创建**: `mini/src/components/tdesign/swiper/index.css` - Swiper 组件样式
+- **创建**: `mini/src/components/tdesign/toast/index.css` - Toast 组件样式
+- **创建**: `mini/src/components/tdesign/tabs/index.css` - Tabs 组件样式
+- **修改**: `mini/src/tcb-theme.css` - 移除组件样式，保留主题变量和工具类
+- **修改**: `mini/src/components/tdesign/search/index.tsx` - 添加 CSS 导入
+- **修改**: `mini/src/components/tdesign/swiper/index.tsx` - 添加 CSS 导入
+- **修改**: `mini/src/components/tdesign/toast/index.tsx` - 添加 CSS 导入
+- **修改**: `mini/src/components/tdesign/tabs/index.tsx` - 添加 CSS 导入
 - **修改**: `docs/stories/001.004.homepage-ui-refactor.md` - 更新任务状态和开发记录
 
 ### 实施经验总结
@@ -347,9 +355,10 @@ export default function TDesignSwiper({
   - 支持自定义颜色和大小
 
 #### 3. 样式集成策略
-- **样式位置**: 将组件样式统一集成到 `mini/src/tcb-theme.css` 中
+- **样式位置**: 组件样式放在组件目录下的 `index.css` 文件中，主题变量和工具类放在 `mini/src/tcb-theme.css` 中
 - **命名规范**: 使用 `tdesign-` 前缀避免与 Tailwind CSS 类名冲突
 - **设计规范**: 严格遵循 tcb-shop-demo 的设计规范（圆角32rpx，高度64rpx，主色调 #fa550f）
+- **架构演进**: 从集中式样式管理演进为组件化样式管理，提高模块化和可维护性
 
 #### 4. 开发流程优化
 - **验证方法**: 使用 `pnpm typecheck | grep` 过滤检查特定组件编译错误
@@ -378,9 +387,14 @@ export default function TDesignSwiper({
 
 #### 8. 组件样式架构优化
 - **样式分离**: 将组件专用样式放在组件目录下，保持组件独立性
-- **主题系统**: 通用主题变量和组件样式放在 tcb-theme.css 中
+- **主题系统**: 通用主题变量和工具类放在 tcb-theme.css 中，组件样式独立
 - **导入管理**: 组件通过 import 导入自己的样式文件
 - **维护性**: 组件样式与组件逻辑在同一目录，便于维护
+- **架构重构**: 已完成所有TDesign组件和商品卡片组件的样式架构重构
+  - 每个组件都有自己的 `index.css` 文件
+  - 从 `tcb-theme.css` 中移除了所有组件特定样式
+  - 组件通过 `import './index.css'` 导入自己的样式
+  - 保持了TypeScript编译正常和组件功能完整
 
 #### 9. 后续开发建议
 - **组件测试**: 为每个组件创建单元测试