添加产品规格文档并优化项目结构
Made-with: Cursor
This commit is contained in:
刘国栋
@@ -7,6 +7,7 @@
|
||||
### 为什么是中等复杂度？
|
||||
|
||||
✅ **有利因素**：
|
||||
|
||||
- 你已经有了基础的 CSS 样式系统
|
||||
- 已经使用了 `st.tabs` 作为主导航
|
||||
- 已经部分使用了 `st.container(border=True)` 卡片式设计
|
||||
@@ -14,6 +15,7 @@
|
||||
- 代码结构相对清晰
|
||||
|
||||
⚠️ **需要注意**：
|
||||
|
||||
- 文件较大（5864行），需要系统化改动
|
||||
- 有 37 个 `st.expander` 需要评估是否改为 tabs/container
|
||||
- 需要保持功能逻辑不变，只改布局
|
||||
@@ -25,18 +27,16 @@
|
||||
### 核心改动点
|
||||
|
||||
1. **CSS 增强**（30分钟）
|
||||
- 增强卡片样式
|
||||
- 优化侧边栏视觉层次
|
||||
- 统一间距和阴影
|
||||
|
||||
- 增强卡片样式
|
||||
- 优化侧边栏视觉层次
|
||||
- 统一间距和阴影
|
||||
2. **Expander → Container/Tabs 转换**（2-3小时）
|
||||
- 将功能相关的多个 expander 合并为 tabs
|
||||
- 将单个 expander 改为 container(border=True)
|
||||
- 保持次要信息用 expander
|
||||
|
||||
- 将功能相关的多个 expander 合并为 tabs
|
||||
- 将单个 expander 改为 container(border=True)
|
||||
- 保持次要信息用 expander
|
||||
3. **侧边栏优化**（30分钟）
|
||||
- 添加分组容器
|
||||
- 优化视觉层次
|
||||
- 添加分组容器
|
||||
- 优化视觉层次
|
||||
|
||||
---
|
||||
|
||||
@@ -93,16 +93,19 @@ hr {
|
||||
#### 2.1 识别需要改动的 Expander
|
||||
|
||||
**改为 Tabs 的情况**（功能相关的多个选项）：
|
||||
|
||||
- ✅ Tab1 中的"组合模式选择" + "词库管理" → 可以合并为一个 tabs
|
||||
- ✅ Tab1 中的"智能关键词挖掘"已经有 tabs（保持）
|
||||
- ✅ Tab3 中的多个分析 expander → 可以合并为 tabs
|
||||
|
||||
**改为 Container 的情况**（主要功能区域）：
|
||||
|
||||
- ✅ Tab1 中的"组合模式选择"区域 → 已经是 container，保持
|
||||
- ✅ Tab2 中的主要输入区域 → 确保用 container
|
||||
- ✅ Tab3 中的优化结果展示 → 用 container
|
||||
|
||||
**保留 Expander 的情况**（次要/详细信息）：
|
||||
|
||||
- ✅ "查看技巧说明" → 保持 expander
|
||||
- ✅ "详细评分与改进建议" → 保持 expander
|
||||
- ✅ "预览最后一篇" → 保持 expander
|
||||
@@ -112,12 +115,14 @@ hr {
|
||||
**示例 1：Tab1 中的词库管理区域**
|
||||
|
||||
**当前代码**（第 797 行）：
|
||||
|
||||
```python
|
||||
with st.expander("词库管理", expanded=False):
|
||||
# 词库编辑和导入导出
|
||||
```
|
||||
|
||||
**改为**：
|
||||
|
||||
```python
|
||||
with st.container(border=True):
|
||||
st.markdown("### 📚 词库管理")
|
||||
@@ -132,6 +137,7 @@ with st.container(border=True):
|
||||
**示例 2：Tab3 中的分析结果**
|
||||
|
||||
**当前代码**（多个 expander）：
|
||||
|
||||
```python
|
||||
with st.expander("📈 事实密度分析", expanded=False):
|
||||
# 分析内容
|
||||
@@ -141,6 +147,7 @@ with st.expander("🏗️ 结构化块分析", expanded=False):
|
||||
```
|
||||
|
||||
**改为**：
|
||||
|
||||
```python
|
||||
analysis_tabs = st.tabs(["📈 事实密度", "🏗️ 结构化块", "📝 强化详情"])
|
||||
|
||||
@@ -158,6 +165,7 @@ with analysis_tabs[1]:
|
||||
### 阶段 3：侧边栏优化（低风险，30分钟）
|
||||
|
||||
**当前结构**（第 563-697 行）：
|
||||
|
||||
```python
|
||||
with st.sidebar:
|
||||
st.header("全局配置")
|
||||
@@ -166,6 +174,7 @@ with st.sidebar:
|
||||
```
|
||||
|
||||
**优化后**：
|
||||
|
||||
```python
|
||||
with st.sidebar:
|
||||
st.header("⚙️ 全局配置")
|
||||
@@ -192,23 +201,27 @@ with st.sidebar:
|
||||
|
||||
## ⏱️ 时间估算
|
||||
|
||||
| 阶段 | 任务 | 时间 | 风险 |
|
||||
|------|------|------|------|
|
||||
| 阶段 1 | CSS 增强 | 30分钟 | ⭐ 极低 |
|
||||
| 阶段 2 | Expander 重构 | 2-3小时 | ⭐⭐ 中等 |
|
||||
| 阶段 3 | 侧边栏优化 | 30分钟 | ⭐ 极低 |
|
||||
| **总计** | | **3-4小时** | |
|
||||
|
||||
| 阶段 | 任务 | 时间 | 风险 |
|
||||
| ------ | ----------- | --------- | ----- |
|
||||
| 阶段 1 | CSS 增强 | 30分钟 | ⭐ 极低 |
|
||||
| 阶段 2 | Expander 重构 | 2-3小时 | ⭐⭐ 中等 |
|
||||
| 阶段 3 | 侧边栏优化 | 30分钟 | ⭐ 极低 |
|
||||
| **总计** | | **3-4小时** | |
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🎨 改动前后对比
|
||||
|
||||
### 改动前
|
||||
|
||||
- 大量 expander 折叠，需要点击展开
|
||||
- 视觉层次不够清晰
|
||||
- 卡片样式不统一
|
||||
|
||||
### 改动后
|
||||
|
||||
- 主要功能用 tabs，一目了然
|
||||
- 次要信息用 expander，保持简洁
|
||||
- 卡片样式统一，视觉更现代
|
||||
@@ -232,13 +245,12 @@ with st.sidebar:
|
||||
如果时间紧张，可以先做这些：
|
||||
|
||||
1. **只增强 CSS**（30分钟）
|
||||
- 添加卡片内边距和背景
|
||||
- 优化侧边栏样式
|
||||
|
||||
- 添加卡片内边距和背景
|
||||
- 优化侧边栏样式
|
||||
2. **改 3-5 个关键 Expander**（30分钟）
|
||||
- Tab1 的词库管理
|
||||
- Tab3 的分析结果区域
|
||||
- 其他明显需要改的
|
||||
- Tab1 的词库管理
|
||||
- Tab3 的分析结果区域
|
||||
- 其他明显需要改的
|
||||
|
||||
这样就能看到明显改善，后续再逐步完善。
|
||||
|
||||
@@ -248,23 +260,25 @@ with st.sidebar:
|
||||
|
||||
实施完成后检查：
|
||||
|
||||
- [ ] 所有主要功能区域都用 container(border=True) 或 tabs
|
||||
- [ ] 次要信息保持用 expander
|
||||
- [ ] 侧边栏有清晰的分组
|
||||
- [ ] 卡片样式统一（圆角、阴影、内边距）
|
||||
- [ ] 所有功能正常工作
|
||||
- [ ] 响应式布局正常（不同屏幕尺寸）
|
||||
- 所有主要功能区域都用 container(border=True) 或 tabs
|
||||
- 次要信息保持用 expander
|
||||
- 侧边栏有清晰的分组
|
||||
- 卡片样式统一（圆角、阴影、内边距）
|
||||
- 所有功能正常工作
|
||||
- 响应式布局正常（不同屏幕尺寸）
|
||||
|
||||
---
|
||||
|
||||
## 💡 建议
|
||||
|
||||
**推荐实施顺序**：
|
||||
|
||||
1. ✅ 先做阶段 1（CSS），立即看到效果
|
||||
2. ✅ 再做阶段 3（侧边栏），改动小风险低
|
||||
3. ✅ 最后做阶段 2（Expander），需要仔细测试
|
||||
|
||||
**如果遇到问题**：
|
||||
|
||||
- 先回退到上一个稳定版本
|
||||
- 逐个 tab 测试，不要一次性改完
|
||||
- 保留原代码注释，方便对比
|
||||
@@ -274,9 +288,10 @@ with st.sidebar:
|
||||
## 🎯 预期效果
|
||||
|
||||
实施完成后，你的工具将：
|
||||
|
||||
- ✨ 视觉更现代，更像产品级应用
|
||||
- 🎯 功能组织更清晰，减少滚动疲劳
|
||||
- 📱 用户体验更好，操作更直观
|
||||
- 🎨 保持专业感，同时更美观
|
||||
|
||||
**复杂度总结**：中等，但可以分阶段实施，风险可控！
|
||||
**复杂度总结**：中等，但可以分阶段实施，风险可控！
|
||||
Reference in New Issue
Block a user