btxui 1.0.1

package/components/BTXUI/tooltip/tooltip-wid.vue

@@ -0,0 +1,146 @@
+<template>
+    <b-view ref="tooltip" styles="fixed bg-none z9" v-show="visible">
+        <!--连线-->
+        <b-view :styles="`abs h-1px alpha-.5 shadow-sm color-rgba(40,40,40,.2) origin-left|center bg-${color_styles.bg} w-${line_len} rotate-${line_rotate}`"></b-view>
+
+        <!--文字内容-->
+        <b-view :styles="`rel pad-v-.7 pad-h-1.4 round-sm shadow line thick-1 color-neutral line-${color_styles.line} bg-${color_styles.bg} ${box_offset}`">
+            <b-text :styles="`color-${color_styles.text}`" v-html="text"></b-text>
+        </b-view>
+
+        <!--光标点-->
+        <b-view :styles="`abs alpha-.4 round w-1 h-1 l-f.5 t-f.5 bg-color-${color_styles.point}`"></b-view>
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view"
+    import BText from "@/components/BTXUI/core/b-text"
+
+    const desc = ["该组件用于悬浮显示 tooltip 提示框。"],
+        extend = [],
+        dependent = ["b-text", "b-view"],
+        api = {
+            methods: [
+                {
+                    name: "show",
+                    ef: "显示提示框",
+                    params: "text",
+                    return: "-"
+                },
+                {
+                    name: "hide",
+                    ef: "隐藏提示框",
+                    params: "-",
+                    return: "-"
+                },
+                {
+                    name: "set_pos",
+                    ef: "定位提示框",
+                    params: "x, y",
+                    return: "-"
+                }
+            ]
+        },
+        init_data = `{
+        /* colors: {
+            text: "文字颜色",
+            bg: "背景颜色",
+            line: "描边颜色",
+            point: "光标点颜色"
+        } */,
+        /* offset: {
+            x: "提示框水平偏移，默认：40",
+            y: "提示框垂直偏移，默认：-40",
+        }*/
+    }`;
+
+    export default {
+        name: "tooltip-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            BText
+        },
+        props: {
+            colors: {
+                type: Object,
+                required: false
+            },
+            offset: {
+                type: Object,
+                required: false,
+                default: ()=>{
+                    return {
+                        x: 40,
+                        y: -40
+                    }
+                }
+            },
+        },
+        data(){
+            const offset_x = this.offset.x,
+                offset_y = this.offset.y;
+
+            return {
+
+                //提示框显示状态
+                visible: false,
+
+                //提示内容
+                text: "",
+
+                //提示框偏移
+                box_offset: `l-${offset_x.toString().replace('-', 'f')}px t-${offset_y.toString().replace('-', 'f')}px`,
+
+                //连线旋转角度
+                line_rotate: (Math.atan2(offset_y + 4, offset_x + 4) * 180 / Math.PI).toString().replace("-", "f"),
+
+                //连线长度
+                line_len: Math.sqrt(Math.pow(offset_x, 2) + Math.pow(offset_y, 2)) + "px"
+
+            }
+        },
+        computed: {
+
+            //组件色彩风格
+            color_styles(){
+                return {
+                    line: "neutral",
+                    text: "dgray",
+                    bg: "light",
+                    point: "yellow",
+                    ...this.colors
+                }
+            },
+
+            //组件
+            tooltip(){
+                return this.$refs.tooltip;
+            }
+
+        },
+        methods: {
+
+            //显示提示框
+            show(text){
+                if(this.visible === false){
+                    this.visible = true;
+                    this.text = text;
+                }
+            },
+
+            //隐藏提示框
+            hide(){
+                if(this.visible === true) this.visible = false;
+            },
+
+            //位移提示框
+            set_pos(x, y){
+                this.tooltip.append_state(`l-${x}px t-${y}px`, "move");
+                this.tooltip.toggle_style("move");
+            }
+
+        }
+    }
+</script>

package/components/BTXUI/upload/upload-wid.vue

