Skip to content

refactor(ECharts): stream ECharts 渲染的优化 #1690

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
RSS1102 wants to merge 8 commits into
base: dev
Choose a base branch
from
Draft

refactor(ECharts): stream ECharts 渲染的优化 #1690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
66ac109
refactor(ECharts): stream 支持 ECharts 渲染
RSS1102 Apr 12, 2026
2276649
feat(examples): 重构 AI 聊天流式演示，优化插件懒加载与交互 UI
RSS1102 Apr 12, 2026
5f2382f
refactor(vite): 移除 stream 版本虚拟模块逻辑
RSS1102 Apr 13, 2026
2217395
chore: 回退 json5 方案
RSS1102 Apr 13, 2026
8216a9e
feat(cherryStream): 集成 ECharts 表格插件
RSS1102 Apr 13, 2026
65ce38e
fix: 修复销毁时预览器资源泄漏及ID计数器溢出
RSS1102 Apr 13, 2026
6f37b4d
fix(dev): 对齐开发环境与生产环境的行为
RSS1102 Apr 13, 2026
f9d8fa3
Merge branch 'rss1102/refactor/echart--stream' of https://github.com/…
RSS1102 Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 132 additions & 46 deletions examples/ai_chat_stream.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,58 +137,135 @@
cursor: pointer;
}

/* 插件选项 - 胶囊样式 */
.plugin-options {
width: 100%;
max-width: var(--ai-max-width);
margin: 0 auto 16px;
padding: 16px;
background: var(--ai-surface);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
margin: 0 auto 12px;
padding: 0;
background: transparent;
box-shadow: none;
box-sizing: border-box;
}

.plugin-options h3 {
margin: 0 0 12px;
font-size: 14px;
color: #666;
display: none;
}

.plugin-list {
display: flex;
gap: 20px;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}

.plugin-sep {
width: 1px;
height: 20px;
background: var(--ai-muted);
margin: 0 4px;
}

.plugin-group-label {
font-size: 12px;
color: #999;
margin-right: 2px;
}

.plugin-or {
font-size: 11px;
color: #bbb;
font-style: italic;
}

.plugin-item {
display: flex;
align-items: center;
gap: 8px;
position: relative;
cursor: pointer;
user-select: none;
}

.plugin-item input {
width: 18px;
height: 18px;
cursor: pointer;
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

.plugin-item label {
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
border: 1px solid var(--ai-muted);
background: var(--ai-surface);
color: #666;
transition: all 0.2s ease;
white-space: nowrap;
}

.plugin-item .plugin-status {
font-size: 12px;
color: #999;
margin-left: 4px;
.plugin-item input:checked+label {
background: #e6f0ff;
border-color: var(--ai-accent);
color: var(--ai-accent);
}

.plugin-item .plugin-status.loaded {
color: #52c41a;
.plugin-item input:disabled+label,
.plugin-item input[disabled]+label {
opacity: 0.5;
pointer-events: none;
}

.plugin-item .status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: transparent;
transition: background 0.3s ease;
flex-shrink: 0;
}

.plugin-item .plugin-status.loading {
color: #faad14;
.plugin-item .status-dot.loading {
background: #faad14;
animation: pulse-dot 1s infinite;
}

.plugin-item .status-dot.loaded {
background: #52c41a;
}

@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

/* 消息选择器 */
.msg-picker {
width: 100%;
max-width: var(--ai-max-width);
margin: 0 auto 12px;
box-sizing: border-box;
}

.msg-picker-label {
font-size: 13px;
color: #666;
margin-bottom: 8px;
}

.msg-picker-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.j-msg-pick-btn:disabled,
.j-msg-pick-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
}

.custom-input {
Expand Down Expand Up @@ -230,8 +307,12 @@
}

.plugin-list {
flex-direction: column;
gap: 12px;
gap: 6px;
}

.plugin-item label {
font-size: 12px;
padding: 5px 10px;
}
}
</style>
Expand All @@ -243,39 +324,33 @@
<div class="ai-chat-wrapper">
<!-- 插件选项区 -->
<div class="plugin-options">
<h3>🔌 插件懒加载选项（勾选后懒加载对应插件）</h3>
<div class="plugin-list">
<div class="plugin-item">
<input type="checkbox" id="plugin-mermaid" class="j-plugin-checkbox" data-plugin="mermaid">
<label for="plugin-mermaid">Mermaid（流程图）</label>
<span class="plugin-status j-plugin-status" data-plugin="mermaid"></span>
<label for="plugin-mermaid">Mermaid<span class="status-dot j-plugin-status j-status-dot-mermaid"></span></label>
</div>
<span class="plugin-sep"></span>
<div class="plugin-group-label">数学公式（二选一）</div>
<div class="plugin-item">
<input type="checkbox" id="plugin-katex" class="j-plugin-checkbox" data-plugin="katex" checked>
<label for="plugin-katex">KaTeX（数学公式-轻量）</label>
<span class="plugin-status j-plugin-status" data-plugin="katex"></span>
<input type="checkbox" id="plugin-katex" class="j-plugin-checkbox" data-plugin="katex">
<label for="plugin-katex">KaTeX<span class="status-dot j-plugin-status j-status-dot-katex"></span></label>
</div>
<div class="plugin-or">or</div>
<div class="plugin-item">
<input type="checkbox" id="plugin-mathjax" class="j-plugin-checkbox" data-plugin="mathjax">
<label for="plugin-mathjax">MathJax（数学公式-完整）</label>
<span class="plugin-status j-plugin-status" data-plugin="mathjax"></span>
<label for="plugin-mathjax">MathJax<span class="status-dot j-plugin-status j-status-dot-mathjax"></span></label>
</div>
</div>
</div>

<div class="dialog j-dialog" role="log" aria-live="polite"></div>

<!-- 消息模板（隐藏） -->
<div class="one-msg j-one-msg" aria-hidden="true">
<div class="avatar">AI</div>
<div class="chat-one-msg"></div>
<!-- 消息选择区 -->
<div class="msg-picker">
<div class="msg-picker-label">选择示例消息（点击后流式打印）</div>
<div class="msg-picker-list j-msg-picker-list"></div>
</div>

<!-- 控件区 -->
<div class="controls">
<button type="button" class="button j-button">
获取消息（剩余<span class="j-button-tips"></span>条消息）
</button>
<button type="button" class="button secondary j-pause-button">
暂停流式
</button>
Expand All @@ -284,17 +359,28 @@ <h3>🔌 插件懒加载选项（勾选后懒加载对应插件）</h3>
</label>
</div>

<!-- 消息模板（隐藏） -->
<div class="one-msg j-one-msg" aria-hidden="true">
<div class="avatar">AI</div>
<div class="chat-one-msg"></div>
</div>

<!-- 渲染区 -->
<div class="dialog j-dialog" role="log" aria-live="polite"></div>

<!-- 自定义输入区 -->
<div class="custom-input">
<textarea class="custom-textarea j-custom-textarea" placeholder="请输入您想要流式打印的Markdown内容..."></textarea>
<div class="button custom-button j-custom-button">流式打印自定义内容</div>
<button type="button" class="button custom-button j-custom-button">流式打印自定义内容</button>
</div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="../packages/cherry-markdown/dist/cherry-markdown.stream.js"></script>
<script type="module">
import { aiChatStreamScenario } from './assets/scripts/ai-chat-stream-demo.js';
aiChatStreamScenario();
</script>
</body>

</html>
</html>
Loading
Loading