@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-jump-applet/snake-jump-applet.vue

@@ -0,0 +1,99 @@
+<template>
+    <view>
+        <view class="jumpApplet" v-if="datas.isButton">
+            <button
+                class="jumpAppletBtn"
+                :style="{ color: datas.textColor, backgroundColor: datas.btnColor }"
+                @click="jump"
+            >
+                {{ datas.title }}
+            </button>
+        </view>
+        <image v-else :src="datas.imageUrl" mode="widthFix" @click="jump"></image>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component JumpApplet
+ * @description 通过按钮或图片触发小程序、H5 URL Scheme 或企业微信承接页跳转。
+ */
+
+import { computed, onMounted } from 'vue';
+import { resolveCmsOptions } from '../../libs/cms';
+import { toast } from '../../libs/function/toast';
+import { CmsError, type CmsLinkAction } from '../snake-cms/types';
+import type { JumpAppletEmits, JumpAppletProps } from './types';
+
+defineOptions({ name: 'JumpApplet', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<JumpAppletProps>(), {
+    datas: () => ({}),
+    linkService: undefined,
+    pageInfo: () => ({})
+});
+const emit = defineEmits<JumpAppletEmits>();
+const service = computed(() => props.linkService || resolveCmsOptions().services?.link);
+
+async function jump(): Promise<void> {
+    if (!props.datas.path) {
+        toast('缺少跳转页面路径');
+        return;
+    }
+    if (!props.datas.isWeCom && !props.datas.appId) {
+        toast('缺少 appId');
+        return;
+    }
+    if (!service.value) {
+        const error = new CmsError('link', '未配置 CMS 跳转服务');
+        emit('error', error);
+        toast(error.message);
+        return;
+    }
+    let action: CmsLinkAction;
+    if (props.datas.isWeCom) {
+        action = { type: 'external', url: props.datas.path };
+    } else {
+        action = {
+            type: 'mini-program',
+            appId: props.datas.appId,
+            path: `${props.datas.path}${props.datas.query || ''}`,
+            extraData: props.datas.extraData || {},
+            envVersion: props.datas.envVersion
+        };
+        // #ifdef H5
+        action = {
+            type: 'scheme',
+            appId: props.datas.appId,
+            path: props.datas.path,
+            query: props.datas.query
+        };
+        // #endif
+    }
+    try {
+        await service.value.open(action, { pageInfo: props.pageInfo });
+    } catch (cause) {
+        const error = new CmsError('link', '页面跳转失败', cause);
+        emit('error', error);
+        toast(error.message);
+    }
+}
+
+onMounted(() => {
+    if (props.datas.isAuto) void jump();
+});
+</script>
+
+<style lang="scss" scoped>
+.jumpApplet {
+    margin: 10rpx 40rpx;
+}
+
+.jumpAppletBtn {
+    cursor: pointer;
+
+    &::after {
+        border: none;
+    }
+}
+</style>

package/components/snake-jump-applet/types.ts

@@ -0,0 +1,17 @@
+import type { CmsError, CmsLinkService, CmsPageInfo } from '../snake-cms/types';
+
+/** JumpApplet 组件的公开属性。 */
+export interface JumpAppletProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+    /** link service 配置。 */
+    linkService?: CmsLinkService;
+    /** CMS 页面上下文信息。 */
+    pageInfo?: CmsPageInfo;
+}
+
+/** JumpApplet 组件的事件契约。 */
+export type JumpAppletEmits = {
+    /** error 事件携带的参数。 */
+    error: [error: CmsError];
+};

package/components/snake-line/snake-line.vue

