2026-09-06 14:19:21 +08:00

37 KiB

Raw Blame History

网站首页修订版 Plan（v2）

本文件在 plan.txt 基础上修订：补全缺失说明、澄清歧义、统一各处术语。凡原 plan 未说明而本文给出默认值的，均已标注 【决策】，可自行调整。本版以"可直接指导编码实现"为标准编写，页面清单、数据模型、布局规格均已明确。

1. 修订要点总览（原 plan 问题 → 本版处理）

#	原 plan 问题	本版处理
1	页面体系与跳转关系未定义	§2 站点地图，明确首页为最前置页，三大知识库各有独立导航区，工具库跳转功能区
2	首页百分比布局自相矛盾（60% 主内容 / 20% 展示栏 / 40% 导航 / 剩余 40% 里"中部主内容"）	§4 重构为自洽的分区模型，保留 20% 展示栏 + 40% 板块区意图
3	技术栈表述笼统	§3 确定 PHP + SQLite(PDO) + 原生 HTML/CSS/JS，可加 layui
4	导航区"留白 10% / 上半部 20%"表述含糊	§5 给出明确高度计算规则
5	"按钮上分蹦出来一个语言栏"（疑似笔误）	§5 定义为悬浮气泡 tooltip 显示备注
6	导航块数据来源、后台归属、超量排布未定义	§5.3 + §7 数据模型 + §6.4 分栏规则
7	功能区首页布局缺失、顶部组件关系不清	§6 定义功能区首页网格布局 + 三类顶部组件分工
8	后台"顺序排布 / 内容设计"对象空泛	§7.3 拆解为可操作的具体配置项
9	登录会话 / 初始管理员 / 越权访问缺失	§7.1、§7.2 补齐
10	quota.txt、avlist.js 格式未约定	§10 明确格式
11	备案号、版权文本来源未说明	§7.3.2 后台可配置 + 默认占位
12	移动端适配规则不全	§9 响应式断点表
13	目录结构缺失	§8 目录规划
14	"上次更新时间"无定义	§4.5 定义数据来源与刷新逻辑
15	密码"base64+md5"安全局限	§7.1 注明局限（按需求实现）
16	板块 hover 展开交互描述绕口	§4.6 重写为实现级规格

2. 站点地图与页面跳转关系

站点逻辑结构（已确认）：

首页区（index）
 ├─ 科普库 → 科普导航页
 ├─ 红队库 → 红队导航页
 ├─ 蓝队库 → 蓝队导航页
 └─ 工具库 → 功能区
                功能区首页
                 ├─ 编码/加解密页
                 ├─ 随机密码生成页
                 ├─ 二维码生成器
                 └─ 杀软识别页
后台区（/admin，需登录）

页面清单：

区域	页面	文件（建议）	说明
首页区	首页	`index.php`	最前置页面
导航区	科普库导航页	`nav.php?cat=popular`	科普 / 红队 / 蓝队三个导航页共用同一模板，按分类参数取数，等价于三个独立页面
导航区	红队库导航页	`nav.php?cat=red`	同上
导航区	蓝队库导航页	`nav.php?cat=blue`	同上
功能区	功能区首页	`func/index.php`	工具入口列表
功能区	编码/加解密	`func/codec.php`
功能区	随机密码生成	`func/password.php`
功能区	二维码生成器	`func/qrcode.php`
功能区	杀软识别	`func/av.php`
后台区	登录页	`admin/login.php`
后台区	导航内容管理（增删改查）	`admin/nav.php`	含排序
后台区	功能区管理（工具入口）	`admin/tools.php`	工具增删改/排序/启停，见 §6.2
后台区	顺序排布 / 内容设计	`admin/content.php`	见 §7.3
数据接口	JSON 输出	`api/nav.php` 等	供页面 JS 取导航数据

【决策】文件全部采用 .php：便于统一 include 顶部栏/页脚、做导航数据渲染、后台鉴权；纯前端静态页若要读 sqlite 也必须走后端接口，统一为 PHP 最省事。

3. 技术栈与运行环境

