st-comp 0.0.203 → 0.0.204

package/package.json

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

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

@@ -89,27 +89,23 @@ const handleSubmit = () => {
 
 <template>
   <div class="mobile">
-    <el-text
-      v-if="userData.mobile"
-      type="info"
-    >
+    <el-text v-if="userData.mobile">
       {{ userData.mobile }}
     </el-text>
-    <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
   >
@@ -117,15 +113,16 @@ 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="验证码"
+        label="验证码:"
         prop="verifyCode"
       >
         <el-input
@@ -164,26 +161,53 @@ 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 {
-  .sms-input {
-    .get-button {
-      color: var(--el-color-primary);
-      line-height: 16px;
-      border-left: var(--el-border);
-      padding-left: 10px;
-      cursor: pointer;
+  .el-form {
+    .el-input {
+      width: 260px;
     }
-    .disabled {
-      color: var(--el-color-info);
-      cursor: not-allowed;
+    .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;
+      }
     }
   }
 }

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
-};