suoyousheng
/
deotalandAi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
deotalandAi/.trae/documents/plan_20251212_020449.md

2.3 KiB
Raw Blame History

优化IPCard生成中占位符样式

需求分析

用户要求优化IPCard组件中生成图片时的占位符样式，具体要求：

  • 颜色与质感：整体为浅灰色或白色，带有微妙的渐变或光泽感
  • 动态效果：平滑的倾斜波浪式或扫描式光带从左到右/从上到下移动
  • 移除现有圆圈动画和文字提示
  • 适配暗色主题

实现方案

1. 修改模板结构

  • 移除第45-46行的圆圈动画和文字提示
  • 保留占位符容器结构

2. 优化CSS样式

  • 修改.generating-placeholder类：
    • 背景色改为浅灰色渐变，添加微妙光泽感
    • 添加倾斜扫描光带动画
    • 移除原有的generating-spinner和generating-text
    • 添加暗色主题适配

3. 关键CSS修改

/* 生成中占位符样式优化 */
.generating-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(243, 244, 246, 0.95) 0%, rgba(229, 231, 235, 0.9) 100%);
  position: relative;
  overflow: hidden;
  /* 添加微妙的光泽感 */
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* 倾斜扫描光带动画 */
.generating-placeholder::before {
  content: '';
  position: absolute;
  /* 倾斜45度，从左上角开始 */
  top: -50%;
  left: -100%;
  width: 200%;
  height: 200%;
  /* 45度倾斜的光带 */
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: scanEffect 2s ease-in-out infinite;
  /* 设置旋转中心点 */
  transform-origin: center;
}

/* 倾斜扫描动画 */
@keyframes scanEffect {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}

/* 暗色主题适配 */
:global(.dark) .generating-placeholder {
  background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.9) 100%);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}

:global(.dark) .generating-placeholder::before {
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

4. 预期效果

  • 浅色主题：浅灰色渐变背景带有微妙光泽感，45度倾斜的白色光带从左上角向右下角扫描
  • 暗色主题：深灰色渐变背景带有微妙光泽感，45度倾斜的浅白色光带扫描
  • 无圆圈动画和文字提示
  • 整体呈现“未填充”的加载状态