st-comp 0.0.277 → 0.0.279

package/packages/User/components/EditPasswordDialog.vue

@@ -1,168 +0,0 @@
-<!-- 修改密码 -->
-<script setup>
-import { ref, reactive, inject, nextTick } from "vue";
-import PasswordPrompt from "../../PasswordPrompt/index.vue";
-
-const stConfig = inject("stConfig");
-const PasswordPromptRef = ref(null);
-
-const visible = ref(false);
-const ruleFormRef = ref();
-const ruleForm = reactive({
-  password: "",
-  newPassword: "",
-  newPassword2: "",
-});
-const rules = reactive({
-  password: [{ required: true, message: "请输入原密码", trigger: "blur" }],
-  newPassword: [],
-  newPassword2: [
-    { required: true, message: "请输入确认密码", trigger: "blur" },
-    {
-      validator: (rule, value, callback) => {
-        if (value === "") {
-          callback(new Error("请输入确认密码"));
-        } else if (value !== ruleForm.newPassword) {
-          callback(new Error("两次输入密码不一致!"));
-        } else {
-          callback();
-        }
-      },
-      trigger: "blur",
-    },
-  ],
-});
-
-// 当前是否聚焦于密码
-const isFocusNewPassword = ref(false);
-
-// 提交
-const handleSubmit = (formEl) => {
-  if (!formEl) return;
-  formEl.validate(async (valid) => {
-    if (!valid) return false;
-    await stConfig.request.post("/invest/sys/user/password", ruleForm);
-    ElMessage.success(`密码修改成功!`);
-    visible.value = false;
-  });
-};
-
-defineExpose({
-  open: () => {
-    Object.assign(ruleForm, {
-      password: "",
-      newPassword: "",
-      newPassword2: "",
-    });
-    visible.value = true;
-    // 判断密码校验是否初始化过, 无则初始化
-    nextTick(() => {
-      if (!rules.newPassword?.length) {
-        rules.newPassword = PasswordPromptRef.value?.ruleFormPassword;
-      }
-    });
-  },
-});
-</script>
-
-<template>
-  <el-dialog
-    modal-class="edit-password"
-    v-model="visible"
-    title="修改密码"
-    width="400"
-    align-center
-    destroy-on-close
-    :z-index="200"
-  >
-    <el-form
-      ref="ruleFormRef"
-      :rules="rules"
-      :model="ruleForm"
-      label-width="auto"
-      hide-required-asterisk
-      :validate-on-rule-change="false"
-      @submit.native.prevent="handleSubmit(ruleFormRef)"
-      @keyup.enter.native="handleSubmit(ruleFormRef)"
-    >
-      <el-form-item
-        label="原密码:"
-        prop="password"
-      >
-        <el-input
-          v-model="ruleForm.password"
-          type="password"
-          :show-password="true"
-        />
-      </el-form-item>
-      <el-form-item
-        label="新密码:"
-        prop="newPassword"
-      >
-        <el-input
-          v-model="ruleForm.newPassword"
-          type="password"
-          :show-password="true"
-          @focus="
-            () => {
-              ruleFormRef.clearValidate(['newPassword']);
-              isFocusNewPassword = true;
-            }
-          "
-          @blur="isFocusNewPassword = false"
-        />
-        <PasswordPrompt
-          ref="PasswordPromptRef"
-          :value="ruleForm.newPassword"
-          :isFocus="isFocusNewPassword"
-        />
-      </el-form-item>
-      <el-form-item
-        label="确认密码:"
-        prop="newPassword2"
-      >
-        <el-input
-          v-model="ruleForm.newPassword2"
-          type="password"
-          :show-password="true"
-        />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="visible = false"> 取消 </el-button>
-      <el-button
-        type="primary"
-        @click="handleSubmit(ruleFormRef)"
-      >
-        确认
-      </el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss">
-.edit-password {
-  .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-form {
-        .el-input {
-          width: 260px;
-        }
-      }
-    }
-    .el-dialog__footer {
-      padding: 10px;
-    }
-  }
-}
-</style>