后端：PHP ≥ 7.4 + PDO_SQLITE 扩展，数据库 data/homepage.db（SQLite3 文件）。
前端：原生 HTML5 + CSS3 + 原生 JS；允许引入 layui 或轻量库（见 §6 工具页选型）。
编码类算法：优先原生 Web Crypto（SHA）；UTF-8 编解码用 TextEncoder/TextDecoder；如需统一兼容 IE 类场景才引入 crypto-js。【决策：现代浏览器优先，不兼容老 IE】
二维码：引入 qrcodejs（单文件 JS 库）。
部署形态：最终放置于服务器（Apache/Nginx + PHP），文档根目录即本工程目录。

实现约束：编码/加解密、密码生成等均为纯前端 JS 计算，不产生请求；仅导航数据与后台写库走 PHP。

4. 首页区规格（index.php）

4.1 整体分区（自洽版布局）

页面允许纵向滚动（不用 JS 死锁 100vh，避免小屏挤压）。各区块高度按"视口高度比例（vh）+ 自然内容高度"混用，规格如下：

区块	顺序	高度规格	内容
A. 顶部展示栏	1	约 20vh（自适应，最小不低于 120px）	见 §4.2
B. 名言条	2	内容自适应（约占 10% 视口）	随机名言，见 §4.3
C. 四大板块区	3	约 40vh 起，内容超高可自然延伸	见 §4.4 / §4.6
D. 页脚	4	内容自适应	见 §4.7

原 plan"主内容占 60%（20% 展示栏 + 40% 板块）+ 剩余 40% 内 10% 名言 + 下部备案"存在加总冲突，本版将"20% 展示栏 + 40% 板块 + 10% 名言"作为主要视口内规划（合计约 70%，留有余量），备案等落入页脚区块，不再要求凑满 100vh。

4.2 顶部展示栏（首页版）

整体居中布局，内部水平分布：
- 左侧：站点 Logo + 站点名称/副标题。
- 右侧：当前时间（实时刷新，格式 YYYY-MM-DD HH:mm:ss）+ 上次更新时间（见 §4.5）。
- 下方居中：天气区块：<iframe width="500" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=173&icon=1" frameborder="0"></iframe>（在移动端可改为宽度 100% 居中，iframe 原样保留尺寸缩放）。
展示栏背景与整体风格统一（§4.8）。

4.3 名言条（B 区块）

内容源：data/quota.txt，每次刷新页面随机取一条（也可用 JS 刷新按钮换一条）。
文件格式见 §10.1。
名言为空/文件缺失时显示默认文案，页面不报错。

4.4 四大板块区（C 区块）

四个板块横排均分，按后台 categories 顺序渲染： 科普库 → 科普导航页、红队库 → 红队导航页、蓝队库 → 蓝队导航页、工具库 → 功能区首页。
板块区上方不再显示“四大板块”大标题，改为快捷站点胶囊条（数据表 quick_links，后台“内容与顺序”维护）：
- 用于放置本域名下其它网站，点击 target="_blank" 新标签页打开且保留本页；
- 无配置时不显示该条，板块区保持居中填满布局。
每个板块卡片内容：图标 + 名称 + 一句话简介（文案后台可配，见 §7.3.2）。
点击行为：科普/红/蓝打开对应导航页；工具库打开功能区首页。
基础悬停：变色/放大反馈；高级展开说明见 §4.6。

4.5 "上次更新时间"定义（【决策】）

含义 = 导航库内容最近一次被后台修改的时间。

后台任何写库操作成功后，同步写入 settings 表键 last_updated（格式时间戳）。
页面通过 PHP 端直接输出该值；无记录时显示"暂无更新记录"。
不跟随"站点上线时间"，只代表内容数据新鲜度。

4.6 板块 hover 展开说明（高级要求，实现级规格）

目的：鼠标悬停某板块时，弹出只读说明层，覆盖在板块区上方，用于解释该库是什么；该层不可点击、不参与布局（position: absolute 叠层）。

规则：

悬停任一板块 → 生成该板块说明浮层，覆盖其上方并向外延展，延展优先方向：
- 处于最左侧板块：向右延展；处于最右侧板块：向左延展；
- 处于中间板块时：浮层移位显示到距其最近的边缘空白侧（第 2 块→吸附左侧边缘展开，第 3 块→吸附右侧边缘展开）。
所有板块的实际位置在展开过程中不移动（视觉上"旁侧浮现"由浮层绝对定位实现，不做网格挤压）。
鼠标移出四大板块整体区域 → 浮层消失。
鼠标从一块移到另一块 → 浮层内容与吸附位置即时切换为该板块。
浮层 z-index 高于板块卡片；浮层 pointer-events 不拦截，防止遮挡后无法移动鼠标。

