init

- 框架初始化
 - 安装插件
 - 修复PHP8.4报错

public/assets/addons/shopro/components/decorate/center/header.js

@@ -0,0 +1,187 @@
+const CenterHeader = {
+  template: `
+  <div v-if="platform == 'WechatMiniProgram' || platform == 'App'" class="center-header" :style="headerStyle()">
+      <img class="system" :src="'/assets/addons/shopro/img/decorate/header-' + system + '.png'" />
+      <div class="WechatMiniProgram-wrap sa-flex sa-row-right">
+          <center-navbar :header="header" :platform="platform" :isScroll="isScroll" :page="page"></center-navbar>
+          <img v-if="platform == 'WechatMiniProgram'" class="WechatMiniProgram"
+              :src="'/assets/addons/shopro/img/decorate/header-' + platform + '.png'" />
+      </div>
+  </div>
+  <div v-if="platform == 'WechatOfficialAccount' || platform == 'H5'" class="center-header">
+      <img class="system" :src="'/assets/addons/shopro/img/decorate/header-' + system + '.png'" />
+      <img v-if="platform == 'WechatOfficialAccount'" class="WechatOfficialAccount"
+          :src="'/assets/addons/shopro/img/decorate/header-' + platform + '.png'" />
+      <center-navbar :style="headerStyle()" :header="header" :platform="platform" :isScroll="isScroll" :page="page">
+      </center-navbar>
+  </div>`,
+  emit: ['update:modelValue', 'update:show'],
+  props: {
+    header: {
+      type: Object,
+      default: {},
+    },
+    page: String,
+    system: String,
+    platform: String,
+    isScroll: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props, { emit }) {
+    const { ref, watch } = Vue
+
+    console.log(props.header, 'header')
+
+    const sys1 = {
+      ios: '78px',
+      android: '72px',
+    };
+    const sys2 = {
+      ios: '34px',
+      android: '28px',
+    };
+
+    function headerStyle() {
+      let mode = {};
+      if (props.platform == 'WechatMiniProgram') {
+        if (props.header) {
+          if (props.header.navbar.mode == 'inner') {
+            mode = {
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              'z-index': 20,
+            };
+            if (props.isScroll) {
+              mode = {
+                ...mode,
+                background:
+                  props.header.navbar.type == 'color'
+                    ? props.header.navbar.color
+                    : props.header.navbar.src
+                      ? 'url(' + Fast.api.cdnurl(props.header.navbar.src) + ')'
+                      : props.header.navbar.src,
+              };
+            }
+          }
+          if (props.header.navbar.mode == 'normal') {
+            mode = {
+              background:
+                props.header.navbar.type == 'color'
+                  ? props.header.navbar.color
+                  : props.header.navbar.src
+                    ? 'url(' + Fast.api.cdnurl(props.header.navbar.src) + ')'
+                    : props.header.navbar.src,
+            };
+          }
+        }
+      }
+      if (props.platform == 'WechatOfficialAccount') {
+        if (props.header) {
+          if (props.header.navbar.mode == 'inner') {
+            mode = {
+              position: 'absolute',
+              top: sys1[props.systemType],
+              left: 0,
+              'z-index': 20,
+            };
+            if (props.isScroll) {
+              mode = {
+                ...mode,
+                background:
+                  props.header.navbar.type == 'color'
+                    ? props.header.navbar.color
+                    : props.header.navbar.src
+                      ? 'url(' + Fast.api.cdnurl(props.header.navbar.src) + ')'
+                      : props.header.navbar.src,
+              };
+            }
+          } else if (props.header.navbar.mode == 'normal') {
+            mode = {
+              background:
+                props.header.navbar.type == 'color'
+                  ? props.header.navbar.color
+                  : props.header.navbar.src
+                    ? 'url(' + Fast.api.cdnurl(props.header.navbar.src) + ')'
+                    : props.header.navbar.src,
+            };
+          }
+        }
+      }
+      if (props.platform == 'H5') {
+        if (props.header) {
+          if (props.header.navbar.mode == 'inner') {
+            mode = {
+              position: 'absolute',
+              top: sys2[props.systemType],
+              right: 0,
+              'z-index': 20,
+            };
+            if (props.isScroll) {
+              mode = {
+                ...mode,
+                background:
+                  props.header.navbar.type == 'color'
+                    ? props.header.navbar.color
+                    : props.header.navbar.src
+                      ? 'url(' + Fast.api.cdnurl(props.header.navbar.src) + ')'
+                      : props.header.navbar.src,
+              };
+            }
+          }
+          if (props.header.navbar.mode == 'normal') {
+            mode = {
+              background:
+                props.header.navbar.type == 'color'
+                  ? props.header.navbar.color
+                  : props.header.navbar.src
+                    ? 'url(' + Fast.api.cdnurl(props.header.navbar.src) + ')'
+                    : props.header.navbar.src,
+            };
+          }
+        }
+      }
+      if (props.platform == 'App') {
+        if (props.header) {
+          if (props.header.navbar.mode == 'inner') {
+            mode = {
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              'z-index': 20,
+            };
+            if (props.isScroll) {
+              mode = {
+                ...mode,
+                background:
+                  props.header.navbar.type == 'color'
+                    ? props.header.navbar.color
+                    : props.header.navbar.src
+                      ? 'url(' + Fast.api.cdnurl(props.header.navbar.src) + ')'
+                      : props.header.navbar.src,
+              };
+            }
+          }
+          if (props.header.navbar.mode == 'normal') {
+            mode = {
+              background:
+                props.header.navbar.type == 'color'
+                  ? props.header.navbar.color
+                  : props.header.navbar.src
+                    ? 'url(' + Fast.api.cdnurl(props.header.navbar.src) + ')'
+                    : props.header.navbar.src,
+            };
+          }
+        }
+      }
+
+      return mode
+    }
+
+    return {
+      headerStyle,
+    }
+  }
+}

public/assets/addons/shopro/components/decorate/center/navbar.js

