# 优化IPCard生成中占位符样式

## 需求分析
用户要求优化IPCard组件中生成图片时的占位符样式，具体要求：
- 颜色与质感：整体为浅灰色或白色，带有微妙的渐变或光泽感
- 动态效果：平滑的**倾斜**波浪式或扫描式光带从左到右/从上到下移动
- 移除现有圆圈动画和文字提示
- 适配暗色主题

## 实现方案

### 1. 修改模板结构
- 移除第45-46行的圆圈动画和文字提示
- 保留占位符容器结构

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

### 3. 关键CSS修改
```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度倾斜的浅白色光带扫描
- 无圆圈动画和文字提示
- 整体呈现“未填充”的加载状态