说明文案来源：categories.description，可在后台"内容设计"中编辑。【决策：文案每块 1~3 句】

4.7 页脚（D 区块）

4.8 统一视觉规范（全局）

项	约定	备注
主色	深空蓝 `#1f3a5f` + 强调蓝 `#2563eb`	各页统一
背景	浅灰 `#f5f7fa`，卡片白底
字体	系统字体栈 + 中文回退（`Microsoft YaHei` 等）	由 CSS 变量统一
圆角/阴影	卡片统一 8px 圆角、轻投影
全局公共样式	独立 `assets/css/common.css`	各页引入，保证风格一致
favicon/标题	站点名作为 `<title>` 统一后缀	后台可改站点名

5. 导航区规格（nav.php，科普/红队/蓝队共用）

5.1 页面纵向结构

自顶向下依次为：

区块	规则	备注
顶部留白	约 10vh（不小于 60px）	纯背景留白，不做内容
搜索栏	位于留白之下，高度 20vh（下限 72px、上限 160px）	即原 plan"上半部 20% + 最上方留白 10%"的明确算法
导航内容区	占据剩余空间，内容超高时整页纵向滚动	见 5.3

5.2 搜索栏规格（高级要求）

结构（水平一行，居中，定宽容器内）：引擎切换按钮（左）｜输入框（中）｜搜索按钮（右）。
引擎切换：点击循环切换或下拉选择，引擎列表默认：bing / baidu / github / google（【决策】可通过后端接口/常量维护，便于增删）。
搜索 URL 模板（选中引擎后拼 关键词 后 target="_blank" 新开页）：
- bing: https://www.bing.com/search?q={kw}
- baidu: https://www.baidu.com/s?wd={kw}
- github: https://github.com/search?q={kw}
- google: https://www.google.com/search?q={kw}
输入框有内容时，最右侧出现"清除（×）"按钮；点击清空并聚焦。
触发方式：点击搜索按钮或回车。
关键词需 encodeURIComponent 处理。

5.3 导航内容区（主体）

桌面（≥1200px）：
- 页面左右两侧各留白 15%；
- 中间 70% 区域划分为三大列（列宽相等、列间有间距）；
- 大列无标题，仅是布局容器。
导航块（最小管理单元）：
- 每个块 = 1 个块标题（加粗居左）+ 内部 3 小列 × 5 行（即每块最多 15 个按钮位）；
- 块标题、按钮是否填满不限制（3 列 5 行是最大学位，不足则留空）。
- 块尺寸固定（宽度=所在列宽，高度固定，各按钮行高统一）。
分列规则（【决策】）：取当前分类下所有导航块（按 sort 排序），按序轮转填充三列（第 1 块→列1，第 2 块→列2，第 3 块→列3，第 4 块→列1……），保证三列块数均衡；列内纵向堆叠，超高则整页滚动。
按钮交互：
- 鼠标移上 → 按钮变色（统一高亮样式）；
- 该按钮存在备注信息时 → 浮出悬浮气泡 tooltip 显示备注，移出消失；无备注仅变色；
- 点击 → target="_blank" 新标签页打开链接（加 rel="noopener noreferrer"）。
- 链接规范：允许完整 URL（http/https）；后台录入时为空则按钮置灰不可点。
内容来源：按当前 cat（popular/red/blue）读取 nav_blocks、nav_items（§7.4）。
空状态：无任何块时显示占位提示，不报错。

5.4 移动端

见 §9 响应式；核心：中间区域改单列，导航块铺满屏宽，块内 3 小列在 ≥600px 保持 3 列、<600px 折叠为 1 列或 2 列（【决策：<600px 时单小列显示，即一行一个按钮】）。导航块标题列布局保留。

6. 功能区规格

6.1 页面清单与公共头部（功能区统一）

功能区包含 1 个入口首页 + 4 个工具页。所有功能区页面使用统一的功能页头部条（区别于首页展示栏）：

[ ← 返回功能区首页 ]   本功能页标题（居中）   [ 首页 ]

最左侧按钮 → 返回 func/index.php（功能子页上）；在功能区首页本身时该按钮隐藏或置灰。
最右侧按钮 → 返回站点首页 index.php。
中间标题 → 当前功能页名称。
功能区首页的头部条中间显示"功能区"。

