Create Next App

强化学习环境

Markdown编辑器

模板选择

当前模板: 展示新增的优雅青蓝风格卡片系列：标准、列表、表格三种布局

Markdown内容

7893 字符 | 347 行

# 优雅青蓝卡片系列展示

## 设计特点
[icon:Abstract/ad-product]优雅青蓝卡片系列采用渐变背景、[icon:Base/home]精致装饰和层次化设计，[icon:Base/aiming]提供三种专业的内容展示方式。

### 快速链接
访问我们的 [官方文档](https://psuip-docs-alpha.dingdaoos.com/docs) 了解更多信息，或者 [加入社区](https://psuip-docs-alpha.dingdaoos.com/docs) 与其他用户交流。

[event:download][下载资源](https://github.com/example/download)
[联系我们]()

<card:headerPrecentCard>
   ## 二、市场概述
   AI-PC 概念自 2023 年由英特尔提出后，迅速引发行业关注

### 中国市场
   <percentValue color={color.success.green6}>#### 15%</percentValue>
   AI-PC 出货量

### 全球市场  
   #### 25%
   AI-PC 渗透率

### 未来预测
   #### 40%
   预计增长率
</card:headerPrecentCard>

<card:headerCard background={color.success.green0}>
## 三、头部品牌分析
联想、苹果和荣耀作为 AI-PC 市场的头部品牌，各自凭借独特的产品功能和市场策略在竞争中占据一席之地。以下是联想、苹果和荣耀的销售份额占比。
[chart:barh|AI-PC 市场份额][event:chart_changed(barh,bar,pie)|style:button]
| 品牌 | 市场份额 |
|------|----------|
| 联想 | 35% |
| 苹果 | 28% |
| 荣耀 | 18% |

[chart:grouped_line|心流指标趋势]
| 日期 | 心流满意度FSV | 心流专注值FFV | 心流效能值FEV |
| --- | --- | --- | --- |
| 2025-03-10 | 0.0 | 0.36 | 2.55 |
| 2025-03-11 | 0.0 | 0.41 | 2.22 |
| 2025-03-12 | 0.0 | 0.36 | 2.64 |
| 2025-03-13 | 0.0 | 0.32 | 2.94 |

[chart:pie|笔记本市场占比]
| 类型 | 占比 |
|------|------|
| 游戏本 | 40% |
| 轻薄本 | 35% |
| 工作站 | 25% |

</card:headerCard>

<card:headerCard background={color.primarycontainer.brand0}>
## 四、市场图表示例
为了更直观地展示不同图表类型，这里提供柱状图、面积图和环状图的对比示例。

[chart:bar|季度销售额（万元）]
| 季度 | 销售额 |
|------|--------|
| Q1 | 120 |
| Q2 | 180 |
| Q3 | 240 |
| Q4 | 320 |

[chart:area_chart|AI-PC 趋势]
| 时间 | 出货量 | 渗透率 |
|------|--------|--------|
| 2025.04 | 100 | 20 |
| 2025.05 | 160 | 24 |
| 2025.06 | 210 | 28 |

[chart:donut_chart|产品占比]
| 类型 | 占比 |
|------|------|
| 轻薄本 | 45 |
| 游戏本 | 35 |
| 工作站 | 20 |
</card:headerCard>

<card:headerCard background={color.primarycontainer.brand0}>
      ## 五、业务架构树状图
      通过 TreeMind 树状图展示多层级的业务架构与对应数值。

[chart:tree_mind|业务架构层级关系-Q2-FCST(K$)]
      | layer1         | layer2                 | layer3             | layer4  |
      |----------------|------------------------|--------------------|----------------|
      | 核心业务板块   | 臻算服务               | 企业级臻算         | 128,560.00     |
      | 核心业务板块   | 臻算服务               | 个人端臻算         | 83,836.00      |
      | 核心业务板块   | xCloud智能云           | 私有云服务         | 95,320.00      |
      | 核心业务板块   | xCloud智能云           | 公有云服务         | 68,452.00      |
      | 核心业务板块   | xCloud智能云           | 混合云服务         | 17,140.00      |
      | 核心业务板块   | 全周期AI服务           | AI模型开发         | 62,732.80      |
      | 核心业务板块   | 全周期AI服务           | AI部署运维         | 54,891.20      |
      | 核心业务板块   | 全周期AI服务           | AI定制咨询         | 39,208.00      |
      | 创新业务板块   | 智能体矩阵             | 消费级智能体       | 57,895.20      |
      | 创新业务板块   | 智能体矩阵             | 工业级智能体       | 38,596.80      |
      | 创新业务板块   | 可持续发展解决方案ESG   | 碳管理服务         | 22,612.00      |
      | 创新业务板块   | 可持续发展解决方案ESG   | 绿色运维服务       | 18,089.60      |
      | 创新业务板块   | 可持续发展解决方案ESG   | ESG咨询报告        | 4,522.40       |
      </card:headerCard>

<card:headerCard background={color.primarycontainer.brand0}>
      ## 额外示例：小型（2 层少量节点）

[chart:tree_mind|小型层级-示例A]
      | 层级1   | 层级2       | 值 |
      |---------|-------------|----|
      | 产品线  | A系列        | 12 |
      | 产品线  | B系列        | 8  |
      | 服务线  | 交付服务     | 5  |
      </card:headerCard>

<card:headerCard background={color.primarycontainer.brand0}>
      ## 额外示例：深层（4-5 层）

[chart:tree_mind|深层结构-示例B]
      | L1     | L2       | L3         | L4        | L5         |
      |--------|----------|------------|-----------|------------|
      | 事业群 | 云平台   | 计算       | 高性能计算 | GPU节点     |
      | 事业群 | 云平台   | 计算       | 高性能计算 | CPU节点     |
      | 事业群 | 云平台   | 存储       | 分布式存储 | 热存储      |
      | 事业群 | 云平台   | 存储       | 分布式存储 | 冷存储      |
      | 事业群 | 云平台   | 网络       | 负载均衡   | L7         |
      | 事业群 | 云平台   | 网络       | 负载均衡   | L4         |
      </card:headerCard>

<card:headerCard background={color.primarycontainer.brand0}>
      ## 额外示例：不平衡结构（兄弟数差异大）

[chart:tree_mind|不平衡结构-示例D]
      | Root  | Branch     | Leaf               | 值    |
      |-------|------------|--------------------|-------|
      | 根    | A          | A1                 | 100   |
      | 根    | A          | A2                 | 80    |
      | 根    | A          | A3                 | 60    |
      | 根    | A          | A4                 | 40    |
      | 根    | B          | B1                 | 20    |
      | 根    | C          | C1                 | 10    |
      | 根    | C          | C2                 | 5     |
      | 根    | C          | C3                 | 2     |
      | 根    | C          | C4                 | 1     |
      | 根    | C          | C5                 | 1     |
      </card:headerCard>

<layout:bgColumn background={color.onprimary.white100}>

<layout:row>
<card:elegantStandard>
## 标准布局卡片
### 设计理念
优雅青蓝标准布局采用渐变背景和装饰性元素，营造出高端、专业的视觉效果。适用于重要内容展示、产品介绍等场景。

**主要特色：**
- 渐变背景：多层次青蓝色渐变
- 装饰元素：对称的装饰线条和圆点
- 响应式设计：适配各种屏幕尺寸
- 层次清晰：标题和内容区域明确分离

![优雅设计](https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg)

这种设计风格特别适合商务场景、品牌展示和高端产品介绍。如需了解更多设计理念，请访问 [设计指南](https://example.com/design-guide) 或 [最佳实践](https://example.com/best-practices) 页面。

[secondary][联系销售](https://example.com/contact)
</card:elegantStandard>

<card:elegantList>
## 关键阻塞问题
### 🚩 高风险项
- 核心模块开发延期（前端组）
- 第三方接口认证失败
- 测试环境资源不足
- 第三方接口认证失败
- 测试环境资源不足

### 🟡 待跟进项
- 需求变更审批中（2个）
- 供应商合同修订
- 需求变更审批中（2个）
- 供应商合同修订
- 需求变更审批中（2个）
- 供应商合同修订
</card:elegantList>
</layout:row>

![优雅设计](https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg)

这种设计风格特别适合商务场景、品牌展示和高端产品介绍。
[了解更多](https://example.com/elegant)
[secondary][了解更多](https://example.com/elegant)
</card:elegantStandard>

<card:elegantList>
## 列表布局卡片
### 核心功能
专为列表内容优化的布局，每个列表项都有独特的视觉样式和左侧装饰线。

- ✅ 模块化设计架构
- ✅ 智能内容自适应
- ✅ 多层级信息展示  
- ✅ 统一视觉语言
- ✅ 无障碍访问支持
- ✅ 模块化设计架构
- ✅ 智能内容自适应
- ✅ 多层级信息展示  
- ✅ 统一视觉语言
- ✅ 无障碍访问支持
- ✅ 模块化设计架构
- ✅ 智能内容自适应
- ✅ 多层级信息展示  
- ✅ 统一视觉语言
- ✅ 无障碍访问支持

完美适配功能介绍、特性列表、优势展示等内容组织方式。
</card:elegantList>
</layout:row>
</layout:bgColumn>

<layout:row>

<card:elegantTable>
## 表格布局卡片
### 数据展示
专业的表格数据展示布局，保持优雅青蓝风格的同时确保数据的清晰可读。

| 功能模块 | 完成度 | 优先级 |[background:{color.primarycontainer.brand0}]
|---------|--------|--------|
| 卡片系统 | 100% | 高 |
| 布局引擎 | 95% | 高 |
| 主题配置 | 88% | 中 |
| 动画效果 | 75% | 中 |
| 响应式设计 | 92% | 高 |

这种布局特别适合数据报告、功能对比、进度跟踪等需要表格化展示的内容。
</card:elegantTable>

<card:elegantStandard>
## 混合内容展示
### 综合应用
优雅青蓝标准布局支持各种内容类型的混合展示，包括文本、图片、按钮、代码等。更多技术细节请参考 [开发者文档](https://dev.example.com) 和 [API 参考](https://api.example.com/reference)。

**代码示例：**
```javascript
const a = 1;
```

[event:edit][编辑配置](https://github.com/example/edit)
[提交问题]()
</card:elegantStandard>

</layout:row>

<card:highlight>
## 高亮突出风格
### Highlight & Emphasis
强烈的品牌色对比，让重要信息快速抓住用户注意力

```css
.highlight-card {
  background: linear-gradient(brand-color);
  color: white;
  border-radius: 12px;
}
```

适用于重要通知、促销活动、核心功能介绍等需要强调的内容
</card:highlight>

[查看源码](https://github.com/example/elegant-cards)

## 使用指南

### 基本语法
```markdown
<card:elegantStandard>
## 卡片标题
### 子标题
内容段落支持 **粗体** 和 *斜体* 格式
![图片](url)
[按钮链接](url)
</card:elegantStandard>
```

### 列表卡片语法
```markdown
<card:elegantList>
## 列表标题
### 子标题
- 列表项1
- 列表项2
- 列表项3
总结段落
</card:elegantList>
```

### 表格卡片语法
```markdown
<card:elegantTable>
## 表格标题
### 子标题
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
说明文字
</card:elegantTable>
```

## 应用场景

<layout:row>
**商务展示**
企业介绍、产品发布、品牌宣传

**数据报告**  
业务指标、项目进度、统计分析

**功能说明**
产品特性、服务介绍、使用教程
</layout:row>

### 设计原则

1. **视觉层次**：通过颜色、大小、间距建立清晰的信息层级
2. **一致性**：所有卡片保持统一的设计语言和视觉风格  
3. **可读性**：确保在各种背景和设备上都有良好的可读性
4. **互动性**：合理使用阴影、渐变等效果提升用户体验

优雅青蓝卡片系列为您的内容提供专业、精致的展示方式。

页面元件分析

请先输入Markdown内容以分析页面元件

动作空间设置

手动重新解析当前 Markdown 内容（模板切换会自动触发解析）

0 个动作 + 0 个布局调控，影响 0 种元件类型

预览尺寸设置

当前尺寸: 1920 x 1080

HTML预览

(面板比例: 50.0% / 50.0%)

渲染尺寸: 1920 x 1080 px

动作系统状态:

❌ 系统未初始化