@@ -0,0 +1,215 @@
+<template>
+    <b-view styles="flex">
+        <btn-wid @on_click="$_upload" v-bind="btn_data" />
+        <input type="file" style="display: none" ref="uploader" @change="$_exe_upload" :multiple="multiple"/>
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view"
+    import BtnWid from "@/components/BTXUI/btn/btn-wid"
+
+    const desc = ["该组件用于文件上传操作，分为 “直接上传” 和 “间接（后续）上传” 2 类流程。", {
+            cover: "upload-wid.png",
+            title: "执行机制原理"
+        }],
+        extend = [],
+        dependent = ["btn-wid", "b-view"],
+        api = {
+            event: [
+                {
+                    name: "on_error",
+                    ef: "上传失败",
+                    params: "error_code"
+                },
+                {
+                    name: "on_change",
+                    ef: "上传文件改变",
+                    params: "files"
+                }
+            ]
+        },
+        init_data = `{
+        /* uploadApi: "直接上传接口" */,
+        /* formData: {
+            "其它数据字段": "数据值",...
+        } */,
+        /* remoteFileBaseURL: 上传文件地址根目录" */,
+        /* remoteFiles: "(model) 上传文件地址集" */,
+        /* type: "上传类型，数组格式，支持：jpg、png、text...，默认为所有类型" */,
+        /* size: "大小限制，默认：2M" */,
+        /* multiple: "是否多文件上传，默认 false" */,
+        /* btnData: "(参照：btn-wid 组件入参)" */
+    }`;
+
+    export default {
+        name: "upload-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BtnWid,
+            BView
+        },
+        model: {
+            prop: "remoteFiles",
+            event: "on_success"
+        },
+        props: {
+            uploadApi: {
+                type: String,
+                required: false
+            },
+            formData: {
+                type: Object,
+                required: false
+            },
+            remoteFileBaseURL: {
+                type: String,
+                required: false,
+                default: '',
+            },
+            remoteFiles: {
+                type: [Array, String],
+                required: false,
+                default: ()=>[]
+            },
+            type: {
+                type: Array,
+                required: false
+            },
+            size: {
+                type: Number,
+                required: false,
+                default: 1024 * 1024 * 2
+            },
+            multiple: {
+                type: Boolean,
+                required: false
+            },
+            btnData: {
+                type: Object,
+                required: false
+            }
+        },
+        data(){
+            return {
+
+                //上传按钮
+                btn_data: {
+                    btnText: "上传",
+                    ...this.btnData,
+                },
+
+                //上传资源集合
+                upload_file: {
+                    files: null,
+                    form_data: new FormData(),
+                },
+
+            }
+        },
+        computed: {
+
+            //上传文件
+            remote_files(){
+                const files = this.remoteFiles;
+                const remoteFileBaseURL = this.remoteFileBaseURL;
+                if(!files) return null;
+                if(typeof(files) === "string") { // 单文件
+                    return [`${remoteFileBaseURL}${files}`]
+                } else { // 多文件
+                    return files.map(file => `${remoteFileBaseURL}${file}`);
+                }
+            },
+
+            //上传元素
+            uploader(){
+                return this.$refs.uploader;
+            }
+
+        },
+        methods: {
+
+            //发送上传数据
+            send_upload_data(){
+                for(let key in this.formData){
+                    this.upload_file.form_data.append(key, this.formData[key]);
+                }
+                this.$axios({
+                    method: 'post',
+                    url: this.uploadApi,
+                    data: this.upload_file.form_data,
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    }
+                }).then(res => {
+                    let datas = res.data.datas;
+                    if(datas){
+                        if(res.data.error > 0){ //上传数据有误
+                            this.$confirm.toast(res.data.datas, 2000, "fail");
+                            this.$emit("on_error", res.data.error);
+                        }else{ //上传成功
+                            this.uploader.value = "";
+                            this.remoteFiles.length = 0;
+                            datas.forEach(url=>{
+                                this.remoteFiles.push(`${url}?tmp=${Math.round(Math.random() * 1000)}`);
+                            })
+                            this.$emit("on_success", this.remoteFiles);
+                        }
+                    }else{
+                        this.$confirm.toast("上传服务有误!", 2000, "fail");
+                    }
+                })
+            },
+
+            //点击上传
+            $_upload(){
+                this.uploader.click();
+            },
+
+            //执行上传
+            $_exe_upload(e){
+                this.upload_file.files = e.currentTarget.files; //表单数据
+                this.$emit("on_change", this.upload_file.files);
+
+                //上传文件验证
+                if(this.$_size_check() || (this.type && this.$_type_check())){
+                    e.currentTarget.value = null;
+                    return;
+                };
+
+                //直接上传
+                if(this.uploadApi){
+                    for(let i=0; i<this.upload_file.files.length; i++){
+                        this.upload_file.form_data.append(`file_${i}`, this.upload_file.files[i]);
+                    }
+                    this.send_upload_data();
+                }
+            },
+
+            //类型检测
+            $_type_check(){
+                let type,
+                    name,
+                    result = [].some.call(this.upload_file.files, (file=>{
+                        name = file.name;
+                        type = name.split(".").pop();
+                        return !this.type.includes(type);
+                    }));
+                result && this.$confirm.toast(`${name} 类型有误!`, 2000, "fail");
+                return result;
+            },
+
+            //大小检测
+            $_size_check(){
+                let name,
+                    result = [].some.call(this.upload_file.files, (file=>{
+                        name = file.name;
+                        return file.size > this.size;
+                    }));
+                result && this.$confirm.toast(`${name} 尺寸超过限制!`, 2000, "fail");
+                return result;
+            }
+
+        }
+    }
+</script>

