st-comp 0.0.277 → 0.0.279

package/packages/MonacoEditor/tools.js

@@ -1,18 +0,0 @@
-/**
- * 从函数内容中提取变量名
- * @param {string} content - 函数内容
- * @returns {string[]} 变量名数组
- */
-export const extractVariables = (content) => {
-  if (!content) return [];
-
-  const regex = /\$\{([^}]+)\}/g;
-  const variables = [];
-  let match;
-
-  while ((match = regex.exec(content)) !== null) {
-    variables.push(match[1]);
-  }
-
-  return [...new Set(variables)]; // 去重
-};

package/packages/Pagination/index.ts

@@ -1,8 +0,0 @@
-import { App } from "vue";
-import StPagination from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("st-pagination", StPagination);
-  },
-}

package/packages/Pagination/index.vue

@@ -1,87 +0,0 @@
-<template>
-  <el-config-provider :locale="zhCn">
-    <el-pagination
-      class="st-pagination"
-      v-show="total"
-      v-model:currentPage="currentPage"
-      v-model:page-size="pageSize"
-      :total="total"
-      :background="background"
-      :page-sizes="pageSizes"
-      :layout="layout"
-      v-bind="$attrs"
-      @size-change="change"
-      @current-change="change"
-    />
-  </el-config-provider>
-</template>
-
-<script setup lang="ts">
-  import zhCn from 'element-plus/es/locale/lang/zh-cn'
-  import { computed } from 'vue'
-
-  const emit = defineEmits(['update:pageData', 'change'])
-  /**
-   * 组件接收参数
-   * @param {Object} pageData 页码和每页条数
-   * @param {Number} total 分页总数
-   * @param {Array<number>} pageSizes 每页显示个数选择器的选项
-   * @param {Boolean} background 是否显示背景色
-   * @param {String} layout 分页组件的布局
-   */
-  const props = defineProps({
-    pageData: {
-      type: Object,
-      default: () => ({ pageNum: 1, pageSize: 10 }),
-    },
-    total: {
-      type: Number,
-      default: 0,
-    },
-    pageSizes: {
-      type: Array,
-      default: () => [10, 20, 30, 50],
-    },
-    background: {
-      type: Boolean,
-      default: true,
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper',
-    },
-  })
-
-  const currentPage = computed({
-    get() {
-      return props.pageData.pageNum
-    },
-    set(value) {
-      emit('update:pageData', { ...props.pageData, pageNum: value })
-    },
-  })
-  const pageSize = computed({
-    get() {
-      return props.pageData.pageSize
-    },
-    set(value) {
-      emit('update:pageData', { ...props.pageData, pageSize: value })
-    },
-  })
-
-  /**
-   * 分页数据变动
-   */
-  const change = () => {
-    emit('change', props.pageData)
-  }
-</script>
-
-<style lang="scss" scoped>
-  .st-pagination {
-    width: 100%;
-    padding: 20px 0;
-    display: flex;
-    justify-content: flex-end;
-  }
-</style>

package/packages/PasswordPrompt/index.ts

@@ -1,8 +0,0 @@
-import { App } from "vue";
-import StPasswordPrompt from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("st-passwordPrompt", StPasswordPrompt);
-  },
-}

package/packages/PasswordPrompt/index.vue

