建筑网站导航系统 v1.9 - 需求清单与优化路线图

问筑

建筑网站导航系统 v1.9 - 需求清单与优化路线图

项目背景


一、 产品目标与核心功能需求

1.1 核心定位

• 建筑行业垂直导航网站，收录并分类优质行业资源

• 支持用户申请收录，形成内容生态

• 兼顾普通用户查询与管理员高效管理

1.2 核心功能清单

模块 必须功能 状态

前台展示 分类展示、网站卡片、搜索、响应式布局
内容申请 用户提交网站申请（含标签、付费选项）

后台管理 分类/网站/申请的全功能管理

智能搜索 关键词搜索、热搜系统、最近搜索

交互功能 拖动排序、分类折叠、整卡点击跳转

二、 UI/UX 设计需求（基于W.pgive.com参考）

2.1 视觉风格

• 主色调：橙色 (#E67E22) 为主，浅灰 (#f7f8fa) 为背景

• 字体颜色：正文黑色 (#333)，提高可读性

• Logo设计：橙色渐变网格球形图案，与Favicon统一

• 网站名称：显示为“建筑网站”（原“建筑网址导航”），黑色字体

2.2 布局结构

• 桌面端：左侧窄侧栏(70px) + 右侧卡片网格

• 侧栏设计：图标+文字垂直排列，非传统宽侧栏

• 移动端：顶部Header + 内容区，分类抽屉从右侧滑出

• Header区：Logo居左 + 搜索框(胶囊样式) + 分类按钮(圆形)

2.3 关键交互组件

1. 悬浮按钮组（右下角）
   • 📂 折叠/展开所有分类

   • 🌙/☀ 关灯模式切换

   • ↑ 返回顶部（滚动>300px显示）

2. Hero统计行
   • 三卡片等宽设计：精选网站数 + 分类数 + 申请收录（带价格）

   • 无边框背景，纯文字样式，点击“申请收录”弹出表单

3. 分类头部区域
   • 左侧：分类名称

   • 右侧：热搜标签区（普通用户）/ 编辑按钮（管理员）

三、 前台功能详细需求

3.1 网站卡片系统

• 尺寸统一：等宽等高分，移动端左右对齐

• 交互：整张卡片可点击跳转（无单独“访问”按钮）

• 信息展示：

  • 网站名称（单行截断）

  • 网站描述（单行截断，不换行）

  • 标签行（自适应宽度，最多两行）

• 排序功能：拖动排序（需登录管理员，显示⋮⋮手柄）

3.2 分类展示逻辑

• 默认状态：所有分类默认折叠，显示前10个网站（约两排）

• 展开机制：底部显示“展开全部”，点击平滑展开

• 移动端：点击分类按钮→右侧滑出抽屉，显示全部分类列表

3.3 搜索与发现

1. 搜索框：胶囊样式，居中放置
2. 搜索结果：
   • 自动滚动到匹配的第一个分类

   • 关键词在卡片中高亮显示

3. 热搜系统：
   • 各分类头部右侧显示热搜标签（红色🔥样式）

   • 支持两种格式：

     ◦ 纯文本 → 站内搜索

     ◦ “词|URL” → 直接跳转外链

   • 管理员可编辑各分类热搜词

4. 最近搜索：
   • 记录最近20个搜索词（localStorage）

   • 在分类头部显示为可点击标签

   • 移动端可隐藏以防拥挤

3.4 申请收录模块

• 触发位置：Hero区域第三统计卡片

• 表单字段：

  • 网站名称、URL、描述

  • 分类选择（下拉）

  • 标签输入（回车添加，最多5个）

  • 联系方式

  • 付费选项：

    ◦ 免费收录（排队审核）

    ◦ 推荐收录 ¥99/年（优先审核+首页展示1周）

    ◦ 置顶收录 ¥299/年（分类置顶+首页展示1月）

四、 后台管理系统需求

4.1 基础管理功能

• 分类管理：增删改查、排序

• 网站管理：增删改查、批量操作、到期管理

• 申请审核：查看、通过、拒绝、批量操作

• 热搜管理：各分类热搜词编辑

• 网站设置：

  • 基础信息（名称、描述等）

  • 底部信息（关于我们、快速链接-支持JSON格式）

  • 到期管理设置（提前提醒天数、自动隐藏开关）

4.2 高级管理功能

1. 批量操作：
   • 网站：全选/批量启用/禁用/删除

   • 申请：批量通过/批量拒绝

2. 到期管理系统：
   • 网站列表显示到期日期

   • 过期网站自动标红

   • 支持设置到期日期

3. 申请审核增强：
   • 显示用户提交的标签

   • 标识付费等级

   • 显示完整申请信息

4.3 权限与访问控制

• 编辑模式：右上角开关，普通用户可见但禁用

• 管理入口：登录后显示“⚙后台管理”

• 移动端底部栏：仅管理员登录后显示后台入口

五、 移动端特殊需求

5.1 布局适配

• Header固定：Logo+站名左，搜索框居中，分类按钮右

• 分类导航：点击分类按钮→右侧滑出全屏抽屉

• 卡片布局：等宽等分，防止左右不对称

• 底部区域：移除多余按钮，仅保留悬浮按钮组

5.2 交互优化

• 防止缩放：iOS Safari添加user-scalable=no

• 滚动修复：防止水平滚动干扰垂直滚动

• 点击精准：Header区仅分类按钮可触发抽屉，其他区域不触发

• Safari白边：确保页面背景为纯白

5.3 功能可见性

• 热搜标签：移动端限制最大宽度，不完全隐藏

• 编辑功能：移动端隐藏复杂编辑UI，保留核心功能

• 关灯模式：确保悬浮按钮在移动端可点击

六、 已发现并修复的BUG清单

6.1 严重级别BUG（已修复）

1. 中文乱码：数据库字符集设置为Latin1导致
2. 500服务器错误：PHP头部代码缺失，函数未定义
3. 登录失败：密码哈希不匹配（test/123456）
4. 移动端样式缓存：浏览器缓存旧CSS
5. 会话写入失败：IIS应用池无sessions目录写入权限
6. 热搜保存失败：set_config函数参数错误
7. 申请表单变量缺失：categories和base_url未定义
8. 后台审核页面逻辑错误：endif位置和colspan错误

6.2 一般级别BUG（已修复）

1. 移动端无法上滑：水平滚动条干扰
2. 苹果手机页面缩放：点击搜索框页面缩放
3. 卡片宽度不一致：移动端左右卡片不对齐
4. 关灯模式失效：移动端悬浮按钮不显示
5. 抽屉误触发：Header区任意位置点击都打开分类抽屉


7.2 技术规范

• 字符编码：全站UTF-8，数据库utf8mb4

• 响应式断点：

  • 桌面：>900px

  • 平板：≤900px

  • 手机：≤680px

  • 小屏：≤380px

• 浏览器兼容：现代浏览器+ iOS Safari特殊处理

• 性能要求：页面加载<3秒，拖动排序实时保存

八、 产品优化与迭代建议

8.1 短期优化（v1.9.x）

1. 搜索算法优化：当前为简单LIKE查询，可优化为全文检索
2. 热搜算法智能升级：当前为手动设置，可加入点击权重自动排序
3. 申请审核流程：当前为单步审核，可增加邮件通知
4. 数据统计：当前只有点击统计，可增加访问量、搜索词统计
5. 缓存机制：首页数据缓存，减轻数据库压力

8.2 中期规划（v2.0）

1. 用户系统：注册、登录、个人收藏
2. 评论评分：用户对网站评分评价
3. API开放：为第三方提供分类数据接口
4. 多语言支持：至少支持中英文
5. SEO优化：自动生成sitemap，优化元标签

8.3 长期愿景

1. 移动端APP：基于WebView或原生开发
2. 浏览器插件：快速搜索建筑网站
3. 行业数据分析：基于网站数据提供行业洞察
4. 商业化扩展：高级会员、广告系统
5. AI推荐：基于用户行为智能推荐网站


统一PC与移动端设计风格



本清单基于实际开发对话整理，已按功能模块分类，并标注优先级和状态。建议CTO按“已修复BUG→核心功能优化→新增功能”的顺序安排开发资源。特别注意移动端兼容性和后台批量操作功能的稳定性测试。