@lucifer.chao.du/home-schema-components 0.1.0

package/src/web-preview/ActivitiesPreview.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { ActivitiesMode, ActivityItem } from '../schema/index.js';
+
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    mode?: Partial<ActivitiesMode>;
+    options?: ActivityItem[];
+  }>(),
+  {
+    mode: () => ({
+      autoplay: true,
+      duration: 500,
+      interval: 5000,
+    }),
+    options: () => [],
+  },
+);
+
+const slides = computed<ActivityItem[]>(() => {
+  if (props.options.length > 0) {
+    return props.options;
+  }
+  return [{ image: '', path: undefined as never }];
+});
+
+const activeIndex = ref(0);
+let activitiesTimer: null | ReturnType<typeof setInterval> = null;
+
+const trackStyle = computed(() => ({
+  '--activity-duration': `${props.mode.duration || 500}ms`,
+  transform: `translateX(-${activeIndex.value * 100}%)`,
+  transitionDuration: `${props.mode.duration || 500}ms`,
+}));
+
+function clearActivitiesTimer() {
+  if (!activitiesTimer) {
+    return;
+  }
+  clearInterval(activitiesTimer);
+  activitiesTimer = null;
+}
+
+function startActivitiesTimer() {
+  clearActivitiesTimer();
+  if (!props.mode.autoplay || slides.value.length <= 1) {
+    return;
+  }
+
+  activitiesTimer = setInterval(() => {
+    activeIndex.value = (activeIndex.value + 1) % slides.value.length;
+  }, props.mode.interval || 5000);
+}
+
+watch(
+  () => [props.mode.autoplay, props.mode.interval, slides.value.length],
+  () => {
+    if (activeIndex.value >= slides.value.length) {
+      activeIndex.value = 0;
+    }
+    startActivitiesTimer();
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  clearActivitiesTimer();
+});
+</script>
+
+<template>
+  <div class="grid gap-2">
+    <div class="relative overflow-hidden rounded-[20px]">
+      <div
+        :style="trackStyle"
+        :class="{
+          'home-schema-preview__activities-track--autoplay': props.mode.autoplay,
+        }"
+        class="home-schema-preview__activities-track flex"
+      >
+        <div
+          v-for="(item, index) in slides"
+          :key="`activities-${index}`"
+          class="home-schema-preview__activity-item flex h-24 w-full shrink-0 items-end bg-gradient-to-br from-primary to-primary/65 px-4 py-3 text-primary-foreground"
+        >
+          <div class="grid gap-1">
+            <div class="text-sm font-semibold leading-5">横幅 {{ index + 1 }}</div>
+            <div
+              class="text-[11px] leading-4 text-primary-foreground/75 whitespace-normal break-all"
+            >
+              {{ item.image || '未配置图片地址' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="slides.length > 1" class="flex justify-center gap-1 pt-1">
+      <span
+        v-for="(_, index) in slides"
+        :key="`activities-dot-${index}`"
+        :class="{
+          'bg-primary/80': index === activeIndex,
+          'bg-border': index !== activeIndex,
+        }"
+        class="h-1.5 w-1.5 rounded-full"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-schema-preview__activities-track {
+  transition: transform var(--activity-duration, 500ms) ease;
+}
+
+.home-schema-preview__activity-item {
+  border-radius: 20px;
+}
+</style>

package/src/web-preview/CommunitiesPreview.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { CommunitiesMode, CommunityItem } from '../schema/index.js';
+
+const props = withDefaults(
+  defineProps<{
+    image?: string;
+    mode?: Partial<CommunitiesMode>;
+    options?: CommunityItem[];
+  }>(),
+  {
+    image: '',
+    mode: () => ({
+      autoplay: true,
+      displayMultipleItems: 2,
+      duration: 500,
+      interval: 5000,
+      showIcon: true,
+    }),
+    options: () => [],
+  },
+);
+</script>
+
+<template>
+  <div class="grid gap-2">
+    <div
+      v-for="(item, index) in props.options.slice(0, props.mode.displayMultipleItems || 2)"
+      :key="`communities-${index}`"
+      class="home-schema-preview__community-item text-text-secondary rounded-2xl border border-border bg-muted/30 px-3 py-3 text-xs leading-5"
+      :style="{
+        '--community-duration': `${props.mode.duration || 500}ms`,
+        '--community-interval': `${props.mode.interval || 5000}ms`,
+      }"
+      :class="{
+        'home-schema-preview__community-item--autoplay': props.mode.autoplay,
+      }"
+    >
+      <span
+        v-if="props.mode.showIcon"
+        class="home-schema-preview__community-icon mr-1.5 inline-flex h-4 w-4 items-center justify-center rounded-full text-[10px]"
+      >
+        讯
+      </span>
+      {{ item.title || `播报内容 ${index + 1}` }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-schema-preview__community-item {
+  transition: transform var(--community-duration, 500ms) ease;
+}
+
+.home-schema-preview__community-item--autoplay {
+  animation: home-schema-preview-community-loop var(--community-interval, 5000ms)
+    ease-in-out infinite;
+}
+
+.home-schema-preview__community-icon {
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 14%);
+}
+
+@keyframes home-schema-preview-community-loop {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(2px);
+  }
+}
+</style>