@@ -1,267 +0,0 @@
-<script setup>
-import { CircleCheck } from "@element-plus/icons-vue";
-import { computed } from "vue";
-
-const props = defineProps({
-  // 密码
-  value: {
-    type: String,
-    default: "",
-  },
-  // 是否聚焦密码框
-  isFocus: {
-    type: Boolean,
-    default: false,
-  },
-  // 文案颜色
-  textColor: {
-    type: [String, null],
-    default: null,
-  },
-});
-
-// 密码统一校验
-const pwdValidators = [
-  {
-    text: "不能包含空格",
-    validator: (val) => {
-      return !/\s/.test(val);
-    },
-  },
-  {
-    text: "长度为8-18个字符",
-    validator: (val) => {
-      return val.length >= 8 && val.length <= 18;
-    },
-  },
-  {
-    text: "必须包含字母、数字、符号中至少2种",
-    validator: (val) => {
-      const hasLetter = /[a-zA-Z]/.test(val);
-      const hasNumber = /\d/.test(val);
-      const hasSymbol = /[^a-zA-Z0-9]/.test(val);
-      return [hasLetter, hasNumber, hasSymbol].filter(Boolean).length >= 2;
-    },
-  },
-  {
-    text: "请勿输入连续、重复6位以上字母或数字, 0123456, 1111111",
-    validator: (val) => {
-      // 检查是否有6位以上的重复字符
-      const repeatingChars = /([a-zA-Z0-9])\1{6,}/;
-      if (repeatingChars.test(val)) return false;
-
-      // 检查是否有6位以上的连续数字
-      const consecutiveNumbers = /(?:0123456|1234567|2345678|3456789|9876543|8765432|7654321|6543210)/;
-      if (consecutiveNumbers.test(val)) return false;
-
-      // 检查是否有6位以上的连续字母
-      const lowerVal = val.toLowerCase();
-      const isConsecutiveLetters = (str) => {
-        if (!/^[a-z]+$/.test(str)) return false;
-        for (let i = 1; i < str.length; i++) {
-          if (str.charCodeAt(i) !== str.charCodeAt(i - 1) + 1) {
-            return false;
-          }
-        }
-        return true;
-      };
-      for (let i = 0; i <= lowerVal.length - 7; i++) {
-        const segment = lowerVal.substr(i, 7);
-        if (isConsecutiveLetters(segment)) {
-          return false;
-        }
-      }
-      return true;
-    },
-  },
-];
-
-// 基础规则校验是否全部通过
-const allSuccessValidator = computed(() => {
-  const result = pwdValidators.map((item) => item.validator(props.value));
-  return !result.includes(false);
-});
-
-// 密码强度等级(得分制)
-const levelValue = computed(() => {
-  const password = props.value;
-  if (!password) return 0;
-  // 初始得分
-  let score = 0;
-  {
-    // 长度检查
-    if (password.length >= 8) score++;
-    if (password.length >= 12) score++;
-    // 包含数字
-    if (/\d/.test(password)) score++;
-    // 包含小写字母
-    if (/[a-z]/.test(password)) score++;
-    // 包含大写字母
-    if (/[A-Z]/.test(password)) score++;
-    // 包含特殊字符
-    if (/[^a-zA-Z0-9]/.test(password)) score++;
-  }
-  // 将分数映射到1-3的强度等级
-  if (score <= 2) return 1;
-  else if (score <= 4) return 2;
-  else return 3;
-});
-const levelClass = computed(() => {
-  switch (levelValue.value) {
-    case 1:
-      return "lv1";
-    case 2:
-      return "lv2";
-    case 3:
-      return "lv3";
-    default:
-      return "";
-  }
-});
-const levelText = computed(() => {
-  switch (levelValue.value) {
-    case 1:
-      return "弱";
-    case 2:
-      return "中";
-    case 3:
-      return "强";
-    default:
-      return "";
-  }
-});
-
-defineExpose({
-  pwdValidators,
-  levelValue,
-  // 提供给表单校验使用
-  ruleFormPassword: [
-    { required: true, trigger: "blur", message: "密码不能为空" },
-    ...pwdValidators.map((item) => {
-      return {
-        trigger: "blur",
-        validator: (rule, value, callback) => {
-          if (!item.validator(value)) callback(item.text);
-          else callback();
-        },
-      };
-    }),
-  ],
-});
-</script>
-
-<template>
-  <div
-    class="password-prompt"
-    :style="{ color: textColor ?? 'var(--el-color-info)' }"
-  >
-    <transition name="slide-down">
-      <div
-        v-if="isFocus"
-        class="rule-box"
-      >
-        <div
-          class="rule-item"
-          v-for="(item, index) in pwdValidators"
-          :key="index"
-        >
-          <el-icon v-show="item.validator(value)">
-            <CircleCheck />
-          </el-icon>
-          <span>{{ item.text }}</span>
-        </div>
-      </div>
-    </transition>
-    <div
-      v-if="!isFocus && allSuccessValidator"
-      class="level-box"
-    >
-      <div class="level-color">
-        <div
-          class="levelValue-block"
-          :class="[levelValue >= 1 ? levelClass : '']"
-        />
-        <div
-          class="levelValue-block"
-          :class="[levelValue >= 2 ? levelClass : '']"
-        />
-        <div
-          class="levelValue-block"
-          :class="[levelValue >= 3 ? levelClass : '']"
-        />
-      </div>
-      <div class="level-text">密码强度: {{ levelText }}</div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.password-prompt {
-  width: 100%;
-  position: relative;
-  .rule-box {
-    .rule-item {
-      position: relative;
-      .el-icon {
-        font-size: 16px;
-        color: green;
-        position: absolute;
-        left: 0;
-        top: 9px;
-      }
-      span {
-        font-size: 12px;
-        display: inline-block;
-        padding-left: 20px;
-      }
-    }
-  }
-  .level-box {
-    position: absolute;
-    top: -7px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    gap: 10px;
-    .level-color {
-      display: flex;
-      gap: 4px;
-      .levelValue-block {
-        width: 30px;
-        height: 8px;
-        background-color: #ebeef5;
-        border-radius: 2px;
-        transition: all 0.3s;
-      }
-      .lv1 {
-        background-color: #f33434;
-      }
-      .lv2 {
-        background-color: #e6a23c;
-      }
-      .lv3 {
-        background-color: #67c23a;
-      }
-    }
-    .level-text {
-      font-size: 12px;
-      color: #909399;
-    }
-  }
-
-  /* 校验规则平滑过渡效果 */
-  .slide-down-enter-active,
-  .slide-down-leave-active {
-    transition: all 0.3s ease;
-    max-height: 200px;
-    overflow: hidden;
-  }
-  .slide-down-enter-from,
-  .slide-down-leave-to {
-    opacity: 0;
-    max-height: 0;
-    transform: translateY(0px);
-  }
-}
-</style>

