صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
liaoxg
/
cfc
1
1
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
درخت: dbed74b743
شاخه‌ها تگ‌ها
cfc
/
docs
/
superpowers
/
plans
/
2026-07-02-login-left-panel-redesign.md

2026-07-02-login-left-panel-redesign.md 15 KB
تاريخچه خام

Login 左侧品牌区重新设计 实施计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 将 cfc-web 登录页左侧品牌区从五行沙盘 SVG 重构为五维能量轮盘动画，使用五维品牌色系

Architecture: 单文件修改（Login.vue），只改 template 和 scoped style，不涉及 script。保留右侧表单区域不变。

Tech Stack: Vue 2 Options API, CSS3 Animations, SVG

设计文档: docs/superpowers/specs/2026-07-02-login-left-panel-redesign.md

文件结构

文件 操作 说明
cfc-web/src/views/Login.vue 修改 替换全部 brand-panel 模板和样式

Task 1: 更新品牌区背景 + 整体布局

Files:

  • Modify: cfc-web/src/views/Login.vue:1-884

  • [ ] Step 1: 替换背景渐变色和布局微调

修改 .brand-panel 的背景和 .brand-content 的布局：

/* 替换现有 .brand-panel 背景 (line ~413-419) */
.brand-panel {
  flex: 0 0 55%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg,
    #1A0F00 0%,
    #2D1810 30%,
    #3D2B1F 60%,
    #4A3020 100%);
  overflow: hidden;
}

