修复项目启动白屏的问题

src/App.js

@@ -43,11 +43,6 @@ function App () {
     
     initDatabase();
     
-    let user_info = LocalDataService.load_user_data();
-    if (!user_info) {
-      userProfileRef.current.showLoginModal();
-    }
-    apiService.setUserProfileRef(userProfileRef);
   }, []);
 
 

src/components/CozeWorkflowDemo.js

@@ -6,7 +6,7 @@ import {
   speechToText,
   translateText,
   summarizeText,
-  cozeService
+  getCozeService
 } from '../utils/cozeExample';
 
 /**
@@ -183,7 +183,7 @@ const CozeWorkflowDemo = () => {
         parameters = { text: inputText };
       }
       
-      const response = await cozeService.runWorkflow(workflowId, parameters);
+      const response = await getCozeService().runWorkflow(workflowId, parameters);
       
       // 在实际应用中，您可能需要根据工作流的不同输出格式进行不同的处理
       setOutputText(JSON.stringify(response, null, 2));

src/pages/home/home.js

@@ -26,6 +26,14 @@ const Home = forwardRef((props, ref) => {
   const [currentVideo, setCurrentVideo] = useState(null);
   const history = useHistory();
 
+  // 检查Coze API Token
+  useEffect(() => {
+    // 用户首次访问时，如果没有配置Coze API Token，引导用户进行配置
+    if (!hasValidToken()) {
+      setShowApiSettings(true);
+    }
+  }, []);
+
   const handleAddProject = () => {
     setShowProject(true);
   };

src/pages/projectDetail/projectDetail.js

@@ -6,7 +6,7 @@ import {
 } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import { bookService, bookInfoService, initDb } from '../../db';
-import { cozeService, initCozeService, getAvailableStyles } from '../../utils/cozeExample';
+import { getCozeService, initCozeService, getAvailableStyles } from '../../utils/cozeExample';
 import { WORKFLOW_IDS, hasValidToken } from '../../utils/cozeConfig';
 import { getUserSettings } from '../../utils/storageUtils';
 import taskQueueManager from '../../utils/taskQueueManager';

src/utils/cozeConfig.js

@@ -24,12 +24,12 @@ const storedWorkflowIds = getWorkflowIds() || {};
 // 工作流ID映射表
 // 优先使用本地存储的ID，其次使用环境变量，最后使用默认值
 export const WORKFLOW_IDS = {
-  textToDescription: storedWorkflowIds.textToDescription || process.env.REACT_APP_COZE_WORKFLOW_TEXT_TO_DESC || '7485203690664837121',
+  textToDescription: storedWorkflowIds.textToDescription || '7485203690664837121',
   // 添加画风列表和画图工作流
-  getStyleList: storedWorkflowIds.getStyleList || process.env.REACT_APP_COZE_WORKFLOW_GET_STYLE_LIST || '7485203690664837122',
-  generateImage: storedWorkflowIds.generateImage || process.env.REACT_APP_COZE_WORKFLOW_GENERATE_IMAGE || '7485203690664837123',
+  getStyleList: storedWorkflowIds.getStyleList || '7485203690664837122',
+  generateImage: storedWorkflowIds.generateImage || '7485203690664837123',
   // 添加导出剪映草稿工作流
-  exportJianyingDraft: storedWorkflowIds.exportJianyingDraft || process.env.REACT_APP_COZE_WORKFLOW_EXPORT_JIANYING_DRAFT || '7485203690664837120',
+  exportJianyingDraft: storedWorkflowIds.exportJianyingDraft || '7485203690664837120',
 };
 
 // 工作流名称到显示名称的映射
@@ -62,7 +62,7 @@ export const PARAMETER_PRESETS = {
     language: 'zh',      // 输出语言：中文
     maxLength: 500,      // 最大长度
   },
-  
+
   // 图像生成参数预设
   generateImage: {
     width: 1024,         // 图像宽度

src/utils/cozeExample.js

@@ -17,11 +17,6 @@ import {
   blobToBase64
 } from './cozeStreamHandler';
 
-// 检查是否有有效的API Token
-if (!hasValidToken()) {
-  console.warn('警告: 未配置有效的Coze API Token，API调用将会失败。请在环境变量中设置REACT_APP_COZE_API_TOKEN。');
-}
-
 /**
  * 初始化Coze服务
  * @param {Object} config - 配置对象，包含超时、并发请求等设置
@@ -287,5 +282,12 @@ export const createImage = async (prompt, style = '', options = {}) => {
   }
 };
 
-// 导出单例
-export const cozeService = initCozeService(); 
+// 修改导出方式，从预先初始化的单例改为获取单例的函数
+// 这样，只有当函数被调用时才会初始化
+let _cozeServiceInstance = null;
+export const getCozeService = () => {
+  if (!_cozeServiceInstance) {
+    _cozeServiceInstance = initCozeService();
+  }
+  return _cozeServiceInstance;
+}; 

src/utils/cozeService.js

@@ -16,22 +16,61 @@ class CozeService {
    * @param {string} config.baseURL - Coze API的基础URL，默认为'https://api.coze.cn'
    */
   constructor(config) {
-    if (!config || !config.token) {
-      throw new Error('必须提供Coze API的访问令牌');
-    }
-
-    this.token = config.token;
-    this.baseURL = config.baseURL || 'https://api.coze.cn';
-    
-    // 初始化Coze API客户端
-    this.apiClient = new CozeAPI({
-      token: this.token,
-      baseURL: this.baseURL,
-      allowPersonalAccessTokenInBrowser: true // 允许在浏览器环境中使用个人访问令牌
-    });
+    this.token = config?.token || '';
+    this.baseURL = config?.baseURL || 'https://api.coze.cn';
+    
+    // 延迟初始化标志
+    this.apiClientInitialized = false;
     
     // 用于存储工作流ID与名称的映射
     this.workflows = {};
+    
+    // 如果有token，立即初始化API客户端
+    if (this.token) {
+      this.initApiClient();
+    }
+  }
+  
+  /**
+   * 初始化API客户端
+   * @returns {boolean} 初始化是否成功
+   */
+  initApiClient() {
+    try {
+      if (!this.token) {
+        return false;
+      }
+      
+      // 初始化Coze API客户端
+      this.apiClient = new CozeAPI({
+        token: this.token,
+        baseURL: this.baseURL,
+        allowPersonalAccessTokenInBrowser: true // 允许在浏览器环境中使用个人访问令牌
+      });
+      
+      this.apiClientInitialized = true;
+      return true;
+    } catch (error) {
+      console.error('初始化Coze API客户端失败:', error);
+      return false;
+    }
+  }
+  
+  /**
+   * 检查API客户端是否已初始化，如果未初始化则尝试初始化
+   * @throws {Error} 如果无法初始化API客户端则抛出错误
+   */
+  checkApiClient() {
+    if (!this.apiClientInitialized) {
+      if (!this.token) {
+        throw new Error('必须提供Coze API的访问令牌');
+      }
+      
+      const initialized = this.initApiClient();
+      if (!initialized) {
+        throw new Error('Coze API客户端初始化失败');
+      }
+    }
   }
 
   /**
@@ -74,6 +113,9 @@ class CozeService {
    * @returns {Promise<Object>} - 返回API调用的响应
    */
   async runWorkflowStream(workflowNameOrId, parameters = {}, options = {}) {
+    // 检查API客户端初始化
+    this.checkApiClient();
+    
     // 获取工作流ID
     const workflowId = this.workflows[workflowNameOrId] || workflowNameOrId;
     
@@ -101,6 +143,9 @@ class CozeService {
    * @returns {Promise<Object>} - 返回API调用的响应
    */
   async runWorkflow(workflowNameOrId, parameters = {}, options = {}) {
+    // 检查API客户端初始化
+    this.checkApiClient();
+    
     // 获取工作流ID
     const workflowId = this.workflows[workflowNameOrId] || workflowNameOrId;
     
@@ -129,6 +174,9 @@ class CozeService {
    * @returns {Promise<Object>} - 返回工作流运行的状态
    */
   async getWorkflowRunStatus(runId) {
+    // 检查API客户端初始化
+    this.checkApiClient();
+    
     if (!runId) {
       throw new Error('必须提供工作流运行ID');
     }
@@ -149,6 +197,9 @@ class CozeService {
    * @returns {Promise<Object>} - 返回取消操作的结果
    */
   async cancelWorkflowRun(runId) {
+    // 检查API客户端初始化
+    this.checkApiClient();
+    
     if (!runId) {
       throw new Error('必须提供工作流运行ID');
     }
@@ -169,6 +220,9 @@ class CozeService {
    * @returns {Promise<Object>} - 返回工作流列表
    */
   async listWorkflows(options = {}) {
+    // 检查API客户端初始化
+    this.checkApiClient();
+    
     try {
       return await this.apiClient.workflows.list(options);
     } catch (error) {
@@ -183,6 +237,9 @@ class CozeService {
    * @returns {Promise<Array>} - 返回可用的画风列表
    */
   async getStyleList(options = {}) {
+    // 检查API客户端初始化
+    this.checkApiClient();
+    
     try {
       // 使用runWorkflow方法调用画风列表API
       console.log('获取画风列表...');
@@ -211,6 +268,9 @@ class CozeService {
    * @returns {Promise<Object>} - 返回生成的图片信息
    */
   async generateImage(prompt, style = '', options = {}) {
+    // 检查API客户端初始化
+    this.checkApiClient();
+    
     try {
       if (!prompt) {
         throw new Error('必须提供画图的文本提示');