6.2 功能区首页（func/index.php）

顶部为风格统一的大展示横幅（复用首页视觉，可含功能区简介）。
主体为工具卡片网格：每张卡片 = 图标 + 工具名 + 一句话说明，点击进入对应子页。
工具卡片列表由 func_tools 表驱动，后台“功能区管理”（admin/tools.php）可增删改/排序/启停：
- 站内工具（如 codec.php）：需先在 func/ 下开发对应页面，再到后台登记入口；
- 外链工具：填写完整 http(s) 地址，作为新窗口卡片直接使用，无需写代码；
- 默认预置：编码/加解密、随机密码生成、二维码生成器、杀软识别四张卡片。

6.3 编码/加解密页（func/codec.php）

布局：左侧算法/方向选择区 + 上下（或左右）两个自由编辑文本区（输入区、输出区）。
- 两个文本区都允许用户自由编辑；输出区不设只读。
- 两个文本区均支持 右下角拖拽竖向放大（resize: vertical），横向宽度不变。
- 提供"交换 / 回填"便捷操作：将输出内容一键放回输入、或将输入/输出一键互换（【决策】）。
支持算法与方向：

算法	编码方向	解码方向	实现要求
Base64	编码	解码	支持中文等 Unicode：先 UTF-8 再 Base64
Base32	编码	解码	同上
MD5	—	不可逆	输出 32 位十六进制小写
SHA-1/224/256/384/512	—	不可逆	输出十六进制小写
URL	`encodeURIComponent`	`decodeURIComponent`	整段处理
Unicode	中→`\uXXXX` 序列	`\uXXXX`→文本	需支持中文；emoji/增补字符按 UTF-16 代理对编码成两个 `\uXXXX`，解码正确还原

交互模型：选算法 + 选方向（编码/解码/加密哈希等按需）→ 点击"执行" → 结果写入输出区；错误（非法输入等）以页面内提示展示，不弹窗。
执行按钮文案随方向变化（如"编码""解码""加密"）。

6.4 随机密码生成页（func/password.php）

字符集选项（多选/开关）：
- 大写字母 A-Z、小写字母 a-z、数字 0-9、特殊符号（建议默认 !@#$%^&*()-_=+[]{};:,.<>?）；
- 自定义字符集输入框：勾选后启用，用户自定义任意字符（去重）；勾选"自定义"时以自定义为准，忽略其余开关。
长度：滑块或数字输入，范围 4~64，默认 16。
生成：一次生成 多组（默认 5 条）【决策】，逐条显示在可编辑文本区/列表，每条后带"复制"按钮。
结果文本区同样支持竖向拖拽放大。
至少选一个字符集且长度合法才可生成，否则提示。

6.5 二维码生成器（func/qrcode.php）

输入框 + "生成"按钮；使用 qrcodejs 渲染。
放大预览：提供尺寸滑块（如 128~512px）或点击图片弹出大图预览（大图可在新层中查看）；下载：提供下载按钮，导出为 PNG（canvas 转 dataURL 或库的 toDataURL）。
边界处理：内容为空禁止生成；内容过长超出二维码容量时提示（库报错或预检测）。
空白页签、无输入时不展示二维码区。

6.6 杀软识别页（func/av.php）

输入：粘贴 tasklist 命令输出文本的 textarea（支持竖向放大，横向不可变）。
匹配库：data/avlist.js（§10.2）。
解析规则：
- 按行读取，忽略表头行（含"映像名称/Image Name/PID/==="）、空行；
- 每行取首个 token 为进程名（空格/制表分隔）；
- 与 avList 键匹配，大小写不敏感；key 若不带扩展名，比较时双方都去掉扩展名后再比一次（【决策】兼容两类写法）。
输出：匹配结果表格，列：进程名 | 匹配结果 | 产品/说明；未匹配的行结果列显示"未识别"，说明列留空。
附加统计：总进程数、匹配数、未识别数。
前端直接 <script src="../data/avlist.js"> 引入全局 avList 对象即可，无需后端。

7. 后台区规格（/admin）

7.1 登录与会话

