企业官网建设流程全解析

1. 项目概述与核心价值

最近在整理一些旧项目时，翻到了一个挺有意思的仓库：fjosue4/deprecated-google-gemini-ui。光看标题，就能拆解出几个关键信息点：这是一个由开发者fjosue4创建的、围绕Google Gemini模型构建的、但已经被标记为“废弃”的用户界面项目。对于很多刚接触大模型应用开发，或者想快速搭建一个AI对话前端的开发者来说，这类项目就像一座“富矿”，即使它已经停止维护，其设计思路、代码结构和实现方式依然具有极高的学习和参考价值。

这个项目本质上是一个为Google Gemini API设计的Web前端界面。在AI应用开发如火如荼的今天，各大厂商都提供了强大的模型API，但如何将这些API封装成一个好用、美观、功能完整的交互界面，是每个开发者都可能面临的挑战。deprecated-google-gemini-ui项目就提供了一个现成的解决方案。虽然它被标记为“废弃”，但这通常意味着原作者可能转向了新的技术栈、或者Google官方推出了更完善的工具，导致这个第三方UI不再需要维护。然而，“废弃”不等于“无用”。恰恰相反，分析一个成熟但已停止演进的项目，能让我们更清晰地看到技术选型的演变、架构设计的得失，以及如何基于现有代码进行二次开发和现代化改造。

对于前端开发者、全栈工程师，或者任何想快速搭建AI对话Demo的爱好者，深入研究这个项目可以帮助你：第一，理解如何与Gemini这类流式响应的AI API进行前端集成；第二，学习构建一个功能相对完整的聊天应用所需的状态管理、消息渲染和交互逻辑；第三，获得一个可以快速修改、部署的代码基底，节省从零开始的时间。接下来，我们就从技术选型、代码结构、核心功能实现以及如何“复活”并改进这个项目等几个方面，进行一次深度拆解。

1.1 核心需求与场景解析

要理解这个项目的价值，首先要明确它解决了什么核心需求。Google提供了强大的Gemini API，开发者可以通过发送HTTP请求来获取模型的文本或多媒体生成结果。但是，直接使用API存在几个痛点：首先，交互体验是“请求-响应”式的，缺乏像ChatGPT那样流畅的、逐字输出的对话感；其次，API调用涉及密钥管理、请求构造、错误处理等底层细节，对非开发者或想快速演示的人来说门槛较高；最后，一个完整的应用还需要历史记录、会话管理、界面美化等外围功能。

deprecated-google-gemini-ui项目的核心需求，就是构建一个开箱即用、具备良好交互体验的Gemini模型Web客户端。它瞄准的应用场景非常明确：

1. 个人学习与实验：开发者或学生想快速体验Gemini模型的能力，无需自己编写前端界面，直接配置API密钥即可开始对话。
2. 内部工具与演示：团队内部可能需要一个轻量级的界面来测试不同提示词（Prompt）的效果，或者向非技术同事展示模型能力。
3. 二次开发的基础：作为一个功能相对完整的起点，其他开发者可以基于此代码，添加自定义功能（如文件上传、特定领域知识库集成、多模型切换等），快速构建属于自己的AI应用。

项目的“废弃”状态，反而使其成为一个绝佳的教学案例。我们可以毫无负担地分析它的每一行代码，理解其设计决策，并思考如果是今天来重写，我们会做出哪些不同的选择。例如，它可能使用了某个旧版本的UI框架或状态管理库，我们可以探讨如何将其迁移到更现代的技术栈上。这种“考古”与“重建”相结合的学习方式，往往比直接学习一个活跃项目更能加深理解。

2. 技术栈与架构设计拆解

虽然我们无法直接看到fjosue4/deprecated-google-gemini-ui仓库的完整代码（除非它被公开），但我们可以根据项目标题、描述以及同类项目的普遍实践，推断并重构其可能的技术栈和架构设计。一个典型的、面向现代浏览器的AI对话UI项目，通常会采用以下分层架构：

