AI打造的个人导航系统源码

摘要： 1. 核心功能模块A. 用户认证与权限管理登录/注册切换：界面提供统一的认证框，用户可点击链接在“登录”和“注册”模式间切换。会话保持：利用 localStorage&n...

1. 核心功能模块

A. 用户认证与权限管理

• 登录/注册切换：界面提供统一的认证框，用户可点击链接在“登录”和“注册”模式间切换。

• 会话保持：

• 利用 localStorage 存储用户名 (nav_user)。

• 利用 sessionStorage 存储当前会话状态 (nav_user_session)。

• 页面加载时自动检查缓存并尝试恢复登录状态 (validateSessionAsync)。

• 密码修改：已登录用户可通过右下角设置按钮打开模态框，验证旧密码后设置新密码（强制要求新密码至少6位且两次输入一致）。

• 退出登录：清除本地缓存并调用后端注销接口，刷新页面返回登录态。

B. 导航链接管理 (CRUD)

• 添加链接：

• 顶部表单支持输入：URL（必填）、名称、图标链接、简介描述。

• 智能填充逻辑：如果用户未填名称或描述，前端会标记为“智能获取中...”，并在保存后触发后端 fetch 动作自动抓取网站标题和 Meta 信息。

• 自动分类：添加时自动归入当前选中的分类，若选中“全部”则归入“默认”。

• 展示与过滤：

• 以卡片网格形式展示链接，包含图标、标题、两行截断的描述。

• 支持按分类标签过滤显示内容。

• 悬停交互：鼠标悬停卡片时，右上角浮现“编辑”和“删除”按钮。

• 编辑与删除：

• 编辑：弹出模态框，预填充当前数据，支持修改所有字段及 URL（主键）。

• 删除：二次确认后调用后端接口删除指定 URL 的记录。

C. 分类管理系统

• 动态标签栏：顶部显示“全部”、“默认”及用户自定义的分类标签。

• 分类操作：

• 新建：点击“+ 新建”弹出模态框创建新分类。

• 重命名：选中非默认分类后，“修改”按钮可用，支持重命名。

• 删除：选中非默认分类后，“删除”按钮可用，删除该分类及其关联逻辑（具体关联处理依赖后端）。

• 保护机制：“全部”和“默认”分类禁止编辑和删除。

D. 广告展示系统

• 顶部横幅广告 (Banner)：预留了一个全宽度的图片广告位，当前代码硬编码指向一个外部链接。

• 网格文字广告：

• 位于分类栏下方，分为两行，每行5个，共10个广告位。

• 内容硬编码在 JS 数组 gridAds 中（包含服务器、源码、跨境电商等推广信息）。

• 样式上奇偶项颜色不同（黄色/红色系），增加视觉区分度。

E. 数据统计与 SEO

• 访客统计：

• 底部栏实时显示：总访问量、今日访问、本周访问、当前用户 IP 及地理位置、访问时间。

• 数据通过异步请求 API.PHP?action=get_ip 获取。

• SEO 动态注入：

• 页面加载时请求 api.php?action=get_seo。

• 动态更新页面的 <title>、<meta name="keyWords"> 和 <meta name="description">，利于搜索引擎收录。

• 第三方统计：底部集成了百度统计 (hm.js) 代码。

2. 界面与交互设计 (UI/UX)

• 视觉风格：

• 桌面端：多列网格展示应用，分类栏横向排列。

• 移动端 (max-width: 768px)：应用卡片变为单列，分类栏改为纵向堆叠，操作按钮位置调整以适应触摸操作。

• 深色主题：背景采用深蓝色渐变 (#0f204b)，文字为白色，适合长时间浏览。

• 毛玻璃效果：登录框、分类栏、卡片背景均使用 rgba 透明度配合 backdrop-filter: blur(10px)，营造现代感。

• 响应式布局：

• 交互动效：

• 卡片悬停上浮 (transform: translateY(-5px)) 并高亮边框。

• 模态框淡入淡出动画。

• 按钮 Hover 变色及旋转效果（如设置齿轮图标）。

• 加载状态提示（如按钮文字变为“处理中...”）。

3. 技术架构与逻辑

• 前端技术栈：纯原生 HTML5 + CSS3 + JavaScript (ES6+)，无 Vue/React/jQuery 等框架依赖，轻量级。

• 数据通信：

• 使用 fetch API 进行异步 HTTP 请求。

• 所有业务逻辑统一指向 api.php，通过 action 参数区分功能（如 login, save, delete, list 等）。

• 数据传输格式主要为 FormData (POST) 和 JSON (GET/Response)。

• 容错机制：

• 图标 fallback：当自定义图标加载失败 (onerror) 或为空时，自动从预设数组 randomIcons 中随机选取一个通用图标（如 Chrome, Firefox, GitHub 等）。

• 网络异常处理：关键请求（如登录、验证）包含 .catch() 块，防止脚本报错导致页面卡死，并给用户弹窗提示。

• 状态管理：

• 全局变量 aPPData 缓存从后端获取的分类和应用列表，减少重复请求。

• currentFilter 变量控制当前的分类筛选状态。

4. 依赖说明

1. API 接口：需要一个 api.php 文件处理所有 action 请求。

2. 数据库：需要数据库存储用户表、导航链接表和分类表。

3. 资源路径：代码中引用的部分图片（如广告图、默认图标）依赖外部 CDN 或相对路径，需确保网络可达。

总结

演示站：https://kpdh.2714ai.cn/1/