登录页：用户名 + 密码；错误统一提示"用户名或密码错误"。
密码存储算法：按需求：md5(base64(明文密码))。
- ⚠️ 注明局限：该方案是弱单向哈希（无盐），仅用于低安全要求的个人站；不用于高价值系统。若后期可接受，建议换 password_hash()（bcrypt）升级，本版实现严格按需求算法。
会话管理：PHP session，登录成功后写入 $_SESSION['admin']；后台所有页面（除 login 外）在顶部做鉴权：
- 未登录访问后台页 → 302 跳转 login.php；
- 退出登录 → logout.php（销毁 session 并跳登录页）；
- 会话空闲超时（【决策】30 分钟）后失效，需重新登录。
初始管理员：首次启动数据库不存在用户时，由 install 逻辑自动创建默认账号（【决策】默认账号 admin / 密码 admin123，首次登录后引导修改）。
CSRF 防护：后台写操作表单带一次性 token（session 存），提交校验（低成本基础防护）。
登录尝试不做复杂限流，仅简单延时提示（个人站可接受）。

7.2 后台整体布局

后台顶部导航条：后台名称 + 快捷入口（导航内容管理 / 顺序排布与内容设计 / 返回前台首页）+ 当前管理员 + 退出。
后台页面自身不引入首页天气/名言等前台组件，保持简洁（风格色板仍与前台统一）。
所有表单保存成功后给反馈（保存成功条/提示），失败显示原因（如 SQL 错误信息可折叠展示，便于排查）。

7.3 后台功能拆解（原 plan 空泛项的落地）

原 plan 只写了"1.顺序排布 2.内容设计 3.导航内容增删改查"，本版将其拆成可操作模块：

7.3.1 导航内容管理（admin/nav.php）

顶部先选择操作分类：科普库 / 红队库 / 蓝队库（工具库对应功能区，不在导航内容范围内）。
块级操作（针对 nav_blocks）：新增块、删除块、编辑块标题、块上移/下移（调整在页面中的先后）；
按钮位操作（针对 nav_items）：在每个块内新增/编辑/删除按钮，字段：
- 文字（必填）、URL（必填）、备注（可空，空则不显示 tooltip）、序号；
- 按钮在块内"3 小列 × 5 行"中的位置可由排序决定（【决策】按 sort 顺序自动排列，不足位留空，不做拖拽定位到格）；
前端交互：用可展开的块列表展示，每个块内按钮表格行式管理，保存按钮批量提交（一次提交当前分类全部变更）。
删除块/按钮需二次确认。

7.3.2 内容设计（admin/content.php）

统一为一个"站点内容与设置"页，按分组编辑并保存到 settings 表：

分组	可编辑项	存储	用途
站点信息	站点名、副标题	settings	首页展示栏、`<title>` 后缀
板块文案	四大板块各自的图标选择/文案/一句话简介	settings 或 categories.description	首页四大板块卡片与 hover 说明层
底部信息	ICP 备案号、公安备案号、版权行、自定义底部文本	settings	首页/全站页脚
名言库	名言新增 / 删除 / 清空（文本框逐行维护，写回 quota.txt）	data/quota.txt	首页名言条
其他	上次更新时间说明（只读展示）	—	—

底部自定义文本支持纯文本与单条链接（安全起见只允许 http(s) 开头的 <a> 形态，不做富文本/HTML 注入）。

7.3.3 顺序排布（admin/content.php 或独立区）

明确排序对象与层级（自外向内）：

分类（四大板块）顺序 → 决定首页四大板块横排顺序；
块顺序（每个分类内）→ 决定导航页块的前后；
块内按钮顺序 → 决定按钮在块内 3×5 格中的先后。

排序交互统一提供"上移/下移 + 序号输入"两种方式（拖拽列为可选项）。

7.4 数据模型（SQLite DDL）

-- 管理员表
CREATE TABLE users (
    id            INTEGER PRIMARY KEY AUTOINCREMENT,
    username      TEXT UNIQUE NOT NULL,
    password_hash TEXT NOT NULL            -- md5(base64(明文))
);

-- 键值设置表（站点名、备案号、版权、板块文案、last_updated 等）
CREATE TABLE settings (
    key   TEXT PRIMARY KEY,
    value TEXT
);

