LiquidGlass · 六零导航页主题

一眼可辨的 Apple 生态拟物主题：PC 端呈现 macOS 桌面（菜单栏 + 玻璃窗口 + 底部 Dock + 右侧桌面组件），

移动端呈现 iOS 主屏（Dynamic Island 状态栏 + 玻璃卡片时钟 + Spotlight 聚焦搜索 + 横向分页图标 + 底部玻璃 Tab Bar）。

风格设定一览

布局原型 · PC（≥769px）

┌───────────────────────────────────────────────────────────────┐
│ ●●●            LiquidGlass 导航 · 申请收录 工具集            📶 📡 🔋 ⌕ ⚙ ─19:18│   ←  macOS 菜单栏（主题书签放在 Apple logo 之后）
├───────────────────────────────────────────────────────────────┤
│                                                       ┌──┐   │
│                                                       │时钟│   │ ← 桌面组件
│                                                       ├──┤   │
│                                                       │一言│   │
│   ┌───────────────────────────────────────────────┐   ├──┤   │
│   │ ● ● ●      LiquidGlass 导航            < > ⚙  │   │公告│   │
│   ├───────────────────────────────────────────────┤   └──┘   │
│   │ 🔍 搜索胶囊                       [搜索]      │          │
│   │ (百度)(必应)                                  │          │
│   ├──────────┬────────────────────────────────────┤          │
│   │ 个人收藏 │  常用站点                     4 个  │          │
│   │ ──────── │ ⬛ ⬛ ⬛ ⬛                         │          │
│   │ 常用站点 │ GitHub 苹果官网 Figma Dribbble    │          │
│   │ 设计资源 │ ── ○ ○                          │          │
│   │          │ 左右滑动 / 点击圆点切换分组       │          │
│   └──────────┴────────────────────────────────────┘          │
│                                                               │
│              ©  · 京ICP · 京公网安备                           │
│                  ┌─────────────────────────┐                  │
│                  │ 🔍  ⚙  ⚙  │   ←  Dock（仅 3 个系统项：聚焦搜索 / 控制中心 / 设置）
│                  └─────────────────────────┘                  │
└───────────────────────────────────────────────────────────────┘

布局原型 · 移动端（≤768px）

┌─────────────────────────────────┐
│ 19:18       ▀▀▀▀       📶 📡 🔋 ⚙ │   ←  iOS 状态栏 + Dynamic Island
│                                 │
│ ┌─────────────────────────────┐ │
│ │ 今天                       │ │   ←  玻璃卡片 · 时钟组件
│ │ 19:18                       │ │
│ │ 8月31日 星期一               │ │
│ └─────────────────────────────┘ │
│                                 │
│ ┌─────────────────────────────┐ │
│ │ 🔍 百度一下            搜索 │ │   ←  Spotlight 搜索胶囊
│ │ (百度) (必应)                │ │
│ └─────────────────────────────┘ │
│                                 │
│ [🔖 申请收录] [🔖 工具集]         │   ←  快捷导航条（theme_tags）
│                                 │
│ (常用站点) (设计资源)            │   ←  玻璃胶囊分组切换
│                                 │
│ ┌─────────────────────────────┐ │
│ │ ⬛ ⬛ ⬛ ⬛                   │ │   ←  图标网格（4 列自适应）
│ │ GitHub 苹果官网 Figma ...    │ │
│ └─────────────────────────────┘ │
│ ── ○ ○                          │
│                                 │
│  © · 京ICP · 京公网安备          │
│                                 │
│ ┌─────────────────────────────┐ │
│ │ 🔍  ⚙  ⚙  │   ←  iOS 玻璃 Tab Bar（仅 3 个系统项）
│ │ 搜索 控制 设置│
│ └─────────────────────────────┘ │
└─────────────────────────────────┘

配置项（config.php）

通用项（契约保留）：

风格扩展项：

