@huyooo/ai-chat-frontend-vue 0.1.4 → 0.1.7

package/src/components/common/ConfirmDialog.vue

@@ -0,0 +1,208 @@
+<template>
+  <Teleport to="body">
+    <Transition name="dialog">
+      <div v-if="visible" class="confirm-dialog-overlay" @click.self="handleCancel">
+        <div class="confirm-dialog">
+          <div class="confirm-dialog-header">
+            <Icon v-if="type === 'warning'" icon="lucide:alert-triangle" class="icon warning" width="18" />
+            <Icon v-else-if="type === 'danger'" icon="lucide:alert-circle" class="icon danger" width="18" />
+            <Icon v-else icon="lucide:info" class="icon info" width="18" />
+            <span class="title">{{ title }}</span>
+          </div>
+          <div class="confirm-dialog-content">
+            {{ message }}
+          </div>
+          <div class="confirm-dialog-footer">
+            <button class="btn btn-cancel" @click="handleCancel">
+              {{ cancelText }}
+            </button>
+            <button :class="['btn', `btn-${type}`]" @click="handleConfirm">
+              {{ confirmText }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+interface Props {
+  /** 是否显示 */
+  visible: boolean;
+  /** 标题 */
+  title?: string;
+  /** 消息内容 */
+  message: string;
+  /** 类型：info | warning | danger */
+  type?: 'info' | 'warning' | 'danger';
+  /** 确认按钮文字 */
+  confirmText?: string;
+  /** 取消按钮文字 */
+  cancelText?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '确认',
+  type: 'warning',
+  confirmText: '确定',
+  cancelText: '取消',
+});
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean];
+  confirm: [];
+  cancel: [];
+}>();
+
+function handleConfirm() {
+  emit('update:visible', false);
+  emit('confirm');
+}
+
+function handleCancel() {
+  emit('update:visible', false);
+  emit('cancel');
+}
+</script>
+
+<style scoped>
+.confirm-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.confirm-dialog {
+  width: 100%;
+  max-width: 400px;
+  margin: 16px;
+  background: var(--chat-dropdown-bg, #252526);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+}
+
+.confirm-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.confirm-dialog-header .icon {
+  flex-shrink: 0;
+}
+
+.confirm-dialog-header .icon.warning {
+  color: #f59e0b;
+}
+
+.confirm-dialog-header .icon.danger {
+  color: #ef4444;
+}
+
+.confirm-dialog-header .icon.info {
+  color: #3b82f6;
+}
+
+.confirm-dialog-header .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--chat-text, #fff);
+}
+
+.confirm-dialog-content {
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--chat-text-muted, #999);
+}
+
+.confirm-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--chat-border, #333);
+}
+
+.btn {
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-cancel {
+  background: transparent;
+  color: var(--chat-text-muted, #999);
+  border: 1px solid var(--chat-border, #444);
+}
+
+.btn-cancel:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--chat-text, #fff);
+}
+
+.btn-info {
+  background: #3b82f6;
+  color: #fff;
+}
+
+.btn-info:hover {
+  background: #2563eb;
+}
+
+.btn-warning {
+  background: #f59e0b;
+  color: #000;
+}
+
+.btn-warning:hover {
+  background: #d97706;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: #fff;
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+}
+
+/* 过渡动画 */
+.dialog-enter-active,
+.dialog-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.dialog-enter-active .confirm-dialog,
+.dialog-leave-active .confirm-dialog {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.dialog-enter-from,
+.dialog-leave-to {
+  opacity: 0;
+}
+
+.dialog-enter-from .confirm-dialog,
+.dialog-leave-to .confirm-dialog {
+  transform: scale(0.95);
+  opacity: 0;
+}
+</style>

package/src/components/common/CopyButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <button 
+    class="copy-btn" 
+    :class="{ copied }" 
+    :title="copied ? '已复制' : title"
+    @click.stop="handleCopy"
+  >
+    <Icon :icon="copied ? 'lucide:check' : 'lucide:copy'" :width="size" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Icon } from '@iconify/vue'
+
+const props = withDefaults(defineProps<{
+  /** 要复制的文本 */
+  text: string
+  /** 按钮标题 */
+  title?: string
+  /** 图标大小 */
+  size?: number
+}>(), {
+  title: '复制',
+  size: 14,
+})
+
+const emit = defineEmits<{
+  copy: [text: string]
+}>()
+
+const copied = ref(false)
+
+async function handleCopy() {
+  try {
+    await navigator.clipboard.writeText(props.text)
+    copied.value = true
+    emit('copy', props.text)
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('复制失败:', err)
+  }
+}
+</script>
+
+<style scoped>
+.copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: transparent;
+  border: none;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.copy-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--chat-text, #fff);
+}
+
+.copy-btn.copied {
+  color: var(--chat-success, #22c55e);
+}
+</style>
+