import type { BubbleProps } from '@components/Bubble/types';
import type { BubbleListProps } from '@components/BubbleList/types';
import type { FilesType } from '@components/FilesCard/types';
import type { ThinkingStatus } from '@components/Thinking/types';
// 头像1
export const avatar1: string =
'https://avatars.githubusercontent.com/u/76239030?v=4';
// 头像2
export const avatar2: string =
'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
// md 普通内容
export const mdContent = `
### 行内公式
1. 欧拉公式：$e^{i\\pi} + 1 = 0$
2. 二次方程求根公式：$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$
3. 向量点积：$\\vec{a} \\cdot \\vec{b} = a_x b_x + a_y b_y + a_z b_z$
### []包裹公式
\\[ e^{i\\pi} + 1 = 0 \\]
\\[\\boxed{boxed包裹}\\]
### 块级公式
1. 傅里叶变换：
$$
F(\\omega) = \\int_{-\\infty}^{\\infty} f(t) e^{-i\\omega t} dt
$$
2. 矩阵乘法：
$$
\\begin{bmatrix}
a & b \\\\
c & d
\\end{bmatrix}
\\begin{bmatrix}
x \\\\
y
\\end{bmatrix}
=
\\begin{bmatrix}
ax + by \\\\
cx + dy
\\end{bmatrix}
$$
3. 泰勒级数展开：
$$
f(x) = \\sum_{n=0}^{\\infty} \\frac{f^{(n)}(a)}{n!} (x - a)^n
$$
4. 拉普拉斯方程：
$$
\\nabla^2 u = \\frac{\\partial^2 u}{\\partial x^2} + \\frac{\\partial^2 u}{\\partial y^2} + \\frac{\\partial^2 u}{\\partial z^2} = 0
$$
5. 概率密度函数（正态分布）：
$$
f(x) = \\frac{1}{\\sqrt{2\\pi\\sigma^2}} e^{-\\frac{(x-\\mu)^2}{2\\sigma^2}}
$$
# 标题
这是一个 Markdown 示例。
- 列表项 1
- 列表项 2
**粗体文本** 和 *斜体文本*
- [x] Add some task
- [ ] Do some task
`.trim();
// md 代码块高亮
export const highlightMdContent = `
#### 切换右侧的secureViewCode进行安全预览或者不启用安全预览模式下 会呈现不同的网页预览效果
##### 通过enableCodeLineNumber属性开启代码行号
\`\`\`html
炫酷文字动效
AWESOME TEXT
\`\`\`
\`\`\`html
新品
无线蓝牙耳机 Pro
主动降噪技术，30小时续航，IPX5防水等级
★★★★☆
(124条评价)
¥499
¥699
7折
✓ 次日达
✓ 7天无理由
\`\`\`
###### 非\`commonMark\`语法，dom多个
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, world!");
}
}
\`\`\`echarts
use codeXRender for echarts render
\`\`\`
### javascript
\`\`\`javascript
console.log('Hello, world!');
\`\`\`
### java
\`\`\`java
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, world!");
}
}
\`\`\`
\`\`\`typescript
import {
ArrowDownBold,
CopyDocument,
Moon,
Sunny
} from '@element-plus/icons-vue';
import { ElButton, ElSpace } from 'element-plus';
import { h } from 'vue';
/* ----------------------------------- 按钮组 ---------------------------------- */
/**
* @description 描述 language标签
* @date 2025-06-25 17:48:15
* @author tingfeng
*
* @export
* @param language
*/
export function languageEle(language: string) {
return h(
ElSpace,
{},
{}
);
}
\`\`\`
`.trim();
// md 美人鱼图表
export const mermaidMdContent = `
### mermaid 饼状图
\`\`\`mermaid
pie
"传媒及文化相关" : 35
"广告与市场营销" : 8
"游戏开发" : 15
"影视动画与特效" : 12
"互联网产品设计" : 10
"VR/AR开发" : 5
"其他" : 15
\`\`\`
`;
// md 数学公式
export const mathMdContent = `
### mermaid 流程图
\`\`\`mermaid
graph LR
1 --> 2
2 --> 3
3 --> 4
2 --> 1
2-3 --> 1-3
\`\`\`
\`\`\`mermaid
flowchart TD
Start[开始] --> Check[是否通过？]
Check -- 是 --> Pass[流程继续]
Check -- 否 --> Reject[流程结束]
\`\`\`
\`\`\`mermaid
flowchart TD
%% 前端专项四层结构
A["战略层
【提升用户体验】"]
--> B["架构层
【微前端方案选型】"]
--> C["框架层
【React+TS技术栈】"]
--> D["实现层
【组件库开发】"]
style A fill:#FFD700,stroke:#FFA500
style B fill:#87CEFA,stroke:#1E90FF
style C fill:#9370DB,stroke:#663399
style D fill:#FF6347,stroke:#CD5C5C
\`\`\`
### mermaid 数学公式
\`\`\`mermaid
sequenceDiagram
autonumber
participant 1 as $$alpha$$
participant 2 as $$beta$$
1->>2: Solve: $$\sqrt{2+2}$$
2-->>1: Answer: $$2$$
\`\`\`
`;
export const customAttrContent = `
element-plus-x
标题1
标题2
`;
export type MessageItem = BubbleProps & {
key: number;
role: 'ai' | 'user' | 'system';
avatar: string;
thinkingStatus?: ThinkingStatus;
expanded?: boolean;
};
// md 复杂图表
export const mermaidComplexMdContent = `
### Mermaid 渲染复杂图表案例
\`\`\`mermaid
graph LR
A[用户] -->|请求交互| B[前端应用]
B -->|API调用| C[API网关]
C -->|认证请求| D[认证服务]
C -->|业务请求| E[业务服务]
E -->|数据读写| F[数据库]
E -->|缓存操作| G[缓存服务]
E -->|消息发布| H[消息队列]
H -->|触发任务| I[后台任务]
subgraph "微服务集群"
D[认证服务]
E[业务服务]
I[后台任务]
end
subgraph "数据持久层"
F[数据库]
G[缓存服务]
end
`;
// animateTestMdContent 为动画测试的 markdown 内容，包含唐代王勃《滕王阁序》并做了格式优化
// animateTestMdContent 为动画测试的 markdown 内容，包含唐代王勃《滕王阁序》并做了格式优化（部分内容采用表格样式展示）
export const animateTestMdContent = `
### 唐代：王勃《滕王阁序》
| 章节 | 内容 |
| ---- | ---- |
| 开篇 | 豫章故郡，洪都新府。
星分翼轸，地接衡庐。
襟三江而带五湖，控蛮荆而引瓯越。
物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。
都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。
十旬休假，胜友如云；千里逢迎，高朋满座。
腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。
家君作宰，路出名区；童子何知，躬逢胜饯。 |
| 九月三秋 | 时维九月，序属三秋。
潦水尽而寒潭清，烟光凝而暮山紫。
俨骖騑于上路，访风景于崇阿。
临帝子之长洲，得天人之旧馆。
层峦耸翠，上出重霄；飞阁流丹，下临无地。
鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。 |
| 山川景色 | 披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。
闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。
云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。
渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。 |
| 兴致抒怀 | 遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。
睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。
四美具，二难并。穷睇眄于中天，极娱游于暇日。
天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。
望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。
关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。
怀帝阍而不见，奉宣室以何年？ |
| 感慨身世 | 嗟乎！时运不齐，命途多舛。
冯唐易老，李广难封。
屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？
所赖君子见机，达人知命。
老当益壮，宁移白首之心？
穷且益坚，不坠青云之志。
酌贪泉而觉爽，处涸辙以犹欢。
北海虽赊，扶摇可接；东隅已逝，桑榆非晚。
孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！ |
| 自述 | 勃，三尺微命，一介书生。
无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。
舍簪笏于百龄，奉晨昏于万里。
非谢家之宝树，接孟氏之芳邻。
他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。
杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？ |
| 结尾 | 呜呼！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。
临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。
敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。
请洒潘江，各倾陆海云尔。 |
---
### 滕王阁诗
> 滕王高阁临江渚，佩玉鸣鸾罢歌舞。
> 画栋朝飞南浦云，珠帘暮卷西山雨。
> 闲云潭影日悠悠，物换星移几度秋。
> 阁中帝子今何在？槛外长江空自流。
`;
export const messageArr: BubbleListProps['list'] = [
{
key: 1,
role: 'ai',
placement: 'start',
content: '欢迎使用 Element Plus X .'.repeat(5),
loading: true,
shape: 'corner',
variant: 'filled',
isMarkdown: false,
typing: { step: 2, suffix: '💗' },
avatar: avatar2,
avatarSize: '32px'
},
{
key: 2,
role: 'user',
placement: 'end',
content: '这是用户的消息',
loading: true,
shape: 'corner',
variant: 'outlined',
isMarkdown: false,
avatar: avatar1,
avatarSize: '32px'
},
{
key: 3,
role: 'ai',
placement: 'start',
content: '欢迎使用 Element Plus X .'.repeat(5),
loading: true,
shape: 'corner',
variant: 'filled',
isMarkdown: false,
typing: { step: 2, suffix: '💗' },
avatar: avatar2,
avatarSize: '32px'
},
{
key: 4,
role: 'user',
placement: 'end',
content: '这是用户的消息',
loading: true,
shape: 'corner',
variant: 'outlined',
isMarkdown: false,
avatar: avatar1,
avatarSize: '32px'
},
{
key: 5,
role: 'ai',
placement: 'start',
content: '欢迎使用 Element Plus X .'.repeat(5),
loading: true,
shape: 'corner',
variant: 'filled',
isMarkdown: false,
typing: { step: 2, suffix: '💗' },
avatar: avatar2,
avatarSize: '32px'
},
{
key: 6,
role: 'user',
placement: 'end',
content: '这是用户的消息',
loading: true,
shape: 'corner',
variant: 'outlined',
isMarkdown: false,
avatar: avatar1,
avatarSize: '32px'
},
{
key: 7,
role: 'ai',
placement: 'start',
content: '欢迎使用 Element Plus X .'.repeat(5),
loading: true,
shape: 'corner',
variant: 'filled',
isMarkdown: false,
typing: { step: 2, suffix: '💗', isRequestEnd: true },
avatar: avatar2,
avatarSize: '32px'
},
{
key: 8,
role: 'user',
placement: 'end',
content: '这是用户的消息',
loading: true,
shape: 'corner',
variant: 'outlined',
isMarkdown: false,
avatar: avatar1,
avatarSize: '32px'
}
];
// 模拟自定义文件卡片数据
// 内置样式
export const colorMap: Record = {
word: '#0078D4',
excel: '#00C851',
ppt: '#FF5722',
pdf: '#E53935',
txt: '#424242',
mark: '#6C6C6C',
image: '#FF80AB',
audio: '#FF7878',
video: '#8B72F7',
three: '#29B6F6',
code: '#00008B',
database: '#FF9800',
link: '#2962FF',
zip: '#673AB7',
file: '#FFC757',
unknown: '#6E9DA4'
};
// 自己定义文件颜色
export const colorMap1: Record = {
word: '#5E74A8',
excel: '#4A6B4A',
ppt: '#C27C40',
pdf: '#5A6976',
txt: '#D4C58C',
mark: '#FFA500',
image: '#8E7CC3',
audio: '#A67B5B',
video: '#4A5568',
three: '#5F9E86',
code: '#4B636E',
database: '#4A5A6B',
link: '#5D7CBA',
zip: '#8B5E3C',
file: '#AAB2BF',
unknown: '#888888'
};
// 自己定义文件颜色1
export const colorMap2: Record = {
word: '#0078D4',
excel: '#4CB050',
ppt: '#FF9933',
pdf: '#E81123',
txt: '#666666',
mark: '#FFA500',
image: '#B490F3',
audio: '#00B2EE',
video: '#2EC4B6',
three: '#00C8FF',
code: '#00589F',
database: '#F5A623',
link: '#007BFF',
zip: '#888888',
file: '#F0D9B5',
unknown: '#D8D8D8'
};