日期时间在列表中的扩展应用
模块概述
日期时间在列表中的扩展应用，以「文章标题列表」组件为基础进行二次开发，新增日期时间范围展示、时间驱动的状态判定与操作按钮等功能，形成「意见征集列表」组件，满足意见征集、问卷调查等需展示起止时间和参与状态的场景需求。
核心解决问题
原「文章标题列表」组件仅支持单一发布时间（PublishTime）的展示，无法满足需要展示开始时间 + 结束时间范围、以及根据时间动态判定状态（进行中/未开始/已结束）的业务需求。
功能需求
- 时间范围展示：支持展示开始时间和结束时间，并可分别配置日期格式。
- 动态状态判定：根据当前时间与起止时间的对比，自动显示"进行中""未开始""已结束"三种状态。
- 操作按钮：征集进行中时显示"我要参与"按钮，引导用户操作。
- 结构扩展：在保留原组件所有参数的基础上，新增
<div class="con">内容容器和<div class="others">扩展区域，便于追加更多信息。 - 向后兼容：基于「文章标题列表」组件扩展，保留所有原有参数和能力。
适用场景
- 意见征集列表、问卷调查列表
- 需要展示活动起止时间的公告列表
- 需要根据时间动态显示状态标签的信息列表
- 所有基于「文章标题列表」且需要扩展日期时间能力的场景
核心价值
- 时间驱动状态自动判定，无需手动维护
- 灵活的日期格式配置，适配不同展示需求
- 保留原组件全部能力，降低迁移成本
- 结构化 HTML 扩展，便于 CSS 样式定制
核心功能分类
基于文章标题列表的扩展改造
场景描述
此场景适用于需要在文章列表中展示征集/活动的起止时间范围，并根据当前时间自动显示状态的场景。以「文章标题列表」（文章标题列表.cshtml）为基础，扩展生成「意见征集列表」（意见征集列表.cshtml）。
新增参数对比
以下为「意见征集列表」相比「文章标题列表」新增的4个参数：
| 参数名 | 中文名 | 类型 | 默认值 | 详细说明 |
|---|---|---|---|---|
| DisplayStartDate | 开始时间日期格式 | String | "" | 征集开始时间的显示格式（如 "yyyy-MM-dd"）。为空时不显示开始时间 |
| DisplayEndDate | 结束时间日期格式 | String | "" | 征集结束时间的显示格式（如 "yyyy-MM-dd"）。为空时不显示结束时间 |
| ShowStatus | 是否显示征集状态 | Boolean | false | 开启后根据当前时间与起止时间对比，自动显示"进行中""未开始""已结束" |
| ShowBtn | 是否显示按钮 | Boolean | false | 开启后在征集进行中时显示"我要参与"按钮 |
核心逻辑对比
1. 时间状态判定逻辑（新增）
// 意见征集列表 — 新增：验证扩展字段中的开始/结束时间是否有效
bool startTimeIsNull = DateTime.Compare(
Convert.ToDateTime(Model.ExtendObject.StartTime), new DateTime()) > 0;
bool endTimeIsNull = DateTime.Compare(
Convert.ToDateTime(Model.ExtendObject.EndTime), new DateTime()) > 0;
// 判定征集是否进行中：开始时间 < 当前时间 < 结束时间
bool valid = startTimeIsNull && endTimeIsNull
&& DateTime.Compare(Model.ExtendObject.StartTime, DateTime.Now) < 0
&& DateTime.Compare(Model.ExtendObject.EndTime, DateTime.Now) > 0;
2. 状态标签渲染（新增）
// 意见征集列表 — 新增：根据时间判定显示状态
@if ((Param.ShowStatus ?? false) && startTimeIsNull && endTimeIsNull)
{
<span class="status">
@if (valid)
{
<span class="s1">进行中</span>
}
else
{
<span class="s0">
@(DateTime.Compare(Model.ExtendObject.StartTime, DateTime.Now) > 0
? "未开始" : "已结束")
</span>
}
</span>
}
3. 日期范围展示（新增）
// 意见征集列表 — 新增：在 <div class="others"> 中展示起止时间
@if (!string.IsNullOrEmpty(Param.DisplayStartDate)
|| !string.IsNullOrEmpty(Param.DisplayEndDate))
{
<div class="others">
@if (!string.IsNullOrEmpty(Param.DisplayStartDate) && startTimeIsNull)
{
<span class="startDate">
@Model.ExtendObject.rqsj.ToString(Param.DisplayStartDate)
</span>
}
@if (!string.IsNullOrEmpty(Param.DisplayEndDate) && endTimeIsNull)
{
<span class="endDate">
@Model.ExtendObject.rqsj.ToString(Param.DisplayEndDate)
</span>
}
</div>
}
4. 操作按钮（新增）
// 意见征集列表 — 新增：征集进行中显示参与按钮
@if (Param.ShowBtn ?? false)
{
<div class="btns">
@if (valid)
{
<a class="btn" href="@ContentRouteUrlHelperExtend.ContentUrl(Model)#commentInfo"
target="@target">我要参与</a>
}
</div>
}
HTML结构对比
文章标题列表（原组件）HTML结构：
<li>
<em class="number">01</em> <!-- 序号 -->
<span class="node">[节点名]</span> <!-- 节点名 -->
<span class="date">2025-06-30</span> <!-- 发布日期 -->
<span class="hits">128次</span> <!-- 点击数 -->
<a class="tit" href="...">文章标题</a> <!-- 标题 -->
</li>
意见征集列表（扩展后）HTML结构：
<li>
<em class="number">01</em> <!-- 序号（保留） -->
<span class="node">[节点名]</span> <!-- 节点名（保留） -->
<span class="date">2025-06-30</span> <!-- 发布日期（保留） -->
<span class="hits">128次</span> <!-- 点击数（保留） -->
<span class="status"> <!-- 征集状态（新增） -->
<span class="s1">进行中</span>
</span>
<div class="con"> <!-- 内容容器（新增） -->
<a class="tit" href="...">文章标题</a> <!-- 标题 -->
<div class="others"> <!-- 扩展信息（新增） -->
<span class="startDate">2025-01-01</span> <!-- 开始时间（新增） -->
<span class="endDate">2025-12-31</span> <!-- 结束时间（新增） -->
</div>
</div>
<div class="btns"> <!-- 操作按钮（新增） -->
<a class="btn" href="...">我要参与</a>
</div>
</li>
示例效果
意见征集列表效果展示：发布时间正常显示，征集状态根据时间自动判定（进行中/未开始/已结束），起止时间范围在标题下方展示，进行中的征集显示"我要参与"按钮。
调用示例
- 代码：
<ul class="infoList">
@Power.ArticleList("意见征集列表", new {
Count = 10,
Node = "yizj",
TitleLength = 50,
ShowDate = true,
DateFormat = "yyyy-MM-dd",
ShowStatus = true,
ShowBtn = true,
DisplayStartDate = "开始时间：yyyy年MM月dd日",
DisplayEndDate = "结束时间：yyyy年MM月dd日"
})
</ul>
- 说明： 从标识符为
yizj的节点获取10条意见征集数据，展示标题（截断50字符）、发布日期（yyyy-MM-dd格式），开启征集状态显示和参与按钮，起止时间分别以指定格式展示。
样式实现
/* 意见征集列表样式 */
.infoList li .status {
float: right;
margin-left: 10px;
}
.infoList li .status .s1 {
display: inline-block;
padding: 2px 8px;
color: #fff;
background: #28a745;
border-radius: 3px;
font-size: 12px;
}
.infoList li .status .s0 {
display: inline-block;
padding: 2px 8px;
color: #999;
background: #f0f0f0;
border-radius: 3px;
font-size: 12px;
}
.infoList li .con {
overflow: hidden;
}
.infoList li .con .tit {
display: block;
font-size: 16px;
line-height: 24px;
}
.infoList li .con .others {
margin-top: 5px;
font-size: 12px;
color: #999;
}
.infoList li .con .others span {
margin-right: 15px;
}
.infoList li .btns {
float: right;
margin-left: 15px;
}
.infoList li .btns .btn {
display: inline-block;
padding: 4px 16px;
color: #fff;
background: #0068B7;
border-radius: 4px;
font-size: 14px;
text-decoration: none;
}
.infoList li .btns .btn:hover {
background: #005299;
}
修改要点总结
以下为从「文章标题列表」到「意见征集列表」的核心修改点：
| 序号 | 修改类型 | 修改内容 | 位置 |
|---|---|---|---|
| 1 | 新增参数 | ShowStatus：控制征集状态显示 | Parameters定义区（行36） |
| 2 | 新增参数 | ShowBtn：控制操作按钮显示 | Parameters定义区（行37） |
| 3 | 新增参数 | DisplayStartDate：开始时间日期格式 | Parameters定义区（行46） |
| 4 | 新增参数 | DisplayEndDate：结束时间日期格式 | Parameters定义区（行47） |
| 5 | 新增逻辑 | 起止时间有效性校验 + 征集状态判定（valid） | 代码块区（行83-86） |
| 6 | 新增渲染 | 状态标签：根据 valid 显示"进行中/未开始/已结束" | HTML渲染区（行123-135） |
| 7 | 结构调整 | 标题外包裹 <div class="con"> 容器 | HTML渲染区（行136） |
| 8 | 新增渲染 | 起止时间范围展示在 <div class="others"> | HTML渲染区（行140-151） |
| 9 | 新增渲染 | 参与按钮："我要参与"（仅 valid 时显示） | HTML渲染区（行154-170） |
| 10 | 调整位置 | 相关内容链接移入按钮区域内部 | HTML渲染区（行161-169） |
注意事项
- 扩展字段依赖：起止时间数据来自文章扩展字段
ExtendObject.StartTime/ExtendObject.EndTime，需确保文章模型中已定义对应的扩展字段。 - 参数启用关系：
ShowStatus依赖扩展字段中的起止时间；DisplayStartDate/DisplayEndDate仅在设置了格式字符串时才显示对应日期。 - 时区一致性：时间比较使用
DateTime.Now，与服务端时区保持一致。 - 按钮跳转：参与按钮跳转至内容详情的评论区域（
#commentInfo），可根据实际需求修改锚点。 - 向后兼容：未配置新增参数时，组件行为与原「文章标题列表」完全一致，不影响已有调用。
- 样式覆盖：新增的
.status、.others、.btns等 CSS 类需在站点样式中定义，否则无视觉样式（仅展示裸文本）。
实现要点
时间判定三段式 将当前时间与起止时间比较，划分三种状态：
DateTime.Now < StartTime→ "未开始"StartTime ≤ DateTime.Now ≤ EndTime→ "进行中"DateTime.Now > EndTime→ "已结束"
空值安全处理 通过
DateTime.Compare(..., new DateTime()) > 0判断扩展字段中的时间是否有效赋值，防止未填写起止时间时出现异常状态。参数渐进增强 新增参数均有独立开关（
ShowStatus、ShowBtn）和格式配置（DisplayStartDate、DisplayEndDate），按需组合使用，避免强制绑定。HTML结构扩展 在保留原
<li>直系元素（序号、节点、日期、点击数）的基础上，通过<div class="con">包裹标题和扩展信息，并追加状态标签与按钮区域，结构层次清晰，便于 CSS 定位。保留原始能力 原「文章标题列表」的所有参数和行为完全保留——包括
ShowDate、DateFormat、MinorDateFormat、DateFollowTitle、HighlightDays等，在意见征集场景下仍可正常使用。