@@ -0,0 +1,49 @@
+const CenterNavbar = {
+    template: `
+    <div class="center-navbar" v-if="
+            header.navbar.mode == 'normal' ||
+            (header.navbar.mode == 'inner' && header.navbar.alwaysShow) ||
+            isScroll
+        ">
+        <div class="navbar-wrap">
+            <div v-if="page == 'diypage'" class="item"
+                :style="{ width: scale + 'px', height: 32 + 'px', top: 0 + 'px', left: 0 + 'px' }">
+                <img class="header-diypage" src="/assets/addons/shopro/img/decorate/header-diypage.png" />
+            </div>
+            <template v-for="l in header.navbar.list[pType]" :key="l">
+                <div class="item" :style="{
+                    width: l.width * scale + 'px',
+                    height: 32 + 'px',
+                    top: 0 + 'px',
+                    left: l.left * scale + 'px',
+                }">
+                    <div v-if="l.type == 'text'" class="text sa-table-line-1" :style="{ color: l.textColor }">
+                        {{ l.text }}
+                    </div>
+                    <sa-image v-if="l.type == 'image'" :url="l.src" :size="20" :suffix="null"></sa-image>
+                    <div v-if="l.type == 'search'" class="search sa-line-1"
+                        :style="{ borderRadius: l.borderRadius + 'px' }">
+                        <el-icon class="sa-m-r-8">
+                            <Search />
+                        </el-icon>
+                        {{ l.placeholder }}
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>`,
+    emit: ['update:modelValue', 'update:show'],
+    props: ['header', 'page', 'platform', 'isScroll'],
+    setup(props) {
+
+        const { computed } = Vue
+
+        const scale = (375 - 12) / 8;
+
+        const pType = computed(() => (props.platform == 'WechatMiniProgram' ? 'mp' : 'app'));
+        return {
+            scale,
+            pType
+        }
+    }
+}

public/assets/addons/shopro/components/decorate/d-color-picker.js

@@ -0,0 +1,58 @@
+const DColorPicker = {
+    template: `
+    <div class="d-color-picker sa-flex">
+        <img class="empty" src="/assets/addons/shopro/img/decorate/picker.png" />
+        <el-color-picker v-model="color" @change="onChangeColor"></el-color-picker>
+        <el-input v-model="color" @input="onChangeColor"></el-input>
+        <el-checkbox v-if="isshow" class="sa-m-l-16" v-model="flag" :true-label="1" :false-label="0" @change="onChangeFlag">
+        </el-checkbox>
+    </div>`,
+    emit: ['update:modelValue', 'update:show'],
+    props: {
+        modelValue: {
+            type: String,
+            default: '',
+        },
+        show: {
+            type: Number,
+            default: 0,
+        },
+        isshow: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props, { emit }) {
+        const { ref, watch } = Vue
+
+        const color = ref(props.modelValue);
+        watch(
+            () => props.modelValue,
+            () => {
+                color.value = props.modelValue;
+            },
+        );
+
+        function onChangeColor() {
+            emit('update:modelValue', color.value);
+        }
+
+        const flag = ref(props.show);
+        watch(
+            () => props.show,
+            () => {
+                flag.value = props.show;
+            },
+        );
+
+        function onChangeFlag() {
+            emit('update:show', flag.value);
+        }
+        return {
+            color,
+            onChangeColor,
+            flag,
+            onChangeFlag
+        }
+    }
+}

public/assets/addons/shopro/components/decorate/d-cube.js

@@ -0,0 +1,218 @@
+const DCube = {
+    template: `
+    <div>
+        <div class="d-cube">
+            <table>
+                <tbody>
+                    <tr v-for="trItem in map.tr" :key="trItem">
+                        <td class="image-cube-item" :class="
+                state.item.minRow <= trItem &&
+                trItem <= state.item.maxRow &&
+                state.item.minCol <= tdItem &&
+                tdItem <= state.item.maxCol
+                ? 'is-active'
+                : ''
+            " :style="{
+                width: scale + 'px',
+                height: scale + 'px',
+            }" v-for="tdItem in map.td" :key="tdItem" @click.stop="onSelectImageCube(trItem, tdItem)"
+                            @mouseover="onMouseoverImageCube(trItem, tdItem)">
+                            <el-icon>
+                                <Plus />
+                            </el-icon>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div v-if="type=='page' && page == 'diypage'" class="position-left" :style="{
+                    width: scale * 2 + 'px',
+                }">
+                <img src="/assets/addons/shopro/img/decorate/header-diypage.png" />
+            </div>
+            <div v-if="type=='page' && platform == 'WechatMiniProgram'" class="WechatMiniProgram">
+                <img :src="'/assets/addons/shopro/img/decorate/header-' + platform + '.png'" />
+            </div>
+            <div class="position-item sa-flex sa-row-center" :class="state.active == sindex ? 'is-active' : ''"
+                v-for="(style, sindex) in state.cubeData" :style="{
+            width: style.width * scale + 'px',
+            height: style.height * scale + 'px',
+            top: style.top * scale + 'px',
+            left: style.left * scale + 'px',
+            }" :key="style" @mouseover="onCancelImageCubeSelect" @click.stop="onSelectImageCubePosition(sindex)">
+                {{ style.width }}*{{ style.height }}
+                <el-icon class="circle-close-filled" @click.stop="onDeleteImageCube(sindex)">
+                    <circle-close-filled />
+                </el-icon>
+            </div>
+        </div>
+        <div v-if="state.cubeData.length>0">
+            <slot name="item" :item="state.cubeData[state.active]"></slot>
+        </div>
+    </div>`,
+    emit: ['update:modelValue'],
+    props: {
+        modelValue: {
+            type: Object,
+            default: {},
+        },
+        type: String, // 组件类型
+        page: String, // template类型
+        platform: String, // 平台
+        item: Object, // 列表item
+        scale: {
+            type: Number,
+            default: 66
+        },
+        map: {
+            type: Object,
+            default: {
+                tr: 4,
+                td: 4
+            }
+        },
+    },
+    setup(props, { emit }) {
+        const { computed, reactive, watch } = Vue
+
+        const cubeType = computed(() => props.platform == 'WechatMiniProgram' ? 'mp' : 'app')
+
+        // 修改平台
+        watch(
+            () => props.platform,
+            () => {
+                if (props.type == 'imageCube') {
+                    state.cubeData = props.modelValue || [];
+                    state.selectedIndex = props.modelValue.length > 0 ? 0 : null;
+                } else if (props.type == 'page') {
+                    state.cubeData = props.modelValue[cubeType.value] || [];
+                    state.selectedIndex = props.modelValue[cubeType.value].length > 0 ? 0 : null;
+                }
+            })
+
+        const state = reactive({
+            start: { row: 0, col: 0 },
+            isFlag: false,
+            item: props.item,
+            cubeData: [],
+            active: 0,
+        })
+
+        if (props.type == 'imageCube') {
+            state.cubeData = props.modelValue || []
+        } else if (props.type == 'page') {
+            state.cubeData = props.modelValue[cubeType.value] || []
+        }
+        watch(() => props.modelValue, () => {
+            if (props.type == 'imageCube') {
+                state.cubeData = props.modelValue || []
+            } else if (props.type == 'page') {
+                state.cubeData = props.modelValue[cubeType.value] || []
+            }
+        })
+
+        // 广告魔方
+        function onSelectImageCube(row, col) {
+            // 开始的坐标
+            if (!state.isFlag) {
+                state.start.row = row;
+                state.start.col = col;
+            }
+            // 结束存储数据
+            if (state.isFlag) {
+                state.cubeData.push(JSON.parse(JSON.stringify(state.item)));
+                state.active = state.cubeData.length - 1;
+                onClearImageCubeItem();
+                onUpdateImageCube();
+            }
+            state.isFlag = !state.isFlag;
+            onMouseoverImageCube(row, col);
+        }
+        function onMouseoverImageCube(row, col) {
+            if (state.isFlag) {
+                let squaresArr = [
+                    state.start.row + '*' + state.start.col,
+                    row + '*' + col,
+                    state.start.row + '*' + col,
+                    row + '*' + state.start.col,
+                ];
+                let min = squaresArr.sort()[0].split('*');
+                let max = squaresArr.sort()[3].split('*');
+                // 面积不可重叠
+                const flag = state.cubeData.some((f) => {
+                    return isOverlap(f, {
+                        width: Math.abs(state.start.col - col) + 1,
+                        height: Math.abs(state.start.row - row) + 1,
+                        left: min[1] - 1,
+                        top: min[0] - 1,
+                    });
+                });
+                if (!flag) {
+                    // 宽高
+                    state.item = {
+                        ...props.item,
+                        width: Math.abs(state.start.col - col) + 1,
+                        height: Math.abs(state.start.row - row) + 1,
+                        top: min[0] - 1, // 定位
+                        left: min[1] - 1,
+                        minRow: min[0], // xy轴最大最小值
+                        maxRow: max[0],
+                        minCol: min[1],
+                        maxCol: max[1],
+                    }
+                }
+            }
+        }
+        function onDeleteImageCube(index) {
+            state.cubeData.splice(index, 1);
+            state.active = state.cubeData.length - 1;
+            onUpdateImageCube();
+        }
+        function onCancelImageCubeSelect() {
+            state.isFlag = false;
+            onClearImageCubeItem();
+        }
+        function onSelectImageCubePosition(index) {
+            state.active = index;
+        }
+        function onUpdateImageCube() {
+            let deleteData = ['minRow', 'maxRow', 'minCol', 'maxCol'];
+            state.cubeData.forEach((item) => {
+                deleteData.forEach((d) => {
+                    delete item[d];
+                });
+            });
+            if (props.type == 'imageCube') {
+                emit('update:modelValue', state.cubeData)
+            } else if (props.type == 'page') {
+                emit('update:modelValue', {
+                    mp: props.platform == 'WechatMiniProgram' ? state.cubeData : props.modelValue.mp,
+                    app: props.platform != 'WechatMiniProgram' ? state.cubeData : props.modelValue.app
+                })
+            }
+
+            // console.log(state.cubeData, '广告魔方数据')
+        }
+        function onClearImageCubeItem() {
+            state.item = props.item
+        }
+        function isOverlap(obj1, obj2) {
+            const l1 = { x: obj1.left, y: obj1.top };
+            const r1 = { x: obj1.left + obj1.width, y: obj1.top + obj1.height };
+            const l2 = { x: obj2.left, y: obj2.top };
+            const r2 = { x: obj2.left + obj2.width, y: obj2.top + obj2.height };
+            if (l1.x >= r2.x || l2.x >= r1.x || l1.y >= r2.y || l2.y >= r1.y) return false;
+            return true;
+        }
+        return {
+            state,
+            onSelectImageCube,
+            onMouseoverImageCube,
+            onDeleteImageCube,
+            onCancelImageCubeSelect,
+            onSelectImageCubePosition,
+            onUpdateImageCube,
+            onClearImageCubeItem,
+            isOverlap
+        }
+    }
+}

