一个面向政府门户网站、政务服务大厅和便民服务平台的前端交互原型，将 分步式智能导引 与 全部事项多维筛选 整合在同一个页面中，帮助不同类型的用户快速找到对应的政务服务事项。
当前版本：v1.1.0
项目形态：静态前端原型
技术栈：HTML5、CSS3、原生 JavaScript、SVG
传统政务服务目录往往事项数量多、分类复杂，普通用户不一定知道事项名称、所属部门或办理类别。本项目提供两种互补的查询方式：
- 智能导引：适合不知道具体事项名称的用户，通过连续选择服务对象、业务场景和实际情况，逐步缩小范围并推荐相关事项。
- 全部事项：适合已经了解大致办理方向的用户，通过服务对象、分类、人群、生命周期、实施主体、事项类型和关键词等条件快速筛选。
两种模式共用同一份事项数据，避免同一事项在不同入口中重复维护，也便于后期接入真实政务数据接口或后台管理系统。
- 支持个人服务、法人服务、社会组织、部门服务四类入口
- 支持二级、三级及更多层级的分步选择
- 显示当前步骤和导引进度
- 面包屑展示当前选择路径
- 支持返回上一步和重新开始
- 每个选项显示预计匹配事项数量
- 最终节点可匹配一个或多个服务事项
- 可将导引结果带入“全部事项”模式继续筛选
- 按服务对象筛选
- 按场景、主题、人群、生命周期四种维度分类
- 分类标签展开与收起
- 已选条件标签展示与单项移除
- 按实施主体筛选
- 按事项类型筛选
- 按事项名称关键词搜索
- 仅查看可网上办理事项
- 支持综合排序、事项名称排序、实施主体排序
- 支持分页展示
- 无结果时提供清晰的处理建议
- 桌面端采用表格方式展示
- 手机端自动切换为卡片布局
- 展示事项名称、实施主体、事项类型和办理方式
- 支持打开办事指南弹窗
- 办事指南包含适用对象、材料、流程、时限、费用和办理地点等信息
- 支持网上办理入口提示
- 顶部全局事项搜索
- 常用服务入口
- 使用帮助面板
- URL Hash 保存主要导引和筛选状态
- 页面刷新后可恢复主要状态
- 支持浏览器前进、后退和链接分享场景
- 响应式布局，兼容桌面端、平板和手机端
- 支持键盘操作和基础无障碍访问
- 不依赖第三方在线资源，可直接离线运行
项目采用“先导引、再筛选、最后办理”的服务流程：
用户进入页面
↓
选择智能导引或全部事项
↓
逐步回答问题 / 设置筛选条件
↓
获得相关事项列表
↓
查看办事指南
↓
进入正式网上办理平台
这种设计同时兼顾两类用户：
- 不熟悉政府部门和事项名称的普通用户；
- 已经知道办理方向、希望快速定位服务的用户。
government-service-guide-v1.1.0/
├─ index.html # 页面主体结构
├─ README.md # 项目说明文档
└─ assets/
├─ css/
│ └─ style.css # 页面样式与响应式布局
├─ data/
│ └─ data.js # 分类、事项和导引规则数据
├─ images/
│ └─ city-hero.svg # 顶部城市背景图
└─ js/
└─ app.js # 页面交互、筛选和状态管理
- 下载并解压项目文件；
- 进入项目目录；
- 双击
index.html； - 使用 Chrome、Edge 或其他现代浏览器打开。
项目数据通过普通 JavaScript 文件加载，没有使用本地 fetch() 请求，因此直接以 file:// 方式打开也能正常运行。
可以将整个项目目录上传到普通静态服务器、政府网站目录或对象存储中，然后访问：
https://your-domain.example/service-guide/index.html
也可以把页面主体嵌入现有系统，例如：
- 政府门户网站专题页
- WordPress 页面模板
- PHP 政务服务平台
- Java、.NET 或其他后台系统
- 政务服务大厅触摸屏页面
所有演示数据集中保存在：
assets/data/data.js
数据主要由三部分组成。
用于维护：
- 服务对象
- 分类维度
- 分类标签
- 实施主体
- 事项类型
示例：
{
id: "personal",
name: "个人服务",
icon: "人",
description: "面向自然人的证件、社保、教育、婚育等服务"
}每个服务事项只保存一次，并通过标签同时关联多个分类维度。
{
id: "id-card-renewal",
title: "居民身份证换领",
audiences: ["personal", "department"],
tags: {
scene: ["documents"],
topic: ["household", "public-security"],
crowd: ["all"],
lifecycle: []
},
agency: "城阳公安分局",
type: "行政确认",
online: true
}这种标签化结构使同一事项可以同时出现在：
- 证件办理
- 户籍身份
- 公安服务
- 个人服务
- 部门服务
无需在多个分类下重复复制事项内容。
用于定义智能导引的问题树、选项关系和最终匹配条件。
每一个导引节点可以：
- 继续显示子选项；
- 增加筛选条件；
- 直接进入结果节点；
- 匹配一个或多个服务事项。
在以下文件中修改标题、品牌名称和页面文字：
index.html
assets/data/data.js
在 assets/css/style.css 中调整 CSS 变量或主要颜色值，即可替换为目标政府网站的视觉规范。
建议统一修改：
- 主色
- 辅助色
- 强调色
- 按钮状态色
- 边框色
- 背景色
- 字体大小和间距
在 services 数组中增加一条事项数据，并配置对应的：
- 服务对象
- 场景标签
- 主题标签
- 人群标签
- 生命周期标签
- 实施主体
- 事项类型
- 是否支持网上办理
- 办理条件
- 所需材料
- 办理流程
在 guide 问题树中增加新的节点，并设置相应筛选条件。前端会根据数据自动生成选项卡片，无需在 HTML 中重复编写按钮。
本项目已经考虑以下基础要求：
- 使用语义化 HTML 标签
- 交互选项使用真实
button元素 - 支持键盘 Tab 导航
- 支持 Enter 和空格操作按钮
- 提供跳过导航链接
- 为主要导航和筛选区域增加辅助说明
- 使用
aria-live提示动态内容变化 - 为弹窗设置标题关联和关闭按钮
- 当前状态不只依赖颜色表达
- 桌面端表格在手机端自动切换为卡片
正式用于政府网站前，仍建议按照项目所在地的政务网站无障碍规范进行专项检测和人工验收。
- 替换演示网站名称、标识和背景图
- 导入真实政务服务事项数据
- 核验事项名称、实施主体和事项类型
- 核验办理条件、材料、流程、时限和收费标准
- 替换真实办事指南和网上办理链接
- 清理空值、重复分类和无事项分类
- 建立事项失效和链接失效检查机制
- 对接正式后端 API 或政务服务数据接口
- 对外部链接设置允许域名范围
- 对接口数据进行转义和格式校验
- 设置内容安全策略和常规安全响应头
- 避免在导引页面收集不必要的个人敏感信息
- 对访问统计进行匿名化处理
- 增加错误日志和接口异常提示
- 使用真实用户完成可用性测试
- 测试老年人和低数字化能力用户操作体验
- 验证手机端按钮尺寸和文字可读性
- 增加“找不到服务”人工咨询入口
- 根据搜索记录优化常用事项排序
- 接入 WordPress REST API
- 接入 PHP + MySQL 管理后台
- 接入现有政务服务事项接口
- 增加后台分类和事项编辑功能
- 增加导引流程可视化编辑器
- 增加服务收藏和最近访问记录
- 增加事项对比功能
- 增加政策依据和常见问题模块
- 增加材料下载和表格模板
- 增加办事地点地图与预约功能
- 增加多语言版本
- 增加访问、搜索和转化统计
- 增加数据完整性自动校验
- 纯原生开发：无框架依赖，部署简单
- 数据驱动：分类、事项和导引规则与页面结构分离
- 双模式查询：兼顾智能导引和专业筛选
- 统一数据源：减少重复维护和内容不一致
- 响应式设计：适配电脑、平板和手机
- 离线可运行：适合演示、测试和内网部署
- 容易扩展：可平滑接入 WordPress、PHP 或其他后端接口
建议使用以下现代浏览器：
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
项目使用了原生 <dialog> 等现代浏览器功能，不建议在已停止维护的旧版浏览器中使用。
- 新增“智能导引 / 全部事项”双模式切换
- 新增场景、主题、人群、生命周期多维分类
- 新增已选条件展示和单项移除
- 新增实施主体与事项类型筛选
- 新增事项搜索、排序、分页和仅看网办
- 新增桌面端表格与手机端卡片布局
- 新增办事指南弹窗
- 新增 URL 状态保存与恢复
- 优化响应式布局和基础无障碍体验
本项目当前为政务服务页面的前端交互原型，页面中的机构名称、服务内容、办理时限、收费标准、咨询电话和跳转链接均为演示数据。正式使用前必须以政府部门发布的权威信息为准，并完成数据审核、链接核验、安全测试和无障碍验收。
可根据实际项目要求选择开源许可证。政府内部项目或未公开项目，也可以保留为私有仓库，不设置公开许可证。