st-comp 0.0.158 → 0.0.159

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.158",
+  "version": "0.0.159",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/User/components/EditPasswordDialog.vue

@@ -0,0 +1,140 @@
+<!-- 修改密码 -->
+<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>
+  <div class="edit-password">
+    <el-dialog
+      v-model="visible"
+      title="修改密码"
+      width="460"
+      destroy-on-close
+      :z-index="200"
+    >
+      <el-form
+        ref="ruleFormRef"
+        :rules="rules"
+        :model="ruleForm"
+        label-width="auto"
+        :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>
+  </div>
+</template>

package/packages/User/components/SetPasswordDialog.vue

@@ -0,0 +1,129 @@
+<!-- 设置密码 -->
+<script setup>
+import { ref, reactive, inject, nextTick } from "vue";
+import PasswordPrompt from "../../PasswordPrompt/index.vue";
+
+const stConfig = inject("stConfig");
+const emit = defineEmits(["callBack"]);
+const PasswordPromptRef = ref(null);
+
+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;
+    emit("callBack");
+  });
+};
+
+defineExpose({
+  open: () => {
+    Object.assign(ruleForm, {
+      newPassword: "",
+      newPassword2: "",
+    });
+    visible.value = true;
+    // 判断密码校验是否初始化过, 无则初始化
+    nextTick(() => {
+      if (!rules.newPassword?.length) {
+        rules.newPassword = PasswordPromptRef.value?.ruleFormPassword;
+      }
+    });
+  },
+});
+</script>
+
+<template>
+  <div class="set-password">
+    <el-dialog
+      v-model="visible"
+      title="设置密码"
+      width="460"
+      destroy-on-close
+      :z-index="200"
+    >
+      <el-form
+        ref="ruleFormRef"
+        :rules="rules"
+        :model="ruleForm"
+        label-width="auto"
+        :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>
+  </div>
+</template>

package/packages/User/index.vue

@@ -1,114 +1,13 @@
-<template>
-  <div class="user">
-    <div v-if="userData">
-      <el-dropdown placement="bottom">
-        <div class="user-msg">
-          <el-icon class="user-msg-icon"><UserFilled /></el-icon>
-          <span>{{ userData?.username }}</span>
-          <el-icon class="user-msg-arrow"><ArrowDown /></el-icon>
-        </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item @click="changePasswordVisible = true">修改密码</el-dropdown-item>
-            <el-dropdown-item @click="loginoutFn">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-    <div
-      v-else
-      class="user-login"
-      @click="loginFn"
-    >
-      前往登录
-      <el-icon class="user-login-icon"><Right /></el-icon>
-    </div>
-
-    <!-- 修改密码弹窗 -->
-    <el-dialog
-      v-model="changePasswordVisible"
-      title="修改密码"
-      width="500"
-      :z-index="200"
-      @opened="changePasswordDialogOpen"
-      @closed="changePasswordDialogClose"
-    >
-      <el-form
-        ref="changePasswordFormRef"
-        :model="changePasswordForm"
-        :rules="changePasswordRules"
-        :validate-on-rule-change="false"
-        @submit.native.prevent="changePasswordFn"
-        @keyup.enter.native="changePasswordFn"
-        label-width="auto"
-      >
-        <el-form-item
-          label="原密码"
-          prop="oldPassword"
-        >
-          <el-input
-            v-model="changePasswordForm.oldPassword"
-            type="password"
-            :show-password="true"
-          />
-        </el-form-item>
-        <el-form-item
-          label="新密码"
-          prop="newPassword"
-        >
-          <el-input
-            v-model="changePasswordForm.newPassword"
-            type="password"
-            :show-password="true"
-            @focus="
-              () => {
-                changePasswordFormRef.clearValidate(['newPassword']);
-                isFocusNewPassword = true;
-              }
-            "
-            @blur="isFocusNewPassword = false"
-          />
-          <PasswordPrompt
-            ref="PasswordPromptRef"
-            :value="changePasswordForm.newPassword"
-            :isFocus="isFocusNewPassword"
-          />
-        </el-form-item>
-        <el-form-item
-          label="确认密码"
-          prop="confirmPassword"
-        >
-          <el-input
-            v-model="changePasswordForm.confirmPassword"
-            type="password"
-            :show-password="true"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="changePasswordVisible = false">取消</el-button>
-          <el-button
-            type="primary"
-            @click="changePasswordFn"
-          >
-            修改
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
 <script setup>
