@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-checkbox/snake-checkbox.vue

@@ -0,0 +1,264 @@
+<template>
+    <view class="snake-checkbox" :style="[checkboxStyle, customStyle]" :class="customClass">
+        <view class="snake-checkbox__icon-wrap" @tap="toggle" :class="iconClass" :style="iconStyle">
+            <snake-icon name="checkmark" :size="checkboxIconSize" :color="iconColor" />
+        </view>
+        <view class="snake-checkbox__label" @tap="onClickLabel" :style="{ fontSize: labelFontSize }">
+            <slot>{{ label }}</slot>
+        </view>
+    </view>
+</template>
+<script setup lang="ts">
+/**
+ * @component Checkbox
+ * @description checkbox 复选框，可独立 v-model 使用，也可放入 CheckboxGroup 参与多选。
+ * @see /components/checkbox
+ */
+
+import { computed, inject } from 'vue';
+import { useParent } from '../../libs/hooks';
+import { addUnit } from '../../libs/function/unit';
+import { CHECKBOX_GROUP_KEY } from '../snake-checkbox-group/types';
+import { formKey } from '../snake-form/types';
+import Icon from '../snake-icon/snake-icon.vue';
+import { checkboxProps } from './types';
+import type { CheckboxEmits } from './types';
+
+defineOptions({
+    name: 'Checkbox',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+});
+
+const props = defineProps(checkboxProps);
+const emit = defineEmits<CheckboxEmits>();
+// 使用组件关系 hooks 获取父组件
+const { parent: checkboxGroup } = useParent(CHECKBOX_GROUP_KEY);
+const form = inject(formKey, null);
+
+// checkbox 的数据项标识符
+const checkboxValue = computed(() => props.name);
+
+// group 绑定了 modelValue 时由 group 托管选中态（单一数据源），否则回落子项自身 v-model
+const groupManaged = computed(() => checkboxGroup.value !== null && checkboxGroup.value.props.modelValue !== undefined);
+
+// 是否选中：托管模式从 group 的 modelValue 派生，独立模式读自身 v-model
+const isChecked = computed(() => {
+    if (groupManaged.value) {
+        return (checkboxGroup.value?.props.modelValue ?? []).includes(checkboxValue.value);
+    }
+    return !!props.modelValue;
+});
+
+// 根据 size 定义不同的配置
+const sizeConfig = {
+    small: { size: 28, fontSize: 24, iconSize: 16 },
+    default: { size: 34, fontSize: 28, iconSize: 20 },
+    large: { size: 40, fontSize: 32, iconSize: 24 }
+};
+
+// 获取实际使用的 size 值（优先级：props.size > snake-checkbox-group.size > snake-form.size）
+const actualSize = computed(() => {
+    if (props.size !== '') return String(props.size);
+    if (checkboxGroup.value?.props.size) return String(checkboxGroup.value.props.size);
+    if (form?.size.value) return String(form.size.value);
+    return 'default';
+});
+
+// 判断实际使用的 size 是否在预设配置中
+const isInSizeConfig = computed(() => actualSize.value in sizeConfig);
+
+// 获取预设 size（用于查找 sizeConfig 配置，如图标大小、高度等）
+const presetSize = computed(() => {
+    return (isInSizeConfig.value ? actualSize.value : 'default') as 'small' | 'default' | 'large';
+});
+
+// 获取当前尺寸配置
+const currentSizeConfig = computed(() => sizeConfig[presetSize.value]);
+
+// 是否禁用，如果父组件 snake-checkbox-group 禁用的话，将会忽略子组件的配置
+const isDisabled = computed(() => {
+    return props.disabled !== '' ? props.disabled : (checkboxGroup.value?.props.disabled ?? false);
+});
+
+// 是否禁用 label 点击
+const isLabelDisabled = computed(() => {
+    return props.labelDisabled !== '' ? props.labelDisabled : (checkboxGroup.value?.props.labelDisabled ?? false);
+});
+
+// 组件尺寸，对应 size 的值，默认值为 34rpx
+const checkboxSize = computed(() => currentSizeConfig.value.size);
+
+// 组件的勾选图标的尺寸，默认 20rpx
+const checkboxIconSize = computed(() => {
+    if (props.iconSize) return props.iconSize;
+    if (checkboxGroup.value?.props.iconSize) return checkboxGroup.value.props.iconSize;
+    if (isInSizeConfig.value) return currentSizeConfig.value.iconSize;
+    return 20;
+});
+
+// label 字体大小，默认 28rpx
+const labelFontSize = computed(() => {
+    if (isInSizeConfig.value) return addUnit(currentSizeConfig.value.fontSize, 'rpx');
+    return props.labelSize ? addUnit(props.labelSize, 'rpx') : '';
+});
+
+// 组件选中激活时的颜色
+const elActiveColor = computed(() => {
+    return props.activeColor
+        ? props.activeColor
+        : (checkboxGroup.value?.props.activeColor ?? 'var(--snake-color-primary, #06D290)');
+});
+
+// 组件的形状
+const elShape = computed(() => {
+    return props.shape ? props.shape : (checkboxGroup.value?.props.shape ?? 'square');
+});
+
+// 图标样式
+const iconStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (elActiveColor.value && isChecked.value && !isDisabled.value) {
+        style.borderColor = elActiveColor.value;
+        style.backgroundColor = elActiveColor.value;
+    }
+    style.width = addUnit(checkboxSize.value, 'rpx');
+    style.height = addUnit(checkboxSize.value, 'rpx');
+    return style;
+});
+
+// checkbox 内部的勾选图标，如果选中状态，为白色，否则为透明色即可
+const iconColor = computed(() => {
+    return isChecked.value ? '#fff' : 'transparent';
+});
+
+const iconClass = computed(() => {
+    const classes: string[] = [];
+    classes.push(`snake-checkbox__icon-wrap--${elShape.value}`);
+    if (isChecked.value) classes.push('snake-checkbox__icon-wrap--checked');
+    if (isDisabled.value) classes.push('snake-checkbox__icon-wrap--disabled');
+    if (isChecked.value && isDisabled.value) classes.push('snake-checkbox__icon-wrap--disabled--checked');
+    return classes.join(' ');
+});
+
+const checkboxStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (checkboxGroup.value?.props.width) {
+        style.width = checkboxGroup.value.props.width;
+        // #ifdef MP
+        // 各家小程序因为它们特殊的编译结构，使用 float 布局
+        style.float = 'left';
+        // #endif
+        // #ifndef MP
+        // H5 和 APP 使用 flex 布局
+        style.flex = `0 0 ${checkboxGroup.value.props.width}`;
+        // #endif
+    }
+    if (checkboxGroup.value?.props.wrap) {
+        style.width = '100%';
+        // #ifndef MP
+        // H5 和 APP 使用 flex 布局，将宽度设置 100%，即可自动换行
+        style.flex = '0 0 100%';
+        // #endif
+    }
+    return style;
+});
+
+/**
+ * 点击 label
+ */
+function onClickLabel() {
+    if (!isLabelDisabled.value && !isDisabled.value) {
+        setValue();
+    }
+}
+
+/**
+ * 点击 icon
+ */
+function toggle() {
+    if (!isDisabled.value) {
+        setValue();
+    }
+}
+
+/**
+ * 点击切换选中态：托管模式交给 group 统一判定（max 校验与事件派发），独立模式更新自身 v-model
+ */
+function setValue() {
+    if (groupManaged.value) {
+        checkboxGroup.value?.toggleSelect(checkboxValue.value);
+        return;
+    }
+    const next = !isChecked.value;
+    emit('update:modelValue', next);
+    emit('change', next);
+}
+
+defineExpose({
+    isChecked,
+    isDisabled,
+    value: checkboxValue,
+    props
+});
+</script>
+<style scoped>
+.snake-checkbox {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+    line-height: 1.8;
+}
+.snake-checkbox__icon-wrap {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 42rpx;
+    height: 42rpx;
+    color: transparent;
+    text-align: center;
+    transition-property: color, border-color, background-color;
+    font-size: 20px;
+    border: 1px solid var(--snake-color-border, #dcdfe6);
+    transition-duration: 0.2s;
+    /* #ifdef MP-TOUTIAO */
+    /* 头条小程序兼容性问题，需要设置行高为 0，否则图标偏下 */
+    line-height: 0;
+    /* #endif */
+}
+.snake-checkbox__icon-wrap--circle {
+    border-radius: 100%;
+}
+.snake-checkbox__icon-wrap--square {
+    border-radius: 6rpx;
+}
+.snake-checkbox__icon-wrap--checked {
+    color: #fff;
+    background-color: var(--snake-color-primary, #06d290);
+    border-color: var(--snake-color-primary, #06d290);
+}
+.snake-checkbox__icon-wrap--disabled {
+    background-color: var(--snake-color-disabled-bg, #f1f1f1);
+    border-color: var(--snake-color-border, #dcdfe6);
+}
+.snake-checkbox__icon-wrap--disabled--checked {
+    color: var(--snake-color-disabled-bg, #f1f1f1) !important;
+}
+.snake-checkbox__label {
+    word-wrap: break-word;
+    margin-left: 10rpx;
+    margin-right: 24rpx;
+    color: var(--snake-color-text, #303133);
+    font-size: 30rpx;
+}
+</style>

package/components/snake-checkbox/types.ts

@@ -0,0 +1,70 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** checkboxProps 运行时属性及默认值。 */
+export const checkboxProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: () => ({}) },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 展示标签文本。 */
+    label: { type: String, default: '' },
+    /** 数据项名称或唯一标识。 */
+    name: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 组件形状，square 为方形，circle 为圆形。 */
+    shape: { type: String as PropType<'square' | 'circle'>, default: '' },
+    /** 是否选中，支持 v-model。 */
+    modelValue: { type: Boolean, default: false },
+    /** 是否禁用。 */
+    disabled: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
+    /** 是否禁止点击标签选中。 */
+    labelDisabled: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
+    /** 选中状态下的颜色，设置后将覆盖父级 activeColor。 */
+    activeColor: { type: String, default: '' },
+    /** 勾选图标的大小，单位 rpx。 */
+    iconSize: { type: [String, Number] as PropType<UnitValue>, default: '' },
+    /** 标签文字大小，单位 rpx。 */
+    labelSize: { type: [String, Number] as PropType<UnitValue>, default: '' },
+    /** 组件整体大小，small/default/large 或自定义数值。 */
+    size: { type: [String, Number] as PropType<string | number>, default: '' }
+} as const;
+
+/** CheckboxResolved 组件的公开属性。 */
+export type CheckboxResolvedProps = ExtractPropTypes<typeof checkboxProps>;
+
+/** Checkbox 组件的公开属性。 */
+export interface CheckboxProps {
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 展示标签文本。 */
+    label?: string;
+    /** 数据项名称或唯一标识。 */
+    name?: string | number;
+    /** 组件形状，square 为方形，circle 为圆形。 */
+    shape?: 'square' | 'circle';
+    /** 是否选中，支持 v-model。 */
+    modelValue?: boolean;
+    /** 是否禁用。 */
+    disabled?: string | boolean;
+    /** 是否禁止点击标签选中。 */
+    labelDisabled?: string | boolean;
+    /** 选中状态下的颜色，设置后将覆盖父级 activeColor。 */
+    activeColor?: string;
+    /** 勾选图标的大小，单位 rpx。 */
+    iconSize?: UnitValue;
+    /** 标签文字大小，单位 rpx。 */
+    labelSize?: UnitValue;
+    /** 组件整体大小，small/default/large 或自定义数值。 */
+    size?: string | number;
+}
+
+/** Checkbox 组件的事件契约。 */
+export type CheckboxEmits = {
+    /** 选中状态变化时触发。 */
+    'update:modelValue': [value: boolean];
+    /** 选中状态变化时触发，携带变化后的新状态。 */
+    change: [value: boolean];
+};

package/components/snake-checkbox-group/snake-checkbox-group.vue

@@ -0,0 +1,154 @@
+<template>
+    <view class="snake-checkbox-group snake-checkbox-group--clearfix" :style="customStyle" :class="customClass">
+        <slot />
+    </view>
+</template>
+<script setup lang="ts">
+/**
+ * @component CheckboxGroup
+ * @description checkbox 父组件，管理一组 Checkbox 的数组值、最大选择数与布局。
+ * @see /components/checkbox
+ */
+
+import { computed, inject } from 'vue';
+import { useChildren } from '../../libs/hooks';
+import { formItemKey } from '../snake-form-item/types';
+import {
+    CHECKBOX_GROUP_KEY,
+    type CheckboxGroupContext,
+    type CheckboxGroupEmits,
+    type CheckboxGroupProps
+} from './types';
+
+/** Checkbox 子项在公开代理上的形态（defineExpose 暴露的 ref 已被解包）。 */
+interface CheckboxChild {
+    isChecked: boolean;
+    isDisabled: boolean;
+    value: string | number;
+}
+
+defineOptions({
+    name: 'CheckboxGroup',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+});
+
+const props = withDefaults(defineProps<CheckboxGroupProps>(), {
+    customStyle: '',
+    customClass: '',
+    max: 999,
+    disabled: false,
+    name: '',
+    labelDisabled: false,
+    shape: 'square',
+    activeColor: 'var(--snake-color-primary, #06D290)',
+    size: '',
+    width: 'auto',
+    wrap: false,
+    iconSize: ''
+});
+
+const emit = defineEmits<CheckboxGroupEmits>();
+const formItem = inject(formItemKey, null);
+
+// 使用组件关系 hooks 收集子 checkbox（自动注册 / 按 vnode 序排列），
+// 选中态以 modelValue 为单一数据源，子项仅派生展示
+const { children, linkChildren } = useChildren<CheckboxChild, CheckboxGroupContext>(CHECKBOX_GROUP_KEY);
+
+const selectedValues = computed<(string | number)[]>(() => props.modelValue ?? []);
+
+/**
+ * 子项点击入口：在 modelValue 上增删自身值，统一做 max 校验与事件派发
+ */
+function toggleSelect(value: string | number) {
+    if (props.disabled) return;
+    let next: (string | number)[];
+    if (selectedValues.value.includes(value)) {
+        next = selectedValues.value.filter(item => item !== value);
+    } else {
+        if (props.max && selectedValues.value.length >= props.max) {
+            uni.showToast({ title: `超过最大选择数量: ${props.max}`, icon: 'none' });
+            return;
+        }
+        next = [...selectedValues.value, value];
+    }
+    emit('update:modelValue', next);
+    emit('change', next);
+    // 通知 snake-form-item 进行校验
+    void formItem?.notify('change');
+}
+
+/**
+ * 全选/全不选方法（禁用子项保持原状态）
+ */
+function setAllChecked(checked: boolean) {
+    if (props.disabled) {
+        console.warn('snake-checkbox-group 已禁用，无法操作');
+        return;
+    }
+    const enabledValues = children.filter(child => !child.isDisabled).map(child => child.value);
+    const next = checked ? enabledValues : selectedValues.value.filter(value => !enabledValues.includes(value));
+    emit('update:modelValue', next);
+    emit('change', next);
+    void formItem?.notify('change');
+}
+
+/**
+ * 获取选中的值
+ */
+function getSelectedValues() {
+    return [...selectedValues.value];
+}
+
+/**
+ * 验证选择是否超过最大数量
+ */
+function validateSelection() {
+    if (props.max && selectedValues.value.length >= props.max) {
+        uni.showToast({ title: `超过最大选择数量: ${props.max}`, icon: 'none' });
+        return false;
+    }
+    return true;
+}
+
+// 向子 checkbox 提供上下文（props 实时联动 + 选中值增删入口）
+linkChildren({ props, toggleSelect });
+
+// 使用 defineExpose 暴露给外部
+defineExpose({
+    // props
+    props,
+
+    // 方法
+    setAllChecked,
+    getSelectedValues,
+    validateSelection,
+
+    // 计算属性
+    selectedCount: computed(() => selectedValues.value.length),
+    isFull: computed(() => Boolean(props.max) && selectedValues.value.length >= props.max),
+    isEmpty: computed(() => selectedValues.value.length === 0),
+    // 工具方法
+    getChildrenCount: () => children.length
+});
+</script>
+<style scoped>
+.snake-checkbox-group {
+    /* #ifndef MP || APP-NVUE */
+    display: inline-flex;
+    flex-wrap: wrap;
+    /* #endif */
+}
+/* MP 下子项以 float 布局时，容器需要清除浮动 */
+.snake-checkbox-group--clearfix::after {
+    content: '';
+    display: block;
+    overflow: hidden;
+    clear: both;
+}
+</style>

package/components/snake-checkbox-group/types.ts

@@ -0,0 +1,52 @@
+import type { InjectionKey } from 'vue';
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** CheckboxGroup 组件的公开属性。 */
+export interface CheckboxGroupProps {
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 绑定值，选中的 checkbox name 组成的数组，支持 v-model。 */
+    modelValue?: (string | number)[];
+    /** 最多能选中多少个 checkbox。 */
+    max?: number;
+    /** 是否禁用所有 checkbox。 */
+    disabled?: boolean;
+    /** 在表单内提交时的标识符。 */
+    name?: boolean | string;
+    /** 是否禁止点击标签选中。 */
+    labelDisabled?: boolean;
+    /** 组件形状，square 为方形，circle 为圆形。 */
+    shape?: 'square' | 'circle';
+    /** 选中状态下的颜色，应用到所有子 checkbox。 */
+    activeColor?: string;
+    /** 组件整体大小，small/default/large 或自定义数值。 */
+    size?: string | number;
+    /** 每个 checkbox 占 snake-checkbox-group 的宽度，需带单位。 */
+    width?: string;
+    /** 是否每个 checkbox 都换行。 */
+    wrap?: boolean;
+    /** 勾选图标的大小，单位 rpx。 */
+    iconSize?: UnitValue;
+}
+
+/** CheckboxGroup 组件的事件契约。 */
+export type CheckboxGroupEmits = {
+    /** 更新当前选中值数组。 */
+    'update:modelValue': [value: (string | number)[]];
+    /** 任一个 checkbox 状态发生变化时触发，回调为选中的 name 数组。 */
+    change: [value: (string | number)[]];
+};
+
+/** CheckboxGroup 向子 checkbox 提供的配对上下文（useChildren / useParent 通道）。 */
+export interface CheckboxGroupContext {
+    /** 父组件的响应式 props 对象，子项直接读取即可保持联动。 */
+    props: CheckboxGroupProps;
+    /** 子项点击入口：在 modelValue 上增删自身值，max 校验与事件派发由 group 统一处理。 */
+    toggleSelect(value: string | number): void;
+}
+
+/** CheckboxGroup ↔ Checkbox 配对注入键。 */
+export const CHECKBOX_GROUP_KEY: InjectionKey<CheckboxGroupContext> = Symbol('snake-checkbox-group');

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

@@ -0,0 +1,87 @@
+<template>
+    <view class="cms-v2-carousel" :style="rootStyle">
+        <swiper
+            class="cms-v2-carousel__swiper"
+            :style="mediaStyle"
+            :autoplay="data.play?.autoplay !== false"
+            :interval="interval"
+            :circular="data.play?.loop !== false"
+            :indicator-dots="indicatorType === 'bullets'"
+            indicator-color="rgba(255, 255, 255, 0.55)"
+            :indicator-active-color="data.indicator?.color || '#1989fa'"
+            @change="current = $event.detail.current"
+        >
+            <swiper-item v-for="(item, index) in items" :key="item.id ?? index">
+                <image
+                    class="cms-v2-carousel__image"
+                    :src="item.src || ''"
+                    mode="aspectFill"
+                    @click="openV2Link(item.link, linkService, pageInfo)"
+                />
+            </swiper-item>
+        </swiper>
+        <view v-if="indicatorType === 'fraction' && items.length" class="cms-v2-carousel__fraction">
+            {{ current + 1 }}/{{ items.length }}
+        </view>
+        <view v-if="indicatorType === 'progressbar' && items.length" class="cms-v2-carousel__progress">
+            <view class="cms-v2-carousel__progress-fill" :style="progressStyle" />
+        </view>
+    </view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Carousel @description CMS v2 图片轮播内部渲染器。 @see /cms/overview */
+import { computed, ref } from 'vue';
+import {
+    blockStyle,
+    carouselIndicatorType,
+    carouselProgress,
+    mediaHeightStyle,
+    openV2Link,
+    type V2BlockProps
+} from './shared';
+const props = defineProps<V2BlockProps>();
+const current = ref(0);
+const items = computed(() => (Array.isArray(props.data.items) ? props.data.items : []));
+const interval = computed(() => Math.max(1000, Number(props.data.play?.interval || 3) * 1000));
+const indicatorType = computed(() => carouselIndicatorType(props.data));
+const progressStyle = computed(() => ({
+    width: `${carouselProgress(current.value, items.value.length)}%`,
+    backgroundColor: props.data.indicator?.color || '#1989fa'
+}));
+const rootStyle = computed(() => blockStyle(props.data.style));
+const mediaStyle = computed(() => mediaHeightStyle(props.data.style));
+</script>
+<style scoped>
+.cms-v2-carousel {
+    position: relative;
+}
+.cms-v2-carousel__swiper {
+    width: 100%;
+}
+.cms-v2-carousel__image {
+    width: 100%;
+    height: 100%;
+}
+.cms-v2-carousel__fraction {
+    position: absolute;
+    right: 20rpx;
+    bottom: 16rpx;
+    padding: 4rpx 12rpx;
+    color: #fff;
+    font-size: 22rpx;
+    background: rgba(0, 0, 0, 0.45);
+    border-radius: 20rpx;
+}
+.cms-v2-carousel__progress {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 6rpx;
+    overflow: hidden;
+    background-color: #eee;
+}
+.cms-v2-carousel__progress-fill {
+    height: 100%;
+}
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+    <snake-coupon
+        :datas="legacyData"
+        :coupon-service="couponService"
+        :link-service="linkService"
+        :page-info="pageInfo"
+        @error="$emit('error', $event)"
+        @received="$emit('received')"
+    />
+</template>
+<script setup lang="ts">
+/** @component CmsV2Coupon @description CMS v2 优惠券协议内部渲染器。 @see /cms/overview */
+import { computed } from 'vue';
+import Coupon from '../../../snake-coupon/snake-coupon.vue';
+import type { CmsCouponService, CmsError, CmsLinkService, CmsPageInfo } from '../../../../libs/cms';
+import { v2CouponLegacyData } from './shared';
+const props = defineProps<{
+    data: Record<string, any>;
+    couponService?: CmsCouponService;
+    linkService?: CmsLinkService;
+    pageInfo?: CmsPageInfo;
+}>();
+defineEmits<{ error: [error: CmsError]; received: [] }>();
+const legacyData = computed(() => v2CouponLegacyData(props.data));
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+    <view class="cms-v2-custom"><slot /></view>
+</template>
+<script setup lang="ts">
+/** @component CmsV2Custom @description CMS v2 自定义插槽内部渲染器。 @see /cms/overview */
+defineProps<{ data: Record<string, any> }>();
+</script>
+<style scoped>
+.cms-v2-custom {
+    width: 100%;
+}
+</style>