package/components/BTXUI/waterfall/waterfall-wid.vue

@@ -0,0 +1,166 @@
+<template>
+    <b-view styles="rel">
+        <b-grid v-bind="grid_data">
+            <b-view v-for="img of show_imgs" :id="img.item_id" :key="img.item_id"
+                    ref="item"
+                    :styles="`abs mrg-b-0 pad-7px trans-fast t-${img.item_top} l-${img.item_left}`">
+                <b-img styles="flex round-sm round-t" :img="img.src" :title="img.title" />
+                <b-view styles="pad-1">
+                    hello world
+                </b-view>
+            </b-view>
+        </b-grid>
+    </b-view>
+</template>
+
+<script>
+    import BView from "@/components/BTXUI/core/b-view"
+    import BImg from "@/components/BTXUI/core/b-img"
+    import BGrid from "@/components/BTXUI/core/b-grid"
+
+    const desc = ["该组件用于瀑布流方式展示内容。"],
+        extend = [],
+        dependent = ["b-img", "b-view", "b-grid"],
+        api = null,
+        init_data = `{
+        /* uploadApi: "直接上传接口" */,
+        /* remoteFiles: "(model) 上传文件地址集" */,
+    }`;
+
+    export default {
+        name: "waterfall-wid",
+        introduce: { desc, extend, dependent, api, init_data },
+        components: {
+            BView,
+            BImg,
+            BGrid
+        },
+        props: ["init-data"],
+        data(){
+            return {
+
+                //网格参数
+                grid_data: {
+                    colData: {
+                        common_plan: "col-3 col-4-m col-6-s"
+                    }
+                },
+
+                /*图片公共根路径*/
+                common_path_root: "",
+
+                /*全部图片*/
+                imgs: [],
+
+                /*显示图片*/
+                show_imgs: [],
+
+                //细分列数（最多 4 列）
+                cols: 4,
+
+                /*瀑布流定位计算数据结构*/
+                pos_data: null,
+
+                /*重置大小定时器*/
+                resize_t: null
+
+            }
+        },
+        computed: {
+
+            //响应式宽度
+            cols(val){
+                return `col-${12 / this.cols}`;
+            }
+
+        },
+        methods: {
+
+            /*加载图片*/
+            load_img(index){
+                let img = this.imgs[index];
+                if(!img) return;
+                let $img = new Image(),
+                    pos;
+                $img.onload = ()=>{
+                    pos = this._computed_pos_data();
+                    this.show_imgs.push({
+                        title: img.title,
+                        src: $img.src,
+                        item_left: pos.min_top_index * 1/this.cols * 100 + "%",
+                        item_top: pos.min_top + "px",
+                        item_id: img.id
+                    });
+                    this.$nextTick(()=>{
+                        this.pos_data[pos.min_top_index] += this.$el.querySelector("#" + img.id).clientHeight;
+                        this.load_img(++index);
+                    })
+                }
+                $img.src = this.common_path_root + img.src;
+            },
+
+            /*追加显示图片*/
+            append_imgs(imgs){
+                let start_index = this.imgs.length;
+                this.imgs = this.imgs.concat(imgs);
+                this.load_img(start_index);
+            },
+
+            /*列设置*/
+            set_cols(num){
+                this.cols = Math.max(Math.min(num, 5), 2);
+                this._resize();
+            },
+
+            //【内部方法】---------------------------------------------------------------------
+
+            /*基于列数设置瀑布流定位计算数据结构*/
+            _reset_pos_data(){
+                this.pos_data = [];
+                for(let i=0; i<this.cols; i++){
+                    this.pos_data.push(0);
+                }
+            },
+
+            /*resize*/
+            _resize(){
+                clearTimeout(this.resize_t);
+                let pos;
+                this.resize_t = setTimeout(()=>{
+                    this._reset_pos_data();
+                    this.$refs.item.forEach(($item, i) => {
+                        pos = this._computed_pos_data();
+                        this.show_imgs[i].item_top = pos.min_top + "px";
+                        this.show_imgs[i].item_left = pos.min_top_index * 1/this.cols * 100 + "%";
+                        this.pos_data[pos.min_top_index] += $item.$el.clientHeight;
+                    })
+                }, 1000)
+            },
+
+            /*瀑布流定位计算*/
+            _computed_pos_data(){
+                let min_top = this.pos_data[0],
+                    min_top_index = 0;
+                this.pos_data.forEach((pos, i) => {
+                    if(pos < min_top){
+                        min_top = pos;
+                        min_top_index = i;
+                    }
+                })
+                return {
+                    min_top,
+                    min_top_index
+                }
+            },
+
+        },
+        mounted(){
+            window.onresize = this._resize;
+            this.common_path_root = this.initData.common_path_root;
+            this.imgs = this.initData.imgs;
+            this.cols = this.initData.cols || 2;
+            this._reset_pos_data();
+            this.load_img(0);
+        }
+    }
+</script>

