refactor: 迁移 story-card 相关样式到 MessageCard
删除 ScriptView.vue 中已迁移到 MessageCard 的样式类 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2457,38 +2457,6 @@ onUnmounted(() => {
|
||||
border-color: rgba(255, 216, 107, 0.28);
|
||||
}
|
||||
|
||||
.message-toggle {
|
||||
align-self: flex-start;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
color: #ffd86b;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 700;
|
||||
background: rgba(140, 68, 242, 0.18);
|
||||
border: 1rpx solid rgba(255, 216, 107, 0.18);
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.message-toggle-icon {
|
||||
font-size: 22rpx;
|
||||
line-height: 28rpx;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.message-toggle-icon.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.thinking-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2722,271 +2690,6 @@ onUnmounted(() => {
|
||||
border: 1rpx solid rgba(168, 85, 247, 0.32);
|
||||
}
|
||||
|
||||
.story-card {
|
||||
border-radius: 52rpx;
|
||||
padding: 34rpx;
|
||||
background: rgba(12, 5, 28, 0.34);
|
||||
border: 1rpx solid rgba(192, 132, 252, 0.46);
|
||||
box-shadow: 0 0 48rpx rgba(125, 55, 205, 0.14);
|
||||
backdrop-filter: blur(6rpx);
|
||||
-webkit-backdrop-filter: blur(6rpx);
|
||||
}
|
||||
|
||||
.story-card.collapsed {
|
||||
box-shadow: 0 0 42rpx rgba(125, 55, 205, 0.14);
|
||||
}
|
||||
|
||||
.story-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.story-head-actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.story-title-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.story-title {
|
||||
display: block;
|
||||
font-size: 52rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
width: 120rpx;
|
||||
min-width: 120rpx;
|
||||
height: 58rpx;
|
||||
min-height: 58rpx;
|
||||
line-height: 1;
|
||||
padding: 0 18rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
color: rgba(255, 244, 255, 0.95);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(134, 72, 255, 0.44), rgba(39, 15, 76, 0.42)),
|
||||
rgba(255, 255, 255, 0.05);
|
||||
border: 1rpx solid rgba(216, 180, 254, 0.46);
|
||||
box-shadow:
|
||||
0 14rpx 30rpx rgba(61, 18, 113, 0.22),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.26),
|
||||
inset 0 -10rpx 18rpx rgba(33, 9, 73, 0.16);
|
||||
backdrop-filter: blur(8rpx);
|
||||
-webkit-backdrop-filter: blur(8rpx);
|
||||
font-size: 23rpx;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.collapse-icon::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.collapse-icon:active,
|
||||
.copy-card-btn:active,
|
||||
.collapse-row:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.copy-card-btn {
|
||||
width: 120rpx;
|
||||
min-width: 120rpx;
|
||||
height: 50rpx;
|
||||
min-height: 50rpx;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 244, 255, 0.9);
|
||||
font-size: 23rpx;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
background:
|
||||
radial-gradient(circle at 50% -30%, rgba(255, 255, 255, 0.18), transparent 50%),
|
||||
rgba(88, 28, 135, 0.26);
|
||||
border: 1rpx solid rgba(216, 180, 254, 0.32);
|
||||
box-shadow:
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.16),
|
||||
0 10rpx 22rpx rgba(61, 18, 113, 0.12);
|
||||
backdrop-filter: blur(8rpx);
|
||||
-webkit-backdrop-filter: blur(8rpx);
|
||||
}
|
||||
|
||||
.copy-card-btn::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.collapse-icon-text,
|
||||
.collapse-row-text {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collapse-chevron {
|
||||
position: relative;
|
||||
width: 20rpx;
|
||||
height: 16rpx;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
|
||||
.collapse-chevron.down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.collapse-chevron view {
|
||||
position: absolute;
|
||||
top: 7rpx;
|
||||
width: 12rpx;
|
||||
height: 4rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(90deg, #fff3b0, #ffd86b);
|
||||
box-shadow: 0 0 12rpx rgba(255, 216, 107, 0.5);
|
||||
}
|
||||
|
||||
.collapse-chevron view:first-child {
|
||||
left: 0;
|
||||
transform: rotate(-38deg);
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.collapse-chevron view:last-child {
|
||||
right: 0;
|
||||
transform: rotate(38deg);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
color: #d18aff;
|
||||
font-size: 24rpx;
|
||||
background: rgba(168, 85, 247, 0.22);
|
||||
}
|
||||
|
||||
.story-body {
|
||||
display: block;
|
||||
margin-top: 28rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
line-height: 1.78;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.story-body-scroll {
|
||||
max-height: 420rpx;
|
||||
height: auto;
|
||||
margin-top: 28rpx;
|
||||
padding-right: 8rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.story-body-scroll .story-body {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.collapse-row {
|
||||
position: relative;
|
||||
height: 62rpx;
|
||||
margin-top: 22rpx;
|
||||
padding: 0 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
border-radius: 999rpx;
|
||||
color: rgba(246, 230, 255, 0.96);
|
||||
font-size: 26rpx;
|
||||
font-weight: 800;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.2), transparent 46%),
|
||||
linear-gradient(135deg, rgba(98, 40, 174, 0.3), rgba(24, 8, 58, 0.24));
|
||||
border: 1rpx solid rgba(192, 132, 252, 0.36);
|
||||
box-shadow:
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.16),
|
||||
0 12rpx 28rpx rgba(61, 18, 113, 0.14);
|
||||
backdrop-filter: blur(6rpx);
|
||||
-webkit-backdrop-filter: blur(6rpx);
|
||||
}
|
||||
|
||||
.collapse-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 34rpx;
|
||||
right: 34rpx;
|
||||
top: 0;
|
||||
height: 1rpx;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 236, 180, 0.6), transparent);
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 72rpx;
|
||||
min-height: 72rpx;
|
||||
padding: 0 8rpx;
|
||||
border-radius: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e8ccff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
box-sizing: border-box;
|
||||
background: rgba(88, 28, 135, 0.18);
|
||||
border: 1rpx solid rgba(192, 132, 252, 0.35);
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, #8c44f2, #5f1db8);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
margin-right: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.action-btn::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.result-chat-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user