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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucifer.chao.du/home-schema-components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Shared home schema components for member and web preview consumers.",
   "license": "UNLICENSED",
   "type": "module",

package/src/web-preview/activities.scss

@@ -0,0 +1,70 @@
+.activity {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-radius: 10px;
+}
+
+.swiper {
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+.swiper-track {
+  display: flex;
+  transition-property: transform;
+  transition-timing-function: ease;
+}
+
+.swiper-item {
+  flex: 0 0 100%;
+  width: 100%;
+}
+
+.image {
+  display: block;
+  width: 100%;
+  height: 250px;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.image--placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 16px;
+  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
+  color: #ffffff;
+}
+
+.image-placeholder__title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+.image-placeholder__text {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: 0.8;
+  word-break: break-all;
+}
+
+.swiper-dots {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+}
+
+.swiper-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background-color: #cbd5e1;
+}
+
+.swiper-dot--active {
+  background-color: var(--custom-color-base, #0f766e);
+}

package/src/web-preview/activities.vue

@@ -0,0 +1,106 @@
+<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 displayList = 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 swiperTrackStyle = computed(() => ({
+  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 || displayList.value.length <= 1) {
+    return;
+  }
+
+  activitiesTimer = setInterval(() => {
+    activeIndex.value = (activeIndex.value + 1) % displayList.value.length;
+  }, props.mode.interval || 5000);
+}
+
+watch(
+  () => [props.mode.autoplay, props.mode.interval, displayList.value.length],
+  () => {
+    if (activeIndex.value >= displayList.value.length) {
+      activeIndex.value = 0;
+    }
+    startActivitiesTimer();
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  clearActivitiesTimer();
+});
+</script>
+
+<template>
+  <div class="activity">
+    <div class="swiper">
+      <div class="swiper-track" :style="swiperTrackStyle">
+        <div
+          v-for="(item, index) in displayList"
+          :key="`activities-${index}`"
+          class="swiper-item"
+        >
+          <img
+            v-if="item.image"
+            class="image"
+            :src="item.image"
+            :alt="`活动横幅 ${index + 1}`"
+          />
+          <div v-else class="image image--placeholder">
+            <span class="image-placeholder__title">活动横幅 {{ index + 1 }}</span>
+            <span class="image-placeholder__text">未配置图片地址</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="displayList.length > 1" class="swiper-dots">
+      <span
+        v-for="(_, index) in displayList"
+        :key="`activities-dot-${index}`"
+        class="swiper-dot"
+        :class="{ 'swiper-dot--active': index === activeIndex }"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './activities.scss';
+</style>

package/src/web-preview/communities.scss

@@ -0,0 +1,82 @@
+.community {
+  padding: 11px;
+  min-height: 66px;
+  background-color: var(--uni-bg-color, #ffffff);
+  border-radius: 5px;
+  display: flex;
+  flex-direction: row;
+  box-shadow: 0 0 6px rgb(15 23 42 / 8%);
+}
+
+.community-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+}
+
+.community-title .image {
+  width: 45px;
+  height: 40px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.community-title .image--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(15 118 110 / 10%);
+  color: var(--custom-color-base, #0f766e);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.community-content {
+  flex: 1;
+  display: flex;
+}
+
+.community-swiper {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+}
+
+.community-swiper-item {
+  min-width: 0;
+}
+
+.community-swiper-item .item-content {
+  width: 100%;
+  min-height: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.community-swiper-item .circle {
+  flex: 0 0 auto;
+  margin-right: 7px;
+  width: 4px;
+  height: 4px;
+  background-color: var(--uni-text-color-gray, #64748b);
+  border-radius: 999px;
+  transform: translateY(2px);
+}
+
+.community-swiper-item .text {
+  flex: 1;
+  font-size: 15px;
+  line-height: 1.4;
+  color: var(--uni-text-color, #0f172a);
+}
+
+.community-swiper-item .text.ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/src/web-preview/communities.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { CommunitiesMode, CommunityItem } from '../schema/index.js';
+
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    image?: string;
+    mode?: Partial<CommunitiesMode>;
+    options?: CommunityItem[];
+  }>(),
+  {
+    image: '',
+    mode: () => ({
+      autoplay: true,
+      displayMultipleItems: 2,
+      duration: 500,
+      interval: 5000,
+      showIcon: true,
+    }),
+    options: () => [],
+  },
+);
+
+const resolvedImage = computed(() => props.image || '');
+const displayMultipleItems = computed(() =>
+  Math.max(props.mode.displayMultipleItems || 2, 1),
+);
+const sourceList = computed<CommunityItem[]>(() => {
+  if (props.options.length > 0) {
+    return props.options;
+  }
+  return Array.from({ length: displayMultipleItems.value }, () => ({
+    path: undefined as never,
+    title: '',
+  }));
+});
+
+const activeIndex = ref(0);
+let communitiesTimer: null | ReturnType<typeof setInterval> = null;
+
+const displayList = computed<CommunityItem[]>(() => {
+  if (sourceList.value.length <= displayMultipleItems.value) {
+    return sourceList.value;
+  }
+
+  return Array.from({ length: displayMultipleItems.value }, (_, index) => {
+    const resolvedIndex = (activeIndex.value + index) % sourceList.value.length;
+    return sourceList.value[resolvedIndex]!;
+  });
+});
+
+function clearCommunitiesTimer() {
+  if (!communitiesTimer) {
+    return;
+  }
+  clearInterval(communitiesTimer);
+  communitiesTimer = null;
+}
+
+function startCommunitiesTimer() {
+  clearCommunitiesTimer();
+  if (!props.mode.autoplay || sourceList.value.length <= displayMultipleItems.value) {
+    return;
+  }
+
+  communitiesTimer = setInterval(() => {
+    activeIndex.value = (activeIndex.value + 1) % sourceList.value.length;
+  }, props.mode.interval || 5000);
+}
+
+watch(
+  () => [
+    props.mode.autoplay,
+    props.mode.interval,
+    sourceList.value.length,
+    displayMultipleItems.value,
+  ],
+  () => {
+    if (activeIndex.value >= sourceList.value.length) {
+      activeIndex.value = 0;
+    }
+    startCommunitiesTimer();
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  clearCommunitiesTimer();
+});
+</script>
+
+<template>
+  <div class="community" v-if="displayList.length > 0">
+    <div class="community-title">
+      <img
+        v-if="resolvedImage"
+        class="image"
+        :src="resolvedImage"
+        alt="社区播报标题"
+      />
+      <div v-else class="image image--placeholder">播报</div>
+    </div>
+    <div class="community-content">
+      <div class="community-swiper">
+        <div
+          v-for="(item, index) in displayList"
+          :key="`communities-${index}`"
+          class="community-swiper-item"
+        >
+          <div class="item-content">
+            <span v-if="props.mode.showIcon" class="circle"></span>
+            <span class="text" :class="{ ellipsis: displayMultipleItems > 1 }">
+              {{ item.title || `播报内容 ${index + 1}` }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './communities.scss';
+</style>

package/src/web-preview/index.ts

@@ -1,6 +1,5 @@
-export { default as ActivitiesPreview } from './ActivitiesPreview.vue';
-export { default as CommunitiesPreview } from './CommunitiesPreview.vue';
-export { default as HomeSchemaPreview } from './HomeSchemaPreview.vue';
-export { default as ServicesPreview } from './ServicesPreview.vue';
-export { default as TagsPreview } from './TagsPreview.vue';
-export { default as ToolsPreview } from './ToolsPreview.vue';
+export { default as ActivitiesPreview } from './activities.vue';
+export { default as CommunitiesPreview } from './communities.vue';
+export { default as ServicesPreview } from './services.vue';
+export { default as TagsPreview } from './tags.vue';
+export { default as ToolsPreview } from './tools.vue';

package/src/web-preview/services.scss

@@ -0,0 +1,237 @@
+.service-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.service-list__head {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+}
+
+.service-list__head-title {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.service-list__head-line {
+  margin-right: 8px;
+  width: 4px;
+  height: 26px;
+  border-radius: 999px;
+  background-color: var(--custom-color-base, #0f766e);
+}
+
+.service-list__head-text {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--uni-text-color, #0f172a);
+}
+
+.service-list__head-action {
+  padding-bottom: 4px;
+}
+
+.service-list__head-action-text {
+  font-size: 13px;
+  color: var(--uni-text-color-gray, #64748b);
+}
+
+.service-list__body {
+  display: flex;
+  flex-direction: column;
+}
+
+.service-list__item {
+  margin-bottom: 13px;
+  padding: 15px 12px;
+  background-color: var(--uni-bg-color, #ffffff);
+  box-shadow: 0 0 5px rgb(15 23 42 / 10%);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+}
+
+.service-list__media {
+  flex: 0 0 auto;
+  margin-right: 8px;
+}
+
+.service-list__media .image {
+  display: block;
+  width: 88px;
+  height: 88px;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.service-list__media .image--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgb(15 118 110 / 16%), rgb(20 184 166 / 26%));
+  color: var(--custom-color-base, #0f766e);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.service-list__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.service-list__row {
+  margin-bottom: 9px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.service-list__row:last-child {
+  margin-bottom: 0;
+}
+
+.service-list__row-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.service-list__row-item--grow {
+  flex: 1;
+  min-width: 0;
+}
+
+.service-list__row-item--rates {
+  margin-right: 12px;
+}
+
+.service-list__title-text {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--uni-text-color, #0f172a);
+}
+
+.service-list__type-badge {
+  margin-left: 13px;
+  padding: 3px 4px;
+  border-radius: 4px;
+}
+
+.service-list__type-text {
+  font-size: 10px;
+  line-height: 1;
+}
+
+.service-list__meta-text,
+.service-list__distance-text {
+  font-size: 14px;
+  color: var(--uni-text-color-gray, #64748b);
+}
+
+.service-list__separator {
+  margin: 0 3px;
+  width: 2px;
+  height: 2px;
+  border-radius: 999px;
+  background-color: var(--uni-text-color-gray, #64748b);
+}
+
+.service-list__rate {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  color: #f59e0b;
+}
+
+.service-list__distance-icon {
+  margin-right: 4px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.service-list__discount {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.service-list__discount-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 0;
+}
+
+.service-list__discount-type {
+  padding: 2px 4px;
+  background-color: rgb(239 68 68 / 10%);
+  border: 1px solid rgb(239 68 68 / 35%);
+  border-radius: 5px;
+}
+
+.service-list__discount-type-text,
+.service-list__discount-text-content {
+  font-size: 11px;
+  color: #dc2626;
+}
+
+.service-list__discount-name {
+  margin-right: 3px;
+}
+
+.service-list__discount-name-text,
+.service-list__discount-project-text {
+  font-size: 14px;
+  color: var(--uni-text-color, #0f172a);
+}
+
+.service-list__discount-price {
+  margin-right: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.service-list__discount-final-price {
+  margin-right: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+}
+
+.service-list__discount-final-price-text {
+  font-size: 15px;
+  font-weight: 700;
+  color: #dc2626;
+}
+
+.service-list__discount-cny {
+  margin-bottom: 1px;
+  font-size: 11px;
+  font-weight: 700;
+  color: #dc2626;
+}
+
+.service-list__discount-text {
+  padding: 2px 5px;
+  background-color: rgb(239 68 68 / 10%);
+  border-radius: 5px;
+}
+
+.service-list__discount-row--bonus .service-list__discount-name-text,
+.service-list__discount-row--bonus .service-list__discount-project-text {
+  color: #dc2626;
+}