admin/nanocode

Fork 0

Files

T

Ubuntu 32b43f85bd a

2026-07-03 16:58:28 +08:00

4.6 KiB

Raw Permalink Blame History

Nanocode Portal — 设计文档

项目概述

在 /home/ubuntu/nanocode/www 下实现一个纯前端 SPA 导航门户，作为 nginx 80 端口的首页，聚合所有个人项目的入口链接。

技术方案

项	决策
架构	纯前端 SPA，单 HTML 文件 + 内嵌 CSS/JS
数据存储	`localStorage`（无后端）
登录凭据	硬编码 `admin` / `abcd1234`，localStorage 标记登录态
密码修改	老密码验证通过后，更新硬编码逻辑（localStorage 覆盖）
图标生成	根据链接名称的首字母/哈希生成固定颜色 + 大写字母
布局	CSS Grid，PC 端 4 列，响应式到移动端 1 列
3D 倾斜	CSS `transform: perspective + rotateX/Y`，基于鼠标位置计算

数据模型

{
  "links": [
    {
      "id": "uuid",
      "name": "个人博客",
      "url": "http://129.211.173.87:8888",
      "description": "基于 Next.js 的个人技术博客"
    }
  ],
  "auth": {
    "token": "random-string",
    "passwordHash": "sha256-of-current-password"
  }
}

links 数组存储所有导航卡片
auth 对象存储登录态和密码哈希（SHA-256）

默认预设链接（根据现有项目）

名称	链接	描述
个人博客	`:8888`	Next.js 技术博客
相册查看器	`:8892`	图片相册浏览
快乐游戏	`:8895`	Flask 小游戏集合
网游引擎	`:8900`	网游引擎服务
有声书播放器	`:8899`	有声书在线播放
WanAndroid	`:8880`	Material Design Web
FumaMX CRM	`:10000`	CRM 管理系统
AI 聊天服务	`:8890`	AI 对话服务
新媒体平台	`:18888`	CMS 内容管理系统
微信小程序桥接	`:5000`	微信-Nanobot 桥接

注：具体端口以运行时 systemd 服务实际监听为准。

交互设计

1. 未登录状态

页面顶部右侧：「登录」按钮
点击弹出模态框：账号 / 密码输入框
验证失败提示红色错误信息

2. 登录成功状态

页面顶部右侧：「修改密码」+「添加链接」两个按钮

3. 修改密码

弹窗：老密码 / 新密码 / 确认新密码
老密码验证通过后更新 localStorage 中的密码哈希

4. 添加链接

弹窗：名称（文本）/ 链接（URL）/ 介绍（文本）
提交后追加到 links 数组，重新渲染

5. 卡片交互

常态：白底卡片，大圆角（border-radius: 20px），阴影（box-shadow），左侧彩色圆形图标（首字母），右侧上下两行文字
Hover：
- 卡片 3D 倾斜（基于鼠标在卡片内的相对位置计算 rotateX / rotateY）
- 右上角浮现「×」关闭按钮
点击关闭按钮：确认后从数组删除，localStorage 同步更新
点击卡片主体：window.open(url, '_blank')

3D 倾斜效果实现思路

鼠标在卡片内的相对位置 → 映射到 [-1, 1] → 乘以最大旋转角度（如 ±10deg）
transform: perspective(1000px) rotateX(ry * -1) rotateY(rx)

rx = (mouseX / cardWidth - 0.5) * 2
ry = (mouseY / cardHeight - 0.5) * 2

鼠标移出时：平滑过渡（transition: transform 0.3s ease）复原到 rotateX(0) rotateY(0)。

样式规范

背景：浅灰渐变或纯色 #f5f7fa
顶部导航栏：白色，底部细阴影，高度 60px
卡片：白色，圆角 20px，padding 24px，gap 24px
Grid：grid-template-columns: repeat(4, 1fr)，PC 端；repeat(2, 1fr) 平板；1fr 手机
图标：圆形 64px，背景色根据名称哈希生成（HSL 色环），文字白色大写首字母
关闭按钮：红色圆形，直径 24px，卡片 hover 时 opacity: 0 → 1

文件结构

/home/ubuntu/nanocode/www/
├── index.html          # 单文件 SPA（HTML + CSS + JS）
└── docs/
    └── DESIGN.md       # 本文档

待确认问题

图标生成方式：当前设计是根据名称首字母生成固定彩色字母图标。是否需要支持用户上传自定义图标？还是保持自动生成即可？
删除确认：点击关闭按钮删除时，是否需要二次确认弹窗（"确定删除此链接？"），还是直接删除？
默认链接：上方列出的预设链接是否符合预期？是否有遗漏或不需要的项目？
公网 IP：链接中硬编码 129.211.173.87 是否合适，还是希望用相对路径或域名？
排序：新增链接是追加到末尾，还是可以拖拽排序？

下一步

确认上述问题后，直接编写 /home/ubuntu/nanocode/www/index.html 单文件实现全部功能。

4.6 KiB Raw Permalink Blame History Unescape Escape