xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 前端页面架构重构初版

Browse Source
This commit is contained in:
Gsh
2025-12-28 22:42:17 +08:00
parent c649ad31c2
commit e4621d9049
53 changed files with 6098 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
Yi.Ai.Vue3/src/components/userPersonalCenter/components/ActivationCode.vue
View File

@@ -31,33 +31,33 @@ class Particle {
this.x = x;
this.y = y;
this.hue = hue;
// Explosive physics
const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 15 + 2;
const speed = Math.random() * 15 + 2;
this.vx = Math.cos(angle) * speed;
this.vy = Math.sin(angle) * speed;
this.alpha = 1;
this.decay = Math.random() * 0.015 + 0.005;
this.gravity = 0.05;
this.friction = 0.96;
this.friction = 0.96;
this.size = Math.random() * 3 + 1;
this.brightness = 50; // Standard brightness for white bg visibility (0-100% HSL L value)
this.flicker = Math.random() > 0.5;
this.flicker = Math.random() > 0.5;
}
update() {
this.vx *= this.friction;
this.vy *= this.friction;
this.vy += this.gravity;
this.x += this.vx;
this.y += this.vy;
this.alpha -= this.decay;
this.hue += 0.5;
this.hue += 0.5;
}
draw(ctx: CanvasRenderingContext2D) {
@@ -65,9 +65,9 @@ class Particle {
// On white background:
// We want high saturation (100%) and medium lightness (50%) to make colors pop against white.
// If lightness is too high (like 80-100), it fades into white.
const lightness = this.flicker ? Math.random() * 20 + 40 : this.brightness;
const lightness = this.flicker ? Math.random() * 20 + 40 : this.brightness;
ctx.fillStyle = `hsla(${this.hue}, 100%, ${lightness}%, ${this.alpha})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
@@ -93,7 +93,7 @@ class Shockwave {
}
update() {
this.radius += 15;
this.radius += 15;
this.alpha -= 0.05;
this.lineWidth -= 0.2;
}
@@ -132,10 +132,10 @@ function animate() {
if (!ctx) return;
// Clear with transparent fade for trails on white
// 'destination-out' erases content.
// 'destination-out' erases content.
// To leave a trail on a white background (canvas is transparent over white gradient):
// We need to gently erase what's there.
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; // Alpha controls trail length
ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -177,14 +177,14 @@ function triggerCelebration() {
canvas.width = parent.clientWidth;
canvas.height = parent.clientHeight;
}
const cx = canvas.width / 2;
const cy = canvas.height / 2;
// 1. Initial Mega Explosion
triggerShake();
createExplosion(cx, cy, Math.random() * 360);
// Start loop
animate();
@@ -194,15 +194,15 @@ function triggerCelebration() {
count++;
const rx = cx + (Math.random() - 0.5) * canvas.width * 0.8;
const ry = cy + (Math.random() - 0.5) * canvas.height * 0.8;
createExplosion(rx, ry, Math.random() * 360);
if (count % 3 === 0) triggerShake();
if (count % 3 === 0) triggerShake();
if (count > 25) {
clearInterval(timer);
}
}, 120);
}, 120);
}
async function handleRedeem() {
@@ -221,7 +221,7 @@ async function handleRedeem() {
duration: 3000,
showClose: true,
});
activationCode.value = '';
activationCode.value = '';
} catch (error: any) {
// console.error(error);
} finally {
@@ -238,13 +238,13 @@ onUnmounted(() => {
<div ref="containerRef" class="activation-container" :class="{ 'shake-anim': isShaking }">
<!-- Removed Dark overlay -->
<canvas ref="canvasRef" class="fireworks-canvas"></canvas>
<div class="content-wrapper">
<div class="gift-icon-wrapper">
<div class="gift-box">🎁</div>
<div class="gift-glow"></div>
</div>
<h2 class="title">激活码兑换</h2>
<p class="subtitle">开启您的专属惊喜权益</p>
@@ -258,9 +258,9 @@ onUnmounted(() => {
clearable
@keyup.enter="handleRedeem"
/>
<el-button
class="redeem-btn"
<el-button
class="redeem-btn"
:loading="loading"
@click="handleRedeem"
>
@@ -321,7 +321,7 @@ onUnmounted(() => {
.content-wrapper {
position: relative;
z-index: 11;
z-index: 11;
width: 100%;
max-width: 480px;
padding: 40px;

1
Yi.Ai.Vue3/src/components/userPersonalCenter/components/UsageStatistics.vue
View File

@@ -549,6 +549,7 @@ onBeforeUnmount(() => {
</el-option>
</el-select>
<el-button
v-if="false"
:icon="FullScreen"
circle
plain

39
Yi.Ai.Vue3/src/components/userPersonalCenter/components/UserManagement.vue
View File

@@ -105,16 +105,15 @@ function bindWechat() {
<template>
<div class="user-profile">
<!-- 顶部标题 -->
<div class="header">
<h2>
<el-icon><User /></el-icon>
个人信息
</h2>
</div>
<!-- 用户卡片 -->
<el-card class="profile-card" shadow="hover">
<!-- 顶部标题 -->
<div class="header">
<h2>
<el-icon><User /></el-icon>
个人信息
</h2>
</div>
<!-- 头像和基本信息区域 -->
<div class="user-header-section">
<!-- 头像区域 -->
@@ -138,7 +137,9 @@ function bindWechat() {
<!-- 用户名称和状态 -->
<div class="user-info-quick">
<h3 class="user-name">{{ userNick }}</h3>
<h3 class="user-name">
{{ userNick }}
</h3>
<div class="user-tags">
<el-tag v-if="userVipStatus" type="warning" effect="dark" size="large">
<el-icon><Promotion /></el-icon>
@@ -153,8 +154,12 @@ function bindWechat() {
</div>
<div class="user-stats">
<div class="stat-item">
<div class="stat-value">{{ formatDate(user.creationTime)?.split(' ')[0] || '-' }}</div>
<div class="stat-label">注册时间</div>
<div class="stat-value">
{{ formatDate(user.creationTime)?.split(' ')[0] || '-' }}
</div>
<div class="stat-label">
注册时间
</div>
</div>
</div>
</div>
@@ -171,7 +176,9 @@ function bindWechat() {
<el-icon><User /></el-icon>
用户名
</div>
<div class="info-value">{{ user.userName || '-' }}</div>
<div class="info-value">
{{ user.userName || '-' }}
</div>
</div>
<!-- 昵称 -->
@@ -180,7 +187,9 @@ function bindWechat() {
<el-icon><Postcard /></el-icon>
昵称
</div>
<div class="info-value">{{ userNick }}</div>
<div class="info-value">
{{ userNick }}
</div>
</div>
<!-- 邮箱 -->
@@ -215,7 +224,9 @@ function bindWechat() {
<!-- 微信绑定 -->
<div class="info-item full-width">
<div class="info-label">
<el-icon color="#07C160"><ChatDotRound /></el-icon>
<el-icon color="#07C160">
<ChatDotRound />
</el-icon>
微信绑定
</div>
<div class="info-value wechat-binding">