st-comp 0.0.277 → 0.0.279

package/packages/Table/index.vue

@@ -1,133 +0,0 @@
-<template>
-  <el-config-provider :locale="zhCn">
-    <el-table
-      v-loading="loading"
-      :data="data"
-      :empty-text="emptyText"
-      stripe
-      style="width: 100%"
-      @sort-change="sortChange"
-    >
-      <el-table-column
-        v-for="item in columnConfig"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :sortable="item.sortable"
-        :width="item.width"
-        :min-width="item.minWidth"
-      >
-        <template
-          v-if="item.type === 'formatter'"
-          #default="scope"
-        >
-          <Formatter
-            :option="item"
-            :scope="scope"
-          />
-        </template>
-        <template
-          v-else-if="item.type === 'slot'"
-          #default="scope"
-        >
-          <slot
-            :name="item.slot"
-            :row="scope.row"
-          />
-        </template>
-        <template
-          v-else-if="item.type === 'btns'"
-          #default="scope"
-        >
-          <template
-            v-for="(btn, btnIndex) in item.btns"
-            :key="`${btn.text}-${btnIndex}`"
-          >
-            <template v-if="btn.children">
-              <el-popover
-                v-if="getShowChildren(btn.children, scope).length"
-                placement="bottom"
-                trigger="hover"
-                :popper-style="{ minWidth: '0px', width: null }"
-              >
-                <template #reference>
-                  <el-icon
-                    :style="{ marginLeft: '10px', verticalAlign: '-5px', cursor: 'pointer' }"
-                    size="20"
-                  >
-                    <MoreFilled />
-                  </el-icon>
-                </template>
-                <div
-                  v-for="(subBtn, subBtnIndex) in getShowChildren(btn.children, scope)"
-                  :key="`${subBtn.text}-${subBtnIndex}`"
-                >
-                  <Button
-                    :option="subBtn"
-                    :scope="scope"
-                    :showMargin="subBtnIndex !== 0"
-                  />
-                </div>
-              </el-popover>
-            </template>
-            <Button
-              v-else
-              :option="btn"
-              :scope="scope"
-            />
-          </template>
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-config-provider>
-</template>
-
-<script setup lang="ts">
-  import zhCn from 'element-plus/es/locale/lang/zh-cn'
-  import { computed } from 'vue'
-  import { MoreFilled } from '@element-plus/icons-vue'
-  import Button from './components/Button/index.vue'
-  import Formatter from './components/Formatter/index.vue'
-
-  const emit = defineEmits(['sortChange'])
-  const props = defineProps({
-    data: {
-      type: Array,
-      default: () => []
-    },
-    column: {
-      type: Array,
-      default: () => []
-    },
-    loading: {
-      type: Boolean,
-      default: () => false
-    },
-    emptyText: {
-      type: String,
-      default: () => ''
-    },
-  })
-
-  const columnConfig: any = computed(() => {
-    return props.column.filter((i: any) => i.show !== false)
-  })
-
-  const sortChange = (params: any) => {
-    emit('sortChange', params)
-  }
-
-  const getShowChildren = (children: any[], scope: any) => {
-    return children.filter(item => {
-      if(typeof item.show === 'function' && item.show(scope.row, scope.$index) === false) {
-        return false
-      } else if (item.show === false) {
-        return false
-      }
-      return true
-    })
-  }
-</script>
-
-<style lang="scss" scoped>
-</style>

package/packages/TreeMap/index.ts

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

package/packages/TreeMap/index.vue

