完成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特性。

docs/RichText使用指南.md

@@ -0,0 +1,91 @@
+# Taro RichText 富文本组件使用指南
+
+## 基本用法
+
+```tsx
+import { RichText } from '@tarojs/components';
+
+// 显示HTML字符串
+<RichText 
+  nodes={htmlString} 
+  space="nbsp"
+/>
+```
+
+## 主要属性
+
+### nodes
+- **类型**: `string | Array<Node>`
+- **说明**: 富文本内容，支持HTML字符串或节点数组
+
+### space
+- **类型**: `'ensp' | 'emsp' | 'nbsp'`
+- **说明**: 显示连续空格的方式
+  - `ensp`: 中文字符空格一半大小
+  - `emsp`: 中文字符空格大小  
+  - `nbsp`: 根据字体设置的空格大小
+
+### selectable
+- **类型**: `boolean`
+- **默认值**: `false`
+- **说明**: 富文本是否可以长按选中
+
+## HTML内容处理
+
+### 支持的HTML标签
+- 文本标签: `p`, `span`, `div`, `h1-h6`, `strong`, `b`, `em`, `i`
+- 列表标签: `ul`, `ol`, `li`
+- 其他标签: `img`, `a`, `br`, `hr`
+
+### 样式处理
+富文本内容的样式通过CSS全局样式定义：
+
+```scss
+.content {
+  :global {
+    p { margin: 16px 0; }
+    img { max-width: 100%; }
+    // 更多样式...
+  }
+}
+```
+
+## 实际应用示例
+
+### 文章详情页面
+```tsx
+<View className={'content text-gray-700 text-sm'}>
+  <RichText
+    nodes={item?.content || ''}
+    space="nbsp"
+  />
+</View>
+```
+
+### 协议页面
+```tsx
+<View className={'content text-gray-700 text-sm p-4'}>
+  <RichText nodes={content}/>
+</View>
+```
+
+## 注意事项
+
+1. **安全性**: RichText会直接渲染HTML，注意防范XSS攻击
+2. **性能**: 大量富文本内容可能影响性能
+3. **兼容性**: 不同平台对HTML标签支持程度不同
+4. **样式**: 使用`:global`确保样式能正确应用到富文本内容
+
+## 常见问题
+
+### 图片不显示
+- 检查图片URL是否正确
+- 确保图片域名在小程序白名单中
+
+### 样式不生效
+- 使用`:global`包裹富文本样式
+- 检查CSS选择器优先级
+
+### 内容被截断
+- 检查容器高度设置
+- 使用`max-width: 100%`防止内容溢出