m8-codex-mcp 1.0.31 → 1.0.33

package/Classify/css/index.scss

@@ -0,0 +1,140 @@
+.classify {
+    width: 100%;
+}
+
+.classify__bar {
+    display: flex;
+    align-items: flex-start;
+    padding: 10px 12px 8px;
+}
+
+.classify__grid {
+    flex: 1;
+    display: grid;
+}
+
+.classify__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.classify__item:active {
+    opacity: 0.9;
+}
+
+.classify__icon {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background: #f2f3f5;
+}
+
+.classify__label {
+    max-width: 100%;
+    margin-top: 6px;
+}
+
+.classify__label-text {
+    display: block;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
+.classify__expand {
+    width: 44px;
+    margin-left: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.classify__expand:active {
+    opacity: 0.9;
+}
+
+.classify__expand-icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+}
+
+.classify__expand-text {
+    margin-top: 2px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.classify__expand-char {
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 400;
+    color: #666;
+}
+
+.classify__overlay {
+    position: relative;
+    z-index: 9999;
+}
+
+.classify__panel-inline {
+    background: #fff;
+    overflow: hidden;
+}
+
+.classify__panel {
+    position: fixed;
+    left: 0;
+    right: 0;
+    background: #fff;
+    z-index: 10001;
+    overflow: hidden;
+}
+
+.classify__panel-scroll {
+    padding: 10px 12px 8px;
+}
+
+.classify__panel-grid {
+    display: grid;
+}
+
+.classify__collapse {
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.classify__collapse-text {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    color: #999;
+}
+
+.classify__collapse-arrow {
+    margin-left: 6px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #999;
+}
+
+.classify__mask {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000;
+}

package/Classify/index.js

@@ -0,0 +1,19 @@
+//构建入口，勿动
+import Component from './index.vue';
+
+if (!Component.name) {
+    console.error('卡片组件vue内请定义name字段后重新构建！');
+}
+const install = function (Vue) {
+    Vue.component(Component.name, Component);
+};
+
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
+}
+
+export { default as component } from './index.vue';
+
+export default {
+    install
+};

package/Classify/index.vue

@@ -0,0 +1,503 @@
+<template>
+    <view class="epoint-component classify" :style="[boxOptionsStyle, boxModelStyle]">
+        <view class="classify__bar">
+            <view class="classify__grid" :style="collapsedGridStyle">
+                <view
+                    v-for="item in collapsedItems"
+                    :key="item.id"
+                    class="classify__item"
+                    @click.stop="handleItemClick(item)"
+                >
+                    <view class="classify__icon" :style="getIconStyle(item)">
+                        <em-image :width="iconSize" :height="iconSize" :src="item.icon" />
+                    </view>
+                    <view class="classify__label" :style="getLabelStyle(item)">
+                        <text class="classify__label-text">{{ item.name }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <view
+                v-if="showExpandButton"
+                class="classify__expand"
+                @click.stop="toggleExpand(true)"
+            >
+                <view class="classify__expand-icon">
+                    <em-icon name="apps-o" />
+                </view>
+                <view class="classify__expand-text">
+                    <text
+                        v-for="(char, index) in expandTextChars"
+                        :key="index"
+                        class="classify__expand-char"
+                    >
+                        {{ char }}
+                    </text>
+                </view>
+            </view>
+        </view>
+
+        <view v-if="expanded && useFixedOverlay" class="classify__overlay">
+            <view class="classify__panel" :style="panelStyle">
+                <scroll-view
+                    class="classify__panel-scroll"
+                    scroll-y
+                    :style="panelScrollStyle"
+                >
+                    <view class="classify__panel-grid" :style="expandedGridStyle">
+                        <view
+                            v-for="item in mappedItems"
+                            :key="item.id"
+                            class="classify__item"
+                            @click.stop="handleItemClick(item)"
+                        >
+                            <view class="classify__icon" :style="getIconStyle(item)">
+                                <em-image :width="iconSize" :height="iconSize" :src="item.icon" />
+                            </view>
+                            <view class="classify__label" :style="getLabelStyle(item)">
+                                <text class="classify__label-text">{{ item.name }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </scroll-view>
+
+                <view class="classify__collapse" @click.stop="toggleExpand(false)">
+                    <text class="classify__collapse-text">{{ collapseText }}</text>
+                    <text class="classify__collapse-arrow">∧</text>
+                </view>
+            </view>
+
+            <view
+                v-if="closeOnMask"
+                class="classify__mask"
+                :style="maskStyle"
+                @click.stop="toggleExpand(false)"
+            />
+        </view>
+
+        <view v-else-if="expanded" class="classify__panel-inline">
+            <scroll-view class="classify__panel-scroll" scroll-y :style="panelScrollStyle">
+                <view class="classify__panel-grid" :style="expandedGridStyle">
+                    <view
+                        v-for="item in mappedItems"
+                        :key="item.id"
+                        class="classify__item"
+                        @click.stop="handleItemClick(item)"
+                    >
+                        <view class="classify__icon" :style="getIconStyle(item)">
+                            <em-image :width="iconSize" :height="iconSize" :src="item.icon" />
+                        </view>
+                        <view class="classify__label" :style="getLabelStyle(item)">
+                            <text class="classify__label-text">{{ item.name }}</text>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+
+            <view class="classify__collapse" @click.stop="toggleExpand(false)">
+                <text class="classify__collapse-text">{{ collapseText }}</text>
+                <text class="classify__collapse-arrow">∧</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import '@boot';
+import mockData from './mock/data';
+import defaultConfig from './js/config';
+import base from './js/base';
+import eventMixin from './plugin/eventgenerate';
+
+export default {
+    name: base.module_name,
+    mixins: [eventMixin],
+    props: {
+        data: {
+            type: Array,
+            default: () => {
+                return mockData.data;
+            }
+        },
+        config: {
+            type: Object
+        },
+        cdata: Object
+    },
+    data() {
+        return {
+            activeId: '',
+            expanded: false,
+            panelTop: 0,
+            maskTop: 0
+        };
+    },
+    watch: {
+        defaultActiveId: {
+            immediate: true,
+            handler(val) {
+                if (val && val !== this.activeId) {
+                    this.activeId = val;
+                }
+            }
+        },
+        mappedItems: {
+            immediate: true,
+            handler(val) {
+                if (!Array.isArray(val) || val.length === 0) {
+                    this.activeId = '';
+                    return;
+                }
+
+                if (!this.activeId) {
+                    this.activeId = this.defaultActiveId || val[0].id;
+                    return;
+                }
+
+                const exists = val.some((item) => item.id === this.activeId);
+                if (!exists) {
+                    this.activeId = this.defaultActiveId || val[0].id;
+                }
+            }
+        }
+    },
+    computed: {
+        optionRoot() {
+            return (this.config && this.config.options) || {};
+        },
+        dataMapping() {
+            return this.optionRoot.dataMapping || {};
+        },
+        layout() {
+            return this.optionRoot.layout || {};
+        },
+        styleOptions() {
+            return this.optionRoot.style || {};
+        },
+        behavior() {
+            return this.optionRoot.behavior || {};
+        },
+        idField() {
+            return this.dataMapping.idField || 'id';
+        },
+        nameField() {
+            return this.dataMapping.nameField || 'name';
+        },
+        iconField() {
+            return this.dataMapping.iconField || 'icon';
+        },
+        defaultActiveId() {
+            return this.dataMapping.defaultActiveId || '';
+        },
+        columns() {
+            const n = Number(this.layout.columns);
+            return n > 0 ? Math.floor(n) : 5;
+        },
+        collapsedRows() {
+            const n = Number(this.layout.collapsedRows);
+            return n > 0 ? Math.floor(n) : 1;
+        },
+        showExpandButton() {
+            if (!this.expandable) return false;
+            if (this.layout.showExpandButton === false) return false;
+            return this.mappedItems.length > this.columns * this.collapsedRows;
+        },
+        expandText() {
+            return this.layout.expandText || '全部';
+        },
+        collapseText() {
+            return this.layout.collapseText || '点击收起';
+        },
+        panelMaxHeight() {
+            return this.layout.panelMaxHeight || '320px';
+        },
+        expandable() {
+            return this.behavior.expandable !== false;
+        },
+        selectable() {
+            return this.behavior.selectable !== false;
+        },
+        allowUnselect() {
+            return this.behavior.allowUnselect === true;
+        },
+        useFixedOverlay() {
+            return this.behavior.useFixedOverlay !== false;
+        },
+        closeOnMask() {
+            return this.behavior.closeOnMask !== false;
+        },
+        itemGap() {
+            return this.styleOptions.itemGap || '12px';
+        },
+        iconSize() {
+            return this.styleOptions.iconSize || '44px';
+        },
+        iconRadius() {
+            return this.styleOptions.iconRadius || '999px';
+        },
+        fontSize() {
+            return this.styleOptions.fontSize || '12px';
+        },
+        lineHeight() {
+            return this.styleOptions.lineHeight || '16px';
+        },
+        fontWeight() {
+            return this.styleOptions.fontWeight || '400';
+        },
+        textColor() {
+            return this.styleOptions.textColor || '#666666';
+        },
+        activeTextColor() {
+            return this.styleOptions.activeTextColor || '#ffffff';
+        },
+        activeBgColor() {
+            return this.styleOptions.activeBgColor || '#f23c3c';
+        },
+        activeBorderColor() {
+            return this.styleOptions.activeBorderColor || '#f23c3c';
+        },
+        borderWidth() {
+            return this.styleOptions.borderWidth || '2px';
+        },
+        labelRadius() {
+            return this.styleOptions.labelRadius || '999px';
+        },
+        labelPadding() {
+            return this.styleOptions.labelPadding || '2px 8px';
+        },
+        activeTranslateY() {
+            return this.styleOptions.activeTranslateY || '0px';
+        },
+        expandTextChars() {
+            return String(this.expandText).split('');
+        },
+        mappedItems() {
+            const list = Array.isArray(this.data) ? this.data : [];
+            return list
+                .map((raw, index) => {
+                    const rawId = raw ? raw[this.idField] : undefined;
+                    const rawName = raw ? raw[this.nameField] : undefined;
+                    const rawIcon = raw ? raw[this.iconField] : undefined;
+                    const id = rawId !== null && rawId !== undefined ? String(rawId) : String(index);
+                    const name = rawName !== null && rawName !== undefined ? String(rawName) : '';
+                    const icon = rawIcon !== null && rawIcon !== undefined ? String(rawIcon) : '';
+                    return { id, name, icon, raw };
+                })
+                .filter((item) => item.id);
+        },
+        collapsedItems() {
+            return this.mappedItems.slice(0, this.columns * this.collapsedRows);
+        },
+        boxOptionsRaw() {
+            return this.optionRoot.boxOptions || {};
+        },
+        boxOptionsStyle() {
+            const background = this.styleOptions.backgroundColor || this.boxOptionsRaw.background || '';
+            const width = this.boxOptionsRaw.width || '';
+            const height = this.boxOptionsRaw.height || '';
+            const borderRadius = this.boxOptionsRaw.borderRadius || '';
+            const overflow = this.boxOptionsRaw.overflow || '';
+            const style = {
+                background
+            };
+
+            if (width) style.width = width;
+            if (height) style.height = height;
+            if (borderRadius) style.borderRadius = borderRadius;
+            if (overflow) style.overflow = overflow;
+
+            return style;
+        },
+        boxModelStyle() {
+            const model = this.normalizeBoxModel(this.boxOptionsRaw.boxmodel);
+            const style = {};
+
+            Object.keys(model).forEach((key) => {
+                const value = model[key];
+                if (value === null || value === undefined || value === '') return;
+                if (typeof value === 'number') {
+                    style[key] = `${value}px`;
+                    return;
+                }
+                if (!isNaN(Number(value))) {
+                    style[key] = `${value}px`;
+                    return;
+                }
+                style[key] = value;
+            });
+
+            return style;
+        },
+        collapsedGridStyle() {
+            return {
+                gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
+                gap: this.itemGap
+            };
+        },
+        expandedGridStyle() {
+            return {
+                gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
+                gap: this.itemGap
+            };
+        },
+        panelStyle() {
+            return {
+                top: `${this.panelTop}px`,
+                borderRadius: this.styleOptions.panelRadius || '0 0 16px 16px',
+                boxShadow: this.styleOptions.panelShadow || '0 8px 24px rgba(0, 0, 0, 0.12)'
+            };
+        },
+        panelScrollStyle() {
+            return {
+                maxHeight: this.panelMaxHeight
+            };
+        },
+        maskStyle() {
+            return {
+                top: `${this.maskTop}px`,
+                background: this.styleOptions.maskColor || 'rgba(0,0,0,0.35)'
+            };
+        }
+    },
+    created() {},
+    mounted() {
+        this.eventGenerate('onMounted', { activeId: this.activeId });
+    },
+    methods: {
+        normalizeBoxModel(boxmodel) {
+            if (!boxmodel) return {};
+            if (Array.isArray(boxmodel)) {
+                return boxmodel.reduce((acc, item) => {
+                    if (!item || !item.name) return acc;
+                    acc[item.name] = item.value;
+                    return acc;
+                }, {});
+            }
+            if (typeof boxmodel === 'object') return boxmodel;
+            return {};
+        },
+        isActive(item) {
+            return item && item.id === this.activeId;
+        },
+        getIconStyle(item) {
+            const active = this.isActive(item);
+            const style = {
+                borderRadius: this.iconRadius,
+                width: this.iconSize,
+                height: this.iconSize
+            };
+
+            if (active) {
+                style.borderStyle = 'solid';
+                style.borderWidth = this.borderWidth;
+                style.borderColor = this.activeBorderColor;
+            }
+
+            if (this.activeTranslateY && active && this.activeTranslateY !== '0px') {
+                style.transform = `translateY(${this.activeTranslateY})`;
+            }
+
+            return style;
+        },
+        getLabelStyle(item) {
+            const active = this.isActive(item);
+            return {
+                fontSize: this.fontSize,
+                lineHeight: this.lineHeight,
+                fontWeight: this.fontWeight,
+                borderRadius: this.labelRadius,
+                padding: this.labelPadding,
+                color: active ? this.activeTextColor : this.textColor,
+                background: active ? this.activeBgColor : 'transparent'
+            };
+        },
+        handleItemClick(item) {
+            this.eventGenerate('onItemClick', item.raw);
+
+            if (!this.selectable) return;
+
+            const nextId = item.id;
+            const shouldUnselect = this.allowUnselect && nextId === this.activeId;
+            this.activeId = shouldUnselect ? '' : nextId;
+
+            this.eventGenerate('onChange', {
+                activeId: this.activeId,
+                item: item.raw
+            });
+        },
+        toggleExpand(next) {
+            if (!this.expandable) return;
+            if (next === this.expanded) return;
+
+            if (!next) {
+                this.expanded = false;
+                this.eventGenerate('onToggleExpand', { expanded: false });
+                return;
+            }
+
+            this.updatePanelAnchorTop()
+                .then((top) => {
+                    this.panelTop = top;
+                    this.expanded = true;
+                    this.eventGenerate('onToggleExpand', { expanded: true });
+                    return this.$nextTick();
+                })
+                .then(() => this.updateMaskTop())
+                .catch(() => {
+                    this.panelTop = 0;
+                    this.maskTop = 0;
+                    this.expanded = true;
+                    this.eventGenerate('onToggleExpand', { expanded: true });
+                });
+        },
+        updatePanelAnchorTop() {
+            return new Promise((resolve) => {
+                if (typeof uni === 'undefined' || !uni.createSelectorQuery) {
+                    resolve(0);
+                    return;
+                }
+
+                const query = uni.createSelectorQuery().in(this);
+                query
+                    .select('.classify')
+                    .boundingClientRect();
+                query.exec((res) => {
+                    const rect = res && res[0];
+                    resolve(rect && typeof rect.top === 'number' ? rect.top : 0);
+                });
+            });
+        },
+        updateMaskTop() {
+            return new Promise((resolve) => {
+                if (typeof uni === 'undefined' || !uni.createSelectorQuery) {
+                    this.maskTop = this.panelTop;
+                    resolve();
+                    return;
+                }
+
+                const query = uni.createSelectorQuery().in(this);
+                query
+                    .select('.classify__panel')
+                    .boundingClientRect();
+                query.exec((res) => {
+                    const rect = res && res[0];
+                    if (rect && typeof rect.top === 'number' && typeof rect.height === 'number') {
+                        this.maskTop = rect.top + rect.height;
+                        resolve();
+                        return;
+                    }
+                    this.maskTop = this.panelTop;
+                    resolve();
+                });
+            });
+        }
+    },
+    beforeDestroy() {},
+    _getConfig: () => defaultConfig,
+    _getMockData: () => mockData
+};
+</script>
+
+<style lang="scss" scoped>
+@import './css/index.scss';
+</style>

package/Classify/js/base.js

@@ -0,0 +1,20 @@
+export default {
+    name: '一级分类',
+    module_name: 'Classify',
+    version: '0.1.0'
+    // 如果当前组件需要使用三方npm库依赖，可以在这里配置;  
+    // 配置参考文档：https://epointfe.feishu.cn/wiki/wikcnWfDygigkfyAELeQhjjl3Ch
+    // packages: [
+    //     {
+    //         title: 'ucharts 图表库',
+    //         // 组件本地开发、跨端源码构建会使用package和version版本号安装依赖
+    //         // 在组件开发时，源码引用依赖正常引用package组件包名使用。例如在index.vue中：import uCharts from '@qiun/ucharts/u-charts.js';
+    //         package: '@qiun/ucharts',
+    //         version: '^2.5.0-20230101',
+    //         // 设计器设计、预览使用cdn加载组件
+    //         urls: ['http://app.epoint.com.cn/h5/fileattaches/20230404/u-charts-20230404170212.js'],
+    //         // 组件构建上传时会过滤库，需要设计器使用cdn加载或设计器手动上传加载库文件加载到该全局变量名称的库文件
+    //         library: 'uCharts'
+    //     }
+    // ]
+};