st-comp 0.0.197 → 0.0.199

package/package.json

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

package/packages/User/components/EditInfoDialog.vue

@@ -0,0 +1,144 @@
+<!-- 设置资料 -->
+<script setup>
+import { ref, reactive, inject } from "vue";
+import { getUserData } from "st-func";
+
+const stConfig = inject("stConfig");
+const emit = defineEmits(["callBack"]);
+const userData = reactive(getUserData());
+
+const visible = ref(false);
+const ruleFormRef = ref();
+const ruleForm = reactive({
+  nickName: "",
+  email: "",
+  mobile: "",
+});
+const rules = reactive({
+  nickName: [
+    { required: true, message: "请输入昵称", trigger: "blur" },
+    {
+      validator: (rule, value, callback) => {
+        if (/[\s@<>&%]/.test(value)) {
+          callback("昵称不能包含空格、@、<、>、&、%等特殊字符");
+        } else if (value && value.length > 10) {
+          callback("昵称长度不能超过10个字符");
+        } 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",
+    },
+  ],
+  mobile: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    {
+      validator: (rule, value, callback) => {
+        const regex = /^1[3-9]\d{9}$/;
+        if (regex.test(value)) {
+          callback();
+        } else {
+          callback("手机号格式错误");
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+});
+
+// 提交
+const handleSubmit = (formEl) => {
+  if (!formEl) return;
+  formEl.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;
+    if (params.mobile === userData.mobile) delete params.mobile;
+    await stConfig.request.post("/invest/sys/user/updateUserInfo", params);
+    ElMessage.success(`资料修改成功!`);
+    visible.value = false;
+    // 设置成功的回调函数
+    emit("callBack", ruleForm);
+  });
+};
+
+defineExpose({
+  open: () => {
+    Object.assign(userData, getUserData());
+    Object.assign(ruleForm, {
+      nickName: userData.nickName,
+      email: userData.email,
+      mobile: userData.mobile,
+    });
+    visible.value = true;
+  },
+});
+</script>
+
+<template>
+  <div class="edit-info">
+    <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="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-item
+          label="手机号"
+          prop="mobile"
+        >
+          <el-input v-model="ruleForm.mobile" />
+        </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

@@ -2,9 +2,11 @@
 import { reactive, ref } from "vue";
 import { UserFilled, ArrowDown, Right } from "@element-plus/icons-vue";
 import { getUserData, setUserData, login, loginout } from "st-func";
+import EditInfoDialog from "./components/EditInfoDialog.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());
@@ -29,6 +31,11 @@ const handleLoginOut = () => {
   emit("loginout");
 };
 
+// 设置资料成功回调
+const editInfoCallBack = (data) => {
+  Object.assign(userData, data);
+  setUserData(userData);
+};
 // 设置密码成功回调
 const setPasswordCallBack = () => {
   userData.canSet = false;
@@ -43,14 +50,15 @@ const setPasswordCallBack = () => {
       <el-dropdown placement="bottom">
         <div class="user-msg">
           <el-icon class="user-msg-icon"><UserFilled /></el-icon>
-          <span>{{ userData?.username }}</span>
+          <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()"
@@ -78,10 +86,18 @@ const setPasswordCallBack = () => {
         <el-icon class="user-login-icon"><Right /></el-icon>
       </div>
     </template>
+
+    <!-- 弹窗: 设置资料 -->
+    <EditInfoDialog
+      ref="EditInfoDialogRef"
+      @callBack="editInfoCallBack"
+    />
+    <!-- 弹窗: 设置密码 -->
     <SetPasswordDialog
       ref="SetPasswordDialogRef"
       @callBack="setPasswordCallBack"
     />
+    <!-- 弹窗: 修改密码 -->
     <EditPasswordDialog ref="EditPasswordDialogRef" />
   </div>
 </template>
@@ -110,4 +126,4 @@ const setPasswordCallBack = () => {
     }
   }
 }
-</style>
+</style>

package/src/pages/User/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div style="width: 100%; height: 100%">
+  <div style="width: 100%; height: 100%; display: flex; justify-content: flex-end;">
     <st-user
       :config="config"
       @loginout="loginoutFn"
     >
       <template #dropdown-items>
-        <el-dropdown-item>自定义菜单项</el-dropdown-item>
+        <el-dropdown-item>自定义项</el-dropdown-item>
       </template>
     </st-user>
   </div>