fix(island): 重写常驻岛自适应界面与 ClassIsland 动画
This commit is contained in:
LoveChengke committed
1 parent
7f7d3925b2
commit
05848570d1
10 files changed
+1017
-24
No files matched your search
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ embedded?: boolean }>();
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
const props = defineProps<{ embedded?: boolean; suspended?: boolean }>();
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import {
|
||||
DEFAULT_ISLAND_APPEARANCE,
|
||||
ISLAND_SHADOW_PAD,
|
||||
@@ -328,6 +328,14 @@ let morphFallbackTimer: number | null = null;
|
||||
const MORPH_FALLBACK_MS = 1200;
|
||||
|
||||
function syncTargets(snap = false): void {
|
||||
// 常驻岛有独立的 ClassIsland 过渡；旧胶囊不得在隐藏处继续形变、测量或发送命中。
|
||||
if (props.suspended) {
|
||||
if (rafHandle !== null) cancelAnimationFrame(rafHandle);
|
||||
if (morphFallbackTimer !== null) clearTimeout(morphFallbackTimer);
|
||||
rafHandle = null;
|
||||
morphFallbackTimer = null;
|
||||
return;
|
||||
}
|
||||
const size = targetSize();
|
||||
const radius = targetRadius(size);
|
||||
if (snap || !appearance.value.animations) {
|
||||
@@ -573,6 +581,7 @@ function updateInteractive(clientX: number, clientY: number): void {
|
||||
* 注意：关闭命中（穿透）不由这里下发，见 updateInteractive 的说明。
|
||||
*/
|
||||
function refreshInteractive(): void {
|
||||
if (props.suspended) return;
|
||||
const node = document.querySelector('.island-card') as HTMLElement | null;
|
||||
const fullyHidden = state.value?.mode === 'hidden' && !appearance.value.idleSliver;
|
||||
reportHitRect(node && !fullyHidden ? node.getBoundingClientRect() : null);
|
||||
@@ -600,6 +609,10 @@ function applyAppearance(next: IslandAppearance | null | undefined): void {
|
||||
style.setProperty('--island-dur', `${Math.round(320 / Math.max(0.25, next.speed))}ms`);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.suspended,
|
||||
() => syncTargets(true),
|
||||
);
|
||||
onMounted(async () => {
|
||||
window.addEventListener('mousemove', (event) => updateInteractive(event.clientX, event.clientY));
|
||||
/**
|
||||
|
||||
@@ -2,17 +2,23 @@
|
||||
import { nextTick, onMounted, ref, shallowRef } from 'vue';
|
||||
import {
|
||||
defaultIslandLayouts,
|
||||
DEFAULT_ISLAND_APPEARANCE,
|
||||
type IslandAppearance,
|
||||
type IslandLayoutSettings,
|
||||
type IslandState,
|
||||
type ScheduleDto,
|
||||
} from '@classhelper/shared';
|
||||
import FixedIsland from './IslandApp.vue';
|
||||
import CustomIsland from './CustomIsland.vue';
|
||||
import ResidentIsland from './ResidentIsland.vue';
|
||||
const settings = ref(defaultIslandLayouts()),
|
||||
editing = ref(false),
|
||||
ready = ref(false);
|
||||
const schedules = ref<ScheduleDto[]>([]);
|
||||
const appearance = ref<IslandAppearance>({ ...DEFAULT_ISLAND_APPEARANCE });
|
||||
const nativeVisible = ref(false);
|
||||
const alertHost = shallowRef<HTMLElement | null>(null);
|
||||
const resident = () => settings.value.layout === 'custom' && settings.value.residentEnabled && !editing.value;
|
||||
const state = ref<IslandState>({
|
||||
mode: 'hidden',
|
||||
active: null,
|
||||
@@ -38,6 +44,10 @@ onMounted(async () => {
|
||||
bridge.onEditing((value) => (editing.value = value));
|
||||
bridge.onSchedules((value) => (schedules.value = value));
|
||||
bridge.onState((value) => (state.value = value));
|
||||
bridge.onAppearance((value) => (appearance.value = value));
|
||||
bridge.onVisibility((value) => (nativeVisible.value = value));
|
||||
nativeVisible.value = await bridge.getVisible();
|
||||
appearance.value = await bridge.getAppearance();
|
||||
settings.value = await bridge.getLayout();
|
||||
state.value = await bridge.getState();
|
||||
editing.value = await bridge.getEditing();
|
||||
@@ -47,8 +57,16 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<ResidentIsland
|
||||
v-if="resident()"
|
||||
:settings="settings"
|
||||
:state="state"
|
||||
:schedules="schedules"
|
||||
:appearance="appearance"
|
||||
:native-visible="nativeVisible"
|
||||
/>
|
||||
<CustomIsland
|
||||
v-if="settings.layout === 'custom'"
|
||||
v-else-if="settings.layout === 'custom'"
|
||||
:settings="settings"
|
||||
:state="state"
|
||||
:editing="editing"
|
||||
@@ -57,10 +75,15 @@ onMounted(async () => {
|
||||
@done="done"
|
||||
@host="alertHost = $event"
|
||||
/>
|
||||
<Teleport v-if="ready" :disabled="settings.layout === 'fixed' || !alertHost" :to="alertHost || 'body'">
|
||||
<Teleport
|
||||
v-if="ready"
|
||||
:disabled="resident() || settings.layout === 'fixed' || !alertHost"
|
||||
:to="alertHost || 'body'"
|
||||
>
|
||||
<FixedIsland
|
||||
v-show="settings.layout === 'fixed' || !!alertHost"
|
||||
v-show="!resident() && (settings.layout === 'fixed' || !!alertHost)"
|
||||
:embedded="settings.layout === 'custom'"
|
||||
:suspended="resident()"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
@@ -0,0 +1,359 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch, type CSSProperties } from 'vue';
|
||||
import {
|
||||
CLASSISLAND_ISLAND_METRICS as CI,
|
||||
ISLAND_SHADOW_PAD,
|
||||
PRIORITY_LABELS,
|
||||
PRIORITY_RANK,
|
||||
type IslandAppearance,
|
||||
type IslandLayoutSettings,
|
||||
type IslandState,
|
||||
type ScheduleDto,
|
||||
} from '@classhelper/shared';
|
||||
import ComponentNode from './ComponentNode.vue';
|
||||
import ComponentIcon from './ComponentIcon.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
settings: IslandLayoutSettings;
|
||||
state: IslandState;
|
||||
schedules: ScheduleDto[];
|
||||
appearance: IslandAppearance;
|
||||
nativeVisible: boolean;
|
||||
}>();
|
||||
const scheme = computed(() => props.settings.schemes.find((s) => s.id === props.settings.activeSchemeId)!);
|
||||
const expanded = computed(() => props.state.mode === 'expanded');
|
||||
const messages = computed(() => {
|
||||
const unique = new Map(
|
||||
[props.state.active, ...props.state.queued].filter((n) => n !== null).map((n) => [n.id, n]),
|
||||
);
|
||||
return [...unique.values()].sort(
|
||||
(a, b) =>
|
||||
PRIORITY_RANK[a.priority] - PRIORITY_RANK[b.priority] ||
|
||||
Date.parse(b.createdAt) - Date.parse(a.createdAt),
|
||||
);
|
||||
});
|
||||
const shell = ref<HTMLElement>();
|
||||
const compact = ref<HTMLElement>();
|
||||
const details = ref<HTMLElement>();
|
||||
const now = ref(Date.now());
|
||||
const visible = ref(!document.hidden);
|
||||
const motion = computed(() => props.appearance.animations && visible.value && props.nativeVisible);
|
||||
const available = ref({ width: 940, height: 620 });
|
||||
const natural = ref({ compact: { width: 40, height: 40 }, details: { width: 280, height: 80 } });
|
||||
const anchor = computed(() =>
|
||||
props.appearance.position.endsWith('left')
|
||||
? 'left'
|
||||
: props.appearance.position.endsWith('right')
|
||||
? 'right'
|
||||
: 'center',
|
||||
);
|
||||
const capacity = computed(() =>
|
||||
Math.max(1, Math.floor((available.value.height / scheme.value.scale - 130) / 104)),
|
||||
);
|
||||
const visibleMessages = computed(() =>
|
||||
messages.value.slice(0, props.state.listExpanded ? capacity.value : Math.min(3, capacity.value)),
|
||||
);
|
||||
const remaining = computed(() => messages.value.length - visibleMessages.value.length);
|
||||
function fitted(size: { width: number; height: number }) {
|
||||
// 以未变形内容测量；字体、配置缩放、行数和屏幕变化都参与适配，不从动画中的壳反推内容。
|
||||
const scale = Math.min(
|
||||
scheme.value.scale,
|
||||
available.value.width / size.width,
|
||||
available.value.height / size.height,
|
||||
);
|
||||
return { scale, width: Math.ceil(size.width * scale), height: Math.ceil(size.height * scale) };
|
||||
}
|
||||
const compactFit = computed(() => fitted(natural.value.compact));
|
||||
const detailsFit = computed(() => fitted(natural.value.details));
|
||||
const fit = computed(() => (expanded.value ? detailsFit.value : compactFit.value));
|
||||
const style = computed<CSSProperties>(() => ({
|
||||
width: `${fit.value.width}px`,
|
||||
height: `${fit.value.height}px`,
|
||||
color: scheme.value.foreground,
|
||||
'--resident-background': `${scheme.value.color}${Math.round(scheme.value.opacity * 255)
|
||||
.toString(16)
|
||||
.padStart(2, '0')}`,
|
||||
'--resident-radius': `${scheme.value.radius * fit.value.scale}px`,
|
||||
'--resident-scale': fit.value.scale,
|
||||
'--custom-row-gap': `${scheme.value.spacing}px`,
|
||||
'--resident-row-width': `${Math.max(60, available.value.width / scheme.value.scale - 58)}px`,
|
||||
'--secondary': `${CI.secondaryFontSize}px`,
|
||||
'--emphasized': `${CI.emphasizedFontSize}px`,
|
||||
'--large': `${CI.largeFontSize}px`,
|
||||
'--resident-duration': motion.value ? `${550 / props.appearance.speed}ms` : '0ms',
|
||||
'--resident-fade-duration': motion.value ? `${200 / props.appearance.speed}ms` : '0ms',
|
||||
}));
|
||||
function action(value: 'expand' | 'collapse' | 'expand-list' | 'dismiss-all' | 'mark-all-read' | 'open-app') {
|
||||
window.island?.sendAction(value);
|
||||
}
|
||||
function open(event: Event) {
|
||||
if (!expanded.value && !(event.target as HTMLElement).closest('button')) action('expand');
|
||||
}
|
||||
function key(event: KeyboardEvent) {
|
||||
if (event.target === event.currentTarget && ['Enter', ' '].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
action(expanded.value ? 'collapse' : 'expand');
|
||||
}
|
||||
if (event.key === 'Escape') action('collapse');
|
||||
}
|
||||
function pointer(event: PointerEvent) {
|
||||
if (event.pointerType !== 'mouse') window.island?.noteResidentTouch();
|
||||
}
|
||||
let observer: ResizeObserver | undefined;
|
||||
let clock: ReturnType<typeof setInterval>;
|
||||
let hitFrame = 0;
|
||||
let hitUntil = 0;
|
||||
let hitTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
let lastHit = '';
|
||||
function reportHit() {
|
||||
const r = shell.value?.getBoundingClientRect();
|
||||
if (!r) return;
|
||||
const payload = { x: r.x, y: r.y, width: r.width, height: r.height };
|
||||
const key = Object.values(payload).map(Math.round).join(',');
|
||||
if (key !== lastHit) {
|
||||
lastHit = key;
|
||||
window.island?.setHitRect(payload);
|
||||
}
|
||||
const bell = !expanded.value ? shell.value?.querySelector('.resident-bell')?.getBoundingClientRect() : null;
|
||||
window.island?.reportResidentControl(
|
||||
bell ? { x: bell.x, y: bell.y, width: bell.width, height: bell.height } : null,
|
||||
);
|
||||
}
|
||||
function trackHit() {
|
||||
// 几何动画只在合成/渲染层播放；主进程只接收限流命中矩形，绝不据此改窗口大小。
|
||||
if (!motion.value) {
|
||||
reportHit();
|
||||
return;
|
||||
}
|
||||
hitUntil = performance.now() + 600 / props.appearance.speed;
|
||||
clearTimeout(hitTimer);
|
||||
hitTimer = setTimeout(reportHit, 650 / props.appearance.speed);
|
||||
if (hitFrame) return;
|
||||
let last = 0;
|
||||
const frame = (time: number) => {
|
||||
if (time - last >= 60) {
|
||||
reportHit();
|
||||
last = time;
|
||||
}
|
||||
if (time < hitUntil) hitFrame = requestAnimationFrame(frame);
|
||||
else {
|
||||
hitFrame = 0;
|
||||
reportHit();
|
||||
}
|
||||
};
|
||||
hitFrame = requestAnimationFrame(frame);
|
||||
}
|
||||
let measuring = false;
|
||||
function measure() {
|
||||
if (measuring) return;
|
||||
measuring = true;
|
||||
void nextTick(() => {
|
||||
measuring = false;
|
||||
if (!compact.value || !details.value) return;
|
||||
const read = (element: HTMLElement) => ({
|
||||
width: Math.max(40, element.offsetWidth),
|
||||
height: Math.max(40, element.offsetHeight),
|
||||
});
|
||||
natural.value = { compact: read(compact.value), details: read(details.value) };
|
||||
void nextTick(() => {
|
||||
window.island?.reportSize({ width: fit.value.width, height: fit.value.height });
|
||||
trackHit();
|
||||
});
|
||||
});
|
||||
}
|
||||
function resize() {
|
||||
available.value = {
|
||||
width: Math.max(40, innerWidth - 2 * ISLAND_SHADOW_PAD - 4),
|
||||
height: Math.max(40, innerHeight - 2 * ISLAND_SHADOW_PAD - 4),
|
||||
};
|
||||
measure();
|
||||
}
|
||||
function visibility() {
|
||||
visible.value = !document.hidden;
|
||||
void nextTick(reportHit);
|
||||
}
|
||||
// 不深度监听整份状态；只在目标内容/几何变化时测量，时钟每秒只改文本。
|
||||
watch([expanded, scheme, () => props.state.listExpanded, messages], measure, { deep: true, flush: 'post' });
|
||||
watch(fit, trackHit, { flush: 'post' });
|
||||
watch(
|
||||
() => props.appearance.position,
|
||||
() => void nextTick(trackHit),
|
||||
);
|
||||
onMounted(() => {
|
||||
resize();
|
||||
observer = new ResizeObserver(measure);
|
||||
if (compact.value) observer.observe(compact.value);
|
||||
if (details.value) observer.observe(details.value);
|
||||
clock = setInterval(() => (now.value = Date.now()), 1000);
|
||||
window.addEventListener('resize', resize);
|
||||
document.addEventListener('visibilitychange', visibility);
|
||||
void document.fonts.ready.then(measure);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
observer?.disconnect();
|
||||
clearInterval(clock);
|
||||
clearTimeout(hitTimer);
|
||||
cancelAnimationFrame(hitFrame);
|
||||
window.removeEventListener('resize', resize);
|
||||
document.removeEventListener('visibilitychange', visibility);
|
||||
window.island?.reportResidentControl(null);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="resident-window"
|
||||
:data-anchor="anchor"
|
||||
:data-bottom="appearance.position.startsWith('bottom')"
|
||||
@pointerdown.capture="pointer"
|
||||
>
|
||||
<section
|
||||
ref="shell"
|
||||
class="custom-card resident-card"
|
||||
:class="{ 'resident-open': expanded, 'resident-separated': scheme.separated && !expanded }"
|
||||
:style="style"
|
||||
:role="expanded ? 'region' : 'button'"
|
||||
tabindex="0"
|
||||
:aria-label="
|
||||
expanded ? '常驻岛内容' : messages.length ? `查看 ${messages.length} 条通知` : '展开常驻岛'
|
||||
"
|
||||
:aria-expanded="expanded"
|
||||
@click="open"
|
||||
@keydown="key"
|
||||
@transitionend.self="reportHit"
|
||||
>
|
||||
<div
|
||||
class="resident-page resident-compact-page"
|
||||
:style="{ '--resident-scale': compactFit.scale }"
|
||||
:class="{ 'page-active': !expanded }"
|
||||
:inert="expanded"
|
||||
:aria-hidden="expanded"
|
||||
>
|
||||
<div ref="compact" class="resident-source resident-compact">
|
||||
<div class="layout-rows" :style="{ gap: `${scheme.spacing}px` }">
|
||||
<section
|
||||
v-for="row in scheme.rows"
|
||||
:key="row.id"
|
||||
class="layout-row"
|
||||
:data-row="row.id"
|
||||
:style="{ '--row-gap': `${row.gap}px` }"
|
||||
>
|
||||
<div class="row-components">
|
||||
<ComponentNode
|
||||
v-for="node in row.nodes"
|
||||
:key="node.id"
|
||||
:node="node"
|
||||
:state="state"
|
||||
:now="now"
|
||||
:schedules="schedules"
|
||||
:editing="false"
|
||||
selected-id=""
|
||||
alert-node-id=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<button
|
||||
class="resident-bell"
|
||||
:class="{ 'bell-empty': !messages.length }"
|
||||
:aria-label="messages.length ? `查看 ${messages.length} 条通知` : '展开常驻岛'"
|
||||
@click.stop="action('expand')"
|
||||
>
|
||||
<ComponentIcon v-if="messages.length" kind="notification" />
|
||||
<svg
|
||||
v-else
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.6"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m8 10 4 4 4-4" />
|
||||
</svg>
|
||||
<span v-if="messages.length" :key="messages.length">
|
||||
{{ messages.length > 99 ? '99+' : messages.length }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="resident-page resident-detail-page"
|
||||
:style="{ '--resident-scale': detailsFit.scale }"
|
||||
:class="{ 'page-active': expanded }"
|
||||
:inert="!expanded"
|
||||
:aria-hidden="!expanded"
|
||||
>
|
||||
<div
|
||||
ref="details"
|
||||
class="resident-source resident-details"
|
||||
:class="{ 'with-messages': messages.length }"
|
||||
:style="
|
||||
messages.length ? { width: `${Math.min(440, available.width / scheme.scale)}px` } : undefined
|
||||
"
|
||||
>
|
||||
<header class="resident-panel-heading">
|
||||
<span>{{ messages.length ? `通知 · ${messages.length}` : '常驻岛' }}</span>
|
||||
<button class="icon-btn" aria-label="收起常驻岛" @click.stop="action('collapse')">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="m8 14 4-4 4 4" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div v-if="messages.length" id="custom-alert-host" class="resident-messages">
|
||||
<article
|
||||
v-for="item in visibleMessages"
|
||||
:key="item.id"
|
||||
class="list-row"
|
||||
:data-priority="item.priority"
|
||||
>
|
||||
<div class="resident-message-title">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<span>{{ PRIORITY_LABELS[item.priority] }}</span>
|
||||
</div>
|
||||
<p>{{ item.content }}</p>
|
||||
<small>{{ [item.teacherName, item.courseName].filter(Boolean).join(' · ') }}</small>
|
||||
</article>
|
||||
<button
|
||||
v-if="remaining"
|
||||
class="resident-more"
|
||||
@click.stop="action(state.listExpanded ? 'open-app' : 'expand-list')"
|
||||
>
|
||||
{{
|
||||
state.listExpanded ? `其余 ${remaining} 条在应用中查看` : `展开更多（还有 ${remaining} 条）`
|
||||
}}
|
||||
</button>
|
||||
<footer class="resident-actions">
|
||||
<button @click.stop="action('open-app')">查看完整内容</button>
|
||||
<button @click.stop="action('mark-all-read')">标为已读</button>
|
||||
<button class="solid-btn" @click.stop="action('dismiss-all')">知道了</button>
|
||||
</footer>
|
||||
</div>
|
||||
<div v-else class="layout-rows resident-expanded-rows" :style="{ gap: `${scheme.spacing}px` }">
|
||||
<section
|
||||
v-for="row in scheme.expandedRows"
|
||||
:key="row.id"
|
||||
class="layout-row"
|
||||
:data-row="row.id"
|
||||
:style="{ '--row-gap': `${row.gap}px` }"
|
||||
>
|
||||
<div class="row-components">
|
||||
<ComponentNode
|
||||
v-for="node in row.nodes"
|
||||
:key="node.id"
|
||||
:node="node"
|
||||
:state="state"
|
||||
:now="now"
|
||||
:schedules="schedules"
|
||||
:editing="false"
|
||||
selected-id=""
|
||||
alert-node-id=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style src="./resident-island.css"></style>
|
||||
@@ -6,7 +6,7 @@
|
||||
.custom-card {
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
background: var(--custom-color);
|
||||
border-radius: var(--custom-radius);
|
||||
box-shadow:
|
||||
|
||||
@@ -0,0 +1,304 @@
|
||||
/* ClassIsland ClassicTheme: 40px 行高、12px 内边距、550ms 背景、200ms 内容淡入。 */
|
||||
.resident-window {
|
||||
position: fixed;
|
||||
inset: 10px;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
.resident-window .resident-card {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
isolation: isolate;
|
||||
pointer-events: auto;
|
||||
background: var(--resident-background);
|
||||
border-radius: var(--resident-radius);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
box-shadow: 0 2px 3px #0000001c;
|
||||
transition:
|
||||
width var(--resident-duration) cubic-bezier(0, 1, 0.5, 1.1),
|
||||
height var(--resident-duration) cubic-bezier(0, 1, 0.5, 1.1),
|
||||
border-radius var(--resident-fade-duration) ease;
|
||||
}
|
||||
.resident-window[data-anchor='left'] .resident-card {
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
.resident-window[data-anchor='right'] .resident-card {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: none;
|
||||
}
|
||||
.resident-window[data-bottom='true'] .resident-card {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.resident-card .resident-page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: max-content;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
transition:
|
||||
opacity var(--resident-fade-duration) cubic-bezier(0.47, 0, 0.745, 0.715),
|
||||
visibility 0s var(--resident-fade-duration);
|
||||
}
|
||||
.resident-card .resident-page.page-active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.resident-card .resident-source {
|
||||
width: max-content;
|
||||
transform: scale(var(--resident-scale));
|
||||
transform-origin: center top;
|
||||
}
|
||||
.resident-window[data-anchor='left'] .resident-page {
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
.resident-window[data-anchor='left'] .resident-source {
|
||||
transform-origin: left top;
|
||||
}
|
||||
.resident-window[data-anchor='right'] .resident-page {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: none;
|
||||
}
|
||||
.resident-window[data-anchor='right'] .resident-source {
|
||||
transform-origin: right top;
|
||||
}
|
||||
.resident-card .resident-compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.resident-window .resident-card.resident-separated {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.resident-separated .resident-compact {
|
||||
padding: 0;
|
||||
}
|
||||
.resident-separated .resident-compact .layout-rows {
|
||||
align-items: center;
|
||||
}
|
||||
.resident-separated .resident-compact .layout-row {
|
||||
padding: 0 12px;
|
||||
background: var(--resident-background);
|
||||
border-radius: var(--resident-radius);
|
||||
}
|
||||
.resident-separated .resident-compact .resident-bell {
|
||||
background: var(--resident-background);
|
||||
}
|
||||
.resident-card .layout-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.resident-card .row-components {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
min-height: 40px;
|
||||
}
|
||||
.resident-card .resident-compact .component-node:not(.container) {
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 calc(var(--row-gap, 12px) / 2);
|
||||
}
|
||||
.resident-card .resident-compact .component-node.container {
|
||||
padding: 0;
|
||||
}
|
||||
.resident-card .resident-compact .component-node.text {
|
||||
max-width: min(320px, max(80px, calc(var(--resident-row-width) - 112px)));
|
||||
}
|
||||
.resident-card .resident-compact .text > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.resident-card .resident-compact .schedule {
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.resident-card .resident-compact .schedule > div + div {
|
||||
margin-top: 0;
|
||||
}
|
||||
.resident-card .separator > span {
|
||||
height: 20px;
|
||||
}
|
||||
.resident-card .resident-bell {
|
||||
align-self: center;
|
||||
color: inherit;
|
||||
}
|
||||
.resident-card .resident-bell.bell-empty {
|
||||
color: #ffffff80;
|
||||
}
|
||||
.resident-card .resident-bell span {
|
||||
animation: resident-indicator-in 250ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
.resident-card .resident-details {
|
||||
min-width: 160px;
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
.resident-card .resident-panel-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
height: 40px;
|
||||
padding: 0 6px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
color: #ffffff94;
|
||||
font-size: 12px;
|
||||
}
|
||||
.resident-card .resident-panel-heading .icon-btn {
|
||||
min-height: 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 4px;
|
||||
}
|
||||
.resident-card .icon-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
}
|
||||
.resident-card .resident-expanded-rows {
|
||||
border-top: 1px solid #ffffff1a;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.resident-card .resident-expanded-rows .row-components {
|
||||
gap: var(--row-gap, 12px);
|
||||
}
|
||||
.resident-card #custom-alert-host {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.resident-card .resident-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.resident-card .list-row {
|
||||
display: block;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid #ffffff18;
|
||||
border-radius: 6px;
|
||||
background: #ffffff08;
|
||||
}
|
||||
.resident-card .resident-message-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.resident-card .resident-message-title strong {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.resident-card .resident-message-title > span {
|
||||
flex: none;
|
||||
color: #ffffff80;
|
||||
font-size: 11px;
|
||||
}
|
||||
.resident-card .list-row[data-priority='URGENT'] .resident-message-title > span {
|
||||
color: #ff9c94;
|
||||
}
|
||||
.resident-card .list-row p {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
margin: 6px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.resident-card .list-row:only-of-type p {
|
||||
-webkit-line-clamp: 5;
|
||||
}
|
||||
.resident-card .list-row small {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
color: #ffffff80;
|
||||
}
|
||||
.resident-card .resident-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.resident-card .resident-actions button:first-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
.resident-card .resident-actions button,
|
||||
.resident-card .resident-more {
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
background: #ffffff0d;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.resident-card .resident-actions .solid-btn {
|
||||
background: #ffffffdd;
|
||||
color: #202124;
|
||||
}
|
||||
.resident-card button:focus-visible {
|
||||
outline: 2px solid #adc4ff;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.resident-card button:hover {
|
||||
filter: brightness(1.18);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.resident-window .resident-card,
|
||||
.resident-card .resident-page {
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
.resident-card .resident-bell span {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@keyframes resident-indicator-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -208,7 +208,50 @@ class IslandController {
|
||||
private residentWasEnabled = false;
|
||||
private residentFaded = false;
|
||||
private residentTouchUntil = 0;
|
||||
private residentMotionUntil = 0;
|
||||
private residentControl: { x: number; y: number; width: number; height: number } | null = null;
|
||||
private residentShapeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
private residentShaped = false;
|
||||
/** 触摸屏的透明画布不应吞掉桌面：动画时放开绘制区，停稳后只保留岛体及投影区域。 */
|
||||
private syncResidentShape(transition = false): void {
|
||||
if (!this.win || this.win.isDestroyed() || process.platform !== 'win32') return;
|
||||
if (this.residentShapeTimer) clearTimeout(this.residentShapeTimer);
|
||||
this.residentShapeTimer = null;
|
||||
if (!this.residentEnabled || !this.touchMode || this.editingLayout) {
|
||||
if (this.residentShaped) this.win.setShape([]);
|
||||
this.residentShaped = false;
|
||||
return;
|
||||
}
|
||||
this.residentShaped = true;
|
||||
const apply = () => {
|
||||
this.residentShapeTimer = null;
|
||||
const r = this.hitRect;
|
||||
if (
|
||||
!r ||
|
||||
!this.win ||
|
||||
this.win.isDestroyed() ||
|
||||
!this.residentEnabled ||
|
||||
!this.touchMode ||
|
||||
this.editingLayout
|
||||
)
|
||||
return;
|
||||
this.win.setShape([
|
||||
{
|
||||
x: Math.max(0, Math.floor(r.x - 8)),
|
||||
y: Math.max(0, Math.floor(r.y - 8)),
|
||||
width: Math.ceil(r.width + 16),
|
||||
height: Math.ceil(r.height + 16),
|
||||
},
|
||||
]);
|
||||
};
|
||||
if (transition) {
|
||||
this.win.setShape([]);
|
||||
this.residentShapeTimer = setTimeout(
|
||||
apply,
|
||||
this.appearance.animations ? 750 / this.appearance.speed : 50,
|
||||
);
|
||||
} else apply();
|
||||
}
|
||||
getEditingLayout(): boolean {
|
||||
return this.editingLayout;
|
||||
}
|
||||
@@ -227,9 +270,10 @@ class IslandController {
|
||||
this.emit();
|
||||
}
|
||||
this.win?.webContents.send('island:layout', getConfig().islandLayout);
|
||||
this.syncResidentShape(true);
|
||||
this.syncWindow();
|
||||
}
|
||||
/** 常驻岛的离散收起：先隐藏，等两端内容尺寸防抖完成后以常态尺寸重新显示。 */
|
||||
/** 仅用于首次切换布局、启动与退出编辑；日常常驻岛开合保持窗口可见。 */
|
||||
private settleCustomLayout(): void {
|
||||
if (this.layoutSettleTimer) clearTimeout(this.layoutSettleTimer);
|
||||
this.settlingLayout = true;
|
||||
@@ -246,6 +290,7 @@ class IslandController {
|
||||
this.layoutSettleTimer = null;
|
||||
this.settlingLayout = false;
|
||||
this.editingLayout = enabled;
|
||||
this.syncResidentShape();
|
||||
if (enabled) saveConfig({ islandLayout: { ...getConfig().islandLayout, layout: 'custom' } });
|
||||
this.win?.webContents.send('island:layout', getConfig().islandLayout);
|
||||
this.win?.webContents.send('island:editing', enabled);
|
||||
@@ -277,13 +322,34 @@ class IslandController {
|
||||
}
|
||||
}
|
||||
reportCustomSize(value: { width: number; height: number }): void {
|
||||
if (!this.customLayout || !Number.isFinite(value?.width) || !Number.isFinite(value?.height)) return;
|
||||
if (
|
||||
!this.customLayout ||
|
||||
!Number.isFinite(value?.width) ||
|
||||
!Number.isFinite(value?.height) ||
|
||||
value.width <= 0 ||
|
||||
value.height <= 0
|
||||
)
|
||||
return;
|
||||
this.customDesiredSize = { ...value };
|
||||
if (this.editingLayout) return;
|
||||
if (this.residentEnabled) {
|
||||
if (this.customTimer) clearTimeout(this.customTimer);
|
||||
this.customTimer = null;
|
||||
// 常驻岛只报告目标几何；窗口画布固定，禁止逐帧 setBounds 和两端尺寸防抖互相追赶。
|
||||
if (
|
||||
this.customSize.width !== Math.ceil(value.width) ||
|
||||
this.customSize.height !== Math.ceil(value.height)
|
||||
)
|
||||
this.residentMotionUntil =
|
||||
Date.now() + (this.appearance.animations ? 600 / this.appearance.speed : 0);
|
||||
this.customSize = { width: Math.ceil(value.width), height: Math.ceil(value.height) };
|
||||
this.syncResidentShape(true);
|
||||
return;
|
||||
}
|
||||
if (this.customTimer) clearTimeout(this.customTimer);
|
||||
this.customTimer = setTimeout(() => {
|
||||
this.customTimer = null;
|
||||
if (!this.win || !this.customLayout || this.editingLayout) return;
|
||||
if (!this.win || !this.customLayout || this.editingLayout || this.residentEnabled) return;
|
||||
const area = screen.getDisplayNearestPoint(this.win.getBounds()).workArea;
|
||||
const current = this.win.getBounds();
|
||||
const width = Math.max(40, Math.min(Math.ceil(value.width), area.width - 2 * ISLAND_SHADOW_PAD));
|
||||
@@ -425,6 +491,12 @@ class IslandController {
|
||||
// 默认整块窗口不接收鼠标（避免大面积透明窗口吞掉桌面点击），
|
||||
// 只有指针进入"岛"的可见区域时，渲染进程才通过 island:set-interactive 打开命中。
|
||||
win.setIgnoreMouseEvents(true, { forward: true });
|
||||
const notifyVisibility = (visible: boolean) => {
|
||||
if (this.win === win && this.ready && !this.recovering && !win.webContents.isDestroyed())
|
||||
win.webContents.send('island:visibility', visible);
|
||||
};
|
||||
win.on('show', () => notifyVisibility(true));
|
||||
win.on('hide', () => notifyVisibility(false));
|
||||
// 光标命中兜底轮询：即使 forward 的 mousemove 丢失，也能按光标位置自行校正命中
|
||||
this.startHitPoll();
|
||||
win.on('closed', () => {
|
||||
@@ -1047,6 +1119,8 @@ class IslandController {
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
if (this.residentShapeTimer) clearTimeout(this.residentShapeTimer);
|
||||
this.residentShapeTimer = null;
|
||||
this.clearTimers();
|
||||
if (this.layoutSettleTimer) clearTimeout(this.layoutSettleTimer);
|
||||
this.layoutSettleTimer = null;
|
||||
@@ -1231,9 +1305,14 @@ class IslandController {
|
||||
|
||||
/** 状态变更：先通知渲染进程，再驱动窗口尺寸/透明度动画 */
|
||||
private setState(patch: Partial<IslandState>, options: { skipWindow?: boolean } = {}): void {
|
||||
if (this.residentEnabled && this.state.mode === 'expanded' && patch.mode && patch.mode !== 'expanded')
|
||||
this.settleCustomLayout();
|
||||
if (
|
||||
this.residentEnabled &&
|
||||
patch.mode &&
|
||||
(patch.mode === 'expanded') !== (this.state.mode === 'expanded')
|
||||
)
|
||||
this.residentMotionUntil = Date.now() + (this.appearance.animations ? 600 / this.appearance.speed : 0);
|
||||
this.state = { ...this.state, ...patch, updatedAt: Date.now() };
|
||||
if (this.residentEnabled) this.syncResidentShape(true);
|
||||
// 离开展开态就把"展开更多"复位：下次再点开时默认回到"只显示前三条"
|
||||
if (this.state.mode !== 'expanded') this.state.listExpanded = false;
|
||||
// 列表形态比普通展开卡高：窗口要**先**长高，卡片才开始形变，否则底部会被窗口裁掉
|
||||
@@ -1281,7 +1360,8 @@ class IslandController {
|
||||
!(process.env.ELECTRON_SMOKE_TEST === '1' && process.env.ELECTRON_SMOKE_MODE !== 'visual')
|
||||
)
|
||||
this.win.showInactive();
|
||||
this.setInteractive(true, '自定义组件栏');
|
||||
if (this.residentEnabled) this.syncHitFromCursor();
|
||||
else this.setInteractive(true, '自定义组件栏');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1344,6 +1424,14 @@ class IslandController {
|
||||
* - 触摸模式：贴合当前形态（岛体 + 2×阴影留白），否则大包围盒的透明区会吞掉桌面的触摸。
|
||||
*/
|
||||
private windowBox(): { width: number; height: number } {
|
||||
if (this.residentEnabled && this.win) {
|
||||
const area = this.targetDisplay().workArea;
|
||||
// 与 ClassIsland 一样，让背景/内容在固定画布内过渡。预留一帧绘制边界，避免过冲裁切。
|
||||
return {
|
||||
width: Math.min(960, area.width),
|
||||
height: Math.min(640, Math.max(60, area.height - this.appearance.marginY)),
|
||||
};
|
||||
}
|
||||
if (this.customLayout)
|
||||
return {
|
||||
width: this.customSize.width + 2 * ISLAND_SHADOW_PAD,
|
||||
@@ -1612,7 +1700,7 @@ class IslandController {
|
||||
const next =
|
||||
passthrough || this.residentFaded
|
||||
? false
|
||||
: this.touchMode || this.editingLayout || this.customLayout
|
||||
: this.touchMode || this.editingLayout || (this.customLayout && !this.residentEnabled)
|
||||
? true
|
||||
: interactive;
|
||||
if (this.interactive === next) return;
|
||||
@@ -1676,6 +1764,7 @@ class IslandController {
|
||||
settings.pointerFadeEnabled &&
|
||||
!this.editingLayout &&
|
||||
Date.now() >= this.residentTouchUntil &&
|
||||
Date.now() >= this.residentMotionUntil &&
|
||||
this.state.mode !== 'expanded' &&
|
||||
this.isInsideHitRect(point) !== settings.pointerFadeReversed &&
|
||||
!overControl;
|
||||
@@ -1699,6 +1788,7 @@ class IslandController {
|
||||
setTouchMode(enabled: boolean): void {
|
||||
if (this.touchMode === enabled) return;
|
||||
this.touchMode = enabled;
|
||||
this.syncResidentShape();
|
||||
logger.info(
|
||||
`灵动岛：触摸模式=${enabled}（窗口${enabled ? '贴合岛体并始终接收输入' : '回到固定包围盒穿透'}）`,
|
||||
);
|
||||
@@ -2141,6 +2231,10 @@ export function registerIslandIpc(): void {
|
||||
});
|
||||
ipcMain.handle('island:edit-layout', () => island.editLayout());
|
||||
ipcMain.handle('island:get-editing', () => island.getEditingLayout());
|
||||
ipcMain.handle(
|
||||
'island:get-visible',
|
||||
(event) => event.sender === island.getWindow()?.webContents && (island.getWindow()?.isVisible() ?? false),
|
||||
);
|
||||
ipcMain.on('island:resident-control', (event, value) => {
|
||||
if (event.sender === island.getWindow()?.webContents) island.setResidentControl(value);
|
||||
});
|
||||
|
||||
@@ -15,15 +15,33 @@ export async function verifyResidentSmoke(
|
||||
) {
|
||||
const win = island.getWindow()!;
|
||||
const originalTouchMode = island.getTouchMode();
|
||||
const originalAppearance = island.getAppearance();
|
||||
island.setAppearance({ animations: true, speed: 1 });
|
||||
island.setTouchMode(false);
|
||||
island.setHitTestCursor({ x: 0, y: 0 });
|
||||
const pause = (ms = 600) => new Promise<void>((resolve) => setTimeout(resolve, ms));
|
||||
async function shot(name: string) {
|
||||
if (!process.env.ISLAND_SHOTS_DIR) return;
|
||||
if (!process.env.ISLAND_SHOTS_DIR || process.env.ELECTRON_SMOKE_MODE !== 'visual') return;
|
||||
fs.mkdirSync(process.env.ISLAND_SHOTS_DIR, { recursive: true });
|
||||
fs.writeFileSync(
|
||||
path.join(process.env.ISLAND_SHOTS_DIR, `${name}.png`),
|
||||
(await win.webContents.capturePage()).toPNG(),
|
||||
(
|
||||
await win.webContents.capturePage(
|
||||
island.getEditingLayout()
|
||||
? undefined
|
||||
: (() => {
|
||||
const r = island.getHitRect();
|
||||
return r
|
||||
? {
|
||||
x: Math.max(0, Math.floor(r.x - 8)),
|
||||
y: Math.max(0, Math.floor(r.y - 8)),
|
||||
width: Math.ceil(r.width + 16),
|
||||
height: Math.ceil(r.height + 16),
|
||||
}
|
||||
: undefined;
|
||||
})(),
|
||||
)
|
||||
).toPNG(),
|
||||
);
|
||||
}
|
||||
const fixture = defaultIslandLayouts();
|
||||
@@ -140,7 +158,7 @@ export async function verifyResidentSmoke(
|
||||
island.getState().mode === 'expanded' &&
|
||||
!island.getState().active &&
|
||||
(await win.webContents.executeJavaScript(
|
||||
`(() => {const card=document.querySelector('.custom-card');return Boolean(card?.querySelector('.resident-panel-heading')&&card.textContent.includes('今日安排')&&!card.textContent.includes('常驻概览'));})()`,
|
||||
`(() => {const page=document.querySelector('.resident-detail-page.page-active');return Boolean(page?.querySelector('.resident-panel-heading')&&page.textContent.includes('今日安排')&&document.querySelector('.resident-compact-page[inert]'));})()`,
|
||||
))
|
||||
);
|
||||
});
|
||||
@@ -188,20 +206,20 @@ export async function verifyResidentSmoke(
|
||||
))
|
||||
);
|
||||
});
|
||||
await check('点击铃铛展开原通知列表，上课时也可主动查看', async () => {
|
||||
await check('点击铃铛展开通知列表，上课时也可主动查看', async () => {
|
||||
await win.webContents.executeJavaScript(`document.querySelector('.resident-bell')?.click()`);
|
||||
await pause(1800);
|
||||
return (
|
||||
island.getState().mode === 'expanded' &&
|
||||
(await win.webContents.executeJavaScript(
|
||||
`(() => {const host=document.querySelector('#custom-alert-host');return Boolean(host&&host.getBoundingClientRect().height>0&&host.querySelectorAll('.list-row').length===2&&host.textContent.includes('常驻通知一')&&host.textContent.includes('常驻通知二')&&!document.querySelector('.resident-panel-heading'));})()`,
|
||||
`(() => {const host=document.querySelector('#custom-alert-host');return Boolean(host&&host.getBoundingClientRect().height>0&&host.querySelectorAll('.list-row').length===2&&host.textContent.includes('常驻通知一')&&host.textContent.includes('常驻通知二')&&!host.querySelector('.island-root'));})()`,
|
||||
))
|
||||
);
|
||||
});
|
||||
await shot('resident-notifications');
|
||||
await check('收起通知保留铃铛，键盘可重新展开', async () => {
|
||||
await win.webContents.executeJavaScript(
|
||||
`document.querySelector('#custom-alert-host .icon-btn')?.click()`,
|
||||
`document.querySelector('.resident-panel-heading .icon-btn')?.click()`,
|
||||
);
|
||||
await pause(800);
|
||||
const collapsed = island.getState().mode === 'pill';
|
||||
@@ -211,7 +229,7 @@ export async function verifyResidentSmoke(
|
||||
await pause();
|
||||
return collapsed && island.getState().mode === 'expanded';
|
||||
});
|
||||
await check('处理完通知清除铃铛，恢复常驻内容与窗口留白', async () => {
|
||||
await check('处理完通知清除铃铛，恢复40px常驻内容且命中不占整窗', async () => {
|
||||
await win.webContents.executeJavaScript(
|
||||
`document.querySelector('#custom-alert-host .solid-btn')?.click()`,
|
||||
);
|
||||
@@ -225,8 +243,9 @@ export async function verifyResidentSmoke(
|
||||
island.getState().queued.length === 0 &&
|
||||
dimensions.empty === true &&
|
||||
dimensions.content &&
|
||||
Math.abs(box.width - dimensions.width - 2 * ISLAND_SHADOW_PAD) <= 2 &&
|
||||
Math.abs(box.height - dimensions.height - 2 * ISLAND_SHADOW_PAD) <= 2
|
||||
dimensions.width + 2 * ISLAND_SHADOW_PAD <= box.width &&
|
||||
Math.abs(dimensions.height - 40) <= 1 &&
|
||||
Math.abs((island.getHitRect()?.height ?? 0) - dimensions.height) <= 2
|
||||
);
|
||||
});
|
||||
await check('空闲展开时收到消息返回铃铛提示', async () => {
|
||||
@@ -239,6 +258,150 @@ export async function verifyResidentSmoke(
|
||||
await pause();
|
||||
return collapsed;
|
||||
});
|
||||
await check('常驻岛开合复用固定画布，动画中没有滚动容器或旧胶囊形变', async () => {
|
||||
const bounds = new Set<string>();
|
||||
const timer = setInterval(() => bounds.add(JSON.stringify(win.getBounds())), 20);
|
||||
let result;
|
||||
try {
|
||||
result = await win.webContents.executeJavaScript(`new Promise(resolve => {
|
||||
const frames=[], gaps=[]; let last=performance.now(), count=0;
|
||||
const sample=()=>{
|
||||
const card=document.querySelector('.resident-card'), r=card?.getBoundingClientRect();
|
||||
if(!r){frames.push(false);return;}
|
||||
const nodes=[card,...card.querySelectorAll('*')];
|
||||
frames.push(r.left>=0&&r.top>=0&&r.right<=innerWidth+1&&r.bottom<=innerHeight+1&&nodes.every(n=>!['auto','scroll'].includes(getComputedStyle(n).overflowY)&&!['auto','scroll'].includes(getComputedStyle(n).overflowX)));
|
||||
};
|
||||
const animate=time=>{gaps.push(time-last);last=time;count++;sample();if(time-start<1800)requestAnimationFrame(animate);};
|
||||
const start=performance.now();requestAnimationFrame(animate);
|
||||
window.island.sendAction('expand');setTimeout(()=>window.island.sendAction('collapse'),700);
|
||||
setTimeout(()=>{sample(); const card=document.querySelector('.resident-card');resolve({valid:frames.every(Boolean),count,gaps:gaps.filter(g=>g>0).sort((a,b)=>a-b),height:card.getBoundingClientRect().height,legacy:document.querySelector('.island-root')?.getBoundingClientRect().height===0});},1900);
|
||||
})`);
|
||||
} finally {
|
||||
clearInterval(timer);
|
||||
}
|
||||
if (process.env.ISLAND_SHOTS_DIR)
|
||||
fs.writeFileSync(
|
||||
path.join(
|
||||
process.env.ISLAND_SHOTS_DIR,
|
||||
`resident-animation-metrics-${process.env.ELECTRON_SMOKE_MODE}.json`,
|
||||
),
|
||||
JSON.stringify({ ...result, windowRects: bounds.size }, null, 2),
|
||||
);
|
||||
const visual = process.env.ELECTRON_SMOKE_MODE === 'visual';
|
||||
return Boolean(
|
||||
result?.valid &&
|
||||
result.legacy &&
|
||||
Math.abs(result.height - 40) <= 1 &&
|
||||
bounds.size === 1 &&
|
||||
(!visual || (result.count >= 20 && result.gaps[Math.floor(result.gaps.length * 0.95)] < 100)),
|
||||
);
|
||||
});
|
||||
await check('常驻岛连续快速开合后恢复40px且没有遗留过渡', async () => {
|
||||
const box = win.getBounds();
|
||||
const stable = await win.webContents.executeJavaScript(`new Promise(resolve=>{
|
||||
for(let i=0;i<8;i++)setTimeout(()=>window.island.sendAction(i%2?'collapse':'expand'),i*70);
|
||||
setTimeout(()=>{const r=document.querySelector('.resident-card').getBoundingClientRect();resolve({width:r.width,height:r.height,active:document.querySelector('.resident-compact-page').classList.contains('page-active')});},1300);
|
||||
})`);
|
||||
return Boolean(
|
||||
stable.active &&
|
||||
Math.abs(stable.height - 40) <= 1 &&
|
||||
Math.abs(stable.width - compactWidth) <= 2 &&
|
||||
JSON.stringify(box) === JSON.stringify(win.getBounds()),
|
||||
);
|
||||
});
|
||||
await check('收起时鼠标留在旧展开区域不会错误触发5%淡化闪烁', async () => {
|
||||
island.handleAction({ action: 'expand' });
|
||||
await pause(800);
|
||||
const hit = island.getHitRect()!,
|
||||
box = win.getBounds(),
|
||||
opacity = win.getOpacity();
|
||||
island.setHitTestCursor({ x: box.x + hit.x + hit.width / 2, y: box.y + hit.y + hit.height - 12 });
|
||||
island.handleAction({ action: 'collapse' });
|
||||
const immediate = win.getOpacity();
|
||||
await pause(120);
|
||||
const after = win.getOpacity();
|
||||
island.setHitTestCursor({ x: 0, y: 0 });
|
||||
await pause(700);
|
||||
return Math.abs(immediate - opacity) < 0.01 && Math.abs(after - opacity) < 0.01;
|
||||
});
|
||||
await check('长文本多行与2.5倍字号自动适配，变窄窗口和底部右侧停靠均不溢出', async () => {
|
||||
const appearance = island.getAppearance();
|
||||
const dense = JSON.parse(JSON.stringify(fixture));
|
||||
dense.schemes[0].scale = 2.5;
|
||||
dense.schemes[0].separated = true;
|
||||
dense.schemes[0].rows[0].nodes[2].settings.text = '自适应常驻内容'.repeat(18);
|
||||
dense.schemes[0].rows.push({ ...dense.schemes[0].rows[0], id: 'resident-dense-row' });
|
||||
saveConfig({ islandLayout: dense });
|
||||
island.syncCustomLayout();
|
||||
island.setAppearance({ position: 'bottom-right' });
|
||||
await pause(800);
|
||||
// 模拟更小的工作区画布，检查响应的是 resize，而不是上一次固定像素尺寸。
|
||||
const box = win.getBounds();
|
||||
win.setBounds({ ...box, width: 360, height: 260 });
|
||||
await pause(800);
|
||||
const geometry = await win.webContents.executeJavaScript(`(() => {
|
||||
const card=document.querySelector('.resident-card'), page=card.querySelector('.page-active'), source=page.querySelector('.resident-source');
|
||||
const r=card.getBoundingClientRect(), c=source.getBoundingClientRect();
|
||||
return {r:r.toJSON(), c:c.toJSON(), width:innerWidth,height:innerHeight, fits:r.width<=340&&r.height<=240&&r.right<=innerWidth&&r.bottom<=innerHeight&&c.left>=r.left-1&&c.right<=r.right+1&&c.bottom<=r.bottom+1&&getComputedStyle(card).overflowY!=='auto'&&card.classList.contains('resident-separated')};
|
||||
})()`);
|
||||
const hit = island.getHitRect();
|
||||
const hitMatches = hit && Math.abs(hit.x - geometry.r.x) <= 2 && Math.abs(hit.y - geometry.r.y) <= 2;
|
||||
await shot('resident-adaptive-narrow');
|
||||
saveConfig({ islandLayout: fixture });
|
||||
island.syncCustomLayout();
|
||||
island.setAppearance(appearance);
|
||||
await pause(800);
|
||||
if (!geometry.fits || !hitMatches) throw new Error(JSON.stringify({ ...geometry, hit }));
|
||||
return true;
|
||||
});
|
||||
await check('常驻消息较多及超长正文不产生滚动条，底部操作始终可见', async () => {
|
||||
for (let i = 0; i < 8; i++)
|
||||
island.pushNotification({
|
||||
...message('resident-overflow-' + i, '较多通知 ' + i, 'NORMAL'),
|
||||
content: '超长正文'.repeat(200),
|
||||
});
|
||||
island.handleAction({ action: 'expand' });
|
||||
await pause(800);
|
||||
island.handleAction({ action: 'expand-list' });
|
||||
await pause(800);
|
||||
const geometry = await win.webContents.executeJavaScript(`(() => {
|
||||
const card=document.querySelector('.resident-card'), footer=card.querySelector('.resident-actions'), r=card.getBoundingClientRect(), f=footer?.getBoundingClientRect();
|
||||
return {r:r.toJSON(),f:f?.toJSON(), fits:Boolean(f&&f.bottom<=r.bottom+1&&f.left>=r.left&&f.right<=r.right+1&&card.querySelector('.resident-more')&&[card,...card.querySelectorAll('*')].every(n=>!['auto','scroll'].includes(getComputedStyle(n).overflowY)))};
|
||||
})()`);
|
||||
await shot('resident-many-notifications');
|
||||
island.handleAction({ action: 'dismiss-all' });
|
||||
await pause(800);
|
||||
if (!geometry.fits) throw new Error(JSON.stringify(geometry));
|
||||
return true;
|
||||
});
|
||||
await check('触摸常驻岛停稳后只保留岛体输入区域，开合不缩放原生窗口', async () => {
|
||||
if (process.platform !== 'win32') return true;
|
||||
const original = win.setShape.bind(win);
|
||||
let shape: Electron.Rectangle[] = [];
|
||||
win.setShape = (rects) => {
|
||||
shape = rects;
|
||||
original(rects);
|
||||
};
|
||||
try {
|
||||
island.setTouchMode(true);
|
||||
const box = win.getBounds();
|
||||
island.handleAction({ action: 'expand' });
|
||||
await pause(1000);
|
||||
island.handleAction({ action: 'collapse' });
|
||||
await pause(1000);
|
||||
const hit = island.getHitRect();
|
||||
return Boolean(
|
||||
hit &&
|
||||
shape.length === 1 &&
|
||||
shape[0]!.width <= hit.width + 18 &&
|
||||
shape[0]!.height <= hit.height + 18 &&
|
||||
JSON.stringify(box) === JSON.stringify(win.getBounds()),
|
||||
);
|
||||
} finally {
|
||||
win.setShape = original;
|
||||
island.setTouchMode(false);
|
||||
}
|
||||
});
|
||||
await check('常驻和无通知展开内容可独立编辑并持久化', async () => {
|
||||
island.editLayout();
|
||||
await pause();
|
||||
@@ -282,4 +445,5 @@ export async function verifyResidentSmoke(
|
||||
});
|
||||
island.setHitTestCursor(null);
|
||||
island.setTouchMode(originalTouchMode);
|
||||
island.setAppearance(originalAppearance);
|
||||
}
|
||||
@@ -14,6 +14,8 @@ export interface IslandBridge {
|
||||
saveLayout(value: ContractIslandLayoutSettings): Promise<ContractIslandLayoutSettings>;
|
||||
onLayout(handler: (value: ContractIslandLayoutSettings) => void): void;
|
||||
getEditing(): Promise<boolean>;
|
||||
getVisible(): Promise<boolean>;
|
||||
onVisibility(handler: (visible: boolean) => void): void;
|
||||
setEditing(value: boolean): Promise<void>;
|
||||
onEditing(handler: (value: boolean) => void): void;
|
||||
reportSize(value: { width: number; height: number }): void;
|
||||
@@ -60,6 +62,10 @@ const bridge: IslandBridge = {
|
||||
ipcRenderer.on('island:layout', (_event, value) => handler(value));
|
||||
},
|
||||
getEditing: () => ipcRenderer.invoke('island:get-editing'),
|
||||
getVisible: () => ipcRenderer.invoke('island:get-visible'),
|
||||
onVisibility: (handler) => {
|
||||
ipcRenderer.on('island:visibility', (_event, value) => handler(value));
|
||||
},
|
||||
setEditing: (value) => ipcRenderer.invoke('island:set-editing', value),
|
||||
onEditing: (handler) => {
|
||||
ipcRenderer.on('island:editing', (_event, value) => handler(value));
|
||||
|
||||
Reference in new issue
Block a user