Neo
779b2f6d52
- 清理 1155 个已删除的历史文件（废弃 prompt_logs、tmp、旧 ops 脚本） - export/ 数据文件从 git 移除（已在 .gitignore） - demo-miniprogram 从 tmp/ 移入 apps/，添加 CLAUDE.md 注解 - DDL 合并：完整 schema 定义填充到 db/*/schemas/（从 docs/database/ddl/ 复制） - 39 个 v1 迁移脚本归档到 db/_archived/migrations_v1_merged/ - 4 个迁移变更类 BD_Manual 文档归档到 docs/database/_archived/ - .gitignore 补充 .vite/ 和 apps/*.zip - settings.json 添加 effortLevel 默认配置 - scripts/ops/ 新增运维脚本入库 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
261 lines
9.7 KiB
Plaintext
261 lines
9.7 KiB
Plaintext
/* perf-progress-bar 组件样式
|
||
* 所有 class 以 ppb- 为前缀，避免与页面样式冲突
|
||
*/
|
||
|
||
/* ── 外层容器：为刻度留出底部空间 ── */
|
||
.ppb-wrap {
|
||
position: relative;
|
||
padding-bottom: 10rpx; /* 为刻度行留空间 */
|
||
}
|
||
|
||
/* ── 进度条轨道 ── */
|
||
.ppb-track {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 14rpx;
|
||
border-radius: 9rpx;
|
||
overflow: visible;
|
||
}
|
||
|
||
/* 底轨背景 */
|
||
.ppb-track-bg {
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
border-radius: 9rpx;
|
||
background: var(--ppb-track-bg-color, rgba(255, 255, 255, 0.15));
|
||
}
|
||
|
||
/* 填充条：控制裁剪宽度 */
|
||
.ppb-fill {
|
||
position: absolute;
|
||
top: 0; left: 0; bottom: 0;
|
||
border-radius: 9rpx;
|
||
overflow: hidden;
|
||
transition: width 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
|
||
box-shadow: 0 0 14rpx rgba(239, 68, 68, 0.45);
|
||
}
|
||
|
||
/* 全宽渐变层 */
|
||
.ppb-gradient-bar {
|
||
position: absolute;
|
||
top: 0; left: 0; bottom: 0;
|
||
width: 100vw;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#fde68a 0%,
|
||
#fbbf24 20%,
|
||
#f97316 45%,
|
||
#ef4444 70%,
|
||
#910a0a 100%
|
||
);
|
||
}
|
||
|
||
/* 分隔竖线 */
|
||
.ppb-divider {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 8rpx;
|
||
height: 100%;
|
||
background: var(--ppb-divider-color, #5381D9);
|
||
transform: translateX(-50%);
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════
|
||
* 高光动画
|
||
* ★ 外观旋钮：
|
||
* --ppb-shine-width : 光束宽度（固定 rpx，不随进度变化）
|
||
* --ppb-shine-opacity: 峰值亮度 0~1
|
||
* --ppb-shine-color : RGB颜色，如 255,220,100=暖黄
|
||
* ══════════════════════════════════════════════════════ */
|
||
.ppb-shine {
|
||
--ppb-shine-width: 120rpx;
|
||
--ppb-shine-opacity: 1.0;
|
||
--ppb-shine-color: 255, 255, 255;
|
||
|
||
position: absolute;
|
||
top: 0;
|
||
left: -130rpx;
|
||
width: var(--ppb-shine-width);
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent 0%,
|
||
rgba(var(--ppb-shine-color), 0.08) 20%,
|
||
rgba(var(--ppb-shine-color), var(--ppb-shine-opacity)) 50%,
|
||
rgba(var(--ppb-shine-color), 0.08) 80%,
|
||
transparent 100%
|
||
);
|
||
animation: none;
|
||
pointer-events: none;
|
||
}
|
||
.ppb-shine--active {
|
||
animation: ppbShine 1s linear 1 forwards;
|
||
}
|
||
@keyframes ppbShine {
|
||
0% { left: -130rpx; opacity: 0; }
|
||
5% { opacity: 1; }
|
||
95% { opacity: 1; }
|
||
100% { left: calc(100% + 10rpx); opacity: 0; }
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════
|
||
* 导火索效果
|
||
* ★ 外观旋钮：
|
||
* --ppb-spark-scale : 整体缩放
|
||
* --ppb-spark-pole-h: 光柱高度
|
||
* ══════════════════════════════════════════════════════ */
|
||
.ppb-edge-glow {
|
||
--ppb-spark-scale: 0.7;
|
||
--ppb-spark-pole-h: 30rpx;
|
||
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%) scale(var(--ppb-spark-scale));
|
||
transform-origin: center center;
|
||
width: calc(var(--ppb-spark-pole-h) / 2);
|
||
height: var(--ppb-spark-pole-h);
|
||
border-radius: 999rpx;
|
||
background: rgba(255, 255, 255, 1);
|
||
opacity: 0.25;
|
||
box-shadow: 0 0 4rpx 2rpx rgba(255, 200, 80, 0.35);
|
||
animation: none;
|
||
pointer-events: none;
|
||
overflow: visible;
|
||
z-index: 10;
|
||
transition: opacity 0.1s, box-shadow 0.1s;
|
||
}
|
||
.ppb-edge-glow--active {
|
||
animation: ppbEdgePulse 1s ease-out 1 forwards;
|
||
}
|
||
@keyframes ppbEdgePulse {
|
||
0% { opacity: 1; box-shadow: 0 0 22rpx 12rpx rgba(255, 255, 255, 0.95); }
|
||
15% { opacity: 1; box-shadow: 0 0 26rpx 14rpx rgba(255, 220, 80, 0.90); }
|
||
55% { opacity: 0.6; box-shadow: 0 0 12rpx 6rpx rgba(255, 160, 40, 0.60); }
|
||
85% { opacity: 0.25; box-shadow: 0 0 4rpx 2rpx rgba(255, 200, 80, 0.35); }
|
||
100% { opacity: 0.25; box-shadow: 0 0 4rpx 2rpx rgba(255, 200, 80, 0.35); }
|
||
}
|
||
|
||
/* 火星粒子基础 */
|
||
.ppb-spark {
|
||
position: absolute;
|
||
border-radius: 999rpx;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
top: 50%;
|
||
left: 50%;
|
||
animation: none;
|
||
}
|
||
.ppb-spark--active {
|
||
animation-iteration-count: 1;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
/* 粒子1：右上，亮白 */
|
||
.ppb-spark-1 { width: 10rpx; height: 10rpx; background: #ffffff; }
|
||
.ppb-spark-1.ppb-spark--active { animation-name: ppbSpark1; animation-timing-function: linear; }
|
||
@keyframes ppbSpark1 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
8% { opacity: 1; transform: translate( 8rpx, -16rpx) scale(1.6); }
|
||
25% { opacity: 0.9; transform: translate( 16rpx, -30rpx) scale(1.2); }
|
||
45% { opacity: 0.7; transform: translate( 22rpx, -40rpx) scale(0.9); }
|
||
62% { opacity: 0.5; transform: translate( 27rpx, -48rpx) scale(0.7); }
|
||
76% { opacity: 0.3; transform: translate( 31rpx, -53rpx) scale(0.5); }
|
||
87% { opacity: 0.15; transform: translate( 34rpx, -57rpx) scale(0.3); }
|
||
100% { opacity: 0; transform: translate( 36rpx, -60rpx) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子2：右下，橙色 */
|
||
.ppb-spark-2 { width: 12rpx; height: 12rpx; background: #fb923c; }
|
||
.ppb-spark-2.ppb-spark--active { animation-name: ppbSpark2; animation-timing-function: linear; }
|
||
@keyframes ppbSpark2 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
12% { opacity: 1; transform: translate( 10rpx, 14rpx) scale(1.5); }
|
||
28% { opacity: 0.8; transform: translate( 19rpx, 24rpx) scale(1.1); }
|
||
46% { opacity: 0.6; transform: translate( 26rpx, 32rpx) scale(0.8); }
|
||
62% { opacity: 0.4; transform: translate( 31rpx, 38rpx) scale(0.6); }
|
||
76% { opacity: 0.25; transform: translate( 35rpx, 43rpx) scale(0.4); }
|
||
88% { opacity: 0.1; transform: translate( 38rpx, 47rpx) scale(0.25); }
|
||
100% { opacity: 0; transform: translate( 42rpx, 56rpx) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子3：正上，黄色 */
|
||
.ppb-spark-3 { width: 8rpx; height: 8rpx; background: #fde68a; }
|
||
.ppb-spark-3.ppb-spark--active { animation-name: ppbSpark3; animation-timing-function: linear; }
|
||
@keyframes ppbSpark3 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
6% { opacity: 1; transform: translate( 4rpx, -22rpx) scale(1.8); }
|
||
20% { opacity: 0.9; transform: translate( 7rpx, -36rpx) scale(1.3); }
|
||
38% { opacity: 0.7; transform: translate( 9rpx, -48rpx) scale(1.0); }
|
||
55% { opacity: 0.5; transform: translate( 10rpx, -57rpx) scale(0.7); }
|
||
70% { opacity: 0.3; transform: translate( 11rpx, -63rpx) scale(0.5); }
|
||
84% { opacity: 0.15; transform: translate( 11rpx, -68rpx) scale(0.3); }
|
||
100% { opacity: 0; transform: translate( 12rpx, -74rpx) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子4：右斜上，红橙，拖尾 */
|
||
.ppb-spark-4 { width: 16rpx; height: 6rpx; background: #ef4444; }
|
||
.ppb-spark-4.ppb-spark--active { animation-name: ppbSpark4; animation-timing-function: linear; }
|
||
@keyframes ppbSpark4 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) rotate( 0deg) scale(0.0); }
|
||
10% { opacity: 1; transform: translate( 14rpx, -10rpx) rotate(-20deg) scale(1.4); }
|
||
26% { opacity: 0.8; transform: translate( 24rpx, -16rpx) rotate(-30deg) scale(1.0); }
|
||
44% { opacity: 0.6; transform: translate( 32rpx, -21rpx) rotate(-38deg) scale(0.75); }
|
||
60% { opacity: 0.4; transform: translate( 39rpx, -26rpx) rotate(-45deg) scale(0.55); }
|
||
74% { opacity: 0.25; transform: translate( 44rpx, -30rpx) rotate(-50deg) scale(0.4); }
|
||
87% { opacity: 0.1; transform: translate( 48rpx, -33rpx) rotate(-53deg) scale(0.25); }
|
||
100% { opacity: 0; transform: translate( 58rpx, -40rpx) rotate(-55deg) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子5：正右，黄白 */
|
||
.ppb-spark-5 { width: 10rpx; height: 10rpx; background: #fbbf24; }
|
||
.ppb-spark-5.ppb-spark--active { animation-name: ppbSpark5; animation-timing-function: linear; }
|
||
@keyframes ppbSpark5 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
5% { opacity: 1; transform: translate( 18rpx, 2rpx) scale(1.7); }
|
||
20% { opacity: 0.85; transform: translate( 30rpx, 3rpx) scale(1.2); }
|
||
38% { opacity: 0.65; transform: translate( 40rpx, 4rpx) scale(0.9); }
|
||
55% { opacity: 0.45; transform: translate( 47rpx, 5rpx) scale(0.7); }
|
||
70% { opacity: 0.3; transform: translate( 52rpx, 6rpx) scale(0.5); }
|
||
84% { opacity: 0.15; transform: translate( 56rpx, 7rpx) scale(0.3); }
|
||
100% { opacity: 0; transform: translate( 60rpx, 8rpx) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子6：右下斜，淡橙 */
|
||
.ppb-spark-6 { width: 14rpx; height: 14rpx; background: #fed7aa; }
|
||
.ppb-spark-6.ppb-spark--active { animation-name: ppbSpark6; animation-timing-function: linear; }
|
||
@keyframes ppbSpark6 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
15% { opacity: 0.9; transform: translate( 6rpx, 18rpx) scale(1.5); }
|
||
30% { opacity: 0.75; transform: translate( 10rpx, 28rpx) scale(1.1); }
|
||
47% { opacity: 0.55; transform: translate( 14rpx, 36rpx) scale(0.85); }
|
||
62% { opacity: 0.4; transform: translate( 17rpx, 43rpx) scale(0.65); }
|
||
75% { opacity: 0.25; transform: translate( 19rpx, 48rpx) scale(0.5); }
|
||
87% { opacity: 0.1; transform: translate( 21rpx, 53rpx) scale(0.35); }
|
||
100% { opacity: 0; transform: translate( 24rpx, 64rpx) scale(0.1); }
|
||
}
|
||
|
||
/* ── 刻度 ── */
|
||
.ppb-ticks {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 100%;
|
||
margin-top: 6rpx;
|
||
height: 24rpx;
|
||
}
|
||
.ppb-tick {
|
||
position: absolute;
|
||
font-size: 16rpx;
|
||
color: var(--ppb-tick-color, rgba(255, 255, 255, 0.55));
|
||
transition: color 0.3s ease, font-weight 0.3s ease;
|
||
}
|
||
.ppb-tick--done {
|
||
color: var(--ppb-tick-done-color, rgba(255, 255, 255, 0.95));
|
||
font-weight: 600;
|
||
}
|
||
.ppb-tick--highlight {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-weight: 500;
|
||
}
|