diff --git a/index.html b/index.html
index 79b40a0..9589443 100644
--- a/index.html
+++ b/index.html
@@ -72,6 +72,7 @@
+
diff --git a/js/core/app-shell.js b/js/core/app-shell.js
index 6124811..bca508d 100644
--- a/js/core/app-shell.js
+++ b/js/core/app-shell.js
@@ -51,6 +51,7 @@
// 对话相关
this.el.chatInput = document.getElementById('chat-input');
+ this.el.chatQuickActions = document.getElementById('chat-quick-actions');
this.el.sendButton = document.getElementById('send-button');
this.el.clearHistoryBtn = document.getElementById('clear-history-btn');
this.el.chatHistory = document.getElementById('chat-history');
@@ -118,6 +119,20 @@
});
}
+ if (this.el.chatQuickActions) {
+ this.el.chatQuickActions.addEventListener('click', (event) => {
+ const actionBtn = event.target.closest('[data-quick-value]');
+ if (!actionBtn) return;
+ event.preventDefault();
+ const quickValue = actionBtn.dataset.quickValue || '';
+ if (this.el.chatInput) {
+ this.el.chatInput.value = quickValue;
+ Utils.autoResizeTextarea(this.el.chatInput);
+ this.el.chatInput.focus();
+ }
+ });
+ }
+
if (this.el.clearHistoryBtn) {
this.el.clearHistoryBtn.addEventListener('click', () =>
this.clearCurrentConversation()
@@ -296,6 +311,7 @@
if (this.el.chatInput && manifest.chat?.placeholder) {
this.el.chatInput.placeholder = manifest.chat.placeholder;
}
+ this.renderQuickActions(manifest.ui?.quickActions || []);
this.showViewerPlaceholder(manifest.ui?.placeholderText || '');
}
@@ -312,6 +328,26 @@
this.el.viewer && this.el.viewer.querySelector('#placeholder-text');
}
+ renderQuickActions(actions = []) {
+ if (!this.el.chatQuickActions) return;
+ const container = this.el.chatQuickActions;
+ container.innerHTML = '';
+ if (!actions.length) {
+ container.classList.add('hidden');
+ return;
+ }
+ container.classList.remove('hidden');
+ actions.forEach((action) => {
+ const button = document.createElement('button');
+ button.type = 'button';
+ button.className =
+ 'quick-action-btn bg-white text-gray-700 px-3 py-1 text-sm border-2 border-black font-semibold hover:bg-gray-100 transition-all duration-200';
+ button.dataset.quickValue = action.value || '';
+ button.textContent = action.label || action.value || '快捷选项';
+ container.appendChild(button);
+ });
+ }
+
getActiveManifest() {
return this.runtime.getManifest(this.activeModuleId);
}
diff --git a/js/modules/echarts.js b/js/modules/echarts.js
index 97f5fe1..738c1f3 100644
--- a/js/modules/echarts.js
+++ b/js/modules/echarts.js
@@ -72,7 +72,15 @@
allowCode: true
},
ui: {
- placeholderText: '生成的 ECharts 图表将在此处显示'
+ placeholderText: '生成的 ECharts 图表将在此处显示',
+ quickActions: [
+ { label: '折线图', value: '使用折线图配置;' },
+ { label: '面积图', value: '使用面积图配置;' },
+ { label: '柱状图', value: '使用柱状图配置;' },
+ { label: '条形图', value: '使用条形图配置;' },
+ { label: '饼图', value: '使用饼图配置;' },
+ { label: '雷达图', value: '使用雷达图配置;' }
+ ]
}
});
})(window);
diff --git a/js/modules/mermaid.js b/js/modules/mermaid.js
index cd34770..abd8236 100644
--- a/js/modules/mermaid.js
+++ b/js/modules/mermaid.js
@@ -52,7 +52,15 @@
allowCode: true
},
ui: {
- placeholderText: '生成的 Mermaid 图示将在此处显示'
+ placeholderText: '生成的 Mermaid 图示将在此处显示',
+ quickActions: [
+ { label: '流程图', value: '使用flowchart视图;' },
+ { label: '序列图', value: '使用sequenceDiagram视图;' },
+ { label: '类图', value: '使用classDiagram视图;' },
+ { label: '状态图', value: '使用stateDiagram-v2视图;' },
+ { label: 'ER图', value: '使用erDiagram视图;' },
+ { label: '甘特图', value: '使用gantt视图;' }
+ ]
}
});
})(window);