715 lines
19 KiB
Vue
715 lines
19 KiB
Vue
<template>
|
||
<!--
|
||
AI 加载动画：处方=药丸；病历=病历本
|
||
type + text 由调用方传入；嵌入抽屉时默认不显示主题切换
|
||
-->
|
||
<div
|
||
ref="containerRef"
|
||
class="loading-wrapper"
|
||
:class="{ 'loading-wrapper--dark': isDark }"
|
||
:style="{ width: '100%', height: '100%' }"
|
||
>
|
||
<canvas ref="canvasRef" class="loading-canvas"></canvas>
|
||
<button
|
||
v-if="showToggle"
|
||
class="theme-toggle-btn"
|
||
:title="isDark ? '切换到亮色模式' : '切换到暗色模式'"
|
||
@click="toggleTheme"
|
||
>
|
||
<span class="theme-icon">
|
||
<svg
|
||
v-if="!isDark"
|
||
class="sun"
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<circle cx="12" cy="12" r="5" />
|
||
<line x1="12" y1="1" x2="12" y2="3" />
|
||
<line x1="12" y1="21" x2="12" y2="23" />
|
||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||
<line x1="1" y1="12" x2="3" y2="12" />
|
||
<line x1="21" y1="12" x2="23" y2="12" />
|
||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||
</svg>
|
||
<svg
|
||
v-else
|
||
class="moon"
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||
</svg>
|
||
</span>
|
||
<!-- <span class="theme-label">{{ isDark ? '亮色' : '暗色' }}</span>-->
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
/**
|
||
* AI 生成加载动画
|
||
* - type=prescription：中心画胶囊药丸
|
||
* - type=medical_record：中心画病历本
|
||
* - text：底部文案（可动态传）
|
||
*/
|
||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||
|
||
export type AiLoadingType = 'prescription' | 'medical_record';
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
/** 动画类型：处方 / 病历 */
|
||
type?: AiLoadingType;
|
||
/** 底部文案 */
|
||
text?: string;
|
||
/** 是否显示主题切换（嵌入业务抽屉建议关闭） */
|
||
showToggle?: boolean;
|
||
}>(),
|
||
{
|
||
type: 'prescription',
|
||
text: '',
|
||
showToggle: false,
|
||
},
|
||
);
|
||
|
||
/** 未传文案时按 type 给默认值 */
|
||
const displayText = computed(() => {
|
||
const t = String(props.text || '').trim();
|
||
if (t) return t;
|
||
return props.type === 'medical_record'
|
||
? 'AI正在生成病历'
|
||
: 'AI正在生成处方';
|
||
});
|
||
|
||
const containerRef = ref<HTMLDivElement | null>(null);
|
||
const canvasRef = ref<HTMLCanvasElement | null>(null);
|
||
const isDark = ref(false);
|
||
/** 画布循环里读取最新文案/类型，避免闭包过期 */
|
||
const liveText = ref(displayText.value);
|
||
const liveType = ref<AiLoadingType>(props.type);
|
||
|
||
watch(
|
||
displayText,
|
||
(v) => {
|
||
liveText.value = v;
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
watch(
|
||
() => props.type,
|
||
(v) => {
|
||
liveType.value = v || 'prescription';
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
function detectAppDark(): boolean {
|
||
return (
|
||
document.documentElement.classList.contains('dark') ||
|
||
document.documentElement.getAttribute('data-theme') === 'dark' ||
|
||
document.documentElement.getAttribute('class')?.includes('dark') === true
|
||
);
|
||
}
|
||
|
||
function syncThemeFromApp() {
|
||
if (localStorage.getItem('prescription-loading-theme')) {
|
||
isDark.value = localStorage.getItem('prescription-loading-theme') === 'dark';
|
||
return;
|
||
}
|
||
isDark.value = detectAppDark();
|
||
}
|
||
|
||
function toggleTheme() {
|
||
isDark.value = !isDark.value;
|
||
localStorage.setItem(
|
||
'prescription-loading-theme',
|
||
isDark.value ? 'dark' : 'light',
|
||
);
|
||
resetParticles?.();
|
||
}
|
||
|
||
interface Particle {
|
||
x: number;
|
||
y: number;
|
||
vx: number;
|
||
vy: number;
|
||
life: number;
|
||
maxLife: number;
|
||
size: number;
|
||
color: { r: number; g: number; b: number };
|
||
type: 'circle' | 'cross';
|
||
}
|
||
|
||
interface ThemeColors {
|
||
textColor: string;
|
||
ringColor: string;
|
||
glowInner: string;
|
||
glowMiddle: string;
|
||
glowOuter: string;
|
||
particleBright: number;
|
||
iconShadow: string;
|
||
}
|
||
|
||
let animationId = 0;
|
||
let resetParticles: (() => void) | null = null;
|
||
let themeObserver: MutationObserver | null = null;
|
||
let resizeObserver: ResizeObserver | null = null;
|
||
let removeWindowResize: (() => void) | null = null;
|
||
|
||
onMounted(async () => {
|
||
await nextTick();
|
||
syncThemeFromApp();
|
||
if (!containerRef.value || !canvasRef.value) return;
|
||
|
||
const canvas = canvasRef.value;
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) return;
|
||
const container = containerRef.value;
|
||
|
||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||
let cssWidth = 0;
|
||
let cssHeight = 0;
|
||
let prevW = 0;
|
||
let prevH = 0;
|
||
let startTime: number | null = null;
|
||
let lastTime: number | null = null;
|
||
let particles: Particle[] = [];
|
||
const MAX_PARTICLES = 28;
|
||
|
||
resetParticles = () => {
|
||
particles = [];
|
||
};
|
||
|
||
function updateSize() {
|
||
const rect = container.getBoundingClientRect();
|
||
cssWidth = rect.width || 300;
|
||
cssHeight = rect.height || 280;
|
||
const pw = Math.round(cssWidth * dpr);
|
||
const ph = Math.round(cssHeight * dpr);
|
||
if (canvas.width !== pw || canvas.height !== ph) {
|
||
canvas.width = pw;
|
||
canvas.height = ph;
|
||
if (
|
||
prevW &&
|
||
(Math.abs(cssWidth - prevW) > 2 || Math.abs(cssHeight - prevH) > 2)
|
||
) {
|
||
particles = [];
|
||
}
|
||
prevW = cssWidth;
|
||
prevH = cssHeight;
|
||
}
|
||
}
|
||
|
||
function createParticle(cx: number, cy: number, s: number): Particle {
|
||
const angle = Math.random() * Math.PI * 2;
|
||
const distance = s * (0.15 + Math.random() * 0.45);
|
||
const speed = s * (0.03 + Math.random() * 0.08);
|
||
const colors = [
|
||
{ r: 61, g: 214, b: 208 },
|
||
{ r: 74, g: 195, b: 190 },
|
||
{ r: 93, g: 173, b: 226 },
|
||
{ r: 46, g: 180, b: 170 },
|
||
{ r: 100, g: 200, b: 215 },
|
||
];
|
||
const color = colors[Math.floor(Math.random() * colors.length)]!;
|
||
return {
|
||
x: cx + Math.cos(angle) * distance,
|
||
y: cy + Math.sin(angle) * distance,
|
||
vx: Math.cos(angle) * speed,
|
||
vy: Math.sin(angle) * speed,
|
||
life: 1,
|
||
maxLife: 1.8 + Math.random() * 2.5,
|
||
size: 1.2 + Math.random() * 2.8,
|
||
color,
|
||
type: Math.random() < 0.25 ? 'cross' : 'circle',
|
||
};
|
||
}
|
||
|
||
function updateParticles(dt: number, cx: number, cy: number, s: number) {
|
||
for (let i = particles.length - 1; i >= 0; i--) {
|
||
const p = particles[i]!;
|
||
p.life -= dt / p.maxLife;
|
||
p.x += p.vx * dt;
|
||
p.y += p.vy * dt;
|
||
p.vx *= 0.997;
|
||
p.vy *= 0.997;
|
||
if (p.life <= 0) particles.splice(i, 1);
|
||
}
|
||
while (particles.length < MAX_PARTICLES) {
|
||
const p = createParticle(cx, cy, s);
|
||
const ang = Math.random() * Math.PI * 2;
|
||
p.x = cx + Math.cos(ang) * s * 0.12 * Math.random();
|
||
p.y = cy + Math.sin(ang) * s * 0.12 * Math.random();
|
||
particles.push(p);
|
||
}
|
||
}
|
||
|
||
function drawParticle(
|
||
c: CanvasRenderingContext2D,
|
||
p: Particle,
|
||
bright: number,
|
||
) {
|
||
const alpha = p.life;
|
||
const { r, g, b } = p.color;
|
||
const size = p.size * (0.7 + 0.3 * p.life);
|
||
const br = Math.min(255, Math.round(r * bright));
|
||
const bg = Math.min(255, Math.round(g * bright));
|
||
const bb = Math.min(255, Math.round(b * bright));
|
||
c.save();
|
||
c.globalAlpha = alpha;
|
||
if (p.type === 'cross') {
|
||
const len = size * 1.8;
|
||
const w = size * 0.55;
|
||
c.strokeStyle = `rgba(${br},${bg},${bb},${alpha})`;
|
||
c.lineWidth = w;
|
||
c.lineCap = 'round';
|
||
c.beginPath();
|
||
c.moveTo(p.x - len, p.y);
|
||
c.lineTo(p.x + len, p.y);
|
||
c.stroke();
|
||
c.beginPath();
|
||
c.moveTo(p.x, p.y - len);
|
||
c.lineTo(p.x, p.y + len);
|
||
c.stroke();
|
||
c.fillStyle = `rgba(255,255,255,${alpha * 0.9})`;
|
||
c.beginPath();
|
||
c.arc(p.x, p.y, size * 0.35, 0, Math.PI * 2);
|
||
c.fill();
|
||
} else {
|
||
c.shadowColor = `rgba(${br},${bg},${bb},${alpha * 0.7})`;
|
||
c.shadowBlur = size * 2.5;
|
||
c.fillStyle = `rgba(${br},${bg},${bb},${alpha})`;
|
||
c.beginPath();
|
||
c.arc(p.x, p.y, size, 0, Math.PI * 2);
|
||
c.fill();
|
||
c.shadowBlur = 0;
|
||
c.fillStyle = `rgba(255,255,255,${alpha * 0.6})`;
|
||
c.beginPath();
|
||
c.arc(p.x, p.y, size * 0.4, 0, Math.PI * 2);
|
||
c.fill();
|
||
}
|
||
c.restore();
|
||
}
|
||
|
||
/** 处方药丸（处方） */
|
||
function drawPill(
|
||
c: CanvasRenderingContext2D,
|
||
px: number,
|
||
py: number,
|
||
pw: number,
|
||
ph: number,
|
||
floatOff: number,
|
||
pulse: number,
|
||
shadowCol: string,
|
||
) {
|
||
c.save();
|
||
const cx = px + pw / 2;
|
||
const cy = py + ph / 2;
|
||
const hw = (pw / 2) * pulse;
|
||
const hh = (ph / 2) * pulse;
|
||
const adjY = cy + floatOff;
|
||
const dx = cx - hw;
|
||
const dy = adjY - hh;
|
||
const dw = hw * 2;
|
||
const dh = hh * 2;
|
||
const rad = hh;
|
||
const path = new Path2D();
|
||
path.roundRect(dx, dy, dw, dh, rad);
|
||
|
||
c.shadowColor = shadowCol;
|
||
c.shadowBlur = hh * 0.7;
|
||
c.shadowOffsetY = hh * 0.25;
|
||
c.fillStyle = '#ffffff';
|
||
c.fill(path);
|
||
c.shadowColor = 'transparent';
|
||
c.shadowBlur = 0;
|
||
c.shadowOffsetY = 0;
|
||
|
||
c.save();
|
||
c.clip(path);
|
||
const leftGrad = c.createLinearGradient(dx, 0, dx + dw * 0.5, 0);
|
||
leftGrad.addColorStop(0, '#FDFBF7');
|
||
leftGrad.addColorStop(0.7, '#F5F1EA');
|
||
leftGrad.addColorStop(1, '#EDE8DF');
|
||
c.fillStyle = leftGrad;
|
||
c.fillRect(dx, dy, dw * 0.5, dh);
|
||
|
||
const rightGrad = c.createLinearGradient(dx + dw * 0.5, 0, dx + dw, 0);
|
||
rightGrad.addColorStop(0, '#5DD9D1');
|
||
rightGrad.addColorStop(0.5, '#3DD6D0');
|
||
rightGrad.addColorStop(1, '#2CB8B0');
|
||
c.fillStyle = rightGrad;
|
||
c.fillRect(dx + dw * 0.5, dy, dw * 0.5, dh);
|
||
|
||
c.strokeStyle = 'rgba(180,180,180,0.5)';
|
||
c.lineWidth = Math.max(0.6, hh * 0.06);
|
||
c.beginPath();
|
||
c.moveTo(dx + dw * 0.5, dy + 1);
|
||
c.lineTo(dx + dw * 0.5, dy + dh - 1);
|
||
c.stroke();
|
||
|
||
const hy = dy + dh * 0.15;
|
||
const hh2 = dh * 0.38;
|
||
const hp = new Path2D();
|
||
hp.roundRect(dx + dw * 0.06, hy, dw * 0.88, hh2, hh2 / 2);
|
||
c.fillStyle = 'rgba(255,255,255,0.45)';
|
||
c.fill(hp);
|
||
c.restore();
|
||
|
||
c.strokeStyle = 'rgba(200,200,200,0.5)';
|
||
c.lineWidth = Math.max(0.8, hh * 0.08);
|
||
c.stroke(path);
|
||
c.restore();
|
||
}
|
||
|
||
/** 病历本（病历） */
|
||
function drawMedicalRecord(
|
||
c: CanvasRenderingContext2D,
|
||
cx: number,
|
||
cy: number,
|
||
scale: number,
|
||
floatOff: number,
|
||
pulse: number,
|
||
shadowCol: string,
|
||
) {
|
||
c.save();
|
||
const w = scale * 0.28 * pulse;
|
||
const h = scale * 0.34 * pulse;
|
||
const x = cx - w / 2;
|
||
const y = cy - h / 2 + floatOff;
|
||
const r = Math.max(4, scale * 0.018);
|
||
const path = new Path2D();
|
||
path.roundRect(x, y, w, h, r);
|
||
|
||
c.shadowColor = shadowCol;
|
||
c.shadowBlur = scale * 0.035;
|
||
c.shadowOffsetY = scale * 0.012;
|
||
c.fillStyle = '#ffffff';
|
||
c.fill(path);
|
||
c.shadowColor = 'transparent';
|
||
c.shadowBlur = 0;
|
||
c.shadowOffsetY = 0;
|
||
|
||
// 左侧装订条
|
||
c.fillStyle = '#3DD6D0';
|
||
c.fillRect(x, y + r * 0.2, w * 0.12, h - r * 0.4);
|
||
|
||
// 横线（像病历行）
|
||
c.strokeStyle = 'rgba(61,214,208,0.35)';
|
||
c.lineWidth = Math.max(1, scale * 0.004);
|
||
for (let i = 0; i < 4; i++) {
|
||
const ly = y + h * (0.32 + i * 0.14);
|
||
c.beginPath();
|
||
c.moveTo(x + w * 0.22, ly);
|
||
c.lineTo(x + w * 0.88, ly);
|
||
c.stroke();
|
||
}
|
||
// 顶部标题条
|
||
c.fillStyle = 'rgba(61,214,208,0.2)';
|
||
c.beginPath();
|
||
c.roundRect(x + w * 0.22, y + h * 0.12, w * 0.5, h * 0.08, 2);
|
||
c.fill();
|
||
|
||
c.strokeStyle = 'rgba(180,200,200,0.55)';
|
||
c.lineWidth = Math.max(0.8, scale * 0.005);
|
||
c.stroke(path);
|
||
c.restore();
|
||
}
|
||
|
||
function drawCross(
|
||
c: CanvasRenderingContext2D,
|
||
x: number,
|
||
y: number,
|
||
size: number,
|
||
alpha: number,
|
||
rot: number,
|
||
) {
|
||
c.save();
|
||
c.translate(x, y);
|
||
c.rotate(rot);
|
||
c.globalAlpha = alpha;
|
||
const len = size;
|
||
const w = size * 0.3;
|
||
c.strokeStyle = '#3DD6D0';
|
||
c.lineWidth = w;
|
||
c.lineCap = 'round';
|
||
c.beginPath();
|
||
c.moveTo(-len, 0);
|
||
c.lineTo(len, 0);
|
||
c.stroke();
|
||
c.beginPath();
|
||
c.moveTo(0, -len);
|
||
c.lineTo(0, len);
|
||
c.stroke();
|
||
c.fillStyle = '#ffffff';
|
||
c.beginPath();
|
||
c.arc(0, 0, size * 0.25, 0, Math.PI * 2);
|
||
c.fill();
|
||
c.restore();
|
||
}
|
||
|
||
function getTheme(): ThemeColors {
|
||
const dark = isDark.value;
|
||
return {
|
||
textColor: dark ? '#d1d5db' : '#4a5568',
|
||
ringColor: dark ? 'rgba(255,255,255,0.25)' : 'rgba(180,195,200,0.45)',
|
||
glowInner: dark ? 'rgba(61,214,208,0.15)' : 'rgba(61,214,208,0.13)',
|
||
glowMiddle: dark ? 'rgba(61,214,208,0.05)' : 'rgba(61,214,208,0.04)',
|
||
glowOuter: 'rgba(61,214,208,0)',
|
||
particleBright: dark ? 1.4 : 1.0,
|
||
iconShadow: dark ? 'rgba(0,0,0,0.4)' : 'rgba(0,0,0,0.12)',
|
||
};
|
||
}
|
||
|
||
function draw(timestamp: number) {
|
||
updateSize();
|
||
if (cssWidth <= 0 || cssHeight <= 0) {
|
||
animationId = requestAnimationFrame(draw);
|
||
return;
|
||
}
|
||
if (startTime === null) {
|
||
startTime = timestamp;
|
||
lastTime = timestamp;
|
||
}
|
||
const elapsed = (timestamp - startTime) / 1000;
|
||
let dt = (timestamp - (lastTime ?? timestamp)) / 1000;
|
||
if (dt <= 0) dt = 0.016;
|
||
if (dt > 0.2) dt = 0.2;
|
||
lastTime = timestamp;
|
||
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
ctx.save();
|
||
ctx.scale(dpr, dpr);
|
||
|
||
const cx = cssWidth / 2;
|
||
const cy = cssHeight / 2 - cssHeight * 0.04;
|
||
const scale = Math.min(cssWidth, cssHeight);
|
||
const orbitR = scale * 0.26;
|
||
const fontSize = Math.max(12, scale * 0.055);
|
||
const textY = cy + orbitR + fontSize * 2.4;
|
||
const text = liveText.value;
|
||
const animType = liveType.value;
|
||
|
||
const dashOff = elapsed * scale * 0.025;
|
||
const arcRot = elapsed * 3.5;
|
||
const arcLen = (100 * Math.PI) / 180;
|
||
const floatOff = Math.sin(elapsed * 2.5) * scale * 0.025;
|
||
const pulseS = 1 + Math.sin(elapsed * 3.7) * 0.04;
|
||
const textAlpha = 0.55 + 0.45 * Math.sin(elapsed * 1.6);
|
||
const theme = getTheme();
|
||
|
||
const grad = ctx.createRadialGradient(
|
||
cx,
|
||
cy,
|
||
orbitR * 0.15,
|
||
cx,
|
||
cy,
|
||
orbitR * 1.6,
|
||
);
|
||
grad.addColorStop(0, theme.glowInner);
|
||
grad.addColorStop(0.5, theme.glowMiddle);
|
||
grad.addColorStop(1, theme.glowOuter);
|
||
ctx.fillStyle = grad;
|
||
ctx.fillRect(0, 0, cssWidth, cssHeight);
|
||
|
||
ctx.save();
|
||
ctx.setLineDash([scale * 0.018, scale * 0.04]);
|
||
ctx.lineDashOffset = -dashOff;
|
||
ctx.strokeStyle = theme.ringColor;
|
||
ctx.lineWidth = Math.max(1, scale * 0.006);
|
||
ctx.beginPath();
|
||
ctx.arc(cx, cy, orbitR, 0, Math.PI * 2);
|
||
ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
ctx.restore();
|
||
|
||
const arcS = arcRot;
|
||
const arcE = arcRot + arcLen;
|
||
const fx = cx + orbitR * Math.cos(arcE);
|
||
const fy = cy + orbitR * Math.sin(arcE);
|
||
ctx.save();
|
||
ctx.shadowColor = 'rgba(61,214,208,0.8)';
|
||
ctx.shadowBlur = scale * 0.04;
|
||
ctx.strokeStyle = '#3DD6D0';
|
||
ctx.lineWidth = Math.max(2, scale * 0.014);
|
||
ctx.lineCap = 'round';
|
||
ctx.beginPath();
|
||
ctx.arc(cx, cy, orbitR, arcS, arcE);
|
||
ctx.stroke();
|
||
ctx.restore();
|
||
|
||
ctx.save();
|
||
ctx.shadowColor = 'rgba(255,255,255,0.9)';
|
||
ctx.shadowBlur = scale * 0.03;
|
||
ctx.fillStyle = '#ffffff';
|
||
ctx.beginPath();
|
||
ctx.arc(fx, fy, Math.max(2.5, scale * 0.014), 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.restore();
|
||
|
||
// 中心图标：按 type 切换
|
||
if (animType === 'medical_record') {
|
||
drawMedicalRecord(ctx, cx, cy, scale, floatOff, pulseS, theme.iconShadow);
|
||
} else {
|
||
const pillW = scale * 0.34;
|
||
const pillH = scale * 0.1;
|
||
drawPill(
|
||
ctx,
|
||
cx - pillW / 2,
|
||
cy - pillH / 2,
|
||
pillW,
|
||
pillH,
|
||
floatOff,
|
||
pulseS,
|
||
theme.iconShadow,
|
||
);
|
||
}
|
||
|
||
for (let i = 0; i < 3; i++) {
|
||
const ang = elapsed * 1.8 + (i * Math.PI * 2) / 3;
|
||
const crossOrbitR = orbitR * 1.02;
|
||
const rx = cx + crossOrbitR * Math.cos(ang);
|
||
const ry = cy + crossOrbitR * Math.sin(ang);
|
||
const rs = Math.max(4, scale * 0.022);
|
||
const ra = 0.4 + 0.35 * Math.sin(elapsed * 3.2 + i * 1.7);
|
||
drawCross(ctx, rx, ry, rs, ra, elapsed * 0.9 + i);
|
||
}
|
||
|
||
updateParticles(dt, cx, cy, scale);
|
||
for (const p of particles) {
|
||
drawParticle(ctx, p, theme.particleBright);
|
||
}
|
||
|
||
ctx.save();
|
||
ctx.globalAlpha = textAlpha;
|
||
ctx.fillStyle = theme.textColor;
|
||
ctx.font = `${fontSize}px "PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif`;
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.shadowColor = 'rgba(61,214,208,0.25)';
|
||
ctx.shadowBlur = fontSize * 0.6;
|
||
ctx.fillText(text, cx, textY);
|
||
ctx.restore();
|
||
|
||
const charW = fontSize * 0.55;
|
||
const dotsStartX = cx + (text.length / 2) * charW + fontSize * 0.5;
|
||
const dotR = Math.max(2, fontSize * 0.16);
|
||
const dotSpacing = fontSize * 0.7;
|
||
for (let i = 0; i < 3; i++) {
|
||
const phase = (elapsed * 2.8 + i * 1.0) % 3;
|
||
let brightness = phase < 1 ? phase : phase < 2 ? 2 - phase : 0;
|
||
brightness = brightness * brightness * (3 - 2 * brightness);
|
||
const alpha = 0.2 + brightness * 0.75;
|
||
const dx = dotsStartX + i * dotSpacing * 2.2;
|
||
ctx.save();
|
||
ctx.shadowColor = `rgba(61,214,208,${alpha * 0.8})`;
|
||
ctx.shadowBlur = dotR * 3;
|
||
ctx.fillStyle = `rgba(61,214,208,${alpha})`;
|
||
ctx.beginPath();
|
||
ctx.arc(dx, textY, dotR, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.restore();
|
||
}
|
||
|
||
ctx.restore();
|
||
animationId = requestAnimationFrame(draw);
|
||
}
|
||
|
||
updateSize();
|
||
animationId = requestAnimationFrame(draw);
|
||
|
||
if (window.ResizeObserver) {
|
||
resizeObserver = new ResizeObserver(() => updateSize());
|
||
resizeObserver.observe(container);
|
||
} else {
|
||
const onResize = () => updateSize();
|
||
window.addEventListener('resize', onResize);
|
||
removeWindowResize = () => window.removeEventListener('resize', onResize);
|
||
}
|
||
|
||
// 跟随应用 dark class（未手动锁定主题时）
|
||
themeObserver = new MutationObserver(() => {
|
||
if (!localStorage.getItem('prescription-loading-theme')) {
|
||
syncThemeFromApp();
|
||
}
|
||
});
|
||
themeObserver.observe(document.documentElement, {
|
||
attributes: true,
|
||
attributeFilter: ['class', 'data-theme'],
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
cancelAnimationFrame(animationId);
|
||
resizeObserver?.disconnect();
|
||
resizeObserver = null;
|
||
removeWindowResize?.();
|
||
removeWindowResize = null;
|
||
themeObserver?.disconnect();
|
||
themeObserver = null;
|
||
resetParticles = null;
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.loading-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 220px;
|
||
//background: #ffffff;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.loading-wrapper--dark {
|
||
//background: #1e2227;
|
||
}
|
||
.loading-canvas {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.theme-toggle-btn {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 14px;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
border: 1px solid rgba(128, 128, 128, 0.3);
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: #4a5568;
|
||
backdrop-filter: blur(8px);
|
||
transition: all 0.25s;
|
||
}
|
||
.loading-wrapper--dark .theme-toggle-btn {
|
||
background: rgba(30, 34, 39, 0.9);
|
||
color: #d1d5db;
|
||
}
|
||
.theme-toggle-btn:hover {
|
||
border-color: #3dd6d0;
|
||
transform: scale(1.03);
|
||
}
|
||
.theme-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
</style>
|