@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-parse/style/index.js

@@ -0,0 +1,132 @@
+/**
+ * @fileoverview style 插件
+ */
+// #ifndef APP-PLUS-NVUE
+import Parser from './parser';
+// #endif
+
+function Style() {
+    this.styles = [];
+}
+
+// #ifndef APP-PLUS-NVUE
+Style.prototype.onParse = function (node, vm) {
+    // 获取样式
+    if (node.name === 'style' && node.children.length && node.children[0].type === 'text') {
+        this.styles = this.styles.concat(new Parser().parse(node.children[0].text));
+    } else if (node.name) {
+        // 匹配样式（对非文本标签）
+        // 存储不同优先级的样式 name < class < id < 后代
+        let matched = ['', '', '', ''];
+        for (let i = 0, len = this.styles.length; i < len; i++) {
+            const item = this.styles[i];
+            let res = match(node, item.key || item.list[item.list.length - 1]);
+            let j;
+            if (res) {
+                // 后代选择器
+                if (!item.key) {
+                    j = item.list.length - 2;
+                    for (let k = vm.stack.length; j >= 0 && k--;) {
+                        // 子选择器
+                        if (item.list[j] === '>') {
+                            // 错误情况
+                            if (j < 1 || j > item.list.length - 2) break;
+                            if (match(vm.stack[k], item.list[j - 1])) {
+                                j -= 2;
+                            } else {
+                                j++;
+                            }
+                        } else if (match(vm.stack[k], item.list[j])) {
+                            j--;
+                        }
+                    }
+                    res = 4;
+                }
+                if (item.key || j < 0) {
+                    // 添加伪类
+                    if (item.pseudo && node.children) {
+                        let text;
+                        item.style = item.style.replace(/content:([^;]+)/, (_, $1) => {
+                            text = $1
+                                .replace(/['"]/g, '')
+                                // 处理 attr 函数
+                                .replace(/attr\((.+?)\)/, (_, $1) => node.attrs[$1.trim()] || '')
+                                // 编码 \xxx
+                                .replace(/\\(\w{4})/, (_, $1) => String.fromCharCode(parseInt($1, 16)));
+                            return '';
+                        });
+                        const pseudo = {
+                            name: 'span',
+                            attrs: {
+                                style: item.style
+                            },
+                            children: [
+                                {
+                                    type: 'text',
+                                    text
+                                }
+                            ]
+                        };
+                        if (item.pseudo === 'before') {
+                            node.children.unshift(pseudo);
+                        } else {
+                            node.children.push(pseudo);
+                        }
+                    } else {
+                        matched[res - 1] += item.style + (item.style[item.style.length - 1] === ';' ? '' : ';');
+                    }
+                }
+            }
+        }
+        matched = matched.join('');
+        if (matched.length > 2) {
+            node.attrs.style = matched + (node.attrs.style || '');
+        }
+    }
+};
+
+/**
+ * @description 匹配样式
+ * @param {object} node 要匹配的标签
+ * @param {string|string[]} keys 选择器
+ * @returns {number} 0：不匹配；1：name 匹配；2：class 匹配；3：id 匹配
+ */
+function match(node, keys) {
+    function matchItem(key) {
+        if (key[0] === '#') {
+            // 匹配 id
+            if (node.attrs.id && node.attrs.id.trim() === key.substr(1)) return 3;
+        } else if (key[0] === '.') {
+            // 匹配 class
+            key = key.substr(1);
+            const selectors = (node.attrs.class || '').split(' ');
+            for (let i = 0; i < selectors.length; i++) {
+                if (selectors[i].trim() === key) return 2;
+            }
+        } else if (node.name === key) {
+            // 匹配 name
+            return 1;
+        }
+        return 0;
+    }
+
+    // 多选择器交集
+    if (keys instanceof Array) {
+        let res = 0;
+        for (let j = 0; j < keys.length; j++) {
+            const tmp = matchItem(keys[j]);
+            // 任意一个不匹配就失败
+            if (!tmp) return 0;
+            // 优先级最大的一个作为最终优先级
+            if (tmp > res) {
+                res = tmp;
+            }
+        }
+        return res;
+    }
+
+    return matchItem(keys);
+}
+// #endif
+
+export default Style;

package/components/snake-parse/style/parser.js

@@ -0,0 +1,175 @@
+const blank = {
+    ' ': true,
+    '\n': true,
+    '\t': true,
+    '\r': true,
+    '\f': true
+};
+
+function Parser() {
+    this.styles = [];
+    this.selectors = [];
+}
+
+/**
+ * @description 解析 css 字符串
+ * @param {string} content css 内容
+ */
+Parser.prototype.parse = function (content) {
+    new Lexer(this).parse(content);
+    return this.styles;
+};
+
+/**
+ * @description 解析到一个选择器
+ * @param {string} name 名称
+ */
+Parser.prototype.onSelector = function (name) {
+    // 不支持的选择器
+    if (name.includes('[') || name.includes('*') || name.includes('@')) return;
+    const selector = {};
+    // 伪类
+    if (name.includes(':')) {
+        const info = name.split(':');
+        const pseudo = info.pop();
+        if (pseudo === 'before' || pseudo === 'after') {
+            selector.pseudo = pseudo;
+            name = info[0];
+        } else return;
+    }
+
+    // 分割交集选择器
+    function splitItem(str) {
+        const arr = [];
+        let i, start;
+        for (i = 1, start = 0; i < str.length; i++) {
+            if (str[i] === '.' || str[i] === '#') {
+                arr.push(str.substring(start, i));
+                start = i;
+            }
+        }
+        if (!arr.length) {
+            return str;
+        } else {
+            arr.push(str.substring(start, i));
+            return arr;
+        }
+    }
+
+    // 后代选择器
+    if (name.includes(' ')) {
+        selector.list = [];
+        const list = name.split(' ');
+        for (let i = 0; i < list.length; i++) {
+            if (list[i].length) {
+                // 拆分子选择器
+                const arr = list[i].split('>');
+                for (let j = 0; j < arr.length; j++) {
+                    selector.list.push(splitItem(arr[j]));
+                    if (j < arr.length - 1) {
+                        selector.list.push('>');
+                    }
+                }
+            }
+        }
+    } else {
+        selector.key = splitItem(name);
+    }
+
+    this.selectors.push(selector);
+};
+
+/**
+ * @description 解析到选择器内容
+ * @param {string} content 内容
+ */
+Parser.prototype.onContent = function (content) {
+    // 并集选择器
+    for (let i = 0; i < this.selectors.length; i++) {
+        this.selectors[i].style = content;
+    }
+    this.styles = this.styles.concat(this.selectors);
+    this.selectors = [];
+};
+
+/**
+ * @description css 词法分析器
+ * @param {object} handler 高层处理器
+ */
+function Lexer(handler) {
+    this.selector = '';
+    this.style = '';
+    this.handler = handler;
+}
+
+Lexer.prototype.parse = function (content) {
+    this.i = 0;
+    this.content = content;
+    this.state = this.blank;
+    for (let len = content.length; this.i < len; this.i++) {
+        this.state(content[this.i]);
+    }
+};
+
+Lexer.prototype.comment = function () {
+    this.i = this.content.indexOf('*/', this.i) + 1;
+    if (!this.i) {
+        this.i = this.content.length;
+    }
+};
+
+Lexer.prototype.blank = function (c) {
+    if (!blank[c]) {
+        if (c === '/' && this.content[this.i + 1] === '*') {
+            this.comment();
+            return;
+        }
+        this.selector += c;
+        this.state = this.name;
+    }
+};
+
+Lexer.prototype.name = function (c) {
+    if (c === '/' && this.content[this.i + 1] === '*') {
+        this.comment();
+        return;
+    }
+    if (c === '{' || c === ',' || c === ';') {
+        this.handler.onSelector(this.selector.trimEnd());
+        this.selector = '';
+        if (c !== '{') {
+            while (blank[this.content[++this.i]]);
+        }
+        if (this.content[this.i] === '{') {
+            this.floor = 1;
+            this.state = this.val;
+        } else {
+            this.selector += this.content[this.i];
+        }
+    } else if (blank[c]) {
+        this.selector += ' ';
+    } else {
+        this.selector += c;
+    }
+};
+
+Lexer.prototype.val = function (c) {
+    if (c === '/' && this.content[this.i + 1] === '*') {
+        this.comment();
+        return;
+    }
+    if (c === '{') {
+        this.floor++;
+    } else if (c === '}') {
+        this.floor--;
+        if (!this.floor) {
+            this.handler.onContent(this.style);
+            this.style = '';
+            this.state = this.blank;
+            return;
+        }
+    }
+    this.style += c;
+};
+
+export default Parser;

package/components/snake-parse/types.ts

@@ -0,0 +1,49 @@
+/** snake-parse's public cross-platform rich-content contract. */
+export interface ParseProps {
+    /** 要渲染的 HTML 内容。 */
+    content?: string;
+    /** 根容器样式。 */
+    containerStyle?: string;
+    /** 相对资源地址使用的主域名。 */
+    domain?: string;
+    /** 标签样式映射。 */
+    tagStyle?: Record<string, string>;
+    /** 是否延迟加载图片。 */
+    lazyLoad?: boolean;
+    /** 图片加载中的占位图。 */
+    loadingImg?: string;
+    /** 图片加载失败的占位图。 */
+    errorImg?: string;
+    /** 点击图片时是否打开预览。 */
+    previewImg?: boolean;
+    /** 是否显示图片长按菜单。 */
+    showImgMenu?: boolean;
+    /** 点击外部链接时是否复制地址。 */
+    copyLink?: boolean;
+    /** 播放新视频时是否暂停其他视频。 */
+    pauseVideo?: boolean;
+    /** 是否让表格独立横向滚动。 */
+    scrollTable?: boolean;
+    /** 文本是否可长按选择。 */
+    selectable?: boolean;
+    /** 是否使用 HTML 标题更新页面标题。 */
+    setTitle?: boolean;
+    /** 是否启用锚点定位，可指定偏移量。 */
+    useAnchor?: boolean | number;
+}
+
+/** 富文本加载、点击和媒体事件。 */
+export interface ParseEmits {
+    /** 内容开始加载。 */
+    load: [];
+    /** 内容布局完成。 */
+    ready: [rect: UniApp.NodeInfo | Record<string, never>];
+    /** 用户点击图片。 */
+    imgtap: [attrs: Record<string, string> | undefined];
+    /** 用户点击链接。 */
+    linktap: [attrs: Record<string, string>];
+    /** 媒体开始播放。 */
+    play: [payload: { source: string; attrs: Record<string, string> | undefined }];
+    /** 富文本资源加载失败。 */
+    error: [payload: { source: string; attrs: Record<string, string> | undefined }];
+}

package/components/snake-picture-ads/snake-picture-ads.vue

@@ -0,0 +1,292 @@
+<template>
+    <view class="pictureads" :style="{ backgroundColor: datas.backgroundColor }">
+        <view v-if="!imageList.length" :style="{ height: $snake.addUnit(datas.height * 2, 'rpx') }" class="upload">
+            暂无图片
+        </view>
+        <!-- 一行一个 -->
+        <view
+            v-if="imageList.length && datas.swiperType === 0"
+            class="swiperType0"
+            :style="{ padding: `0 ${datas.pageMargin}rpx` }"
+        >
+            <view
+                v-for="(item, index) in imageList"
+                :key="index"
+                class="imgLis"
+                :style="{ 'margin-bottom': datas.imageMargin + 'rpx', height: $snake.addUnit(datas.height * 2, 'rpx') }"
+                @click="uni.$snake.navTo(item.url)"
+            >
+                <!-- 图片 -->
+                <image
+                    class="image"
+                    show-menu-by-longpress
+                    :src="item.src"
+                    :style="{ borderRadius: datas.borderRadius + 'rpx' }"
+                />
+                <!-- 标题 -->
+                <text v-if="item.text" class="title">{{ item.text }}</text>
+            </view>
+        </view>
+        <!-- 轮播组件 -->
+        <view
+            v-if="imageList.length && (datas.swiperType === 1 || datas.swiperType === 2)"
+            :style="{ padding: `0 ${datas.pageMargin}rpx` }"
+        >
+            <snake-swiper
+                :list="imageList"
+                :previous-margin="swiperMargin"
+                :next-margin="swiperMargin"
+                circular
+                :height="datas.height * 2"
+                :autoplay="imageList.length > 0"
+                :radius="datas.borderRadius"
+                name="src"
+                :show-title="true"
+                :loading="loading"
+                :interval="datas.interval || 3000"
+                :indicator-style="datas.pagingType === 'progressbar' ? 'width:100%; top: -2px; zIndex: 999;' : ''"
+                @change="change"
+                @click="clickPushTo"
+            >
+                <template #indicator>
+                    <view v-if="datas.pagingType">
+                        <!-- 指示器 -->
+                        <!-- 样式一 -->
+                        <view v-if="datas.pagingType === 'bullets'" class="dot-main">
+                            <view
+                                v-for="(item, index) in imageList"
+                                :key="index"
+                                class="dot-item"
+                                :style="{ backgroundColor: current == index ? datas.indicatorColor : '' }"
+                            />
+                        </view>
+                        <text
+                            v-if="datas.pagingType === 'fraction'"
+                            class="pagination"
+                            :style="{ color: datas.indicatorColor }"
+                        >
+                            {{ current + 1 }}/{{ imageList.length }}
+                        </text>
+                        <!-- 样式3 -->
+                        <view v-if="datas.pagingType === 'progressbar'" class="progressbar-box">
+                            <view
+                                class="progressbar"
+                                :style="{
+                                    width: (100 / imageList.length) * (current + 1) + '%',
+                                    backgroundColor: datas.indicatorColor
+                                }"
+                            />
+                        </view>
+                    </view>
+                </template>
+            </snake-swiper>
+        </view>
+    </view>
+</template>
+
+<script>
+/**
+ * @component PictureAds
+ * @description 以纵向图片列表或 Snake UI Swiper 展示广告，支持列表、轮播和指示器配置。
+ */
+
+export default {
+    name: 'Pictureads',
+    options: { virtualHost: true, styleIsolation: 'shared' },
+    props: {
+        datas: {
+            type: [Object, null],
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            current: 0,
+            loading: false
+        };
+    },
+    computed: {
+        imageList() {
+            return this.datas?.imageList || [];
+        },
+        // 轮播的前边距 和 后边距
+        swiperMargin() {
+            let margin = '';
+            // #ifdef MP-ALIPAY
+            margin = this.datas.swiperType === 2 ? '30rpx' : '';
+            // #endif
+            // #ifndef MP-ALIPAY
+            margin = this.datas.swiperType === 2 ? '60rpx' : '';
+            // #endif
+            return margin;
+        }
+    },
+    async mounted() {
+        await uni.$snake.sleep(300);
+        this.loading = false;
+    },
+    methods: {
+        change(e) {
+            this.current = e.current;
+        },
+        clickPushTo(index) {
+            const item = this.imageList[index] || {};
+            if (item?.startTime && item?.endTime && !item.url) {
+                return uni.$snake.toast('活动未开始');
+            }
+            uni.$snake.navTo(item.url);
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.snake-swiper__indicator) {
+    display: none;
+}
+
+.pictureads {
+    position: relative;
+
+    /* 无图片 */
+    .upload {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background: #ccc;
+    }
+
+    // 类型0
+    .swiperType0 {
+        box-sizing: border-box;
+
+        /* 图片列表 */
+        .imgLis {
+            position: relative;
+            // width: 750rpx;
+            width: 100%;
+            overflow: hidden;
+
+            /* 图片 */
+            .image {
+                width: 100%;
+                height: 100%;
+            }
+
+            .title {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 72rpx;
+                line-height: 72rpx;
+                color: #fff;
+                text-align: center;
+                background-color: rgba(51, 51, 51, 0.8);
+            }
+        }
+    }
+
+    /* 类型1 */
+    .type1 {
+        .swiper-slide {
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+
+        .swiper-slide-image {
+            width: 100%;
+            height: 100%;
+        }
+
+        .title {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            box-sizing: border-box;
+            width: 100%;
+            height: 36px;
+            padding: 0 5px;
+            line-height: 36px;
+            color: #fff;
+            text-align: center;
+            text-align: left;
+            background-color: rgba(51, 51, 51, 0.8);
+        }
+    }
+
+    .type3 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .swiper-slide {
+            /* Center slide text vertically */
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-align-items: center;
+            align-items: center;
+            -webkit-justify-content: center;
+            justify-content: center;
+            height: 460rpx !important;
+            overflow: hidden;
+            font-size: 18px;
+            text-align: center;
+            box-shadow: rgba(147, 147, 147, 0.8) 0px 7px 24px 0px;
+            transform: scale(0.93);
+            transition: 300ms;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+        }
+
+        .swiper-slide-active {
+            height: 400rpx !important;
+        }
+    }
+}
+
+// 轮播
+.swiper {
+}
+
+// 指示器 样式一
+.dot-main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .dot-item {
+        width: 30rpx;
+        height: 4rpx;
+        margin: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+}
+
+// 页码 样式二
+.pagination {
+    font-size: 28rpx;
+}
+
+// 样式三
+.progressbar-box {
+    width: 100%;
+    height: 4px;
+    background-color: rgba(0, 0, 0, 0.25);
+}
+
+.progressbar {
+    height: 4px;
+    background-color: #007aff;
+    transition: 300ms;
+}
+</style>

package/components/snake-picture-ads/types.ts

@@ -0,0 +1,5 @@
+/** PictureAds 组件的公开属性。 */
+export interface PictureAdsProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+}