@liujitcn/kratos-admin-system 0.0.29 → 0.0.32

package/dist/package/src/views/profile/components/base.vue

@@ -14,7 +14,9 @@
       <div class="avatar-panel">
         <div class="avatar-shell">
           <el-avatar :src="avatarSrc" :size="116" @error="handleAvatarError" />
-          <el-button class="avatar-trigger" circle type="primary" :icon="Camera" @click="triggerFileUpload" />
+          <el-button class="avatar-trigger" circle type="primary" @click="triggerFileUpload">
+            <el-icon><Camera /></el-icon>
+          </el-button>
           <input ref="fileInputRef" type="file" class="hidden-input" accept="image/*" @change="handleFileChange" />
         </div>
         <div class="avatar-copy">
@@ -41,11 +43,23 @@
           <span class="detail-value">{{ profile.phone || t("system.profile.value.unbound") }}</span>
         </div>
         <div class="detail-item">
-          <span class="detail-label">{{ t("system.profile.account.field.role") }}</span>
+          <span class="detail-label">{{ t("system.profile.account.field.email") }}</span>
+          <span class="detail-value">{{ profile.email || t("system.profile.value.unbound") }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">{{ t("system.profile.account.field.id_type") }}</span>
+          <span class="detail-value">{{ idTypeText }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">{{ t("system.profile.account.field.id_code") }}</span>
+          <span class="detail-value">{{ profile.id_code || t("system.profile.value.unbound") }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">{{ t("common.field.role") }}</span>
           <span class="detail-value">{{ profile.role_name || "--" }}</span>
         </div>
         <div class="detail-item">
-          <span class="detail-label">{{ t("system.profile.account.field.dept") }}</span>
+          <span class="detail-label">{{ t("common.field.department") }}</span>
           <span class="detail-value">{{ profile.dept_name || "--" }}</span>
         </div>
         <div class="detail-item detail-item--wide">
@@ -61,7 +75,7 @@
       :width="520"
       @closed="handleDialogClosed"
     >
-      <ProForm ref="accountFormRef" :model="accountForm" :fields="accountFormFields" />
+      <ProForm ref="accountFormRef" :model="accountForm" :fields="accountFormFields" :rules="accountFormRules" />
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="accountDialogVisible = false">{{ t("common.action.cancel") }}</el-button>
@@ -77,14 +91,14 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from "vue";
 import { t } from "@liujitcn/kratos-admin-core";
-import { defProfileAuthService } from "@liujitcn/kratos-admin-system/api/system/auth";
+import { defProfileAuthService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/auth";
 import type { UserProfileForm } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/auth";
-import { defFileService } from "@liujitcn/kratos-admin-core/api/base/file";
+import { BaseUserIDType } from "@liujitcn/kratos-admin-system/rpc/system/common/v1/common";
+import { defFileService } from "@liujitcn/kratos-admin-core/api/base/v1/file";
 import defaultAvatar from "@liujitcn/kratos-admin-core/assets/images/avatar.png";
 import ProDialog from "@liujitcn/kratos-admin-core/components/Dialog/ProDialog.vue";
 import ProForm from "@liujitcn/kratos-admin-core/components/ProForm/index.vue";
 import type { ProFormField, ProFormInstance } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
-import { Camera } from "@element-plus/icons-vue";
 
 /** 个人中心基础资料组件属性。 */
 interface ProfileBaseProps {
@@ -103,9 +117,12 @@ const accountFormRef = ref<ProFormInstance>();
 const accountDialogVisible = ref(false);
 const submitLoading = ref(false);
 const avatarSrc = ref(defaultAvatar);
-const accountForm = reactive<Pick<UserProfileForm, "nick_name" | "gender">>({
+const accountForm = reactive<Pick<UserProfileForm, "nick_name" | "gender" | "email" | "id_type" | "id_code">>({
   nick_name: "",
-  gender: 3
+  gender: 3,
+  email: "",
+  id_type: BaseUserIDType.BASE_USER_ID_TYPE_UNSPECIFIED,
+  id_code: ""
 });
 
 const accountFormFields = computed<ProFormField[]>(() => [
@@ -120,9 +137,52 @@ const accountFormFields = computed<ProFormField[]>(() => [
     label: t("system.profile.account.field.gender"),
     component: "dict",
     props: { code: "base_user_gender" }
+  },
+  {
+    prop: "email",
+    label: t("system.profile.account.field.email"),
+    component: "input",
+    props: { placeholder: t("system.base.user.placeholder.email") }
+  },
+  {
+    prop: "id_type",
+    label: t("system.profile.account.field.id_type"),
+    component: "select",
+    options: idTypeOptions.value,
+    props: { placeholder: t("common.placeholder.select") }
+  },
+  {
+    prop: "id_code",
+    label: t("system.profile.account.field.id_code"),
+    component: "input",
+    props: { placeholder: t("system.base.user.placeholder.id_code") }
   }
 ]);
 
+const idTypeOptions = computed(() => [
+  { label: t("system.base.user.id_type.unspecified"), value: BaseUserIDType.BASE_USER_ID_TYPE_UNSPECIFIED },
+  { label: t("system.base.user.id_type.id_card"), value: BaseUserIDType.BASE_USER_ID_TYPE_ID_CARD },
+  { label: t("system.base.user.id_type.passport"), value: BaseUserIDType.BASE_USER_ID_TYPE_PASSPORT },
+  { label: t("system.base.user.id_type.hk_macao_permit"), value: BaseUserIDType.BASE_USER_ID_TYPE_HK_MACAO_PERMIT },
+  { label: t("system.base.user.id_type.taiwan_permit"), value: BaseUserIDType.BASE_USER_ID_TYPE_TAIWAN_PERMIT },
+  {
+    label: t("system.base.user.id_type.foreign_permanent_residence"),
+    value: BaseUserIDType.BASE_USER_ID_TYPE_FOREIGN_PERMANENT_RESIDENCE
+  },
+  { label: t("system.base.user.id_type.other"), value: BaseUserIDType.BASE_USER_ID_TYPE_OTHER }
+]);
+
+const accountFormRules = computed(() => ({
+  email: [{ type: "email", message: t("system.base.user.validation.email_invalid"), trigger: "blur" }],
+  id_code: [
+    {
+      pattern: /^[A-Za-z0-9][A-Za-z0-9-]{0,63}$/,
+      message: t("system.base.user.validation.id_code_invalid"),
+      trigger: "blur"
+    }
+  ]
+}));
+
 /** 根据资料中的性别值输出展示文案。 */
 const genderText = computed(() => {
   if (props.profile.gender === 1) return t("common.value.male");
@@ -130,6 +190,11 @@ const genderText = computed(() => {
   return t("system.profile.value.private");
 });
 
+/** 根据证件类型输出展示文案。 */
+const idTypeText = computed(() => {
+  return idTypeOptions.value.find(item => item.value === props.profile.id_type)?.label ?? t("system.profile.value.unbound");
+});
+
 /**
  * 同步个人中心头像展示，优先使用用户头像，为空时回退默认头像。
  *
@@ -145,6 +210,9 @@ watch(
   profile => {
     accountForm.nick_name = profile.nick_name;
     accountForm.gender = profile.gender;
+    accountForm.email = profile.email;
+    accountForm.id_type = profile.id_type;
+    accountForm.id_code = profile.id_code;
     syncAvatarSrc(profile.avatar);
   },
   { immediate: true, deep: true }
@@ -165,6 +233,9 @@ function triggerFileUpload() {
 function openAccountDialog() {
   accountForm.nick_name = props.profile.nick_name;
   accountForm.gender = props.profile.gender;
+  accountForm.email = props.profile.email;
+  accountForm.id_type = props.profile.id_type;
+  accountForm.id_code = props.profile.id_code;
   accountDialogVisible.value = true;
 }
 
@@ -201,7 +272,10 @@ async function handleSubmitAccount() {
       user_profile: {
         ...props.profile,
         nick_name: accountForm.nick_name,
-        gender: accountForm.gender
+        gender: accountForm.gender,
+        email: accountForm.email,
+        id_type: accountForm.id_type,
+        id_code: accountForm.id_code
       }
     });
     ElMessage.success(t("system.profile.account.message.updated"));
@@ -217,13 +291,16 @@ function handleDialogClosed() {
   accountFormRef.value?.clearValidate();
   accountForm.nick_name = props.profile.nick_name;
   accountForm.gender = props.profile.gender;
+  accountForm.email = props.profile.email;
+  accountForm.id_type = props.profile.id_type;
+  accountForm.id_code = props.profile.id_code;
 }
 </script>
 
 <style scoped lang="scss">
 .base-card {
   border: 1px solid #ebeef5;
-  border-radius: 12px;
+  border-radius: var(--admin-page-radius);
 }
 :deep(.base-card .el-card__header) {
   padding: 18px 20px;
@@ -259,7 +336,7 @@ function handleDialogClosed() {
   text-align: center;
   background: #f8fafc;
   border: 1px solid #eef2f6;
-  border-radius: 12px;
+  border-radius: var(--admin-page-radius);
 }
 .avatar-shell {
   position: relative;
@@ -296,7 +373,7 @@ function handleDialogClosed() {
   padding: 16px;
   background: #ffffff;
   border: 1px solid #f0f2f5;
-  border-radius: 10px;
+  border-radius: var(--admin-page-radius);
 }
 .detail-item--wide {
   grid-column: 1 / -1;

package/dist/package/src/views/profile/components/password.vue

@@ -10,189 +10,20 @@
           <el-tag type="warning" effect="plain">{{ t("system.profile.password.value.strong_recommended") }}</el-tag>
         </div>
       </template>
-      <div class="password-layout">
-        <div class="password-form-wrap">
-          <ProForm
-            ref="passwordFormRef"
-            :model="passwordForm"
-            :fields="passwordFormFields"
-            :rules="passwordFormRules"
-          />
-          <PasswordStrength :password="passwordForm.new_pwd" class="password-form-wrap__strength" />
-          <div class="password-footer">
-            <el-button @click="resetPasswordForm">{{ t("common.action.reset") }}</el-button>
-            <el-button type="primary" :loading="submitLoading" @click="handleSubmitPassword">
-              {{ t("system.profile.password.action.update") }}
-            </el-button>
-          </div>
-        </div>
-        <div class="password-tips">
-          <div class="tip-card">
-            <span class="tip-badge">01</span>
-            <strong>{{ t("system.profile.password.tip.unique_title") }}</strong>
-            <p>{{ t("system.profile.password.tip.unique_description") }}</p>
-          </div>
-          <div class="tip-card">
-            <span class="tip-badge">02</span>
-            <strong>{{ t("system.profile.password.tip.strength_title") }}</strong>
-            <p>{{ t("system.profile.password.tip.strength_description") }}</p>
-          </div>
-          <div class="tip-card">
-            <span class="tip-badge">03</span>
-            <strong>{{ t("system.profile.password.tip.record_title") }}</strong>
-            <p>{{ t("system.profile.password.tip.record_description") }}</p>
-          </div>
-        </div>
-      </div>
+      <ChangePasswordForm />
     </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from "vue";
-import { useRouter } from "vue-router";
 import { t } from "@liujitcn/kratos-admin-core";
-import { defProfileAuthService } from "@liujitcn/kratos-admin-system/api/system/auth";
-import type { UserPasswordForm } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/auth";
-import PasswordStrength from "@liujitcn/kratos-admin-core/components/PasswordStrength/index.vue";
-import ProForm from "@liujitcn/kratos-admin-core/components/ProForm/index.vue";
-import type { ProFormField, ProFormInstance } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
-import { LOGIN_URL } from "@liujitcn/kratos-admin-core/config";
-import { useUserStore } from "@liujitcn/kratos-admin-core/stores/runtime";
-import {
-  PASSWORD_CRYPTO_SCENE,
-  encryptPassword,
-  getPasswordStrength,
-  validatePasswordStrengthValue
-} from "@liujitcn/kratos-admin-core/security";
-
-/** 修改密码表单状态，明文只在前端校验和加密前短暂保存。 */
-interface UserPasswordFormState {
-  /** 原密码明文只保留在前端表单中，提交前转换为密码密文。 */
-  old_pwd: string;
-  /** 新密码明文只保留在前端表单中，提交前转换为密码密文。 */
-  new_pwd: string;
-  /** 确认密码只用于前端一致性校验，不提交后端。 */
-  confirm_pwd: string;
-}
-
-const router = useRouter();
-const userStore = useUserStore();
-const passwordFormRef = ref<ProFormInstance>();
-const submitLoading = ref(false);
-const passwordForm = reactive<UserPasswordFormState>({
-  old_pwd: "",
-  new_pwd: "",
-  confirm_pwd: ""
-});
-
-const passwordFormFields = computed<ProFormField[]>(() => [
-  {
-    prop: "old_pwd",
-    label: t("system.profile.password.field.old_password"),
-    component: "password",
-    props: { placeholder: t("system.profile.password.placeholder.old_password") }
-  },
-  {
-    prop: "new_pwd",
-    label: t("system.profile.password.field.new_password"),
-    component: "password",
-    props: { placeholder: t("system.profile.password.placeholder.new_password") }
-  },
-  {
-    prop: "confirm_pwd",
-    label: t("system.profile.password.field.confirm_password"),
-    component: "password",
-    props: { placeholder: t("system.profile.password.placeholder.confirm_password") }
-  }
-]);
-
-const passwordFormRules = computed(() => ({
-  old_pwd: [{ required: true, message: t("system.profile.password.placeholder.old_password"), trigger: "blur" }],
-  new_pwd: [
-    { required: true, message: t("system.profile.password.placeholder.new_password"), trigger: "blur" },
-    { validator: validatePasswordStrength, trigger: "blur" }
-  ],
-  confirm_pwd: [{ required: true, message: t("system.profile.password.placeholder.confirm_password"), trigger: "blur" }]
-}));
-
-/** 统一计算当前新密码强度，供展示和提交校验复用。 */
-const passwordStrength = computed(() => getPasswordStrength(passwordForm.new_pwd));
-
-/** 提交修改密码请求，并校验两次输入的一致性。 */
-async function handleSubmitPassword() {
-  if (!(await passwordFormRef.value?.validate())) return;
-  if (passwordForm.new_pwd !== passwordForm.confirm_pwd) {
-    ElMessage.error(t("system.profile.password.message.mismatch"));
-    return;
-  }
-  if (!passwordStrength.value.isValid) {
-    ElMessage.error(t("system.profile.password.message.strength_insufficient"));
-    return;
-  }
-
-  submitLoading.value = true;
-  try {
-    const oldPwd = await encryptPassword(passwordForm.old_pwd, PASSWORD_CRYPTO_SCENE.PASSWORD_CRYPTO_SCENE_UPDATE_USER_PASSWORD);
-    const newPwd = await encryptPassword(passwordForm.new_pwd, PASSWORD_CRYPTO_SCENE.PASSWORD_CRYPTO_SCENE_UPDATE_USER_PASSWORD);
-    const userPassword: UserPasswordForm = {
-      old_pwd: oldPwd,
-      new_pwd: newPwd
-    };
-    await defProfileAuthService.UpdateUserPassword({ user_password: userPassword });
-    ElMessage.success(t("system.profile.password.message.updated"));
-    resetPasswordForm();
-    await forceRelogin();
-  } finally {
-    submitLoading.value = false;
-  }
-}
-
-/** 重置密码表单内容与校验状态。 */
-function resetPasswordForm() {
-  passwordFormRef.value?.resetFields();
-  passwordFormRef.value?.clearValidate();
-  passwordForm.old_pwd = "";
-  passwordForm.new_pwd = "";
-  passwordForm.confirm_pwd = "";
-}
-
-/** 修改密码成功后强制重新登录，避免旧登录态继续使用。 */
-async function forceRelogin() {
-  try {
-    await userStore.logout();
-  } catch (_error) {
-    // 若后端已提前让旧令牌失效，前端仍需保证本地登录态被清空。
-    userStore.clearAuthData();
-  }
-  await router.replace(LOGIN_URL);
-}
-
-/**
- * 校验新密码强度，必须达到最高强度才允许提交。
- *
- * @param _rule 表单规则对象
- * @param value 当前输入的新密码
- * @param callback 校验回调
- */
-function validatePasswordStrength(_rule: unknown, value: string, callback: (error?: Error) => void) {
-  if (!value) {
-    callback();
-    return;
-  }
-  const result = validatePasswordStrengthValue(value);
-  if (!result.valid) {
-    callback(new Error(t("core.password.error")));
-    return;
-  }
-  callback();
-}
+import ChangePasswordForm from "../../../components/ChangePasswordForm.vue";
 </script>
 
 <style scoped lang="scss">
 .password-card {
   border: 1px solid #ebeef5;
-  border-radius: 12px;
+  border-radius: var(--admin-page-radius);
 }
 :deep(.password-card .el-card__header) {
   padding: 18px 20px;
@@ -217,63 +48,6 @@ function validatePasswordStrength(_rule: unknown, value: string, callback: (erro
   font-size: 13px;
   color: #909399;
 }
-.password-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.9fr);
-  gap: 16px;
-}
-.password-form-wrap,
-.tip-card {
-  padding: 18px;
-  background: #ffffff;
-  border: 1px solid #f0f2f5;
-  border-radius: 10px;
-}
-.password-form-wrap__strength {
-  margin-top: 16px;
-}
-.password-footer {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  margin-top: 24px;
-}
-.password-tips {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.tip-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  margin-bottom: 10px;
-  font-size: 12px;
-  font-weight: 700;
-  color: #409eff;
-  background: #ecf5ff;
-  border-radius: 8px;
-}
-.tip-card strong {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 15px;
-  color: #303133;
-}
-.tip-card p {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.6;
-  color: #909399;
-}
-
-@media screen and (width <= 960px) {
-  .password-layout {
-    grid-template-columns: 1fr;
-  }
-}
 
 @media screen and (width <= 640px) {
   .panel-header {