Duguay/Agent-n8n
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复ResultModal数据提取时的agent调用错误

Browse Source 
详细说明:
- 修复getProjectInfo函数中seq.agent()的类型错误
- 添加兼容性处理，支持函数和对象两种数据格式
- 解决选择订单班后点击按钮导致页面崩溃的问题
- 修改文件: WorkflowPageV4.tsx (第934行)
- 影响模块: ResultModal数据显示系统

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
2025-10-10 14:25:07 +08:00
parent 6f1a9a577c
commit 125a134902
40 changed files with 7501 additions and 876 deletions
Download Patch File Download Diff File Expand all files Collapse all files

716
web_frontend/web_result/order-classes/visual-design/LAYOUT_DESIGN.md Normal file
View File

@@ -0,0 +1,716 @@
# 视觉设计订单班 - 独特布局设计方案
## 设计原则
**每个Section使用完全不同的布局模式，避免任何重复**
---
## Section 1: 项目概述与宣传目标
**布局模式：Alternating Layout (左右交替布局)**
### ASCII 布局图
```
┌────────────────────────────────────────────────────────────────┐
│ Section 1 │
├────────────────────────────────────────────────────────────────┤
│ 【项目定位】 - 左图右文 │
│ ┌─────────────────┐ ┌────────────────────────────┐ │
│ │ │ │ 📍 项目定位 │ │
│ │ 同里古镇 │ │ 地理位置: 江苏苏州 │ │
│ │ 航拍图 │ │ 片长设定: 6-7分钟 │ │
│ │ (图片) │ │ 内容章节: 6大主题 │ │
│ │ │ │ 拍摄方式: 航拍+地面 │ │
│ └─────────────────┘ └────────────────────────────┘ │
│ ← flex-direction: row │
│ │
│ 【色彩体系】 - 右图左文 (反向) │
│ ┌────────────────────────────┐ ┌─────────────────┐ │
│ │ 🎨 色彩体系 │ │ │ │
│ │ 青瓦灰: 古建筑主色调 │ │ 传统配色表 │ │
│ │ 悟道黄: 传统文化底蕴 │ │ (图片) │ │
│ │ 山吹色: 温暖人文气息 │ │ │ │
│ └────────────────────────────┘ └─────────────────┘ │
│ ← flex-direction: row-reverse │
│ │
│ 【四大宣传目标】 - Bento Grid (不规则网格) │
│ ┌───────────────────┬─────────┬─────────┐ │
│ │ │ │ │ │
│ │ 🏛️ 文化传承 │ 🍜美食 │ 🌿生态 │ │
│ │ (grid-row: 1/3) │ 体验 │ 旅游 │ │
│ │ 占2行高度 │ │ │ │
│ │ ├─────────┴─────────┤ │
│ │ │ │ │
│ │ │ 🌾 产业融合 │ │
│ │ │ (grid-column:2/4) │ │
│ └───────────────────┴───────────────────┘ │
│ ← 第1项占2行，其他项灵活排列 │
└────────────────────────────────────────────────────────────────┘
```
### CSS 实现
```css
/* 左右交替布局 */
.alternating-layout {
display: flex;
gap: var(--spacing-2xl);
align-items: center;
margin-bottom: var(--spacing-3xl);
}
.alternating-layout:nth-child(even) {
flex-direction: row-reverse; /* 偶数项反向 */
}
.alternating-layout .image-container {
flex: 0 0 45%; /* 图片占45% */
aspect-ratio: 16/9;
}
.alternating-layout .content {
flex: 1; /* 内容占剩余空间 */
}
/* Bento Grid 不规则网格 */
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: var(--spacing-xl);
}
.bento-item:first-child {
grid-row: 1 / 3; /* 第1项占2行 */
}
.bento-item:last-child {
grid-column: 2 / 4; /* 最后1项占2列 */
}
/* 响应式 */
@media (max-width: 768px) {
.alternating-layout {
flex-direction: column !important;
}
.bento-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.bento-item:first-child,
.bento-item:last-child {
grid-row: auto;
grid-column: auto;
}
}
```
---
## Section 2: 影片视觉基调与内容设计
**布局模式：Featured Grid (高亮第一项布局)**
### ASCII 布局图
```
┌────────────────────────────────────────────────────────────────┐
│ Section 2 │
├────────────────────────────────────────────────────────────────┤
│ 【六大主题章节】 - Featured Grid │
│ ┌─────────────────────┬─────────┬─────────┬─────────┐ │
│ │ │ │ │ │ │
│ │ │第2章 │第3章 │第4章 │ │
│ │ 🏛️ 第1章 │历史 │美食 │生态 │ │
│ │ 开篇·同里古镇 │文化篇 │篇 │湿地篇 │ │
│ │ │ │ │ │ │
│ │ (grid-row: 1/3) ├─────────┼─────────┼─────────┤ │
│ │ 占2行 │第5章 │第6章 │ │ │
│ │ │农业 │夜游 │ │ │
│ │ 大图展示 │产业篇 │同里篇 │ │ │
│ │ │ │ │ │ │
│ └─────────────────────┴─────────┴─────────┴─────────┘ │
│ ← 第1章高亮，占2行高度 │
│ │
│ 【数据展示】 - Progress Bars (进度条样式) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 影片时长 ████████░░ 6-7分钟 │ │
│ │ 拍摄章节 ██████████ 6个 │ │
│ │ 拍摄地点 ███████░░░ 15+个 │ │
│ │ 航拍镜头 ████████░░ 8个 │ │
│ └──────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
```
### CSS 实现
```css
/* Featured Grid - 高亮第一项 */
.featured-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: var(--spacing-xl);
}
.featured-item:first-child {
grid-column: 1 / 2; /* 占第1列 */
grid-row: 1 / 3; /* 跨2行 */
background: linear-gradient(135deg,
var(--primary) 0%,
var(--secondary) 100%);
color: white;
}
.featured-item:first-child .image-container {
aspect-ratio: 3/4; /* 竖向比例 */
}
.featured-item:first-child .card-title {
font-size: var(--text-3xl);
}
/* 其他项目正常尺寸 */
.featured-item:not(:first-child) .image-container {
aspect-ratio: 4/3;
}
/* Progress Bars */
.progress-stats {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
background: var(--bg-card);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
}
.progress-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.progress-label {
flex: 0 0 100px;
font-weight: var(--font-semibold);
}
.progress-bar {
flex: 1;
height: 8px;
background: var(--bg-muted);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg,
var(--primary),
var(--accent));
transition: width 1s ease;
}
.progress-value {
flex: 0 0 80px;
text-align: right;
font-weight: var(--font-bold);
color: var(--primary);
}
/* 响应式 */
@media (max-width: 1024px) {
.featured-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.featured-grid {
grid-template-columns: 1fr;
}
.featured-item:first-child {
grid-column: auto;
grid-row: auto;
}
}
```
---
## Section 3: 分镜设计方案
**布局模式：Timeline Layout (时间线布局)**
### ASCII 布局图
```
┌────────────────────────────────────────────────────────────────┐
│ Section 3 │
├────────────────────────────────────────────────────────────────┤
│ 【17个分镜设计】 - Vertical Timeline │
│ │
│ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐ │
│ ┃ 镜号1 | 15秒 │ │
│ ┃ ┌──────────┐ ┌──────────────────────────┐ │ │
│ ┃ │ 缩略图 │ │ 同里古镇全景航拍 │ │ │
│ ┃ │ (小图) │ │ 拍摄方式: 高空俯拍 │ │ │
│ ┃ └──────────┘ │ 备注: 展现古镇整体布局 │ │ │
│ ┃ └──────────────────────────┘ │ │
│ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘ │
│ ┃ │
│ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐ │
│ ┃ 镜号2 | 12秒 │ │
│ ┃ ┌──────────┐ ┌──────────────────────────┐ │ │
│ ┃ │ 缩略图 │ │ 水乡特色河道 │ │ │
│ ┃ │ (小图) │ │ 拍摄方式: 低空航拍 │ │ │
│ ┃ └──────────┘ │ 备注: 展现水系脉络 │ │ │
│ ┃ └──────────────────────────┘ │ │
│ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘ │
│ ┃ │
│ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┐ │
│ ┃ 镜号3 | 20秒 │ │
│ ┃ ... │ │
│ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘ │
│ │
│ ← 垂直时间线，左侧圆点，右侧内容卡片 │
│ │
│ 【拍摄技法总结】 - Icon Grid (图标网格) │
│ ┌────────────┬────────────┬────────────┬────────────┐ │
│ │ 📐 航拍 │ 🎥 地面 │ ⚡ 特殊 │ 🎨 后期 │ │
│ │ 8个镜头 │ 6个镜头 │ 3个镜头 │ 调色+特效 │ │
│ └────────────┴────────────┴────────────┴────────────┘ │
└────────────────────────────────────────────────────────────────┘
```
### CSS 实现
```css
/* Vertical Timeline */
.timeline-container {
position: relative;
padding-left: var(--spacing-3xl);
}
.timeline-container::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(
to bottom,
var(--primary) 0%,
var(--accent) 100%
);
}
.timeline-item {
position: relative;
margin-bottom: var(--spacing-2xl);
background: var(--bg-card);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.timeline-item::before {
content: '';
position: absolute;
left: calc(-1 * var(--spacing-3xl) - 8px);
top: var(--spacing-lg);
width: 20px;
height: 20px;
background: var(--primary);
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 0 0 3px var(--primary-light);
}
.timeline-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--border);
}
.timeline-badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--primary);
color: white;
border-radius: var(--radius-full);
font-weight: var(--font-bold);
font-size: var(--text-sm);
}
.timeline-duration {
color: var(--text-gray);
font-size: var(--text-sm);
}
.timeline-content {
display: flex;
gap: var(--spacing-lg);
align-items: flex-start;
}
.timeline-thumbnail {
flex: 0 0 150px;
aspect-ratio: 16/9;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-muted);
}
.timeline-description {
flex: 1;
}
.timeline-title {
font-size: var(--text-xl);
font-weight: var(--font-semibold);
margin-bottom: var(--spacing-sm);
}
.timeline-details {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
font-size: var(--text-sm);
color: var(--text-gray);
}
/* Icon Grid */
.icon-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
margin-top: var(--spacing-2xl);
}
.icon-card {
text-align: center;
padding: var(--spacing-xl);
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 2px solid var(--border);
transition: all 0.3s ease;
}
.icon-card:hover {
border-color: var(--primary);
transform: translateY(-5px);
}
.icon-card-icon {
font-size: 3rem;
margin-bottom: var(--spacing-md);
}
.icon-card-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--spacing-xs);
}
.icon-card-value {
color: var(--text-gray);
font-size: var(--text-sm);
}
/* 响应式 */
@media (max-width: 768px) {
.timeline-content {
flex-direction: column;
}
.timeline-thumbnail {
flex: 0 0 auto;
width: 100%;
}
.icon-grid {
grid-template-columns: repeat(2, 1fr);
}
}
```
---
## Section 4: 拍摄预算与制作安排
**布局模式：Accordion Panels (手风琴折叠面板)**
### ASCII 布局图
```
┌────────────────────────────────────────────────────────────────┐
│ Section 4 │
├────────────────────────────────────────────────────────────────┤
│ 【Accordion手风琴面板】 │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 💰 预算明细 (展开状态) ▼ │ │
│ ├──────────────────────────────────────────────────────────┤ │
│ │ ┌────────────┬──────────────┬───────┬──────┐ │ │
│ │ │ 预算项目 │ 明细说明 │ 金额 │ 占比 │ │ │
│ │ ├────────────┼──────────────┼───────┼──────┤ │ │
│ │ │ 前期策划 │ 创意策划... │20,000 │ 7.3% │ │ │
│ │ │ 导演费用 │ 导演统筹... │15,000 │ 5.5% │ │ │
│ │ │ ... │ ... │ ... │ ... │ │ │
│ │ └────────────┴──────────────┴───────┴──────┘ │ │
│ │ │ │
│ │ 【饼图】预算占比可视化 │ │
│ │ 前期策划 7.3% │ │
│ │ ●●○○○○○○○○ │ │
│ │ 器材租赁 16.4% │ │
│ │ ●●●○○○○○○○ │ │
│ │ 后期剪辑 18.3% │ │
│ │ ●●●●○○○○○○ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 👥 团队配置 (折叠状态) ▶ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 📅 拍摄进度 (折叠状态) ▶ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 📷 器材清单 (折叠状态) ▶ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 🎬 后期制作 (折叠状态) ▶ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ← 点击展开/折叠，节省空间，清晰分类 │
└────────────────────────────────────────────────────────────────┘
```
### CSS 实现
```css
/* Accordion Container */
.accordion-container {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.accordion-item {
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 2px solid var(--border);
overflow: hidden;
transition: all 0.3s ease;
}
.accordion-item.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-light);
}
.accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-lg) var(--spacing-xl);
background: var(--bg-semi-dark);
cursor: pointer;
transition: all 0.3s ease;
}
.accordion-header:hover {
background: var(--bg-hover);
}
.accordion-title {
display: flex;
align-items: center;
gap: var(--spacing-md);
font-size: var(--text-xl);
font-weight: var(--font-semibold);
}
.accordion-icon {
font-size: 1.5rem;
}
.accordion-toggle {
font-size: 1.5rem;
color: var(--text-gray);
transition: transform 0.3s ease;
}
.accordion-item.active .accordion-toggle {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
padding: 0 var(--spacing-xl);
}
.accordion-item.active .accordion-content {
max-height: 2000px; /* 足够大的值 */
padding: var(--spacing-xl);
}
/* 预算饼图样式 */
.budget-chart {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.chart-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.chart-label {
flex: 0 0 150px;
font-size: var(--text-sm);
}
.chart-bar {
flex: 1;
height: 12px;
background: var(--bg-muted);
border-radius: var(--radius-full);
overflow: hidden;
}
.chart-fill {
height: 100%;
background: linear-gradient(90deg,
var(--primary),
var(--accent));
border-radius: var(--radius-full);
transition: width 1s ease;
}
.chart-value {
flex: 0 0 60px;
text-align: right;
font-weight: var(--font-bold);
color: var(--primary);
font-size: var(--text-sm);
}
/* 团队卡片网格 */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
}
.team-card {
text-align: center;
padding: var(--spacing-lg);
background: var(--bg-muted);
border-radius: var(--radius-md);
}
.team-icon {
font-size: 2rem;
margin-bottom: var(--spacing-sm);
}
.team-role {
font-weight: var(--font-semibold);
margin-bottom: var(--spacing-xs);
}
.team-count {
color: var(--text-gray);
font-size: var(--text-sm);
}
/* 响应式 */
@media (max-width: 768px) {
.accordion-header {
padding: var(--spacing-md);
}
.accordion-title {
font-size: var(--text-lg);
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
```
### JavaScript 交互
```javascript
// Accordion 交互逻辑
document.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', () => {
const item = header.parentElement;
const wasActive = item.classList.contains('active');
// 关闭所有其他面板
document.querySelectorAll('.accordion-item').forEach(otherItem => {
otherItem.classList.remove('active');
});
// 切换当前面板
if (!wasActive) {
item.classList.add('active');
}
});
});
// 默认打开第一个面板
document.querySelector('.accordion-item')?.classList.add('active');
```
---
## 布局对比总结
### 各Section布局特点
| Section | 布局模式 | 关键特征 | 适用场景 |
|---------|---------|---------|---------|
| **Section 1** | Alternating Layout + Bento Grid | 左右交替 + 不规则网格 | 图文并茂展示，第一印象 |
| **Section 2** | Featured Grid | 第1项高亮占2行 | 突出重点章节 |
| **Section 3** | Timeline | 垂直时间线 | 按时间顺序展示流程 |
| **Section 4** | Accordion | 折叠面板 | 大量分类信息收纳 |
### 布局多样性达成
✅ **0重复** - 每个Section完全不同的布局模式
✅ **视觉层次** - 从开放布局到紧凑布局逐步过渡
✅ **交互丰富** - 静态展示 + 动态交互结合
✅ **响应式完善** - 所有布局都支持移动端
---
## 实施步骤
1. **Section 1**:
- 替换Grid-2为Alternating Layout
- 替换Grid-4为Bento Grid
2. **Section 2**:
- Grid-3改为Featured Grid
- Stats改为Progress Bars
3. **Section 3**:
- Table保留但改为Timeline卡片
- Grid-3改为Icon Grid
4. **Section 4**:
- 所有内容整合到Accordion面板
- Table和Grid作为面板内容展示
---
**设计完成时间**: 2025年10月
**设计师**: Claude Code Assistant
**版本**: v1.0