public/assets/addons/shopro/components/decorate/d-goods-select.js

@@ -0,0 +1,96 @@
+const DGoodsSelect = {
+  template: `
+    <div class="d-goods-select">
+      <div class="card">
+        <div class="title">
+          <slot name="title">商品选择</slot>
+        </div>
+        <div class="wrap">
+          <draggable
+            class="sa-flex sa-flex-wrap"
+            v-model="listData"
+            item-key="element"
+            :animation="300"
+            @end="onEnd"
+          >
+            <template #item="{ element, index }">
+              <div class="goods-item">
+                <sa-image :url="type=='goods'?element.image:element.feeds_img" size="44"></sa-image>
+                <div class="goods-delete" @click="onDelete(index)">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <slot name="add">
+            <el-button class="add-button" icon="Plus" @click="onAdd">添加</el-button>
+          </slot>
+        </div>
+      </div>
+    </div>`,
+  emit: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: Array,
+      default: [],
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    max: {
+      type: Number,
+      default: 0,
+    },
+    type: {
+      type: String,
+      default: 'goods',
+    },
+  },
+  setup(props, { emit }) {
+    const { ref, watch } = Vue
+
+    const listData = ref(props.modelValue || []);
+    watch(
+      () => props.modelValue,
+      () => {
+        listData.value = props.modelValue;
+      },
+    );
+
+    function onAdd() {
+      let multiple = true
+      let ids = []
+      listData.value.forEach(item => {
+        ids.push(item.id)
+      })
+      if (props.type == 'goods') {
+        Fast.api.open(`shopro/goods/goods/select?multiple=${multiple}&ids=${ids.join(',')}`, "选择商品", {
+          callback(data) {
+            emit('update:modelValue', data);
+          }
+        })
+      } else if (props.type == 'mplive') {
+        Fast.api.open(`shopro/app/mplive/room/select`, "选择直播间", {
+          callback(data) {
+            emit('update:modelValue', data);
+          }
+        })
+      }
+    }
+    function onDelete(index) {
+      listData.value.splice(index, 1);
+    }
+    function onEnd() {
+      emit('update:modelValue', listData.value);
+    }
+    return {
+      listData,
+      onAdd,
+      onDelete,
+      onEnd
+    }
+  }
+}

public/assets/addons/shopro/components/decorate/d-list.js

