first commit

2026-01-10 10:04:08 +08:00
commit 1cc427cbb0
291 changed files with 51036 additions and 0 deletions
@@ -0,0 +1,114 @@
+<!-- 卡片横幅组件 -->
+<template>
+  <div class="art-card-sm flex-c flex-col pb-6" :style="{ height: height }">
+    <div class="flex-c flex-col gap-4 text-center">
+      <div class="w-45">
+        <img :src="image" :alt="title" class="w-full h-full object-contain" />
+      </div>
+      <div class="box-border px-4">
+        <p class="mb-2 text-lg font-semibold text-g-800">{{ title }}</p>
+        <p class="m-0 text-sm text-g-600">{{ description }}</p>
+      </div>
+      <div class="flex-c gap-3">
+        <div
+          v-if="cancelButton?.show"
+          class="inline-block h-9 px-3 text-sm/9 c-p select-none rounded-md border border-g-300"
+          :style="{
+            backgroundColor: cancelButton?.color,
+            color: cancelButton?.textColor
+          }"
+          @click="handleCancel"
+        >
+          {{ cancelButton?.text }}
+        </div>
+        <div
+          v-if="button?.show"
+          class="inline-block h-9 px-3 text-sm/9 c-p select-none rounded-md"
+          :style="{ backgroundColor: button?.color, color: button?.textColor }"
+          @click="handleClick"
+        >
+          {{ button?.text }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // 导入默认图标
+  import defaultIcon from '@imgs/3d/icon1.webp'
+
+  defineOptions({ name: 'ArtCardBanner' })
+
+  // 定义卡片横幅组件的属性接口
+  interface CardBannerProps {
+    /** 高度 */
+    height?: string
+    /** 图片路径 */
+    image?: string
+    /** 标题文本 */
+    title: string
+    /** 描述文本 */
+    description: string
+    /** 主按钮配置 */
+    button?: {
+      /** 是否显示 */
+      show?: boolean
+      /** 按钮文本 */
+      text?: string
+      /** 背景颜色 */
+      color?: string
+      /** 文字颜色 */
+      textColor?: string
+    }
+    /** 取消按钮配置 */
+    cancelButton?: {
+      /** 是否显示 */
+      show?: boolean
+      /** 按钮文本 */
+      text?: string
+      /** 背景颜色 */
+      color?: string
+      /** 文字颜色 */
+      textColor?: string
+    }
+  }
+
+  // 定义组件属性默认值
+  withDefaults(defineProps<CardBannerProps>(), {
+    height: '24rem',
+    image: defaultIcon,
+    title: '',
+    description: '',
+    // 主按钮默认配置
+    button: () => ({
+      show: true,
+      text: '查看详情',
+      color: 'var(--theme-color)',
+      textColor: '#fff'
+    }),
+    // 取消按钮默认配置
+    cancelButton: () => ({
+      show: false,
+      text: '取消',
+      color: '#f5f5f5',
+      textColor: '#666'
+    })
+  })
+
+  // 定义组件事件
+  const emit = defineEmits<{
+    (e: 'click'): void // 主按钮点击事件
+    (e: 'cancel'): void // 取消按钮点击事件
+  }>()
+
+  // 主按钮点击处理函数
+  const handleClick = () => {
+    emit('click')
+  }
+
+  // 取消按钮点击处理函数
+  const handleCancel = () => {
+    emit('cancel')
+  }
+</script>