feat 搭建架构骨架

src/components/ConfirmDialog.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+interface Props {
+  title?: string
+  message?: string
+  confirmText?: string
+  cancelText?: string
+  danger?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '提示',
+  message: '',
+  confirmText: '确认',
+  cancelText: '取消',
+  danger: false,
+})
+
+const visible = defineModel<boolean>('visible', { default: false })
+
+const emit = defineEmits<{ confirm: []; cancel: [] }>()
+
+function onConfirm(): void {
+  emit('confirm')
+  visible.value = false
+}
+
+function onCancel(): void {
+  emit('cancel')
+  visible.value = false
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="confirm-dialog" @click.self="onCancel">
+      <div class="confirm-dialog__panel">
+        <h3 class="confirm-dialog__title">
+          {{ title }}
+        </h3>
+        <div class="confirm-dialog__body">
+          <slot>{{ message }}</slot>
+        </div>
+        <div class="confirm-dialog__footer">
+          <button class="confirm-dialog__btn" @click="onCancel">
+            {{ cancelText }}
+          </button>
+          <button
+            class="confirm-dialog__btn confirm-dialog__btn--confirm"
+            :class="{ 'is-danger': danger }"
+            @click="onConfirm"
+          >
+            {{ confirmText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style lang="less" scoped>
+.confirm-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  .flex(row, center);
+  background: rgba(0, 0, 0, 0.45);
+
+  &__panel {
+    width: 400px;
+    max-width: calc(100vw - 32px);
+    padding: @spacing-lg;
+    border-radius: @radius-lg;
+    background: @white;
+    box-shadow: @shadow-lg;
+  }
+
+  &__title {
+    margin-bottom: @spacing-base;
+    font-size: @font-size-lg;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__body {
+    margin-bottom: @spacing-lg;
+    font-size: @font-size-base;
+    color: @text-color;
+    line-height: 1.6;
+  }
+
+  &__footer {
+    .flex(row, flex-end);
+    gap: @spacing-sm;
+  }
+
+  &__btn {
+    height: 34px;
+    padding: 0 @spacing-base;
+    border: 1px solid @border-color-dark;
+    border-radius: @radius-base;
+    background: @white;
+    color: @text-color;
+    font-size: @font-size-base;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: @primary-color;
+      color: @primary-color;
+    }
+
+    &--confirm {
+      border-color: @primary-color;
+      background: @primary-color;
+      color: @white;
+
+      &:hover {
+        background: @primary-hover;
+        color: @white;
+      }
+
+      &.is-danger {
+        border-color: @danger-color;
+        background: @danger-color;
+
+        &:hover {
+          background: fade(@danger-color, 85%);
+        }
+      }
+    }
+  }
+}
+</style>