初始化

2025-08-21 10:43:04 +08:00
commit 29a79b1c6b
68 changed files with 13314 additions and 0 deletions
@@ -0,0 +1,110 @@
+<template>
+  <div v-if="error" class="error-message" :class="type">
+    <div class="error-icon">
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+      </svg>
+    </div>
+    <div class="error-content">
+      <div class="error-title">{{ title }}</div>
+      <div class="error-text">{{ error }}</div>
+    </div>
+    <button v-if="dismissible" @click="$emit('dismiss')" class="error-close">
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  error: string | null;
+  title?: string;
+  type?: 'error' | 'warning' | 'info';
+  dismissible?: boolean;
+}
+
+interface Emits {
+  (e: 'dismiss'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '错误',
+  type: 'error',
+  dismissible: false
+});
+
+defineEmits<Emits>();
+</script>
+
+<style scoped>
+.error-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.error-message.error {
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+}
+
+.error-message.warning {
+  background-color: #fffbeb;
+  border: 1px solid #fed7aa;
+  color: #d97706;
+}
+
+.error-message.info {
+  background-color: #eff6ff;
+  border: 1px solid #bfdbfe;
+  color: #2563eb;
+}
+
+.error-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.error-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.error-title {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.error-text {
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.error-close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s;
+}
+
+.error-close:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.error-close svg {
+  width: 1rem;
+  height: 1rem;
+}
+</style> 
@@ -0,0 +1,63 @@
+<template>
+  <div class="loading-spinner" :class="{ overlay: overlay }">
+    <div class="spinner">
+      <div class="spinner-ring"></div>
+      <div class="spinner-text" v-if="text">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  text?: string;
+  overlay?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped>
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+.loading-spinner.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  padding: 0;
+}
+
+.spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.spinner-ring {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.spinner-text {
+  color: #666;
+  font-size: 0.875rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>