From c03be8d65af719f490daf62652a0a3b0de65bf9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= <shiyue@hdzxbj.com>
Date: Mon, 27 Oct 2025 17:14:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E5=87=A0=E4=B8=AA?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html            |  1 +
 js/core/app-shell.js  | 36 ++++++++++++++++++++++++++++++++++++
 js/modules/echarts.js | 10 +++++++++-
 js/modules/mermaid.js | 10 +++++++++-
 4 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 79b40a0..9589443 100644
--- a/index.html
+++ b/index.html
@@ -72,6 +72,7 @@
               <iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>
             </button>
           </div>
+          <div id="chat-quick-actions" class="mt-2 flex flex-wrap gap-2 hidden"></div>
         </div>
       </div>
     
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);