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

package/src/web-preview/TagsPreview.vue

@@ -0,0 +1,507 @@
+<script lang="ts" setup>
+import type { TagItem, TagsMode } from '../schema/index.js';
+import type { ComponentPublicInstance } from 'vue';
+
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { getTextInitial } from '../schema/index.js';
+
+type DisplayLastRowData = {
+  displayLastRowItemGap: number;
+  placeholderWidth: number;
+};
+
+type DisplayTagData = {
+  displayTagCount: number;
+  showPlaceholderTag: boolean;
+};
+
+type TagLayoutSnapshot = {
+  placeholderTagWidth: number;
+  signature: string;
+  tagItemWidthList: number[];
+  tagListRow: number[];
+  tagListWidth: number;
+};
+
+const props = withDefaults(
+  defineProps<{
+    mode?: Partial<TagsMode>;
+    options?: TagItem[];
+  }>(),
+  {
+    mode: () => ({
+      displayRowCount: 4,
+      showIcon: true,
+    }),
+    options: () => [],
+  },
+);
+
+const TAG_LAYOUT_STABLE_CHECK_LIMIT = 4;
+const TAG_LAYOUT_STABLE_REQUIRED_COUNT = 2;
+
+const containerRef = ref<HTMLElement | null>(null);
+const placeholderTagRef = ref<HTMLElement | null>(null);
+const tagItemRefs = ref<HTMLElement[]>([]);
+const tagListExpanded = ref(false);
+const tagListRow = ref<number[]>([]);
+const tagListWidth = ref(0);
+const tagItemWidthList = ref<number[]>([]);
+const showAllTagsForMeasurement = ref(true);
+const isMeasurePending = ref(false);
+const currentMeasureVersion = ref(0);
+const placeholderTagWidth = ref(0);
+
+let resizeObserver: null | ResizeObserver = null;
+
+const tagList = computed<TagItem[]>(() => {
+  if (props.options.length === 0) {
+    return Array.from({ length: 12 }, () => ({
+      icon: '',
+      path: undefined as never,
+      title: '',
+    }));
+  }
+  return props.options;
+});
+
+const displayTagData = computed<DisplayTagData>(() => {
+  let currentRowTotalCount = 0;
+  let totalItems = 0;
+  for (const rowCount of tagListRow.value) {
+    totalItems += rowCount;
+  }
+
+  if (tagListExpanded.value) {
+    return {
+      displayTagCount: totalItems,
+      showPlaceholderTag: true,
+    };
+  }
+
+  const maxDisplayRowCount = Math.max(props.mode.displayRowCount || 4, 1);
+  const maxRowIndex = Math.min(maxDisplayRowCount, tagListRow.value.length);
+  for (let index = 0; index < maxRowIndex; index += 1) {
+    currentRowTotalCount += tagListRow.value[index] || 0;
+  }
+
+  const showPlaceholderTag = currentRowTotalCount < totalItems;
+  return {
+    displayTagCount: showPlaceholderTag
+      ? currentRowTotalCount - 1
+      : currentRowTotalCount,
+    showPlaceholderTag,
+  };
+});
+
+const showPlaceholderTag = computed(() => displayTagData.value.showPlaceholderTag);
+const displayTagCount = computed(() => displayTagData.value.displayTagCount);
+
+const displayLastRowCount = computed(() => {
+  let remainingTagCount = displayTagCount.value;
+  for (const rowCount of tagListRow.value) {
+    if (remainingTagCount <= 0) {
+      break;
+    }
+    if (remainingTagCount > rowCount) {
+      remainingTagCount -= rowCount;
+    } else {
+      return remainingTagCount;
+    }
+  }
+  return 0;
+});
+
+const displayLastRowStartIndex = computed(() =>
+  Math.max(displayTagCount.value - displayLastRowCount.value, 0),
+);
+
+const displayLastRowData = computed<DisplayLastRowData>(() => {
+  if (displayLastRowCount.value === 0 || displayLastRowCount.value === 3) {
+    return {
+      displayLastRowItemGap: 0,
+      placeholderWidth: 0,
+    };
+  }
+
+  let displayLastRowWidth = 0;
+  for (
+    let index = displayLastRowStartIndex.value;
+    index < displayTagCount.value;
+    index += 1
+  ) {
+    displayLastRowWidth += tagItemWidthList.value[index] || 0;
+  }
+
+  const placeholderWidthValue = tagListWidth.value - displayLastRowWidth;
+  const displayRemainWidth = Math.max(
+    tagListWidth.value - displayLastRowWidth - placeholderTagWidth.value,
+    0,
+  );
+
+  return {
+    displayLastRowItemGap: Math.max(displayRemainWidth / 4, 0),
+    placeholderWidth: placeholderWidthValue,
+  };
+});
+
+const placeholderWidthValue = computed(
+  () => displayLastRowData.value.placeholderWidth,
+);
+const showPlaceholder = computed(() => placeholderWidthValue.value !== 0);
+const displayLastRowItemGap = computed(
+  () => displayLastRowData.value.displayLastRowItemGap,
+);
+
+function normalizeMeasuredWidth(width: number) {
+  return Math.max(Math.round(width * 100), 0);
+}
+
+function calculateTagListRow(itemWidthList: number[], containerWidth: number) {
+  const rowList: number[] = [];
+  let currentRowWidth = 0;
+  let currentRowCount = 0;
+
+  for (const itemWidth of itemWidthList) {
+    if (currentRowWidth + itemWidth > containerWidth && currentRowCount > 0) {
+      rowList.push(currentRowCount);
+      currentRowWidth = 0;
+      currentRowCount = 0;
+    }
+    currentRowWidth += itemWidth;
+    currentRowCount += 1;
+  }
+
+  if (currentRowCount > 0) {
+    rowList.push(currentRowCount);
+  }
+
+  return rowList;
+}
+
+function createTagLayoutSnapshot(): null | TagLayoutSnapshot {
+  const container = containerRef.value;
+  if (!container) {
+    return null;
+  }
+
+  const tagListWidthValue = container.getBoundingClientRect().width;
+  if (tagListWidthValue <= 0) {
+    return null;
+  }
+
+  const itemWidthList: number[] = [];
+  const normalizedWidthList: number[] = [];
+  for (const element of tagItemRefs.value) {
+    const itemWidth = element?.getBoundingClientRect().width || 0;
+    if (itemWidth <= 0) {
+      return null;
+    }
+    itemWidthList.push(itemWidth);
+    normalizedWidthList.push(normalizeMeasuredWidth(itemWidth));
+  }
+
+  if (itemWidthList.length !== tagList.value.length) {
+    return null;
+  }
+
+  const placeholderWidth =
+    props.options.length > 0
+      ? placeholderTagRef.value?.getBoundingClientRect().width || 0
+      : 0;
+  if (props.options.length > 0 && placeholderWidth <= 0) {
+    return null;
+  }
+
+  return {
+    placeholderTagWidth: placeholderWidth,
+    signature: [
+      normalizeMeasuredWidth(tagListWidthValue),
+      normalizeMeasuredWidth(placeholderWidth),
+      normalizedWidthList.join(','),
+    ].join('|'),
+    tagItemWidthList: itemWidthList,
+    tagListRow: calculateTagListRow(itemWidthList, tagListWidthValue),
+    tagListWidth: tagListWidthValue,
+  };
+}
+
+function applyTagLayoutSnapshot(
+  measureVersion: number,
+  snapshot: TagLayoutSnapshot,
+) {
+  if (measureVersion !== currentMeasureVersion.value) {
+    return;
+  }
+
+  tagListWidth.value = snapshot.tagListWidth;
+  placeholderTagWidth.value = snapshot.placeholderTagWidth;
+  tagItemWidthList.value = snapshot.tagItemWidthList;
+  tagListRow.value = snapshot.tagListRow;
+  isMeasurePending.value = false;
+  showAllTagsForMeasurement.value = false;
+}
+
+function applyTagLayoutFallback(measureVersion: number) {
+  if (measureVersion !== currentMeasureVersion.value) {
+    return;
+  }
+
+  tagListWidth.value = 0;
+  placeholderTagWidth.value = 0;
+  tagItemWidthList.value = [];
+  tagListRow.value = [];
+  isMeasurePending.value = false;
+  showAllTagsForMeasurement.value = true;
+}
+
+function runTagLayoutStableCheck(
+  measureVersion: number,
+  previousSignature = '',
+  stableCount = 0,
+  attemptCount = 0,
+) {
+  if (measureVersion !== currentMeasureVersion.value) {
+    return;
+  }
+
+  nextTick(() => {
+    window.requestAnimationFrame(() => {
+      if (measureVersion !== currentMeasureVersion.value) {
+        return;
+      }
+
+      const currentAttemptCount = attemptCount + 1;
+      const snapshot = createTagLayoutSnapshot();
+      if (!snapshot) {
+        if (currentAttemptCount >= TAG_LAYOUT_STABLE_CHECK_LIMIT) {
+          applyTagLayoutFallback(measureVersion);
+          return;
+        }
+        runTagLayoutStableCheck(
+          measureVersion,
+          previousSignature,
+          0,
+          currentAttemptCount,
+        );
+        return;
+      }
+
+      const currentStableCount =
+        snapshot.signature === previousSignature ? stableCount + 1 : 1;
+
+      if (
+        currentStableCount >= TAG_LAYOUT_STABLE_REQUIRED_COUNT ||
+        currentAttemptCount >= TAG_LAYOUT_STABLE_CHECK_LIMIT
+      ) {
+        applyTagLayoutSnapshot(measureVersion, snapshot);
+        return;
+      }
+
+      runTagLayoutStableCheck(
+        measureVersion,
+        snapshot.signature,
+        currentStableCount,
+        currentAttemptCount,
+      );
+    });
+  });
+}
+
+function scheduleTagMeasure() {
+  currentMeasureVersion.value += 1;
+  isMeasurePending.value = true;
+  showAllTagsForMeasurement.value = true;
+  runTagLayoutStableCheck(currentMeasureVersion.value);
+}
+
+function isDisplayLastRowTag(index: number) {
+  return (
+    displayLastRowCount.value > 0 &&
+    index >= displayLastRowStartIndex.value &&
+    index < displayTagCount.value
+  );
+}
+
+function setTagItemRef(
+  element: ComponentPublicInstance | Element | null,
+  index: number,
+) {
+  if (element instanceof HTMLElement) {
+    tagItemRefs.value[index] = element;
+    return;
+  }
+
+  if (element && '$el' in element && element.$el instanceof HTMLElement) {
+    tagItemRefs.value[index] = element.$el;
+  }
+}
+
+function toggleExpanded() {
+  tagListExpanded.value = !tagListExpanded.value;
+}
+
+watch(
+  () => [props.options, props.mode.displayRowCount, props.mode.showIcon],
+  () => {
+    scheduleTagMeasure();
+  },
+  { deep: true, immediate: true },
+);
+
+onBeforeUpdate(() => {
+  tagItemRefs.value = [];
+});
+
+onMounted(() => {
+  if (!containerRef.value) {
+    return;
+  }
+
+  resizeObserver = new ResizeObserver(() => {
+    scheduleTagMeasure();
+  });
+  resizeObserver.observe(containerRef.value);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+</script>
+
+<template>
+  <div ref="containerRef" class="home-schema-tags">
+    <template v-for="(tag, index) in tagList" :key="`tags-${index}`">
+      <button
+        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),
+        }"
+        :style="{
+          marginRight:
+            isMeasurePending || index < displayLastRowStartIndex
+              ? '0px'
+              : `${displayLastRowItemGap}px`,
+        }"
+      >
+        <span
+          v-if="props.mode.showIcon"
+          class="home-schema-tags__icon"
+        >
+          {{ getTextInitial(tag.title) }}
+        </span>
+        <span class="home-schema-tags__text">
+          {{ tag.title || `标签 ${index + 1}` }}
+        </span>
+      </button>
+    </template>
+
+    <template v-if="props.options.length > 0">
+      <span
+        v-show="!isMeasurePending && showPlaceholder"
+        class="home-schema-tags__placeholder"
+        :style="{ flexBasis: `${placeholderWidthValue}px` }"
+      ></span>
+      <button
+        v-show="isMeasurePending || showPlaceholderTag"
+        ref="placeholderTagRef"
+        type="button"
+        class="home-schema-tags__placeholder-tag"
+        :style="{
+          marginTop: displayLastRowCount === 3 ? '12px' : '0px',
+          pointerEvents: isMeasurePending ? 'none' : 'auto',
+          visibility: isMeasurePending ? 'hidden' : 'visible',
+        }"
+        @click="toggleExpanded"
+      >
+        <span>{{ tagListExpanded ? '收起' : '展开' }}</span>
+        <span class="home-schema-tags__placeholder-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>

package/src/web-preview/ToolsPreview.vue

@@ -0,0 +1,49 @@
+<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 visibleTools = computed(() =>
+  props.options.slice(0, props.mode.displayMultipleItems ?? 10),
+);
+</script>
+
+<template>
+  <div
+    class="grid gap-2"
+    :style="{
+      gridTemplateColumns: `repeat(${props.mode.displayRowCount || 5}, minmax(0, 1fr))`,
+    }"
+  >
+    <div
+      v-for="(item, index) in visibleTools"
+      :key="`tools-${index}`"
+      class="grid gap-2 rounded-2xl border border-border bg-muted/30 px-2 py-3 text-center"
+    >
+      <div
+        class="mx-auto flex h-9 w-9 items-center justify-center rounded-full bg-primary/15 text-xs font-semibold text-primary"
+      >
+        {{ getTextInitial(item.title) }}
+      </div>
+      <div class="text-text-secondary truncate text-[11px] leading-4">
+        {{ item.title || `工具 ${index + 1}` }}
+      </div>
+    </div>
+  </div>
+</template>

package/src/web-preview/index.ts

@@ -0,0 +1,6 @@
+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';