/* 替换 .brand-panel::before 背景纹理 (line ~423-433) */
.brand-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 100% 40% at 50% 30%, rgba(255, 215, 0, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(255, 140, 66, 0.05) 0%, transparent 70%),
    radial-gradient(circle 50% 50% at 20% 80%, rgba(99, 102, 241, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* 调整 .brand-content 布局 (line ~435-448) */
.brand-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 480px;
  width: 100%;
  padding: 32px 36px;
  color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
}

  • [ ] Step 2: 更新品牌头部样式

    /* 替换 .brand-header (line ~451-457) */
.brand-header {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 6px;
}

/* .logo-img 保持不变 (line ~459-464) */

/* .brand-titles 不变 (line ~466-470) */

/* 替换 .brand-cn (line ~472-480) */
.brand-cn {
font-size: 24px;
font-weight: 700;
letter-spacing: 4px;
line-height: 1.3;
background: linear-gradient(135deg, #FFE066 0%, #F59E0B 50%, #FFE066 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* .brand-dot 不变 (line ~482-486) */

/* .brand-en 不变 (line ~488-494) */

  • [ ] Step 3: 更新品牌主张区域样式

    /* 替换 .brand-mission 相关样式 (line ~497-524) */
.brand-mission {
flex-shrink: 0;
text-align: center;
margin-bottom: 8px;
}

.mission-title {
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
margin: 0 0 4px;
line-height: 1.4;
}

.mission-title .highlight {
background: linear-gradient(135deg, #FFE066, #F59E0B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.mission-desc {
font-size: 13px;
opacity: 0.55;
letter-spacing: 1px;
margin: 0;
font-weight: 300;
}

  • [ ] Step 4: 更新底部统计 + 角色标签样式

替换 .brand-values 部分为 .brand-footer:

/* 替换 .brand-values (line ~608-647) */
.brand-footer {
  flex-shrink: 0;
  width: 100%;
  margin-top: 4px;
}

.stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}

.stat-num {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #FFE066, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.stat-label {
  font-size: 10px;
  opacity: 0.5;
  letter-spacing: 1px;
  margin-top: 1px;
}

.stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
}

.role-tags {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.role-tag {
  display: inline-block;
  padding: 3px 14px;
  font-size: 11px;
  border: 1px solid;
  border-radius: 20px;
  opacity: 0.5;
  transition: opacity 0.3s;
  letter-spacing: 1px;
}

.role-tag:hover {
  opacity: 0.9;
}

Task 2: 替换模板中的五维沙盘为能量轮盘

Files:

  • Modify: cfc-web/src/views/Login.vue:1-293

  • [ ] Step 1: 替换 brand-panel 的 template 内容

把 template 中的 .brand-panel 内部（lines 4-219）全部替换为：

<div class="login-page">
  <!-- 左侧品牌展示区 — 五维能量轮盘 -->
  <div class="brand-panel">
    <div class="brand-content">

      <!-- ===== Logo + 品牌标识 ===== -->
      <div class="brand-header">
        <img src="/logo.png" alt="浠艾福" class="logo-img" />
        <div class="brand-titles">
          <span class="brand-cn">亿图腾<span class="brand-dot">·</span>浠艾福</span>
          <span class="brand-en">Care Family</span>
        </div>
      </div>

      <!-- ===== 五维能量轮盘 ===== -->
      <div class="orbit-section">
        <div class="orbit-container">
          <!-- 中心"家"徽章 -->
          <div class="orbit-center-node">
            <span class="center-text">家</span>
          </div>

          <!-- 轨道装饰环 -->
          <svg class="orbit-ring-svg" viewBox="0 0 340 340" xmlns="http://www.w3.org/2000/svg">
            <circle cx="170" cy="170" r="148" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
            <circle cx="170" cy="170" r="144" fill="none" stroke="rgba(255,215,0,0.08)" stroke-width="0.5" stroke-dasharray="2,4" class="orbital-dash" />

            <!-- 相生弧线 (身→智→富→行→心→身) -->
            <defs>
              <marker id="orbitArrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                <polygon points="0,0 10,3.5 0,7" fill="#FFD700" opacity="0.6"/>
              </marker>
            </defs>

            <!-- 五边形弧线连接 -->
            <path d="M 170,26 A 144,144 0 0,1 293,95" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
            <path d="M 293,95 A 144,144 0 0,1 256,293" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
            <path d="M 256,293 A 144,144 0 0,1 84,293" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
            <path d="M 84,293 A 144,144 0 0,1 47,95" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />
            <path d="M 47,95 A 144,144 0 0,1 170,26" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-opacity="0.35" class="arc-gen" marker-end="url(#orbitArrow)" />

            <!-- 轨道粒子 -->
            <circle cx="170" cy="22" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
            <circle cx="297" cy="92" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
            <circle cx="262" cy="298" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
            <circle cx="78" cy="298" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
            <circle cx="43" cy="92" r="2" fill="#FFE066" opacity="0.5" class="orbit-particle" />
          </svg>

          <!-- 五维节点 (绝对定位公转) -->
          <!-- 身(橙) -->
          <div class="orbit-node" style="--node-color:#FF8C42; --orbit-angle:0deg; --orbit-delay:0s;">
            <span class="node-icon">🌏</span>
            <span class="node-label">身</span>
          </div>
          <!-- 智(紫) -->
          <div class="orbit-node" style="--node-color:#6366F1; --orbit-angle:72deg; --orbit-delay:-3s;">
            <span class="node-icon">⚔️</span>
            <span class="node-label">智</span>
          </div>
          <!-- 富(金) -->
          <div class="orbit-node" style="--node-color:#F59E0B; --orbit-angle:144deg; --orbit-delay:-6s;">
            <span class="node-icon">💧</span>
            <span class="node-label">富</span>
          </div>
          <!-- 行(绿) -->
          <div class="orbit-node" style="--node-color:#10B981; --orbit-angle:216deg; --orbit-delay:-9s;">
            <span class="node-icon">🌿</span>
            <span class="node-label">行</span>
          </div>
          <!-- 心(粉) -->
          <div class="orbit-node" style="--node-color:#FF6B9D; --orbit-angle:288deg; --orbit-delay:-12s;">
            <span class="node-icon">🔥</span>
            <span class="node-label">心</span>
          </div>

          <!-- 图例 -->
          <div class="orbit-legend">
            <span class="legend-item">
              <svg width="20" height="6" viewBox="0 0 20 6"><line x1="0" y1="3" x2="14" y2="3" stroke="#FFD700" stroke-width="1.5"/><polygon points="14,3 18,1 18,5" fill="#FFD700"/></svg>
              <span>相生</span>
            </span>
          </div>
        </div>
      </div>

      <!-- ===== 核心主张 ===== -->
      <div class="brand-mission">
        <h1 class="mission-title">给全家的<span class="highlight">一站式幸福提案</span></h1>
        <p class="mission-desc">
          AI 智慧家庭成长平台 · 五维能量驱动全家持续成长
        </p>
      </div>

      <!-- ===== 数据 + 角色标签 ===== -->
      <div class="brand-footer">
        <div class="stats-row">
          <div class="stat-item">
            <span class="stat-num">120,000+</span>
            <span class="stat-label">家庭信赖</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-num">1,000+</span>
            <span class="stat-label">专业人员</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-num">5</span>
            <span class="stat-label">幸福维度</span>
          </div>
        </div>
        <div class="role-tags">
          <span class="role-tag" style="border-color:#6366F1;color:#818CF8">家庭客户</span>
          <span class="role-tag" style="border-color:#FF6B9D;color:#FF8CB3">服务商</span>
          <span class="role-tag" style="border-color:#10B981;color:#34D399">平台运营</span>
        </div>
      </div>

    </div>
  </div>

  <!-- 右侧登录表单区 (不变) -->
  ...

Task 3: 添加五维能量轮盘 CSS 动画

Files:

  • Modify: cfc-web/src/views/Login.vue:526-607 (样式区域)

  • [ ] Step 1: 替换 sand-table 相关样式为 orbit 样式

删除旧沙盘相关CSS（lines 527-606），替换为：

/* ==================== 五维能量轮盘 ==================== */
.orbit-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin: -6px 0;
}

.orbit-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 轨道SVG装饰 */
.orbit-ring-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

/* 虚线轨道动画 */
.orbital-dash {
  animation: rotateDash 20s linear infinite;
  transform-origin: 170px 170px;
}

@keyframes rotateDash {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 相生弧线流光 */
.arc-gen {
  stroke-dasharray: 8 6;
  animation: flowArc 1.2s linear infinite;
}

@keyframes flowArc {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -14; }
}

/* 轨道粒子公转 */
.orbit-particle {
  animation: orbitParticle 8s linear infinite;
  transform-origin: 170px 170px;
}

@keyframes orbitParticle {
  0%   { opacity: 0;   transform: rotate(0deg)   translateX(148px) rotate(0deg); }
  12%  { opacity: 0.6; }
  88%  { opacity: 0.6; }
  100% { opacity: 0;   transform: rotate(360deg) translateX(148px) rotate(-360deg); }
}

/* 中心节点 */
.orbit-center-node {
  position: relative;
  z-index: 3;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #F59E0B);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 20px rgba(245, 158, 11, 0.3),
    0 0 60px rgba(245, 158, 11, 0.1);
  animation: pulseCenter 3s ease-in-out infinite;
}

.center-text {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

@keyframes pulseCenter {
  0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), 0 0 60px rgba(245, 158, 11, 0.1); transform: scale(1); }
  50%      { box-shadow: 0 0 30px rgba(245, 158, 11, 0.5), 0 0 80px rgba(245, 158, 11, 0.2); transform: scale(1.05); }
}

/* 五维节点公转 */
.orbit-node {
  position: absolute;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--node-color);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.15);
  animation: orbitRotate 15s linear infinite;
  animation-delay: var(--orbit-delay);
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  transform-origin: center;
}

