需用vue 3.4 global版快速搭建搜狐风格ai问答页，通过composition api监听输入、预设5条includes匹配的模拟回答，结合localstorage缓存、flex布局、css动画与svg图标实现3秒内首屏渲染。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要快速搭建一个类似搜狐简单AI问答页的前端界面，需兼顾用户输入响应速度、答案展示清晰度与视觉简洁性。页面必须在3秒内完成首次问答渲染，且不依赖后端API即可模拟真实交互流程。
构建基础HTML结构
新建index.html文件，写入最小化语义化骨架：
里只保留一个，其余标签全部删掉。这一步不能加任何class或style属性，否则后续CSS重置成本翻倍。在
中引入CDN版Vue 3.4（非兼容版本），用<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>加载。【必须用global版本，否则setup语法无法生效】
实现问答交互逻辑
方法一：使用Vue Composition API直接内联脚本
在
底部添加<script type="module">，定义ref变量question和answer，用watchEffect监听question变化——当输入框内容改变时，自动触发模拟回答函数。 <p>模拟回答函数需内置5条预设映射：如输入“天气”返回“今日晴，26℃”，输入“时间”返回“北京时间14:32”。每条映射用includes判断而非全等匹配，避免用户多打空格导致失败。 <p>方法二：用localStorage缓存历史问答 <p>每次提交后执行JSON.parse(localStorage.getItem('qaLog') || '[]').concat({q: question.value, a: answer.value}) → 再写回localStorage。这一步不做防抖处理，因为用户连续提问频率低于1次/秒，没必要增加复杂度。 <h2>设计问答卡片UI <p>第一步：用Flex布局垂直居中整个问答容器，min-height设为100vh，padding-top加80px避开固定导航栏。 <p>第二步：用户问题用深灰#333字体，左对齐；AI回答用蓝灰#2563eb字体，右对齐。两者都加border-radius: 12px，但用户侧用background:#f9fafb，AI侧用background:#f1f5f9。 <p>第三步：给AI回答块加transition: all 0.2s ease，配合opacity从0→1+transform translateY(-5px)→0实现入场动画。这一步若漏掉will-change: opacity，iOS Safari会闪屏。 <p>第四步：在回答末尾插入一个小图标，用SVG inline写法，尺寸16×16，fill="#94a3b8"。不要用iconfont，避免额外HTTP请求拖慢首屏。 <h2>接入真实AI接口（可选） <p>替换模拟函数为fetch调用：向https://api.sohu-ai/v1/chat 发起POST请求，body传{prompt: question.value, model: "sohu-light"}。注意header必须带Authorization: Bearer sk-xxx，否则返回401。 <p>请求失败时显示“网络不稳定，请重试”，而不是抛出未捕获异常。用try/catch包裹fetch，并在catch里给answer.value赋值该提示语。 </script>
