st-comp 0.0.202 → 0.0.204

package/package.json

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

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

@@ -9,16 +9,16 @@ 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) => {
-        const regex = /^1[3-9]\d{9}$/;
         if (value === userData.mobile) {
           callback("新手机号与旧手机号相同");
-        } else if (!regex.test(value)) {
+        } else if (!validatePhone(value)) {
           callback("手机号格式错误");
         } else {
           callback();
@@ -27,8 +27,40 @@ const rules = reactive({
       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 = "";
@@ -57,21 +89,23 @@ const handleSubmit = () => {
 
 <template>
   <div class="mobile">
-    <el-text type="info">{{ userData.mobile ?? "暂无" }}</el-text>
-    <el-text
+    <el-text v-if="userData.mobile">
+      {{ userData.mobile }}
+    </el-text>
+    <el-button
       class="btn"
-      size="small"
-      type="primary"
       @click="handleOpen"
     >
       {{ userData.mobile ? "更换手机号" : "立即绑定" }}
-    </el-text>
+    </el-button>
   </div>
   <!-- 手机号绑定窗口 -->
   <el-dialog
+    modal-class="mobile-dialog"
     v-model="visible"
-    width="460"
+    width="400"
     title="手机号绑定"
+    align-center
     append-to-body
     destroy-on-close
   >
@@ -79,13 +113,41 @@ const handleSubmit = () => {
       ref="ruleFormRef"
       :rules="rules"
       :model="ruleForm"
+      hide-required-asterisk
     >
       <el-form-item
-        label="新手机"
+        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>
@@ -99,12 +161,54 @@ const handleSubmit = () => {
   </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;
-  gap: 6px;
+  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

@@ -83,33 +83,35 @@ defineExpose({
     modal-class="edit-info"
     v-model="visible"
     title="设置资料"
-    width="460"
+    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 type="info">{{ userData.username }}</el-text>
+      <el-form-item label="用户名:">
+        <el-text>{{ userData.username }}</el-text>
       </el-form-item>
       <!-- 手机号 -->
-      <el-form-item label="手机号">
+      <el-form-item label="手机号:">
         <Mobile />
       </el-form-item>
       <!-- 昵称 -->
       <el-form-item
-        label="昵称"
+        label="昵称:"
         prop="nickName"
       >
         <el-input v-model="ruleForm.nickName" />
       </el-form-item>
       <!-- 邮箱 -->
       <el-form-item
-        label="邮箱"
+        label="邮箱:"
         prop="email"
       >
         <el-input v-model="ruleForm.email" />
@@ -127,10 +129,33 @@ defineExpose({
   </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 {
-    padding: 0 20px;
+    .el-input {
+      width: 260px;
+    }
   }
 }
 </style>

package/packages/User/components/EditPasswordDialog.vue

@@ -66,75 +66,103 @@ defineExpose({
 </script>
 
 <template>
-  <div class="edit-password">
-    <el-dialog
-      v-model="visible"
-      title="修改密码"
-      width="460"
-      destroy-on-close
-      :z-index="200"
+  <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
-        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-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>
+        <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

@@ -68,65 +68,93 @@ defineExpose({
 </script>
 
 <template>
-  <div class="set-password">
-    <el-dialog
-      v-model="visible"
-      title="设置密码"
-      width="460"
-      destroy-on-close
-      :z-index="200"
+  <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
-        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-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>
+        <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.vue

@@ -46,22 +46,25 @@ provide("userData", userData);
         </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>

package/src/pages/User/index.vue

@@ -5,7 +5,7 @@
       @loginout="loginoutFn"
     >
       <template #dropdown-items>
-        <el-dropdown-item>自定义项</el-dropdown-item>
+        <el-dropdown-item>Custom Slot</el-dropdown-item>
       </template>
     </st-user>
   </div>

package/es/raf-80ef0c0a.js

@@ -1,6 +0,0 @@
-import { s as o } from "./base-a5af3db3.js";
-const e = (i) => o ? window.requestAnimationFrame(i) : setTimeout(i, 16), r = (i) => o ? window.cancelAnimationFrame(i) : clearTimeout(i);
-export {
-  r as c,
-  e as r
-};