2

2024-11-10 01:19:56 +08:00
parent a3782d2c1b
commit e88ed9e821
22 changed files with 2059 additions and 411 deletions
@@ -0,0 +1,94 @@
+<template>
+  <transition-group
+    name="alert-fade"
+    tag="div"
+    class="fixed top-4 right-4 z-50 w-full sm:max-w-sm md:max-w-md space-y-4 px-4 sm:px-0"
+  >
+    <div
+      v-for="alert in alerts"
+      :key="alert.id"
+      :class="[
+        'w-full rounded-lg shadow-xl overflow-hidden',
+        'bg-gradient-to-r',
+        gradientClasses[alert.type]
+      ]"
+    >
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="flex-shrink-0">
+            <component :is="alertIcons[alert.type]" class="h-6 w-6 text-white" />
+          </div>
+          <div class="ml-3 flex-1 pt-0.5">
+            <p class="text-sm font-medium text-white" v-html="alert.message"></p>
+          </div>
+          <div class="ml-4 flex-shrink-0 flex">
+            <button
+              @click="removeAlert(alert.id)"
+              class="inline-flex text-white hover:text-gray-200 focus:outline-none transition-colors duration-200"
+            >
+              <span class="sr-only">关闭</span>
+              <X class="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="h-1 bg-white bg-opacity-25">
+        <div
+          class="h-full bg-white transition-all duration-100 ease-out"
+          :style="{ width: `${alert.progress}%` }"
+        ></div>
+      </div>
+    </div>
+  </transition-group>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useAlertStore } from '@/stores/alertStore'
+import { CheckCircle, AlertTriangle, AlertCircle, Info, X } from 'lucide-vue-next'
+import { onMounted, onUnmounted } from 'vue'
+
+const alertStore = useAlertStore()
+const { alerts } = storeToRefs(alertStore)
+const { removeAlert, updateAlertProgress } = alertStore
+
+const gradientClasses = {
+  success: 'from-green-500 to-green-600',
+  error: 'from-red-500 to-red-600',
+  warning: 'from-yellow-500 to-yellow-600',
+  info: 'from-blue-500 to-blue-600'
+}
+
+const alertIcons = {
+  success: CheckCircle,
+  error: AlertTriangle,
+  warning: AlertCircle,
+  info: Info
+}
+
+let intervalId: number
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    alerts.value.forEach((alert) => {
+      updateAlertProgress(alert.id)
+    })
+  }, 100)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<style scoped>
+.alert-fade-enter-active,
+.alert-fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.alert-fade-enter-from,
+.alert-fade-leave-to {
+  opacity: 0;
+  transform: translateX(50px) scale(0.95);
+}
+</style>
@@ -0,0 +1,154 @@
+<template>
+  <div class="border-progress-container" ref="container">
+    <canvas ref="canvas" class="border-progress-canvas"></canvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps<{
+  progress: number;
+}>();
+
+const container = ref<HTMLDivElement | null>(null);
+const canvas = ref<HTMLCanvasElement | null>(null);
+let ctx: CanvasRenderingContext2D | null = null;
+
+const drawProgress = () => {
+  if (!ctx || !canvas.value || !container.value) return;
+
+  const width = container.value.clientWidth;
+  const height = container.value.clientHeight;
+  canvas.value.width = width;
+  canvas.value.height = height;
+
+  const borderWidth = 4; // 边框宽度
+  const cornerRadius = 8; // 拐角半径
+  ctx.lineWidth = borderWidth;
+
+  // 创建渐变
+  const gradient = ctx.createLinearGradient(0, 0, width, height);
+  gradient.addColorStop(0, '#4f46e5');  // 靛蓝色
+  gradient.addColorStop(0.5, '#7c3aed'); // 紫色
+  gradient.addColorStop(1, '#db2777');  // 粉色
+
+  // 绘制背景
+  ctx.strokeStyle = 'rgba(229, 231, 235, 0.2)'; // 淡灰色半透明
+  drawRoundedRect(ctx, borderWidth / 2, borderWidth / 2, width - borderWidth, height - borderWidth, cornerRadius);
+  ctx.stroke();
+
+  // 计算进度
+  const totalLength = (width + height) * 2 - 8 * cornerRadius + 2 * Math.PI * cornerRadius;
+  const progressLength = (totalLength * props.progress) / 100;
+
+  // 绘制进度
+  ctx.strokeStyle = gradient;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.beginPath();
+
+  let remainingLength = progressLength;
+  const halfBorder = borderWidth / 2;
+  const innerWidth = width - borderWidth;
+  const innerHeight = height - borderWidth;
+
+  // 上边
+  if (remainingLength > 0) {
+    const topLength = Math.min(innerWidth - 2 * cornerRadius, remainingLength);
+    ctx.moveTo(cornerRadius + halfBorder, halfBorder);
+    ctx.lineTo(topLength + cornerRadius + halfBorder, halfBorder);
+    remainingLength -= topLength;
+  }
+
+  // 右上角
+  if (remainingLength > 0) {
+    const angle = Math.min(Math.PI / 2, remainingLength / cornerRadius);
+    ctx.arc(innerWidth - cornerRadius + halfBorder, cornerRadius + halfBorder, cornerRadius, -Math.PI / 2, angle - Math.PI / 2, false);
+    remainingLength -= angle * cornerRadius;
+  }
+
+  // 右边
+  if (remainingLength > 0) {
+    const rightLength = Math.min(innerHeight - 2 * cornerRadius, remainingLength);
+    ctx.lineTo(innerWidth + halfBorder, rightLength + cornerRadius + halfBorder);
+    remainingLength -= rightLength;
+  }
+
+  // 右下角
+  if (remainingLength > 0) {
+    const angle = Math.min(Math.PI / 2, remainingLength / cornerRadius);
+    ctx.arc(innerWidth - cornerRadius + halfBorder, innerHeight - cornerRadius + halfBorder, cornerRadius, 0, angle, false);
+    remainingLength -= angle * cornerRadius;
+  }
+
+  // 下边
+  if (remainingLength > 0) {
+    const bottomLength = Math.min(innerWidth - 2 * cornerRadius, remainingLength);
+    ctx.lineTo(innerWidth - bottomLength - cornerRadius + halfBorder, innerHeight + halfBorder);
+    remainingLength -= bottomLength;
+  }
+
+  // 左下角
+  if (remainingLength > 0) {
+    const angle = Math.min(Math.PI / 2, remainingLength / cornerRadius);
+    ctx.arc(cornerRadius + halfBorder, innerHeight - cornerRadius + halfBorder, cornerRadius, Math.PI / 2, Math.PI / 2 + angle, false);
+    remainingLength -= angle * cornerRadius;
+  }
+
+  // 左边
+  if (remainingLength > 0) {
+    const leftLength = Math.min(innerHeight - 2 * cornerRadius, remainingLength);
+    ctx.lineTo(halfBorder, innerHeight - leftLength - cornerRadius + halfBorder);
+    remainingLength -= leftLength;
+  }
+
+  // 左上角
+  if (remainingLength > 0) {
+    const angle = Math.min(Math.PI / 2, remainingLength / cornerRadius);
+    ctx.arc(cornerRadius + halfBorder, cornerRadius + halfBorder, cornerRadius, Math.PI, Math.PI + angle, false);
+  }
+
+  ctx.stroke();
+};
+
+function drawRoundedRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.arcTo(x + width, y, x + width, y + radius, radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+  ctx.lineTo(x + radius, y + height);
+  ctx.arcTo(x, y + height, x, y + height - radius, radius);
+  ctx.lineTo(x, y + radius);
+  ctx.arcTo(x, y, x + radius, y, radius);
+  ctx.closePath();
+}
+
+onMounted(() => {
+  if (canvas.value) {
+    ctx = canvas.value.getContext('2d');
+    drawProgress();
+  }
+});
+
+watch(() => props.progress, drawProgress);
+</script>
+
+<style scoped>
+.border-progress-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.border-progress-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease;
+}
+</style>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { SunIcon, MoonIcon } from 'lucide-vue-next'
+
+const isDarkMode = inject('isDarkMode') as { value: boolean }
+const setColorMode = inject('setColorMode') as (isDark: boolean) => void
+
+const toggleColorMode = () => {
+  setColorMode(!isDarkMode.value)
+}
+</script>
+
+<template>
+  <button
+    @click="toggleColorMode"
+    class="fixed top-4 right-4 z-10 p-2 rounded-full transition-all duration-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transform hover:rotate-180"
+    :class="isDarkMode ? 'bg-gray-800 text-yellow-300' : 'bg-white text-gray-800'"
+  >
+    <SunIcon v-if="!isDarkMode" class="w-6 h-6" />
+    <MoonIcon v-else class="w-6 h-6" />
+  </button>
+</template>