package/components/header-info.vue

@@ -0,0 +1,167 @@
+<template>
+    <section>
+        <div>
+            <h5><code>{{ name }}</code></h5>
+            <template v-for="item of desc">
+                <!--图片-->
+                <div v-if="(item as Desc).cover">
+                    <img :src="require(`@/assets/img/mechanism/${(item as Desc).cover}`)"
+                         class="round-sm"/>
+                    <div class="pcenter">
+                        <span class="line-b thick-1 line-lgray pad-b-d5 fsize-d9">{{(item as Desc).title}}</span>
+                    </div>
+                </div>
+
+                <!--文字-->
+                <p v-else v-html="item"></p>
+            </template>
+            <p v-if="extend.length">组件继承：<code v-for="ext of extend">{{ ext }}</code></p>
+            <p v-if="dependent.length">组件依赖：<code v-for="dep of dependent">{{ dep }}</code></p>
+            <p>组件初始化入参：</p>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th>属性</th>
+                    <th>类型</th>
+                    <th>说明</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="item of initData">
+                    <td class="bold">
+                        {{ item[0] }}
+                    </td>
+                    <td>
+                        <code>{{ item[1] }}</code>
+                    </td>
+                    <td>
+                        {{ item[2] }}
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            <hr>
+        </div>
+
+        <div v-if="api">
+            <h5>组件 API：</h5>
+
+            <!--属性-->
+            <table v-if="api.props" class="table">
+                <thead>
+                <tr>
+                    <th>属性</th>
+                    <th>意义</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="prop of api.props">
+                    <td>
+                        <code>{{prop.name}}</code>
+                    </td>
+                    <td>{{prop.ef}}</td>
+                </tr>
+                </tbody>
+            </table>
+
+            <!--方法-->
+            <table v-if="api.methods" class="table">
+                <thead>
+                <tr>
+                    <th class="ellipsis">方法</th>
+                    <th class="ellipsis">效果</th>
+                    <th class="ellipsis">参数</th>
+                    <th class="ellipsis">返回值</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="method of api.methods">
+                    <td>
+                        <code>{{ method.name }}</code>
+                    </td>
+                    <td>{{ method.ef }}</td>
+                    <td v-html="method.params"></td>
+                    <td>
+                        <code v-if="method.return !== '-'">{{ method.return }}</code>
+                        <span v-else>-</span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <!--事件-->
+            <table v-if="api.event" class="table">
+                <thead>
+                <tr>
+                    <th>事件</th>
+                    <th>触发</th>
+                    <th>回调参数</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="event of api.event">
+                    <td>
+                        <code>{{ event.name }}</code>
+                    </td>
+                    <td>{{ event.ef }}</td>
+                    <td>
+                        <code v-if="event.name !== '-'">{{ event.params }}</code>
+                        <span v-else>-</span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <!--继承文字-->
+            <div v-if="api.extend">
+                <p v-html="api.extend"></p>
+                <hr>
+            </div>
+
+        </div>
+        <p></p>
+    </section>
+</template>
+
+<script setup lang="ts">
+    type Desc = {
+        cover: string,
+        title: string
+    }
+    defineProps<{
+        // 组件名
+        name: string,
+
+        // 组件介绍
+        desc: Array<string | Desc>,
+
+        // 组件继承
+        extend: Array<string>,
+
+        // 组件依赖
+        dependent: Array<string>,
+
+        // API
+        api?: {
+            extend: string,
+            props: Array<{
+                name: string,
+                ef: string
+            }>,
+            event: Array<{
+                name: string,
+                ef: string,
+                params: string
+            }>,
+            methods: Array<{
+                name: string,
+                ef: string,
+                params: string,
+                return: string
+            }>
+        },
+
+        // 组件初始化入参
+        initData?: Array<Array<string>>,
+    }>()
+</script>

package/composables/@types.ts

@@ -0,0 +1,4 @@
+export interface StaticArticles {
+    title: string,
+    content: string
+}