@@ -0,0 +1,69 @@
+const DList = {
+    template: `
+    <div class="d-list">
+        <div class="title">
+            <slot name="title">数据</slot>
+        </div>
+        <div class="wrap">
+            <draggable v-model="listData" item-key="element" :animation="300" handle=".sortable-drag" @end="onEnd">
+                <template #item="{ element, index }">
+                    <div class="list-item">
+                        <div class="move sa-flex">
+                            <i class="iconfont iconmove sortable-drag"></i>
+                            <slot name="deleteIcon">
+                                <span class="list-delete" @click="onDelete(index)">删除</span>
+                            </slot>
+                        </div>
+                        <slot name="listitem" :element="element"></slot>
+                    </div>
+                </template>
+            </draggable>
+            <slot name="add" v-if="listData.length != leng">
+                <el-button class="add-button" icon="Plus" @click="onAdd">添加</el-button>
+            </slot>
+        </div>
+    </div>`,
+    emit: ['update:modelValue'],
+    props: {
+        modelValue: {
+            type: Array,
+            default: [],
+        },
+        item: {
+            type: Object,
+            default: {},
+        },
+        leng: {
+            type: Number,
+            default: null,
+        },
+    },
+    setup(props, { emit }) {
+        const { ref, watch } = Vue
+
+        const listData = ref(props.modelValue);
+        watch(
+            () => props.modelValue,
+            () => {
+                listData.value = props.modelValue;
+            },
+        );
+
+        function onAdd() {
+            listData.value.push(JSON.parse(JSON.stringify(props.item)));
+        }
+        function onDelete(index) {
+            listData.value.splice(index, 1);
+        }
+
+        function onEnd() {
+            emit('update:modelValue', listData.value);
+        }
+        return {
+            listData,
+            onAdd,
+            onDelete,
+            onEnd
+        }
+    }
+}

public/assets/addons/shopro/components/decorate/d-slider.js

@@ -0,0 +1,48 @@
+const DSlider = {
+    template: `
+    <div class="d-slider sa-flex">
+    <el-slider v-model="sliderValue" :show-tooltip="false" @input="onChangeSlider"></el-slider>
+    <el-input v-model="sliderInput" type="number" @input="onChangeInput">
+      <template #suffix>
+        <span class="el-input__icon">PX</span>
+      </template>
+    </el-input>
+  </div>`,
+    emit: ['update:modelValue'],
+    props: {
+        modelValue: {
+            type: Number,
+            default: 0,
+        },
+        mult: {
+            type: Number,
+            default: 1,
+        },
+    },
+    setup(props, { emit }) {
+        const { ref, watch } = Vue
+
+        const sliderValue = ref(props.modelValue / props.mult);
+        const sliderInput = ref(props.modelValue);
+        watch(() => props.modelValue, () => {
+            sliderValue.value = props.modelValue / props.mult;
+            sliderInput.value = props.modelValue;
+        })
+
+        function onChangeSlider(sv) {
+            sliderInput.value = Number(sv * props.mult);
+            emit('update:modelValue', Number(sv * props.mult));
+        }
+
+        function onChangeInput(si) {
+            sliderValue.value = Number(si / props.mult);
+            emit('update:modelValue', Number(si));
+        }
+        return {
+            sliderValue,
+            sliderInput,
+            onChangeSlider,
+            onChangeInput
+        }
+    }
+}

public/assets/addons/shopro/components/decorate/d-text-color.js

@@ -0,0 +1,52 @@
+const DTextColor = {
+    template: `
+    <div class="d-text-color sa-flex">
+        <el-input v-model="modelValue.text" :placeholder="placeholder" :maxlength="maxlength"
+            :show-word-limit="showWordLimit" @input="onChange"></el-input>
+        <div class="color sa-flex">
+            <img class="empty" src="/assets/addons/shopro/img/decorate/picker.png" />
+            <el-color-picker v-model="modelValue.color" @change="onChange" />
+        </div>
+    </div>`,
+    emit: ['update:modelValue'],
+    props: {
+        modelValue: {
+            type: Object,
+            default: {
+                text: '',
+                color: ''
+            }
+        },
+        placeholder: {
+            type: String,
+            default: '请输入',
+        },
+        maxlength: {
+            type: [String, Number],
+            default: '',
+        },
+        showWordLimit: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props, { emit }) {
+        const { ref, watch } = Vue
+
+        const textColor = ref(props.modelValue);
+        watch(
+            () => props.modelValue,
+            () => {
+                textColor.value = props.modelValue;
+            },
+        );
+
+        function onChange() {
+            emit('update:modelValue', textColor.value);
+        }
+        return {
+            textColor,
+            onChange
+        }
+    }
+}

public/assets/addons/shopro/components/decorate/d-url.js

@@ -0,0 +1,48 @@
+const DUrl = {
+    template: `
+    <div class="d-url sa-flex">
+        <el-input v-model="path" :placeholder="placeholder" @input="onChangeUrl">
+        <template #append>
+            <span class="cursor-pointer" @click="onSelectUrl">选择</span>
+        </template>
+        </el-input>
+    </div>`,
+    emit: ['update:modelValue'],
+    props: {
+        modelValue: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '请输入或选择',
+        },
+    },
+    setup(props, { emit }) {
+        const { ref, watch } = Vue
+
+        const path = ref(props.modelValue);
+        watch(
+            () => props.modelValue,
+            () => {
+                path.value = props.modelValue;
+            },
+        );
+
+        function onChangeUrl() {
+            emit('update:modelValue', path.value);
+        }
+        function onSelectUrl() {
+            Fast.api.open("shopro/data/page/select", "选择链接", {
+                callback(data) {
+                    emit('update:modelValue', data.path);
+                }
+            })
+        }
+        return {
+            path,
+            onChangeUrl,
+            onSelectUrl
+        }
+    }
+}

public/assets/addons/shopro/components/sa-filter-condition.js

@@ -0,0 +1,40 @@
+const SaFilterCondition = {
+    template: `
+    <div class="condition-wrap">
+        <div class="condition-item" v-for="(value,key) in filter.condition">
+            {{value}}
+            <el-icon class="close">
+                <close />
+            </el-icon>
+            <el-icon class="circle-close-filled" @click="onDeleteFilter(key)">
+                <circle-close-filled />
+            </el-icon>
+        </div>
+    </div>`,
+    emit: ['update:modelValue'],
+    props: {
+        modelValue: {
+            type: Object,
+            default: ''
+        }
+    },
+    setup(props, { emit }) {
+        const { ref, watch } = Vue
+        const filter = ref(props.modelValue)
+
+        watch(() => props.modelValue, () => {
+            filter.value = props.modelValue
+        })
+
+        function onDeleteFilter(key) {
+            filter.value.data[key] = JSON.parse(JSON.stringify(filter.value.tools[key].value))
+            delete filter.value.condition[key]
+            emit('update:modelValue', filter.value)
+            emit('filter-delete', key)
+        }
+        return {
+            filter,
+            onDeleteFilter,
+        }
+    }
+}

public/assets/addons/shopro/components/sa-filter.js