-- 四大板块分类（popular/red/blue/tool）
CREATE TABLE categories (
    id          INTEGER PRIMARY KEY AUTOINCREMENT,
    key         TEXT UNIQUE NOT NULL,      -- popular/red/blue/tool
    name        TEXT NOT NULL,             -- 科普库/红队库/蓝队库/工具库
    description TEXT DEFAULT '',           -- 首页卡片一句话简介 + hover 说明文案
    sort        INTEGER DEFAULT 0
);

-- 导航块（仅 popular/red/blue 三类使用）
CREATE TABLE nav_blocks (
    id     INTEGER PRIMARY KEY AUTOINCREMENT,
    cat_id INTEGER NOT NULL REFERENCES categories(id),
    title  TEXT NOT NULL,
    sort   INTEGER DEFAULT 0
);

-- 块内按钮位（每块最多 3×5=15，由 sort 顺序占位）
CREATE TABLE nav_items (
    id       INTEGER PRIMARY KEY AUTOINCREMENT,
    block_id INTEGER NOT NULL REFERENCES nav_blocks(id),
    label    TEXT NOT NULL,
    url      TEXT NOT NULL,
    note     TEXT DEFAULT '',              -- 备注；空则按钮 hover 不弹气泡
    sort     INTEGER DEFAULT 0
);

-- 功能区工具入口（后台“功能区管理”维护）
CREATE TABLE func_tools (
    id          INTEGER PRIMARY KEY AUTOINCREMENT,
    name        TEXT NOT NULL,
    icon        TEXT DEFAULT '',           -- 字符/emoji 图标
    description TEXT DEFAULT '',           -- 一句话说明
    url         TEXT NOT NULL DEFAULT '',  -- 站内相对地址 或 外链 http(s)
    is_external INTEGER NOT NULL DEFAULT 0,-- 1=外链（新窗口）
    enabled     INTEGER NOT NULL DEFAULT 1,-- 1=前台展示
    sort        INTEGER NOT NULL DEFAULT 0
);

-- 首页快捷站点（本域名其它网站，target=_blank；后台“内容与顺序”维护）
CREATE TABLE quick_links (
    id      INTEGER PRIMARY KEY AUTOINCREMENT,
    name    TEXT NOT NULL,
    url     TEXT NOT NULL DEFAULT '',     -- 完整 http(s) 地址
    icon    TEXT DEFAULT '',              -- 字符/emoji 图标
    enabled INTEGER NOT NULL DEFAULT 1,
    sort    INTEGER NOT NULL DEFAULT 0
);

名言不建表（保持 quota.txt 为数据源）；categories 四行 + settings 基础键在首次运行时自动初始化（install 脚本）。

8. 目录结构规划

HomePage/                       # 网站根（部署时即站点根）
├── index.php                   # 首页区
├── nav.php                     # 导航区模板（?cat=popular|red|blue）
├── func/
│   ├── index.php               # 功能区首页
│   ├── codec.php               # 编码/加解密
│   ├── password.php            # 随机密码
│   ├── qrcode.php              # 二维码
│   └── av.php                  # 杀软识别
├── admin/
│   ├── login.php               # 后台登录
│   ├── logout.php
│   ├── nav.php                 # 导航内容管理 + 排序
│   ├── tools.php               # 功能区工具入口管理
│   ├── content.php             # 内容设计 / 站点设置
│   └── _guard.php              # 鉴权 include（require 到各后台页顶部）
├── api/
│   └── nav.php                 # 输出导航 JSON（前台导航页/首页读取用）
├── includes/
│   ├── db.php                  # PDO + SQLite 连接与 install 初始化
│   ├── auth.php                # 登录/校验/session 工具
│   └── settings.php            # settings 读写封装
├── assets/
│   ├── css/common.css          # 全局样式（统一风格、响应式断点）
│   ├── js/common.js            # 通用组件（tooltip、竖向 resize 类等）
│   ├── js/codec.js             # 编码算法（base64/base32/url/unicode）
│   ├── js/sha.js               # SHA 系列
│   ├── js/qrcode.min.js        # qrcodejs
│   └── img/                    # logo/图标
├── data/
│   ├── homepage.db             # SQLite（运行时自动创建）
│   ├── quota.txt               # 名人名言（行式，后台可编辑）
│   └── avlist.js               # 杀软进程映射表
└── plan.txt                    # 原始 plan（保留存档）

9. 响应式断点规划

