对话框卡片

medical-card-demo/frontend/src/components/ChatInterface.vue

@@ -56,6 +56,48 @@
       </div>
     </div>
     
+    <!-- 快捷功能卡片 -->
+    <div class="quick-actions">
+      <button 
+        class="quick-action-btn"
+        @click="quickAction('建档')"
+        :disabled="isLoading"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+          <circle cx="12" cy="7" r="4"/>
+        </svg>
+        <span>登录建档</span>
+      </button>
+      <button 
+        class="quick-action-btn"
+        @click="quickAction('挂号')"
+        :disabled="isLoading"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+          <line x1="16" y1="2" x2="16" y2="6"/>
+          <line x1="8" y1="2" x2="8" y2="6"/>
+          <line x1="3" y1="10" x2="21" y2="10"/>
+        </svg>
+        <span>挂号</span>
+      </button>
+      <button 
+        class="quick-action-btn"
+        @click="quickAction('检验报告解读')"
+        :disabled="isLoading"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+          <polyline points="10 9 9 9 8 9"/>
+        </svg>
+        <span>检验报告解读</span>
+      </button>
+    </div>
+
     <!-- 输入框 -->
     <div class="chat-input-container">
       <div class="chat-input-wrapper">
@@ -375,6 +417,25 @@ export default {
       }
     }
     
+    // 快捷功能点击
+    const quickAction = async (actionType) => {
+      let query = ''
+      switch (actionType) {
+        case '建档':
+          query = '我要建档'
+          break
+        case '挂号':
+          query = '我要挂号'
+          break
+        case '检验报告解读':
+          query = '检验报告解读'
+          break
+      }
+      
+      inputMessage.value = query
+      await sendMessage()
+    }
+    
     // 初始化欢迎消息
     onMounted(() => {
       addMessage('ai', '您好！欢迎使用甘肃省中医院智慧医疗服务。您可以咨询症状、预约挂号、解读检验报告或查询建档信息。')
@@ -387,7 +448,8 @@ export default {
       messagesContainer,
       sendMessage,
       getCardComponent,
-      handleCardAction
+      handleCardAction,
+      quickAction
     }
   }
 }
@@ -650,4 +712,53 @@ export default {
   height: 14px;
   color: #1a5f9e;
 }
+
+/* 快捷功能卡片 */
+.quick-actions {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.quick-actions::-webkit-scrollbar {
+  display: none;
+}
+
+.quick-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid #e0e0e0;
+  border-radius: 20px;
+  background: #fff;
+  color: #333;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.quick-action-btn:hover:not(:disabled) {
+  background: #1a5f9e;
+  color: white;
+  border-color: #1a5f9e;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(26, 95, 158, 0.2);
+}
+
+.quick-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.quick-action-btn svg {
+  width: 16px;
+  height: 16px;
+}
 </style>