# RISCAL 内容模块设计方案

## 📋 概述

根据 2.png 和 3.png 的内容，需要在 [`architstudio.html`](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 结构

```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 动画（需添加的关键样式）

```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; }
}
```

---

## 📊 架构图

```mermaid
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. [ ] 调整细节样式

---

## 🎯 预期效果

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