@liujitcn/kratos-admin-system 0.0.1

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

@@ -0,0 +1,320 @@
+<template>
+  <el-card class="base-card" shadow="never">
+    <template #header>
+      <div class="panel-header">
+        <div>
+          <h3>账号信息</h3>
+          <p>维护头像、昵称和基础账号资料。</p>
+        </div>
+        <el-button type="primary" plain @click="openAccountDialog">修改基本资料</el-button>
+      </div>
+    </template>
+
+    <div class="base-layout">
+      <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" />
+          <input ref="fileInputRef" type="file" class="hidden-input" accept="image/*" @change="handleFileChange" />
+        </div>
+        <div class="avatar-copy">
+          <strong>头像</strong>
+          <p>点击右下角可更换头像</p>
+        </div>
+      </div>
+
+      <div class="detail-grid">
+        <div class="detail-item">
+          <span class="detail-label">登录账号</span>
+          <span class="detail-value">{{ profile.user_name || "--" }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">昵称</span>
+          <span class="detail-value">{{ profile.nick_name || "--" }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">性别</span>
+          <span class="detail-value">{{ genderText }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">绑定手机</span>
+          <span class="detail-value">{{ profile.phone || "未绑定" }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">所属角色</span>
+          <span class="detail-value">{{ profile.role_name || "--" }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">所属部门</span>
+          <span class="detail-value">{{ profile.dept_name || "--" }}</span>
+        </div>
+        <div class="detail-item detail-item--wide">
+          <span class="detail-label">创建时间</span>
+          <span class="detail-value">{{ profile.created_at || "--" }}</span>
+        </div>
+      </div>
+    </div>
+
+    <ProDialog v-model="accountDialogVisible" title="修改基本资料" :width="520" @closed="handleDialogClosed">
+      <ProForm ref="accountFormRef" :model="accountForm" :fields="accountFormFields" label-width="96px" />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="accountDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="handleSubmitAccount">保存</el-button>
+        </div>
+      </template>
+    </ProDialog>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { defProfileAuthService } from "@liujitcn/kratos-admin-system/api/system/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 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 { ElMessage } from "element-plus";
+import { Camera } from "@element-plus/icons-vue";
+
+/** 个人中心基础资料组件属性。 */
+interface ProfileBaseProps {
+  /** 当前用户资料。 */
+  profile: UserProfileForm;
+}
+
+const props = defineProps<ProfileBaseProps>();
+
+const emit = defineEmits<{
+  refreshed: [];
+}>();
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const accountFormRef = ref<ProFormInstance>();
+const accountDialogVisible = ref(false);
+const submitLoading = ref(false);
+const avatarSrc = ref(defaultAvatar);
+const accountForm = reactive<Pick<UserProfileForm, "nick_name" | "gender">>({
+  nick_name: "",
+  gender: 3
+});
+
+const accountFormFields: ProFormField[] = [
+  { prop: "nick_name", label: "昵称", component: "input", props: { placeholder: "请输入昵称" } },
+  { prop: "gender", label: "性别", component: "dict", props: { code: "base_user_gender" } }
+];
+
+/** 根据资料中的性别值输出展示文案。 */
+const genderText = computed(() => {
+  if (props.profile.gender === 1) return "男";
+  if (props.profile.gender === 2) return "女";
+  return "保密";
+});
+
+/**
+ * 同步个人中心头像展示，优先使用用户头像，为空时回退默认头像。
+ *
+ * @param avatar 用户头像地址
+ */
+function syncAvatarSrc(avatar?: string) {
+  // 个人中心与头部头像保持一致，统一使用本地默认头像兜底。
+  avatarSrc.value = avatar || defaultAvatar;
+}
+
+watch(
+  () => props.profile,
+  profile => {
+    accountForm.nick_name = profile.nick_name;
+    accountForm.gender = profile.gender;
+    syncAvatarSrc(profile.avatar);
+  },
+  { immediate: true, deep: true }
+);
+
+/** 头像加载失败时回退默认头像，避免出现空白或破图。 */
+function handleAvatarError() {
+  avatarSrc.value = defaultAvatar;
+  return false;
+}
+
+/** 触发头像文件选择。 */
+function triggerFileUpload() {
+  fileInputRef.value?.click();
+}
+
+/** 打开基本资料编辑弹窗，并回填当前资料。 */
+function openAccountDialog() {
+  accountForm.nick_name = props.profile.nick_name;
+  accountForm.gender = props.profile.gender;
+  accountDialogVisible.value = true;
+}
+
+/** 处理头像文件上传并同步到个人资料。 */
+async function handleFileChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) return;
+
+  try {
+    const uploadResult = await defFileService.UploadFile(file, "avatar");
+    await defProfileAuthService.UpdateUserProfile({
+      user_profile: {
+        ...props.profile,
+        avatar: uploadResult.url
+      }
+    });
+    ElMessage.success("头像更新成功");
+    emit("refreshed");
+  } catch (_error) {
+    ElMessage.error("头像上传失败");
+  } finally {
+    target.value = "";
+  }
+}
+
+/** 提交基本资料更新。 */
+async function handleSubmitAccount() {
+  if (!(await accountFormRef.value?.validate())) return;
+
+  submitLoading.value = true;
+  try {
+    await defProfileAuthService.UpdateUserProfile({
+      user_profile: {
+        ...props.profile,
+        nick_name: accountForm.nick_name,
+        gender: accountForm.gender
+      }
+    });
+    ElMessage.success("基本资料已更新");
+    accountDialogVisible.value = false;
+    emit("refreshed");
+  } finally {
+    submitLoading.value = false;
+  }
+}
+
+/** 弹窗关闭后清理校验状态，并恢复表单值。 */
+function handleDialogClosed() {
+  accountFormRef.value?.clearValidate();
+  accountForm.nick_name = props.profile.nick_name;
+  accountForm.gender = props.profile.gender;
+}
+</script>
+
+<style scoped lang="scss">
+.base-card {
+  border: 1px solid #ebeef5;
+  border-radius: 12px;
+}
+:deep(.base-card .el-card__header) {
+  padding: 18px 20px;
+  border-bottom: 1px solid #f0f2f5;
+}
+:deep(.base-card .el-card__body) {
+  padding: 20px;
+}
+.panel-header {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.panel-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #303133;
+}
+.panel-header p {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: #909399;
+}
+.base-layout {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+.avatar-panel {
+  padding: 24px 20px;
+  text-align: center;
+  background: #f8fafc;
+  border: 1px solid #eef2f6;
+  border-radius: 12px;
+}
+.avatar-shell {
+  position: relative;
+  display: inline-flex;
+}
+.avatar-trigger {
+  position: absolute;
+  right: 6px;
+  bottom: 4px;
+}
+.hidden-input {
+  display: none;
+}
+.avatar-copy {
+  margin-top: 16px;
+}
+.avatar-copy strong {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+.avatar-copy p {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: #909399;
+}
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.detail-item {
+  padding: 16px;
+  background: #ffffff;
+  border: 1px solid #f0f2f5;
+  border-radius: 10px;
+}
+.detail-item--wide {
+  grid-column: 1 / -1;
+}
+.detail-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #909399;
+}
+.detail-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  word-break: break-all;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media screen and (width <= 992px) {
+  .base-layout,
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+  .detail-item--wide {
+    grid-column: auto;
+  }
+}
+
+@media screen and (width <= 640px) {
+  .panel-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>

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

@@ -0,0 +1,269 @@
+<template>
+  <div class="profile-password">
+    <el-card class="password-card" shadow="never">
+      <template #header>
+        <div class="panel-header">
+          <div>
+            <h3>修改密码</h3>
+            <p>更新当前登录密码，保持账号安全。</p>
+          </div>
+          <el-tag type="warning" effect="plain">建议高强度</el-tag>
+        </div>
+      </template>
+      <div class="password-layout">
+        <div class="password-form-wrap">
+          <ProForm
+            ref="passwordFormRef"
+            :model="passwordForm"
+            :fields="passwordFormFields"
+            :rules="passwordFormRules"
+            label-width="96px"
+          />
+          <PasswordStrength :password="passwordForm.new_pwd" class="password-form-wrap__strength" />
+          <div class="password-footer">
+            <el-button @click="resetPasswordForm">重置</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="handleSubmitPassword">更新密码</el-button>
+          </div>
+        </div>
+        <div class="password-tips">
+          <div class="tip-card">
+            <span class="tip-badge">01</span>
+            <strong>避免重复密码</strong>
+            <p>不要重复使用旧密码或其他系统已使用密码。</p>
+          </div>
+          <div class="tip-card">
+            <span class="tip-badge">02</span>
+            <strong>控制密码强度</strong>
+            <p>建议使用大小写字母、数字和符号组合。</p>
+          </div>
+          <div class="tip-card">
+            <span class="tip-badge">03</span>
+            <strong>及时更新记录</strong>
+            <p>如有账号交接，请同步更新保管记录。</p>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+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 { ElMessage } from "element-plus";
+import {
+  PASSWORD_CRYPTO_SCENE,
+  PASSWORD_STRENGTH_ERROR_MESSAGE,
+  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: ProFormField[] = [
+  { prop: "old_pwd", label: "原密码", component: "password", props: { placeholder: "请输入原密码" } },
+  { prop: "new_pwd", label: "新密码", component: "password", props: { placeholder: "请输入新密码" } },
+  { prop: "confirm_pwd", label: "确认密码", component: "password", props: { placeholder: "请再次输入新密码" } }
+];
+
+const passwordFormRules = {
+  old_pwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
+  new_pwd: [
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { validator: validatePasswordStrength, trigger: "blur" }
+  ],
+  confirm_pwd: [{ required: true, message: "请再次输入新密码", 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("两次输入的密码不一致");
+    return;
+  }
+  if (!passwordStrength.value.isValid) {
+    ElMessage.error("新密码强度不足，请提升到最高强度");
+    return;
+  }
+
+  submitLoading.value = true;
+  try {
+    const oldPwd = await encryptPassword(passwordForm.old_pwd, PASSWORD_CRYPTO_SCENE.UPDATE_USER_PASSWORD);
+    const newPwd = await encryptPassword(passwordForm.new_pwd, PASSWORD_CRYPTO_SCENE.UPDATE_USER_PASSWORD);
+    const userPassword: UserPasswordForm = {
+      old_pwd: oldPwd,
+      new_pwd: newPwd
+    };
+    await defProfileAuthService.UpdateUserPassword({ user_password: userPassword });
+    ElMessage.success("密码修改成功，请重新登录");
+    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(result.message || PASSWORD_STRENGTH_ERROR_MESSAGE));
+    return;
+  }
+  callback();
+}
+</script>
+
+<style scoped lang="scss">
+.password-card {
+  border: 1px solid #ebeef5;
+  border-radius: 12px;
+}
+:deep(.password-card .el-card__header) {
+  padding: 18px 20px;
+  border-bottom: 1px solid #f0f2f5;
+}
+:deep(.password-card .el-card__body) {
+  padding: 20px;
+}
+.panel-header {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.panel-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #303133;
+}
+.panel-header p {
+  margin: 6px 0 0;
+  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 {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>