• 前端框架：React、Vue.js 或 Svelte。考虑到项目的名称和时代背景，使用 React 的可能性非常大，因为它拥有最庞大的生态和组件库。
• 状态管理：对于聊天应用，需要管理消息列表、当前会话、加载状态、API密钥（通常前端不持久化，仅本次会话有效）等。可能会使用 Context API + useReducer，或者更早期的 Redux，也可能是 Zustand、Jotai 等现代轻量级方案。
• 样式方案：可能是纯CSS、CSS Modules、Styled-components，或者像 Tailwind CSS 这样的实用类优先框架。Tailwind CSS 因其高效和定制性，在快速开发的原型项目中很受欢迎。
• HTTP客户端：用于调用 Gemini API。最常用的是axios或浏览器原生的fetchAPI。由于Gemini支持流式响应（Server-Sent Events），处理流数据会是关键。
• 构建工具：大概率是 Vite 或 Create React App (CRA)。Vite 凭借其极快的热更新和构建速度，已成为新项目的首选。

2.1 核心架构设计思路

一个聊天UI的核心架构通常围绕以下几个模块展开：

1. 应用状态（State）：这是应用的大脑。需要设计一个清晰的状态结构来存储所有会话数据。一个典型的结构可能如下所示：

   // 状态结构示例 const initialState = { apiKey: '', // 用户输入的API密钥 currentSession: { id: 'session-1', title: '新对话', messages: [], // 消息数组 model: 'gemini-pro', // 选择的模型 }, sessions: [], // 所有会话的列表 isStreaming: false, // 是否正在接收流式响应 error: null, // 错误信息 };

   状态管理的核心挑战在于处理消息的增量更新。当接收到流式响应时，需要不断地更新当前会话最后一条消息（通常是助手的消息）的内容。

2. 视图层（View）：这是用户看到和交互的部分。主要组件包括：

   • 会话列表侧边栏：显示所有历史对话，支持创建、删除、重命名会话。
   • 主聊天区域：展示消息气泡列表。用户消息通常靠右，助手消息靠左，并且助手消息需要支持流式文本的逐字渲染。
   • 输入区域：包含文本输入框、发送按钮，以及可能的附件、模型选择等功能按钮。
   • 设置面板：用于输入和配置API密钥、选择模型版本、调整温度（Temperature）等参数。

3. 逻辑层（Logic/Service）：这是连接状态和视图，并处理外部API调用的部分。关键服务是API 服务模块，它封装了所有与Google Gemini API的通信细节。

   // API服务模块示例 class GeminiService { constructor(apiKey) { this.apiKey = apiKey; this.baseURL = 'https://generativelanguage.googleapis.com/v1beta'; } async sendMessage(messages, model = 'gemini-pro', onStreamChunk) { const url = `${this.baseURL}/models/${model}:streamGenerateContent?key=${this.apiKey}`; // 构建符合Gemini API格式的请求体 const requestBody = { contents: messages.map(msg => ({ role: msg.sender === 'user' ? 'user' : 'model', parts: [{ text: msg.text }] })), // ... 其他参数如 temperature, top_p 等 }; const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); if (!response.ok) throw new Error(`API请求失败: ${response.status}`); // 处理流式响应 const reader = response.body.getReader(); const decoder = new TextDecoder(); let fullText = ''; while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); // 解析chunk中的JSON数据（Gemini流式响应每个chunk是一个独立的JSON对象） const lines = chunk.split('\n').filter(line => line.startsWith('data: ')); for (const line of lines) { const data = JSON.parse(line.replace('data: ', '')); const textChunk = data?.candidates?.[0]?.content?.parts?.[0]?.text || ''; fullText += textChunk; // 回调函数，用于实时更新UI if (onStreamChunk) onStreamChunk(fullText); } } return fullText; } }

   这个服务模块处理了认证、请求构造、流式响应解析等脏活累活，让组件逻辑保持干净。

