核心问题
如何将工作流页面重构为与文章详情页一致的Bootstrap网格布局和列表卡片结构？
## 背景 在 `d-django-circler` 项目中，`article.html` 作为文章详情页模板已经形成了一套清晰的视觉风格：左侧主内容区占 8 列，右侧边栏占 4 列，文章列表采用垂直排列的卡片结构，卡片内部包含标题、元数据、正文摘要和操作链接。而 `workflow.html` 工作流列表页则使用了网格布局，列宽比例为 9:3，整体感受与文章页不统一。为了提升用户体验并降低维护成本，决定将 `workflow.html` 重构为与 `article.html` 相同的结构风格。 ## 布局调整：统一列宽比例 第一步是修改 Bootstrap 栅格类，使左右两栏的宽度与 `article.html` 完全一致。 - 原结构：左侧 `col-lg-9`，右侧 `col-lg-3` - 新结构：左侧 `col-lg-8`，右侧 `col-lg-4` 这样调整后，工作流页面与文章页在整体版面上形成统一，左侧内容区域略微收窄，右侧边栏变宽，适合放置分类筛选或其他辅助信息。 ```django
...
...
...
...
{% for workflow in workflows %}
...
{% endfor %}
{% for workflow in workflows %}
...
{% endfor %}
```
## 卡片结构重构：三层语义化结构
卡片是整个列表的核心元素。文章页的卡片使用了 `` 或 ``）以及元数据，如创建时间和浏览量。例如：
```django
{{ workflow.title }}
```
### 卡片主体（workflow_card_body）
显示缩略图和描述摘要。描述长度从原来的 64 字符增加到 140 字符，以便用户获取更多信息。
```django
{{ workflow.description|truncatechars:140 }}
```
### 卡片尾部（workflow_card_footer）
包含分类标签和“查看详情”链接，与文章页的操作入口保持一致。
```django
```
## 内容展示优化
除了结构调整，还微调了描述文字的截断长度。原先 `truncatechars:64` 可能不够展示工作流的关键步骤，现在改为 140 字符，既保留了简洁性，又提供了更充分的上下文。
## 保持功能完全不变
整个重构过程中，所有后端传递的变量、链接地址、视图逻辑以及条件判断均未做任何修改。你原有的数据绑定、分页、权限控制等功能仍然原封不动地生效。本次修改纯粹是 HTML/CSS 类名和结构的替换，属于“无侵入式”的风格统一。
## 总结
通过以上四个步骤，`workflow.html` 成功复用了 `article.html` 的设计语言：
1. 使用相同的 Bootstrap 列宽比例（`col-lg-8` + `col-lg-4`）。
2. 将网格布局改为垂直列表布局，类名从 `workflow_grid` 变为 `workflow_list_section`。
3. 卡片内部采用 `` + 三层结构化（header / body / footer）。
4. 保留所有原有功能，仅调整样式和结构。
这种重构方法不仅适用于本次工作流页面，也适用于项目中其他需要统一风格的列表页面，有助于提升整体设计的一致性和可维护性。
{{ workflow.title }}
{{ workflow.description|truncatechars:140 }}