-import { ref, inject, nextTick } from "vue";
+import { reactive, ref } from "vue";
 import { UserFilled, ArrowDown, Right } from "@element-plus/icons-vue";
-import { getUserData, login, loginout } from "st-func";
-import PasswordPrompt from "../PasswordPrompt/index.vue";
+import { getUserData, setUserData, login, loginout } from "st-func";
+import SetPasswordDialog from "./components/SetPasswordDialog.vue";
+import EditPasswordDialog from "./components/EditPasswordDialog.vue";
 
-const stConfig = inject("stConfig");
-const userData = getUserData();
-const PasswordPromptRef = ref(null); // 密码校验强度组件
+const SetPasswordDialogRef = ref(null);
+const EditPasswordDialogRef = ref(null);
+const userData = reactive(getUserData());
 
 const emit = defineEmits(["loginout"]);
 const props = defineProps({
@@ -118,74 +17,72 @@ const props = defineProps({
   },
 });
 
-const changePasswordFormRef = ref(null);
-const changePasswordVisible = ref(false);
-const changePasswordForm = ref({
-  oldPassword: "",
-  newPassword: "",
-  confirmPassword: "",
-});
-const changePasswordRules = ref({
-  oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
-  newPassword: [],
-  confirmPassword: [
-    { required: true, message: "请输入确认密码", trigger: "blur" },
-    {
-      validator: (rule, value, callback) => {
-        if (value === "") {
-          callback(new Error("请输入确认密码"));
-        } else if (value !== changePasswordForm.value.newPassword) {
-          callback(new Error("两次输入密码不一致!"));
-        } else {
-          callback();
-        }
-      },
-      trigger: "blur",
-    },
-  ],
-});
-const isFocusNewPassword = ref(false); // 是否聚焦新密码
-
-const loginFn = () => {
+// 前往登录
+const handleLogin = () => {
   const { loginUrl } = props.config || {};
   login(loginUrl);
 };
-const loginoutFn = () => {
+// 退出登录
+const handleLoginOut = () => {
   const { loginoutToLogin, loginoutUrl } = props.config || {};
   loginout(loginoutToLogin, loginoutUrl);
   emit("loginout");
 };
-const changePasswordFn = () => {
-  changePasswordFormRef.value.validate(async (valid, fields) => {
-    if (valid) {
-      const res = await stConfig.request.post("/invest/sys/user/password", {
-        password: changePasswordForm.value.oldPassword,
-        newPassword: changePasswordForm.value.newPassword,
-        newPassword2: changePasswordForm.value.confirmPassword,
-      });
-      ElMessage.success(`修改成功!`);
-      changePasswordVisible.value = false;
-    } else {
-    }
-  });
-};
-const changePasswordDialogOpen = () => {
-  if (changePasswordRules.value.newPassword.length === 0) {
-    nextTick(() => {
-      changePasswordRules.value.newPassword = PasswordPromptRef.value?.ruleFormPassword;
-    });
-  }
-};
-const changePasswordDialogClose = () => {
-  changePasswordForm.value = {
-    oldPassword: "",
-    newPassword: "",
-    confirmPassword: "",
-  };
-  changePasswordFormRef.value.resetFields();
+
+// 设置密码成功回调
+const setPasswordCallBack = () => {
+  userData.canSet = false;
+  setUserData(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?.username }}</span>
+          <el-icon class="user-msg-arrow"><ArrowDown /></el-icon>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <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>
+    <SetPasswordDialog
+      ref="SetPasswordDialogRef"
+      @callBack="setPasswordCallBack"
+    />
+    <EditPasswordDialog ref="EditPasswordDialogRef" />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .user {
   display: inline-block;