little-dizzy 2.4.0 → 2.5.0

package/src/components/Loading.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="ld-loading" :class="[`ld-loading--${type}`, { 'ld-loading--fullscreen': fullscreen }]">
+    <!-- Spinner -->
+    <template v-if="type === 'spinner'">
+      <div class="spinner" :style="spinnerStyle">
+        <div v-for="i in 12" :key="i" class="spinner-blade" />
+      </div>
+    </template>
+
+    <!-- Dots -->
+    <template v-else-if="type === 'dots'">
+      <div class="dots">
+        <span v-for="i in 3" :key="i" class="dot" :style="{ background: color }" />
+      </div>
+    </template>
+
+    <!-- Ring -->
+    <template v-else-if="type === 'ring'">
+      <div class="ring" :style="ringStyle">
+        <div class="ring-inner" />
+      </div>
+    </template>
+
+    <!-- Pulse -->
+    <template v-else-if="type === 'pulse'">
+      <div class="pulse" :style="{ background: color, width: size, height: size }" />
+    </template>
+
+    <!-- Bars -->
+    <template v-else-if="type === 'bars'">
+      <div class="bars">
+        <span v-for="i in 5" :key="i" class="bar" :style="{ background: color }" />
+      </div>
+    </template>
+
+    <!-- 文字 -->
+    <div v-if="text" class="loading-text">{{ text }}</div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'Loading'
+})
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'spinner',
+    validator: (val) => ['spinner', 'dots', 'ring', 'pulse', 'bars'].includes(val)
+  },
+  size: {
+    type: String,
+    default: '40px'
+  },
+  color: {
+    type: String,
+    default: 'var(--ld-color-primary, #6366f1)'
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+  fullscreen: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const spinnerStyle = computed(() => ({
+  width: props.size,
+  height: props.size,
+  '--spinner-color': props.color
+}))
+
+const ringStyle = computed(() => ({
+  width: props.size,
+  height: props.size,
+  '--ring-color': props.color
+}))
+</script>
+
+<style scoped>
+.ld-loading {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.ld-loading--fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ld-loading-fullscreen-bg, rgba(255, 255, 255, 0.9));
+  z-index: 9999;
+}
+
+.loading-text {
+  color: var(--ld-color-text-secondary, #666);
+  font-size: 14px;
+}
+
+/* Spinner */
+.spinner {
+  position: relative;
+}
+
+.spinner-blade {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 8%;
+  height: 24%;
+  background: var(--spinner-color, #6366f1);
+  border-radius: 4px;
+  transform-origin: center bottom;
+  animation: spinner-fade 1s infinite linear;
+}
+
+.spinner-blade:nth-child(1) { transform: translateX(-50%) rotate(0deg) translateY(-120%); animation-delay: -0.083s; }
+.spinner-blade:nth-child(2) { transform: translateX(-50%) rotate(30deg) translateY(-120%); animation-delay: -0.166s; }
+.spinner-blade:nth-child(3) { transform: translateX(-50%) rotate(60deg) translateY(-120%); animation-delay: -0.25s; }
+.spinner-blade:nth-child(4) { transform: translateX(-50%) rotate(90deg) translateY(-120%); animation-delay: -0.333s; }
+.spinner-blade:nth-child(5) { transform: translateX(-50%) rotate(120deg) translateY(-120%); animation-delay: -0.416s; }
+.spinner-blade:nth-child(6) { transform: translateX(-50%) rotate(150deg) translateY(-120%); animation-delay: -0.5s; }
+.spinner-blade:nth-child(7) { transform: translateX(-50%) rotate(180deg) translateY(-120%); animation-delay: -0.583s; }
+.spinner-blade:nth-child(8) { transform: translateX(-50%) rotate(210deg) translateY(-120%); animation-delay: -0.666s; }
+.spinner-blade:nth-child(9) { transform: translateX(-50%) rotate(240deg) translateY(-120%); animation-delay: -0.75s; }
+.spinner-blade:nth-child(10) { transform: translateX(-50%) rotate(270deg) translateY(-120%); animation-delay: -0.833s; }
+.spinner-blade:nth-child(11) { transform: translateX(-50%) rotate(300deg) translateY(-120%); animation-delay: -0.916s; }
+.spinner-blade:nth-child(12) { transform: translateX(-50%) rotate(330deg) translateY(-120%); animation-delay: -1s; }
+
+@keyframes spinner-fade {
+  0%, 100% { opacity: 0.2; }
+  50% { opacity: 1; }
+}
+
+/* Dots */
+.dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  animation: dots-bounce 1.4s ease-in-out infinite both;
+}
+
+.dot:nth-child(1) { animation-delay: -0.32s; }
+.dot:nth-child(2) { animation-delay: -0.16s; }
+.dot:nth-child(3) { animation-delay: 0s; }
+
+@keyframes dots-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Ring */
+.ring {
+  position: relative;
+  border: 3px solid var(--ld-loading-ring-border, rgba(99, 102, 241, 0.2));
+  border-radius: 50%;
+}
+
+.ring-inner {
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  border: 3px solid transparent;
+  border-top-color: var(--ring-color, #6366f1);
+  border-radius: 50%;
+  animation: ring-spin 1s linear infinite;
+}
+
+@keyframes ring-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Pulse */
+.pulse {
+  border-radius: 50%;
+  animation: pulse-scale 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-scale {
+  0%, 100% { transform: scale(0.8); opacity: 0.5; }
+  50% { transform: scale(1); opacity: 1; }
+}
+
+/* Bars */
+.bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 30px;
+}
+
+.bar {
+  width: 6px;
+  animation: bars-grow 1.2s ease-in-out infinite;
+}
+
+.bar:nth-child(1) { animation-delay: 0s; }
+.bar:nth-child(2) { animation-delay: 0.1s; }
+.bar:nth-child(3) { animation-delay: 0.2s; }
+.bar:nth-child(4) { animation-delay: 0.3s; }
+.bar:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes bars-grow {
+  0%, 40%, 100% { height: 40%; }
+  20% { height: 100%; }
+}
+</style>
+

package/src/components/Table.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="ld-table-wrapper" :class="{ 'ld-table--bordered': bordered, 'ld-table--striped': striped }">
+    <!-- Loading 遮罩层 -->
+    <div v-if="isLoading" class="ld-table-loading">
+      <div class="loading-spinner">
+        <svg class="circular" viewBox="0 0 50 50">
+          <circle class="path" cx="25" cy="25" r="20" fill="none" />
+        </svg>
+      </div>
+      <span v-if="loadingText" class="loading-text">{{ loadingText }}</span>
+    </div>
+
+    <table class="ld-table">
+      <thead>
+        <tr>
+          <th v-for="col in columns" :key="col.key" :style="{ width: col.width, textAlign: col.align || 'left' }"
+            @click="col.sortable && handleSort(col.key)">
+            <div class="th-content">
+              <span>{{ col.title }}</span>
+              <span v-if="col.sortable" class="sort-icon" :class="getSortClass(col.key)">
+                <svg viewBox="0 0 24 24" width="14" height="14">
+                  <path fill="currentColor" d="M7 10l5-5 5 5H7zm0 4l5 5 5-5H7z" />
+                </svg>
+              </span>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!sortedData.length && !isLoading">
+          <td :colspan="columns.length" class="empty-cell">
+            <slot name="empty">
+              <div class="empty-content">
+                <svg viewBox="0 0 64 41" width="64" height="41">
+                  <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+                    <ellipse fill="var(--ld-color-bg-secondary, #f5f5f5)" cx="32" cy="33" rx="32" ry="7" />
+                    <g fill-rule="nonzero" stroke="var(--ld-color-border, #d9d9d9)">
+                      <path
+                        d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
+                      <path
+                        d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                        fill="var(--ld-color-bg, #fafafa)" />
+                    </g>
+                  </g>
+                </svg>
+                <span>暂无数据</span>
+              </div>
+            </slot>
+          </td>
+        </tr>
+        <tr v-for="(row, rowIndex) in sortedData" :key="rowIndex" @click="$emit('row-click', row, rowIndex)">
+          <td v-for="col in columns" :key="col.key" :style="{ textAlign: col.align || 'left' }">
+            <slot :name="col.key" :row="row" :index="rowIndex" :value="row[col.key]">
+              {{ row[col.key] }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+
+defineOptions({
+  name: 'ldTable'
+})
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  striped: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  loadingText: {
+    type: String,
+    default: ''
+  },
+  // API 相关
+  api: {
+    type: Function,
+    default: null
+  },
+  autoLoad: {
+    type: Boolean,
+    default: true
+  },
+  loadParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['row-click', 'load-success', 'load-error'])
+
+// 内部状态
+const internalLoading = ref(false)
+const apiData = ref([])
+
+// 是否使用 API 模式
+const isApiMode = computed(() => typeof props.api === 'function')
+
+// 实际的 loading 状态
+const isLoading = computed(() => props.loading || internalLoading.value)
+
+// 实际使用的数据
+const tableData = computed(() => isApiMode.value ? apiData.value : props.data)
+
+// 加载数据
+const load = async (params = {}) => {
+  if (!isApiMode.value) return
+
+  internalLoading.value = true
+  try {
+    const mergedParams = { ...props.loadParams, ...params }
+    const result = await props.api(mergedParams)
+    apiData.value = Array.isArray(result) ? result : (result?.data || result?.list || [])
+    emit('load-success', apiData.value)
+    return apiData.value
+  } catch (error) {
+    console.error('[ld-table] Load error:', error)
+    emit('load-error', error)
+    throw error
+  } finally {
+    internalLoading.value = false
+  }
+}
+
+// 重新加载
+const reload = (params = {}) => {
+  return load(params)
+}
+
+// 清空数据
+const clear = () => {
+  apiData.value = []
+}
+
+// 监听 loadParams 变化
+watch(() => props.loadParams, (newParams) => {
+  if (isApiMode.value && props.autoLoad) {
+    load()
+  }
+}, { deep: true })
+
+// 自动加载
+onMounted(() => {
+  if (isApiMode.value && props.autoLoad) {
+    load()
+  }
+})
+
+const sortKey = ref('')
+const sortOrder = ref('') // 'asc' | 'desc' | ''
+
+const handleSort = (key) => {
+  if (sortKey.value === key) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : sortOrder.value === 'desc' ? '' : 'asc'
+    if (!sortOrder.value) sortKey.value = ''
+  } else {
+    sortKey.value = key
+    sortOrder.value = 'asc'
+  }
+}
+
+const getSortClass = (key) => {
+  if (sortKey.value !== key) return ''
+  return sortOrder.value === 'asc' ? 'sort-asc' : sortOrder.value === 'desc' ? 'sort-desc' : ''
+}
+
+const sortedData = computed(() => {
+  const data = tableData.value
+  if (!sortKey.value || !sortOrder.value) return data
+
+  return [...data].sort((a, b) => {
+    const aVal = a[sortKey.value]
+    const bVal = b[sortKey.value]
+
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
+    }
+
+    const aStr = String(aVal || '')
+    const bStr = String(bVal || '')
+    return sortOrder.value === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr)
+  })
+})
+
+// 暴露方法
+defineExpose({
+  load,
+  reload,
+  clear,
+  getData: () => apiData.value
+})
+</script>
+
+<style scoped>
+.ld-table-wrapper {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  border-radius: 8px;
+  background: var(--ld-color-bg, #fff);
+}
+
+/* Loading 遮罩层 - Element Plus 风格 */
+.ld-table-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: var(--ld-table-loading-bg, rgba(255, 255, 255, 0.9));
+  transition: opacity 0.3s;
+}
+
+.loading-spinner {
+  width: 42px;
+  height: 42px;
+}
+
+.loading-spinner .circular {
+  width: 100%;
+  height: 100%;
+  animation: loading-rotate 2s linear infinite;
+}
+
+.loading-spinner .path {
+  stroke: var(--ld-color-primary, #409eff);
+  stroke-width: 4;
+  stroke-linecap: round;
+  animation: loading-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
+
+.loading-text {
+  font-size: 14px;
+  color: var(--ld-color-primary, #409eff);
+}
+
+.ld-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.ld-table th,
+.ld-table td {
+  padding: 12px 16px;
+  text-align: left;
+}
+
+.ld-table th {
+  background: var(--ld-color-bg-secondary, #f8f9fa);
+  color: var(--ld-color-text, #333);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.ld-table td {
+  color: var(--ld-color-text-secondary, #666);
+  border-bottom: 1px solid var(--ld-color-border, #eee);
+}
+
+.ld-table tbody tr:hover {
+  background: var(--ld-color-bg-hover, #f5f5f5);
+}
+
+.ld-table--bordered .ld-table th,
+.ld-table--bordered .ld-table td {
+  border: 1px solid var(--ld-color-border, #eee);
+}
+
+.ld-table--striped tbody tr:nth-child(even) {
+  background: var(--ld-color-bg-secondary, #f8f9fa);
+}
+
+.th-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sort-icon {
+  opacity: 0.3;
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+
+.sort-icon:hover {
+  opacity: 0.6;
+}
+
+.sort-icon.sort-asc,
+.sort-icon.sort-desc {
+  opacity: 1;
+  color: var(--ld-color-primary, #6366f1);
+}
+
+.sort-icon.sort-desc svg {
+  transform: rotate(180deg);
+}
+
+.empty-cell {
+  text-align: center;
+  padding: 40px 16px;
+}
+
+.empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: var(--ld-color-text-muted, #999);
+}
+</style>