2.2 项目“废弃”的常见技术原因分析

一个项目被标记为“废弃”（Deprecated），通常有以下几种技术原因，理解这些原因对我们后续的“复活”工作至关重要：

1. API重大变更：Google Gemini API可能经历了从Alpha、Beta到GA（正式发布）的版本迭代。API的端点（Endpoint）、请求/响应格式、认证方式可能发生了不兼容的变更，导致旧代码完全无法工作。维护者可能认为适配新API的成本高于重写。
2. 依赖过时：项目依赖的前端框架、库可能发布了不兼容的大版本更新（如React 16到18，Vue 2到3）。升级这些依赖项可能涉及大量代码重构，如果项目不是核心产品，维护者可能选择放弃。
3. 官方推出竞品：Google可能发布了官方的、功能更强大的AI应用平台（如Google AI Studio）或客户端SDK，使得这个第三方UI的价值大大降低。
4. 技术栈陈旧：项目可能使用了已被社区淘汰的技术栈（如类组件、过时的状态管理工具），缺乏继续维护的动力。
5. 维护者兴趣转移：个人项目最常见的结局。维护者可能找到了新的兴趣点，或者因时间精力不足而停止更新。

注意：在接手或学习一个废弃项目时，第一步永远是检查其package.json文件中的依赖版本和README.md中的说明，这能快速帮你判断项目“死亡”的技术原因。

3. 核心功能模块实现详解

基于上述架构分析，我们来深入探讨一个Gemini UI需要实现的几个核心功能模块，并给出具体的代码实现思路和避坑指南。我们将假设使用现代React（函数组件+Hooks）和Vite来构建。

3.1 流式对话消息的渲染与状态管理

这是AI聊天应用最具挑战性也最核心的部分。目标是在用户发送消息后，立即在界面中创建一个“助手”消息气泡，并随着API流式返回的数据，实时地、逐字地在这个气泡中填充文本。

实现方案与步骤：

1. 状态设计：我们使用useReducer或 Zustand 来管理复杂的聊天状态。每条消息是一个对象。

   // 消息对象结构 { id: 'msg_123', role: 'user' | 'assistant', // 发送者 content: 'Hello, Gemini!', // 完整内容 timestamp: Date.now(), isStreaming: false, // 仅当role为'assistant'且正在接收流时设为true }

2. 发送消息与初始化流：

   const [inputText, setInputText] = useState(''); const { sessions, currentSessionId, appendMessage, updateMessage } = useChatStore(); // 假设使用Zustand const handleSend = async () => { if (!inputText.trim() || !apiKey) return; // 1. 添加用户消息到UI const userMessage = { id: generateId(), role: 'user', content: inputText }; appendMessage(currentSessionId, userMessage); setInputText(''); // 2. 添加一个初始为空的助手消息，并标记为流式状态 const assistantMessageId = generateId(); const assistantMessage = { id: assistantMessageId, role: 'assistant', content: '', isStreaming: true }; appendMessage(currentSessionId, assistantMessage); // 3. 调用流式API try { await geminiService.sendMessage( // 构造历史消息... 'gemini-pro', (chunkText) => { // 4. 每次收到数据块，更新特定的助手消息 updateMessage(currentSessionId, assistantMessageId, { content: chunkText, isStreaming: true // 保持流式状态 }); } ); // 5. 流式结束，标记完成 updateMessage(currentSessionId, assistantMessageId, { isStreaming: false }); } catch (error) { // 6. 出错时，更新消息内容为错误信息，并结束流式 updateMessage(currentSessionId, assistantMessageId, { content: `错误: ${error.message}`, isStreaming: false }); } };

3. UI渲染优化：渲染流式消息的组件需要能高效地处理频繁的内容更新。使用React.memo优化消息气泡组件，避免不必要的重渲染。对于流式文本本身，直接更新content属性即可，React的响应式特性会自动更新DOM。