package/packages/User/components/SetPasswordDialog.vue

@@ -1,160 +0,0 @@
-<!-- 设置密码 -->
-<script setup>
-import { ref, reactive, inject, nextTick } from "vue";
-import { setUserData } from "st-func";
-import PasswordPrompt from "../../PasswordPrompt/index.vue";
-
-const PasswordPromptRef = ref(null);
-const stConfig = inject("stConfig");
-const userData = inject("userData");
-
-const visible = ref(false);
-const ruleFormRef = ref();
-const ruleForm = reactive({
-  newPassword: "",
-  newPassword2: "",
-});
-const rules = reactive({
-  newPassword: [],
-  newPassword2: [
-    { required: true, message: "请输入确认密码", trigger: "blur" },
-    {
-      validator: (rule, value, callback) => {
-        if (value === "") {
-          callback(new Error("请输入确认密码"));
-        } else if (value !== ruleForm.newPassword) {
-          callback(new Error("两次输入密码不一致!"));
-        } else {
-          callback();
-        }
-      },
-      trigger: "blur",
-    },
-  ],
-});
-
-// 当前是否聚焦于密码
-const isFocusNewPassword = ref(false);
-
-// 提交
-const handleSubmit = (formEl) => {
-  if (!formEl) return;
-  formEl.validate(async (valid) => {
-    if (!valid) return false;
-    await stConfig.request.post("/invest/sys/user/setPassword", { newPassword: ruleForm.newPassword });
-    ElMessage.success(`密码设置成功!`);
-    visible.value = false;
-    // 更新userData+本地存储
-    userData.canSet = false;
-    setUserData(userData);
-  });
-};
-
-defineExpose({
-  open: () => {
-    Object.assign(ruleForm, {
-      newPassword: "",
-      newPassword2: "",
-    });
-    visible.value = true;
-    // 判断密码校验是否初始化过, 无则初始化
-    nextTick(() => {
-      if (!rules.newPassword?.length) {
-        rules.newPassword = PasswordPromptRef.value?.ruleFormPassword;
-      }
-    });
-  },
-});
-</script>
-
-<template>
-  <el-dialog
-    modal-class="set-password"
-    v-model="visible"
-    title="设置密码"
-    width="400"
-    align-center
-    destroy-on-close
-    :z-index="200"
-  >
-    <el-form
-      ref="ruleFormRef"
-      :rules="rules"
-      :model="ruleForm"
-      label-width="auto"
-      hide-required-asterisk
-      :validate-on-rule-change="false"
-      @submit.native.prevent="handleSubmit(ruleFormRef)"
-      @keyup.enter.native="handleSubmit(ruleFormRef)"
-    >
-      <el-form-item
-        label="密码:"
-        prop="newPassword"
-      >
-        <el-input
-          v-model="ruleForm.newPassword"
-          type="password"
-          :show-password="true"
-          @focus="
-            () => {
-              ruleFormRef.clearValidate(['newPassword']);
-              isFocusNewPassword = true;
-            }
-          "
-          @blur="isFocusNewPassword = false"
-        />
-        <PasswordPrompt
-          ref="PasswordPromptRef"
-          :value="ruleForm.newPassword"
-          :isFocus="isFocusNewPassword"
-        />
-      </el-form-item>
-      <el-form-item
-        label="确认密码:"
-        prop="newPassword2"
-      >
-        <el-input
-          v-model="ruleForm.newPassword2"
-          type="password"
-          :show-password="true"
-        />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="visible = false"> 取消 </el-button>
-      <el-button
-        type="primary"
-        @click="handleSubmit(ruleFormRef)"
-      >
-        确认
-      </el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss">
-.set-password {
-  .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-form {
-        .el-input {
-          width: 260px;
-        }
-      }
-    }
-    .el-dialog__footer {
-      padding: 10px;
-    }
-  }
-}
-</style>

