purewhiter--mobilegym
wehub-resource-sync
1235 行
48 KiB
TypeScript
1235 行
48 KiB
TypeScript
import React, { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
|
||
import { SIMULATOR_CONFIG } from '../data';
|
||
const { statusBarHeight, zIndexSystemShade, transitionDuration } = SIMULATOR_CONFIG.framework;
|
||
import { useOS } from '../OSContext';
|
||
import { useOsStateStore } from '../OsStateStore';
|
||
import { useTheme } from '../ThemeContext';
|
||
import * as TimeService from '../TimeService';
|
||
import { SystemShadeService } from '../SystemShadeService';
|
||
import { NotificationService } from '../NotificationService';
|
||
import { QuickSettingsService } from '../QuickSettingsService';
|
||
import StatusBarService from '../StatusBarService';
|
||
import type {
|
||
OSNotification,
|
||
OSNotificationSnapshot,
|
||
QuickSettingsState,
|
||
ShadePanelKind,
|
||
SystemShadeSnapshot,
|
||
} from '../types';
|
||
import { getAppManifest } from '../data/appRegistry';
|
||
import { AppIcon } from './AppIcon';
|
||
import { PendingIntent } from '../PendingIntent';
|
||
import { useLocale, type Locale } from '../locale';
|
||
import {
|
||
getShadeDragOffset,
|
||
getShadeSwipeTarget,
|
||
getShadeWheelOffset,
|
||
getShadeWheelTarget,
|
||
SHADE_SWITCH_DOMINANCE,
|
||
shouldIgnoreShadePanelGestureStart,
|
||
} from './systemShadeGestures';
|
||
import {
|
||
Bell,
|
||
BellOff,
|
||
BatteryCharging,
|
||
Bluetooth,
|
||
Cast,
|
||
Eye,
|
||
Image as ImageIcon,
|
||
Lock,
|
||
MapPin,
|
||
Moon,
|
||
Plane,
|
||
Play,
|
||
Scissors,
|
||
Settings,
|
||
Signal,
|
||
SkipBack,
|
||
SkipForward,
|
||
Sun,
|
||
Ticket,
|
||
Volume2,
|
||
Wifi,
|
||
BatteryMedium,
|
||
Zap,
|
||
} from 'lucide-react';
|
||
|
||
function formatShadeDate(d: Date, locale: Locale): string {
|
||
if (locale === 'en') {
|
||
return TimeService.formatDateTimeForLocale(d, {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
weekday: 'short',
|
||
});
|
||
}
|
||
const m = d.getMonth() + 1;
|
||
const day = d.getDate();
|
||
const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()];
|
||
return `${m}月${day}日 ${week}`;
|
||
}
|
||
|
||
function formatHM(ts: number, locale: Locale): string {
|
||
try {
|
||
const d = TimeService.fromTimestamp(ts);
|
||
return d.toLocaleTimeString(locale === 'en' ? 'en-US' : 'zh-CN', { hour: '2-digit', minute: '2-digit' });
|
||
} catch {
|
||
return '';
|
||
}
|
||
}
|
||
|
||
function BackgroundBlur() {
|
||
// Match system control-center: blurred wallpaper + dark veil.
|
||
return {
|
||
backdropFilter: 'blur(22px)',
|
||
background:
|
||
'radial-gradient(1200px 700px at 20% 15%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 55%), linear-gradient(180deg, rgba(40,50,70,0.62), rgba(35,45,65,0.62))',
|
||
} as React.CSSProperties;
|
||
}
|
||
|
||
const connectivityTileBaseClassName =
|
||
'h-[72px] rounded-[22px] px-5 flex items-center justify-between shadow-sm active:scale-[0.99] transition-transform';
|
||
const connectivityTileActiveClassName = `${connectivityTileBaseClassName} bg-white/95`;
|
||
const connectivityTileInactiveClassName =
|
||
`${connectivityTileBaseClassName} bg-black/25 backdrop-blur-2xl border border-white/10`;
|
||
const connectivityIconSlotClassName = 'w-[26px] h-[26px] shrink-0 flex items-center justify-center';
|
||
|
||
type ConnectivityTileVisual = {
|
||
tileClassName: string;
|
||
iconSlotClassName: string;
|
||
title: string;
|
||
subtitle: string;
|
||
iconClassName: string;
|
||
titleClassName: string;
|
||
subtitleClassName: string;
|
||
};
|
||
|
||
function shadeText(locale: Locale, zh: string, en: string): string {
|
||
return locale === 'en' ? en : zh;
|
||
}
|
||
|
||
function cleanTileLabel(value: string | undefined): string {
|
||
return typeof value === 'string' ? value.trim() : '';
|
||
}
|
||
|
||
function getWifiTileVisual(enabled: boolean, ssid: string | undefined, locale: Locale): ConnectivityTileVisual {
|
||
if (!enabled) {
|
||
return {
|
||
tileClassName: connectivityTileInactiveClassName,
|
||
iconSlotClassName: connectivityIconSlotClassName,
|
||
title: shadeText(locale, 'WLAN', 'WLAN'),
|
||
subtitle: shadeText(locale, '已关闭', 'Off'),
|
||
iconClassName: 'text-white/85',
|
||
titleClassName: 'text-white/85',
|
||
subtitleClassName: 'text-white/50',
|
||
};
|
||
}
|
||
|
||
return {
|
||
tileClassName: connectivityTileActiveClassName,
|
||
iconSlotClassName: connectivityIconSlotClassName,
|
||
title: cleanTileLabel(ssid) || shadeText(locale, 'WLAN', 'WLAN'),
|
||
subtitle: shadeText(locale, '已连接', 'Connected'),
|
||
iconClassName: 'text-blue-500',
|
||
titleClassName: 'text-black/90',
|
||
subtitleClassName: 'text-black/45',
|
||
};
|
||
}
|
||
|
||
function getMobileDataTileVisual(enabled: boolean, carrier: string, locale: Locale): ConnectivityTileVisual {
|
||
if (!enabled) {
|
||
return {
|
||
tileClassName: connectivityTileInactiveClassName,
|
||
iconSlotClassName: connectivityIconSlotClassName,
|
||
title: carrier,
|
||
subtitle: shadeText(locale, '已关闭', 'Off'),
|
||
iconClassName: 'text-white/85',
|
||
titleClassName: 'text-white/85',
|
||
subtitleClassName: 'text-white/50',
|
||
};
|
||
}
|
||
|
||
return {
|
||
tileClassName: connectivityTileActiveClassName,
|
||
iconSlotClassName: connectivityIconSlotClassName,
|
||
title: carrier,
|
||
subtitle: shadeText(locale, '已开启', 'On'),
|
||
iconClassName: 'text-emerald-500',
|
||
titleClassName: 'text-black/90',
|
||
subtitleClassName: 'text-black/45',
|
||
};
|
||
}
|
||
|
||
const ScrollingTileText: React.FC<{
|
||
text: string;
|
||
className: string;
|
||
}> = ({ text, className }) => {
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
const textRef = useRef<HTMLSpanElement>(null);
|
||
const [scrollDistance, setScrollDistance] = useState(0);
|
||
|
||
useEffect(() => {
|
||
const container = containerRef.current;
|
||
const textEl = textRef.current;
|
||
if (!container || !textEl) return;
|
||
|
||
const measure = () => {
|
||
const distance = textEl.scrollWidth - container.clientWidth;
|
||
setScrollDistance(distance > 1 ? textEl.scrollWidth + 24 : 0);
|
||
};
|
||
|
||
measure();
|
||
if (typeof ResizeObserver === 'undefined') {
|
||
window.addEventListener('resize', measure);
|
||
return () => window.removeEventListener('resize', measure);
|
||
}
|
||
|
||
const ro = new ResizeObserver(measure);
|
||
ro.observe(container);
|
||
ro.observe(textEl);
|
||
return () => ro.disconnect();
|
||
}, [text]);
|
||
|
||
const isScrolling = scrollDistance > 0;
|
||
const animationDuration = `${Math.max(7, Math.min(14, scrollDistance / 14))}s`;
|
||
const marqueeStyle = isScrolling
|
||
? ({
|
||
'--system-shade-title-scroll': `-${scrollDistance}px`,
|
||
animation: `system-shade-title-marquee ${animationDuration} linear infinite`,
|
||
} as React.CSSProperties)
|
||
: undefined;
|
||
|
||
return (
|
||
<div
|
||
ref={containerRef}
|
||
className={`relative min-w-0 max-w-full overflow-hidden whitespace-nowrap text-left text-[16px] font-medium ${className}`}
|
||
aria-label={text}
|
||
>
|
||
<span className={isScrolling ? 'inline-flex w-max' : 'block'} style={marqueeStyle}>
|
||
<span ref={textRef} className="block">{text}</span>
|
||
{isScrolling ? <span className="block pl-6">{text}</span> : null}
|
||
</span>
|
||
<style>{`
|
||
@keyframes system-shade-title-marquee {
|
||
0%, 12% { transform: translateX(0); }
|
||
88%, 100% { transform: translateX(var(--system-shade-title-scroll)); }
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const NotificationCenterPanel: React.FC<{
|
||
snapshot: OSNotificationSnapshot;
|
||
onClose: () => void;
|
||
onOpenNotification: (it: OSNotification) => void;
|
||
withBackground?: boolean;
|
||
}> = ({ snapshot, onClose, onOpenNotification, withBackground = true }) => {
|
||
const locale = useLocale();
|
||
const now = useMemo(() => TimeService.getDate(), [snapshot.items.length, snapshot.unreadCount]);
|
||
const timeText = useMemo(() => `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`, [now]);
|
||
const dateText = useMemo(() => formatShadeDate(now, locale), [locale, now]);
|
||
const scrollRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Dynamically toggle touch-action on the scroll container so that
|
||
// swipe-up-to-close works in touch mode when the list is at the top.
|
||
// When scrollTop===0, set touch-action:none so the browser won't steal
|
||
// the upward swipe for native scrolling; otherwise allow pan-y for normal scroll.
|
||
useEffect(() => {
|
||
const el = scrollRef.current;
|
||
if (!el) return;
|
||
const sync = () => {
|
||
el.style.touchAction = el.scrollTop <= 1 ? 'none' : 'pan-y';
|
||
};
|
||
sync();
|
||
el.addEventListener('scroll', sync, { passive: true });
|
||
return () => el.removeEventListener('scroll', sync);
|
||
}, [snapshot.items.length]);
|
||
|
||
return (
|
||
<div
|
||
className="h-full w-full text-white flex flex-col"
|
||
data-status-bar-foreground="light"
|
||
style={withBackground ? BackgroundBlur() : undefined}
|
||
>
|
||
<div className="shrink-0 px-6" style={{ paddingTop: statusBarHeight + 18 }}>
|
||
<div className="flex items-start justify-between">
|
||
<div>
|
||
<div className="text-[64px] leading-none font-light text-white">{timeText}</div>
|
||
<div className="mt-1 text-[15px] text-white/75">{dateText}</div>
|
||
</div>
|
||
<div className="relative w-10 h-10 rounded-full bg-white/10 backdrop-blur-xl flex items-center justify-center">
|
||
<Bell size={20} className="text-white/85" />
|
||
{snapshot.unreadCount > 0 && (
|
||
<div className="absolute right-[10px] top-[10px] w-1.5 h-1.5 rounded-full bg-white/85" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
ref={scrollRef}
|
||
className="mt-10 px-6 pb-10 min-h-0 flex-1 overflow-y-auto no-scrollbar"
|
||
data-shade-scroll="true"
|
||
>
|
||
{snapshot.items.length === 0 ? (
|
||
<div className="h-full w-full flex items-center justify-center text-white/35 text-[16px]">
|
||
{locale === 'en' ? 'No notifications' : '暂无通知消息'}
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="text-[13px] text-white/55">{locale === 'en' ? `Unread ${snapshot.unreadCount}` : `未读 ${snapshot.unreadCount}`}</div>
|
||
<button
|
||
type="button"
|
||
className="text-[13px] text-white/70 active:text-white/90"
|
||
onClick={() => {
|
||
NotificationService.clearAll();
|
||
// If clearing leaves empty, match system by staying on the empty page.
|
||
}}
|
||
>
|
||
{locale === 'en' ? 'Clear all' : '清除全部'}
|
||
</button>
|
||
</div>
|
||
<div className="flex flex-col gap-3">
|
||
{snapshot.items.map(it => (
|
||
<div
|
||
key={it.id}
|
||
className="bg-black/25 backdrop-blur-2xl border border-white/10 rounded-2xl px-4 py-3 shadow-sm active:scale-[0.99] transition-transform"
|
||
onClick={() => onOpenNotification(it)}
|
||
role="button"
|
||
tabIndex={0}
|
||
>
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="flex items-center gap-3 min-w-0">
|
||
{it.appId ? (() => {
|
||
const manifest = getAppManifest(it.appId);
|
||
return manifest ? (
|
||
<AppIcon manifest={manifest} size={40} radius={12} showShadow={false} />
|
||
) : (
|
||
<div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
|
||
<Bell size={18} className="text-white/75" />
|
||
</div>
|
||
);
|
||
})() : (
|
||
<div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
|
||
<Bell size={18} className="text-white/75" />
|
||
</div>
|
||
)}
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
{!it.read && <div className="w-2 h-2 rounded-full bg-blue-400" />}
|
||
<div className="text-[14px] font-medium text-white/90 truncate">
|
||
{it.title}
|
||
</div>
|
||
</div>
|
||
{it.body && (
|
||
<div className="mt-0.5 text-[13px] text-white/60 truncate">
|
||
{it.body}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="text-[12px] text-white/45 shrink-0">
|
||
{formatHM(it.timestamp, locale)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const NfcGlyph: React.FC<{ active: boolean }> = ({ active }) => (
|
||
<span className={`text-[18px] font-semibold ${active ? 'text-blue-500' : 'text-blue-300'}`}>N</span>
|
||
);
|
||
|
||
const CircleButton: React.FC<{
|
||
active?: boolean;
|
||
onClick?: () => void;
|
||
activeIconClassName?: string;
|
||
children: React.ReactNode;
|
||
ariaLabel: string;
|
||
}> = ({ active = false, onClick, children, activeIconClassName, ariaLabel }) => {
|
||
const { themeService, version } = useTheme();
|
||
const themedBg = themeService.getShadeTileBackground(active ? 'active' : 'inactive');
|
||
return (
|
||
<button
|
||
type="button"
|
||
aria-label={ariaLabel}
|
||
className={`w-[60px] h-[60px] rounded-full flex items-center justify-center transition-transform active:scale-95 ${themedBg ? 'bg-transparent shadow-sm' : active ? 'bg-white/95 shadow-sm' : 'bg-black/25 backdrop-blur-2xl border border-white/10'
|
||
}`}
|
||
onClick={onClick}
|
||
style={
|
||
themedBg
|
||
? { backgroundImage: `url(${themedBg})`, backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }
|
||
: undefined
|
||
}
|
||
>
|
||
<div className={active ? (activeIconClassName ?? 'text-black') : 'text-white/85'}>
|
||
<span key={version}>{children}</span>
|
||
</div>
|
||
</button>
|
||
);
|
||
};
|
||
|
||
const VerticalSlider: React.FC<{
|
||
value: number;
|
||
onChange: (v: number) => void;
|
||
icon: React.ReactNode;
|
||
iconClassName: string;
|
||
}> = ({ value, onChange, icon, iconClassName }) => {
|
||
const trackRef = useRef<HTMLDivElement>(null);
|
||
const dragRef = useRef<{
|
||
pid: number;
|
||
active: boolean;
|
||
pointerType: string;
|
||
startY: number;
|
||
startValue: number;
|
||
h: number;
|
||
moved: boolean;
|
||
} | null>(null);
|
||
|
||
const onPointerDown = (e: React.PointerEvent) => {
|
||
// System-like: press then swipe; tap alone does nothing.
|
||
const h = Math.max(1, (e.currentTarget as HTMLDivElement).getBoundingClientRect().height);
|
||
dragRef.current = {
|
||
pid: e.pointerId,
|
||
active: true,
|
||
pointerType: e.pointerType,
|
||
startY: e.clientY,
|
||
startValue: value,
|
||
h,
|
||
moved: false,
|
||
};
|
||
try {
|
||
(e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
// Prevent page/overlay from hijacking the gesture.
|
||
e.preventDefault?.();
|
||
e.stopPropagation?.();
|
||
};
|
||
|
||
const onPointerMove = (e: React.PointerEvent) => {
|
||
if (!dragRef.current?.active || dragRef.current.pid !== e.pointerId) return;
|
||
const s = dragRef.current;
|
||
const dy = e.clientY - s.startY;
|
||
if (!s.moved) {
|
||
// Small threshold to avoid treating tap jitter as swipe.
|
||
const SWIPE_START_PX = s.pointerType === 'mouse' ? 2 : 6;
|
||
if (Math.abs(dy) < SWIPE_START_PX) return;
|
||
s.moved = true;
|
||
}
|
||
e.preventDefault?.();
|
||
e.stopPropagation?.();
|
||
// Swipe up (clientY decreases) => increase value. 1:1 pixel follow.
|
||
const delta = (-dy / Math.max(1, s.h)) * 100;
|
||
const next = Math.max(0, Math.min(100, Math.round(s.startValue + delta)));
|
||
onChange(next);
|
||
};
|
||
|
||
const onPointerUp = (e: React.PointerEvent) => {
|
||
if (dragRef.current?.pid !== e.pointerId) return;
|
||
const s = dragRef.current;
|
||
if (s?.moved) {
|
||
// Ensure final position is applied (some environments may deliver sparse move events).
|
||
const dy = e.clientY - s.startY;
|
||
const delta = (-dy / Math.max(1, s.h)) * 100;
|
||
const next = Math.max(0, Math.min(100, Math.round(s.startValue + delta)));
|
||
onChange(next);
|
||
}
|
||
dragRef.current = null;
|
||
};
|
||
|
||
const TRACK_H = 160;
|
||
const ICON_SIZE = 22;
|
||
const PAD = 12;
|
||
const v = Math.max(0, Math.min(100, value));
|
||
const fillPx = (v / 100) * TRACK_H;
|
||
// Keep icon inside filled area; center it when fill is large enough.
|
||
let iconBottom = fillPx / 2 - ICON_SIZE / 2;
|
||
if (fillPx < ICON_SIZE + PAD * 2) {
|
||
iconBottom = PAD;
|
||
} else {
|
||
iconBottom = Math.max(PAD, Math.min(fillPx - ICON_SIZE - PAD, iconBottom));
|
||
}
|
||
const fillH = `${v}%`;
|
||
|
||
return (
|
||
<div
|
||
data-shade-slider="true"
|
||
className="relative w-full h-[160px] rounded-[28px] overflow-hidden border border-white/10 backdrop-blur-2xl bg-gradient-to-b from-black/25 to-indigo-900/15 touch-none"
|
||
ref={trackRef}
|
||
onPointerDown={onPointerDown}
|
||
onPointerMove={onPointerMove}
|
||
onPointerUp={onPointerUp}
|
||
onPointerCancel={onPointerUp}
|
||
>
|
||
<div className="absolute inset-x-0 bottom-0 bg-white/95 pointer-events-none" style={{ height: fillH }} />
|
||
<div className="absolute inset-x-0 flex justify-center pointer-events-none" style={{ bottom: `${iconBottom}px` }}>
|
||
<div className={`${iconClassName} pointer-events-none`}>
|
||
{icon}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const ControlCenterPanel: React.FC<{
|
||
qs: QuickSettingsState;
|
||
wifiSsid?: string;
|
||
brightness: number;
|
||
volume: number;
|
||
onClose: () => void;
|
||
onToggle: (key: keyof QuickSettingsState) => void;
|
||
onSetBrightness: (v: number) => void;
|
||
onSetVolume: (v: number) => void;
|
||
withBackground?: boolean;
|
||
}> = ({ qs, wifiSsid, brightness, volume, onClose, onToggle, onSetBrightness, onSetVolume, withBackground = true }) => {
|
||
const locale = useLocale();
|
||
const { themeService, version } = useTheme();
|
||
const sbState = useSyncExternalStore(StatusBarService.subscribe, StatusBarService.getState);
|
||
const batteryPct = Math.min(Math.max(sbState.batteryPercent, 0), 100);
|
||
const shadeIconTintFilter = 'brightness(0) invert(1)';
|
||
const shadeStatusIconClassName = 'w-[14px] h-[14px] object-contain';
|
||
const wifiVisible = qs.wifiEnabled;
|
||
const btVisible = qs.bluetoothEnabled;
|
||
const airplaneMode = qs.airplaneModeEnabled;
|
||
const noSim = sbState.noSim;
|
||
const signalVisible = !airplaneMode && !noSim;
|
||
const nfcUrl = qs.nfcEnabled ? themeService.getStatusBarIcon('nfc') : null;
|
||
const btUrl = btVisible ? themeService.getStatusBarIcon('bluetooth') : null;
|
||
const airplaneUrl = airplaneMode ? themeService.getStatusBarIcon('airplane') : null;
|
||
const noSimUrl = !airplaneMode && noSim
|
||
? themeService.getStatusBarIcon('no_sim') || themeService.getStatusBarIcon('signal_null')
|
||
: null;
|
||
const signalUrl = signalVisible ? themeService.getStatusBarSignalIcon(sbState.signalLevel) : null;
|
||
const dataTypeVisible =
|
||
signalVisible && qs.mobileDataEnabled && sbState.mobileDataType !== 'none';
|
||
const dataTypeUrl = dataTypeVisible ? themeService.getStatusBarDataTypeIcon(sbState.mobileDataType) : null;
|
||
const wifiUrl = wifiVisible ? themeService.getStatusBarWifiIcon(sbState.wifiLevel) : null;
|
||
// Theme-first / system-fallback (mirrors SystemShell logic):
|
||
const baseSprite = themeService.getStatusBarBatterySprite();
|
||
const lowBattery = !sbState.charging && sbState.batteryPercent < 20;
|
||
|
||
let themeRgbaSprite: { url: string; frames: number; frameSide: number } | null = null;
|
||
let rgbaHasBakedBolt = false;
|
||
if (qs.batterySaverEnabled && sbState.charging) {
|
||
themeRgbaSprite = themeService.getStatusBarBatteryVariantSprite('power_save_charge');
|
||
if (themeRgbaSprite) rgbaHasBakedBolt = true;
|
||
if (!themeRgbaSprite) {
|
||
themeRgbaSprite = themeService.getStatusBarBatteryVariantSprite('power_save');
|
||
}
|
||
} else if (sbState.charging) {
|
||
themeRgbaSprite = themeService.getStatusBarBatteryVariantSprite('charge');
|
||
if (themeRgbaSprite) rgbaHasBakedBolt = true;
|
||
} else if (qs.batterySaverEnabled) {
|
||
themeRgbaSprite = themeService.getStatusBarBatteryVariantSprite('power_save');
|
||
}
|
||
|
||
const batterySprite = themeRgbaSprite ?? baseSprite;
|
||
const useThemeRgba = themeRgbaSprite !== null;
|
||
const batteryFallback = themeService.getStatusBarIcon('battery');
|
||
const batteryFrames = batterySprite?.frames ?? 0;
|
||
const batteryFrameIdx =
|
||
batterySprite && batteryFrames > 1
|
||
? Math.min(Math.max(Math.floor(((batteryFrames - 1) * batteryPct) / 100), 0), batteryFrames - 1)
|
||
: 0;
|
||
// System-tint color used when no theme variant matches.
|
||
const systemTintColor = qs.batterySaverEnabled
|
||
? '#F5C518'
|
||
: sbState.charging
|
||
? '#22C55E'
|
||
: lowBattery
|
||
? '#EF4444'
|
||
: '#FFFFFF';
|
||
const needsBoltOverlay = sbState.charging && !rgbaHasBakedBolt;
|
||
const batteryBoltUrl = needsBoltOverlay
|
||
? themeService.getStatusBarBatteryBoltOverlay()
|
||
: null;
|
||
const batteryBoltCoreColor = sbState.fastCharging ? 'rgba(0,0,0,0.92)' : 'rgba(0,0,0,0.78)';
|
||
const batteryBoltHaloColor = systemTintColor;
|
||
const now = useMemo(() => TimeService.getDate(), [qs]);
|
||
const dateText = useMemo(() => formatShadeDate(now, locale), [locale, now]);
|
||
const shadeText = useMemo(() => ({
|
||
connected: locale === 'en' ? 'Connected' : '已连接',
|
||
off: locale === 'en' ? 'Off' : '已关闭',
|
||
on: locale === 'en' ? 'On' : '已开启',
|
||
mobileData: locale === 'en' ? 'Mobile data' : '移动数据',
|
||
bluetooth: locale === 'en' ? 'Bluetooth' : '蓝牙',
|
||
airplane: locale === 'en' ? 'Airplane mode' : '飞行模式',
|
||
silent: locale === 'en' ? 'Silent' : '静音',
|
||
flashlight: locale === 'en' ? 'Flashlight' : '手电筒',
|
||
screenshot: locale === 'en' ? 'Screenshot' : '截屏',
|
||
screenshotDone: locale === 'en' ? 'Screenshot simulated' : '已模拟截屏',
|
||
screenshotHint: locale === 'en' ? '(Control Center demo)' : '（控制中心示意）',
|
||
batterySaver: locale === 'en' ? 'Battery saver' : '省电模式',
|
||
cast: locale === 'en' ? 'Cast' : '投屏',
|
||
rotationLock: locale === 'en' ? 'Rotation lock' : '旋转锁定',
|
||
gallery: locale === 'en' ? 'Gallery' : '相册',
|
||
settings: locale === 'en' ? 'Settings' : '设置',
|
||
display: locale === 'en' ? 'Display' : '显示',
|
||
pass: locale === 'en' ? 'Cards' : '票证',
|
||
passHint: locale === 'en' ? '(Placeholder)' : '（占位）',
|
||
eyeComfort: locale === 'en' ? 'Eye comfort' : '护眼',
|
||
location: locale === 'en' ? 'Location' : '定位',
|
||
darkMode: locale === 'en' ? 'Dark mode' : '深色',
|
||
noMedia: locale === 'en' ? 'Nothing playing' : '暂无播放',
|
||
edit: locale === 'en' ? 'Edit' : '编辑',
|
||
carrier: locale === 'en' ? 'China Unicom' : '中国联通',
|
||
carrierHd: locale === 'en' ? 'China Telecom HD | China Unicom HD' : '中国电信HD | 中国联通HD',
|
||
}), [locale]);
|
||
|
||
const getTileStyle = (active: boolean, className: string): { className: string; style?: React.CSSProperties } => {
|
||
const bg = themeService.getShadeTileBackground(active ? 'active' : 'inactive');
|
||
if (!bg) return { className };
|
||
return {
|
||
className: className
|
||
.replace('bg-white/95', 'bg-transparent')
|
||
.replace('bg-black/25', 'bg-transparent'),
|
||
style: { backgroundImage: `url(${bg})`, backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' },
|
||
};
|
||
};
|
||
|
||
const WifiTile = () => {
|
||
const visual = getWifiTileVisual(qs.wifiEnabled, wifiSsid, locale);
|
||
const t = getTileStyle(qs.wifiEnabled, visual.tileClassName);
|
||
return (
|
||
<button type="button" className={t.className} style={t.style} onClick={() => onToggle('wifiEnabled')} aria-label="Wi‑Fi">
|
||
<div className="flex flex-1 items-center gap-3 min-w-0">
|
||
<span className={visual.iconSlotClassName}>
|
||
<Wifi key={version} size={26} strokeWidth={2} className={`block ${visual.iconClassName}`} />
|
||
</span>
|
||
<div className="min-w-0 flex-1">
|
||
<ScrollingTileText text={visual.title} className={visual.titleClassName} />
|
||
<div className={`text-left text-[12px] ${visual.subtitleClassName}`}>{visual.subtitle}</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
};
|
||
|
||
const MobileDataTile = () => {
|
||
const visual = getMobileDataTileVisual(qs.mobileDataEnabled, shadeText.carrier, locale);
|
||
const t = getTileStyle(qs.mobileDataEnabled, visual.tileClassName);
|
||
return (
|
||
<button type="button" className={t.className} style={t.style} onClick={() => onToggle('mobileDataEnabled')} aria-label={shadeText.mobileData}>
|
||
<div className="flex flex-1 items-center gap-3 min-w-0">
|
||
<span className={visual.iconSlotClassName}>
|
||
<Signal key={version} size={26} strokeWidth={2} className={`block ${visual.iconClassName}`} />
|
||
</span>
|
||
<div className="min-w-0 flex-1">
|
||
<ScrollingTileText text={visual.title} className={visual.titleClassName} />
|
||
<div className={`text-left text-[12px] ${visual.subtitleClassName}`}>{visual.subtitle}</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
};
|
||
|
||
const openSettings = () => {
|
||
onClose();
|
||
const os = window.__OS__;
|
||
if (os && typeof os.openApp === 'function') {
|
||
os.openApp('settings');
|
||
}
|
||
};
|
||
|
||
const grid = [
|
||
// row 1
|
||
{ kind: 'toggle' as const, key: 'bluetoothEnabled' as const, activeIcon: 'text-blue-500', icon: <Bluetooth size={22} />, label: shadeText.bluetooth },
|
||
{ kind: 'toggle' as const, key: 'airplaneModeEnabled' as const, activeIcon: 'text-black', icon: <Plane size={22} />, label: shadeText.airplane },
|
||
{ kind: 'toggle' as const, key: 'doNotDisturbEnabled' as const, activeIcon: 'text-red-500', icon: <BellOff size={22} />, label: shadeText.silent },
|
||
{ kind: 'toggle' as const, key: 'flashlightEnabled' as const, activeIcon: 'text-black', icon: <Zap size={22} />, label: shadeText.flashlight },
|
||
// row 2
|
||
{ kind: 'action' as const, id: 'screenshot', active: false, activeIcon: 'text-black', icon: <Scissors size={22} />, label: shadeText.screenshot, onClick: () => NotificationService.push({ title: shadeText.screenshotDone, body: shadeText.screenshotHint, read: true }) },
|
||
{ kind: 'toggle' as const, key: 'batterySaverEnabled' as const, activeIcon: 'text-black', icon: <BatteryCharging size={22} />, label: shadeText.batterySaver },
|
||
{ kind: 'toggle' as const, key: 'screenCastEnabled' as const, activeIcon: 'text-black', icon: <Cast size={22} />, label: shadeText.cast },
|
||
{ kind: 'toggle' as const, key: 'rotationLocked' as const, activeIcon: 'text-blue-500', icon: <Lock size={22} />, label: shadeText.rotationLock },
|
||
// row 3
|
||
{ kind: 'action' as const, id: 'gallery', active: false, activeIcon: 'text-black', icon: <ImageIcon size={22} />, label: shadeText.gallery, onClick: () => { onClose(); window.__OS__?.openApp?.('gallery'); } },
|
||
{ kind: 'action' as const, id: 'settings', active: false, activeIcon: 'text-black', icon: <Settings size={22} />, label: shadeText.settings, onClick: openSettings },
|
||
{
|
||
kind: 'toggle' as const, key: 'autoBrightnessEnabled' as const, activeIcon: 'text-amber-500', icon: (
|
||
<div className="relative">
|
||
<Sun size={22} />
|
||
<span className="absolute -right-1 -top-1 text-[10px] font-semibold">A</span>
|
||
</div>
|
||
), label: shadeText.display
|
||
},
|
||
{ kind: 'toggle' as const, key: 'nfcEnabled' as const, activeIcon: 'text-blue-500', icon: <NfcGlyph active={qs.nfcEnabled} />, label: 'NFC' },
|
||
// row 4
|
||
{ kind: 'action' as const, id: 'ticket', active: false, activeIcon: 'text-black', icon: <Ticket size={22} />, label: shadeText.pass, onClick: () => NotificationService.push({ title: shadeText.pass, body: shadeText.passHint, read: true }) },
|
||
{ kind: 'toggle' as const, key: 'eyeComfortEnabled' as const, activeIcon: 'text-black', icon: <Eye size={22} />, label: shadeText.eyeComfort },
|
||
{ kind: 'toggle' as const, key: 'locationEnabled' as const, activeIcon: 'text-blue-500', icon: <MapPin size={22} />, label: shadeText.location },
|
||
{ kind: 'toggle' as const, key: 'darkModeEnabled' as const, activeIcon: 'text-black', icon: <Moon size={22} />, label: shadeText.darkMode },
|
||
];
|
||
|
||
return (
|
||
<div className="h-full w-full text-white" data-status-bar-foreground="light" style={withBackground ? BackgroundBlur() : undefined}>
|
||
<div className="px-4" style={{ paddingTop: statusBarHeight + 18 }}>
|
||
<div className="flex justify-end">
|
||
<div className="text-[12px] text-white/55 leading-none text-right">{shadeText.carrierHd}</div>
|
||
</div>
|
||
<div className="mt-1 flex items-center justify-between">
|
||
<div className="text-[15px] text-white/80 leading-none">
|
||
{dateText}
|
||
</div>
|
||
<div className="flex items-center justify-end gap-1.5 text-white/85 text-[12px] leading-none">
|
||
{nfcUrl ? (
|
||
<img
|
||
key={`shade_nfc_${version}`}
|
||
src={nfcUrl}
|
||
className={shadeStatusIconClassName}
|
||
style={{ filter: shadeIconTintFilter }}
|
||
alt="nfc"
|
||
/>
|
||
) : null}
|
||
{btVisible ? (
|
||
btUrl ? (
|
||
<img
|
||
key={`shade_bt_${version}`}
|
||
src={btUrl}
|
||
className={shadeStatusIconClassName}
|
||
style={{ filter: shadeIconTintFilter }}
|
||
alt="bluetooth"
|
||
/>
|
||
) : (
|
||
<Bluetooth size={14} />
|
||
)
|
||
) : null}
|
||
{airplaneMode ? (
|
||
airplaneUrl ? (
|
||
<img
|
||
key={`shade_airplane_${version}`}
|
||
src={airplaneUrl}
|
||
className={shadeStatusIconClassName}
|
||
style={{ filter: shadeIconTintFilter }}
|
||
alt="airplane"
|
||
/>
|
||
) : (
|
||
<Plane size={14} />
|
||
)
|
||
) : noSim ? (
|
||
noSimUrl ? (
|
||
<img
|
||
key={`shade_no_sim_${version}`}
|
||
src={noSimUrl}
|
||
className={shadeStatusIconClassName}
|
||
style={{ filter: shadeIconTintFilter }}
|
||
alt="no-sim"
|
||
/>
|
||
) : null
|
||
) : signalUrl ? (
|
||
<img
|
||
key={`shade_signal_${sbState.signalLevel}_${version}`}
|
||
src={signalUrl}
|
||
className={shadeStatusIconClassName}
|
||
style={{ filter: shadeIconTintFilter }}
|
||
alt="signal"
|
||
/>
|
||
) : (
|
||
<Signal size={14} />
|
||
)}
|
||
{dataTypeUrl ? (
|
||
<img
|
||
key={`shade_data_${sbState.mobileDataType}_${version}`}
|
||
src={dataTypeUrl}
|
||
className={shadeStatusIconClassName}
|
||
style={{ filter: shadeIconTintFilter }}
|
||
alt={`data-${sbState.mobileDataType}`}
|
||
/>
|
||
) : null}
|
||
{wifiVisible ? (
|
||
wifiUrl ? (
|
||
<img
|
||
key={`shade_wifi_${sbState.wifiLevel}_${version}`}
|
||
src={wifiUrl}
|
||
className={shadeStatusIconClassName}
|
||
style={{ filter: shadeIconTintFilter }}
|
||
alt="wifi"
|
||
/>
|
||
) : (
|
||
<Wifi size={14} />
|
||
)
|
||
) : null}
|
||
<div className="flex items-center gap-1 text-white/90">
|
||
<span className="text-[11px] leading-none">{batteryPct}%</span>
|
||
{batterySprite ? (
|
||
<div
|
||
key={`shade_battery_${batteryPct}_${sbState.charging ? 1 : 0}_${sbState.fastCharging ? 1 : 0}_${qs.batterySaverEnabled ? 1 : 0}_${useThemeRgba ? 'r' : 't'}_${version}`}
|
||
className="relative w-[18px] h-[18px]"
|
||
aria-label="battery"
|
||
>
|
||
{useThemeRgba ? (
|
||
<div
|
||
className="absolute inset-0 bg-no-repeat"
|
||
style={{
|
||
backgroundImage: `url(${batterySprite.url})`,
|
||
backgroundSize: `18px ${batteryFrames * 18}px`,
|
||
backgroundPosition: `0px ${-batteryFrameIdx * 18}px`,
|
||
}}
|
||
/>
|
||
) : (
|
||
<div
|
||
className="absolute inset-0"
|
||
style={{
|
||
backgroundColor: systemTintColor,
|
||
WebkitMaskImage: `url(${batterySprite.url})`,
|
||
maskImage: `url(${batterySprite.url})`,
|
||
WebkitMaskSize: `18px ${batteryFrames * 18}px`,
|
||
maskSize: `18px ${batteryFrames * 18}px`,
|
||
WebkitMaskPosition: `0px ${-batteryFrameIdx * 18}px`,
|
||
maskPosition: `0px ${-batteryFrameIdx * 18}px`,
|
||
WebkitMaskRepeat: 'no-repeat',
|
||
maskRepeat: 'no-repeat',
|
||
}}
|
||
/>
|
||
)}
|
||
{batteryBoltUrl ? (
|
||
<>
|
||
<div
|
||
className="absolute inset-0"
|
||
style={{
|
||
backgroundColor: batteryBoltHaloColor,
|
||
WebkitMaskImage: `url(${batteryBoltUrl})`,
|
||
maskImage: `url(${batteryBoltUrl})`,
|
||
WebkitMaskSize: '20px 20px',
|
||
maskSize: '20px 20px',
|
||
WebkitMaskPosition: '-1px -1px',
|
||
maskPosition: '-1px -1px',
|
||
WebkitMaskRepeat: 'no-repeat',
|
||
maskRepeat: 'no-repeat',
|
||
}}
|
||
/>
|
||
<div
|
||
className="absolute inset-0"
|
||
style={{
|
||
backgroundColor: batteryBoltCoreColor,
|
||
WebkitMaskImage: `url(${batteryBoltUrl})`,
|
||
maskImage: `url(${batteryBoltUrl})`,
|
||
WebkitMaskSize: '18px 18px',
|
||
maskSize: '18px 18px',
|
||
WebkitMaskRepeat: 'no-repeat',
|
||
maskRepeat: 'no-repeat',
|
||
}}
|
||
aria-label="battery-charging"
|
||
/>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
) : batteryFallback ? (
|
||
<img
|
||
key={`shade_battery_${version}`}
|
||
src={batteryFallback}
|
||
className="w-[18px] h-[18px] object-contain"
|
||
style={{ filter: shadeIconTintFilter }}
|
||
alt="battery"
|
||
/>
|
||
) : sbState.charging ? (
|
||
<BatteryCharging size={16} />
|
||
) : (
|
||
<BatteryMedium size={16} fill="currentColor" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-5 px-4 pb-10">
|
||
{/* top tiles */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<WifiTile />
|
||
<MobileDataTile />
|
||
</div>
|
||
|
||
{/* media + sliders */}
|
||
{/* IMPORTANT: Tailwind arbitrary grid values use '_' for spaces (no commas). */}
|
||
<div className="mt-4 grid grid-cols-[2.2fr_1fr_1fr] gap-3">
|
||
<div className="rounded-[28px] bg-gradient-to-br from-black/35 via-black/25 to-indigo-900/20 backdrop-blur-2xl border border-white/10 p-4 h-[160px] flex flex-col justify-between">
|
||
<div className="flex-1 flex items-center justify-center text-white/35 text-[16px]">
|
||
{shadeText.noMedia}
|
||
</div>
|
||
<div className="flex items-center justify-between px-4 pb-1 text-white/85">
|
||
<SkipBack size={22} className="opacity-70" />
|
||
<div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center">
|
||
<Play size={22} className="text-white/90" />
|
||
</div>
|
||
<SkipForward size={22} className="opacity-70" />
|
||
</div>
|
||
</div>
|
||
|
||
<VerticalSlider
|
||
value={brightness}
|
||
onChange={onSetBrightness}
|
||
icon={<Sun size={22} />}
|
||
iconClassName="text-amber-500"
|
||
/>
|
||
|
||
<VerticalSlider
|
||
value={volume}
|
||
onChange={onSetVolume}
|
||
icon={<Volume2 size={22} />}
|
||
iconClassName="text-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
{/* quick toggles grid */}
|
||
<div className="mt-5 grid grid-cols-4 gap-y-4 justify-items-center">
|
||
{grid.map((it, idx) => {
|
||
if (it.kind === 'toggle') {
|
||
const active = Boolean(qs[it.key]);
|
||
return (
|
||
<CircleButton
|
||
key={`${it.kind}-${it.key}-${idx}`}
|
||
active={active}
|
||
activeIconClassName={it.activeIcon}
|
||
ariaLabel={it.label}
|
||
onClick={() => onToggle(it.key)}
|
||
>
|
||
{it.icon}
|
||
</CircleButton>
|
||
);
|
||
}
|
||
return (
|
||
<CircleButton
|
||
key={`${it.kind}-${it.id}-${idx}`}
|
||
active={Boolean(it.active)}
|
||
activeIconClassName={it.activeIcon}
|
||
ariaLabel={it.label}
|
||
onClick={it.onClick}
|
||
>
|
||
{it.icon}
|
||
</CircleButton>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
className="mt-6 mx-auto block px-6 py-1.5 rounded-full bg-black/25 backdrop-blur-xl text-white/70 text-[13px] active:bg-black/35"
|
||
onClick={() => {
|
||
// placeholder: edit mode for quick tiles
|
||
}}
|
||
>
|
||
{shadeText.edit}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export const SystemShade: React.FC = () => {
|
||
const { launchApp, setBrightness, setVolume } = useOS();
|
||
const brightness = useOsStateStore(s => s.settings.system.brightness);
|
||
const volume = useOsStateStore(s => s.settings.system.mediaVolume);
|
||
const wifiSsid = useOsStateStore(s => s.hardware.wifi.connectedSsid);
|
||
|
||
const [shade, setShade] = useState<SystemShadeSnapshot>(SystemShadeService.getState());
|
||
const [notif, setNotif] = useState<OSNotificationSnapshot>(NotificationService.getState());
|
||
const [qs, setQs] = useState<QuickSettingsState>(QuickSettingsService.getState());
|
||
|
||
useEffect(() => SystemShadeService.subscribe(setShade), []);
|
||
useEffect(() => NotificationService.subscribe(setNotif), []);
|
||
useEffect(() => QuickSettingsService.subscribe(setQs), []);
|
||
|
||
// ESC closes shade (desktop convenience)
|
||
useEffect(() => {
|
||
if (!shade.open) return;
|
||
const onKeyDown = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') SystemShadeService.close();
|
||
};
|
||
window.addEventListener('keydown', onKeyDown);
|
||
return () => window.removeEventListener('keydown', onKeyDown);
|
||
}, [shade.open]);
|
||
|
||
const onClose = () => SystemShadeService.close();
|
||
|
||
const panelRef = useRef<HTMLDivElement>(null);
|
||
const [shadeDragOffsetX, setShadeDragOffsetX] = useState(0);
|
||
const [isShadeDragging, setIsShadeDragging] = useState(false);
|
||
const suppressShadeClickRef = useRef(false);
|
||
const wasShadeOpenRef = useRef(false);
|
||
const wheelSwitchRef = useRef<{ dx: number; dy: number; timer: number | null; kind: ShadePanelKind | null }>({
|
||
dx: 0,
|
||
dy: 0,
|
||
timer: null,
|
||
kind: null,
|
||
});
|
||
|
||
// 横滑切换 + 上滑关闭。避免和亮度/音量 slider、可滚动通知列表抢手势。
|
||
const shadeGestureRef = useRef<{
|
||
pid: number;
|
||
x: number;
|
||
y: number;
|
||
kind: ShadePanelKind;
|
||
mode: 'pending' | 'horizontal' | 'vertical';
|
||
canVerticalClose: boolean;
|
||
} | null>(null);
|
||
|
||
const shouldIgnoreSwipeClose = (target: EventTarget | null): boolean => {
|
||
const el = target instanceof Element ? target : null;
|
||
if (!el) return false;
|
||
if (el.closest?.('[data-shade-slider="true"]')) return true;
|
||
if (el.closest?.('[role="button"], button, a, [data-clickable="true"]')) return true;
|
||
const scrollEl = el.closest?.('[data-shade-scroll="true"]') as HTMLElement | null;
|
||
if (scrollEl) {
|
||
const isScrollable = scrollEl.scrollHeight > scrollEl.clientHeight + 2;
|
||
if (!isScrollable) return false;
|
||
return scrollEl.scrollTop > 1;
|
||
}
|
||
return false;
|
||
};
|
||
const shouldBlockShadeGesture = (target: EventTarget | null): boolean => {
|
||
const el = target instanceof Element ? target : null;
|
||
return shouldIgnoreShadePanelGestureStart(el);
|
||
};
|
||
const getPanelWidth = () => panelRef.current?.clientWidth || (typeof window !== 'undefined' ? window.innerWidth : 360);
|
||
|
||
useEffect(() => {
|
||
setShadeDragOffsetX(0);
|
||
setIsShadeDragging(false);
|
||
const w = wheelSwitchRef.current;
|
||
w.dx = 0;
|
||
w.dy = 0;
|
||
w.kind = shade.kind;
|
||
if (w.timer) {
|
||
window.clearTimeout(w.timer);
|
||
w.timer = null;
|
||
}
|
||
}, [shade.kind, shade.open]);
|
||
|
||
useEffect(() => () => {
|
||
const w = wheelSwitchRef.current;
|
||
if (w.timer) {
|
||
window.clearTimeout(w.timer);
|
||
w.timer = null;
|
||
}
|
||
}, []);
|
||
|
||
const onPanelPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
|
||
if (!shade.open) return;
|
||
if (e.pointerType === 'mouse' && e.button !== 0) return;
|
||
// 上一次横滑若结束在 panel 空白处，浏览器不派发 click，suppressShadeClickRef 会悬挂吞掉下次合法点击。
|
||
suppressShadeClickRef.current = false;
|
||
shadeGestureRef.current = null;
|
||
if (shouldBlockShadeGesture(e.target)) return;
|
||
shadeGestureRef.current = {
|
||
pid: e.pointerId,
|
||
x: e.clientX,
|
||
y: e.clientY,
|
||
kind: shade.kind,
|
||
mode: 'pending',
|
||
canVerticalClose: !shouldIgnoreSwipeClose(e.target),
|
||
};
|
||
};
|
||
const onPanelPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
|
||
const s = shadeGestureRef.current;
|
||
if (!s || s.pid !== e.pointerId) return;
|
||
if (e.pointerType === 'mouse' && e.buttons === 0) {
|
||
shadeGestureRef.current = null;
|
||
setShadeDragOffsetX(0);
|
||
setIsShadeDragging(false);
|
||
return;
|
||
}
|
||
const dy = e.clientY - s.y;
|
||
const dx = e.clientX - s.x;
|
||
|
||
if (s.mode === 'pending') {
|
||
const absX = Math.abs(dx);
|
||
const absY = Math.abs(dy);
|
||
if (absX > 10 && absX >= absY * SHADE_SWITCH_DOMINANCE && getShadeDragOffset(s.kind, dx, getPanelWidth()) !== 0) {
|
||
s.mode = 'horizontal';
|
||
setIsShadeDragging(true);
|
||
try {
|
||
(e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
} else if (absY > 10) {
|
||
s.mode = 'vertical';
|
||
if (s.canVerticalClose) {
|
||
try {
|
||
(e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
if (s.mode === 'horizontal') {
|
||
suppressShadeClickRef.current = true;
|
||
e.preventDefault?.();
|
||
e.stopPropagation?.();
|
||
setShadeDragOffsetX(getShadeDragOffset(s.kind, dx, getPanelWidth()));
|
||
return;
|
||
}
|
||
|
||
if (s.mode === 'vertical' && s.canVerticalClose && dy < -90 && Math.abs(dx) < 90) {
|
||
shadeGestureRef.current = null;
|
||
setShadeDragOffsetX(0);
|
||
setIsShadeDragging(false);
|
||
onClose();
|
||
}
|
||
};
|
||
const onPanelPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
|
||
const s = shadeGestureRef.current;
|
||
if (!s || s.pid !== e.pointerId) return;
|
||
const dy = e.clientY - s.y;
|
||
const dx = e.clientX - s.x;
|
||
shadeGestureRef.current = null;
|
||
if (s.mode === 'horizontal') {
|
||
const target = getShadeSwipeTarget(s.kind, { dx, dy });
|
||
if (target) SystemShadeService.open(target);
|
||
suppressShadeClickRef.current = true;
|
||
}
|
||
setShadeDragOffsetX(0);
|
||
setIsShadeDragging(false);
|
||
};
|
||
const onPanelPointerCancel = (e: React.PointerEvent<HTMLDivElement>) => {
|
||
const s = shadeGestureRef.current;
|
||
if (!s || s.pid !== e.pointerId) return;
|
||
shadeGestureRef.current = null;
|
||
// pointercancel 不会有后续 click，绝不能置位 suppressShadeClickRef，否则会吞掉下次合法点击。
|
||
setShadeDragOffsetX(0);
|
||
setIsShadeDragging(false);
|
||
};
|
||
const onPanelWheel = (e: React.WheelEvent<HTMLDivElement>) => {
|
||
if (!shade.open) return;
|
||
if (shouldBlockShadeGesture(e.target)) return;
|
||
const absX = Math.abs(e.deltaX);
|
||
const absY = Math.abs(e.deltaY);
|
||
if (absX < absY * SHADE_SWITCH_DOMINANCE) return;
|
||
if (e.cancelable) e.preventDefault();
|
||
|
||
const w = wheelSwitchRef.current;
|
||
if (w.kind !== shade.kind) {
|
||
w.dx = 0;
|
||
w.dy = 0;
|
||
w.kind = shade.kind;
|
||
}
|
||
w.dx += e.deltaX;
|
||
w.dy += e.deltaY;
|
||
if (w.timer) window.clearTimeout(w.timer);
|
||
setIsShadeDragging(true);
|
||
setShadeDragOffsetX(getShadeWheelOffset(shade.kind, w.dx, getPanelWidth()));
|
||
w.timer = window.setTimeout(() => {
|
||
const target = getShadeWheelTarget(shade.kind, { deltaX: w.dx, deltaY: w.dy });
|
||
if (target) SystemShadeService.open(target);
|
||
setShadeDragOffsetX(0);
|
||
setIsShadeDragging(false);
|
||
w.dx = 0;
|
||
w.dy = 0;
|
||
w.kind = null;
|
||
w.timer = null;
|
||
}, 180);
|
||
};
|
||
const onPanelClickCapture = (e: React.MouseEvent<HTMLDivElement>) => {
|
||
if (!suppressShadeClickRef.current) return;
|
||
suppressShadeClickRef.current = false;
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
};
|
||
|
||
const onOpenNotification = (it: OSNotification) => {
|
||
if (it.autoCancel !== false) {
|
||
NotificationService.dismiss(it.id);
|
||
} else {
|
||
NotificationService.markRead(it.id, true);
|
||
}
|
||
onClose();
|
||
if (it.pendingIntent) {
|
||
PendingIntent.send(it.pendingIntent);
|
||
return;
|
||
}
|
||
if (!it.appId) return;
|
||
const os = window.__OS__;
|
||
if (it.route && os && typeof os.openApp === 'function') {
|
||
os.openApp(it.appId, it.route);
|
||
return;
|
||
}
|
||
launchApp(it.appId);
|
||
};
|
||
|
||
const kind: ShadePanelKind = shade.kind;
|
||
const open = shade.open;
|
||
const panelWidth = getPanelWidth();
|
||
const activePanelIndex = kind === 'control' ? 1 : 0;
|
||
const panelTrackX = -activePanelIndex * panelWidth + shadeDragOffsetX;
|
||
const shouldAnimatePanelTrack = open && wasShadeOpenRef.current && !isShadeDragging;
|
||
|
||
useEffect(() => {
|
||
wasShadeOpenRef.current = open;
|
||
}, [open]);
|
||
|
||
return (
|
||
<div
|
||
data-no-clipboard="true"
|
||
className={`fixed inset-0 select-none ${open ? 'pointer-events-auto' : 'pointer-events-none'}`}
|
||
style={{ zIndex: zIndexSystemShade }}
|
||
>
|
||
{/* Scrim */}
|
||
<div
|
||
className={`absolute inset-0 transition-opacity ${open ? 'opacity-100' : 'opacity-0'
|
||
}`}
|
||
style={{ backgroundColor: 'rgba(0,0,0,0.15)' }}
|
||
onClick={onClose}
|
||
/>
|
||
|
||
{/* Panel */}
|
||
<div
|
||
ref={panelRef}
|
||
className={`absolute inset-0 touch-none overflow-hidden transition-transform ease-out ${open ? 'translate-y-0' : '-translate-y-full'
|
||
}`}
|
||
style={{ transitionDuration: `${transitionDuration}ms` }}
|
||
onClickCapture={onPanelClickCapture}
|
||
onPointerDown={onPanelPointerDown}
|
||
onPointerMove={onPanelPointerMove}
|
||
onPointerUp={onPanelPointerUp}
|
||
onPointerCancel={onPanelPointerCancel}
|
||
onWheel={onPanelWheel}
|
||
>
|
||
<div className="absolute inset-0 pointer-events-none" style={BackgroundBlur()} />
|
||
<div
|
||
className="relative flex h-full will-change-transform ease-out"
|
||
style={{
|
||
transform: `translate3d(${panelTrackX}px, 0, 0)`,
|
||
transitionProperty: 'transform',
|
||
transitionDuration: shouldAnimatePanelTrack ? `${transitionDuration}ms` : '0ms',
|
||
}}
|
||
>
|
||
<div className="h-full min-w-full">
|
||
<NotificationCenterPanel
|
||
snapshot={notif}
|
||
onClose={onClose}
|
||
onOpenNotification={onOpenNotification}
|
||
withBackground={false}
|
||
/>
|
||
</div>
|
||
<div className="h-full min-w-full">
|
||
<ControlCenterPanel
|
||
qs={qs}
|
||
wifiSsid={wifiSsid}
|
||
brightness={brightness}
|
||
volume={volume}
|
||
onClose={onClose}
|
||
onToggle={(key) => QuickSettingsService.toggle(key)}
|
||
onSetBrightness={setBrightness}
|
||
onSetVolume={setVolume}
|
||
withBackground={false}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SystemShade;
|