deep/plans/riscal-section-plan.md

RISCAL 内容模块设计方案

📋 概述

根据 2.png 和 3.png 的内容，需要在 architstudio.html 页面中新增两个 Section：

1. RISCAL 语言介绍 - 展示 RISCAL 的核心概念（基于 2.png）
2. RISCAL 语言 Q&A - 交互式问答展示（基于 3.png）

插入位置建议：在"平台核心组件" Section（第516-600行）之后

---

🎨 Section 1: RISCAL 语言介绍

内容提取（来自 2.png）

主标题: Retargetable Instruction Set Compiler and Architecture Language
副标题: RISCAL

三个核心概念卡片:

关键词	颜色主题	描述内容
Retargetable	橙黄色	通过可重定向的设计哲学，RISCAL能够基于用户需求快速迭代生成定制化指令集，精准匹配细分场景的计算需求
RISC	蓝色	以RISC-V架构为根基，赋能领域特定指令集的敏捷定义与高效实现，让DSA设计回归开放与简洁的本质
CAL	橙色	语言驱动的编译器与硬件RTL同源共生，从指令定义到工具链生成无缝一致，彻底消除架构与实现间的语义鸿沟

设计方案

┌─────────────────────────────────────────────────────────────┐
│                     RISCAL 语言介绍                          │
│        Retargetable Instruction Set Compiler and            │
│                 Architecture Language                        │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   ┌─────────────┐   ┌─────────────┐   ┌─────────────┐       │
│   │ Retargetable│   │    RISC     │   │     CAL     │       │
│   │   (橙黄)    │   │    (蓝)     │   │    (橙)     │       │
│   │             │   │             │   │             │       │
│   │  描述文字   │   │  描述文字   │   │  描述文字   │       │
│   └─────────────┘   └─────────────┘   └─────────────┘       │
│                                                              │
└─────────────────────────────────────────────────────────────┘

动效设计

1. 入场动画: 卡片依次从下方淡入滑入（stagger animation）
2. 悬浮效果: 卡片hover时上浮+发光边框
3. 关键词高亮: 标题中 R-I-S-C-A-L 字母分别对应三个概念的颜色
4. 背景: 微妙的渐变光晕 + 网格背景
5. 连接线动画: 三个卡片之间有动态连接线，表示概念关联

---

🎨 Section 2: RISCAL 语言 Q&A

内容提取（来自 3.png）

主标题: RISCAL™ 语言 Q&A

四个问答模块:

编号	类别	问题	答案
1	动机	为什么设计一个全新的语言？	DSA与DSL的关联性；后端组件的一致性与自动化
2	门槛	这个语言的学习曲线会不会很高？	C-like的语法；聚焦指令语义
3	能力	这个语言的描述能力怎么样？	图灵完备性；描述性语言；高层次抽象与精细化的电路描述
4	收益	使用这个语言能带来多大的效率提升？	第一个RISCAL程序：一周；第一个RISCAL方案：一个月

设计方案

┌─────────────────────────────────────────────────────────────┐
│                   RISCAL™ 语言 Q&A                           │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   ┌──────────┐                    ┌──────────┐              │
│   │  动机    │                    │  门槛    │              │
│   │  问题    │       ┌────┐       │  问题    │              │
│   │  答案    │       │1234│       │  答案    │              │
│   └──────────┘       │方块│       └──────────┘              │
│                      └────┘                                  │
│   ┌──────────┐                    ┌──────────┐              │
│   │  收益    │                    │  能力    │              │
│   │  问题    │                    │  问题    │              │
│   │  答案    │                    │  答案    │              │
│   └──────────┘                    └──────────┘              │
│                                                              │
└─────────────────────────────────────────────────────────────┘

动效设计

1. 中心方块动画:

   • 4个数字方块（1、2、3、4）排列成2x2网格
   • 蓝色和橙色交替
   • 持续微旋转动画，hover时加速
   • 3D透视效果

2. 问答卡片交互:

   • 默认只显示类别标签和问题
   • 点击/hover时展开显示答案
   • 有"Answer"按钮作为交互提示
   • 展开时有流畅的滑入动画

3. 连接线:

   • 中心方块与四角卡片之间有SVG曲线连接
   • 连接线有流动动画（虚线流动效果）
   • 颜色与对应卡片主题一致

4. 响应式布局:

   • 桌面端：四角布局 + 中心方块
   • 平板/移动端：垂直堆叠布局

---

🎨 整体视觉风格

颜色方案（与现有页面一致）

用途	颜色值	说明
主色调	#3b82f6	蓝色
橙色强调	#f97316	用于 Retargetable、CAL
背景深色	#0b1220	深色背景
卡片背景	#1f2937	卡片底色
文字主色	#f3f4f6	浅灰白
文字辅助	#9ca3af	灰色

动画技术

• CSS @keyframes 自定义动画
• CSS transition 过渡效果
• IntersectionObserver 滚动触发动画
• CSS transform 3D变换

---

📐 技术实现要点

HTML 结构

<!-- Section 1: RISCAL 介绍 -->
<section id="riscal-intro" class="relative z-10 py-20 bg-darker">
  <!-- 标题区 -->
  <!-- 三卡片网格 -->
</section>

<!-- Section 2: RISCAL Q&A -->
<section id="riscal-qa" class="relative z-10 py-20 bg-card">
  <!-- 标题区 -->
  <!-- 中心方块 + 四角卡片布局 -->
</section>

CSS 动画（需添加的关键样式）

/* 卡片入场动画 */
.riscal-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.riscal-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 中心方块旋转 */
.qa-center-block {
  animation: gentleRotate 20s linear infinite;
}
@keyframes gentleRotate {
  0% { transform: perspective(800px) rotateY(0deg) rotateX(5deg); }
  100% { transform: perspective(800px) rotateY(360deg) rotateX(5deg); }
}

/* 连接线流动效果 */
.qa-connector {
  stroke-dasharray: 10 5;
  animation: flowLine 2s linear infinite;
}
@keyframes flowLine {
  to { stroke-dashoffset: -15; }
}

---

📊 架构图

flowchart TB
    subgraph Section1[RISCAL 介绍 Section]
        T1[标题区域]
        C1[Retargetable 卡片]
        C2[RISC 卡片]
        C3[CAL 卡片]
        T1 --> C1
        T1 --> C2
        T1 --> C3
    end
    
    subgraph Section2[RISCAL Q&A Section]
        T2[标题区域]
        CB[中心数字方块 1234]
        Q1[动机卡片]
        Q2[门槛卡片]
        Q3[能力卡片]
        Q4[收益卡片]
        T2 --> CB
        CB --> Q1
        CB --> Q2
        CB --> Q3
        CB --> Q4
    end
    
    Section1 --> Section2

---

✅ 实施步骤

1. 在 architstudio.html 中找到插入位置（第600行后）
2. 添加 RISCAL 介绍 Section 的 HTML 结构
3. 添加 RISCAL Q&A Section 的 HTML 结构
4. 添加所需的 CSS 动画样式
5. 添加 JavaScript 交互逻辑（滚动触发、点击展开等）
6. 测试响应式布局
7. 调整细节样式

---

🎯 预期效果

• 视觉上与现有页面风格完美融合
• 动效流畅自然，增强用户体验
• 信息层次清晰，易于理解
• 响应式适配各种屏幕尺寸