@@ -1,186 +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'
-  
-  const defaultConfig = {
-    tooltipFormatter: null,
-    visibleMin: 300,
-  }
-  let chart: EChartsType
-  let resizeRo: any
-
-  const props = defineProps({
-    data: {
-      type: Array,
-      default: () => ([]),
-    }, // 数据
-    config: {
-      type: Object,
-      default: () => ({})
-    },
-  })
-
-  const chartRef = ref<HTMLElement>()
-
-  const mergeConfig = computed(() => ({ ...defaultConfig, ...props.config }))
-
-  watch(
-    () => [props.data],
-    () => {
-      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 = () => {
-    chart.setOption(
-      {
-        tooltip: {
-          confine: true,
-          formatter: mergeConfig.value.tooltipFormatter
-        },
-        series: [
-          {
-            type: 'treemap',
-            width: '100%',
-            height: '100%',
-            visibleMin: mergeConfig.value.visibleMin,
-            breadcrumb: {
-              show: false,
-            },
-            label: {
-              show: true,
-              formatter: '{b}'
-            },
-            upperLabel: {
-              show: true,
-              height: 30
-            }, 
-            itemStyle: {
-              borderColor: '#fff'
-            },
-            levels: [
-              {
-                itemStyle: {
-                  borderColor: '#777',
-                  borderWidth: 0,
-                  gapWidth: 0
-                },
-                upperLabel: {
-                  show: false
-                }
-              },
-              {
-                itemStyle: {
-                  borderColor: '#000',
-                  borderWidth: 2,
-                  gapWidth: 1
-                },
-                upperLabel: {
-                  padding: [8, 0, 0, 0],
-                  formatter: (params: any) => {
-                    return `{title|${params.data.name} ${params.data.labelValue}} ${params.data.percent === null ? '' : `{${params.data.percent >= 0 ? params.data.percent === 0 ? 'defaultPercent' : 'redPercent' : 'greenPercent'}|${params.data.percent}%}`}`
-                  },
-                  rich: {
-                    title: {
-                      color: '#fff',
-                      fontSize: 14,
-                    },
-                    defaultPercent: {
-                      color: '#fff',
-                      fontSize: 14,
-                    },
-                    redPercent: {
-                      color: 'red',
-                      fontSize: 14,
-                    },
-                    greenPercent: {
-                      color: 'green',
-                      fontSize: 14,
-                    }
-                  }
-                },
-              },
-              {
-                colorSaturation: [0.35, 0.5],
-                itemStyle: {
-                  borderWidth: 0,
-                  gapWidth: 1,
-                  borderColorSaturation: 0.6
-                },
-                label: {
-                  align: 'center',
-                  verticalAlign: 'middle',
-                  fontSize: 20,
-                  formatter: (params: any) => {
-                    return `${params.data.name}
-${params.data.colorValue}`
-                  },
-                },
-              }
-            ],
-            data: props.data.map((item: any) => {
-              return {
-                ...item,
-                itemStyle: {
-                  color: item.color,
-                }, 
-                children: item.children.map((child: any) => {
-                  return {
-                    ...child,
-                    itemStyle: {
-                      color: child.color,
-                    }
-                  }
-                })
-              }
-            })
-          }
-        ]
-      }, true
-    )
-  }
-
-  defineExpose({
-    reset: () => {
-      draw()
-    }, // 重置
-  })
-</script>
-
-<style lang="scss" scoped>
-.chart {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-</style>

package/packages/User/components/EditInfoDialog/Mobile.vue

@@ -1,214 +0,0 @@
-<script setup>
-import { ref, reactive, inject } from "vue";
-import { setUserData } from "st-func";
-
-const stConfig = inject("stConfig");
-const userData = inject("userData");
-
-const visible = ref(false);
-const ruleFormRef = ref();
-const ruleForm = reactive({
-  mobile: "",
-  verifyCode: "",
-});
-const rules = reactive({
-  mobile: [
-    { required: true, message: "请输入手机号", trigger: "blur" },
-    {
-      validator: (rule, value, callback) => {
-        if (value === userData.mobile) {
-          callback("新手机号与旧手机号相同");
-        } else if (!validatePhone(value)) {
-          callback("手机号格式错误");
-        } else {
-          callback();
-        }
-      },
-      trigger: "blur",
-    },
-  ],
-  verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
-});
-
-const smsTimer = ref(null);
-const smsInterval = ref(0);
-const smsInterval_init = 60;
-
-// 手机号校验
-const validatePhone = (mobile) => {
-  return /^1[3-9]\d{9}$/.test(mobile);
-};
-// 获取短信验证码
-const getSms = async () => {
-  // 校验手机号格式
-  if (!ruleForm.mobile) return false;
-  if (!validatePhone(ruleForm.mobile)) return ElMessage.error("手机号格式错误");
-
-  // 接口请求
-  const params = {
-    type: 5,
-    userId: userData.id,
-    mobile: ruleForm.mobile,
-  };
-  await stConfig.request.post("/invest/sys/commonSms", params);
-  ElMessage.success("短信验证码已发送");
-
-  // 间隔设置
-  smsInterval.value = smsInterval_init;
-  smsTimer.value = setInterval(() => {
-    smsInterval.value -= 1;
-    if (smsInterval.value === 0) clearInterval(smsTimer.value);
-  }, 1000);
-};
-
-// 打开
-const handleOpen = () => {
-  ruleForm.mobile = "";
-  visible.value = true;
-};
-// 提交
-const handleSubmit = () => {
-  if (!ruleFormRef.value) return;
-  ruleFormRef.value.validate(async (valid) => {
-    if (!valid) return false;
-    // 仅传递修改过的字段
-    const params = {
-      ...ruleForm,
-      userId: userData.id,
-      username: userData.username,
-    };
-    await stConfig.request.post("/invest/sys/user/updateUserInfo", params);
-    ElMessage.success(`手机号修改成功!`);
-    visible.value = false;
-    // 更新userData+本地存储
-    userData.mobile = ruleForm.mobile;
-    setUserData(userData);
-  });
-};
-</script>
-
-<template>
-  <div class="mobile">
-    <el-text v-if="userData.mobile">
-      {{ userData.mobile }}
-    </el-text>
-    <el-button
-      class="btn"
-      @click="handleOpen"
-    >
-      {{ userData.mobile ? "更换手机号" : "立即绑定" }}
-    </el-button>
-  </div>
-  <!-- 手机号绑定窗口 -->
-  <el-dialog
-    modal-class="mobile-dialog"
-    v-model="visible"
-    width="400"
-    title="手机号绑定"
-    align-center
-    append-to-body
-    destroy-on-close
-  >
-    <el-form
-      ref="ruleFormRef"
-      :rules="rules"
-      :model="ruleForm"
-      hide-required-asterisk
-    >
-      <el-form-item
-        label="新手机:"
-        prop="mobile"
-      >
-        <el-input v-model="ruleForm.mobile" />
-      </el-form-item>
-      <el-form-item
-        label="验证码:"
-        prop="verifyCode"
-      >
-        <el-input
-          class="sms-input"
-          v-model="ruleForm.verifyCode"
-          placeholder="验证码"
-        >
-          <template #suffix>
-            <span
-              v-if="smsInterval"
-              class="get-button disabled"
-            >
-              重新发送({{ smsInterval }})
-            </span>
-            <span
-              v-else
-              class="get-button"
-              :class="{ disabled: !ruleForm.mobile }"
-              @click.stop="getSms"
-            >
-              获取验证码
-            </span>
-          </template>
-        </el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="visible = false"> 取消 </el-button>
-      <el-button
-        type="primary"
-        @click="handleSubmit"
-      >
-        确认
-      </el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss">
-.mobile-dialog {
-  .el-dialog {
-    padding: 0;
-    .el-dialog__header {
-      padding: 10px;
-    }
-    .el-dialog__body {
-      border: 1px solid rgba(220, 223, 230, 0.5);
-      backdrop-filter: opacity(0.2);
-      border-left: none;
-      border-right: none;
-      padding: 18px 20px;
-      box-sizing: border-box;
-    }
-    .el-dialog__footer {
-      padding: 10px;
-    }
-  }
-}
-</style>
-<style lang="scss" scoped>
-.mobile {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  .btn {
-    cursor: pointer;
-  }
-}
-.mobile-dialog {
-  .el-form {
-    .el-input {
-      width: 260px;
-    }
-    .sms-input {
-      .get-button {
-        color: var(--el-color-primary);
-        line-height: 16px;
-        border-left: var(--el-border);
-        padding-left: 10px;
-        cursor: pointer;
-      }
-      .disabled {
-        color: var(--el-color-info);
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-</style>

package/packages/User/components/EditInfoDialog/index.vue

@@ -1,161 +0,0 @@
-<!-- 设置资料 -->
-<script setup>
-import { ref, reactive, inject } from "vue";
-import { setUserData } from "st-func";
-import Mobile from "./Mobile.vue";
-
-const stConfig = inject("stConfig");
-const userData = inject("userData");
-
-const visible = ref(false);
-const ruleFormRef = ref();
-const ruleForm = reactive({
-  nickName: "",
-  email: "",
-});
-const rules = reactive({
-  nickName: [
-    {
-      validator: (rule, value, callback) => {
-        if (value) {
-          if (/[\s@<>&%]/.test(value)) {
-            callback("昵称不能包含空格、@、<、>、&、%等特殊字符");
-          } else if (value && value.length > 12) {
-            callback("昵称长度不能超过12个字符");
-          } else {
-            callback();
-          }
-        } else {
-          callback();
-        }
-      },
-      trigger: "blur",
-    },
-  ],
-  email: [
-    {
-      validator: (rule, value, callback) => {
-        if (value && !/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
-          callback("邮箱格式错误");
-        } else {
-          callback();
-        }
-      },
-      trigger: "blur",
-    },
-  ],
-});
-// 提交
-const handleSubmit = () => {
-  if (!ruleFormRef.value) return;
-  ruleFormRef.value.validate(async (valid) => {
-    if (!valid) return false;
-    // 仅传递修改过的字段
-    const params = {
-      ...ruleForm,
-      userId: userData.id,
-      username: userData.username,
-    };
-    if (params.nickName === userData.nickName) delete params.nickName;
-    if (params.email === userData.email) delete params.email;
-    await stConfig.request.post("/invest/sys/user/updateUserInfo", params);
-    ElMessage.success(`资料修改成功!`);
-    visible.value = false;
-    // 更新userData+本地存储
-    Object.assign(userData, ruleForm);
-    setUserData(userData);
-  });
-};
-
-defineExpose({
-  open: () => {
-    Object.assign(ruleForm, {
-      nickName: userData.nickName,
-      email: userData.email,
-    });
-    visible.value = true;
-  },
-});
-</script>
-
-<template>
-  <el-dialog
-    modal-class="edit-info"
-    v-model="visible"
-    title="设置资料"
-    width="400"
-    align-center
-    destroy-on-close
-    :z-index="200"
-  >
-    <el-form
-      ref="ruleFormRef"
-      label-width="auto"
-      :rules="rules"
-      :model="ruleForm"
-    >
-      <!-- 用户名 -->
-      <el-form-item label="用户名:">
-        <el-text>{{ userData.username }}</el-text>
-      </el-form-item>
-      <!-- 手机号 -->
-      <el-form-item label="手机号:">
-        <Mobile />
-      </el-form-item>
-      <!-- 昵称 -->
-      <el-form-item
-        label="昵称:"
-        prop="nickName"
-      >
-        <el-input v-model="ruleForm.nickName" />
-      </el-form-item>
-      <!-- 邮箱 -->
-      <el-form-item
-        label="邮箱:"
-        prop="email"
-      >
-        <el-input v-model="ruleForm.email" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="visible = false"> 取消 </el-button>
-      <el-button
-        type="primary"
-        @click="handleSubmit"
-      >
-        确认
-      </el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss">
-.edit-info {
-  .el-dialog {
-    padding: 0;
-    .el-dialog__header {
-      padding: 10px;
-    }
-    .el-dialog__body {
-      border: 1px solid rgba(220, 223, 230, 0.5);
-      backdrop-filter: opacity(0.2);
-      border-left: none;
-      border-right: none;
-      padding: 18px 20px;
-      box-sizing: border-box;
-    }
-    .el-dialog__footer {
-      padding: 10px;
-    }
-  }
-}
-</style>
-<style lang="scss" scoped>
-.edit-info {
-  .el-form {
-    .el-input {
-      width: 260px;
-    }
-  }
-}
-</style>