v0.3.8

2026-08-17 19:47:10 +08:00 · 2026-06-30 10:38:52 +08:00
commit c083be5ec2
312 changed files with 146628 additions and 0 deletions
@@ -0,0 +1,100 @@
+<script setup>
+import Button from "@/components/ui/Button.vue";
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  title: { type: String, default: "提示" },
+  content: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  modelValue: { type: String, default: "" },
+});
+
+const emit = defineEmits(["update:visible", "update:modelValue", "confirm", "cancel"]);
+
+function handleConfirm() {
+  emit("confirm");
+  emit("update:visible", false);
+}
+
+function handleCancel() {
+  emit("cancel");
+  emit("update:visible", false);
+}
+
+function onMaskClick() {
+  handleCancel();
+}
+
+function onInput(event) {
+  emit("update:modelValue", event?.target?.value ?? "");
+}
+
+function onEnter(event) {
+  event.preventDefault();
+  handleConfirm();
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal-mask">
+      <div
+        v-show="visible"
+        class="modal-mask-layer fixed inset-0 z-999 flex items-center justify-center bg-black/50 p-4"
+        @click.self="onMaskClick"
+      >
+        <Transition name="modal-content">
+          <div
+            v-show="visible"
+            class="relative z-10 w-full max-w-[380px] overflow-hidden rounded-[8px] p-px shadow-[0_25px_50px_-12px_rgba(0,0,0,0.6)]"
+            style="background: linear-gradient(to bottom, #656565 0%, #3A3A3A 10px, #3A3A3A 100%);"
+            @click.stop
+          >
+            <div class="rounded-[7px] bg-[#292929] p-5">
+              <h3 class="mb-3 text-base font-medium text-white">
+                {{ title }}
+              </h3>
+              <p class="mb-3 text-sm leading-relaxed text-[#a3a3a3]">
+                {{ content }}
+              </p>
+              <input
+                :value="modelValue"
+                :placeholder="placeholder"
+                type="text"
+                class="mb-5 h-9 w-full rounded-[6px] border border-[#3f3f3f] bg-[#232323] px-3 text-sm text-[#e5e5e5] outline-none focus:border-[#10AD5D]"
+                @input="onInput"
+                @keydown.enter="onEnter"
+              />
+              <div class="flex justify-end gap-2">
+                <Button variant="default" @click="handleCancel">取消</Button>
+                <Button variant="primary" @click="handleConfirm">确定</Button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-mask-enter-active,
+.modal-mask-leave-active {
+  transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
+}
+.modal-mask-enter-from,
+.modal-mask-leave-to {
+  opacity: 0;
+  backdrop-filter: blur(0);
+}
+
+.modal-content-enter-active,
+.modal-content-leave-active {
+  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.modal-content-enter-from,
+.modal-content-leave-to {
+  opacity: 0;
+  transform: scale(0.9) translateY(-10px);
+}
+</style>