对网页CSS进行重构

This commit is contained in:
Falck
2026-04-06 17:03:11 +08:00
parent a615b2af0f
commit 4eaf10e753
20 changed files with 951 additions and 349 deletions

View File

@@ -29,8 +29,6 @@
{ href: prefix + 'plugins.html', tooltip: '插件', svg: 'M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z' },
{ href: prefix + 'architecture.html', tooltip: '架构', svg: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z' },
{ separator: true },
{ href: prefix + 'quickstart.html', tooltip: '快速开始', svg: 'M13 10V3L4 14h7v7l9-11h-7z' },
{ separator: true },
{ href: 'https://gitee.com/starlight-apk/feature-oss', tooltip: '源码', svg: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4', target: '_blank' }
];

View File

@@ -53,27 +53,27 @@ class ParallaxTracker {
const isMobile = this._isMobileDevice();
// 按优先级尝试输入源
if (isMobile && this._initGyroscope()) {
this.activeSource = 'gyro';
console.log('[Parallax] 使用陀螺仪输入');
} else if (!isMobile && this._initMouse()) {
this.activeSource = 'mouse';
console.log('[Parallax] 使用鼠标输入');
} else if (isMobile) {
// 移动端回退方案:触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
console.log('[Parallax] 使用触摸滑动输入');
if (isMobile) {
// 移动端优先使用陀螺仪
if (this._initGyroscope()) {
this.activeSource = 'gyro';
console.log('[Parallax] 使用陀螺仪输入');
} else {
// 陀螺仪不可用时使用触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
console.log('[Parallax] 使用触摸滑动输入');
}
} else {
// 电脑端最后的回退:仍然尝试鼠标
// 桌面端使用鼠标
this._initMouse();
this.activeSource = 'mouse';
console.log('[Parallax] 使用鼠标输入(回退)');
console.log('[Parallax] 使用鼠标输入');
}
// 启动动画循环
this._animate();
console.log(`[Parallax] 已初始化 ${this.elements.length} 个元素`);
console.log(`[Parallax] 已初始化 ${this.elements.length} 个元素,输入源: ${this.activeSource}`);
}
// 检测是否为移动设备
@@ -98,7 +98,10 @@ class ParallaxTracker {
// ── 陀螺仪输入 ──
_initGyroscope() {
if (!window.DeviceOrientationEvent) return false;
if (!window.DeviceOrientationEvent) {
console.log('[Parallax] 设备不支持 DeviceOrientationEvent');
return false;
}
let hasFired = false;
const handler = (e) => {
@@ -123,12 +126,19 @@ class ParallaxTracker {
return false; // 等待用户授权后再启用
}
// Android 和其他设备直接监听
window.addEventListener('deviceorientation', handler);
console.log('[Parallax] 陀螺仪监听已启动(无需权限)');
return true;
}
_addGyroPermissionButton(handler) {
// iOS 设备需要用户交互才能请求陀螺仪权限
// 检查是否已经显示过权限按钮
if (document.getElementById('gyro-permission-btn')) {
return;
}
const btn = document.createElement('div');
btn.id = 'gyro-permission-btn';
btn.innerHTML = `
@@ -152,15 +162,30 @@ class ParallaxTracker {
window.addEventListener('deviceorientation', handler);
this.activeSource = 'gyro';
console.log('[Parallax] 陀螺仪权限已授予');
btn.remove();
} else {
console.warn('[Parallax] 陀螺仪权限被拒绝');
btn.remove();
// 权限被拒绝后使用触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
}
} catch (err) {
console.warn('[Parallax] 陀螺仪权限被拒绝', err);
console.warn('[Parallax] 陀螺仪权限请求失败', err);
btn.remove();
// 出错时使用触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
}
btn.remove();
});
// 点击遮罩关闭
btn.querySelector('.gyro-permission-overlay').addEventListener('click', () => btn.remove());
btn.querySelector('.gyro-permission-overlay').addEventListener('click', () => {
btn.remove();
// 用户关闭后使用触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
});
}
// ── 触摸滑动输入 ──