访客还可在运行时通过「设置」或「控制中心」覆盖外观模式、图标风格、列数、玻璃模糊、减弱动效、时钟/一言显示等偏好，存储于 localStorage['lg_prefs']。

文件清单

liquidglass/
├── index.php        # 入口：菜单栏 / 状态栏 / 组件 / 主窗口 / Dock / Spotlight / 控制中心 / 设置 / 上下文菜单
├── theme.ini        # 主题信息（JSON）
├── config.php       # 配置表单（含 5 项通用 + 5 项风格扩展）
├── functions.php    # 契约函数 + theme_lg_glyph / theme_lg_battery / theme_lg_enum
├── css/style.css    # 自创令牌（--lg-*）与全部样式，含 1640px / 768px 断点
├── js/script.js     # ES5 脚本：搜索引擎、时钟、分组分页、Dock 放大镜、聚焦搜索、控制中心、设置、上下文菜单、抖动/碎裂、偏好持久化
└── README.md        # 本文件

兼容性 / 自检

• PHP：兼容 5.4+ / 7.x / 8.x；统一 array()；htmlspecialchars() 显式传 ENT_QUOTES, 'UTF-8'；无 ?? / <=> / 类型声明 / 箭头函数 / 短数组。
• JS：纯 ES5；无 let/const/箭头函数/模板字符串；带 localStorage try/catch；时钟、Spotlight、控制中心、设置均有「节点不存在则跳过」兼容。
• CSS：使用 backdrop-filter + saturate；提供无 backdrop-filter 时的 var(--lg-glass-solid) 兜底（页面无 @supports 警告但已为不支持的环境加深玻璃底色）。
• 图标尺寸：.lg-tile-glyph 与 .lg-engine-ico、.lg-page-ico、.lg-spot-item-glyph、.lg-cc-tile-ico 同时对 svg 与 img 约束尺寸；缓存版本号取 theme.ini.theme_version，CSS/JS 通过 ?v=100 缓存破坏。
• 契约锚点：#search-form / #search-input / name="sou" / data-alias / data-hint / 首个 checked；lists($html) 使用 7 个键；#lg-clock-widget、#lg-clock-status、#lg-clock-menu、#lg-date-widget、#lg-yan、#lg-spot-input、#lg-spot-form、#lg-spot-results、#lg-blur-range、[data-lg-action] 等运行时锚点。

创新校验（自检）

• [x] 未使用 dev-theme 禁止清单 class：site-header / site-logo / site-nav / site-main / clock / clock-time / clock-date / yan / search / search-form / search-input / search-btn / search-engines / engine / engine-name / notice / links / link-group / group-title / link-item / link-icon / link-name / site-footer / icp / gonganbei 均未出现。
• [x] 自创 CSS 变量体系：使用 lg-* 前缀 + 语义化命名（--lg-glass、--lg-hairline、--lg-specular、--lg-blur、--lg-sat、--lg-icon-radius、--lg-cols、--lg-h 等）。
• [x] 非默认版式：明确采用「macOS 桌面窗口 + Dock + 菜单栏」（PC）/「iOS 主屏 + Tab Bar + Dynamic Island」（移动），并融合液态玻璃材质与 Spotlight 聚焦搜索。
• [x] 图标尺寸：.lg-tile-glyph svg, .lg-tile-glyph img、.lg-engine-ico svg, .lg-engine-ico img、.lg-page-ico svg, .lg-page-ico img、.lg-spot-item-glyph svg, .lg-spot-item-glyph img、.lg-cc-tile-ico svg, .lg-cc-tile-ico img 全部约束。
• [x] 图标渲染清晰：使用 -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + font-variant-numeric: tabular-nums。

键盘 / 触控

演示 / 适用版本

• 适用六零导航页：v1.2.5 及以上。
• 演示地址：https://spage.lylme.com/liquidglass
• 主题版本：1.0.4 · 2026-08-31

localStorage 键位