cd-aichat 1.0.0

package/src/components/AiChatWidget.vue

@@ -0,0 +1,963 @@
+<template>
+  <div class="ai-chat-widget">
+    <!-- 浮动触发按钮 -->
+    <transition name="fade">
+      <div
+        v-if="!isOpen"
+        :class="['ai-chat-trigger', { pulse: showPulse, dragging: isTriggerDragging }]"
+        :style="triggerStyle"
+        @mousedown="startTriggerDrag"
+      >
+        <slot name="trigger" :is-open="isOpen" :unread-count="unreadCount">
+          <img v-if="triggerImage" :src="triggerImage" class="trigger-image" alt="AI助手" />
+          <i v-else class="ri-robot-line trigger-icon"></i>
+          <span v-if="showBadge && unreadCount > 0" class="trigger-badge badge">
+            {{ unreadCount > 99 ? '99+' : unreadCount }}
+          </span>
+        </slot>
+      </div>
+    </transition>
+    <!-- 对话框窗口 -->
+    <transition name="slide-up">
+      <div
+        v-if="isOpen"
+        ref="dialogRef"
+        :class="['ai-chat-dialog', { maximized: isMaximized, dragging: isDragging }]"
+        :style="dialogStyle"
+      >
+        <!-- 对话框头部 -->
+        <div
+          class="ai-chat-dialog-header"
+          :style="{ background: headerColor }"
+          @mousedown="startDrag"
+        >
+          <div class="header-left">
+            <slot name="header" :title="title" :is-maximized="isMaximized">
+              <div class="header-info">
+                <div class="header-title">{{ title }}</div>
+                <div v-if="subtitle" class="header-subtitle">{{ subtitle }}</div>
+              </div>
+            </slot>
+          </div>
+          <div class="header-actions">
+            <button
+              class="header-btn"
+              title="最小化"
+              @click.stop="minimizeDialog"
+            >
+              <i class="ri-subtract-line"></i>
+            </button>
+            <button
+              class="header-btn"
+              :title="isMaximized ? '还原' : '最大化'"
+              @click.stop="toggleMaximize"
+            >
+              <i :class="isMaximized ? 'ri-contract-line' : 'ri-expand-diagonal-line'"></i>
+            </button>
+            <button
+              class="header-btn header-btn-close close-btn"
+              title="关闭"
+              @click.stop="closeDialog"
+            >
+              <i class="ri-close-line"></i>
+            </button>
+          </div>
+        </div>
+        <!-- 对话框内容 -->
+        <div class="ai-chat-dialog-body">
+          <!-- 快捷操作 -->
+          <div 
+            v-if="showQuickActions && quickActions.length > 0 && !hasMessages" 
+            class="quick-actions-container"
+          >
+            <div class="quick-actions-title">快速开始</div>
+            <div class="quick-actions-list">
+              <button
+                v-for="(action, index) in quickActions"
+                :key="index"
+                class="quick-action-btn"
+                @click="handleQuickAction(action)"
+              >
+                <i v-if="action.icon" :class="action.icon" class="action-icon"></i>
+                <span>{{ action.text }}</span>
+              </button>
+            </div>
+          </div>
+          <!-- AiChat 组件 -->
+          <AiChat
+            ref="chatRef"
+            chat-type="ai"
+            :chat-user="chatUser"
+            :current-user-id="currentUserId"
+            :current-user-avatar="currentUserAvatar"
+            :ai-config="aiConfig"
+            :initial-messages="initialMessages"
+            :hidden-tools="hiddenTools"
+            :show-back-button="false"
+            :show-close-button="false"
+            :is-mobile="isMobile"
+            :enable-ai-config-hot-reload="enableAiConfigHotReload"
+            @send="handleSend"
+            @aiResponseStart="handleAiResponseStart"
+            @aiResponseComplete="handleAiResponseComplete"
+            @aiResponseError="handleAiResponseError"
+            @conversationUpdate="handleConversationUpdate"
+            @aiConfigUpdate="handleAiConfigUpdate"
+            v-bind="$attrs"
+          >
+            <!-- 传递所有插槽 -->
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData"></slot>
+            </template>
+          </AiChat>
+        </div>
+        <!-- 调整大小手柄 -->
+        <div
+          v-if="resizable && !isMaximized && !isMobile"
+          class="resize-handle resize-handle-se"
+          @mousedown.stop="startResize"
+        ></div>
+      </div>
+    </transition>
+    <!-- 遮罩层 -->
+    <transition name="fade">
+      <div
+        v-if="isOpen && showMask"
+        class="ai-chat-mask"
+        :style="{ zIndex: zIndex - 1 }"
+        @click="handleMaskClick"
+      ></div>
+    </transition>
+  </div>
+</template>
+<script>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import AiChat from './AiChat.vue';
+export default {
+  name: 'AiChatWidget',
+  components: {
+    AiChat
+  },
+  inheritAttrs: false,
+  props: {
+    // === 位置配置 ===
+    position: {
+      type: String,
+      default: 'bottom-right',
+      validator: (value) => ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(value)
+    },
+    offset: {
+      type: Object,
+      default: () => ({ x: 20, y: 20 })
+    },
+    // === 尺寸配置 ===
+    defaultSize: {
+      type: Object,
+      default: () => ({ width: 400, height: 600 })
+    },
+    minSize: {
+      type: Object,
+      default: () => ({ width: 320, height: 400 })
+    },
+    maxSize: {
+      type: Object,
+      default: () => ({ width: 800, height: 900 })
+    },
+    // === 行为配置 ===
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    triggerDraggable: {
+      type: Boolean,
+      default: true
+    },
+    resizable: {
+      type: Boolean,
+      default: true
+    },
+    defaultOpen: {
+      type: Boolean,
+      default: false
+    },
+    showMask: {
+      type: Boolean,
+      default: false
+    },
+    closeOnMaskClick: {
+      type: Boolean,
+      default: true
+    },
+    // === 触发按钮配置 ===
+    buttonIcon: {
+      type: String,
+      default: 'ri-robot-line'
+    },
+    buttonText: {
+      type: String,
+      default: ''
+    },
+    triggerImage: {
+      type: String,
+      default: ''
+    },
+    showBadge: {
+      type: Boolean,
+      default: true
+    },
+    badgeCount: {
+      type: Number,
+      default: 0
+    },
+    showPulse: {
+      type: Boolean,
+      default: true
+    },
+    // === 工具栏配置 ===
+    hiddenTools: {
+      type: Array,
+      default: () => ['location', 'card', 'voice', 'video']
+    },
+    // === AI 配置（继承自 AiChat） ===
+    aiConfig: {
+      type: Object,
+      required: true
+    },
+    currentUserId: {
+      type: String,
+      required: true
+    },
+    currentUserAvatar: {
+      type: String,
+      default: ''
+    },
+    chatUser: {
+      type: Object,
+      default: () => ({
+        id: 'ai_assistant',
+        name: 'AI 助手',
+        avatar: '',
+        account: 'ai'
+      })
+    },
+    initialMessages: {
+      type: Array,
+      default: () => []
+    },
+    enableAiConfigHotReload: {
+      type: Boolean,
+      default: true
+    },
+    // === 样式配置 ===
+    theme: {
+      type: String,
+      default: 'light',
+      validator: (value) => ['light', 'dark'].includes(value)
+    },
+    zIndex: {
+      type: Number,
+      default: 1000
+    },
+    headerColor: {
+      type: String,
+      default: '#0067CC'
+    },
+    // === 其他 ===
+    title: {
+      type: String,
+      default: 'AI 助手'
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    showWelcome: {
+      type: Boolean,
+      default: true
+    },
+    // === 快捷操作配置 ===
+    quickActions: {
+      type: Array,
+      default: () => []
+      // 格式: [{ text: '创建报表', workflowId: 'workflow-001' }]
+    },
+    showQuickActions: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: [
+    'open', 'close', 'minimize', 'maximize', 'restore', 'drag', 'resize',
+    'send', 'aiResponseStart', 'aiResponseComplete', 'aiResponseError',
+    'conversationUpdate', 'aiConfigUpdate', 'quickAction'
+  ],
+  setup(props, { emit }) {
+    // Refs
+    const dialogRef = ref(null);
+    const chatRef = ref(null);
+    // 状态
+    const isOpen = ref(props.defaultOpen);
+    const isMaximized = ref(false);
+    const isDragging = ref(false);
+    const isResizing = ref(false);
+    const unreadCount = ref(props.badgeCount);
+    const hasMessages = ref(props.initialMessages.length > 0);
+    // 调试：输出初始状态
+    console.log('[AiChatWidget] 初始化:', {
+      defaultOpen: props.defaultOpen,
+      isOpen: isOpen.value,
+      position: props.position,
+      windowWidth: window.innerWidth,
+      isMobileCheck: window.innerWidth < 768
+    });
+    // 位置和尺寸
+    const dialogPosition = ref({ x: 0, y: 0 });
+    const dialogSize = ref({ ...props.defaultSize });
+    const savedPosition = ref({ x: 0, y: 0 });
+    const savedSize = ref({ ...props.defaultSize });
+    // 触发按钮位置
+    const triggerPosition = ref(null);
+    const isTriggerDragging = ref(false);
+    // 拖拽相关
+    const dragOffset = ref({ x: 0, y: 0 });
+    const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
+    // 响应式检测
+    const isMobile = computed(() => {
+      return window.innerWidth < 768;
+    });
+    // 触发按钮样式
+    const triggerStyle = computed(() => {
+      const style = {
+        zIndex: props.zIndex
+      };
+      // 如果已经拖动过，使用保存的位置
+      if (triggerPosition.value) {
+        style.left = `${triggerPosition.value.x}px`;
+        style.top = `${triggerPosition.value.y}px`;
+        return style;
+      }
+      // 否则使用默认位置
+      const [vertical, horizontal] = props.position.split('-');
+      style[vertical] = `${props.offset.y}px`;
+      style[horizontal] = `${props.offset.x}px`;
+      return style;
+    });
+    // 对话框样式
+    const dialogStyle = computed(() => {
+      if (isMaximized.value) {
+        return {
+          top: 0,
+          left: 0,
+          width: '100vw',
+          height: '100vh',
+          zIndex: props.zIndex
+        };
+      }
+      return {
+        top: `${dialogPosition.value.y}px`,
+        left: `${dialogPosition.value.x}px`,
+        width: `${dialogSize.value.width}px`,
+        height: `${dialogSize.value.height}px`,
+        zIndex: props.zIndex
+      };
+    });
+    // 计算初始位置
+    const calculateInitialPosition = () => {
+      const [vertical, horizontal] = props.position.split('-');
+      const x = horizontal === 'right'
+        ? window.innerWidth - dialogSize.value.width - props.offset.x
+        : props.offset.x;
+      const y = vertical === 'bottom'
+        ? window.innerHeight - dialogSize.value.height - props.offset.y
+        : props.offset.y;
+      dialogPosition.value = { x, y };
+    };
+    // 打开对话框
+    const openDialog = () => {
+      isOpen.value = true;
+      calculateInitialPosition();
+      unreadCount.value = 0;
+      emit('open');
+      // 移动端自动最大化
+      if (isMobile.value) {
+        isMaximized.value = true;
+      }
+    };
+    // 关闭对话框
+    const closeDialog = () => {
+      isOpen.value = false;
+      isMaximized.value = false;
+      emit('close');
+    };
+    // 最小化对话框
+    const minimizeDialog = () => {
+      isOpen.value = false;
+      emit('minimize');
+    };
+    // 切换最大化
+    const toggleMaximize = () => {
+      if (isMaximized.value) {
+        // 还原
+        dialogPosition.value = { ...savedPosition.value };
+        dialogSize.value = { ...savedSize.value };
+        isMaximized.value = false;
+        emit('restore');
+      } else {
+        // 保存当前状态
+        savedPosition.value = { ...dialogPosition.value };
+        savedSize.value = { ...dialogSize.value };
+        // 最大化
+        isMaximized.value = true;
+        emit('maximize');
+      }
+    };
+    // 开始拖拽
+    const startDrag = (e) => {
+      if (!props.draggable || isMaximized.value || isMobile.value) return;
+      isDragging.value = true;
+      const rect = dialogRef.value.getBoundingClientRect();
+      dragOffset.value = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+      document.addEventListener('mousemove', onDrag);
+      document.addEventListener('mouseup', stopDrag);
+    };
+    // 拖拽中
+    const onDrag = (e) => {
+      if (!isDragging.value) return;
+      let x = e.clientX - dragOffset.value.x;
+      let y = e.clientY - dragOffset.value.y;
+      // 限制在视口内
+      const maxX = window.innerWidth - dialogSize.value.width;
+      const maxY = window.innerHeight - dialogSize.value.height;
+      x = Math.max(0, Math.min(x, maxX));
+      y = Math.max(0, Math.min(y, maxY));
+      dialogPosition.value = { x, y };
+      emit('drag', { x, y });
+    };
+    // 停止拖拽
+    const stopDrag = () => {
+      isDragging.value = false;
+      document.removeEventListener('mousemove', onDrag);
+      document.removeEventListener('mouseup', stopDrag);
+    };
+    // 触发按钮拖动相关
+    const triggerDragStart = ref({ x: 0, y: 0 });
+    const hasMoved = ref(false);
+    const dragThreshold = 5; // 拖拽阈值（像素）
+
+    const startTriggerDrag = (e) => {
+      if (!props.triggerDraggable || isMobile.value) {
+        openDialog();
+        return;
+      }
+      e.preventDefault();
+      // 记录起始位置
+      triggerDragStart.value = { x: e.clientX, y: e.clientY };
+      hasMoved.value = false;
+      // 计算初始位置（如果还没有保存过位置）
+      if (!triggerPosition.value) {
+        const [vertical, horizontal] = props.position.split('-');
+        const x = horizontal === 'right'
+          ? window.innerWidth - 60 - props.offset.x
+          : props.offset.x;
+        const y = vertical === 'bottom'
+          ? window.innerHeight - 60 - props.offset.y
+          : props.offset.y;
+        triggerPosition.value = { x, y };
+      }
+      dragOffset.value = {
+        x: e.clientX - triggerPosition.value.x,
+        y: e.clientY - triggerPosition.value.y
+      };
+      // 只添加 mousemove 监听来检测是否开始拖拽
+      document.addEventListener('mousemove', checkDragStart);
+      document.addEventListener('mouseup', stopTriggerDrag);
+    };
+
+    const checkDragStart = (e) => {
+      const deltaX = Math.abs(e.clientX - triggerDragStart.value.x);
+      const deltaY = Math.abs(e.clientY - triggerDragStart.value.y);
+
+      if (deltaX > dragThreshold || deltaY > dragThreshold) {
+        // 超过阈值，开始真正的拖拽
+        hasMoved.value = true;
+        isTriggerDragging.value = true;
+        document.removeEventListener('mousemove', checkDragStart);
+        document.addEventListener('mousemove', onTriggerDrag);
+      }
+    };
+
+    const onTriggerDrag = (e) => {
+      let x = e.clientX - dragOffset.value.x;
+      let y = e.clientY - dragOffset.value.y;
+      // 限制在视口内（按钮大小 60px）
+      const maxX = window.innerWidth - 60;
+      const maxY = window.innerHeight - 60;
+      x = Math.max(0, Math.min(x, maxX));
+      y = Math.max(0, Math.min(y, maxY));
+      triggerPosition.value = { x, y };
+    };
+
+    const stopTriggerDrag = (e) => {
+      document.removeEventListener('mousemove', checkDragStart);
+      document.removeEventListener('mousemove', onTriggerDrag);
+      document.removeEventListener('mouseup', stopTriggerDrag);
+
+      // 如果没有移动，触发点击打开对话框
+      if (!hasMoved.value) {
+        openDialog();
+      }
+
+      // 重置状态
+      setTimeout(() => {
+        isTriggerDragging.value = false;
+        hasMoved.value = false;
+      }, 50);
+    };
+    // 开始调整大小
+    const startResize = (e) => {
+      if (!props.resizable) return;
+      isResizing.value = true;
+      resizeStart.value = {
+        x: e.clientX,
+        y: e.clientY,
+        width: dialogSize.value.width,
+        height: dialogSize.value.height
+      };
+      document.addEventListener('mousemove', onResize);
+      document.addEventListener('mouseup', stopResize);
+    };
+    // 调整大小中
+    const onResize = (e) => {
+      if (!isResizing.value) return;
+      const deltaX = e.clientX - resizeStart.value.x;
+      const deltaY = e.clientY - resizeStart.value.y;
+      let newWidth = resizeStart.value.width + deltaX;
+      let newHeight = resizeStart.value.height + deltaY;
+      // 应用尺寸限制
+      newWidth = Math.max(props.minSize.width, Math.min(newWidth, props.maxSize.width));
+      newHeight = Math.max(props.minSize.height, Math.min(newHeight, props.maxSize.height));
+      dialogSize.value = { width: newWidth, height: newHeight };
+      emit('resize', { width: newWidth, height: newHeight });
+    };
+    // 停止调整大小
+    const stopResize = () => {
+      isResizing.value = false;
+      document.removeEventListener('mousemove', onResize);
+      document.removeEventListener('mouseup', stopResize);
+    };
+    // 处理遮罩点击
+    const handleMaskClick = () => {
+      if (props.closeOnMaskClick) {
+        closeDialog();
+      }
+    };
+    // 事件处理
+    const handleSend = (data) => {
+      hasMessages.value = true;
+      emit('send', data);
+    };
+    const handleAiResponseStart = (data) => {
+      emit('aiResponseStart', data);
+    };
+    const handleAiResponseComplete = (data) => {
+      emit('aiResponseComplete', data);
+    };
+    const handleAiResponseError = (data) => {
+      emit('aiResponseError', data);
+    };
+    const handleConversationUpdate = (data) => {
+      emit('conversationUpdate', data);
+    };
+    const handleAiConfigUpdate = (data) => {
+      emit('aiConfigUpdate', data);
+    };
+    // 处理快捷操作点击
+    const handleQuickAction = (action) => {
+      emit('quickAction', action);
+      // 如果有工作流 ID，更新 AI 配置
+      if (action.workflowId) {
+        const updatedConfig = {
+          ...props.aiConfig,
+          agentId: action.workflowId
+        };
+        emit('aiConfigUpdate', { config: updatedConfig, success: true });
+      }
+      // 发送快捷操作文本作为消息
+      if (action.text) {
+        handleSend({
+          message: {
+            content: action.text,
+            type: 'text'
+          },
+          content: action.text
+        });
+      }
+    };
+    // 监听 badgeCount 变化
+    watch(() => props.badgeCount, (newCount) => {
+      unreadCount.value = newCount;
+    });
+    // 调试：监听 isOpen 变化
+    watch(isOpen, (newVal, oldVal) => {
+      console.log('[AiChatWidget] isOpen 变化:', {
+        from: oldVal,
+        to: newVal,
+        stack: new Error().stack
+      });
+    });
+    // 监听窗口大小变化
+    const handleResize = () => {
+      if (isOpen.value && !isMaximized.value) {
+        // 确保对话框在视口内
+        const maxX = window.innerWidth - dialogSize.value.width;
+        const maxY = window.innerHeight - dialogSize.value.height;
+        if (dialogPosition.value.x > maxX) {
+          dialogPosition.value.x = Math.max(0, maxX);
+        }
+        if (dialogPosition.value.y > maxY) {
+          dialogPosition.value.y = Math.max(0, maxY);
+        }
+      }
+    };
+    onMounted(() => {
+      window.addEventListener('resize', handleResize);
+      console.log('[AiChatWidget] onMounted:', {
+        isOpen: isOpen.value,
+        isMobile: isMobile.value,
+        windowWidth: window.innerWidth
+      });
+      // 如果默认打开，计算初始位置
+      if (isOpen.value) {
+        console.log('[AiChatWidget] 默认打开，计算位置');
+        calculateInitialPosition();
+        // 移动端自动最大化
+        if (isMobile.value) {
+          console.log('[AiChatWidget] 移动端，自动最大化');
+          isMaximized.value = true;
+        }
+      }
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', handleResize);
+      document.removeEventListener('mousemove', onDrag);
+      document.removeEventListener('mouseup', stopDrag);
+      document.removeEventListener('mousemove', onResize);
+      document.removeEventListener('mouseup', stopResize);
+      document.removeEventListener('mousemove', onTriggerDrag);
+      document.removeEventListener('mouseup', stopTriggerDrag);
+    });
+    return {
+      dialogRef,
+      chatRef,
+      isOpen,
+      isMaximized,
+      isDragging,
+      isResizing,
+      isTriggerDragging,
+      unreadCount,
+      hasMessages,
+      dialogPosition,
+      dialogSize,
+      isMobile,
+      triggerStyle,
+      dialogStyle,
+      openDialog,
+      closeDialog,
+      minimizeDialog,
+      toggleMaximize,
+      startDrag,
+      startResize,
+      startTriggerDrag,
+      handleMaskClick,
+      handleSend,
+      handleAiResponseStart,
+      handleAiResponseComplete,
+      handleAiResponseError,
+      handleConversationUpdate,
+      handleAiConfigUpdate,
+      handleQuickAction,
+      // 暴露的公共方法
+      open: openDialog,
+      close: closeDialog,
+      minimize: minimizeDialog,
+      maximize: () => {
+        if (!isMaximized.value) toggleMaximize();
+      },
+      restore: () => {
+        if (isMaximized.value) toggleMaximize();
+      },
+      getIsOpen: () => isOpen.value,
+      getIsMaximized: () => isMaximized.value
+    };
+  }
+};
+</script>
+<style scoped>
+/* 浮动触发按钮 */
+.ai-chat-trigger {
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: #0067CC;
+  box-shadow: 0 4px 12px rgba(0, 103, 204, 0.4);
+  cursor: move;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  user-select: none;
+}
+.ai-chat-trigger.dragging {
+  transition: none;
+  cursor: grabbing;
+  opacity: 0.9;
+}
+.ai-chat-trigger:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(0, 103, 204, 0.6);
+}
+.ai-chat-trigger.pulse {
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% {
+    box-shadow: 0 4px 12px rgba(0, 103, 204, 0.4);
+  }
+  50% {
+    box-shadow: 0 4px 20px rgba(0, 103, 204, 0.8);
+  }
+}
+.trigger-icon {
+  font-size: 28px;
+  color: white;
+}
+.trigger-image {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+.trigger-badge {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background: #ff4757;
+  color: white;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+/* 对话框窗口 */
+.ai-chat-dialog {
+  position: fixed;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+.ai-chat-dialog.maximized {
+  border-radius: 0 !important;
+}
+.ai-chat-dialog.dragging {
+  transition: none;
+  cursor: move;
+}
+/* 对话框头部 */
+.ai-chat-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: #0067CC;
+  color: white;
+  cursor: move;
+  user-select: none;
+  min-height: 50px;
+}
+.header-left {
+  flex: 1;
+  min-width: 0;
+}
+.header-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.header-title {
+  font-size: 16px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.header-subtitle {
+  font-size: 12px;
+  opacity: 0.9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.header-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  font-size: 18px;
+}
+.header-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+.header-btn-close:hover {
+  background: rgba(255, 77, 87, 0.9);
+}
+/* 对话框内容 */
+.ai-chat-dialog-body {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+/* 快捷操作 */
+.quick-actions-container {
+  padding: 16px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
+}
+.quick-actions-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+.quick-actions-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.quick-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: white;
+  border: 1px solid #0067CC;
+  color: #0067CC;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+.quick-action-btn:hover {
+  background: #0067CC;
+  color: white;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 103, 204, 0.2);
+}
+.action-icon {
+  font-size: 16px;
+}
+/* 调整大小手柄 */
+.resize-handle {
+  position: absolute;
+  background: transparent;
+}
+.resize-handle-se {
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+}
+.resize-handle-se::after {
+  content: '';
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  width: 12px;
+  height: 12px;
+  border-right: 2px solid #ddd;
+  border-bottom: 2px solid #ddd;
+}
+/* 遮罩层 */
+.ai-chat-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+}
+/* 动画 */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+.slide-up-enter-active {
+  animation: slideUp 0.3s ease;
+}
+.slide-up-leave-active {
+  animation: slideDown 0.3s ease;
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideDown {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .ai-chat-dialog {
+    border-radius: 0 !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+  }
+  .resize-handle {
+    display: none;
+  }
+}
+</style>