@@ -0,0 +1,233 @@
+/**
+ * @description 搜索
+ * @param { Object } modelValue
+ *  modelValue = {
+        drawer: false,
+        data: {
+            title: '',
+            order: { field: 'id', value: '' },
+            type: '',
+            category_ids: [],
+            create_time: [],
+        },
+        tools: {
+            title: {
+                type: 'tinput',
+                label: '商品名称',
+                placeholder: '',
+                value: '',
+            },
+            order: {
+                type: 'tinputprepend',
+                label: '查询内容',
+                placeholder: '请输入查询内容',
+                value: {
+                    field: 'id',
+                    value: '',
+                },
+                options: {
+                    data: [{
+                        label: '订单ID',
+                        value: 'id',
+                    },
+                    {
+                        label: '订单编号',
+                        value: 'order_sn',
+                    },
+                    {
+                        label: '售后单号',
+                        value: 'aftersale.aftersale_sn',
+                    }]
+                },
+            },
+            type: {
+                type: 'tselect',
+                label: '订单类型',
+                placeholder: '',
+                value: '',
+                options: {
+                    data: [{
+                        name: '订单ID',
+                        type: 'id',
+                    }],
+                    props: {
+                        label: 'name',
+                        value: 'type',
+                    },
+                },
+            },
+            category_ids: {
+                type: 'tcascader',
+                label: '商品分类',
+                placeholder: '',
+                value: [],
+                options: {
+                    data: [],
+                    props: {
+                        children: 'children',
+                        label: 'name',
+                        value: 'id',
+                        checkStrictly: true,
+                        emitPath: false,
+                        multiple: true,
+                    },
+                },
+            },
+            create_time: {
+                type: 'tdatetimerange',
+                label: '下单时间',
+                placeholder: '',
+                value: [],
+            },
+        },
+        condition: {}
+    }
+ * @function filter-change
+ */
+
+const SaFilter = {
+    template: `
+    <el-drawer custom-class="sa-filter" v-model="filter.drawer" direction="rtl">
+        <el-container>
+            <el-header class="sa-filter-header sa-flex sa-row-between">
+                <div>筛选</div>
+                <el-icon @click="onClose">
+                    <Close />
+                </el-icon>
+            </el-header>
+            <el-main>
+                <el-form label-position="top" label-width="120px">
+                    <el-form-item v-for="(value,key) in filter.tools" :label="value.label">
+                        <template v-if="value.type=='tinput'">
+                            <el-input v-model="filter.data[key]" :placeholder="value.placeholder || value.label"></el-input>
+                        </template>
+                        <template v-if="value.type=='tinputprepend'">
+                            <el-input v-model="filter.data[key].value" :placeholder="value.placeholder || value.label">
+                                <template #prepend>
+                                    <el-select v-model="filter.data[key].field" placeholder="Select">
+                                        <el-option v-for="option in value.options.data" :key="option.value"
+                                            :label="option.label || option[value.options.props.label]"
+                                            :value="option.value || option[value.options.props.value]">
+                                        </el-option>
+                                    </el-select>
+                                </template>
+                            </el-input>
+                        </template>
+                        <template v-if="value.type=='tselect'">
+                            <el-select v-model="filter.data[key]" :placeholder="value.placeholder || value.label">
+                                <el-option v-for="option in value.options.data" :key="option.value"
+                                    :label="option.label || option[value.options.props.label]"
+                                    :value="option.value || option[value.options.props.value]">
+                                </el-option>
+                            </el-select>
+                        </template>
+                        <template v-if="value.type=='tcascader'">
+                            <el-cascader :ref="(el) => setCascaderRef(el, key)" v-model="filter.data[key]"
+                                :options="value.options.data" :props="value.options.props"
+                                :placeholder="value.placeholder || value.label" size="default" clearable></el-cascader>
+                        </template>
+                        <template v-if="value.type == 'tdatetimerange'">
+                            <el-date-picker v-model="filter.data[key]" type="datetimerange"
+                                value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
+                                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
+                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :editable="false">
+                            </el-date-picker>
+                        </template>
+                    </el-form-item>
+                    <slot name="supplement"></slot>
+                </el-form>
+            </el-main>
+            <el-footer class="sa-footer--submit sa-flex sa-row-right">
+                <el-button @click="onReset">重置</el-button>
+                <el-button type="primary" @click="onConfirm">提交</el-button>
+            </el-footer>
+        </el-container>
+    </el-drawer>`,
+    emit: ['update:modelValue', 'filter-change'],
+    props: {
+        modelValue: {
+            type: Object,
+            default: ''
+        }
+    },
+    setup(props, { emit }) {
+        const { ref } = Vue
+        const filter = ref(props.modelValue)
+
+        let tempFilter = JSON.parse(JSON.stringify(filter.value))
+
+        let cascaderRef = {};
+        const setCascaderRef = (el, key) => {
+            if (el) {
+                cascaderRef[key] = el;
+            }
+        };
+
+        function onConfirm() {
+            filter.value.condition = {}
+            for (key in filter.value.tools) {
+                let props = {
+                    label: 'label',
+                    value: 'value'
+                }
+                if (filter.value.tools[key].type == 'tinput') {
+                    if (filter.value.data[key]) {
+                        filter.value.condition[key] = `${filter.value.tools[key].label}:${filter.value.data[key]}`
+                    }
+                } else if (filter.value.tools[key].type == 'tinputprepend') {
+                    if (filter.value.tools[key].options.props) {
+                        props = { ...props, ...filter.value.tools[key].options.props }
+                    }
+                    let findItem = filter.value.tools[key].options.data.find(item => item[props.value] == filter.value.data[key].field)
+                    if (filter.value.data[key].value && findItem) {
+                        filter.value.condition[key] = `${findItem[props.label]}:${filter.value.data[key].value}`
+                    }
+                } else if (filter.value.tools[key].type == 'tselect') {
+                    if (filter.value.data[key] && filter.value.data[key] != 'all') {
+                        if (filter.value.tools[key].options.props) {
+                            props = { ...props, ...filter.value.tools[key].options.props }
+                        }
+                        let findItem = filter.value.tools[key].options.data.find(item => item[props.value] == filter.value.data[key])
+                        if (findItem) {
+                            filter.value.condition[key] = `${filter.value.tools[key].label}:${findItem[props.label]}`
+                        }
+                    }
+                } else if (filter.value.tools[key].type == 'tcascader') {
+                    let text = []
+                    cascaderRef[key].getCheckedNodes().forEach(item => {
+                        text.push(item.text)
+                    })
+                    if (text.length > 0) {
+                        filter.value.condition[key] = `${filter.value.tools[key].label}:${text.join(',')}`
+                    }
+                } else if (filter.value.tools[key].type == 'tdatetimerange') {
+                    if (filter.value.data[key].length > 0) {
+                        filter.value.condition[key] = `${filter.value.tools[key].label}:${filter.value.data[key].join(' - ')}`
+                    }
+                }
+            }
+            emit('update:modelValue', filter.value)
+            emit('filter-change')
+        }
+        function onReset() {
+            for (key in filter.value.tools) {
+                filter.value.data[key] = JSON.parse(JSON.stringify(tempFilter.tools[key].value))
+            }
+            filter.value.condition = {}
+            emit('update:modelValue', filter.value)
+            emit('filter-change')
+        }
+        function onClose() {
+            filter.value.drawer = false
+            emit('update:modelValue', filter.value)
+        }
+        return {
+            filter,
+            cascaderRef,
+            setCascaderRef,
+            onConfirm,
+            onReset,
+            onClose
+        }
+    }
+}

