整合前端仓库并保留提交历史

frontend/web/app/components/advertisement/modes/float.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="ad-float-card" @click="handleClick">
+    <div class="ad-image-wrapper">
+      <img :src="ad.image" :alt="ad.title" class="ad-image" />
+    </div>
+    <div class="ad-content">
+      <h3 class="ad-title">{{ ad.title }}</h3>
+      <p v-if="ad.description" class="ad-description">{{ ad.description }}</p>
+      <span class="ad-badge">广告</span>
+    </div>
+    <button
+      v-if="closable"
+      class="ad-close-btn"
+      @click.stop="handleClose"
+      title="关闭"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AdvertisementItem } from '~/api/site/types'
+
+interface Props {
+  ad: AdvertisementItem
+  closable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  closable: false
+})
+
+const emit = defineEmits<{
+  click: [ad: AdvertisementItem]
+  close: [ad: AdvertisementItem]
+}>()
+
+const handleClick = () => {
+  emit('click', props.ad)
+}
+
+const handleClose = () => {
+  emit('close', props.ad)
+}
+</script>
+
+<style scoped lang="scss">
+.ad-float-card {
+  position: relative;
+  width: 100%;
+  background: #fff;
+  border-radius: 3px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+
+  .ad-image-wrapper {
+    width: 100%;
+    border-radius: 1px 1px 0 0;
+  }
+
+  .ad-image {
+    width: 100%;
+    height: 120px;
+    object-fit: contain;
+    display: block;
+  }
+
+  .ad-content {
+    padding: 12px;
+  }
+
+  .ad-title {
+    color: #1a1a1a;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+    margin: 0 0 8px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .ad-description {
+    color: #666;
+    font-size: 12px;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin: 0 0 10px;
+  }
+
+  .ad-badge {
+    display: inline-block;
+    padding: 3px 6px;
+    background: #f5f5f5;
+    color: #999;
+    font-size: 11px;
+    font-weight: 500;
+    border-radius: 3px;
+    margin-top: 8px;
+    line-height: 1;
+  }
+
+  .ad-close-btn {
+    position: absolute;
+    bottom: 6px;
+    right: 6px;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border-radius: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(0, 0, 0, 0.6);
+    opacity: 1;
+    transition: all 0.2s ease;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    &:hover {
+      opacity: 1;
+      color: rgba(0, 0, 0, 1);
+    }
+  }
+}
+</style>

frontend/web/app/components/advertisement/modes/index.ts

@@ -0,0 +1,26 @@
+import type { Component } from 'vue'
+
+// 内置模式
+import SimpleMode from './simple.vue'
+import FloatMode from './float.vue'
+
+// 动态加载自定义模式
+const customModes: Record<string, Component> = {
+  simple: SimpleMode,
+  float: FloatMode
+}
+
+// 注册自定义模式
+export const registerMode = (name: string, component: Component) => {
+  customModes[name] = component
+}
+
+// 获取模式组件
+export const getModeComponent = (modeName: string): Component | undefined => {
+  return customModes[modeName]
+}
+
+// 获取所有可用模式
+export const getAvailableModes = (): string[] => {
+  return Object.keys(customModes)
+}

frontend/web/app/components/advertisement/modes/simple.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="ad-simple-layout" @click="handleClick">
+    <img :src="ad.image" :alt="ad.title" class="ad-simple-image" />
+    <!-- <span class="ad-badge">广告</span> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AdvertisementItem } from '~/api/site/types'
+
+interface Props {
+  ad: AdvertisementItem
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  click: [ad: AdvertisementItem]
+}>()
+
+const handleClick = () => {
+  emit('click', props.ad)
+}
+</script>
+
+<style scoped lang="scss">
+.ad-simple-layout {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  margin: 4px 0;
+  overflow: hidden;
+  background: transparent;
+  border-radius: 1px;
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    background-color: rgb(218, 225, 225);
+  }
+
+  .ad-simple-image {
+    width: 100%;
+    height: 50px;
+    object-fit: contain;
+    display: block;
+  }
+
+  .ad-badge {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    padding: 2px 6px;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 500;
+    border-radius: 2px;
+    line-height: 1;
+    z-index: 1;
+  }
+}
+</style>