@@ -0,0 +1,42 @@
+<template>
+    <view class="snake-line" :class="customClass" :style="[lineStyle, customStyle]" />
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Line
+ * @description 分隔线条，支持横向与竖向两种方向、半像素细线以及虚线样式，常用于分隔内容块。
+ * @see /components/line
+ */
+
+import { computed } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { lineProps } from './types';
+
+defineOptions({ name: 'SnakeLine', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = defineProps(lineProps);
+
+/** 线条样式，以 1px 边框加缩放实现跨端一致的半像素细线。 */
+const lineStyle = computed(() => {
+    const style: Record<string, string> = { margin: props.margin };
+    if (props.direction === 'row') {
+        style.borderBottomWidth = '1px';
+        style.borderBottomStyle = props.borderStyle;
+        style.width = addUnit(props.length);
+        if (props.hairLine) style.transform = 'scaleY(0.5)';
+    } else {
+        style.borderLeftWidth = '1px';
+        style.borderLeftStyle = props.borderStyle;
+        style.height = addUnit(props.length);
+        if (props.hairLine) style.transform = 'scaleX(0.5)';
+    }
+    style.borderColor = props.color;
+    return style;
+});
+</script>
+
+<style scoped>
+.snake-line {
+    vertical-align: middle;
+}
+</style>

package/components/snake-line/types.ts

@@ -0,0 +1,30 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../../types/global';
+
+/** LineDirection 类型定义。 */
+export type LineDirection = 'row' | 'col';
+/** LineBorderStyle 类型定义。 */
+export type LineBorderStyle = 'solid' | 'dashed' | 'dotted';
+
+/** lineProps 运行时属性及默认值。 */
+export const lineProps = {
+    /** 线条颜色。 */
+    color: { type: String, default: 'var(--snake-color-border, #e4e7ed)' },
+    /** 长度，竖向表现为高度，横向表现为长度，可为百分比或带 rpx 单位的值。 */
+    length: { type: String, default: '100%' },
+    /** 线条方向，row 横向，col 竖向。 */
+    direction: { type: String as PropType<LineDirection>, default: 'row' },
+    /** 是否显示半像素细线条。 */
+    hairLine: { type: Boolean, default: true },
+    /** 线条与上下左右元素的间距，字符串形式，如 "30rpx"、"20rpx 30rpx"。 */
+    margin: { type: String, default: '0' },
+    /** 线条类型，solid 实线，dashed 方形虚线，dotted 圆点虚线。 */
+    borderStyle: { type: String as PropType<LineBorderStyle>, default: 'solid' },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: '' }
+} as const;
+
+/** Line 组件的公开属性。 */
+export type LineProps = ExtractPropTypes<typeof lineProps>;

package/components/snake-line-progress/snake-line-progress.vue

@@ -0,0 +1,105 @@
+<template>
+    <view
+        class="snake-line-progress"
+        :style="{ borderRadius: round ? '100rpx' : '0', height: `${height}rpx`, backgroundColor: inactiveColor }"
+    >
+        <view
+            :class="[
+                type ? `snake-line-progress__active--${type}` : '',
+                striped ? 'snake-line-progress__active--striped' : '',
+                striped && stripedActive ? 'snake-line-progress__active--striped-active' : ''
+            ]"
+            class="snake-line-progress__active"
+            :style="progressStyle"
+        >
+            <slot v-if="slots.default" />
+            <text class="snake-line-progress__percent" v-else-if="showPercent">{{ percent }}%</text>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component LineProgress
+ * @description 线形进度条，用于展示操作或任务的当前进度，支持主题色预设、条纹与百分比展示。
+ * @see /components/line-progress
+ */
+
+import { computed, useSlots } from 'vue';
+import { lineProgressProps } from './types';
+
+defineOptions({ name: 'LineProgress', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = defineProps(lineProgressProps);
+const slots = useSlots();
+
+/** 激活部分的宽度与颜色，主题预设优先于 activeColor。 */
+const progressStyle = computed(() => {
+    const style: Record<string, string> = {};
+    style.width = `${props.percent}%`;
+    if (!props.type && props.activeColor) style.backgroundColor = props.activeColor;
+    return style;
+});
+</script>
+
+<style scoped>
+.snake-line-progress {
+    display: inline-flex;
+    overflow: hidden;
+    align-items: center;
+    width: 100%;
+    border-radius: 100rpx;
+}
+.snake-line-progress__active {
+    display: flex;
+    width: 0;
+    height: 100%;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 20rpx;
+    color: var(--snake-color-white, #fff);
+    transition: all 0.4s ease;
+}
+.snake-line-progress__active--primary {
+    background-color: var(--snake-color-primary, #06d290);
+}
+.snake-line-progress__active--success {
+    background-color: var(--snake-color-success, #19be6b);
+}
+.snake-line-progress__active--warning {
+    background-color: var(--snake-color-warning, #ff9900);
+}
+.snake-line-progress__active--error {
+    background-color: var(--snake-color-error, #fa3534);
+}
+.snake-line-progress__active--info {
+    background-color: var(--snake-color-info, #909399);
+}
+.snake-line-progress__active--striped {
+    background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+    );
+    background-size: 39px 39px;
+}
+.snake-line-progress__active--striped-active {
+    animation: snake-line-progress-stripes 2s linear infinite;
+}
+.snake-line-progress__percent {
+    padding: 0 10rpx;
+    color: var(--snake-color-text-light, #c0c4cc);
+}
+@keyframes snake-line-progress-stripes {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 39px 0;
+    }
+}
+</style>

package/components/snake-line-progress/types.ts

@@ -0,0 +1,26 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/** lineProgressProps 运行时属性及默认值。 */
+export const lineProgressProps = {
+    /** 进度条两端是否显示半圆形。 */
+    round: { type: Boolean, default: true },
+    /** 主题颜色，如设置则 activeColor 失效，可选 primary/success/warning/error/info。 */
+    type: { type: String, default: '' },
+    /** 激活部分的颜色。 */
+    activeColor: { type: String, default: 'var(--snake-color-success, #19be6b)' },
+    /** 进度条的底色。 */
+    inactiveColor: { type: String, default: 'var(--snake-color-divider, #e4e7ed)' },
+    /** 进度百分比，数值 0-100。 */
+    percent: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否在进度条内部显示百分比的值。 */
+    showPercent: { type: Boolean, default: true },
+    /** 进度条的高度，数值按 rpx 处理。 */
+    height: { type: [Number, String] as PropType<number | string>, default: 28 },
+    /** 是否显示激活部分的条纹。 */
+    striped: { type: Boolean, default: false },
+    /** 条纹是否具有动态效果。 */
+    stripedActive: { type: Boolean, default: false }
+} as const;
+
+/** LineProgress 组件的公开属性。 */
+export type LineProgressProps = ExtractPropTypes<typeof lineProgressProps>;

package/components/snake-link/snake-link.vue

@@ -0,0 +1,74 @@
+<template>
+    <text
+        class="snake-link"
+        :style="{
+            color: color,
+            fontSize: `${fontSize}rpx`,
+            borderBottom: underLine ? `1px solid ${lineColor || color}` : 'none',
+            paddingBottom: underLine ? '0rpx' : '0'
+        }"
+        @click.stop="openLink"
+    >
+        <!-- #ifdef MP-TOUTIAO -->
+        {{ text }}
+        <!-- #endif -->
+        <!-- #ifndef MP-TOUTIAO -->
+        <slot>{{ text }}</slot>
+        <!-- #endif -->
+    </text>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Link
+ * @description 超链接，不同平台有不同表现形式：App 通过内置浏览器打开，小程序复制链接到粘贴板并提示，H5 使用 window.open。
+ * @see /components/link
+ */
+
+import { computed } from 'vue';
+import { toast } from '../../libs/function/toast';
+import { useLocale } from '../../libs/hooks/useLocale';
+import { linkProps, type LinkEmits } from './types';
+
+defineOptions({ name: 'SnakeLink', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = defineProps(linkProps);
+const emit = defineEmits<LinkEmits>();
+const { t } = useLocale('link');
+
+const mpTipsValue = computed(() => props.mpTips || t('mpTips'));
+
+/** 打开链接，不同平台有不同表现形式。 */
+function openLink() {
+    if (!props.defaultClick) {
+        emit('click', props.href);
+        return;
+    }
+    // #ifdef APP-PLUS
+    if (typeof plus !== 'undefined' && plus.runtime) {
+        plus.runtime.openURL(props.href);
+    }
+    // #endif
+    // #ifdef H5
+    if (typeof window !== 'undefined') {
+        window.open(props.href);
+    }
+    // #endif
+    // #ifdef MP
+    if (typeof uni !== 'undefined' && uni.setClipboardData) {
+        uni.setClipboardData({
+            data: props.href,
+            success: () => {
+                uni.hideToast();
+                toast(mpTipsValue.value);
+            }
+        });
+    }
+    // #endif
+}
+</script>
+
+<style scoped>
+.snake-link {
+    line-height: 1;
+}
+</style>

package/components/snake-link/types.ts

@@ -0,0 +1,30 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/** linkProps 运行时属性及默认值。 */
+export const linkProps = {
+    /** 超链接文字。 */
+    text: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 文字颜色。 */
+    color: { type: String, default: 'var(--snake-color-primary, #06D290)' },
+    /** 字体大小，数值按 rpx 处理。 */
+    fontSize: { type: [String, Number] as PropType<string | number>, default: 28 },
+    /** 是否显示下划线。 */
+    underLine: { type: Boolean, default: false },
+    /** 要跳转的链接。 */
+    href: { type: String, default: '' },
+    /** 小程序中复制到粘贴板后的提示语。 */
+    mpTips: { type: String, default: '' },
+    /** 下划线颜色，默认同文字颜色。 */
+    lineColor: { type: String, default: '' },
+    /** 是否默认点击跳转。 */
+    defaultClick: { type: Boolean, default: true }
+} as const;
+
+/** Link 组件的公开属性。 */
+export type LinkProps = ExtractPropTypes<typeof linkProps>;
+
+/** Link 组件的事件契约。 */
+export type LinkEmits = {
+    /** defaultClick 为 false 时点击触发，携带链接地址。 */
+    click: [href: string];
+};

package/components/snake-list-switching/components/tree-select/index.vue

@@ -0,0 +1,156 @@
+<template>
+    <view class="menu-wrap">
+        <scroll-view scroll-y scroll-with-animation class="tab-view menu-scroll-view" :scroll-top="scrollTop">
+            <view
+                v-for="(item, index) in items"
+                :key="index"
+                class="tab-item"
+                :class="[current == index ? 'tab-item-active' : '']"
+                :data-current="index"
+                @tap.stop="swichMenu(item, index)"
+            >
+                <text class="tab-item-text">{{ item.text }}</text>
+            </view>
+        </scroll-view>
+        <view class="content">
+            <slot name="content"></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+/**
+ * @component TreeSelect
+ * @description 列表切换组件内部使用的树形分类选择器，负责节点测量、滚动定位和分类切换。
+ */
+
+export default {
+    name: 'tree-select',
+    emits: ['click-nav'],
+    props: {
+        items: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        current: {
+            type: [Number, String],
+            default: 0
+        }
+    },
+    data() {
+        return {
+            scrollTop: 0, //tab标题的滚动条位置
+            currentIndex: 0,
+            menuHeight: 0, // 左边菜单的高度
+            menuItemHeight: 0 // 左边菜单item的高度
+        };
+    },
+    watch: {
+        current(val) {
+            // 父组件如果重置了current，则重新赋值
+            this.currentIndex = val;
+        }
+    },
+    methods: {
+        /** 切换分类并将激活项滚动到左侧菜单中部。 */
+        async swichMenu(item, index) {
+            // 当前分类不重复触发业务请求。
+            if (this.currentIndex === index) {
+                return;
+            }
+            // 首次交互可能早于节点测量，按需获取真实尺寸。
+            if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+                await this.getElRect('menu-scroll-view', 'menuHeight');
+                await this.getElRect('tab-item', 'menuItemHeight');
+            }
+            // 让激活项中心与可视区域中心对齐。
+            this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+            this.$emit('click-nav', item, index);
+        },
+        /**
+         * 获取目标节点尺寸；节点尚未挂载时短暂重试。
+         * Promise 必须等到成功测量后再完成，调用方才能安全计算滚动位置。
+         */
+        getElRect(elClass, dataVal) {
+            return new Promise(resolve => {
+                const query = uni.createSelectorQuery().in(this);
+                query
+                    .select('.' + elClass)
+                    .fields(
+                        {
+                            size: true
+                        },
+                        res => {
+                            // 条件渲染下节点查询可能暂时为空，延迟到下一轮重试。
+                            if (!res) {
+                                setTimeout(() => {
+                                    this.getElRect(elClass, dataVal).then(resolve);
+                                }, 10);
+                                return;
+                            }
+                            this[dataVal] = res.height;
+                            resolve(res);
+                        }
+                    )
+                    .exec();
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.menu-wrap {
+    display: flex;
+    flex: 1;
+    height: auto;
+    overflow: hidden;
+}
+
+.tab-view {
+    width: 140rpx;
+    height: 100%;
+}
+
+.tab-item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 140rpx;
+    height: 110rpx;
+    font-size: 26rpx;
+    font-weight: 400;
+    line-height: 1;
+    color: var(--snake-color-text-secondary, #444);
+    background: var(--snake-color-background, #f6f6f6);
+}
+
+.tab-item-active {
+    position: relative;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: var(--snake-color-text, #000);
+    background: var(--snake-color-surface, #fff);
+}
+
+.tab-item-active::before {
+    position: absolute;
+    top: 39rpx;
+    left: 0;
+    height: 32rpx;
+    content: '';
+    border-left: 4px solid var(--snake-color-primary, #06d290);
+}
+
+.right-box {
+    background-color: var(--snake-color-surface-muted, rgb(250, 250, 250));
+}
+
+.content {
+    width: 100%;
+    overflow: hidden;
+}
+</style>