完成AI问答模块

docs/PC端手机版样式指南.md

@@ -0,0 +1,111 @@
+# PC端显示手机版样式指南
+
+## 功能说明
+
+本项目已实现PC端浏览器中显示手机版样式的功能，让用户在大屏幕设备上也能体验到移动端的界面效果。
+
+## 实现原理
+
+通过CSS媒体查询和容器限制，在PC端（屏幕宽度≥768px）时：
+1. 限制页面最大宽度为414px（iPhone 6/7/8 Plus尺寸）
+2. 页面居中显示
+3. 添加阴影和圆角效果，模拟手机屏幕
+4. 设置渐变背景，增强视觉效果
+
+## 使用方法
+
+### 1. 页面组件包装
+
+在需要支持PC端手机版显示的页面组件中，使用 `mobile-container` 类包装：
+
+```tsx
+function MyPage() {
+  return (
+    <div className="mobile-container">
+      {/* 页面内容 */}
+    </div>
+  );
+}
+```
+
+### 2. 样式文件引入
+
+确保在全局样式文件中引入了手机版容器样式：
+
+```scss
+// src/app.scss
+@import './styles/mobile-container.scss';
+```
+
+## 响应式断点
+
+- **移动端** (≤767px): 保持原有全屏显示
+- **平板端** (768px-1023px): 414px宽度居中显示
+- **桌面端** (1024px-1439px): 375px宽度居中显示  
+- **大屏端** (≥1440px): 414px宽度居中显示
+
+## 视觉效果
+
+### PC端效果
+- 页面宽度: 414px
+- 居中显示
+- 圆角边框: 12px
+- 阴影效果: 0 0 30px rgba(0, 0, 0, 0.15)
+- 渐变背景: 蓝紫色渐变
+
+### 移动端效果
+- 保持原有全屏显示
+- 无额外样式影响
+
+## 已适配页面
+
+以下页面已添加手机版容器支持：
+
+1. **首页** (`src/pages/index/index.tsx`)
+2. **文章列表** (`src/custom/article/article.tsx`)
+3. **文章详情** (`src/pages/article/detail.tsx`)
+4. **用户中心** (`src/pages/user/user.tsx`)
+
+## 添加新页面支持
+
+为新页面添加PC端手机版显示支持：
+
+```tsx
+// 1. 导入样式（如果使用独立样式文件）
+import './page.scss';
+
+// 2. 使用容器包装
+function NewPage() {
+  return (
+    <div className="mobile-container">
+      {/* 页面内容 */}
+    </div>
+  );
+}
+```
+
+## 注意事项
+
+1. **固定定位元素**: 使用 `fixed` 定位的元素需要特别处理，确保在PC端不超出容器范围
+2. **底部导航**: TabBar组件已自动适配PC端样式
+3. **图片资源**: 确保图片能够正确缩放适应容器宽度
+4. **交互体验**: PC端保持移动端的交互方式（点击、滑动等）
+
+## 自定义配置
+
+可以通过修改 `src/styles/mobile-container.scss` 来调整：
+
+- 容器宽度
+- 阴影效果
+- 圆角大小
+- 背景颜色
+- 响应式断点
+
+## 浏览器兼容性
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+支持所有现代浏览器的CSS Grid和Flexbox特性。