chore(demo): add loader and minimal-mode preview pages
This commit is contained in:
parent
dfc763c7c5
commit
249eb663bb
708
static/demo/loaders-preview.html
Normal file
708
static/demo/loaders-preview.html
Normal file
@ -0,0 +1,708 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>加载动画预览</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-item {
|
||||||
|
background: #2a2a2a;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 统一的颜色变量 */
|
||||||
|
:root {
|
||||||
|
--loader-color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 0. 方格网格动画 (已有) ========== */
|
||||||
|
@keyframes loader_5191 {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 {
|
||||||
|
position: relative;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0-square {
|
||||||
|
background: var(--loader-color);
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: -1.5px;
|
||||||
|
margin-left: -1.5px;
|
||||||
|
border-radius: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq1 {
|
||||||
|
margin-top: -7.5px;
|
||||||
|
margin-left: -7.5px;
|
||||||
|
animation: loader_5191 675ms ease-in-out 0s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq2 {
|
||||||
|
margin-top: -7.5px;
|
||||||
|
animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq3 {
|
||||||
|
margin-top: -7.5px;
|
||||||
|
margin-left: 4.5px;
|
||||||
|
animation: loader_5191 675ms ease-in-out 150ms infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq4 {
|
||||||
|
margin-left: -7.5px;
|
||||||
|
animation: loader_5191 675ms ease-in-out 225ms infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq5 {
|
||||||
|
animation: loader_5191 675ms ease-in-out 300ms infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq6 {
|
||||||
|
margin-left: 4.5px;
|
||||||
|
animation: loader_5191 675ms ease-in-out 375ms infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq7 {
|
||||||
|
margin-top: 4.5px;
|
||||||
|
margin-left: -7.5px;
|
||||||
|
animation: loader_5191 675ms ease-in-out 450ms infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq8 {
|
||||||
|
margin-top: 4.5px;
|
||||||
|
animation: loader_5191 675ms ease-in-out 525ms infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-0 #sq9 {
|
||||||
|
margin-top: 4.5px;
|
||||||
|
margin-left: 4.5px;
|
||||||
|
animation: loader_5191 675ms ease-in-out 600ms infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 1. 方块旋转动画 ========== */
|
||||||
|
@keyframes square-animation {
|
||||||
|
0% { left: 0; top: 0; }
|
||||||
|
10.5% { left: 0; top: 0; }
|
||||||
|
12.5% { left: 16px; top: 0; }
|
||||||
|
23% { left: 16px; top: 0; }
|
||||||
|
25% { left: 32px; top: 0; }
|
||||||
|
35.5% { left: 32px; top: 0; }
|
||||||
|
37.5% { left: 32px; top: 16px; }
|
||||||
|
48% { left: 32px; top: 16px; }
|
||||||
|
50% { left: 16px; top: 16px; }
|
||||||
|
60.5% { left: 16px; top: 16px; }
|
||||||
|
62.5% { left: 16px; top: 32px; }
|
||||||
|
73% { left: 16px; top: 32px; }
|
||||||
|
75% { left: 0; top: 32px; }
|
||||||
|
85.5% { left: 0; top: 32px; }
|
||||||
|
87.5% { left: 0; top: 16px; }
|
||||||
|
98% { left: 0; top: 16px; }
|
||||||
|
100% { left: 0; top: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-1 {
|
||||||
|
position: relative;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-1-square {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin: 1px;
|
||||||
|
background: var(--loader-color);
|
||||||
|
animation: square-animation 10s ease-in-out infinite both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-1-square:nth-of-type(1) { animation-delay: -1.4285714286s; }
|
||||||
|
.loader-1-square:nth-of-type(2) { animation-delay: -2.8571428571s; }
|
||||||
|
.loader-1-square:nth-of-type(3) { animation-delay: -4.2857142857s; }
|
||||||
|
.loader-1-square:nth-of-type(4) { animation-delay: -5.7142857143s; }
|
||||||
|
.loader-1-square:nth-of-type(5) { animation-delay: -7.1428571429s; }
|
||||||
|
.loader-1-square:nth-of-type(6) { animation-delay: -8.5714285714s; }
|
||||||
|
.loader-1-square:nth-of-type(7) { animation-delay: -10s; }
|
||||||
|
|
||||||
|
/* ========== 2. 双方块追逐 ========== */
|
||||||
|
.loader-2 {
|
||||||
|
--size: 15px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-2::after,
|
||||||
|
.loader-2::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
top: 50%;
|
||||||
|
animation: loader-2-up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
|
||||||
|
left: 50%;
|
||||||
|
background: var(--loader-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-2::after {
|
||||||
|
top: calc(50% - var(--size));
|
||||||
|
left: calc(50% - var(--size));
|
||||||
|
animation: loader-2-down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-2-down {
|
||||||
|
0%, 100% { transform: none; }
|
||||||
|
25% { transform: translateX(100%); }
|
||||||
|
50% { transform: translateX(100%) translateY(100%); }
|
||||||
|
75% { transform: translateY(100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-2-up {
|
||||||
|
0%, 100% { transform: none; }
|
||||||
|
25% { transform: translateX(-100%); }
|
||||||
|
50% { transform: translateX(-100%) translateY(-100%); }
|
||||||
|
75% { transform: translateY(-100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 3. 弹跳方块 ========== */
|
||||||
|
.loader-3 {
|
||||||
|
width: 60px;
|
||||||
|
height: 30px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-3-square {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--loader-color);
|
||||||
|
left: 15%;
|
||||||
|
transform-origin: 50%;
|
||||||
|
animation: loader-3-bounce .5s alternate infinite ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-3-bounce {
|
||||||
|
0% {
|
||||||
|
top: 30px;
|
||||||
|
height: 5px;
|
||||||
|
transform: scaleX(1.7);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
height: 10px;
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-3-square:nth-child(2) {
|
||||||
|
left: 45%;
|
||||||
|
animation-delay: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-3-square:nth-child(3) {
|
||||||
|
left: auto;
|
||||||
|
right: 15%;
|
||||||
|
animation-delay: .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 4. 五方块序列 ========== */
|
||||||
|
.loader-4 {
|
||||||
|
--square: 13px;
|
||||||
|
--offset: 15px;
|
||||||
|
--duration: 2.4s;
|
||||||
|
--delay: 0.2s;
|
||||||
|
width: calc(3 * var(--offset) + var(--square));
|
||||||
|
height: calc(2 * var(--offset) + var(--square));
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-4 div {
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--loader-color);
|
||||||
|
border: none;
|
||||||
|
width: var(--square);
|
||||||
|
height: var(--square);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-4 #sq1 {
|
||||||
|
left: calc(0 * var(--offset));
|
||||||
|
top: calc(0 * var(--offset));
|
||||||
|
animation: loader-4-square1 var(--duration) var(--delay) ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-4 #sq2 {
|
||||||
|
left: calc(0 * var(--offset));
|
||||||
|
top: calc(1 * var(--offset));
|
||||||
|
animation: loader-4-square2 var(--duration) var(--delay) ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-4 #sq3 {
|
||||||
|
left: calc(1 * var(--offset));
|
||||||
|
top: calc(1 * var(--offset));
|
||||||
|
animation: loader-4-square3 var(--duration) var(--delay) ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-4 #sq4 {
|
||||||
|
left: calc(2 * var(--offset));
|
||||||
|
top: calc(1 * var(--offset));
|
||||||
|
animation: loader-4-square4 var(--duration) var(--delay) ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-4 #sq5 {
|
||||||
|
left: calc(3 * var(--offset));
|
||||||
|
top: calc(1 * var(--offset));
|
||||||
|
animation: loader-4-square5 var(--duration) var(--delay) ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-4-square1 {
|
||||||
|
0% { left: calc(0 * var(--offset)); top: calc(0 * var(--offset)); }
|
||||||
|
8.333% { left: calc(0 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
100% { left: calc(0 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-4-square2 {
|
||||||
|
0% { left: calc(0 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
8.333% { left: calc(0 * var(--offset)); top: calc(2 * var(--offset)); }
|
||||||
|
16.67% { left: calc(1 * var(--offset)); top: calc(2 * var(--offset)); }
|
||||||
|
25.00% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
83.33% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
91.67% { left: calc(1 * var(--offset)); top: calc(0 * var(--offset)); }
|
||||||
|
100% { left: calc(0 * var(--offset)); top: calc(0 * var(--offset)); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-4-square3 {
|
||||||
|
0%, 100% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
16.67% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
25.00% { left: calc(1 * var(--offset)); top: calc(0 * var(--offset)); }
|
||||||
|
33.33% { left: calc(2 * var(--offset)); top: calc(0 * var(--offset)); }
|
||||||
|
41.67% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
66.67% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
75.00% { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
|
||||||
|
83.33% { left: calc(1 * var(--offset)); top: calc(2 * var(--offset)); }
|
||||||
|
91.67% { left: calc(1 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-4-square4 {
|
||||||
|
0% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
33.33% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
41.67% { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
|
||||||
|
50.00% { left: calc(3 * var(--offset)); top: calc(2 * var(--offset)); }
|
||||||
|
58.33% { left: calc(3 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
100% { left: calc(3 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-4-square5 {
|
||||||
|
0% { left: calc(3 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
50.00% { left: calc(3 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
58.33% { left: calc(3 * var(--offset)); top: calc(0 * var(--offset)); }
|
||||||
|
66.67% { left: calc(2 * var(--offset)); top: calc(0 * var(--offset)); }
|
||||||
|
75.00% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
100% { left: calc(2 * var(--offset)); top: calc(1 * var(--offset)); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 5. 九宫格动画 ========== */
|
||||||
|
.loader-5 {
|
||||||
|
position: relative;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-5-box {
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-5-box:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--loader-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-5-box:nth-child(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-5-box:nth-child(1):before,
|
||||||
|
.loader-5-box:nth-child(4):before {
|
||||||
|
margin-left: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-5-box:nth-child(3):before {
|
||||||
|
margin-top: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-5-box:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-5-box:nth-child(1) { animation: loader-5-moveBox-1 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(2) { animation: loader-5-moveBox-2 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(3) { animation: loader-5-moveBox-3 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(4) { animation: loader-5-moveBox-4 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(5) { animation: loader-5-moveBox-5 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(6) { animation: loader-5-moveBox-6 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(7) { animation: loader-5-moveBox-7 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(8) { animation: loader-5-moveBox-8 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(9) { animation: loader-5-moveBox-9 4s infinite; }
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-1 {
|
||||||
|
9.09% { transform: translate(-13px, 0); }
|
||||||
|
18.18% { transform: translate(0px, 0); }
|
||||||
|
27.27% { transform: translate(0px, 0); }
|
||||||
|
36.36% { transform: translate(13px, 0); }
|
||||||
|
45.45% { transform: translate(13px, 13px); }
|
||||||
|
54.55% { transform: translate(13px, 13px); }
|
||||||
|
63.64% { transform: translate(13px, 13px); }
|
||||||
|
72.73% { transform: translate(13px, 0px); }
|
||||||
|
81.82% { transform: translate(0px, 0px); }
|
||||||
|
90.91% { transform: translate(-13px, 0px); }
|
||||||
|
100% { transform: translate(0px, 0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-2 {
|
||||||
|
9.09% { transform: translate(0, 0); }
|
||||||
|
18.18% { transform: translate(13px, 0); }
|
||||||
|
27.27% { transform: translate(0px, 0); }
|
||||||
|
36.36% { transform: translate(13px, 0); }
|
||||||
|
45.45% { transform: translate(13px, 13px); }
|
||||||
|
54.55% { transform: translate(13px, 13px); }
|
||||||
|
63.64% { transform: translate(13px, 13px); }
|
||||||
|
72.73% { transform: translate(13px, 13px); }
|
||||||
|
81.82% { transform: translate(0px, 13px); }
|
||||||
|
90.91% { transform: translate(0px, 13px); }
|
||||||
|
100% { transform: translate(0px, 0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-3 {
|
||||||
|
9.09% { transform: translate(-13px, 0); }
|
||||||
|
18.18% { transform: translate(-13px, 0); }
|
||||||
|
27.27% { transform: translate(0px, 0); }
|
||||||
|
36.36% { transform: translate(-13px, 0); }
|
||||||
|
45.45% { transform: translate(-13px, 0); }
|
||||||
|
54.55% { transform: translate(-13px, 0); }
|
||||||
|
63.64% { transform: translate(-13px, 0); }
|
||||||
|
72.73% { transform: translate(-13px, 0); }
|
||||||
|
81.82% { transform: translate(-13px, -13px); }
|
||||||
|
90.91% { transform: translate(0px, -13px); }
|
||||||
|
100% { transform: translate(0px, 0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-4 {
|
||||||
|
9.09% { transform: translate(-13px, 0); }
|
||||||
|
18.18% { transform: translate(-13px, 0); }
|
||||||
|
27.27% { transform: translate(-13px, -13px); }
|
||||||
|
36.36% { transform: translate(0px, -13px); }
|
||||||
|
45.45% { transform: translate(0px, 0px); }
|
||||||
|
54.55% { transform: translate(0px, -13px); }
|
||||||
|
63.64% { transform: translate(0px, -13px); }
|
||||||
|
72.73% { transform: translate(0px, -13px); }
|
||||||
|
81.82% { transform: translate(-13px, -13px); }
|
||||||
|
90.91% { transform: translate(-13px, 0px); }
|
||||||
|
100% { transform: translate(0px, 0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-5 {
|
||||||
|
9.09% { transform: translate(0, 0); }
|
||||||
|
18.18% { transform: translate(0, 0); }
|
||||||
|
27.27% { transform: translate(0, 0); }
|
||||||
|
36.36% { transform: translate(13px, 0); }
|
||||||
|
45.45% { transform: translate(13px, 0); }
|
||||||
|
54.55% { transform: translate(13px, 0); }
|
||||||
|
63.64% { transform: translate(13px, 0); }
|
||||||
|
72.73% { transform: translate(13px, 0); }
|
||||||
|
81.82% { transform: translate(13px, -13px); }
|
||||||
|
90.91% { transform: translate(0px, -13px); }
|
||||||
|
100% { transform: translate(0px, 0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-6 {
|
||||||
|
9.09% { transform: translate(0, 0); }
|
||||||
|
18.18% { transform: translate(-13px, 0); }
|
||||||
|
27.27% { transform: translate(-13px, 0); }
|
||||||
|
36.36% { transform: translate(0px, 0); }
|
||||||
|
45.45% { transform: translate(0px, 0); }
|
||||||
|
54.55% { transform: translate(0px, 0); }
|
||||||
|
63.64% { transform: translate(0px, 0); }
|
||||||
|
72.73% { transform: translate(0px, 13px); }
|
||||||
|
81.82% { transform: translate(-13px, 13px); }
|
||||||
|
90.91% { transform: translate(-13px, 0px); }
|
||||||
|
100% { transform: translate(0px, 0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-7 {
|
||||||
|
9.09% { transform: translate(13px, 0); }
|
||||||
|
18.18% { transform: translate(13px, 0); }
|
||||||
|
27.27% { transform: translate(13px, 0); }
|
||||||
|
36.36% { transform: translate(0px, 0); }
|
||||||
|
45.45% { transform: translate(0px, -13px); }
|
||||||
|
54.55% { transform: translate(13px, -13px); }
|
||||||
|
63.64% { transform: translate(0px, -13px); }
|
||||||
|
72.73% { transform: translate(0px, -13px); }
|
||||||
|
81.82% { transform: translate(0px, 0px); }
|
||||||
|
90.91% { transform: translate(13px, 0px); }
|
||||||
|
100% { transform: translate(0px, 0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-8 {
|
||||||
|
9.09% { transform: translate(0, 0); }
|
||||||
|
18.18% { transform: translate(-13px, 0); }
|
||||||
|
27.27% { transform: translate(-13px, -13px); }
|
||||||
|
36.36% { transform: translate(0px, -13px); }
|
||||||
|
45.45% { transform: translate(0px, -13px); }
|
||||||
|
54.55% { transform: translate(0px, -13px); }
|
||||||
|
63.64% { transform: translate(0px, -13px); }
|
||||||
|
72.73% { transform: translate(0px, -13px); }
|
||||||
|
81.82% { transform: translate(13px, -13px); }
|
||||||
|
90.91% { transform: translate(13px, 0px); }
|
||||||
|
100% { transform: translate(0px, 0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-5-moveBox-9 {
|
||||||
|
9.09% { transform: translate(-13px, 0); }
|
||||||
|
18.18% { transform: translate(-13px, 0); }
|
||||||
|
27.27% { transform: translate(0px, 0); }
|
||||||
|
36.36% { transform: translate(-13px, 0); }
|
||||||
|
45.45% { transform: translate(0px, 0); }
|
||||||
|
54.55% { transform: translate(0px, 0); }
|
||||||
|
63.64% { transform: translate(-13px, 0); }
|
||||||
|
72.73% { transform: translate(-13px, 0); }
|
||||||
|
81.82% { transform: translate(-26px, 0); }
|
||||||
|
90.91% { transform: translate(-13px, 0); }
|
||||||
|
100% { transform: translate(0px, 0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 6. 波纹方块 ========== */
|
||||||
|
.loader-6 {
|
||||||
|
--cell-size: 10px;
|
||||||
|
--cell-spacing: 1px;
|
||||||
|
--cells: 3;
|
||||||
|
--total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: var(--total-size);
|
||||||
|
height: var(--total-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-6-cell {
|
||||||
|
flex: 0 0 var(--cell-size);
|
||||||
|
margin: var(--cell-spacing);
|
||||||
|
background-color: transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
animation: 1.5s loader-6-ripple ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-6-cell.d-1 { animation-delay: 100ms; }
|
||||||
|
.loader-6-cell.d-2 { animation-delay: 200ms; }
|
||||||
|
.loader-6-cell.d-3 { animation-delay: 300ms; }
|
||||||
|
.loader-6-cell.d-4 { animation-delay: 400ms; }
|
||||||
|
|
||||||
|
.loader-6-cell:nth-child(1),
|
||||||
|
.loader-6-cell:nth-child(2),
|
||||||
|
.loader-6-cell:nth-child(3),
|
||||||
|
.loader-6-cell:nth-child(4),
|
||||||
|
.loader-6-cell:nth-child(5),
|
||||||
|
.loader-6-cell:nth-child(6),
|
||||||
|
.loader-6-cell:nth-child(7),
|
||||||
|
.loader-6-cell:nth-child(8),
|
||||||
|
.loader-6-cell:nth-child(9) {
|
||||||
|
--cell-color: var(--loader-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-6-ripple {
|
||||||
|
0% { background-color: transparent; }
|
||||||
|
30% { background-color: var(--cell-color); }
|
||||||
|
60% { background-color: transparent; }
|
||||||
|
100% { background-color: transparent; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>加载动画预览 - 统一风格</h1>
|
||||||
|
|
||||||
|
<div class="loader-grid">
|
||||||
|
<!-- 0. 方格网格 (已有) -->
|
||||||
|
<div class="loader-item">
|
||||||
|
<div class="loader-wrapper">
|
||||||
|
<div class="loader-0">
|
||||||
|
<div class="loader-0-square" id="sq1"></div>
|
||||||
|
<div class="loader-0-square" id="sq2"></div>
|
||||||
|
<div class="loader-0-square" id="sq3"></div>
|
||||||
|
<div class="loader-0-square" id="sq4"></div>
|
||||||
|
<div class="loader-0-square" id="sq5"></div>
|
||||||
|
<div class="loader-0-square" id="sq6"></div>
|
||||||
|
<div class="loader-0-square" id="sq7"></div>
|
||||||
|
<div class="loader-0-square" id="sq8"></div>
|
||||||
|
<div class="loader-0-square" id="sq9"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loader-title">0. 方格网格 (已有)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 1. 方块旋转 -->
|
||||||
|
<div class="loader-item">
|
||||||
|
<div class="loader-wrapper">
|
||||||
|
<div class="loader-1">
|
||||||
|
<div class="loader-1-square"></div>
|
||||||
|
<div class="loader-1-square"></div>
|
||||||
|
<div class="loader-1-square"></div>
|
||||||
|
<div class="loader-1-square"></div>
|
||||||
|
<div class="loader-1-square"></div>
|
||||||
|
<div class="loader-1-square"></div>
|
||||||
|
<div class="loader-1-square"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loader-title">1. 方块旋转</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. 双方块追逐 -->
|
||||||
|
<div class="loader-item">
|
||||||
|
<div class="loader-wrapper">
|
||||||
|
<div class="loader-2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="loader-title">2. 双方块追逐</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. 弹跳方块 -->
|
||||||
|
<div class="loader-item">
|
||||||
|
<div class="loader-wrapper">
|
||||||
|
<div class="loader-3">
|
||||||
|
<div class="loader-3-square"></div>
|
||||||
|
<div class="loader-3-square"></div>
|
||||||
|
<div class="loader-3-square"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loader-title">3. 弹跳方块</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. 五方块序列 -->
|
||||||
|
<div class="loader-item">
|
||||||
|
<div class="loader-wrapper">
|
||||||
|
<div class="loader-4">
|
||||||
|
<div id="sq1"></div>
|
||||||
|
<div id="sq2"></div>
|
||||||
|
<div id="sq3"></div>
|
||||||
|
<div id="sq4"></div>
|
||||||
|
<div id="sq5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loader-title">4. 五方块序列</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5. 九宫格动画 -->
|
||||||
|
<div class="loader-item">
|
||||||
|
<div class="loader-wrapper">
|
||||||
|
<div class="loader-5">
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
<div class="loader-5-box"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loader-title">5. 九宫格动画</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 6. 波纹方块 -->
|
||||||
|
<div class="loader-item">
|
||||||
|
<div class="loader-wrapper">
|
||||||
|
<div class="loader-6">
|
||||||
|
<div class="loader-6-cell d-0"></div>
|
||||||
|
<div class="loader-6-cell d-1"></div>
|
||||||
|
<div class="loader-6-cell d-2"></div>
|
||||||
|
<div class="loader-6-cell d-1"></div>
|
||||||
|
<div class="loader-6-cell d-2"></div>
|
||||||
|
<div class="loader-6-cell d-2"></div>
|
||||||
|
<div class="loader-6-cell d-3"></div>
|
||||||
|
<div class="loader-6-cell d-3"></div>
|
||||||
|
<div class="loader-6-cell d-4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loader-title">6. 波纹方块</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
123
static/demo/loaders-v2.html
Normal file
123
static/demo/loaders-v2.html
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>加载动画预览 V2</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a1a; color: #e0e0e0; padding: 40px; }
|
||||||
|
.container { max-width: 1400px; margin: 0 auto; }
|
||||||
|
h1 { text-align: center; margin-bottom: 40px; color: #fff; }
|
||||||
|
.loader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; }
|
||||||
|
.loader-item { background: #2a2a2a; border-radius: 12px; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
|
||||||
|
.loader-title { font-size: 13px; color: #999; text-align: center; }
|
||||||
|
.loader-wrapper { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||||
|
:root { --loader-color: #888; }
|
||||||
|
|
||||||
|
/* 0. 已有 */
|
||||||
|
@keyframes loader_5191 { from { opacity: 0; } to { opacity: 1; } }
|
||||||
|
.loader-0 { position: relative; width: 16px; height: 16px; }
|
||||||
|
.loader-0-square { background: var(--loader-color); width: 3px; height: 3px; position: absolute; top: 50%; left: 50%; margin-top: -1.5px; margin-left: -1.5px; border-radius: 0.5px; }
|
||||||
|
.loader-0 #sq1 { margin-top: -7.5px; margin-left: -7.5px; animation: loader_5191 675ms ease-in-out 0s infinite alternate; }
|
||||||
|
.loader-0 #sq2 { margin-top: -7.5px; animation: loader_5191 675ms ease-in-out 75ms infinite alternate; }
|
||||||
|
.loader-0 #sq3 { margin-top: -7.5px; margin-left: 4.5px; animation: loader_5191 675ms ease-in-out 150ms infinite; }
|
||||||
|
.loader-0 #sq4 { margin-left: -7.5px; animation: loader_5191 675ms ease-in-out 225ms infinite; }
|
||||||
|
.loader-0 #sq5 { animation: loader_5191 675ms ease-in-out 300ms infinite; }
|
||||||
|
.loader-0 #sq6 { margin-left: 4.5px; animation: loader_5191 675ms ease-in-out 375ms infinite; }
|
||||||
|
.loader-0 #sq7 { margin-top: 4.5px; margin-left: -7.5px; animation: loader_5191 675ms ease-in-out 450ms infinite; }
|
||||||
|
.loader-0 #sq8 { margin-top: 4.5px; animation: loader_5191 675ms ease-in-out 525ms infinite; }
|
||||||
|
.loader-0 #sq9 { margin-top: 4.5px; margin-left: 4.5px; animation: loader_5191 675ms ease-in-out 600ms infinite; }
|
||||||
|
|
||||||
|
/* 1. 方块旋转 */
|
||||||
|
@keyframes sq-anim-1 { 0% { left: 0; top: 0; } 10.5% { left: 0; top: 0; } 12.5% { left: 8px; top: 0; } 23% { left: 8px; top: 0; } 25% { left: 16px; top: 0; } 35.5% { left: 16px; top: 0; } 37.5% { left: 16px; top: 8px; } 48% { left: 16px; top: 8px; } 50% { left: 8px; top: 8px; } 60.5% { left: 8px; top: 8px; } 62.5% { left: 8px; top: 16px; } 73% { left: 8px; top: 16px; } 75% { left: 0; top: 16px; } 85.5% { left: 0; top: 16px; } 87.5% { left: 0; top: 8px; } 98% { left: 0; top: 8px; } 100% { left: 0; top: 0; } }
|
||||||
|
.loader-1 { position: relative; width: 24px; height: 24px; transform: rotate(45deg); }
|
||||||
|
.loader-1-square { position: absolute; top: 0; left: 0; width: 3px; height: 3px; margin: 0.5px; background: var(--loader-color); animation: sq-anim-1 10s ease-in-out infinite both; }
|
||||||
|
.loader-1-square:nth-of-type(1) { animation-delay: -1.43s; }
|
||||||
|
.loader-1-square:nth-of-type(2) { animation-delay: -2.86s; }
|
||||||
|
.loader-1-square:nth-of-type(3) { animation-delay: -4.29s; }
|
||||||
|
.loader-1-square:nth-of-type(4) { animation-delay: -5.71s; }
|
||||||
|
.loader-1-square:nth-of-type(5) { animation-delay: -7.14s; }
|
||||||
|
.loader-1-square:nth-of-type(6) { animation-delay: -8.57s; }
|
||||||
|
.loader-1-square:nth-of-type(7) { animation-delay: -10s; }
|
||||||
|
|
||||||
|
/* 2. 双方块 */
|
||||||
|
.loader-2 { --size: 6px; width: 16px; height: 16px; position: relative; }
|
||||||
|
.loader-2::after, .loader-2::before { box-sizing: border-box; position: absolute; content: ""; width: var(--size); height: var(--size); top: 50%; animation: l2-up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; left: 50%; background: var(--loader-color); }
|
||||||
|
.loader-2::after { top: calc(50% - var(--size)); left: calc(50% - var(--size)); animation: l2-down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; }
|
||||||
|
@keyframes l2-down { 0%, 100% { transform: none; } 25% { transform: translateX(100%); } 50% { transform: translateX(100%) translateY(100%); } 75% { transform: translateY(100%); } }
|
||||||
|
@keyframes l2-up { 0%, 100% { transform: none; } 25% { transform: translateX(-100%); } 50% { transform: translateX(-100%) translateY(-100%); } 75% { transform: translateY(-100%); } }
|
||||||
|
|
||||||
|
/* 3. 弹跳 */
|
||||||
|
.loader-3 { width: 40px; height: 20px; position: relative; }
|
||||||
|
.loader-3-square { width: 3px; height: 3px; position: absolute; background-color: var(--loader-color); left: 15%; transform-origin: 50%; animation: l3-bounce .5s alternate infinite ease; }
|
||||||
|
@keyframes l3-bounce { 0% { top: 20px; height: 2px; transform: scaleX(1.7); } 40% { height: 3px; transform: scaleX(1); } 100% { top: 0%; } }
|
||||||
|
.loader-3-square:nth-child(2) { left: 45%; animation-delay: .2s; }
|
||||||
|
.loader-3-square:nth-child(3) { left: auto; right: 15%; animation-delay: .3s; }
|
||||||
|
|
||||||
|
/* 4. 五方块 */
|
||||||
|
.loader-4 { --sq: 3px; --off: 7.5px; width: calc(3 * var(--off) + var(--sq)); height: calc(2 * var(--off) + var(--sq)); position: relative; }
|
||||||
|
.loader-4 div { display: inline-block; background: var(--loader-color); width: var(--sq); height: var(--sq); position: absolute; }
|
||||||
|
.loader-4 #s1 { left: 0; top: 0; animation: l4-s1 2.4s 0.2s ease-in-out infinite; }
|
||||||
|
.loader-4 #s2 { left: 0; top: var(--off); animation: l4-s2 2.4s 0.2s ease-in-out infinite; }
|
||||||
|
.loader-4 #s3 { left: var(--off); top: var(--off); animation: l4-s3 2.4s 0.2s ease-in-out infinite; }
|
||||||
|
.loader-4 #s4 { left: calc(2 * var(--off)); top: var(--off); animation: l4-s4 2.4s 0.2s ease-in-out infinite; }
|
||||||
|
.loader-4 #s5 { left: calc(3 * var(--off)); top: var(--off); animation: l4-s5 2.4s 0.2s ease-in-out infinite; }
|
||||||
|
@keyframes l4-s1 { 0% { left: 0; top: 0; } 8.33% { left: 0; top: var(--off); } 100% { left: 0; top: var(--off); } }
|
||||||
|
@keyframes l4-s2 { 0% { left: 0; top: var(--off); } 8.33% { left: 0; top: calc(2 * var(--off)); } 16.67% { left: var(--off); top: calc(2 * var(--off)); } 25% { left: var(--off); top: var(--off); } 83.33% { left: var(--off); top: var(--off); } 91.67% { left: var(--off); top: 0; } 100% { left: 0; top: 0; } }
|
||||||
|
@keyframes l4-s3 { 0%, 100% { left: var(--off); top: var(--off); } 16.67% { left: var(--off); top: var(--off); } 25% { left: var(--off); top: 0; } 33.33% { left: calc(2 * var(--off)); top: 0; } 41.67% { left: calc(2 * var(--off)); top: var(--off); } 66.67% { left: calc(2 * var(--off)); top: var(--off); } 75% { left: calc(2 * var(--off)); top: calc(2 * var(--off)); } 83.33% { left: var(--off); top: calc(2 * var(--off)); } 91.67% { left: var(--off); top: var(--off); } }
|
||||||
|
@keyframes l4-s4 { 0% { left: calc(2 * var(--off)); top: var(--off); } 33.33% { left: calc(2 * var(--off)); top: var(--off); } 41.67% { left: calc(2 * var(--off)); top: calc(2 * var(--off)); } 50% { left: calc(3 * var(--off)); top: calc(2 * var(--off)); } 58.33% { left: calc(3 * var(--off)); top: var(--off); } 100% { left: calc(3 * var(--off)); top: var(--off); } }
|
||||||
|
@keyframes l4-s5 { 0% { left: calc(3 * var(--off)); top: var(--off); } 50% { left: calc(3 * var(--off)); top: var(--off); } 58.33% { left: calc(3 * var(--off)); top: 0; } 66.67% { left: calc(2 * var(--off)); top: 0; } 75% { left: calc(2 * var(--off)); top: var(--off); } 100% { left: calc(2 * var(--off)); top: var(--off); } }
|
||||||
|
|
||||||
|
/* 5. 九宫格 */
|
||||||
|
.loader-5 { position: relative; width: 20px; height: 20px; }
|
||||||
|
.loader-5-box { float: left; position: relative; width: 3px; height: 3px; margin-right: 4px; }
|
||||||
|
.loader-5-box:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--loader-color); }
|
||||||
|
.loader-5-box:nth-child(3n) { margin-right: 0; margin-bottom: 4px; }
|
||||||
|
.loader-5-box:nth-child(1):before, .loader-5-box:nth-child(4):before { margin-left: 7px; }
|
||||||
|
.loader-5-box:nth-child(3):before { margin-top: 14px; }
|
||||||
|
.loader-5-box:last-child { margin-bottom: 0; }
|
||||||
|
.loader-5-box:nth-child(1) { animation: l5-m1 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(2) { animation: l5-m2 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(3) { animation: l5-m3 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(4) { animation: l5-m4 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(5) { animation: l5-m5 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(6) { animation: l5-m6 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(7) { animation: l5-m7 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(8) { animation: l5-m8 4s infinite; }
|
||||||
|
.loader-5-box:nth-child(9) { animation: l5-m9 4s infinite; }
|
||||||
|
@keyframes l5-m1 { 9% { transform: translate(-7px, 0); } 18% { transform: translate(0, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(7px, 0); } 45% { transform: translate(7px, 7px); } 54% { transform: translate(7px, 7px); } 63% { transform: translate(7px, 7px); } 72% { transform: translate(7px, 0); } 81% { transform: translate(0, 0); } 90% { transform: translate(-7px, 0); } 100% { transform: translate(0, 0); } }
|
||||||
|
@keyframes l5-m2 { 9% { transform: translate(0, 0); } 18% { transform: translate(7px, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(7px, 0); } 45% { transform: translate(7px, 7px); } 54% { transform: translate(7px, 7px); } 63% { transform: translate(7px, 7px); } 72% { transform: translate(7px, 7px); } 81% { transform: translate(0, 7px); } 90% { transform: translate(0, 7px); } 100% { transform: translate(0, 0); } }
|
||||||
|
@keyframes l5-m3 { 9% { transform: translate(-7px, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(-7px, 0); } 45% { transform: translate(-7px, 0); } 54% { transform: translate(-7px, 0); } 63% { transform: translate(-7px, 0); } 72% { transform: translate(-7px, 0); } 81% { transform: translate(-7px, -7px); } 90% { transform: translate(0, -7px); } 100% { transform: translate(0, 0); } }
|
||||||
|
@keyframes l5-m4 { 9% { transform: translate(-7px, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(-7px, -7px); } 36% { transform: translate(0, -7px); } 45% { transform: translate(0, 0); } 54% { transform: translate(0, -7px); } 63% { transform: translate(0, -7px); } 72% { transform: translate(0, -7px); } 81% { transform: translate(-7px, -7px); } 90% { transform: translate(-7px, 0); } 100% { transform: translate(0, 0); } }
|
||||||
|
@keyframes l5-m5 { 9% { transform: translate(0, 0); } 18% { transform: translate(0, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(7px, 0); } 45% { transform: translate(7px, 0); } 54% { transform: translate(7px, 0); } 63% { transform: translate(7px, 0); } 72% { transform: translate(7px, 0); } 81% { transform: translate(7px, -7px); } 90% { transform: translate(0, -7px); } 100% { transform: translate(0, 0); } }
|
||||||
|
@keyframes l5-m6 { 9% { transform: translate(0, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(-7px, 0); } 36% { transform: translate(0, 0); } 45% { transform: translate(0, 0); } 54% { transform: translate(0, 0); } 63% { transform: translate(0, 0); } 72% { transform: translate(0, 7px); } 81% { transform: translate(-7px, 7px); } 90% { transform: translate(-7px, 0); } 100% { transform: translate(0, 0); } }
|
||||||
|
@keyframes l5-m7 { 9% { transform: translate(7px, 0); } 18% { transform: translate(7px, 0); } 27% { transform: translate(7px, 0); } 36% { transform: translate(0, 0); } 45% { transform: translate(0, -7px); } 54% { transform: translate(7px, -7px); } 63% { transform: translate(0, -7px); } 72% { transform: translate(0, -7px); } 81% { transform: translate(0, 0); } 90% { transform: translate(7px, 0); } 100% { transform: translate(0, 0); } }
|
||||||
|
@keyframes l5-m8 { 9% { transform: translate(0, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(-7px, -7px); } 36% { transform: translate(0, -7px); } 45% { transform: translate(0, -7px); } 54% { transform: translate(0, -7px); } 63% { transform: translate(0, -7px); } 72% { transform: translate(0, -7px); } 81% { transform: translate(7px, -7px); } 90% { transform: translate(7px, 0); } 100% { transform: translate(0, 0); } }
|
||||||
|
@keyframes l5-m9 { 9% { transform: translate(-7px, 0); } 18% { transform: translate(-7px, 0); } 27% { transform: translate(0, 0); } 36% { transform: translate(-7px, 0); } 45% { transform: translate(0, 0); } 54% { transform: translate(0, 0); } 63% { transform: translate(-7px, 0); } 72% { transform: translate(-7px, 0); } 81% { transform: translate(-14px, 0); } 90% { transform: translate(-7px, 0); } 100% { transform: translate(0, 0); } }
|
||||||
|
|
||||||
|
/* 6. 波纹 */
|
||||||
|
.loader-6 { --cell-size: 3px; --cell-spacing: 2px; --cells: 3; --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing))); display: flex; flex-wrap: wrap; width: var(--total-size); height: var(--total-size); }
|
||||||
|
.loader-6-cell { flex: 0 0 var(--cell-size); margin: var(--cell-spacing); background-color: transparent; box-sizing: border-box; animation: 1.5s l6-ripple ease infinite; }
|
||||||
|
.loader-6-cell.d-1 { animation-delay: 100ms; }
|
||||||
|
.loader-6-cell.d-2 { animation-delay: 200ms; }
|
||||||
|
.loader-6-cell.d-3 { animation-delay: 300ms; }
|
||||||
|
.loader-6-cell.d-4 { animation-delay: 400ms; }
|
||||||
|
.loader-6-cell:nth-child(1), .loader-6-cell:nth-child(2), .loader-6-cell:nth-child(3), .loader-6-cell:nth-child(4), .loader-6-cell:nth-child(5), .loader-6-cell:nth-child(6), .loader-6-cell:nth-child(7), .loader-6-cell:nth-child(8), .loader-6-cell:nth-child(9) { --cell-color: var(--loader-color); }
|
||||||
|
@keyframes l6-ripple { 0% { background-color: transparent; } 30% { background-color: var(--cell-color); } 60% { background-color: transparent; } 100% { background-color: transparent; } }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>加载动画预览 V2 - 统一风格</h1>
|
||||||
|
<div class="loader-grid">
|
||||||
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-0"><div class="loader-0-square" id="sq1"></div><div class="loader-0-square" id="sq2"></div><div class="loader-0-square" id="sq3"></div><div class="loader-0-square" id="sq4"></div><div class="loader-0-square" id="sq5"></div><div class="loader-0-square" id="sq6"></div><div class="loader-0-square" id="sq7"></div><div class="loader-0-square" id="sq8"></div><div class="loader-0-square" id="sq9"></div></div></div><div class="loader-title">0. 方格网格 (已有)</div></div>
|
||||||
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-1"><div class="loader-1-square"></div><div class="loader-1-square"></div><div class="loader-1-square"></div><div class="loader-1-square"></div><div class="loader-1-square"></div><div class="loader-1-square"></div><div class="loader-1-square"></div></div></div><div class="loader-title">1. 方块旋转</div></div>
|
||||||
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-2"></div></div><div class="loader-title">2. 双方块追逐</div></div>
|
||||||
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-3"><div class="loader-3-square"></div><div class="loader-3-square"></div><div class="loader-3-square"></div></div></div><div class="loader-title">3. 弹跳方块</div></div>
|
||||||
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-4"><div id="s1"></div><div id="s2"></div><div id="s3"></div><div id="s4"></div><div id="s5"></div></div></div><div class="loader-title">4. 五方块序列</div></div>
|
||||||
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-5"><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div></div></div><div class="loader-title">5. 九宫格动画</div></div>
|
||||||
|
<div class="loader-item"><div class="loader-wrapper"><div class="loader-6"><div class="loader-6-cell d-0"></div><div class="loader-6-cell d-1"></div><div class="loader-6-cell d-2"></div><div class="loader-6-cell d-1"></div><div class="loader-6-cell d-2"></div><div class="loader-6-cell d-2"></div><div class="loader-6-cell d-3"></div><div class="loader-6-cell d-3"></div><div class="loader-6-cell d-4"></div></div></div><div class="loader-title">6. 波纹方块</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
195
static/demo/minimal-mode-v2/index.html
Normal file
195
static/demo/minimal-mode-v2/index.html
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>极简模式 V2 - 无缝展开</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="chat-area">
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="message-block user-message">
|
||||||
|
<div class="message-header">
|
||||||
|
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="12" cy="7" r="4"></circle>
|
||||||
|
</svg>
|
||||||
|
<span>用户</span>
|
||||||
|
</div>
|
||||||
|
<div class="message-text">
|
||||||
|
帮我搜索一下最新的AI技术发展趋势
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI 消息 -->
|
||||||
|
<div class="message-block assistant-message">
|
||||||
|
<div class="message-header">
|
||||||
|
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||||||
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||||||
|
</svg>
|
||||||
|
<span>AI Assistant</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 等待动画 -->
|
||||||
|
<div class="generating-placeholder" id="generatingPlaceholder">
|
||||||
|
<span class="letter">思</span>
|
||||||
|
<span class="letter">考</span>
|
||||||
|
<span class="letter">中</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 摘要/第一步内容（可展开的） -->
|
||||||
|
<div class="summary-wrapper" id="summaryWrapper" style="display: none;">
|
||||||
|
<div class="summary-timeline">
|
||||||
|
<svg class="summary-icon" id="summaryIcon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||||||
|
<path d="M12 6v6l4 2"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="summary-line" id="summaryLine"></div>
|
||||||
|
</div>
|
||||||
|
<div class="summary-content" id="summaryContent">
|
||||||
|
<div class="summary-text collapsed" id="summaryText">
|
||||||
|
我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息...
|
||||||
|
</div>
|
||||||
|
<div class="summary-text-full" id="summaryTextFull" style="display: none;">
|
||||||
|
我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息。搜索关键词应该包括"AI技术"、"人工智能"、"2026"、"发展趋势"等。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 后续步骤 -->
|
||||||
|
<div class="steps-container" id="stepsContainer" style="display: none;">
|
||||||
|
<!-- 步骤1: 搜索网页 -->
|
||||||
|
<div class="step-item" data-step="1" style="display: none;">
|
||||||
|
<div class="step-timeline">
|
||||||
|
<svg class="step-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="11" cy="11" r="8"></circle>
|
||||||
|
<path d="m21 21-4.35-4.35"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="step-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<div class="step-header">搜索网页</div>
|
||||||
|
<div class="step-body">
|
||||||
|
<div class="tool-intent">搜索：AI技术发展趋势 2026</div>
|
||||||
|
<div class="tool-result">
|
||||||
|
<div class="result-item">
|
||||||
|
<div class="result-title">2026年AI技术十大趋势</div>
|
||||||
|
<div class="result-url">https://example.com/ai-trends-2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="result-item">
|
||||||
|
<div class="result-title">人工智能最新突破</div>
|
||||||
|
<div class="result-url">https://example.com/ai-breakthrough</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 步骤2: 思考 -->
|
||||||
|
<div class="step-item" data-step="2" style="display: none;">
|
||||||
|
<div class="step-timeline">
|
||||||
|
<svg class="step-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||||||
|
<path d="M12 6v6l4 2"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="step-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<div class="step-body">
|
||||||
|
<div class="thinking-content" id="thinkingContent2">
|
||||||
|
搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...
|
||||||
|
<button class="show-more-btn" onclick="expandThinking(2)">显示更多</button>
|
||||||
|
</div>
|
||||||
|
<div class="thinking-content-full" id="thinkingContentFull2" style="display: none;">
|
||||||
|
搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...
|
||||||
|
|
||||||
|
在执行之前，我需要确保命令的安全性和有效性。curl命令是一个常用的网络请求工具，可以帮助我获取网页内容。我会添加适当的参数来确保请求的稳定性，比如设置超时时间、用户代理等。
|
||||||
|
|
||||||
|
同时，我还需要考虑如何解析返回的HTML内容，提取出关键信息。可能需要使用一些文本处理工具，如grep、sed或awk来过滤和格式化数据。
|
||||||
|
<button class="show-less-btn" onclick="collapseThinking(2)">收起</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 步骤3: 执行命令 -->
|
||||||
|
<div class="step-item" data-step="3" style="display: none;">
|
||||||
|
<div class="step-timeline">
|
||||||
|
<svg class="step-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="4 17 10 11 4 5"></polyline>
|
||||||
|
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||||||
|
</svg>
|
||||||
|
<div class="step-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<div class="step-header">执行命令</div>
|
||||||
|
<div class="step-body">
|
||||||
|
<div class="tool-intent">获取网页内容并分析</div>
|
||||||
|
<div class="tool-result">
|
||||||
|
<div class="command-block">
|
||||||
|
<div class="command-header">
|
||||||
|
<span class="command-label">bash</span>
|
||||||
|
</div>
|
||||||
|
<pre class="command-code">curl -s "https://example.com/ai-trends-2026" | grep -i "trend"</pre>
|
||||||
|
<div class="command-output">
|
||||||
|
<div class="output-line">Trend 1: 多模态AI模型的普及</div>
|
||||||
|
<div class="output-line">Trend 2: AI安全性和可解释性</div>
|
||||||
|
<div class="output-line">Trend 3: 边缘AI计算</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 步骤4: 思考 -->
|
||||||
|
<div class="step-item" data-step="4" style="display: none;">
|
||||||
|
<div class="step-timeline">
|
||||||
|
<svg class="step-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||||||
|
<path d="M12 6v6l4 2"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="step-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="step-content">
|
||||||
|
<div class="step-body">
|
||||||
|
<div class="thinking-content">
|
||||||
|
很好，我已经收集到了足够的信息。现在我可以整理这些内容，为用户提供一个清晰、全面的答案。我会按照趋势的重要性和影响力来组织内容。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最终输出 -->
|
||||||
|
<div class="text-output" id="textOutput" style="display: none;">
|
||||||
|
<div class="text-content">
|
||||||
|
<p>根据我的搜索和分析，2026年AI技术的主要发展趋势包括：</p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>多模态AI模型的普及</strong>：能够同时处理文本、图像、音频等多种数据类型的AI模型将成为主流。</li>
|
||||||
|
<li><strong>AI安全性和可解释性</strong>：随着AI应用的广泛部署，确保AI系统的安全性和决策的可解释性变得越来越重要。</li>
|
||||||
|
<li><strong>边缘AI计算</strong>：将AI计算能力部署到边缘设备，实现更快的响应速度和更好的隐私保护。</li>
|
||||||
|
</ol>
|
||||||
|
<p>这些趋势将深刻影响各行各业的数字化转型进程。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 控制面板 -->
|
||||||
|
<div class="control-panel">
|
||||||
|
<button onclick="startDemo()" class="control-btn">开始演示</button>
|
||||||
|
<button onclick="resetDemo()" class="control-btn">重置</button>
|
||||||
|
<button onclick="toggleExpand()" class="control-btn">切换展开/折叠</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
413
static/demo/minimal-mode-v2/script.js
Normal file
413
static/demo/minimal-mode-v2/script.js
Normal file
@ -0,0 +1,413 @@
|
|||||||
|
// 全局状态
|
||||||
|
let currentStep = 0;
|
||||||
|
let isExpanded = false;
|
||||||
|
let demoRunning = false;
|
||||||
|
|
||||||
|
// 步骤配置
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
type: 'thinking',
|
||||||
|
icon: 'brain',
|
||||||
|
summary: '我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息...',
|
||||||
|
fullText: '我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息。搜索关键词应该包括"AI技术"、"人工智能"、"2026"、"发展趋势"等。',
|
||||||
|
duration: 2000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'tool',
|
||||||
|
icon: 'search',
|
||||||
|
summary: '搜索：AI技术发展趋势 2026',
|
||||||
|
duration: 2500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'thinking',
|
||||||
|
icon: 'brain',
|
||||||
|
summary: '搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析...',
|
||||||
|
fullText: '搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...\n\n在执行之前，我需要确保命令的安全性和有效性。curl命令是一个常用的网络请求工具，可以帮助我获取网页内容。我会添加适当的参数来确保请求的稳定性，比如设置超时时间、用户代理等。\n\n同时，我还需要考虑如何解析返回的HTML内容，提取出关键信息。可能需要使用一些文本处理工具，如grep、sed或awk来过滤和格式化数据。',
|
||||||
|
duration: 2000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'tool',
|
||||||
|
icon: 'terminal',
|
||||||
|
summary: '执行命令：获取网页内容并分析',
|
||||||
|
duration: 2500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'thinking',
|
||||||
|
icon: 'brain',
|
||||||
|
summary: '很好，我已经收集到了足够的信息。现在我可以整理这些内容，为用户提供一个清晰、全面的答案...',
|
||||||
|
fullText: '很好，我已经收集到了足够的信息。现在我可以整理这些内容，为用户提供一个清晰、全面的答案。我会按照趋势的重要性和影响力来组织内容。',
|
||||||
|
duration: 2000
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 最终输出文本
|
||||||
|
const finalOutputText = `根据我的搜索和分析，2026年AI技术的主要发展趋势包括：
|
||||||
|
|
||||||
|
1. **多模态AI模型的普及**：能够同时处理文本、图像、音频等多种数据类型的AI模型将成为主流。
|
||||||
|
|
||||||
|
2. **AI安全性和可解释性**：随着AI应用的广泛部署，确保AI系统的安全性和决策的可解释性变得越来越重要。
|
||||||
|
|
||||||
|
3. **边缘AI计算**：将AI计算能力部署到边缘设备，实现更快的响应速度和更好的隐私保护。
|
||||||
|
|
||||||
|
这些趋势将深刻影响各行各业的数字化转型进程。`;
|
||||||
|
|
||||||
|
// 开始演示
|
||||||
|
async function startDemo() {
|
||||||
|
if (demoRunning) return;
|
||||||
|
|
||||||
|
demoRunning = true;
|
||||||
|
resetDemo();
|
||||||
|
|
||||||
|
// 显示等待动画
|
||||||
|
const placeholder = document.getElementById('generatingPlaceholder');
|
||||||
|
placeholder.style.display = 'flex';
|
||||||
|
|
||||||
|
await sleep(1500);
|
||||||
|
|
||||||
|
// 隐藏等待动画，显示摘要包装器
|
||||||
|
placeholder.style.display = 'none';
|
||||||
|
const summaryWrapper = document.getElementById('summaryWrapper');
|
||||||
|
summaryWrapper.style.display = 'flex';
|
||||||
|
summaryWrapper.classList.add('running');
|
||||||
|
|
||||||
|
// 执行每个步骤
|
||||||
|
for (let i = 0; i < steps.length; i++) {
|
||||||
|
currentStep = i;
|
||||||
|
await executeStep(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 完成后移除运行状态
|
||||||
|
await sleep(500);
|
||||||
|
summaryWrapper.classList.remove('running');
|
||||||
|
|
||||||
|
// 如果展开状态，显示最后一步
|
||||||
|
if (isExpanded) {
|
||||||
|
await showDetailStep(currentStep, true);
|
||||||
|
} else {
|
||||||
|
// 折叠状态下，摘要显示第一步内容
|
||||||
|
updateSummary(steps[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
await sleep(800);
|
||||||
|
|
||||||
|
// 显示最终输出（流式）
|
||||||
|
const textOutput = document.getElementById('textOutput');
|
||||||
|
textOutput.style.display = 'block';
|
||||||
|
setTimeout(() => {
|
||||||
|
textOutput.classList.add('show');
|
||||||
|
}, 50);
|
||||||
|
|
||||||
|
// 流式输出最终文本
|
||||||
|
await streamText(document.querySelector('.text-content'), finalOutputText, 20);
|
||||||
|
|
||||||
|
demoRunning = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 执行单个步骤
|
||||||
|
async function executeStep(stepIndex) {
|
||||||
|
const step = steps[stepIndex];
|
||||||
|
|
||||||
|
// 更新摘要（仅在折叠状态下）
|
||||||
|
if (!isExpanded) {
|
||||||
|
// 流式输出摘要文本
|
||||||
|
await streamSummary(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果展开状态，显示详细内容
|
||||||
|
if (isExpanded) {
|
||||||
|
await showDetailStep(stepIndex, true);
|
||||||
|
|
||||||
|
// 如果是思考类型，流式输出完整内容
|
||||||
|
if (step.type === 'thinking' && step.fullText) {
|
||||||
|
const stepBody = document.querySelector(`.step-item[data-step="${stepIndex + 1}"] .step-body`);
|
||||||
|
if (stepBody) {
|
||||||
|
stepBody.textContent = '';
|
||||||
|
await streamText(stepBody, step.fullText, 30);
|
||||||
|
// 更新竖线高度
|
||||||
|
updateLineHeight(stepIndex + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示下一个步骤的竖线（如果有下一个步骤）
|
||||||
|
if (stepIndex < steps.length - 1) {
|
||||||
|
if (isExpanded) {
|
||||||
|
// 展开状态：显示当前步骤的竖线
|
||||||
|
const currentStepItem = document.querySelector(`.step-item[data-step="${stepIndex + 1}"]`);
|
||||||
|
if (currentStepItem) {
|
||||||
|
const line = currentStepItem.querySelector('.step-line');
|
||||||
|
if (line) {
|
||||||
|
updateLineHeight(stepIndex + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 折叠状态：显示摘要的竖线（暂时不需要，因为只在展开时才有步骤）
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await sleep(step.duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 流式输出摘要文本
|
||||||
|
async function streamSummary(step) {
|
||||||
|
const summaryIcon = document.getElementById('summaryIcon');
|
||||||
|
const summaryText = document.getElementById('summaryText');
|
||||||
|
|
||||||
|
// 更新图标
|
||||||
|
summaryIcon.innerHTML = getIconSVG(step.icon);
|
||||||
|
|
||||||
|
// 流式输出文本
|
||||||
|
summaryText.textContent = '';
|
||||||
|
await streamText(summaryText, step.summary, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 流式输出文本
|
||||||
|
async function streamText(element, text, speed = 30) {
|
||||||
|
element.textContent = '';
|
||||||
|
for (let i = 0; i < text.length; i++) {
|
||||||
|
element.textContent += text[i];
|
||||||
|
await sleep(speed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新摘要
|
||||||
|
function updateSummary(step) {
|
||||||
|
const summaryIcon = document.getElementById('summaryIcon');
|
||||||
|
const summaryText = document.getElementById('summaryText');
|
||||||
|
|
||||||
|
// 更新图标
|
||||||
|
summaryIcon.innerHTML = getIconSVG(step.icon);
|
||||||
|
|
||||||
|
// 更新文本
|
||||||
|
summaryText.textContent = step.summary;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示详细步骤
|
||||||
|
async function showDetailStep(stepIndex, isNewStep = false) {
|
||||||
|
const stepItem = document.querySelector(`.step-item[data-step="${stepIndex + 1}"]`);
|
||||||
|
if (!stepItem) return;
|
||||||
|
|
||||||
|
// 添加动画类
|
||||||
|
if (isNewStep) {
|
||||||
|
stepItem.classList.add('animated');
|
||||||
|
} else {
|
||||||
|
stepItem.classList.add('instant');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示步骤
|
||||||
|
stepItem.style.display = 'flex';
|
||||||
|
|
||||||
|
// 等待动画
|
||||||
|
await sleep(isNewStep ? 100 : 10);
|
||||||
|
|
||||||
|
// 如果有下一个步骤，显示当前步骤的竖线
|
||||||
|
if (stepIndex < steps.length - 1) {
|
||||||
|
updateLineHeight(stepIndex + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
await sleep(isNewStep ? 250 : 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新竖线高度
|
||||||
|
function updateLineHeight(stepIndex) {
|
||||||
|
const stepItem = document.querySelector(`.step-item[data-step="${stepIndex}"]`);
|
||||||
|
if (!stepItem) return;
|
||||||
|
|
||||||
|
const line = stepItem.querySelector('.step-line');
|
||||||
|
const stepContent = stepItem.querySelector('.step-content');
|
||||||
|
if (!line || !stepContent) return;
|
||||||
|
|
||||||
|
// 获取内容的实际高度
|
||||||
|
const contentHeight = stepContent.offsetHeight;
|
||||||
|
|
||||||
|
// 如果是最后一个步骤，不需要竖线
|
||||||
|
if (stepIndex >= steps.length) {
|
||||||
|
line.style.height = '0';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算竖线高度：内容高度 + 间距
|
||||||
|
const gap = 16;
|
||||||
|
const lineHeight = Math.max(contentHeight + gap, 40);
|
||||||
|
line.style.height = `${lineHeight}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换展开/折叠
|
||||||
|
async function toggleExpand() {
|
||||||
|
const summaryWrapper = document.getElementById('summaryWrapper');
|
||||||
|
if (summaryWrapper.style.display === 'none') return;
|
||||||
|
|
||||||
|
isExpanded = !isExpanded;
|
||||||
|
|
||||||
|
if (isExpanded) {
|
||||||
|
// 展开：显示完整文本，隐藏摘要文本
|
||||||
|
summaryWrapper.classList.add('expanded');
|
||||||
|
|
||||||
|
const summaryText = document.getElementById('summaryText');
|
||||||
|
const summaryTextFull = document.getElementById('summaryTextFull');
|
||||||
|
const summaryLine = document.getElementById('summaryLine');
|
||||||
|
const stepsContainer = document.getElementById('stepsContainer');
|
||||||
|
|
||||||
|
// 切换文本显示
|
||||||
|
summaryText.style.display = 'none';
|
||||||
|
summaryTextFull.style.display = 'block';
|
||||||
|
|
||||||
|
// 显示连接线
|
||||||
|
await sleep(50);
|
||||||
|
summaryLine.style.height = '20px';
|
||||||
|
|
||||||
|
// 显示步骤容器
|
||||||
|
stepsContainer.style.display = 'block';
|
||||||
|
await sleep(50);
|
||||||
|
stepsContainer.classList.add('show');
|
||||||
|
|
||||||
|
// 快速显示已完成的步骤
|
||||||
|
for (let i = 0; i <= currentStep; i++) {
|
||||||
|
const isCurrentStep = i === currentStep && demoRunning;
|
||||||
|
await showDetailStep(i, isCurrentStep);
|
||||||
|
if (!isCurrentStep) {
|
||||||
|
await sleep(30); // 已有内容快速出现
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 折叠：显示摘要文本，隐藏完整文本
|
||||||
|
summaryWrapper.classList.remove('expanded');
|
||||||
|
|
||||||
|
const summaryText = document.getElementById('summaryText');
|
||||||
|
const summaryTextFull = document.getElementById('summaryTextFull');
|
||||||
|
const summaryLine = document.getElementById('summaryLine');
|
||||||
|
const stepsContainer = document.getElementById('stepsContainer');
|
||||||
|
|
||||||
|
// 隐藏步骤容器
|
||||||
|
stepsContainer.classList.remove('show');
|
||||||
|
await sleep(250);
|
||||||
|
stepsContainer.style.display = 'none';
|
||||||
|
|
||||||
|
// 隐藏连接线
|
||||||
|
summaryLine.style.height = '0';
|
||||||
|
|
||||||
|
// 切换文本显示
|
||||||
|
summaryText.style.display = 'block';
|
||||||
|
summaryTextFull.style.display = 'none';
|
||||||
|
|
||||||
|
// 更新摘要为第一步内容（不是当前步骤）
|
||||||
|
updateSummary(steps[0]);
|
||||||
|
|
||||||
|
// 重置所有步骤显示
|
||||||
|
document.querySelectorAll('.step-item').forEach(item => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
item.classList.remove('instant', 'animated');
|
||||||
|
const line = item.querySelector('.step-line');
|
||||||
|
if (line) {
|
||||||
|
line.style.height = '0';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 展开思考内容
|
||||||
|
function expandThinking(stepIndex) {
|
||||||
|
const thinkingContent = document.getElementById(`thinkingContent${stepIndex}`);
|
||||||
|
const thinkingContentFull = document.getElementById(`thinkingContentFull${stepIndex}`);
|
||||||
|
|
||||||
|
thinkingContent.style.display = 'none';
|
||||||
|
thinkingContentFull.style.display = 'block';
|
||||||
|
|
||||||
|
// 重新计算并更新竖线高度
|
||||||
|
setTimeout(() => {
|
||||||
|
updateLineHeight(stepIndex);
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 收起思考内容
|
||||||
|
function collapseThinking(stepIndex) {
|
||||||
|
const thinkingContent = document.getElementById(`thinkingContent${stepIndex}`);
|
||||||
|
const thinkingContentFull = document.getElementById(`thinkingContentFull${stepIndex}`);
|
||||||
|
|
||||||
|
thinkingContent.style.display = 'block';
|
||||||
|
thinkingContentFull.style.display = 'none';
|
||||||
|
|
||||||
|
// 重新计算并更新竖线高度
|
||||||
|
setTimeout(() => {
|
||||||
|
updateLineHeight(stepIndex);
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置演示
|
||||||
|
function resetDemo() {
|
||||||
|
currentStep = 0;
|
||||||
|
isExpanded = false;
|
||||||
|
demoRunning = false;
|
||||||
|
|
||||||
|
// 隐藏所有元素
|
||||||
|
document.getElementById('generatingPlaceholder').style.display = 'none';
|
||||||
|
|
||||||
|
const summaryWrapper = document.getElementById('summaryWrapper');
|
||||||
|
summaryWrapper.style.display = 'none';
|
||||||
|
summaryWrapper.classList.remove('running', 'expanded');
|
||||||
|
|
||||||
|
const summaryText = document.getElementById('summaryText');
|
||||||
|
const summaryTextFull = document.getElementById('summaryTextFull');
|
||||||
|
summaryText.style.display = 'block';
|
||||||
|
summaryTextFull.style.display = 'none';
|
||||||
|
|
||||||
|
const summaryLine = document.getElementById('summaryLine');
|
||||||
|
summaryLine.style.height = '0';
|
||||||
|
|
||||||
|
const stepsContainer = document.getElementById('stepsContainer');
|
||||||
|
stepsContainer.style.display = 'none';
|
||||||
|
stepsContainer.classList.remove('show');
|
||||||
|
|
||||||
|
const textOutput = document.getElementById('textOutput');
|
||||||
|
textOutput.style.display = 'none';
|
||||||
|
textOutput.classList.remove('show');
|
||||||
|
const textContent = textOutput.querySelector('.text-content');
|
||||||
|
if (textContent) {
|
||||||
|
textContent.innerHTML = `<p>根据我的搜索和分析，2026年AI技术的主要发展趋势包括：</p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>多模态AI模型的普及</strong>：能够同时处理文本、图像、音频等多种数据类型的AI模型将成为主流。</li>
|
||||||
|
<li><strong>AI安全性和可解释性</strong>：随着AI应用的广泛部署，确保AI系统的安全性和决策的可解释性变得越来越重要。</li>
|
||||||
|
<li><strong>边缘AI计算</strong>：将AI计算能力部署到边缘设备，实现更快的响应速度和更好的隐私保护。</li>
|
||||||
|
</ol>
|
||||||
|
<p>这些趋势将深刻影响各行各业的数字化转型进程。</p>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置所有步骤
|
||||||
|
document.querySelectorAll('.step-item').forEach(item => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
item.classList.remove('instant', 'animated');
|
||||||
|
const line = item.querySelector('.step-line');
|
||||||
|
if (line) {
|
||||||
|
line.style.height = '0';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置思考内容
|
||||||
|
document.querySelectorAll('.thinking-content').forEach(item => {
|
||||||
|
item.style.display = 'block';
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.thinking-content-full').forEach(item => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置摘要文本
|
||||||
|
updateSummary(steps[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取图标SVG
|
||||||
|
function getIconSVG(iconType) {
|
||||||
|
const icons = {
|
||||||
|
brain: '<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path><path d="M12 6v6l4 2"></path>',
|
||||||
|
search: '<circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path>',
|
||||||
|
terminal: '<polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line>'
|
||||||
|
};
|
||||||
|
return icons[iconType] || icons.brain;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 工具函数：延迟
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击摘要包装器切换展开/折叠
|
||||||
|
document.getElementById('summaryWrapper').addEventListener('click', toggleExpand);
|
||||||
448
static/demo/minimal-mode-v2/style.css
Normal file
448
static/demo/minimal-mode-v2/style.css
Normal file
@ -0,0 +1,448 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||||
|
background: #f8f9fa;
|
||||||
|
color: #1a1a1a;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-area {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 32px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 消息块 */
|
||||||
|
.message-block {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 用户消息 */
|
||||||
|
.user-message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-message .message-text {
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
padding: 14px 18px;
|
||||||
|
border-radius: 16px;
|
||||||
|
max-width: 60%;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* AI消息 */
|
||||||
|
.assistant-message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 等待动画 */
|
||||||
|
.generating-placeholder {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 12px 0;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generating-placeholder .letter {
|
||||||
|
display: inline-block;
|
||||||
|
animation: wave 1.6s ease-in-out infinite;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generating-placeholder .letter:nth-child(1) { animation-delay: 0s; }
|
||||||
|
.generating-placeholder .letter:nth-child(2) { animation-delay: 0.1s; }
|
||||||
|
.generating-placeholder .letter:nth-child(3) { animation-delay: 0.2s; }
|
||||||
|
.generating-placeholder .letter:nth-child(4) { animation-delay: 0.3s; }
|
||||||
|
.generating-placeholder .letter:nth-child(5) { animation-delay: 0.4s; }
|
||||||
|
.generating-placeholder .letter:nth-child(6) { animation-delay: 0.5s; }
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.4;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 摘要包装器 */
|
||||||
|
.summary-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-wrapper:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 摘要时间线 */
|
||||||
|
.summary-timeline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-icon {
|
||||||
|
color: #999;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-line {
|
||||||
|
width: 2px;
|
||||||
|
height: 0;
|
||||||
|
background: #e0e0e0;
|
||||||
|
margin-top: 6px;
|
||||||
|
transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-wrapper.expanded .summary-line {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 摘要内容 */
|
||||||
|
.summary-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 1.6;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-text.collapsed {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-text.collapsed::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 40px;
|
||||||
|
background: linear-gradient(to right, transparent, white);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-text-full {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 运行中的发光效果（字体颜色变化） */
|
||||||
|
.summary-wrapper.running .summary-text,
|
||||||
|
.summary-wrapper.running .summary-text-full {
|
||||||
|
animation: textGlow 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes textGlow {
|
||||||
|
0%, 100% {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
color: #6464ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 步骤容器 */
|
||||||
|
.steps-container {
|
||||||
|
opacity: 0;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
||||||
|
max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps-container.show {
|
||||||
|
opacity: 1;
|
||||||
|
max-height: 3000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 步骤项 */
|
||||||
|
.step-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-8px);
|
||||||
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-item.instant {
|
||||||
|
animation: fadeInStep 0.15s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-item.animated {
|
||||||
|
animation: fadeInStep 0.35s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInStep {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 步骤时间线 */
|
||||||
|
.step-timeline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-icon {
|
||||||
|
color: #666;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line {
|
||||||
|
width: 2px;
|
||||||
|
background: #e0e0e0;
|
||||||
|
margin-top: 6px;
|
||||||
|
transition: height 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-item:last-child .step-line {
|
||||||
|
height: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 步骤内容 */
|
||||||
|
.step-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-header {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #999;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-body {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 思考内容 */
|
||||||
|
.thinking-content {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
max-height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-content-full {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-more-btn,
|
||||||
|
.show-less-btn {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-more-btn:hover,
|
||||||
|
.show-less-btn:hover {
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工具内容 */
|
||||||
|
.tool-intent {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #444;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-result {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item {
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-title {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-url {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 命令块 */
|
||||||
|
.command-block {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-header {
|
||||||
|
background: #e9ecef;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-code {
|
||||||
|
padding: 12px;
|
||||||
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-output {
|
||||||
|
padding: 12px;
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.output-line {
|
||||||
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 最终输出 */
|
||||||
|
.text-output {
|
||||||
|
margin-top: 16px;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-output.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content ol {
|
||||||
|
margin-left: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content li {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content strong {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 控制面板 */
|
||||||
|
.control-panel {
|
||||||
|
margin-top: 32px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:hover {
|
||||||
|
background: #0056b3;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
191
static/demo/minimal-mode/index.html
Normal file
191
static/demo/minimal-mode/index.html
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>极简模式 Demo</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="chat-area">
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="message-block user-message">
|
||||||
|
<div class="message-header">
|
||||||
|
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="12" cy="7" r="4"></circle>
|
||||||
|
</svg>
|
||||||
|
<span>用户</span>
|
||||||
|
</div>
|
||||||
|
<div class="message-text">
|
||||||
|
帮我搜索一下最新的AI技术发展趋势
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI 消息 -->
|
||||||
|
<div class="message-block assistant-message">
|
||||||
|
<div class="message-header">
|
||||||
|
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||||||
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||||||
|
</svg>
|
||||||
|
<span>AI Assistant</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 等待动画 -->
|
||||||
|
<div class="generating-placeholder" id="generatingPlaceholder">
|
||||||
|
<span class="letter">思</span>
|
||||||
|
<span class="letter">考</span>
|
||||||
|
<span class="letter">中</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 摘要行 -->
|
||||||
|
<div class="summary-line" id="summaryLine" style="display: none;">
|
||||||
|
<svg class="summary-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<polyline points="12 6 12 12 16 14"></polyline>
|
||||||
|
</svg>
|
||||||
|
<span class="summary-text" id="summaryText">正在思考如何搜索...</span>
|
||||||
|
<div class="shimmer-overlay"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 展开的详细内容 -->
|
||||||
|
<div class="detail-view" id="detailView" style="display: none;">
|
||||||
|
<div class="timeline-container">
|
||||||
|
<!-- 左侧时间线 -->
|
||||||
|
<div class="timeline">
|
||||||
|
<!-- 第一个步骤不显示图标，使用摘要行的图标 -->
|
||||||
|
<div class="timeline-item timeline-item-first" data-step="0">
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item" data-step="1" style="display: none;">
|
||||||
|
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="11" cy="11" r="8"></circle>
|
||||||
|
<path d="m21 21-4.35-4.35"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item" data-step="2" style="display: none;">
|
||||||
|
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||||||
|
<path d="M12 6v6l4 2"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item" data-step="3" style="display: none;">
|
||||||
|
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="4 17 10 11 4 5"></polyline>
|
||||||
|
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||||||
|
</svg>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item" data-step="4" style="display: none;">
|
||||||
|
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||||||
|
<path d="M12 6v6l4 2"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧内容 -->
|
||||||
|
<div class="content-area">
|
||||||
|
<div class="content-item" data-step="0">
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="thinking-content" id="thinkingContent0">
|
||||||
|
我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息。搜索关键词应该包括"AI技术"、"人工智能"、"2026"、"发展趋势"等。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item" data-step="1" style="display: none;">
|
||||||
|
<div class="content-header">搜索网页</div>
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="tool-intent">搜索：AI技术发展趋势 2026</div>
|
||||||
|
<div class="tool-result">
|
||||||
|
<div class="result-item">
|
||||||
|
<div class="result-title">2026年AI技术十大趋势</div>
|
||||||
|
<div class="result-url">https://example.com/ai-trends-2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="result-item">
|
||||||
|
<div class="result-title">人工智能最新突破</div>
|
||||||
|
<div class="result-url">https://example.com/ai-breakthrough</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item" data-step="2" style="display: none;">
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="thinking-content" id="thinkingContent2">
|
||||||
|
搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...
|
||||||
|
<button class="show-more-btn" onclick="expandThinking(2)">显示更多</button>
|
||||||
|
</div>
|
||||||
|
<div class="thinking-content-full" id="thinkingContentFull2" style="display: none;">
|
||||||
|
搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...
|
||||||
|
|
||||||
|
在执行之前，我需要确保命令的安全性和有效性。curl命令是一个常用的网络请求工具，可以帮助我获取网页内容。我会添加适当的参数来确保请求的稳定性，比如设置超时时间、用户代理等。
|
||||||
|
|
||||||
|
同时，我还需要考虑如何解析返回的HTML内容，提取出关键信息。可能需要使用一些文本处理工具，如grep、sed或awk来过滤和格式化数据。
|
||||||
|
<button class="show-less-btn" onclick="collapseThinking(2)">收起</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item" data-step="3" style="display: none;">
|
||||||
|
<div class="content-header">执行命令</div>
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="tool-intent">获取网页内容并分析</div>
|
||||||
|
<div class="tool-result">
|
||||||
|
<div class="command-block">
|
||||||
|
<div class="command-header">
|
||||||
|
<span class="command-label">bash</span>
|
||||||
|
</div>
|
||||||
|
<pre class="command-code">curl -s "https://example.com/ai-trends-2026" | grep -i "trend"</pre>
|
||||||
|
<div class="command-output">
|
||||||
|
<div class="output-line">Trend 1: 多模态AI模型的普及</div>
|
||||||
|
<div class="output-line">Trend 2: AI安全性和可解释性</div>
|
||||||
|
<div class="output-line">Trend 3: 边缘AI计算</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item" data-step="4" style="display: none;">
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="thinking-content" id="thinkingContent4">
|
||||||
|
很好，我已经收集到了足够的信息。现在我可以整理这些内容，为用户提供一个清晰、全面的答案。我会按照趋势的重要性和影响力来组织内容。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最终输出 -->
|
||||||
|
<div class="text-output" id="textOutput" style="display: none;">
|
||||||
|
<div class="text-content">
|
||||||
|
<p>根据我的搜索和分析，2026年AI技术的主要发展趋势包括：</p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>多模态AI模型的普及</strong>：能够同时处理文本、图像、音频等多种数据类型的AI模型将成为主流。</li>
|
||||||
|
<li><strong>AI安全性和可解释性</strong>：随着AI应用的广泛部署，确保AI系统的安全性和决策的可解释性变得越来越重要。</li>
|
||||||
|
<li><strong>边缘AI计算</strong>：将AI计算能力部署到边缘设备，实现更快的响应速度和更好的隐私保护。</li>
|
||||||
|
</ol>
|
||||||
|
<p>这些趋势将深刻影响各行各业的数字化转型进程。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 控制面板 -->
|
||||||
|
<div class="control-panel">
|
||||||
|
<button onclick="startDemo()" class="control-btn">开始演示</button>
|
||||||
|
<button onclick="resetDemo()" class="control-btn">重置</button>
|
||||||
|
<button onclick="toggleSummary()" class="control-btn">切换展开/折叠</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
191
static/demo/minimal-mode/index.html.backup
Normal file
191
static/demo/minimal-mode/index.html.backup
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>极简模式 Demo</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="chat-area">
|
||||||
|
<!-- 用户消息 -->
|
||||||
|
<div class="message-block user-message">
|
||||||
|
<div class="message-header">
|
||||||
|
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="12" cy="7" r="4"></circle>
|
||||||
|
</svg>
|
||||||
|
<span>用户</span>
|
||||||
|
</div>
|
||||||
|
<div class="message-text">
|
||||||
|
帮我搜索一下最新的AI技术发展趋势
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI 消息 -->
|
||||||
|
<div class="message-block assistant-message">
|
||||||
|
<div class="message-header">
|
||||||
|
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||||||
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||||||
|
</svg>
|
||||||
|
<span>AI Assistant</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 等待动画 -->
|
||||||
|
<div class="generating-placeholder" id="generatingPlaceholder">
|
||||||
|
<span class="letter">思</span>
|
||||||
|
<span class="letter">考</span>
|
||||||
|
<span class="letter">中</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
<span class="letter">.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 摘要行 -->
|
||||||
|
<div class="summary-line" id="summaryLine" style="display: none;">
|
||||||
|
<svg class="summary-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<polyline points="12 6 12 12 16 14"></polyline>
|
||||||
|
</svg>
|
||||||
|
<span class="summary-text" id="summaryText">正在思考如何搜索...</span>
|
||||||
|
<div class="shimmer-overlay"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 展开的详细内容 -->
|
||||||
|
<div class="detail-view" id="detailView" style="display: none;">
|
||||||
|
<div class="timeline-container">
|
||||||
|
<!-- 左侧时间线 -->
|
||||||
|
<div class="timeline">
|
||||||
|
<!-- 第一个步骤不显示图标，使用摘要行的图标 -->
|
||||||
|
<div class="timeline-item timeline-item-first" data-step="0">
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item" data-step="1" style="display: none;">
|
||||||
|
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="11" cy="11" r="8"></circle>
|
||||||
|
<path d="m21 21-4.35-4.35"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item" data-step="2" style="display: none;">
|
||||||
|
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||||||
|
<path d="M12 6v6l4 2"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item" data-step="3" style="display: none;">
|
||||||
|
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<polyline points="4 17 10 11 4 5"></polyline>
|
||||||
|
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||||||
|
</svg>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item" data-step="4" style="display: none;">
|
||||||
|
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||||||
|
<path d="M12 6v6l4 2"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="timeline-line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧内容 -->
|
||||||
|
<div class="content-area">
|
||||||
|
<div class="content-item" data-step="0">
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="thinking-content" id="thinkingContent0">
|
||||||
|
我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息。搜索关键词应该包括"AI技术"、"人工智能"、"2026"、"发展趋势"等。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item" data-step="1" style="display: none;">
|
||||||
|
<div class="content-header">搜索网页</div>
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="tool-intent">搜索：AI技术发展趋势 2026</div>
|
||||||
|
<div class="tool-result">
|
||||||
|
<div class="result-item">
|
||||||
|
<div class="result-title">2026年AI技术十大趋势</div>
|
||||||
|
<div class="result-url">https://example.com/ai-trends-2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="result-item">
|
||||||
|
<div class="result-title">人工智能最新突破</div>
|
||||||
|
<div class="result-url">https://example.com/ai-breakthrough</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item" data-step="2" style="display: none;">
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="thinking-content" id="thinkingContent2">
|
||||||
|
搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...
|
||||||
|
<button class="show-more-btn" onclick="expandThinking(2)">显示更多</button>
|
||||||
|
</div>
|
||||||
|
<div class="thinking-content-full" id="thinkingContentFull2" style="display: none;">
|
||||||
|
搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...
|
||||||
|
|
||||||
|
在执行之前，我需要确保命令的安全性和有效性。curl命令是一个常用的网络请求工具，可以帮助我获取网页内容。我会添加适当的参数来确保请求的稳定性，比如设置超时时间、用户代理等。
|
||||||
|
|
||||||
|
同时，我还需要考虑如何解析返回的HTML内容，提取出关键信息。可能需要使用一些文本处理工具，如grep、sed或awk来过滤和格式化数据。
|
||||||
|
<button class="show-less-btn" onclick="collapseThinking(2)">收起</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item" data-step="3" style="display: none;">
|
||||||
|
<div class="content-header">执行命令</div>
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="tool-intent">获取网页内容并分析</div>
|
||||||
|
<div class="tool-result">
|
||||||
|
<div class="command-block">
|
||||||
|
<div class="command-header">
|
||||||
|
<span class="command-label">bash</span>
|
||||||
|
</div>
|
||||||
|
<pre class="command-code">curl -s "https://example.com/ai-trends-2026" | grep -i "trend"</pre>
|
||||||
|
<div class="command-output">
|
||||||
|
<div class="output-line">Trend 1: 多模态AI模型的普及</div>
|
||||||
|
<div class="output-line">Trend 2: AI安全性和可解释性</div>
|
||||||
|
<div class="output-line">Trend 3: 边缘AI计算</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item" data-step="4" style="display: none;">
|
||||||
|
<div class="content-body">
|
||||||
|
<div class="thinking-content" id="thinkingContent4">
|
||||||
|
很好，我已经收集到了足够的信息。现在我可以整理这些内容，为用户提供一个清晰、全面的答案。我会按照趋势的重要性和影响力来组织内容。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最终输出 -->
|
||||||
|
<div class="text-output" id="textOutput" style="display: none;">
|
||||||
|
<div class="text-content">
|
||||||
|
<p>根据我的搜索和分析，2026年AI技术的主要发展趋势包括：</p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>多模态AI模型的普及</strong>：能够同时处理文本、图像、音频等多种数据类型的AI模型将成为主流。</li>
|
||||||
|
<li><strong>AI安全性和可解释性</strong>：随着AI应用的广泛部署，确保AI系统的安全性和决策的可解释性变得越来越重要。</li>
|
||||||
|
<li><strong>边缘AI计算</strong>：将AI计算能力部署到边缘设备，实现更快的响应速度和更好的隐私保护。</li>
|
||||||
|
</ol>
|
||||||
|
<p>这些趋势将深刻影响各行各业的数字化转型进程。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 控制面板 -->
|
||||||
|
<div class="control-panel">
|
||||||
|
<button onclick="startDemo()" class="control-btn">开始演示</button>
|
||||||
|
<button onclick="resetDemo()" class="control-btn">重置</button>
|
||||||
|
<button onclick="toggleSummary()" class="control-btn">切换展开/折叠</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
333
static/demo/minimal-mode/script.js
Normal file
333
static/demo/minimal-mode/script.js
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
// 全局状态
|
||||||
|
let currentStep = 0;
|
||||||
|
let isExpanded = false;
|
||||||
|
let demoRunning = false;
|
||||||
|
|
||||||
|
// 步骤配置
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
type: 'thinking',
|
||||||
|
icon: 'brain',
|
||||||
|
summary: '正在思考如何搜索...',
|
||||||
|
duration: 2000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'tool',
|
||||||
|
icon: 'search',
|
||||||
|
summary: '搜索：AI技术发展趋势 2026',
|
||||||
|
duration: 2500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'thinking',
|
||||||
|
icon: 'brain',
|
||||||
|
summary: '搜索结果显示了一些有价值的信息。现在我需要执行...',
|
||||||
|
duration: 2000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'tool',
|
||||||
|
icon: 'terminal',
|
||||||
|
summary: '执行命令：获取网页内容并分析',
|
||||||
|
duration: 2500
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'thinking',
|
||||||
|
icon: 'brain',
|
||||||
|
summary: '很好，我已经收集到了足够的信息。现在我可以整理...',
|
||||||
|
duration: 2000
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 开始演示
|
||||||
|
async function startDemo() {
|
||||||
|
if (demoRunning) return;
|
||||||
|
|
||||||
|
demoRunning = true;
|
||||||
|
resetDemo();
|
||||||
|
|
||||||
|
// 显示等待动画
|
||||||
|
const placeholder = document.getElementById('generatingPlaceholder');
|
||||||
|
placeholder.style.display = 'flex';
|
||||||
|
|
||||||
|
await sleep(1500);
|
||||||
|
|
||||||
|
// 隐藏等待动画，显示摘要行
|
||||||
|
placeholder.style.display = 'none';
|
||||||
|
const summaryLine = document.getElementById('summaryLine');
|
||||||
|
summaryLine.style.display = 'flex';
|
||||||
|
|
||||||
|
// 执行每个步骤
|
||||||
|
for (let i = 0; i < steps.length; i++) {
|
||||||
|
currentStep = i;
|
||||||
|
await executeStep(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 完成后显示最终输出
|
||||||
|
await sleep(1000);
|
||||||
|
summaryLine.classList.add('completed');
|
||||||
|
|
||||||
|
// 如果展开状态，显示最后一步
|
||||||
|
if (isExpanded) {
|
||||||
|
await showDetailStep(currentStep, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 淡化摘要并显示第一个步骤（极快）
|
||||||
|
await fadeAndSwitch(summaryLine, steps[0].summary, true);
|
||||||
|
|
||||||
|
await sleep(800);
|
||||||
|
|
||||||
|
// 显示最终输出
|
||||||
|
const textOutput = document.getElementById('textOutput');
|
||||||
|
textOutput.style.display = 'block';
|
||||||
|
setTimeout(() => {
|
||||||
|
textOutput.classList.add('show');
|
||||||
|
}, 50);
|
||||||
|
|
||||||
|
demoRunning = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 执行单个步骤
|
||||||
|
async function executeStep(stepIndex) {
|
||||||
|
const step = steps[stepIndex];
|
||||||
|
|
||||||
|
// 更新摘要文本
|
||||||
|
updateSummary(step);
|
||||||
|
|
||||||
|
// 如果展开状态，显示详细内容
|
||||||
|
if (isExpanded) {
|
||||||
|
await showDetailStep(stepIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
await sleep(step.duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新摘要
|
||||||
|
function updateSummary(step) {
|
||||||
|
const summaryText = document.getElementById('summaryText');
|
||||||
|
const summaryIcon = document.querySelector('.summary-icon');
|
||||||
|
|
||||||
|
// 更新图标
|
||||||
|
summaryIcon.innerHTML = getIconSVG(step.icon);
|
||||||
|
|
||||||
|
// 更新文本
|
||||||
|
summaryText.textContent = step.summary;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示详细步骤
|
||||||
|
async function showDetailStep(stepIndex, isNewStep = false) {
|
||||||
|
const timelineItem = document.querySelector(`.timeline-item[data-step="${stepIndex}"]`);
|
||||||
|
const contentItem = document.querySelector(`.content-item[data-step="${stepIndex}"]`);
|
||||||
|
|
||||||
|
if (!timelineItem || !contentItem) return;
|
||||||
|
|
||||||
|
// 添加动画类
|
||||||
|
if (isNewStep) {
|
||||||
|
timelineItem.classList.add('animated');
|
||||||
|
contentItem.classList.add('animated');
|
||||||
|
} else {
|
||||||
|
timelineItem.classList.add('instant');
|
||||||
|
contentItem.classList.add('instant');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示时间线项和内容
|
||||||
|
timelineItem.style.display = 'flex';
|
||||||
|
contentItem.style.display = 'block';
|
||||||
|
|
||||||
|
// 计算并设置竖线高度
|
||||||
|
await sleep(isNewStep ? 100 : 10);
|
||||||
|
updateLineHeight(stepIndex);
|
||||||
|
|
||||||
|
await sleep(isNewStep ? 200 : 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新竖线高度
|
||||||
|
function updateLineHeight(stepIndex) {
|
||||||
|
const timelineItem = document.querySelector(`.timeline-item[data-step="${stepIndex}"]`);
|
||||||
|
const contentItem = document.querySelector(`.content-item[data-step="${stepIndex}"]`);
|
||||||
|
|
||||||
|
if (!timelineItem || !contentItem) return;
|
||||||
|
|
||||||
|
const line = timelineItem.querySelector('.timeline-line');
|
||||||
|
if (!line) return;
|
||||||
|
|
||||||
|
// 获取内容的实际高度
|
||||||
|
const contentHeight = contentItem.offsetHeight;
|
||||||
|
|
||||||
|
// 对于第一个步骤（没有图标），竖线从顶部开始
|
||||||
|
if (stepIndex === 0) {
|
||||||
|
const gap = 20; // 到下一个步骤的间距
|
||||||
|
const lineHeight = contentHeight + gap;
|
||||||
|
line.style.height = `${lineHeight}px`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对于其他步骤，计算竖线高度
|
||||||
|
const iconHeight = 20; // 图标高度
|
||||||
|
const gap = 20; // 间距
|
||||||
|
|
||||||
|
// 如果是最后一个步骤，不需要竖线
|
||||||
|
if (stepIndex >= steps.length - 1) {
|
||||||
|
line.style.height = '0';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算竖线应该的高度：内容高度 + 间距 - 图标高度
|
||||||
|
const lineHeight = Math.max(contentHeight + gap - iconHeight, 40);
|
||||||
|
line.style.height = `${lineHeight}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换展开/折叠
|
||||||
|
async function toggleSummary() {
|
||||||
|
const summaryLine = document.getElementById('summaryLine');
|
||||||
|
const detailView = document.getElementById('detailView');
|
||||||
|
|
||||||
|
if (summaryLine.style.display === 'none') return;
|
||||||
|
|
||||||
|
isExpanded = !isExpanded;
|
||||||
|
|
||||||
|
if (isExpanded) {
|
||||||
|
// 展开：极快淡化当前摘要，显示第一个步骤的内容
|
||||||
|
summaryLine.classList.add('expanded');
|
||||||
|
await fadeAndSwitch(summaryLine, steps[0].summary, true);
|
||||||
|
|
||||||
|
// 显示详细视图（快速）
|
||||||
|
detailView.style.display = 'block';
|
||||||
|
setTimeout(() => {
|
||||||
|
detailView.classList.add('show');
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
// 已完成的步骤快速显示，当前步骤慢速动画
|
||||||
|
for (let i = 0; i <= currentStep; i++) {
|
||||||
|
const isCurrentStep = i === currentStep && demoRunning;
|
||||||
|
await showDetailStep(i, isCurrentStep);
|
||||||
|
if (isCurrentStep) {
|
||||||
|
await sleep(400); // 只有新步骤才有较慢的动画
|
||||||
|
} else {
|
||||||
|
await sleep(50); // 已有内容快速出现
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 折叠：极快淡化第一个步骤，显示当前摘要
|
||||||
|
summaryLine.classList.remove('expanded');
|
||||||
|
await fadeAndSwitch(summaryLine, steps[currentStep].summary, true);
|
||||||
|
|
||||||
|
// 隐藏详细视图（快速）
|
||||||
|
detailView.classList.remove('show');
|
||||||
|
await sleep(150);
|
||||||
|
detailView.style.display = 'none';
|
||||||
|
|
||||||
|
// 重置所有步骤显示
|
||||||
|
document.querySelectorAll('.timeline-item').forEach(item => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
item.classList.remove('instant', 'animated');
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.content-item').forEach(item => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
item.classList.remove('instant', 'animated');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 淡化并切换文本
|
||||||
|
async function fadeAndSwitch(element, newText, fast = false) {
|
||||||
|
const summaryText = element.querySelector('.summary-text');
|
||||||
|
const duration = fast ? 75 : 200;
|
||||||
|
|
||||||
|
// 淡出
|
||||||
|
element.style.opacity = '0.3';
|
||||||
|
await sleep(duration);
|
||||||
|
|
||||||
|
// 切换文本
|
||||||
|
summaryText.textContent = newText;
|
||||||
|
|
||||||
|
// 淡入
|
||||||
|
element.style.opacity = '1';
|
||||||
|
await sleep(duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 展开思考内容
|
||||||
|
function expandThinking(stepIndex) {
|
||||||
|
const thinkingContent = document.getElementById(`thinkingContent${stepIndex}`);
|
||||||
|
const thinkingContentFull = document.getElementById(`thinkingContentFull${stepIndex}`);
|
||||||
|
|
||||||
|
thinkingContent.style.display = 'none';
|
||||||
|
thinkingContentFull.style.display = 'block';
|
||||||
|
|
||||||
|
// 重新计算并更新竖线高度
|
||||||
|
setTimeout(() => {
|
||||||
|
updateLineHeight(stepIndex);
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 收起思考内容
|
||||||
|
function collapseThinking(stepIndex) {
|
||||||
|
const thinkingContent = document.getElementById(`thinkingContent${stepIndex}`);
|
||||||
|
const thinkingContentFull = document.getElementById(`thinkingContentFull${stepIndex}`);
|
||||||
|
|
||||||
|
thinkingContent.style.display = 'block';
|
||||||
|
thinkingContentFull.style.display = 'none';
|
||||||
|
|
||||||
|
// 重新计算并更新竖线高度
|
||||||
|
setTimeout(() => {
|
||||||
|
updateLineHeight(stepIndex);
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置演示
|
||||||
|
function resetDemo() {
|
||||||
|
currentStep = 0;
|
||||||
|
isExpanded = false;
|
||||||
|
demoRunning = false;
|
||||||
|
|
||||||
|
// 隐藏所有元素
|
||||||
|
document.getElementById('generatingPlaceholder').style.display = 'none';
|
||||||
|
|
||||||
|
const summaryLine = document.getElementById('summaryLine');
|
||||||
|
summaryLine.style.display = 'none';
|
||||||
|
summaryLine.classList.remove('completed', 'expanded');
|
||||||
|
summaryLine.style.opacity = '1';
|
||||||
|
|
||||||
|
document.getElementById('detailView').style.display = 'none';
|
||||||
|
document.getElementById('detailView').classList.remove('show');
|
||||||
|
document.getElementById('textOutput').style.display = 'none';
|
||||||
|
document.getElementById('textOutput').classList.remove('show');
|
||||||
|
|
||||||
|
// 重置所有步骤
|
||||||
|
document.querySelectorAll('.timeline-item').forEach(item => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
item.classList.remove('instant', 'animated');
|
||||||
|
const line = item.querySelector('.timeline-line');
|
||||||
|
if (line) {
|
||||||
|
line.style.height = '0';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.content-item').forEach(item => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
item.classList.remove('instant', 'animated');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置思考内容
|
||||||
|
document.querySelectorAll('.thinking-content').forEach(item => {
|
||||||
|
item.style.display = 'block';
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.thinking-content-full').forEach(item => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取图标SVG
|
||||||
|
function getIconSVG(iconType) {
|
||||||
|
const icons = {
|
||||||
|
brain: '<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path><path d="M12 6v6l4 2"></path>',
|
||||||
|
search: '<circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path>',
|
||||||
|
terminal: '<polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line>'
|
||||||
|
};
|
||||||
|
return icons[iconType] || icons.brain;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 工具函数：延迟
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击摘要行切换展开/折叠
|
||||||
|
document.getElementById('summaryLine').addEventListener('click', toggleSummary);
|
||||||
503
static/demo/minimal-mode/style.css
Normal file
503
static/demo/minimal-mode/style.css
Normal file
@ -0,0 +1,503 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||||
|
background: #f8f9fa;
|
||||||
|
color: #1a1a1a;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-area {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 32px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 消息块 */
|
||||||
|
.message-block {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 用户消息 */
|
||||||
|
.user-message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-message .message-text {
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
padding: 14px 18px;
|
||||||
|
border-radius: 16px;
|
||||||
|
max-width: 60%;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* AI消息 */
|
||||||
|
.assistant-message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 等待动画 */
|
||||||
|
.generating-placeholder {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 12px 0;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generating-placeholder .letter {
|
||||||
|
display: inline-block;
|
||||||
|
animation: wave 1.6s ease-in-out infinite;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generating-placeholder .letter:nth-child(1) { animation-delay: 0s; }
|
||||||
|
.generating-placeholder .letter:nth-child(2) { animation-delay: 0.1s; }
|
||||||
|
.generating-placeholder .letter:nth-child(3) { animation-delay: 0.2s; }
|
||||||
|
.generating-placeholder .letter:nth-child(4) { animation-delay: 0.3s; }
|
||||||
|
.generating-placeholder .letter:nth-child(5) { animation-delay: 0.4s; }
|
||||||
|
.generating-placeholder .letter:nth-child(6) { animation-delay: 0.5s; }
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.4;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 摘要行 */
|
||||||
|
.summary-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: opacity 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-line:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文字渐变消失效果 */
|
||||||
|
.summary-text::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 30px;
|
||||||
|
background: linear-gradient(to right, transparent, white);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 运行中的闪光效果 */
|
||||||
|
.shimmer-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(100, 100, 255, 0.15) 50%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
animation: shimmer 2s infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-line.completed .shimmer-overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 摘要行展开时的连接线 */
|
||||||
|
.summary-line.expanded {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-line.expanded .summary-icon {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-line.expanded .summary-icon::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 100%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 2px;
|
||||||
|
height: 8px;
|
||||||
|
background: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 详细视图 */
|
||||||
|
.detail-view {
|
||||||
|
margin-top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: opacity 0.15s ease, max-height 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-view.show {
|
||||||
|
opacity: 1;
|
||||||
|
max-height: 2000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间线 */
|
||||||
|
.timeline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第一个时间线项（没有图标，只有竖线） */
|
||||||
|
.timeline-item-first {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item-first .timeline-line {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item.instant {
|
||||||
|
animation: fadeInInstant 0.1s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item.animated {
|
||||||
|
animation: fadeInDown 0.4s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #666;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-line {
|
||||||
|
width: 2px;
|
||||||
|
background: #e0e0e0;
|
||||||
|
margin: 4px 0;
|
||||||
|
transition: height 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item:last-child .timeline-line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInDown {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInInstant {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容区域 */
|
||||||
|
.content-area {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-5px);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item.instant {
|
||||||
|
animation: fadeInInstant 0.1s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item.animated {
|
||||||
|
animation: fadeInLeft 0.4s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInLeft {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-header {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #999;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第一个内容项不显示header */
|
||||||
|
.content-item[data-step="0"] .content-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 思考类型的内容项不显示header */
|
||||||
|
.content-item.thinking-type .content-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-body {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 思考内容 */
|
||||||
|
.thinking-content {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
max-height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thinking-content-full {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-more-btn,
|
||||||
|
.show-less-btn {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-more-btn:hover,
|
||||||
|
.show-less-btn:hover {
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工具内容 */
|
||||||
|
.tool-intent {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #444;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-result {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item {
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-title {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-url {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 命令块 */
|
||||||
|
.command-block {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-header {
|
||||||
|
background: #e9ecef;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-code {
|
||||||
|
padding: 12px;
|
||||||
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-output {
|
||||||
|
padding: 12px;
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.output-line {
|
||||||
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 最终输出 */
|
||||||
|
.text-output {
|
||||||
|
margin-top: 16px;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-output.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content ol {
|
||||||
|
margin-left: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content li {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content strong {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 控制面板 */
|
||||||
|
.control-panel {
|
||||||
|
margin-top: 32px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:hover {
|
||||||
|
background: #0056b3;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
1
static/demo/test.txt
Normal file
1
static/demo/test.txt
Normal file
@ -0,0 +1 @@
|
|||||||
|
test
|
||||||
Loading…
Reference in New Issue
Block a user