package/src/web-preview/HomeSchemaPreview.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { HomeSchemaComponent } from '../schema/index.js';
+
+import { computed } from 'vue';
+
+import {
+  normalizeComponentProps,
+} from '../schema/index.js';
+import ActivitiesPreview from './ActivitiesPreview.vue';
+import CommunitiesPreview from './CommunitiesPreview.vue';
+import ServicesPreview from './ServicesPreview.vue';
+import TagsPreview from './TagsPreview.vue';
+import ToolsPreview from './ToolsPreview.vue';
+
+type ComponentValue = {
+  componentProps?: Record<string, any>;
+};
+
+const props = withDefaults(
+  defineProps<{
+    componentType: HomeSchemaComponent | string;
+    disabled?: boolean;
+    locationText?: string;
+    pageValue?: Record<string, any>;
+    selected?: boolean;
+    showServiceHead?: boolean;
+    value?: ComponentValue;
+  }>(),
+  {
+    disabled: false,
+    locationText: '',
+    pageValue: () => ({}),
+    selected: false,
+    showServiceHead: false,
+    value: () => ({}),
+  },
+);
+
+const normalizedTools = computed(() =>
+  props.componentType === 'tools'
+    ? normalizeComponentProps('tools', props.value?.componentProps)
+    : null,
+);
+
+const normalizedCommunities = computed(() =>
+  props.componentType === 'communities'
+    ? normalizeComponentProps('communities', props.value?.componentProps)
+    : null,
+);
+
+const normalizedTags = computed(() =>
+  props.componentType === 'tags'
+    ? normalizeComponentProps('tags', props.value?.componentProps)
+    : null,
+);
+
+const normalizedActivities = computed(() =>
+  props.componentType === 'activities'
+    ? normalizeComponentProps('activities', props.value?.componentProps)
+    : null,
+);
+
+const normalizedServices = computed(() =>
+  props.componentType === 'services'
+    ? normalizeComponentProps('services', props.value?.componentProps)
+    : null,
+);
+</script>
+
+<template>
+  <div class="grid gap-3">
+    <ToolsPreview
+      v-if="props.componentType === 'tools' && normalizedTools"
+      :mode="normalizedTools.mode"
+      :options="normalizedTools.options"
+    />
+    <CommunitiesPreview
+      v-else-if="props.componentType === 'communities' && normalizedCommunities"
+      :image="normalizedCommunities.image"
+      :mode="normalizedCommunities.mode"
+      :options="normalizedCommunities.options"
+    />
+    <TagsPreview
+      v-else-if="props.componentType === 'tags' && normalizedTags"
+      :mode="normalizedTags.mode"
+      :options="normalizedTags.options"
+    />
+    <ActivitiesPreview
+      v-else-if="props.componentType === 'activities' && normalizedActivities"
+      :mode="normalizedActivities.mode"
+      :options="normalizedActivities.options"
+    />
+    <ServicesPreview
+      v-else-if="props.componentType === 'services' && normalizedServices"
+      :location-text="props.locationText"
+      :options="normalizedServices.options"
+      :show-head="props.showServiceHead"
+    />
+    <div v-else class="text-text-secondary text-xs leading-5">
+      当前组件暂无预览模板。
+    </div>
+  </div>
+</template>

package/src/web-preview/ServicesPreview.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { ServiceItem } from '../schema/index.js';
+
+const props = withDefaults(
+  defineProps<{
+    locationText?: string;
+    options?: ServiceItem[];
+    showHead?: boolean;
+  }>(),
+  {
+    locationText: '',
+    options: () => [],
+    showHead: false,
+  },
+);
+
+function getDiscountText(discount: Record<string, any>) {
+  return (
+    String(discount.project || '').trim() ||
+    String(discount.type || '').trim() ||
+    '优惠信息'
+  );
+}
+</script>
+
+<template>
+  <div class="grid gap-2">
+    <div
+      v-if="props.showHead"
+      class="flex items-end justify-between gap-3 border-b border-border pb-2"
+    >
+      <div class="flex items-center gap-2">
+        <span class="h-5 w-1 rounded-full bg-primary"></span>
+        <span class="text-text text-base font-semibold">
+          {{ props.locationText }}生活圈
+        </span>
+      </div>
+      <span class="text-text-secondary text-xs">申请加入</span>
+    </div>
+
+    <div
+      v-for="(item, index) in props.options"
+      :key="`services-${index}`"
+      class="grid gap-3 rounded-[20px] border border-border bg-muted/30 p-3"
+    >
+      <div class="flex gap-3">
+        <div
+          class="h-14 w-14 shrink-0 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/10"
+        ></div>
+        <div class="min-w-0 flex-1">
+          <div class="text-text truncate text-sm font-semibold leading-5">
+            {{ item.title || `服务 ${index + 1}` }}
+          </div>
+          <div class="text-text-secondary mt-1 text-[11px] leading-4">
+            {{ item.category || '服务分类' }} ·
+            {{ item.distance || '距离待配置' }}
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="Array.isArray(item.discount) && item.discount.length > 0"
+        class="flex flex-wrap gap-2"
+      >
+        <span
+          v-for="(discount, discountIndex) in item.discount"
+          :key="`services-${index}-${discountIndex}`"
+          class="text-text-secondary rounded-full border border-border bg-background px-2 py-1 text-[11px] leading-4"
+        >
+          {{ getDiscountText(discount) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>