# Tab2(自动创作)优化方案 ## 一、重排后的 Tab 结构草图 ``` Tab2: 自动创作 ├── 【区域1:快速生成区】(默认展开,紧凑布局) │ ├── 生成模式选择(单篇/批量)- 横向radio │ ├── 关键词选择(单篇:selectbox | 批量:multiselect) │ ├── 平台选择(单篇:selectbox | 批量:selectbox统一平台) │ ├── 高级优化技巧(折叠,默认收起) │ └── 生成按钮(主按钮,醒目) │ ├── 【区域2:生成结果概览】(生成后显示) │ ├── 生成统计卡片(3列:总篇数、平均评分、生成时间) │ ├── 批量生成:内容列表(可展开查看每篇) │ └── 单篇生成:直接进入详情 │ ├── 【区域3:内容详情区】(单篇或选中篇) │ ├── Tab组:内容预览 | 质量分析 | 增强工具 │ │ ├── Tab1: 内容预览 │ │ │ ├── 内容展示(代码块/文本区) │ │ │ ├── 快速操作(下载、复制、优化) │ │ │ └── JSON-LD(仅GitHub平台,折叠) │ │ │ │ │ ├── Tab2: 质量分析 │ │ │ ├── 内容评分(5个指标卡片) │ │ │ ├── E-E-A-T评估(折叠) │ │ │ └── 事实密度评估(折叠) │ │ │ │ │ └── Tab3: 增强工具 │ │ ├── 多模态提示生成(配图/视频) │ │ ├── 图片生成(通义万相) │ │ └── E-E-A-T强化(折叠) │ │ │ └── 下载区(底部固定) │ ├── 单篇下载 │ └── 批量ZIP下载(批量模式) │ └── 【区域4:辅助工具】(折叠,默认收起) ├── JSON-LD Schema生成(移至Tab3或独立Tab) └── 技术配置生成(移至Tab3或独立Tab) ``` ## 二、问题清单(含严重级别) ### P0 - 必改(逻辑漏洞/体验阻塞) 1. **批量生成无法查看所有内容** ⚠️ P0 - 问题:只显示最后一篇预览,其他内容无法查看 - 影响:用户无法验证批量生成的所有内容 - 位置:3124-4118行 2. **内容评分可能静默失败** ⚠️ P0 - 问题:评分失败只显示warning,但用户可能看不到 - 影响:用户以为内容已评分,实际未评分 - 位置:3086-3099行 3. **图片生成入口混乱** ⚠️ P0 - 问题:有"直接生成"、"基于描述生成"、"多模态生成"多个入口 - 影响:用户不知道用哪个,容易重复操作 - 位置:3173-3756行 4. **JSON-LD和技术配置功能归属错误** ⚠️ P0 - 问题:放在内容生成Tab,但属于"优化"范畴 - 影响:用户流程混乱,应该在优化Tab使用 - 位置:2271-2572行 5. **批量生成时ZIP下载位置不明确** ⚠️ P0 - 问题:ZIP下载按钮在单篇预览下方,批量模式时位置不明显 - 影响:用户找不到批量下载入口 - 位置:4093-4101行 ### P1 - 建议(体验优化) 6. **信息层级混乱** ⚠️ P1 - 问题:评分、多模态、E-E-A-T等功能平铺,没有分组 - 影响:页面冗长,用户需要滚动很多才能找到功能 - 位置:3124-4118行 7. **生成状态反馈不足** ⚠️ P1 - 问题:批量生成时,只有spinner,没有进度条和完成提示 - 影响:用户不知道生成进度,可能误以为卡死 - 位置:2669-3122行 8. **优化技巧选择器位置不当** ⚠️ P1 - 问题:放在表单中间,容易被忽略 - 影响:用户可能不知道有这个功能 - 位置:2628-2652行 9. **内容预览区域过大** ⚠️ P1 - 问题:单篇内容预览占用大量空间,其他功能被挤到下方 - 影响:用户需要大量滚动才能看到其他功能 - 位置:4010-4091行 10. **缺少内容对比功能** ⚠️ P1 - 问题:批量生成时,无法对比不同关键词生成的内容 - 影响:用户无法快速筛选优质内容 - 位置:无此功能 ### P2 - 可做(锦上添花) 11. **缺少内容模板预览** ⚠️ P2 - 问题:用户选择平台时,看不到该平台的模板特点 - 影响:用户可能选错平台 - 位置:2591-2612行 12. **批量生成缺少筛选功能** ⚠️ P2 - 问题:批量生成后,无法按评分、平台、关键词筛选 - 影响:内容多时难以管理 - 位置:3124行后 13. **缺少内容历史记录快速入口** ⚠️ P2 - 问题:无法快速查看之前生成的内容 - 影响:用户需要切换到Tab5查看 - 位置:无此功能 14. **优化技巧说明不够直观** ⚠️ P2 - 问题:只有文字说明,没有示例 - 影响:用户不理解技巧的实际效果 - 位置:2642-2652行 15. **缺少批量操作功能** ⚠️ P2 - 问题:无法批量下载、批量优化、批量删除 - 影响:内容多时操作繁琐 - 位置:无此功能 ## 三、改动方案(含具体交互/文案/状态设计) ### 改动1:重组布局结构(P0) **目标**:将内容生成作为核心,其他功能按需展示 **具体改动**: ```python with tab2: # === 区域1:快速生成区 === st.markdown("### ✍️ 内容生成") with st.container(border=True): with st.form("content_form", clear_on_submit=False): # 第一行:模式选择 mode = st.radio( "生成模式", ["单篇生成", "批量生成"], horizontal=True, key="content_mode" ) # 第二行:关键词和平台(紧凑布局) if mode == "单篇生成": col1, col2 = st.columns([2, 1]) with col1: selected_keyword = st.selectbox( "选择关键词", st.session_state.keywords, key="content_kw_single" ) with col2: platform = st.selectbox( "平台", platforms, key="content_platform_single" ) else: col1, col2 = st.columns([3, 1]) with col1: selected_keywords = st.multiselect( "选择关键词(可多选)", st.session_state.keywords, key="content_kw_multi" ) with col2: platform = st.selectbox( "统一平台", platforms, key="content_platform_multi" ) # 第三行:高级优化技巧(折叠) with st.expander("🎨 高级优化技巧(可选)", expanded=False): technique_manager = OptimizationTechniqueManager() all_techniques = technique_manager.list_techniques() technique_options = [f"{tech['icon']} {tech['name']}" for tech in all_techniques] selected_technique_names = st.multiselect( "选择优化技巧", options=technique_options, default=[], key="content_techniques", help="选择要应用的优化技巧,可多选" ) if selected_technique_names: st.caption("已选择:" + "、".join(selected_technique_names)) # 生成按钮 run_content_disabled = (not st.session_state.cfg_valid) or (gen_llm is None) or (not keywords_to_generate) run_content = st.form_submit_button( "🚀 生成内容", use_container_width=True, disabled=run_content_disabled, type="primary" ) # === 区域2:生成结果概览 === if st.session_state.generated_contents: # 统计卡片 col1, col2, col3 = st.columns(3) with col1: st.metric("生成篇数", len(st.session_state.generated_contents)) with col2: avg_score = sum( item.get("score", {}).get("scores", {}).get("total", 0) for item in st.session_state.generated_contents if item.get("score") ) / len([item for item in st.session_state.generated_contents if item.get("score")]) if any(item.get("score") for item in st.session_state.generated_contents) else 0 st.metric("平均评分", f"{avg_score:.1f}/100" if avg_score > 0 else "未评分") with col3: st.metric("生成时间", datetime.now().strftime("%H:%M:%S")) # 批量模式:内容列表 if len(st.session_state.generated_contents) > 1: st.markdown("#### 📋 生成内容列表") # 添加筛选和排序 filter_col1, filter_col2, filter_col3 = st.columns(3) with filter_col1: filter_platform = st.selectbox( "筛选平台", ["全部"] + list(set(item["platform"] for item in st.session_state.generated_contents)), key="content_filter_platform" ) with filter_col2: sort_by = st.selectbox( "排序方式", ["生成顺序", "评分降序", "评分升序", "关键词"], key="content_sort_by" ) with filter_col3: if st.button("📥 批量下载ZIP", use_container_width=True): # ZIP下载逻辑 pass # 内容列表(可展开) for idx, item in enumerate(st.session_state.generated_contents): with st.expander( f"{idx+1}. {item['keyword']} - {item['platform']} | 评分: {item.get('score', {}).get('scores', {}).get('total', 'N/A')}/100", expanded=False ): # 快速预览和操作 col1, col2 = st.columns([3, 1]) with col1: st.text_area( "内容预览", item["content"][:500] + "..." if len(item["content"]) > 500 else item["content"], height=150, disabled=True, key=f"preview_{idx}" ) with col2: if st.button("查看详情", key=f"view_{idx}"): st.session_state.selected_content_idx = idx if st.button("下载", key=f"dl_{idx}"): # 下载逻辑 pass # 单篇模式或选中篇:详情展示 selected_idx = st.session_state.get("selected_content_idx", 0) if len(st.session_state.generated_contents) > 1 else 0 item = st.session_state.generated_contents[selected_idx] # 使用Tabs组织详情 detail_tab1, detail_tab2, detail_tab3 = st.tabs(["📄 内容预览", "📊 质量分析", "🎨 增强工具"]) with detail_tab1: # 内容预览 st.markdown(f"**关键词**: {item['keyword']} | **平台**: {item['platform']}") if item["ext"] == "md": st.code(item["content"], language="markdown") else: st.text_area("内容", item["content"], height=400, key="content_preview") # 快速操作 col1, col2, col3 = st.columns(3) with col1: st.download_button("下载单篇", item["content"], f"{item['filename']}", use_container_width=True) with col2: if st.button("🔧 优化内容", use_container_width=True): # 跳转到Tab3或打开优化面板 pass with col3: if st.button("📋 复制内容", use_container_width=True): # 复制到剪贴板 pass # JSON-LD(仅GitHub平台,折叠) if item.get("json_ld") or item["platform"] == "GitHub(README/文档)": with st.expander("📋 JSON-LD Schema(可选)", expanded=False): if item.get("json_ld"): st.code(item["json_ld"], language="json") else: # 生成JSON-LD pass with detail_tab2: # 质量分析 if item.get("score"): # 评分卡片 score_data = item["score"] scores = score_data.get("scores", {}) col1, col2, col3, col4, col5 = st.columns(5) with col1: st.metric("总分", f"{scores.get('total', 0)}/100") with col2: st.metric("结构化", f"{scores.get('structure', 0)}/25") with col3: st.metric("品牌提及", f"{scores.get('brand_mention', 0)}/25") with col4: st.metric("权威性", f"{scores.get('authority', 0)}/25") with col5: st.metric("可引用性", f"{scores.get('citations', 0)}/25") # 详细分析(折叠) with st.expander("📝 详细分析", expanded=False): # 显示详细评分和改进建议 pass else: st.info("内容未评分,点击下方按钮进行评估") if st.button("📊 评估内容质量", use_container_width=True): # 评估逻辑 pass # E-E-A-T和事实密度评估(折叠) with st.expander("🎯 E-E-A-T 评估", expanded=False): # E-E-A-T评估逻辑 pass with st.expander("📊 事实密度评估", expanded=False): # 事实密度评估逻辑 pass with detail_tab3: # 增强工具 st.markdown("#### 🎨 多模态增强") # 图片生成(统一入口) image_gen_col1, image_gen_col2 = st.columns([2, 1]) with image_gen_col1: image_gen_mode = st.radio( "图片生成方式", ["直接生成(基于内容)", "基于配图描述生成"], horizontal=True, key="image_gen_mode" ) with image_gen_col2: num_images = st.selectbox("生成数量", [1, 2, 3], key="num_images") if st.button("🎨 生成图片", use_container_width=True, type="primary"): # 统一的图片生成逻辑 pass # 视频脚本生成(仅B站) if "B站" in item["platform"]: if st.button("🎬 生成视频脚本", use_container_width=True): # 视频脚本生成逻辑 pass # E-E-A-T强化(折叠) with st.expander("✨ E-E-A-T 强化", expanded=False): # E-E-A-T强化逻辑 pass ``` ### 改动2:修复批量生成查看问题(P0) **目标**:批量生成后,用户可以查看所有生成的内容 **具体改动**: ```python # 在区域2中添加内容列表 if len(st.session_state.generated_contents) > 1: st.markdown("#### 📋 生成内容列表") # 使用DataFrame展示列表 list_data = [] for idx, item in enumerate(st.session_state.generated_contents): list_data.append({ "序号": idx + 1, "关键词": item["keyword"], "平台": item["platform"], "评分": item.get("score", {}).get("scores", {}).get("total", "未评分"), "字数": len(item["content"]), "操作": f"查看_{idx}" }) df = pd.DataFrame(list_data) # 可交互的表格 selected_rows = st.dataframe( df, use_container_width=True, hide_index=True, on_select="rerun", selection_mode="single-row" ) # 根据选择显示详情 if selected_rows.selection.rows: selected_idx = selected_rows.selection.rows[0] st.session_state.selected_content_idx = selected_idx st.rerun() ``` ### 改动3:统一图片生成入口(P0) **目标**:将多个图片生成入口合并为一个,通过选项区分 **具体改动**: ```python # 在detail_tab3中 st.markdown("#### 🖼️ 图片生成") # 生成方式选择 gen_mode = st.radio( "生成方式", ["智能生成(推荐)", "基于配图描述", "自定义Prompt"], key="image_gen_mode", help="智能生成:AI自动分析内容生成图片;基于描述:使用已生成的配图描述;自定义:手动输入Prompt" ) if gen_mode == "智能生成(推荐)": # 直接基于内容生成 if st.button("🎨 生成图片", use_container_width=True, type="primary"): # 调用直接生成逻辑 pass elif gen_mode == "基于配图描述": # 检查是否有配图描述 if st.session_state.get("image_descriptions"): if st.button("🎨 基于描述生成", use_container_width=True, type="primary"): # 调用基于描述生成逻辑 pass else: st.info("💡 请先生成配图描述") if st.button("📝 生成配图描述", use_container_width=True): # 生成配图描述 pass else: # 自定义Prompt custom_prompt = st.text_area("输入图片生成Prompt", height=100) if st.button("🎨 生成图片", use_container_width=True, type="primary"): # 使用自定义Prompt生成 pass ``` ### 改动4:改进生成进度反馈(P1) **目标**:批量生成时显示清晰的进度 **具体改动**: ```python if run_content: # 初始化进度 total_items = len(keywords_to_generate) progress_bar = st.progress(0) status_text = st.empty() contents = [] zip_buffer = io.BytesIO() with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zip_file: for idx, (keyword, plat) in enumerate(keywords_to_generate): # 更新进度 progress = (idx + 1) / total_items progress_bar.progress(progress) status_text.text(f"正在生成 {idx + 1}/{total_items}: {keyword} - {plat}") # 生成逻辑 with st.spinner(f"生成 {plat}:{keyword}"): # ... 原有生成逻辑 ... contents.append({...}) # 完成提示 if idx == total_items - 1: status_text.success(f"✅ 全部完成!共生成 {len(contents)} 篇内容") # 清理进度显示 progress_bar.empty() status_text.empty() ``` ### 改动5:移动JSON-LD和技术配置到Tab3(P0) **目标**:将不属于"创作"的功能移到"优化"Tab **具体改动**: ```python # 从Tab2中删除2271-2572行的JSON-LD和技术配置代码 # 在Tab3(文章优化)中添加: with tab3: # ... 原有优化功能 ... # 新增:结构化数据生成 st.markdown("---") st.markdown("#### 📋 结构化数据生成") struct_tab1, struct_tab2 = st.tabs(["JSON-LD Schema", "技术配置"]) with struct_tab1: # JSON-LD生成逻辑(从Tab2移过来) pass with struct_tab2: # 技术配置生成逻辑(从Tab2移过来) pass ``` ## 四、测试用例清单 ### 测试用例1:单篇生成流程 **前置条件**: - 已配置API Key - 已生成关键词(至少1个) **测试步骤**: 1. 进入Tab2 2. 选择"单篇生成" 3. 选择一个关键词 4. 选择一个平台(如"知乎") 5. 点击"生成内容"按钮 **预期结果**: - 显示生成进度(spinner) - 生成完成后显示内容预览 - 自动显示内容评分(如果有) - 可以下载单篇内容 - 可以查看质量分析 - 可以使用增强工具 ### 测试用例2:批量生成流程 **前置条件**: - 已配置API Key - 已生成关键词(至少3个) **测试步骤**: 1. 进入Tab2 2. 选择"批量生成" 3. 选择3个关键词 4. 选择一个平台 5. 点击"生成内容"按钮 **预期结果**: - 显示进度条和状态文本 - 逐个生成内容 - 生成完成后显示内容列表 - 可以查看每篇内容的详情 - 可以批量下载ZIP - 可以筛选和排序内容 ### 测试用例3:内容评分失败处理 **前置条件**: - 已配置API Key - 已生成关键词 **测试步骤**: 1. 生成一篇内容 2. 模拟评分失败(如API错误) **预期结果**: - 内容仍然生成成功 - 显示明确的警告信息:"内容已生成,但评分失败" - 提供"重新评分"按钮 - 不影响其他功能使用 ### 测试用例4:图片生成入口 **前置条件**: - 已生成一篇内容 - 已配置通义万相API Key **测试步骤**: 1. 进入"增强工具"Tab 2. 查看图片生成选项 3. 选择"智能生成" 4. 点击"生成图片" **预期结果**: - 只显示一个图片生成入口 - 生成方式选择清晰 - 生成过程有进度提示 - 生成成功后显示图片预览 ### 测试用例5:批量生成查看所有内容 **前置条件**: - 已批量生成5篇内容 **测试步骤**: 1. 查看内容列表 2. 点击不同行的内容 3. 使用筛选功能 4. 使用排序功能 **预期结果**: - 列表显示所有生成的内容 - 可以点击查看每篇详情 - 筛选功能正常工作 - 排序功能正常工作 ### 测试用例6:优化技巧应用 **前置条件**: - 已配置API Key - 已生成关键词 **测试步骤**: 1. 展开"高级优化技巧" 2. 选择2-3个技巧 3. 生成内容 **预期结果**: - 技巧选择器清晰可见 - 已选择的技巧有明确提示 - 生成的内容应用了选择的技巧 - 技巧效果在内容中体现 ### 测试用例7:边界条件测试 **测试场景**: 1. 关键词列表为空 2. 批量生成时未选择关键词 3. API Key无效 4. 生成过程中网络中断 5. 批量生成20篇内容(压力测试) **预期结果**: - 所有边界条件都有明确的错误提示 - 不会导致页面崩溃 - 用户可以清楚知道问题所在 - 提供解决方案或重试选项 ## 五、最小改动 MVP 优化清单(1天内完成) ### 优先级排序 **P0(必须完成)**: 1. ✅ 修复批量生成查看问题(2小时) 2. ✅ 统一图片生成入口(1小时) 3. ✅ 改进生成进度反馈(1小时) 4. ✅ 修复内容评分失败提示(0.5小时) **P1(建议完成)**: 5. ✅ 重组布局结构(使用Tabs组织详情)(2小时) 6. ✅ 优化技巧选择器位置(0.5小时) 7. ✅ 添加批量生成内容列表(1小时) **P2(可选)**: 8. ⚠️ 添加内容筛选和排序(1小时) 9. ⚠️ 移动JSON-LD到Tab3(1小时) ### 实施顺序 1. **第一步**(2小时):修复批量生成查看问题 - 添加内容列表展示 - 实现内容选择功能 - 测试批量生成流程 2. **第二步**(2小时):重组布局结构 - 使用Tabs组织详情区域 - 调整功能分组 - 优化信息层级 3. **第三步**(1.5小时):统一图片生成入口 - 合并多个生成入口 - 添加生成方式选择 - 测试图片生成流程 4. **第四步**(1小时):改进进度反馈 - 添加进度条 - 添加状态文本 - 测试批量生成进度 5. **第五步**(0.5小时):修复评分失败提示 - 改进错误提示 - 添加重试按钮 - 测试错误处理 **总计**:约7小时,可以在1个工作日内完成 ## 六、额外风险与体验优化 ### 额外风险(至少5条) 1. **状态同步问题** ⚠️ 高风险 - 风险:批量生成时,如果用户刷新页面,可能丢失生成进度 - 解决:将生成进度保存到session_state,支持断点续传 2. **API调用频率限制** ⚠️ 中风险 - 风险:批量生成时,可能触发API频率限制 - 解决:添加请求间隔,实现重试机制 3. **内容过长导致页面卡顿** ⚠️ 中风险 - 风险:生成的内容很长时,页面渲染可能卡顿 - 解决:使用虚拟滚动或分页加载 4. **并发生成冲突** ⚠️ 低风险 - 风险:用户快速点击生成按钮,可能触发多次生成 - 解决:添加生成状态锁,防止并发 5. **ZIP文件过大** ⚠️ 低风险 - 风险:批量生成大量内容时,ZIP文件可能过大 - 解决:添加文件大小检查,超过限制时分批下载 ### 体验优化建议 1. **添加快捷操作** 💡 - 在内容预览区域添加快捷按钮:复制、优化、下载 - 使用图标按钮,节省空间 2. **添加内容对比功能** 💡 - 批量生成时,可以选择2篇内容进行对比 - 帮助用户快速筛选优质内容 3. **添加内容模板预览** 💡 - 选择平台时,显示该平台的模板特点 - 帮助用户选择合适的平台 4. **优化错误提示** 💡 - 使用更友好的错误提示 - 提供具体的解决方案 5. **添加操作历史** 💡 - 记录用户的操作历史 - 支持快速重做上次操作 ## 七、功能归属检查 ### ✅ 属于本Tab的功能 1. **内容生成** ✅ - 单篇生成 - 批量生成 - 平台模板选择 - 优化技巧应用 2. **内容预览** ✅ - 内容展示 - 快速操作(下载、复制) - 内容列表(批量模式) 3. **质量分析** ✅ - 内容评分 - E-E-A-T评估 - 事实密度评估 4. **增强工具** ✅ - 图片生成 - 视频脚本生成 - 多模态提示生成 ### ⚠️ 建议调整的功能 1. **JSON-LD Schema生成** ⚠️ - 当前位置:Tab2 - 建议位置:Tab3(文章优化)或独立Tab - 理由:属于"优化"范畴,不是"创作"核心功能 2. **技术配置生成** ⚠️ - 当前位置:Tab2 - 建议位置:Tab3(文章优化)或独立Tab - 理由:属于"优化"范畴,不是"创作"核心功能 3. **E-E-A-T强化** ⚠️ - 当前位置:Tab2(内容详情中) - 建议位置:Tab3(文章优化) - 理由:属于"优化"操作,应该在优化Tab进行 ### ❌ 不应放在这里的功能 1. **工作流自动化** ❌ - 当前位置:Tab7 - 理由:已在独立Tab,无需调整 2. **平台同步** ❌ - 当前位置:Tab9 - 理由:已在独立Tab,无需调整 ## 八、实施建议 ### 分阶段实施 **第一阶段(MVP)**:完成P0问题修复 - 修复批量生成查看问题 - 统一图片生成入口 - 改进进度反馈 - 修复评分失败提示 **第二阶段(优化)**:完成P1优化 - 重组布局结构 - 优化技巧选择器 - 添加内容列表 **第三阶段(增强)**:完成P2功能 - 添加筛选和排序 - 移动JSON-LD到Tab3 - 添加内容对比功能 ### 代码重构建议 1. **提取内容生成逻辑** - 将内容生成逻辑提取到独立函数 - 便于测试和维护 2. **统一状态管理** - 使用统一的状态管理方式 - 避免状态冲突 3. **优化组件复用** - 提取可复用的UI组件 - 减少代码重复 ### 测试建议 1. **单元测试** - 测试内容生成逻辑 - 测试状态管理 2. **集成测试** - 测试完整生成流程 - 测试错误处理 3. **用户体验测试** - 邀请真实用户测试 - 收集反馈意见