public/assets/addons/shopro/components/sa-image.js

@@ -0,0 +1,60 @@
+const SaImage = {
+    template: `
+    <div class="sa-image" :style="itemStyle">
+        <el-image v-for="item in urlList" :src="Fast.api.cdnurl(item)" :fit="fit"
+            :preview-src-list="ispreview?[Fast.api.cdnurl(item)]:[]" :preview-teleported="true">
+            <template #error>
+                <el-icon>
+                    <Picture />
+                </el-icon>
+            </template>
+        </el-image>
+    </div>`,
+    props: {
+        url: {
+            type: String,
+            default: ''
+        },
+        size: {
+            type: [String, Number],
+            default: ''
+        },
+        fit: {
+            type: String,
+            default: 'contain'
+        },
+        radius: {
+            type: [String, Number],
+            default: 4
+        },
+        ispreview: {
+            type: Boolean,
+            default: true
+        },
+    },
+    setup(props) {
+        const { ref, watch, computed } = Vue
+
+        const urlList = ref(props.url ? props.url.split(',') : [''])
+        watch(() => props.url, () => {
+            urlList.value = props.url ? props.url.split(',') : ['']
+        })
+
+        const itemStyle = computed(() => {
+            let style = {}
+            if (props.size) {
+                style = {
+                    width: `${props.size}px`,
+                    height: `${props.size}px`,
+                    'border-radius': `${props.radius}px`
+                }
+            }
+            return style
+        })
+        return {
+            Fast,
+            urlList,
+            itemStyle,
+        }
+    }
+}

public/assets/addons/shopro/components/sa-pagination.js

@@ -0,0 +1,41 @@
+const SaPagination = {
+    template: `
+    <el-pagination class="sa-pagination" v-model:current-page="paginationData.page" v-model:page-size="paginationData.list_rows"
+        :page-sizes="[10, 50, 100]" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
+        :total="paginationData.total" @size-change="onChangeSize" @current-change="onChangeCurrent">
+    </el-pagination>`,
+    emit: ['update:modelValue', 'pagination-change'],
+    props: {
+        modelValue: {
+            type: Object,
+            default: {
+                page: 1,
+                list_rows: 10,
+                total: 0,
+            }
+        }
+    },
+    setup(props, { emit }) {
+        const { ref } = Vue
+
+        const paginationData = ref(props.modelValue)
+
+        function onChangeSize(e) {
+            paginationData.value.list_rows = e
+            emit('update:modelValue', paginationData.value)
+            emit('pagination-change')
+        }
+
+        function onChangeCurrent(e) {
+            paginationData.value.page = e
+            emit('update:modelValue', paginationData.value)
+            emit('pagination-change')
+        }
+
+        return {
+            paginationData,
+            onChangeSize,
+            onChangeCurrent
+        }
+    }
+}

public/assets/addons/shopro/components/sa-uploader.js