断点	首页	导航区	功能区
≥1200px（桌面）	四板块横排；天气 iframe 500×40 原尺寸	左右各留白 15%，中间三列	工具卡片多列；编码页输入/输出可并排
768–1199px（平板）	四板块两行两列或自适应横排	左右留白收窄至 5%，仍三列（列宽收紧）	卡片两列
<768px（手机）	板块单列或 2×2 网格；名言条自然换行	单列：中间区全宽，导航块一列、块内小列 1 列显示（原要求）；搜索栏自适应	卡片单列

补充规则：

顶部展示栏/搜索栏/功能页头部条在移动端自动收缩高度与内边距，天气 iframe 宽度等比缩放居中。
编码/二维码等页面在 <768px 时输入输出区改为上下堆叠。
底部备案等信息移动端居中换行。

10. 数据文件格式约定

10.1 data/quota.txt（名人名言）

编码：UTF-8（无 BOM）。
每行一条名言，空行或 # 开头为注释（后台编辑时自动忽略）。
首次实现时预置 5~10 条示例。
读取：后端 PHP 读取并随机输出一条（首页渲染），避免名言文件被直接下载的路径泄露问题不在此列（公开文件无碍）。

示例：

# 示例名言
知彼知己，百战不殆。
知识就是力量。

10.2 data/avlist.js（杀软进程映射表）

全局对象写法（沿用原示例结构），首次实现预置若干常见条目：

var avList = {
  "360tray.exe": "360 安全卫士 - 实时保护",
  "360safe.exe": "360 安全卫士",
  "QQPCRTP.exe": "QQ电脑管家",
  "kxescore.exe": "金山毒霸",
  "ekrn.exe": "ESET NOD32",
  "MsMpEng.exe": "Windows Defender",
};

约定：value 统一为 产品名 - 组件描述 风格；key 含扩展名；匹配时忽略大小写。
该文件由实现时创建，不进后台管理（如需可扩展）。

11. 部署与初始化说明

环境要求：PHP ≥ 7.4（启用 PDO_SQLITE）、Apache/Nginx；无需额外安装数据库服务。
将工程目录整体上传至服务器站点根目录；data/ 目录需 PHP 可写（用于创建/写入 homepage.db 与 quota.txt）。
首次访问任意页面触发自动初始化：建库建表、写入 categories 四行、默认 settings、默认管理员 admin / admin123、生成 quota.txt/avlist.js 示例（若不存在）。
首登后台后请修改默认密码（后台导航条提供修改密码入口）。
天气 iframe 依赖外网（i.tianqi.com），离线环境下该区块显示占位不阻塞页面。

12. 实施顺序与验收要点（供编码阶段使用）

阶段	交付物	验收标准
1. 框架	目录结构、common.css/common.js、includes/db.php、install 初始化、数据示例	首次运行自动建库建表成功；首页可展示默认数据
2. 首页	index.php：展示栏/名言条/四板块 hover 展开/页脚	四板块正确跳转四大目标；hover 展开规则与 §4.6 一致；时间刷新、名言随机；布局符合 §4
3. 导航区	nav.php 三分类 + 搜索栏 + tooltip + 分列	bing/baidu/github 搜索新开页；回车/清除按钮可用；导航块 hover 变色/tooltip 正确；三列轮转正确；空态正常
4. 功能区	func 五个页面	中文字符 Base64/Base32/Unicode 编解码正确；SHA/MD5 输出正确；密码可自定义生成；二维码生成/放大/下载；杀软识别匹配与统计正确；textarea 竖向可拉伸
5. 后台	登录/导航管理/内容设计/排序	默认账号可登录；未登录访问被拦截；分类/块/按钮 CRUD 与排序即时反映到前台；备案/名言等设置生效；last_updated 更新并展示到首页
6. 联调打磨	响应式与细节	三档断点符合 §9；外链新开页；风格一致；无 500/JS 报错

13. 仍建议你确认的开放点（不影响启动开发）

功能区头部条是否也带天气 iframe —— 本版默认仅首页展示栏带天气，功能页不带（避免重复加载）。
首页名言是否允许点击换一条 —— 默认刷新页面换一条。
导航页大列块超多时是否允许整页纵向滚动 —— 默认允许。
二维码是否提供"滚轮缩放" —— 默认提供尺寸滑块 + 点击放大预览两种。

若以上默认与你设想不同，修改对应【决策】标注即可，其余规格不受影响。

37 KiB Raw Blame History Unescape Escape