/* 轨道公转 */
@keyframes orbitRotate {
  0%   { transform: rotate(var(--orbit-angle)) translateX(125px) rotate(calc(-1 * var(--orbit-angle))); }
  100% { transform: rotate(calc(var(--orbit-angle) + 360deg)) translateX(125px) rotate(calc(-1 * var(--orbit-angle) - 360deg)); }
}

.node-icon {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 1px;
}

.node-label {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 图例 */
.orbit-legend {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  opacity: 0.4;
  color: #fff;
  letter-spacing: 1px;
}

.legend-item svg {
  display: block;
}
  • Step 2: 移除旧的沙盘相关 CSS

删除以下不再使用的 CSS 规则（找到并移除）：

  • .sand-table-wrap 及其所有子规则
  • .brand-values 及其所有子规则
  • .value-item, .value-icon, .value-label, .value-arrow, .value-subtitle
  • .sand-table-svg 相关动画

  • 删除 @keyframes 中不再使用的：nodeBreathe（保留旧名但不再引用也可删除）

  • [ ] Step 3: 更新响应式 CSS 微调

在 @media screen and (max-width: 900px) 中，确保 .orbit-section 在隐藏时随 .brand-panel 一起隐藏（已有 .brand-panel { display: none; } 处理了）。

Task 4: 验证

Files:

  • Verify: cfc-web/src/views/Login.vue

  • [ ] Step 1: LSP 诊断检查

Run: LSP diagnostics on Login.vue Expected: 无错误，无警告

  • [ ] Step 2: 编译验证

    cd /sc-data/cfc/cfc-web && npx vue-cli-service build --mode production 2>&1 | tail -20

Expected: Build 成功，无错误

  • Step 3: 最终清理

确认已删除所有旧的沙盘 SVG 标记和不再使用的 CSS 规则。 确认右侧表单区域未受影响。