# 网站首页修订版 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)。 - **下方居中**:天气区块:``(在移动端可改为宽度 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 叠层)。 规则: 1. 悬停任一板块 → 生成该板块说明浮层,覆盖其上方并向外**延展**,延展优先方向: - 处于最左侧板块:向右延展;处于最右侧板块:向左延展; - 处于中间板块时:浮层**移位显示到距其最近的边缘空白侧**(第 2 块→吸附左侧边缘展开,第 3 块→吸附右侧边缘展开)。 2. 所有板块的**实际位置在展开过程中不移动**(视觉上"旁侧浮现"由浮层绝对定位实现,不做网格挤压)。 3. 鼠标移出四大板块整体区域 → 浮层消失。 4. 鼠标从一块移到另一块 → 浮层内容与吸附位置即时切换为该板块。 5. 浮层 z-index 高于板块卡片;浮层 pointer-events 不拦截,防止遮挡后无法移动鼠标。 > 说明文案来源:categories.description,可在后台"内容设计"中编辑。**【决策:文案每块 1~3 句】** ### 4.7 页脚(D 区块) 内容:ICP 备案号(`备案号`占位,后台可配)、公安备案号(后台可配,含图标)、版权声明(默认 `© 2026 <站点名> 版权所有`,后台可配)、站点名/其他自定义文本(后台可配,见 §7.3.2)。底部同时放一个低调的"后台管理"入口链接(指向 `admin/login.php`)。 ### 4.8 统一视觉规范(全局) | 项 | 约定 | 备注 | | ------------ | --------------------------------------------- | ---------------------- | | 主色 | 深空蓝 `#1f3a5f` + 强调蓝 `#2563eb` | 各页统一 | | 背景 | 浅灰 `#f5f7fa`,卡片白底 | | | 字体 | 系统字体栈 + 中文回退(`Microsoft YaHei` 等) | 由 CSS 变量统一 | | 圆角/阴影 | 卡片统一 8px 圆角、轻投影 | | | 全局公共样式 | 独立 `assets/css/common.css` | 各页引入,保证风格一致 | | favicon/标题 | 站点名作为 `` 统一后缀 | 后台可改站点名 | --- ## 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 或独立区) 明确排序对象与层级(自外向内): 1. **分类(四大板块)顺序** → 决定首页四大板块横排顺序; 2. **块顺序**(每个分类内)→ 决定导航页块的前后; 3. **块内按钮顺序** → 决定按钮在块内 3×5 格中的先后。 排序交互统一提供"上移/下移 + 序号输入"两种方式(拖拽列为可选项)。 ### 7.4 数据模型(SQLite DDL) ```sql -- 管理员表 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(杀软进程映射表) - 全局对象写法(沿用原示例结构),首次实现预置若干常见条目: ```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. 部署与初始化说明 1. 环境要求:PHP ≥ 7.4(启用 PDO_SQLITE)、Apache/Nginx;无需额外安装数据库服务。 2. 将工程目录整体上传至服务器站点根目录;`data/` 目录需 PHP 可写(用于创建/写入 `homepage.db` 与 `quota.txt`)。 3. 首次访问任意页面触发自动初始化:建库建表、写入 `categories` 四行、默认 settings、默认管理员 `admin / admin123`、生成 quota.txt/avlist.js 示例(若不存在)。 4. 首登后台后请修改默认密码(后台导航条提供修改密码入口)。 5. 天气 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. 仍建议你确认的开放点(不影响启动开发) 1. 功能区头部条是否也带天气 iframe —— 本版默认**仅首页展示栏带天气**,功能页不带(避免重复加载)。 2. 首页名言是否允许点击换一条 —— 默认刷新页面换一条。 3. 导航页大列块超多时是否允许整页纵向滚动 —— 默认允许。 4. 二维码是否提供"滚轮缩放" —— 默认提供尺寸滑块 + 点击放大预览两种。 > 若以上默认与你设想不同,修改对应【决策】标注即可,其余规格不受影响。