245 lines
9.0 KiB
Markdown
245 lines
9.0 KiB
Markdown
# 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. [ ] 调整细节样式
|
||
|
||
---
|
||
|
||
## 🎯 预期效果
|
||
|
||
- 视觉上与现有页面风格完美融合
|
||
- 动效流畅自然，增强用户体验
|
||
- 信息层次清晰，易于理解
|
||
- 响应式适配各种屏幕尺寸
|