实操心得与避坑指南：

• 关键点：消息ID的稳定性：用于标识正在流式更新的消息的ID必须在整个流式过程中保持稳定。不要在流式过程中创建新的消息ID，否则会导致UI创建多个消息气泡。
• 性能：流式响应可能非常快，更新UI的频率很高。确保你的状态更新逻辑是高效的，避免在每次onStreamChunk回调中都进行深拷贝或复杂的计算。
• 错误处理：网络中断、API配额耗尽、模型过载等都可能导致流式中断。务必在catch块中妥善处理错误，并给用户清晰的反馈（如将最后一条助手消息的内容替换为错误提示）。
• 取消操作：考虑实现一个“停止生成”按钮。这需要用到AbortController来中断正在进行的fetch请求。

  const abortControllerRef = useRef(null); // 在发送请求前 abortControllerRef.current = new AbortController(); const response = await fetch(url, { ...options, signal: abortControllerRef.current.signal // 传入signal }); // 在停止按钮的回调中 abortControllerRef.current?.abort();

3.2 会话管理与本地持久化

用户希望关闭浏览器后，下次打开还能看到之前的对话记录。这就需要将会话数据持久化到本地。

实现方案：

1. 选择存储方案：对于纯前端项目，首选localStorage或IndexedDB。

   • localStorage：简单易用，但有大小限制（通常5MB），且同步操作会阻塞主线程，不适合存储非常大的对话历史。
   • IndexedDB：容量大，支持异步操作，适合存储大量数据。但API相对复杂。 对于Gemini对话文本，localStorage在大多数情况下足够用。

