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

package/src/web-preview/services.vue

@@ -0,0 +1,242 @@
+<script lang="ts" setup>
+import type { DiscountItem, ServiceItem } from '../schema/index.js';
+
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    locationText?: string;
+    options?: ServiceItem[];
+    showHead?: boolean;
+  }>(),
+  {
+    locationText: '',
+    options: () => [],
+    showHead: false,
+  },
+);
+
+const displayList = computed<ServiceItem[]>(() => {
+  if (props.options.length > 0) {
+    return props.options;
+  }
+
+  return [
+    {
+      category: '',
+      count: '',
+      discount: [],
+      distance: '',
+      image: '',
+      path: undefined as never,
+      range: '',
+      rate: '',
+      title: '',
+      type: 'home',
+    },
+  ];
+});
+
+function resolveServiceTypeOption(type: string) {
+  switch (type) {
+    case 'home':
+      return {
+        backgroundColor: 'var(--custom-color-base, #0f766e)',
+        color: '#ffffff',
+        text: '上门',
+      };
+    case 'site':
+      return {
+        backgroundColor: '#f97316',
+        color: '#ffffff',
+        text: '到店',
+      };
+    case 'online':
+      return {
+        backgroundColor: '#eab308',
+        color: '#111827',
+        text: '在线',
+      };
+    case 'self':
+      return {
+        backgroundColor: '#eab308',
+        color: '#111827',
+        text: '自提',
+      };
+    default:
+      return {
+        backgroundColor: '#cbd5e1',
+        color: '#334155',
+        text: '服务',
+      };
+  }
+}
+
+function resolveDiscountTypeOption(type: string) {
+  switch (type) {
+    case 'voucher':
+      return { name: '优惠券', shortName: '券' };
+    case 'bonus':
+      return { name: '神券', shortName: '券' };
+    case 'group':
+      return { name: '团购', shortName: '团' };
+    case 'discount':
+    default:
+      return { name: '优惠', shortName: '惠' };
+  }
+}
+
+function resolveDiscountTypeShortName(type: string) {
+  return resolveDiscountTypeOption(type).shortName;
+}
+
+function resolveDiscountTypeName(type: string) {
+  return resolveDiscountTypeOption(type).name;
+}
+
+function resolveRateText(rate: string) {
+  return rate ? `★ ${rate}` : '★ 暂无评分';
+}
+
+function shouldShowDiscountPrice(discount: DiscountItem) {
+  return Number(discount.price || 0) > 0 || Number(discount.discounted || 0) > 0;
+}
+</script>
+
+<template>
+  <div class="service-list" v-if="displayList.length > 0">
+    <div class="service-list__head" v-if="showHead">
+      <div class="service-list__head-title">
+        <div class="service-list__head-line"></div>
+        <span class="service-list__head-text">{{ locationText }}生活圈</span>
+      </div>
+      <div class="service-list__head-action">
+        <span class="service-list__head-action-text">申请加入</span>
+      </div>
+    </div>
+    <div class="service-list__body">
+      <div
+        v-for="(item, index) in displayList"
+        :key="`services-${index}`"
+        class="service-list__item"
+      >
+        <div class="service-list__media">
+          <img
+            v-if="item.image"
+            class="image"
+            :src="item.image"
+            :alt="item.title || `服务 ${index + 1}`"
+          />
+          <div v-else class="image image--placeholder">服务</div>
+        </div>
+        <div class="service-list__content">
+          <div class="service-list__row">
+            <div class="service-list__row-item service-list__row-item--grow">
+              <span class="service-list__title-text">
+                {{ item.title || `服务 ${index + 1}` }}
+              </span>
+            </div>
+            <div class="service-list__row-item">
+              <div
+                class="service-list__type-badge"
+                :style="{
+                  backgroundColor: resolveServiceTypeOption(item.type).backgroundColor,
+                }"
+              >
+                <span
+                  class="service-list__type-text"
+                  :style="{ color: resolveServiceTypeOption(item.type).color }"
+                >
+                  {{ resolveServiceTypeOption(item.type).text }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="service-list__row">
+            <div class="service-list__row-item service-list__row-item--rates">
+              <span class="service-list__rate">{{ resolveRateText(item.rate) }}</span>
+            </div>
+            <div class="service-list__row-item service-list__row-item--count">
+              <span class="service-list__meta-text">
+                {{ item.count ? `${item.count}条` : '暂无评价' }}
+              </span>
+            </div>
+          </div>
+          <div class="service-list__row">
+            <div class="service-list__row-item service-list__row-item--grow">
+              <span class="service-list__meta-text">
+                {{ item.category || '服务分类' }}
+              </span>
+              <template v-if="item.range">
+                <span class="service-list__separator"></span>
+                <span class="service-list__meta-text">{{ item.range }}</span>
+              </template>
+            </div>
+            <div class="service-list__row-item">
+              <span class="service-list__distance-icon">📍</span>
+              <span class="service-list__distance-text">
+                {{ item.distance || '距离待配置' }}
+              </span>
+            </div>
+          </div>
+          <div
+            class="service-list__discount"
+            v-if="Array.isArray(item.discount) && item.discount.length > 0"
+          >
+            <div
+              v-for="(discount, discountIndex) in item.discount"
+              :key="`services-${index}-${discountIndex}`"
+              class="service-list__discount-row"
+              :class="`service-list__discount-row--${discount.type}`"
+            >
+              <div
+                class="service-list__discount-type"
+                :style="{ marginRight: discount.price ? '5px' : '8px' }"
+              >
+                <span class="service-list__discount-type-text">
+                  {{ resolveDiscountTypeShortName(discount.type) }}
+                </span>
+              </div>
+              <div class="service-list__discount-name" v-if="discount.type === 'bonus'">
+                <span class="service-list__discount-name-text">
+                  {{ resolveDiscountTypeName(discount.type) }}
+                </span>
+              </div>
+              <div
+                class="service-list__discount-price"
+                v-if="shouldShowDiscountPrice(discount)"
+              >
+                <div
+                  class="service-list__discount-final-price"
+                  v-if="Number(discount.price || 0) > 0"
+                >
+                  <span class="service-list__discount-cny">¥</span>
+                  <span class="service-list__discount-final-price-text">
+                    {{ discount.price }}
+                  </span>
+                </div>
+                <div
+                  class="service-list__discount-text"
+                  v-if="Number(discount.discounted || 0) > 0"
+                >
+                  <span class="service-list__discount-text-content">
+                    已减{{ discount.discounted }}
+                  </span>
+                </div>
+              </div>
+              <div class="service-list__discount-project">
+                <span class="service-list__discount-project-text">
+                  {{ discount.project || resolveDiscountTypeName(discount.type) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './services.scss';
+</style>

package/src/web-preview/tags.scss

@@ -0,0 +1,70 @@
+.tag-list {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.placeholder {
+  flex: 1 0 auto;
+}
+
+.placeholder-tag {
+  border: 0;
+  cursor: pointer;
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--uni-bg-color, #ffffff);
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgb(15 23 42 / 10%);
+}
+
+.placeholder-tag .text {
+  font-size: 13px;
+  color: var(--uni-text-color-gray, #64748b);
+}
+
+.placeholder-tag .icon {
+  margin-left: 4px;
+  color: var(--custom-color-base, #0f766e);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.tag-item {
+  margin-bottom: 15px;
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--uni-bg-color, #ffffff);
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgb(15 23 42 / 10%);
+}
+
+.tag-item.no-margin-bottom {
+  margin-bottom: 0;
+}
+
+.tag-item .image {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  width: 20px;
+  height: 15px;
+  border-radius: 999px;
+  background: rgb(15 118 110 / 12%);
+  color: var(--custom-color-base, #0f766e);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.tag-item .text {
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--uni-text-color, #0f172a);
+  word-break: break-all;
+}

package/src/web-preview/{TagsPreview.vue → tags.vue}

@@ -14,16 +14,16 @@ import {
 
 import { getTextInitial } from '../schema/index.js';
 
-type DisplayLastRowData = {
-  displayLastRowItemGap: number;
-  placeholderWidth: number;
-};
-
 type DisplayTagData = {
   displayTagCount: number;
   showPlaceholderTag: boolean;
 };
 
+type DisplayLastRowData = {
+  displayLastRowItemGap: number;
+  placeholderWidth: number;
+};
+
 type TagLayoutSnapshot = {
   placeholderTagWidth: number;
   signature: string;
@@ -105,13 +105,18 @@ const displayTagData = computed<DisplayTagData>(() => {
 
 const showPlaceholderTag = computed(() => displayTagData.value.showPlaceholderTag);
 const displayTagCount = computed(() => displayTagData.value.displayTagCount);
+const displayLastRowStartIndex = computed(() =>
+  Math.max(displayTagCount.value - displayLastRowCount.value, 0),
+);
 
 const displayLastRowCount = computed(() => {
   let remainingTagCount = displayTagCount.value;
+
   for (const rowCount of tagListRow.value) {
     if (remainingTagCount <= 0) {
       break;
     }
+
     if (remainingTagCount > rowCount) {
       remainingTagCount -= rowCount;
     } else {
@@ -121,10 +126,6 @@ const displayLastRowCount = computed(() => {
   return 0;
 });
 
-const displayLastRowStartIndex = computed(() =>
-  Math.max(displayTagCount.value - displayLastRowCount.value, 0),
-);
-
 const displayLastRowData = computed<DisplayLastRowData>(() => {
   if (displayLastRowCount.value === 0 || displayLastRowCount.value === 3) {
     return {
@@ -379,17 +380,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="containerRef" class="home-schema-tags">
+  <div ref="containerRef" class="tag-list">
     <template v-for="(tag, index) in tagList" :key="`tags-${index}`">
-      <button
+      <div
         v-show="showAllTagsForMeasurement || index < displayTagCount"
         :ref="(element) => setTagItemRef(element, index)"
-        type="button"
-        class="home-schema-tags__item"
-        :class="{
-          'home-schema-tags__item--no-margin-bottom':
-            !isMeasurePending && isDisplayLastRowTag(index),
-        }"
+        class="tag-item"
+        :class="{ 'no-margin-bottom': !isMeasurePending && isDisplayLastRowTag(index) }"
         :style="{
           marginRight:
             isMeasurePending || index < displayLastRowStartIndex
@@ -397,111 +394,37 @@ onBeforeUnmount(() => {
               : `${displayLastRowItemGap}px`,
         }"
       >
-        <span
-          v-if="props.mode.showIcon"
-          class="home-schema-tags__icon"
-        >
+        <span v-if="props.mode.showIcon" class="image">
           {{ getTextInitial(tag.title) }}
         </span>
-        <span class="home-schema-tags__text">
-          {{ tag.title || `标签 ${index + 1}` }}
-        </span>
-      </button>
+        <span class="text">{{ tag.title || `标签 ${index + 1}` }}</span>
+      </div>
     </template>
-
     <template v-if="props.options.length > 0">
       <span
         v-show="!isMeasurePending && showPlaceholder"
-        class="home-schema-tags__placeholder"
+        class="placeholder"
         :style="{ flexBasis: `${placeholderWidthValue}px` }"
       ></span>
       <button
         v-show="isMeasurePending || showPlaceholderTag"
         ref="placeholderTagRef"
         type="button"
-        class="home-schema-tags__placeholder-tag"
+        class="placeholder-tag"
         :style="{
-          marginTop: displayLastRowCount === 3 ? '12px' : '0px',
+          marginTop: displayLastRowCount === 3 ? '15px' : '0px',
           pointerEvents: isMeasurePending ? 'none' : 'auto',
           visibility: isMeasurePending ? 'hidden' : 'visible',
         }"
         @click="toggleExpanded"
       >
-        <span>{{ tagListExpanded ? '收起' : '展开' }}</span>
-        <span class="home-schema-tags__placeholder-icon">
-          {{ tagListExpanded ? '↑' : '↓' }}
-        </span>
+        <span class="text">{{ tagListExpanded ? '收起' : '展开' }}</span>
+        <span class="icon">{{ tagListExpanded ? '↑' : '↓' }}</span>
       </button>
     </template>
   </div>
 </template>
 
-<style scoped>
-.home-schema-tags {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 0 0;
-}
-
-.home-schema-tags__item,
-.home-schema-tags__placeholder-tag {
-  border: 0;
-  cursor: default;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 10px;
-  background: rgb(255 255 255 / 85%);
-  box-shadow: 0 0 10px rgb(15 23 42 / 10%);
-}
-
-.home-schema-tags__item {
-  margin-bottom: 12px;
-  padding: 8px 10px;
-  background: rgb(248 250 252 / 90%);
-}
-
-.home-schema-tags__item--no-margin-bottom {
-  margin-bottom: 0;
-}
-
-.home-schema-tags__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  margin-right: 8px;
-  border-radius: 999px;
-  background: hsl(var(--primary) / 12%);
-  color: hsl(var(--primary));
-  font-size: 10px;
-  font-weight: 600;
-}
-
-.home-schema-tags__text {
-  min-width: 0;
-  color: hsl(var(--foreground));
-  font-size: 12px;
-  line-height: 1.4;
-  white-space: normal;
-  word-break: break-all;
-}
-
-.home-schema-tags__placeholder {
-  flex: 1 0 auto;
-}
-
-.home-schema-tags__placeholder-tag {
-  padding: 8px 10px;
-  color: hsl(var(--muted-foreground));
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.home-schema-tags__placeholder-icon {
-  margin-left: 6px;
-  color: hsl(var(--primary));
-  font-size: 12px;
-}
+<style scoped lang="scss">
+@import './tags.scss';
 </style>

package/src/web-preview/tools.scss

@@ -0,0 +1,76 @@
+.swiper {
+  overflow-x: auto;
+  padding-bottom: 12px;
+  box-sizing: content-box;
+  scrollbar-width: thin;
+}
+
+.swiper-track {
+  display: flex;
+  gap: 12px;
+}
+
+.swiper-item {
+  flex: 0 0 100%;
+  min-width: 100%;
+}
+
+.tool-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.tool-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tool-item .image {
+  width: 34px;
+  height: 34px;
+}
+
+.tool-item .image__content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  object-fit: cover;
+  background: rgb(15 118 110 / 10%);
+  color: var(--custom-color-base, #0f766e);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.tool-item .image__content--placeholder {
+  text-transform: uppercase;
+}
+
+.tool-item .text {
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--uni-text-color, #0f172a);
+  text-align: center;
+  word-break: break-all;
+}
+
+.mt-8rpx {
+  margin-top: 4px;
+}
+
+.swiper-dots {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+}
+
+.swiper-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background-color: #cbd5e1;
+}

package/src/web-preview/tools.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { ToolItem, ToolsMode } from '../schema/index.js';
+
+import { computed } from 'vue';
+
+import { getTextInitial } from '../schema/index.js';
+
+const props = withDefaults(
+  defineProps<{
+    mode?: Partial<ToolsMode>;
+    options?: ToolItem[];
+  }>(),
+  {
+    mode: () => ({
+      displayMultipleItems: 10,
+      displayRowCount: 5,
+    }),
+    options: () => [],
+  },
+);
+
+const displayMultipleItems = computed(() =>
+  Math.max(props.mode.displayMultipleItems ?? 10, 1),
+);
+const displayRowCount = computed(() => Math.max(props.mode.displayRowCount || 5, 1));
+
+const displayList = computed<ToolItem[]>(() => {
+  if (props.options.length === 0) {
+    return Array.from({ length: displayMultipleItems.value }, () => ({
+      icon: '',
+      path: undefined as never,
+      title: '',
+    }));
+  }
+  return props.options;
+});
+
+const swiperList = computed<ToolItem[][]>(() => {
+  const pages: ToolItem[][] = [];
+  for (let index = 0; index < displayList.value.length; index += displayMultipleItems.value) {
+    pages.push(displayList.value.slice(index, index + displayMultipleItems.value));
+  }
+  return pages;
+});
+
+function resolveItemStyle(itemCount: number, index: number) {
+  const rowCount = displayRowCount.value;
+  const lastRowCount = itemCount % rowCount || rowCount;
+  const shouldShowBottomMargin = index < itemCount - lastRowCount;
+
+  return {
+    marginBottom: shouldShowBottomMargin ? '16px' : '0px',
+    width: `${100 / rowCount}%`,
+  };
+}
+</script>
+
+<template>
+  <div>
+    <template v-if="swiperList.length > 1">
+      <div class="swiper">
+        <div class="swiper-track">
+          <div
+            v-for="(page, pageIndex) in swiperList"
+            :key="`tools-page-${pageIndex}`"
+            class="swiper-item tool-list"
+          >
+            <div
+              v-for="(tool, index) in page"
+              :key="`tools-${pageIndex}-${index}`"
+              class="tool-item"
+              :style="resolveItemStyle(page.length, index)"
+            >
+              <div class="image">
+                <img
+                  v-if="tool.icon"
+                  class="image__content"
+                  :src="tool.icon"
+                  :alt="tool.title || `工具 ${index + 1}`"
+                />
+                <span v-else class="image__content image__content--placeholder">
+                  {{ getTextInitial(tool.title) }}
+                </span>
+              </div>
+              <span class="text mt-8rpx">{{ tool.title || `工具 ${index + 1}` }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="swiper-dots">
+        <span
+          v-for="(_, index) in swiperList"
+          :key="`tools-dot-${index}`"
+          class="swiper-dot"
+        ></span>
+      </div>
+    </template>
+    <template v-else>
+      <div class="tool-list">
+        <div
+          v-for="(tool, index) in displayList"
+          :key="`tools-${index}`"
+          class="tool-item"
+          :style="resolveItemStyle(displayList.length, index)"
+        >
+          <div class="image">
+            <img
+              v-if="tool.icon"
+              class="image__content"
+              :src="tool.icon"
+              :alt="tool.title || `工具 ${index + 1}`"
+            />
+            <span v-else class="image__content image__content--placeholder">
+              {{ getTextInitial(tool.title) }}
+            </span>
+          </div>
+          <span class="text mt-8rpx">{{ tool.title || `工具 ${index + 1}` }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './tools.scss';
+</style>