package/packages/Pie/index.ts

@@ -1,8 +0,0 @@
-import { App } from "vue";
-import StPie from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("st-pie", StPie);
-  },
-}

package/packages/Pie/index.vue

@@ -1,148 +0,0 @@
-<template>
-  <div
-    ref="chartRef"
-    class="chart"
-  ></div>
-</template>
-
-<script setup lang="ts">
-  import { ref, onMounted, onUnmounted, computed, watch } from "vue"
-  import * as echarts from 'echarts'
-  import type { EChartsType } from 'echarts'
-  import { stMath } from 'st-func'
-  const { add, multiply, divide, round } = stMath
-  
-  const defaultStyle = {
-    colorList: [
-      '#FAF277', '#FFC467', '#FFA872', '#FB962E', '#FF772C', '#FF577C', '#F679D7', '#9B4A9B', '#9169D7', '#9192D0',
-      '#655AC7', '#4084DE', '#0074DA', '#0098DF', '#00BBE9', '#00D2DE', '#73E2E6', '#00CBB1', '#00B488', '#48D09A',
-      '#93D984', '#C9EC7C', '#D4E300', '#E2BA2B', '#A18300', '#BC6F3F', '#A84E12', '#7C462E', '#713532', '#962B23',
-    ], // 饼图颜色列表
-    legendColor: '#000',
-    inactiveColor: '#ccc',
-  }
-  const defaultConfig = {
-    tooltipFormatter: null
-  }
-  let chart: EChartsType
-  let resizeRo: any
-
-  const props = defineProps({
-    data: {
-      type: Array,
-      default: () => ([]),
-    }, // 数据
-    config: {
-      type: Object,
-      default: () => ({})
-    }, // 配置
-    style: {
-      type: Object,
-      default: () => ([])
-    }
-  })
-
-  const chartRef = ref<HTMLElement>()
-
-  const mergeStyle = computed(() => ({ ...defaultStyle, ...props.style }))
-  const mergeConfig = computed(() => ({ ...defaultConfig, ...props.config }))
-
-  watch(
-    () => [props.data, props.style],
-    () => {
-      draw()
-    },
-    { deep: true }
-  )
-
-  onMounted(() => {
-    chart = echarts.init(chartRef.value)
-    draw()
-    // 绑定resize事件
-    let isFirst: boolean | null = true
-    resizeRo = new ResizeObserver(() => {
-      if (isFirst) {
-        isFirst = null
-        return
-      }
-      chart.resize()
-    })
-    resizeRo.observe(chartRef.value)
-  })
-
-  onUnmounted(() => {
-    chart.dispose()
-    resizeRo.disconnect()
-    resizeRo = null
-  })
-
-  const draw = () => {
-    const total: number = props.data.reduce((res: number, item: any) => {
-      return add(res, item.value)
-    }, 0)
-    chart.setOption({
-      color: mergeStyle.value.colorList,
-      tooltip: {
-        trigger: 'item',
-        confine: true,
-        formatter: mergeConfig.value.tooltipFormatter
-      },
-      legend: {
-        orient: 'vertical',
-        right: 0,
-        bottom: 0,
-        itemWidth: 28,
-        itemHeight: 18,
-        textStyle: {
-          fontSize: 12,
-          color: mergeStyle.value.legendColor,
-        },
-        inactiveColor: mergeStyle.value.inactiveColor,
-        formatter: (name: string) => {
-          const item: any = props.data.find((i: any) => i.name === name)
-          return `${name}
-${item.label || item.value}(${typeof item.percent === 'number' ? item.percent : round(multiply(divide(item.value, total), 100))}%)`
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          width: '150%',
-          height: '150%',
-          center: [`${100/3}%`, `${100/3}%`],
-          radius: '50%',
-          data: props.data.map((i: any) => ({
-            ...i,
-            itemStyle: {
-              color: i.color,
-            }
-          })),
-          label: {
-            show: true,
-            position: 'inside',
-            formatter: (info: any) => {
-              const res = info?.data?.label || info.value
-              return res === 0 ? '' : res
-            },
-            fontSize: 14,
-            color: '#000',
-          },
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ]
-    })
-  }
-</script>
-
-<style lang="scss" scoped>
-.chart {
-  width: 100%;
-  height: 100%;
-}
-</style>

package/packages/Table/components/Button/index.vue

@@ -1,61 +0,0 @@
-<template>
-  <template v-if="show">
-    <el-popconfirm
-      v-if="option.needCheck"
-      :title="option.needCheck.title"
-      @confirm="option.onClick(scope.row, scope.$index)"
-    >
-      <template #reference>
-        <el-button
-          :type="option.type"
-          :disabled="typeof option.disabled === 'function' ? option.disabled(scope.row, scope.$index) : option.disabled"
-          :style="{ marginTop: showMargin ? '10px' : 0 }"
-        >
-          {{ typeof option.text === 'function' ? option.text(scope.row, scope.$index) : option.text }}
-        </el-button>
-      </template>
-    </el-popconfirm>
-    <el-button
-      v-else
-      :type="option.type"
-      :disabled="typeof option.disabled === 'function' ? option.disabled(scope.row, scope.$index) : option.disabled"
-      :style="{ marginTop: showMargin ? '10px' : 0 }"
-      @click="option.onClick(scope.row, scope.$index)"
-    >
-      {{ typeof option.text === 'function' ? option.text(scope.row, scope.$index) : option.text }}
-    </el-button>
-  </template>
-  <template v-else></template>
-</template>
-
-<script setup lang="ts">
-  import { computed } from 'vue'
-
-  const props = defineProps({
-    option: {
-      type: Object,
-      required: true
-    },
-    scope: {
-      type: Object,
-      required: true
-    },
-    showMargin: {
-      type: Boolean,
-      default: () => false
-    }
-  })
-
-  const show = computed(() => {
-    const { option, scope } = props
-    if(typeof option.show === 'function') {
-      return option.show(scope.row, scope.$index)
-    } else if (option.show === false) {
-      return false
-    }
-    return true
-  })
-</script>
-
-<style lang="scss" scoped>
-</style>

package/packages/Table/components/Formatter/index.vue

@@ -1,26 +0,0 @@
-<template>
-  <div
-    :style="typeof option.style === 'function' ? option.style(scope.row[option.prop], scope.row) : option.style"
-  >
-    {{
-      typeof option.formatter === 'function' ? option.formatter(scope.row[option.prop], scope.row) : scope.row[option.prop]
-    }}
-  </div>
-</template>
-
-<script setup lang="ts">
-
-  defineProps({
-    option: {
-      type: Object,
-      required: true,
-    },
-    scope: {
-      type: Object,
-      required: true,
-    },
-  })
-</script>
-
-<style lang="scss" scoped>
-</style>

package/packages/Table/index.ts

@@ -1,8 +0,0 @@
-import { App } from "vue";
-import StTable from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("st-table", StTable);
-  },
-}