2. 状态同步：使用Zustand等状态管理库的中间件（Middleware）可以优雅地实现状态持久化。

   import { create } from 'zustand'; import { persist } from 'zustand/middleware'; const useChatStore = create( persist( (set, get) => ({ sessions: [], currentSessionId: null, // ... actions }), { name: 'gemini-chat-storage', // localStorage中的key // 可以只持久化部分状态，例如排除apiKey partialize: (state) => ({ sessions: state.sessions, currentSessionId: state.currentSessionId }), } ) );

   这样，任何对sessions或currentSessionId的修改都会自动同步到localStorage，并在页面加载时自动恢复。

3. 会话操作：实现创建新会话、删除会话、重命名会话、切换当前会话等动作。这些动作都通过更新Zustand Store来实现，持久化中间件会自动处理保存。

注意事项：

• 数据安全：绝对不要将API密钥存储在localStorage中。localStorage易受XSS攻击。API密钥应仅在当前浏览器会话的内存中使用，或者让用户在每次使用时手动输入。更安全的方式是构建一个后端代理，由后端持有API密钥，前端只与自己的后端通信。
• 数据清理：提供“清除所有数据”的功能，避免localStorage被无用数据占满。
• 迁移与兼容：如果未来数据结构发生变化，需要考虑旧数据的迁移策略。Zustand的persist中间件提供了migrate选项来处理版本迁移。

3.3 API密钥的安全处理与前端配置

如前所述，在前端直接硬编码或永久存储API密钥是高风险行为。一个更合理的做法是提供一个配置界面，让用户自行输入密钥，该密钥仅保存在当前页面的内存或状态中。

实现方案：

1. 配置模态框：在应用初始化时，如果检测到状态中没有API密钥，则弹出一个模态框（Modal）要求用户输入。
2. 状态管理：将API密钥存储在应用的状态中（如React Context或Zustand Store），但不包含在持久化配置里。

   const useAppStore = create((set) => ({ apiKey: '', setApiKey: (key) => set({ apiKey: key }), // ... other states }));

3. 密钥使用：所有调用Gemini Service的地方，都从该状态中获取apiKey。
4. 会话存储：作为对用户体验的折中，可以考虑使用sessionStorage来存储密钥，这样在同一个浏览器标签页会话期间，用户无需重复输入。关闭标签页后密钥自动清除。这比localStorage稍好，但仍有XSS风险。

   // 用户输入后，存入sessionStorage sessionStorage.setItem('gemini_api_key', key); // 应用初始化时读取 const initialKey = sessionStorage.getItem('gemini_api_key') || '';

重要安全提示：对于生产环境或公开部署的项目，强烈建议构建一个简单的后端服务。前端将用户消息发送到你自己的后端，后端再使用安全的环境变量来调用Gemini API，并将结果流式转发回前端。这样彻底避免了API密钥暴露给客户端。对于学习项目，明确告知用户“请在安全环境下使用，勿泄露密钥”是必要的。

4. 从“废弃”到“复活”：现代化改造指南

假设我们现在拿到了fjosue4/deprecated-google-gemini-ui的源代码，并希望让它重新运行起来，甚至变得更好。我们可以遵循以下步骤：

4.1 诊断与依赖项更新

1. 克隆并安装：首先克隆项目，运行npm install或yarn。观察安装过程是否有报错（如某些包已不再维护或与Node.js新版本不兼容）。
2. 分析package.json：这是最重要的步骤。逐一检查主要依赖的版本：
   • react,react-dom: 如果低于17，升级到18将是首要任务。
   • 构建工具：如果是react-scripts(CRA)，考虑其版本和社区支持度。评估是否值得迁移到Vite，这能极大提升开发体验。
   • 其他关键库：状态管理（Redux/MobX -> 可考虑迁移到Zustand/Jotai）、路由、UI组件库等。
3. 尝试启动：运行npm start。根据错误信息进行初步修复。常见的错误包括：过时的语法、被废弃的API、缺失的polyfill等。

4.2 渐进式重构策略

不要试图一次性重写所有代码。采用渐进式重构：

1. 更新构建工具（可选但推荐）：如果原项目使用CRA，可以尝试使用vite官方提供的@vitejs/plugin-react来搭建一个新的Vite项目，然后将源码逐步迁移过来。Vite的配置更简单，热更新更快。
2. 升级React并启用严格模式：将React升级到最新稳定版。在index.js中启用<React.StrictMode>。严格模式会帮助你在开发阶段发现一些不安全的生命周期使用、过时的API等问题。
3. 将类组件转换为函数组件：这是使代码现代化的核心。使用React Hooks (useState,useEffect,useContext) 重写类组件。这个过程可以逐个组件进行，确保每个组件转换后功能正常。
4. 重构状态管理：如果原项目使用复杂的Redux，可以考虑将其替换为Zustand。Zustand的API更简洁，与函数组件结合得更好。同样，可以按模块逐步替换。
5. 更新样式：如果原项目使用陈旧的CSS方案，可以引入Tailwind CSS进行渐进式替换。先从小的、独立的组件开始，慢慢替换掉旧的样式代码。
6. 更新API调用层：检查调用Gemini API的代码。查阅Google AI官方最新的Gemini API文档，确认端点、请求格式、流式响应解析方式是否有变。更新GeminiService类以适应最新的API。

4.3 功能增强与优化建议

在让项目“复活”的基础上，我们可以进一步添加实用功能，使其更具竞争力：

1. 支持多模型：Gemini有多个模型（如gemini-pro,gemini-pro-vision）。在UI中添加一个模型选择下拉框，让用户可以切换。
2. 参数调节：在输入框附近添加高级选项折叠面板，允许用户调整生成参数：
   • Temperature：控制随机性。提供滑块（如0.1到1.0）。
   • Top-P：核采样参数。提供滑块（如0.1到1.0）。
   • Max Output Tokens：限制生成长度。提供数字输入框。
3. 上下文长度与管理：Gemini模型有token限制。在UI中显示当前会话已使用的token估算值（可以近似用字符数/4估算），并提供“清理上下文”的按钮，允许用户选择性删除历史消息以节省token。
4. Markdown渲染与代码高亮：助手回复中的代码块、列表、加粗等Markdown语法，使用像react-markdown和remark-gfm这样的库进行渲染，并用react-syntax-highlighter高亮代码，极大提升回复内容的可读性。
5. 对话导出与分享：支持将会话导出为Markdown、PDF或纯文本。甚至可以生成一个可分享的只读链接（这需要后端支持）。

5. 部署方案与持续集成

一个“复活”后的项目，最终需要部署上线，供他人访问。这里提供几个简单的方案：

5.1 静态站点部署（最简单）

由于这是纯前端项目，构建后是一堆静态文件（HTML, JS, CSS）。可以部署到任何静态托管服务：

• Vercel：对Next.js和前端项目支持极好，关联Git仓库后自动部署。
• Netlify：类似Vercel，提供持续部署、HTTPS、自定义域名等功能。
• GitHub Pages：完全免费，适合开源项目演示。只需在仓库设置中指定构建输出的分支（如gh-pages）即可。

部署步骤（以Vercel为例）：

1. 将你的代码推送到GitHub、GitLab或Bitbucket。
2. 登录 Vercel ，点击“Import Project”。
3. 选择你的仓库，Vercel会自动检测是React/Vite项目。
4. 构建命令通常自动填充为npm run build，输出目录为dist（Vite）或build（CRA）。
5. 点击“Deploy”。几分钟后，你的项目就有一个在线可访问的URL了。

5.2 添加简易后端（提升安全性）

如前所述，为了安全地使用API密钥，可以添加一个轻量级后端。这里以Node.js + Express为例：

1. 创建后端项目：

   mkdir gemini-ui-backend && cd gemini-ui-backend npm init -y npm install express express-http-proxy cors dotenv

2. 编写server.js：

   require('dotenv').config(); const express = require('express'); const cors = require('cors'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); app.use(cors()); app.use(express.json()); // 关键：代理请求到Google Gemini API，并注入API密钥 app.post('/api/gemini-proxy/*', createProxyMiddleware({ target: 'https://generativelanguage.googleapis.com', changeOrigin: true, pathRewrite: (path, req) => { // 移除自定义的前缀 const newPath = path.replace('/api/gemini-proxy', '/v1beta'); return newPath; }, onProxyReq: (proxyReq, req, res) => { // 在这里从环境变量注入API密钥 const apiKey = process.env.GOOGLE_API_KEY; // 修改请求URL，添加查询参数 key=YOUR_API_KEY const url = new URL(proxyReq.path, 'https://generativelanguage.googleapis.com'); url.searchParams.set('key', apiKey); proxyReq.path = url.pathname + url.search; }, })); // 也可以直接提供一个接口来处理流式转发，更灵活 app.post('/api/chat', async (req, res) => { const { messages, model } = req.body; const apiKey = process.env.GOOGLE_API_KEY; // 构造请求到真实的Gemini API... // 并将流式响应pipe到客户端res const geminiResponse = await fetch(`https://...?key=${apiKey}`, {...}); geminiResponse.body.pipe(res); }); const PORT = process.env.PORT || 3001; app.listen(PORT, () => console.log(`后端服务运行在 http://localhost:${PORT}`));

3. 环境变量：在项目根目录创建.env文件，添加GOOGLE_API_KEY=你的密钥。务必将.env添加到.gitignore中。
4. 修改前端：将前端所有直接调用https://generativelanguage.googleapis.com的请求，改为调用你自己的后端地址（如http://localhost:3001/api/gemini-proxy/...或/api/chat）。
5. 部署后端：可以将此外端部署到Railway、Render、Fly.io或任何支持Node.js的PaaS平台。在这些平台上设置环境变量GOOGLE_API_KEY。
6. 部署前端：前端构建后，将API请求的地址改为你已部署的后端服务地址，然后再部署到Vercel等静态托管。

5.3 使用Docker容器化（可选）

为了确保环境一致性，可以创建Dockerfile来容器化你的前端或全栈应用。

前端Dockerfile示例（基于Nginx）：

# 构建阶段 FROM node:18-alpine as build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build # 生产阶段 FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

这样，你可以在本地或服务器上通过docker build和docker run来运行应用，环境完全隔离。

6. 常见问题排查与调试技巧

在开发和改造此类项目时，你一定会遇到各种问题。以下是一些常见问题及其排查思路：

问题1：项目启动失败，依赖安装报错。

• 排查：首先看Node.js版本。旧项目可能要求Node 12/14，而你的环境是18/20。使用nvm(Node Version Manager) 切换到项目要求的版本。如果package-lock.json或yarn.lock太旧，尝试删除它们和node_modules，然后用npm install --legacy-peer-deps重新安装，这能忽略一些严格的peer依赖检查。

问题2：流式响应不工作，消息一次性全部显示。

• 排查：
  1. 检查API端点：确认你调用的是流式端点（:streamGenerateContent），而不是普通端点（:generateContent）。
  2. 检查响应解析：在onStreamChunk回调中打印原始的chunk字符串，查看Gemini API返回的数据格式。格式可能类似data: {...}\n\ndata: {...}。确保你的解析逻辑能正确分割和提取JSON。
  3. 检查网络面板：在浏览器开发者工具的“Network”标签页，查看对该API的请求。点击请求，在“Response”或“Preview”标签页查看是否真的是分块（chunked）传输的数据。

问题3：页面刷新后，API密钥丢失。

• 排查：这是设计如此。如前所述，出于安全考虑，不建议长期存储在前端。如果你使用了sessionStorage，请确认：
  1. 存储时代码正确执行：sessionStorage.setItem('key', apiKey)。
  2. 读取时代码在组件渲染早期执行（如在Store初始化或useEffect的空依赖数组中）。
  3. 没有其他代码清除了sessionStorage。

问题4：部署后，前端访问后端API出现CORS错误。

• 排查：这是跨域问题。确保你的后端服务正确配置了CORS。在Express中，使用cors中间件。在生产环境中，你可能需要指定允许的来源（origin）：

  app.use(cors({ origin: 'https://你的前端域名.vercel.app', // 或使用函数动态判断 credentials: true // 如果需要传递cookie等凭证 }));

  如果使用代理（如Vercel的rewrites或Nginx反向代理），则不存在CORS问题。

问题5：生成的内容格式混乱，Markdown没有正确渲染。

• 排查：
  1. 确保你安装了正确的Markdown渲染库及其依赖。
  2. 检查传递给react-markdown的组件是否正确，特别是代码块组件。
  3. 检查CSS样式是否覆盖了Markdown渲染组件的默认样式，导致布局错乱。

问题6：在移动端显示不佳。

• 排查：检查是否使用了响应式设计。使用Chrome开发者工具的“设备工具栏”模拟不同尺寸的设备。确保主要容器使用百分比或max-width，输入框和按钮在移动端有合适的触摸区域（min-height: 44px是苹果HIG的建议）。考虑使用移动端优先的CSS框架（如Tailwind CSS本身是响应式的）来简化这项工作。

通过以上六个部分的拆解，我们从理解一个“废弃”项目的价值开始，逐步深入到其技术架构、核心功能实现、现代化改造、部署方案和问题排查。fjosue4/deprecated-google-gemini-ui这样的项目，其价值远不止于一段可运行的代码。它更像一个时间胶囊，封装了特定时期的技术选择和对一个问题的解决方案。解剖它、理解它、修复它并最终超越它，这个完整的过程所带来的学习收获，远比单纯使用一个最新的、封装完美的SDK要深刻得多。如果你手头正好有这样一个旧项目，不妨就按照这个思路动手试试，把它变成属于你自己的、功能强大的Gemini对话界面。