package/packages/User/index.ts

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

package/packages/User/index.vue

@@ -1,117 +0,0 @@
-<script setup>
-import { provide, reactive, ref } from "vue";
-import { UserFilled, ArrowDown, Right } from "@element-plus/icons-vue";
-import { getUserData, login, loginout } from "st-func";
-import EditInfoDialog from "./components/EditInfoDialog/index.vue";
-import SetPasswordDialog from "./components/SetPasswordDialog.vue";
-import EditPasswordDialog from "./components/EditPasswordDialog.vue";
-
-const EditInfoDialogRef = ref(null);
-const SetPasswordDialogRef = ref(null);
-const EditPasswordDialogRef = ref(null);
-const userData = reactive(getUserData());
-
-const emit = defineEmits(["loginout"]);
-const props = defineProps({
-  config: {
-    type: Object,
-    default: () => ({}), // loginUrl: 登录后的跳转地址 loginoutToLogin: 是否跳转到登录页 loginoutUrl: 退出登录后的跳转地址
-  },
-});
-
-// 前往登录
-const handleLogin = () => {
-  const { loginUrl } = props.config || {};
-  login(loginUrl);
-};
-// 退出登录
-const handleLoginOut = () => {
-  const { loginoutToLogin, loginoutUrl } = props.config || {};
-  loginout(loginoutToLogin, loginoutUrl);
-  emit("loginout");
-};
-
-provide("userData", userData);
-</script>
-
-<template>
-  <div class="user">
-    <!-- 已登录: 用户名 -->
-    <template v-if="userData">
-      <el-dropdown placement="bottom">
-        <div class="user-msg">
-          <el-icon class="user-msg-icon"><UserFilled /></el-icon>
-          <span>{{ userData.nickName || userData.username }}</span>
-          <el-icon class="user-msg-arrow"><ArrowDown /></el-icon>
-        </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <!-- 插槽 -->
-            <slot name="dropdown-items"></slot>
-            <!-- 设置资料 -->
-            <el-dropdown-item @click="EditInfoDialogRef?.open()">设置资料</el-dropdown-item>
-            <!-- 设置密码 -->
-            <el-dropdown-item
-              v-if="userData.canSet"
-              @click="SetPasswordDialogRef?.open()"
-            >
-              设置密码
-            </el-dropdown-item>
-            <!-- 修改密码 -->
-            <el-dropdown-item
-              v-else
-              @click="EditPasswordDialogRef?.open()"
-            >
-              修改密码
-            </el-dropdown-item>
-            <!-- 退出登录 -->
-            <el-dropdown-item @click="handleLoginOut">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </template>
-    <!-- 未登录: 前往登录 -->
-    <template v-else>
-      <div
-        class="user-login"
-        @click="handleLogin"
-      >
-        前往登录
-        <el-icon class="user-login-icon"><Right /></el-icon>
-      </div>
-    </template>
-
-    <!-- 弹窗: 设置资料 -->
-    <EditInfoDialog ref="EditInfoDialogRef" />
-    <!-- 弹窗: 设置密码 -->
-    <SetPasswordDialog ref="SetPasswordDialogRef" />
-    <!-- 弹窗: 修改密码 -->
-    <EditPasswordDialog ref="EditPasswordDialogRef" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.user {
-  display: inline-block;
-  font-size: 14px;
-  &-msg {
-    cursor: pointer;
-    outline: none;
-    box-shadow: none;
-    &-icon {
-      margin-right: 5px;
-      vertical-align: -2px;
-    }
-    &-arrow {
-      margin-left: 5px;
-      vertical-align: -2px;
-    }
-  }
-  &-login {
-    cursor: pointer;
-    &-icon {
-      vertical-align: -2px;
-    }
-  }
-}
-</style>