@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-cms/blocks/v2/cms-v2-divider.vue

@@ -0,0 +1,33 @@
+<template>
+    <view class="cms-v2-divider" :style="rootStyle">
+        <view v-if="data.mode === 'line'" class="cms-v2-divider__line" :style="lineStyle" />
+    </view>
+</template>
+
+<script setup lang="ts">
+/** @component CmsV2Divider @description CMS v2 空白与分割线内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import { rpx, type V2Record } from './shared';
+const props = defineProps<{ data: V2Record }>();
+const rootStyle = computed(() => ({
+    height: rpx(props.data.height, 30),
+    padding: Number(props.data.margin) === 1 ? '0 30rpx' : 0,
+    backgroundColor: props.data.style?.backgroundColor || '#fff'
+}));
+const lineStyle = computed(() => ({
+    borderTop: `2rpx ${['solid', 'dashed', 'dotted'].includes(props.data.lineStyle) ? props.data.lineStyle : 'solid'} ${props.data.style?.lineColor || '#e5e5e5'}`
+}));
+</script>
+
+<style scoped>
+.cms-v2-divider {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    width: 100%;
+}
+.cms-v2-divider__line {
+    width: 100%;
+    height: 0;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-floatbutton.vue

@@ -0,0 +1,28 @@
+<template>
+    <image
+        v-if="data.src"
+        class="cms-v2-floatbutton"
+        :style="buttonStyle"
+        :src="data.src"
+        mode="aspectFit"
+        @click="openV2Link(data.link, linkService, pageInfo)"
+    />
+</template>
+<script setup lang="ts">
+/** @component CmsV2Floatbutton @description CMS v2 悬浮按钮内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import { openV2Link, rpx, type V2BlockProps } from './shared';
+const props = defineProps<V2BlockProps>();
+const buttonStyle = computed(() => ({
+    width: rpx(props.data.style?.width, 76),
+    height: rpx(props.data.style?.height, 76),
+    right: `${Number(props.data.position?.right) || 0}%`,
+    bottom: `${Number(props.data.position?.bottom) || 20}%`
+}));
+</script>
+<style scoped>
+.cms-v2-floatbutton {
+    position: fixed;
+    z-index: 20;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-goods-list.vue

@@ -0,0 +1,150 @@
+<template>
+    <view class="cms-v2-goods" :style="rootStyle">
+        <snake-activity-list
+            v-if="data.bars.activitySession && data.display.cardType === 'auction'"
+            :list="activityList"
+            :current="activityCurrent"
+            @change="$emit('activity-change', $event)"
+        />
+        <snake-sticky
+            v-if="showBars"
+            :offset-top="stickyOffsetTop"
+            :custom-nav-height="stickyCustomNavHeight"
+            :scroll-top="scrollTop"
+            :disabled="!data.bars.sticky"
+            :bg-color="data.style.backgroundColor"
+            :z-index="19"
+        >
+            <scroll-view v-if="data.bars.tabs.enabled && tabs.length" scroll-x class="cms-v2-goods__tabs">
+                <view
+                    v-for="(tab, index) in tabs"
+                    :key="tab.id ?? index"
+                    class="cms-v2-goods__tab"
+                    :class="{ 'cms-v2-goods__tab--active': index === tabsCurrent }"
+                    @click="$emit('tab-change', index, tabs)"
+                >
+                    {{ tab.label }}
+                </view>
+            </scroll-view>
+            <scroll-view
+                v-if="data.bars.filter === 'custom' && data.bars.filterList.length"
+                scroll-x
+                class="cms-v2-goods__filters"
+            >
+                <view class="cms-v2-goods__filters-inner">
+                    <view
+                        v-for="(item, index) in data.bars.filterList"
+                        :key="item.id || index"
+                        class="cms-v2-goods__filter-chip"
+                    >
+                        {{ item.name }}
+                    </view>
+                </view>
+            </scroll-view>
+            <snake-filter-sorts
+                v-else-if="data.bars.filter === true"
+                :goods-list-length="goodsList.length"
+                :filters="filtersData"
+                :bg-color="data.style.backgroundColor"
+                :show-tabs="data.bars.tabs.enabled && !!tabs.length"
+                :sort="data.query.sort"
+                :custom-style="{ padding: '0 20rpx' }"
+                @change="$emit('filter-change', $event)"
+            />
+        </snake-sticky>
+        <snake-goods-list
+            :goods-list="goodsList"
+            :list-type="data.display?.cardType || 'sale'"
+            :commodity-type="Number(data.display?.columns) === 3 ? 1 : 0"
+            :attendance-show="data.display?.showAttendance !== false"
+            :page-margin="data.style?.pageMargin"
+            :image-margin="data.style?.gap"
+            :bg-color="data.style?.backgroundColor"
+            :assets="assets"
+            :layout="data.display.layout"
+            :card-radius="data.style.radius"
+            :show-tag="data.display.showTag"
+            @item-click="(item: Record<string, any>, index: number) => $emit('item-click', item, index)"
+            @handler-offer="(item: Record<string, any>, index: number) => $emit('offer-click', item, index)"
+        />
+        <snake-loadmore v-if="goodsList.length" :status="loadingStatus" :bg-color="data.style?.backgroundColor" />
+        <snake-empty
+            v-else-if="status !== 'initial-loading'"
+            :icon="data.empty?.image"
+            :text="data.empty?.text || '列表为空'"
+            :text-color="data.empty?.color || '#000'"
+        />
+    </view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2GoodsList @description CMS v2 商品楼层内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import Empty from '../../../snake-empty/snake-empty.vue';
+import ActivityList from '../../../snake-activity-list/snake-activity-list.vue';
+import FilterSorts from '../../../snake-filter-sorts/snake-filter-sorts.vue';
+import GoodsList from '../../../snake-goods-list/snake-goods-list.vue';
+import Loadmore from '../../../snake-loadmore/snake-loadmore.vue';
+import Sticky from '../../../snake-sticky/snake-sticky.vue';
+import type { CmsAssets, CmsStatus } from '../../../../libs/cms';
+import type { LoadmoreStatus } from '../../../snake-loadmore/types';
+const props = defineProps<{
+    data: Record<string, any>;
+    goodsList: Record<string, any>[];
+    tabsCurrent: number;
+    loadingStatus: LoadmoreStatus;
+    status: CmsStatus;
+    assets?: CmsAssets;
+    filtersData: Record<string, any>;
+    activityList: Record<string, any>[];
+    activityCurrent: string | number;
+    scrollTop: number;
+    stickyOffsetTop: number;
+    stickyCustomNavHeight: number;
+}>();
+defineEmits<{
+    'tab-change': [index: number, list: Record<string, any>[]];
+    'item-click': [item: Record<string, any>, index: number];
+    'offer-click': [item: Record<string, any>, index: number];
+    'activity-change': [item: Record<string, any>];
+    'filter-change': [params: Record<string, any>];
+}>();
+const tabs = computed(() => (Array.isArray(props.data.bars?.tabs?.list) ? props.data.bars.tabs.list : []));
+const showBars = computed(
+    () => (props.data.bars?.tabs?.enabled && tabs.value.length) || Boolean(props.data.bars?.filter)
+);
+const rootStyle = computed(() => ({ backgroundColor: props.data.style?.backgroundColor || '#f8f8f8' }));
+</script>
+<style scoped>
+.cms-v2-goods__tabs {
+    width: 100%;
+    white-space: nowrap;
+}
+.cms-v2-goods__tab {
+    display: inline-block;
+    padding: 20rpx 28rpx;
+    color: #606266;
+}
+.cms-v2-goods__tab--active {
+    color: var(--snake-color-primary, #06d290);
+    font-weight: 600;
+}
+.cms-v2-goods__filters {
+    width: 100%;
+    white-space: nowrap;
+}
+.cms-v2-goods__filters-inner {
+    display: inline-flex;
+    gap: 16rpx;
+    min-width: 100%;
+    padding: 16rpx 20rpx;
+    box-sizing: border-box;
+}
+.cms-v2-goods__filter-chip {
+    flex: 0 0 auto;
+    padding: 10rpx 24rpx;
+    border-radius: 999rpx;
+    background: rgba(0, 0, 0, 0.05);
+    font-size: 24rpx;
+    line-height: 32rpx;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-hotzone.vue

@@ -0,0 +1,41 @@
+<template>
+    <view class="cms-v2-hotzone">
+        <image class="cms-v2-hotzone__image" :src="data.image || ''" mode="widthFix" />
+        <view
+            v-for="(zone, index) in zones"
+            :key="zone.id ?? index"
+            class="cms-v2-hotzone__zone"
+            :style="zoneStyle(zone)"
+            @click="openV2Link(zone, linkService, pageInfo)"
+        />
+    </view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Hotzone @description CMS v2 热区图片内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import { openV2Link, type V2BlockProps, type V2Record } from './shared';
+const props = defineProps<V2BlockProps>();
+const zones = computed(() => (Array.isArray(props.data.zones) ? props.data.zones : []));
+const percent = (value: unknown) => `${Math.min(100, Math.max(0, Number(value) || 0))}%`;
+const zoneStyle = (zone: V2Record) => ({
+    top: percent(zone.top),
+    left: percent(zone.left),
+    width: percent(zone.width),
+    height: percent(zone.height)
+});
+</script>
+<style scoped>
+.cms-v2-hotzone {
+    position: relative;
+    width: 100%;
+    line-height: 0;
+}
+.cms-v2-hotzone__image {
+    display: block;
+    width: 100%;
+}
+.cms-v2-hotzone__zone {
+    position: absolute;
+    z-index: 1;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-images.vue

@@ -0,0 +1,41 @@
+<template>
+    <view class="cms-v2-images" :style="rootStyle">
+        <view class="cms-v2-images__grid" :style="gridStyle">
+            <image
+                v-for="(item, index) in items"
+                :key="item.id ?? index"
+                class="cms-v2-images__image"
+                :src="item.src || ''"
+                :mode="imageMode"
+                :style="imageStyle"
+                @click="openV2Link(item.link, linkService, pageInfo)"
+            />
+        </view>
+    </view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Images @description CMS v2 单列与网格图片内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import { blockStyle, openV2Link, rpx, type V2BlockProps } from './shared';
+const props = defineProps<V2BlockProps>();
+const items = computed(() => (Array.isArray(props.data.items) ? props.data.items : []));
+const rootStyle = computed(() => blockStyle(props.data.style));
+const imageMode = computed(() => (props.data.style?.heightMode === 'fixed' ? 'aspectFill' : 'widthFix'));
+const imageStyle = computed(() =>
+    props.data.style?.heightMode === 'fixed' ? { height: rpx(props.data.style?.height, 360) } : undefined
+);
+const gridStyle = computed(() => ({
+    gridTemplateColumns: `repeat(${props.data.layout?.mode === 'grid' ? Math.min(4, Math.max(1, Number(props.data.layout?.columns) || 2)) : 1}, minmax(0, 1fr))`,
+    gap: rpx(props.data.style?.gap)
+}));
+</script>
+<style scoped>
+.cms-v2-images__grid {
+    display: grid;
+    width: 100%;
+}
+.cms-v2-images__image {
+    display: block;
+    width: 100%;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-magiccube.vue

@@ -0,0 +1,93 @@
+<template>
+    <view class="cms-v2-magiccube" :style="rootStyle">
+        <view class="cms-v2-magiccube__grid" :style="gridStyle">
+            <image
+                v-for="(cell, index) in cells"
+                :key="index"
+                class="cms-v2-magiccube__cell"
+                :style="cellStyle(index)"
+                :src="activeImage(cell).src || ''"
+                mode="aspectFill"
+                @click="openV2Link(activeImage(cell).link, linkService, pageInfo)"
+            />
+        </view>
+    </view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Magiccube @description CMS v2 魔方布局与定时投放内部渲染器。 @see /cms/overview */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { blockStyle, openV2Link, rpx, type V2BlockProps, type V2Record } from './shared';
+const props = defineProps<V2BlockProps>();
+const now = ref(new Date());
+const slideIndex = ref(0);
+let scheduleTimer: ReturnType<typeof setInterval> | undefined;
+let slideTimer: ReturnType<typeof setInterval> | undefined;
+const layouts: Record<string, { template: string; columns: string; rows: string }> = {
+    grid2x2: { template: '"a b" "c d"', columns: '1fr 1fr', rows: '1fr 1fr' },
+    left1right2: { template: '"a b" "a c"', columns: '1fr 1fr', rows: '1fr 1fr' },
+    top1bottom2: { template: '"a a" "b c"', columns: '1fr 1fr', rows: '1fr 1fr' },
+    left1right3: { template: '"a b b" "a c d"', columns: '1fr 1fr 1fr', rows: '1fr 1fr' },
+    left2right1: { template: '"a c" "b c"', columns: '1fr 1fr', rows: '1fr 1fr' },
+    left3right1: { template: '"a a d" "b c d"', columns: '1fr 1fr 1fr', rows: '1fr 1fr' }
+};
+const cells = computed(() => (Array.isArray(props.data.cells) ? props.data.cells : []));
+const rootStyle = computed(() => ({ ...blockStyle(props.data.style), height: rpx(props.data.style?.height, 188) }));
+const gridStyle = computed(() => {
+    const layout = layouts[props.data.layout];
+    return layout
+        ? {
+              gridTemplateAreas: layout.template,
+              gridTemplateColumns: layout.columns,
+              gridTemplateRows: layout.rows,
+              gap: rpx(props.data.style?.gap)
+          }
+        : {
+              gridTemplateColumns: `repeat(${Math.min(6, Math.max(1, Number(props.data.columns) || 4))}, 1fr)`,
+              gap: rpx(props.data.style?.gap)
+          };
+});
+const cellStyle = (index: number) => ({
+    ...(props.data.layout === 'row' || !layouts[props.data.layout]
+        ? {}
+        : { gridArea: String.fromCharCode(97 + index) }),
+    borderRadius: rpx(props.data.style?.radius),
+    overflow: 'hidden'
+});
+function activeImage(cell: V2Record): V2Record {
+    const current = now.value;
+    const weekday = current.getDay() || 7;
+    const time = `${String(current.getHours()).padStart(2, '0')}:${String(current.getMinutes()).padStart(2, '0')}`;
+    const schedules = Array.isArray(cell.schedules) ? cell.schedules : [];
+    const active = schedules.filter(
+        (item: V2Record) =>
+            (!Array.isArray(item.weeks) || item.weeks.includes(weekday)) &&
+            (!item.startTime || item.startTime <= time) &&
+            (!item.endTime || item.endTime >= time)
+    );
+    return active.length ? active[slideIndex.value % active.length] : cell;
+}
+onMounted(() => {
+    scheduleTimer = setInterval(() => (now.value = new Date()), 30_000);
+    slideTimer = setInterval(
+        () => (slideIndex.value += 1),
+        Math.max(1000, Number(props.data.play?.interval || 3) * 1000)
+    );
+});
+onBeforeUnmount(() => {
+    clearInterval(scheduleTimer);
+    clearInterval(slideTimer);
+});
+</script>
+<style scoped>
+.cms-v2-magiccube__grid {
+    display: grid;
+    width: 100%;
+    height: 100%;
+}
+.cms-v2-magiccube__cell {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-notice.vue

@@ -0,0 +1,80 @@
+<template>
+    <view class="cms-v2-notice" :style="rootStyle" @click="handleClick">
+        <text v-if="data.isLeftIcon !== false" class="cms-v2-notice__icon">📢</text>
+        <swiper v-if="data.direction === 'column'" class="cms-v2-notice__swiper" vertical autoplay circular>
+            <swiper-item
+                v-for="(item, index) in items"
+                :key="index"
+                @click.stop="openV2Link(item.link, linkService, pageInfo)"
+            >
+                <text class="cms-v2-notice__text" :style="textStyle">{{ item.text }}</text>
+            </swiper-item>
+        </swiper>
+        <view v-else class="cms-v2-notice__row">
+            <view class="cms-v2-notice__marquee" :style="marqueeStyle">
+                <text class="cms-v2-notice__text">{{ data.noticeText }}</text>
+            </view>
+        </view>
+    </view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Notice @description CMS v2 公告内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import { openV2Link, rpx, type V2BlockProps } from './shared';
+const props = defineProps<V2BlockProps>();
+const items = computed(() => (Array.isArray(props.data.textList) ? props.data.textList : []));
+const rootStyle = computed(() => ({
+    height: rpx(props.data.style?.height, 72),
+    margin: `0 ${rpx(props.data.style?.pageMargin, 10)}`,
+    color: props.data.style?.textColor || '#2d57e7',
+    backgroundColor: props.data.style?.backgroundColor || '#eaf1ff'
+}));
+const marqueeStyle = computed(() => ({
+    animationDuration: `${Math.max(8, String(props.data.noticeText || '').length * 0.35)}s`,
+    lineHeight: rpx(props.data.style?.height, 72)
+}));
+const textStyle = computed(() => ({ lineHeight: rpx(props.data.style?.height, 72) }));
+const handleClick = () =>
+    props.data.direction === 'column' ? undefined : openV2Link(props.data.link, props.linkService, props.pageInfo);
+</script>
+<style scoped>
+.cms-v2-notice {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    overflow: hidden;
+    padding: 0 20rpx;
+}
+.cms-v2-notice__icon {
+    margin-right: 12rpx;
+}
+.cms-v2-notice__swiper,
+.cms-v2-notice__row {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+}
+.cms-v2-notice__text {
+    white-space: nowrap;
+}
+.cms-v2-notice__marquee {
+    display: inline-block;
+    min-width: 100%;
+    padding-left: 100%;
+    animation: cms-v2-notice-marquee 12s linear infinite;
+}
+@keyframes cms-v2-notice-marquee {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .cms-v2-notice__marquee {
+        padding-left: 0;
+        animation: none;
+    }
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-popup.vue

@@ -0,0 +1,46 @@
+<template>
+    <snake-popup
+        v-if="data.image"
+        v-model="show"
+        :mode="data.popupMode === 'center' ? 'center' : 'bottom'"
+        :bg-color="data.popupMode === 'center' ? 'transparent' : '#fff'"
+        safe-area-inset-bottom
+        close-on-click-overlay
+    >
+        <view class="cms-v2-popup">
+            <image class="cms-v2-popup__image" :src="data.image || ''" mode="widthFix" @click="handleImageClick" />
+            <view class="cms-v2-popup__close" @click="show = false">×</view>
+        </view>
+    </snake-popup>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Popup @description CMS v2 页面弹窗内部渲染器。 @see /cms/overview */
+import { ref } from 'vue';
+import Popup from '../../../snake-popup/snake-popup.vue';
+import { openV2Link, type V2BlockProps } from './shared';
+const props = defineProps<V2BlockProps>();
+const show = ref(true);
+const handleImageClick = async () => {
+    await openV2Link(props.data.link, props.linkService, props.pageInfo);
+    show.value = false;
+};
+</script>
+<style scoped>
+.cms-v2-popup {
+    position: relative;
+    width: 560rpx;
+    max-width: 100%;
+}
+.cms-v2-popup__image {
+    display: block;
+    width: 100%;
+}
+.cms-v2-popup__close {
+    position: absolute;
+    top: -70rpx;
+    right: 0;
+    color: #fff;
+    font-size: 60rpx;
+    line-height: 60rpx;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-richtext.vue

@@ -0,0 +1,18 @@
+<template>
+    <view class="cms-v2-richtext" :style="rootStyle"><rich-text :nodes="safeContent" /></view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Richtext @description CMS v2 富文本内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import { sanitizeRichText, type V2Record } from './shared';
+const props = defineProps<{ data: V2Record }>();
+const rootStyle = computed(() => ({ backgroundColor: props.data.style?.backgroundColor || '#fff' }));
+const safeContent = computed(() => sanitizeRichText(props.data.content));
+</script>
+<style scoped>
+.cms-v2-richtext {
+    box-sizing: border-box;
+    width: 100%;
+    overflow: hidden;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-search.vue

@@ -0,0 +1,115 @@
+<template>
+    <view class="cms-v2-search" :style="rootStyle">
+        <view class="cms-v2-search__box" :style="boxStyle" @click="handleBoxClick">
+            <text class="cms-v2-search__symbol">⌕</text>
+            <input
+                class="cms-v2-search__input"
+                :type="data.inputType === 'number' ? 'number' : 'text'"
+                :placeholder="placeholder"
+                :disabled="!data.isSearch"
+                :value="keyword"
+                @input="handleInput"
+                @click.stop
+                @confirm="submitSearch"
+            />
+            <image
+                v-if="data.rightImage?.show && data.rightImage?.src"
+                class="cms-v2-search__right"
+                :src="data.rightImage.src"
+                mode="aspectFit"
+                :style="rightImageStyle"
+                @click.stop="openV2Link(data.rightImage.link, linkService, pageInfo)"
+            />
+        </view>
+        <image
+            v-for="(icon, index) in icons"
+            :key="index"
+            class="cms-v2-search__icon"
+            :src="icon.src || ''"
+            mode="aspectFit"
+            :style="iconStyle(icon)"
+            @click="openV2Link(icon.link, linkService, pageInfo)"
+        />
+    </view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Search @description CMS v2 搜索框内部渲染器。 @see /cms/overview */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { openV2Link, rpx, type V2BlockProps } from './shared';
+const props = defineProps<V2BlockProps>();
+const icons = computed(() => (Array.isArray(props.data.icons) ? props.data.icons.slice(0, 2) : []));
+const hotwordIndex = ref(0);
+const hotwords = computed(() => (Array.isArray(props.data.textList) ? props.data.textList : []));
+const placeholder = computed(
+    () => hotwords.value[hotwordIndex.value]?.text || props.data.searchText || '请输入搜索内容'
+);
+const keyword = ref('');
+let hotwordTimer: ReturnType<typeof setInterval> | undefined;
+const rootStyle = computed(() => ({
+    padding: `0 ${rpx(props.data.style?.pageMargin)}`,
+    backgroundColor: props.data.style?.backgroundColor || '#f9f9f9'
+}));
+const boxStyle = computed(() => ({
+    height: rpx(props.data.style?.height, 60),
+    color: props.data.style?.textColor || '#969799',
+    backgroundColor: props.data.style?.borderBgColor || '#fff',
+    border:
+        props.data.style?.showBorder === false
+            ? 'none'
+            : `${rpx(props.data.style?.borderSize, 1)} solid ${props.data.style?.borderColor || '#000'}`,
+    borderRadius: rpx(props.data.style?.borderRadius)
+}));
+const rightImageStyle = computed(() => ({
+    width: rpx(props.data.rightImage?.width, 60),
+    height: rpx(props.data.rightImage?.height, 60),
+    borderRadius: rpx(props.data.rightImage?.borderRadius),
+    marginRight: rpx(props.data.rightImage?.marginRight)
+}));
+const iconStyle = (icon: Record<string, any>) => ({ width: rpx(icon.width, 60), height: rpx(icon.height, 60) });
+const handleInput = (event: any) => {
+    keyword.value = String(event?.detail?.value || '');
+};
+const handleBoxClick = () => {
+    if (!props.data.isSearch) return openV2Link(props.data.link, props.linkService, props.pageInfo);
+};
+const submitSearch = () => {
+    const hotword = hotwords.value[hotwordIndex.value];
+    const value = keyword.value.trim() || hotword?.text || '';
+    return openV2Link(hotword?.link || props.data.link, props.linkService, props.pageInfo, { keyword: value });
+};
+onMounted(() => {
+    hotwordTimer = setInterval(() => {
+        if (!keyword.value && hotwords.value.length > 1)
+            hotwordIndex.value = (hotwordIndex.value + 1) % hotwords.value.length;
+    }, 3000);
+});
+onBeforeUnmount(() => clearInterval(hotwordTimer));
+</script>
+<style scoped>
+.cms-v2-search {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    gap: 12rpx;
+    width: 100%;
+}
+.cms-v2-search__box {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    height: 100%;
+    padding: 0 16rpx;
+}
+.cms-v2-search__input {
+    flex: 1;
+    min-width: 0;
+}
+.cms-v2-search__symbol {
+    margin-right: 10rpx;
+    font-size: 32rpx;
+}
+.cms-v2-search__icon {
+    width: 60rpx;
+    height: 60rpx;
+}
+</style>

package/components/snake-cms/blocks/v2/cms-v2-video.vue

@@ -0,0 +1,25 @@
+<template>
+    <view class="cms-v2-video" :style="rootStyle">
+        <video
+            class="cms-v2-video__media"
+            :style="mediaStyle"
+            :src="data.src || ''"
+            :poster="data.coverUrl || ''"
+            :autoplay="!!data.autoplay"
+        />
+    </view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Video @description CMS v2 视频内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import { blockStyle, mediaHeightStyle, type V2Record } from './shared';
+const props = defineProps<{ data: V2Record }>();
+const rootStyle = computed(() => blockStyle(props.data.style));
+const mediaStyle = computed(() => mediaHeightStyle(props.data.style));
+</script>
+<style scoped>
+.cms-v2-video__media {
+    display: block;
+    width: 100%;
+}
+</style>