@@ -0,0 +1,121 @@
+const SaUploader = {
+    template: `
+    <div class="sa-uploader">
+        <draggable class="sa-flex sa-flex-wrap" v-model="urlList" :animation="300" item-key="element"
+            handle=".sortable-drag" @end="emit('update:modelValue', multiple ? urlList : urlList.join(','))">
+            <template #item="{ element, index }">
+                <div class="sa-uploader-item" :style="itemStyle">
+                    <template v-if="element.includes('.avi') || element.includes('.mov') || element.includes('.rmvb') || element.includes('.rm')
+                        || element.includes('.flv') || element.includes('.mp4') || element.includes('.3gp')
+                        ">
+                        <el-dialog class="sa-dialog-video sa-dialog" v-model="previewVisible" fullscreen>123
+                            <video :src="Fast.api.cdnurl(element)" controls></video>
+                        </el-dialog>
+                        <video class="sa-video" :src="Fast.api.cdnurl(element)" @click.stop="previewVisible = true"></video>
+                    </template>
+                    <el-image v-else :ref="'imageRef_'+index" :src="Fast.api.cdnurl(element)" fit="contain"
+                        :preview-src-list="[Fast.api.cdnurl(element)]" :preview-teleported="true"
+                        @load="onImageLoaded"
+                        >
+                        <template #error>
+                            <el-icon>
+                                <Picture />
+                            </el-icon>
+                        </template>
+                    </el-image>
+                    <div class="mask">
+                        <el-icon v-if="multiple" class="sortable-drag">
+                            <Rank />
+                        </el-icon>
+                        <el-icon @click="onDeleteFile(index)">
+                            <CircleCloseFilled />
+                        </el-icon>
+                    </div>
+                </div>
+            </template>
+        </draggable>
+        <div v-if="multiple || (!multiple && urlList.length==0)" class="sa-uploader-item add" :style="itemStyle"
+            @click="onSelectFile">
+            <el-image fit="contain">
+                <template #error>
+                    <el-icon>
+                        <Plus />
+                    </el-icon>
+                </template>
+            </el-image>
+        </div>
+    </div>`,
+    emit: ['update:modelValue', 'success'],
+    props: {
+        modelValue: {
+            type: [Array, String],
+            default: ''
+        },
+        size: {
+            type: [String, Number],
+            default: ''
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        type: {
+            type: String,
+            default: ''
+        },
+    },
+    setup(props, { emit }) {
+        const { ref, computed, watch, nextTick, getCurrentInstance } = Vue
+
+        const { proxy } = getCurrentInstance();
+
+        const urlList = ref(props.modelValue ? isArray(props.modelValue) ? props.modelValue : props.modelValue.split(',') : [])
+        watch(() => props.modelValue, () => {
+            urlList.value = props.modelValue ? isArray(props.modelValue) ? props.modelValue : props.modelValue.split(',') : []
+        })
+
+        const itemStyle = computed(() => ({
+            width: `${props.size}px`,
+            height: `${props.size}px`
+        }))
+
+        const previewVisible = ref(false)
+
+        // 图片加载完毕
+        function onImageLoaded() {
+            nextTick(() => {
+                if (props.type === 'size') {
+                    emit('success', { image_width: proxy.$refs.imageRef_0._.refs.container.firstChild.naturalWidth, image_height: proxy.$refs.imageRef_0._.refs.container.firstChild.naturalHeight })
+                }
+            })
+        }
+
+        function onSelectFile() {
+            Fast.api.open(`general/attachment/select?multiple=${props.multiple}`, "选择", {
+                callback: function (data) {
+                    data.url.split(',').forEach(item => {
+                        urlList.value.push(item)
+                    });
+                    emit('update:modelValue', props.multiple ? urlList.value : urlList.value.join(','))
+                }
+            });
+        }
+        function onDeleteFile(index) {
+            urlList.value.splice(index, 1)
+            emit('update:modelValue', props.multiple ? urlList.value : urlList.value.join(','))
+        }
+
+
+        return {
+            Fast,
+            props,
+            emit,
+            urlList,
+            itemStyle,
+            previewVisible,
+            onSelectFile,
+            onDeleteFile,
+            onImageLoaded
+        }
+    }
+}

public/assets/addons/shopro/components/sa-user-profile.js

@@ -0,0 +1,136 @@
+const SaUserProfile = {
+    template: `
+    <div class="sa-user-profile" :class="type != 'oper' ? 'mode-'+mode : ''">
+        <template v-if="type != 'oper'">
+            <template v-if="userData">
+                <template v-if="ishover">
+                    <el-popover placement="top" trigger="hover" popper-class="profile-popover sa-user-profile sa-popper">
+                        <div class="sa-flex">
+                            <div class="avatar">
+                                <sa-image v-if="userData.avatar" :url="userData.avatar"></sa-image>
+                                <img v-else class="default-avatar" src="/assets/addons/shopro/img/default-avatar.png" />
+                                <!-- 0未知 1男  -->
+                                <img v-if="userData && (userData.gender || userData.gender==0)" class="gender"
+                                    :src="'/assets/addons/shopro/img/gender-'+userData.gender+'.png'">
+                            </div>
+                            <div>
+                                <div class="text-name sa-table-line-1">
+                                    {{ userData.nickname }}
+                                </div>
+                                <div class="sa-flex">
+                                    <div class="id" @click="onOpenUserDetail(id)">#{{ id }}</div>
+                                    <div class="text-desc">
+                                        {{ userData.username || userData.account }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <template #reference>
+                            <div class="wrap">
+                                <div v-if="isavatar" class="avatar">
+                                    <sa-image v-if="userData.avatar" :url="userData.avatar"></sa-image>
+                                    <img v-else class="default-avatar" src="/assets/addons/shopro/img/default-avatar.png" />
+                                </div>
+                                <div class="text-name is-hover sa-table-line-1">
+                                    {{ userData.nickname }}
+                                </div>
+                            </div>
+                        </template>
+                    </el-popover>
+                </template>
+                <div v-else class="wrap">
+                    <div v-if="isavatar" class="avatar">
+                        <sa-image v-if="userData.avatar" :url="userData.avatar"></sa-image>
+                        <img v-else class="default-avatar" src="/assets/addons/shopro/img/default-avatar.png" />
+                    </div>
+                    <div class="text-name sa-table-line-1">
+                        {{ userData.nickname }}
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <template v-if="type == 'agent'">
+                    {{ id ? '未找到用户' : id == 0 ? '平台直推' : '暂无推荐人' }}
+                </template>
+            </template>
+        </template>
+        <template v-if="type == 'oper'">
+            <div class="wrap">
+                <template v-if="userData">
+                    <div class="avatar mr-2">
+                        <sa-image v-if="userData.type != 'system' && userData.avatar" :url="userData.avatar"></sa-image>
+                        <img v-else class="default-avatar" src="/assets/addons/estore/img/default-avatar.png" />
+                    </div>
+                    <div>
+                        <template v-if="userData.type != 'system'">
+                            <div class="text-name sa-table-line-1">
+                                {{ userData.name || '未找到' }}
+                            </div>
+                            <div class="sa-flex">
+                                <div class="id">#{{ id }}</div>
+                                <div class="text-desc">
+                                    {{ userData.type_text }}
+                                </div>
+                            </div>
+                        </template>
+                        <template v-else>{{ userData.type_text }}</template>
+                    </div>
+                </template>
+                <template v-else>#{{id}}</template>
+            </div>
+        </template>
+    </div>`,
+    props: {
+        user: Object,
+        id: [Number, String],
+        type: {
+            type: String,
+            default: 'user',
+        },
+        mode: {
+            type: String,
+            default: 'row',
+        },
+        isavatar: {
+            type: Boolean,
+            default: true,
+        },
+        ishover: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    setup(props) {
+        const { ref, computed } = Vue
+
+        const userData = computed(() => {
+            let obj = props.user;
+
+            if (props.type == 'user' && !props.user) {
+                obj = {
+                    avatar: '',
+                    nickname: '未找到用户',
+                    username: '',
+                };
+            }
+            if (props.type == 'admin' && !props.user) {
+                obj = {
+                    avatar: '',
+                    nickname: '未找到用户',
+                    account: '',
+                };
+            }
+
+            return obj;
+        });
+
+        function onOpenUserDetail(id) {
+            Fast.api.open(`shopro/user/user/detail?id=${id}`, "会员详情")
+        }
+        return {
+            Fast,
+            userData,
+            onOpenUserDetail,
+        }
+    }
+}

public/assets/addons/shopro/css/dark.css

@@ -0,0 +1,214 @@
+body,
+div,
+span,
+header,
+footer,
+nav,
+section,
+aside,
+article,
+ul,
+dl,
+dt,
+dd,
+li,
+a,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+i,
+b,
+button,
+input,
+select,
+figure,
+figcaption {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    font-style: normal;
+    text-decoration: none;
+    border: none;
+    background: none;
+    font-weight: normal;
+    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei,
+        Source Han Sans SC, Noto Sans CJK SC, sans-serif;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+}
+
+a:link {
+    color: var(--el-color-primary);
+}
+
+a:visited {
+    color: var(--t-btn-focus);
+}
+
+a:hover {
+    color: var(--t-btn-hover);
+}
+
+a:active {
+    color: var(--t-btn-active);
+}
+
+[v-cloak] {
+    display: none
+}
+
+label {
+    font-weight: normal;
+    margin-bottom: 0;
+}
+
+/* fast open样式重置 */
+.is-dialog .content {
+    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.is-dialog .content .panel-block {
+    height: 100vh;
+}
+
+body.darktheme  {
+    /* color-scheme: dark; */
+
+    --sa-title: #d6d6d6;
+    --sa-subtitle: #c2c2c2;
+    --sa-font: #adadad;
+    --sa-subfont: #7e7e7e;
+    --sa-place: #525252;
+
+    --sa-border: #464646;
+    --sa-border-secondary: #3e3e3e;
+    --sa-space: #363636;
+
+    --sa-table-header-bg: #323232;
+    --sa-table-striped: #303030;
+
+    --sa-page-background: #121212;
+    --sa-card-background: #2c2c2c;
+
+    --sa-background-assist: #2c2c2c;
+    --sa-bg-assist-1: #404040;
+
+    --sa-box-shadow: rgba(0, 0, 0, 0.24);
+    --sa-mask-background: rgba(46, 46, 46, 0.8);
+
+    --sa-footer-bg: #2c2c2c;
+    --sa-footer-color: #c2c2c2;
+    --sa-footer-color-1: #525252;
+
+    --t-bg-hover: #33313c;
+    --t-bg-focus: #363344;
+    --t-bg-active: #39364c;
+    --t-bg-disabled: #313038;
+    --t-btn-hover: #6d60c7;
+    --t-btn-focus: #7560e2;
+    --t-btn-active: #806af6;
+    --sa-background-hex-hover: #33313c;
+    --sa-background-hex-active: #403b5c;
+
+    /* --el-color-primary: #409eff;
+    --el-color-primary-light-3: #3375b9;
+    --el-color-primary-light-5: #2a598a;
+    --el-color-primary-light-7: #213d5b;
+    --el-color-primary-light-8: #1d3043;
+    --el-color-primary-light-9: #18222c;
+    --el-color-primary-dark-2: #66b1ff; */
+    --el-color-success: #67c23a;
+    --el-color-success-light-3: #4e8e2f;
+    --el-color-success-light-5: #3e6b27;
+    --el-color-success-light-7: #2d481f;
+    --el-color-success-light-8: #25371c;
+    --el-color-success-light-9: #1c2518;
+    --el-color-success-dark-2: #85ce61;
+    --el-color-warning: #e6a23c;
+    --el-color-warning-light-3: #a77730;
+    --el-color-warning-light-5: #7d5b28;
+    --el-color-warning-light-7: #533f20;
+    --el-color-warning-light-8: #3e301c;
+    --el-color-warning-light-9: #292218;
+    --el-color-warning-dark-2: #ebb563;
+    --el-color-danger: #f56c6c;
+    --el-color-danger-light-3: #b25252;
+    --el-color-danger-light-5: #854040;
+    --el-color-danger-light-7: #582e2e;
+    --el-color-danger-light-8: #412626;
+    --el-color-danger-light-9: #2b1d1d;
+    --el-color-danger-dark-2: #f78989;
+    --el-color-error: #f56c6c;
+    --el-color-error-light-3: #b25252;
+    --el-color-error-light-5: #854040;
+    --el-color-error-light-7: #582e2e;
+    --el-color-error-light-8: #412626;
+    --el-color-error-light-9: #2b1d1d;
+    --el-color-error-dark-2: #f78989;
+    --el-color-info: #909399;
+    --el-color-info-light-3: #6b6d71;
+    --el-color-info-light-5: #525457;
+    --el-color-info-light-7: #393a3c;
+    --el-color-info-light-8: #2d2d2f;
+    --el-color-info-light-9: #202121;
+    --el-color-info-dark-2: #a6a9ad;
+    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
+    --el-bg-color-page: #0a0a0a;
+    --el-bg-color: #141414;
+    --el-bg-color-overlay: #1d1e1f;
+    --el-text-color-primary: #E5EAF3;
+    --el-text-color-regular: #CFD3DC;
+    --el-text-color-secondary: #A3A6AD;
+    --el-text-color-placeholder: #8D9095;
+    --el-text-color-disabled: #6C6E72;
+    --el-border-color-darker: #636466;
+    --el-border-color-dark: #58585B;
+    --el-border-color: #4C4D4F;
+    --el-border-color-light: #414243;
+    --el-border-color-lighter: #363637;
+    --el-border-color-extra-light: #2B2B2C;
+    --el-fill-color-darker: #424243;
+    --el-fill-color-dark: #39393A;
+    --el-fill-color: #303030;
+    --el-fill-color-light: #262727;
+    --el-fill-color-lighter: #1D1D1D;
+    --el-fill-color-extra-light: #191919;
+    --el-fill-color-blank: transparent;
+    --el-mask-color: rgba(0, 0, 0, 0.8);
+    --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+    --el-disabled-bg-color: var(--sa-background-hex-hover);
+    --el-disabled-text-color: var(--sa-place);
+    --el-disabled-border-color: var(--el-border-color-light);
+}
+
+body.darktheme .el-button {
+    --el-button-disabled-text-color: rgba(255, 255, 255, 0.5)
+}
+
+body.darktheme .el-card {
+    --el-card-bg-color: var(--el-bg-color-overlay)
+}
+
+body.darktheme .el-empty {
+    --el-empty-fill-color-0: var(--el-color-black);
+    --el-empty-fill-color-1: #4b4b52;
+    --el-empty-fill-color-2: #36383d;
+    --el-empty-fill-color-3: #1e1e20;
+    --el-empty-fill-color-4: #262629;
+    --el-empty-fill-color-5: #202124;
+    --el-empty-fill-color-6: #212224;
+    --el-empty-fill-color-7: #1b1c1f;
+    --el-empty-fill-color-8: #1c1d1f;
+    --el-empty-fill-color-9: #18181a
+}

public/assets/addons/shopro/css/index.css

@@ -0,0 +1,89 @@
+body,
+div,
+span,
+header,
+footer,
+nav,
+section,
+aside,
+article,
+ul,
+dl,
+dt,
+dd,
+li,
+a,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+i,
+b,
+button,
+input,
+select,
+figure,
+figcaption {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    font-style: normal;
+    text-decoration: none;
+    border: none;
+    background: none;
+    font-weight: normal;
+    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei,
+        Source Han Sans SC, Noto Sans CJK SC, sans-serif;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+}
+
+a:link {
+    color: var(--el-color-primary);
+}
+
+a:visited {
+    color: var(--t-btn-focus);
+}
+
+a:hover {
+    color: var(--t-btn-hover);
+}
+
+a:active {
+    color: var(--t-btn-active);
+}
+
+[v-cloak] {
+    display: none
+}
+
+label {
+    font-weight: normal;
+    margin-bottom: 0;
+}
+
+/* fast open样式重置 */
+.is-dialog .content {
+    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.is-dialog .content .panel-block {
+    height: 100vh;
+}
+
+/* 修复css 弹窗 */
+.layui-layer-content {
+    height: calc(100% - 45px);
+}
+
+.layui-layer-iframe iframe {
+    height: 100% !important;
+}