增加admin管理帐号和项目的界面--初步实现

frontend/src/views/admin/UserResetPassword.vue

@@ -0,0 +1,170 @@
+<template>
+  <el-dialog title="重置密码" width="520px" v-model="visibleProxy" :close-on-click-modal="false">
+    <el-alert
+      type="warning"
+      show-icon
+      title="该操作将影响用户账号，请确认是否继续"
+      description="系统将生成临时密码，需再次输入用户名才能提交。"
+      class="mb-12"
+    />
+    <div class="info">重置对象：<strong>{{ user?.username }}</strong></div>
+    <el-form ref="formRef" :model="form" label-width="140px" :rules="rules">
+      <el-form-item label="确认用户名" prop="confirmUsername">
+        <el-input v-model="form.confirmUsername" placeholder="请输入用户名以确认" />
+      </el-form-item>
+      <el-form-item label="密码方式" prop="mode">
+        <el-radio-group v-model="form.mode">
+          <el-radio label="auto">系统生成临时密码</el-radio>
+          <el-radio label="manual">手动输入新密码</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="form.mode === 'auto' ? '临时密码' : '新密码'" prop="passwordValue">
+        <el-input
+          v-if="form.mode === 'auto'"
+          v-model="form.tempPassword"
+          type="password"
+          show-password
+          readonly
+        >
+          <template #append>
+            <el-button @click="regenerate">重新生成</el-button>
+          </template>
+        </el-input>
+        <el-input
+          v-else
+          v-model="form.manualPassword"
+          type="password"
+          show-password
+          placeholder="请输入新密码"
+        />
+        <div class="hint">不会明文展示，请通过安全渠道告知用户</div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="visibleProxy = false">取消</el-button>
+      <el-button type="danger" :disabled="!canSubmit" :loading="submitting" @click="onSubmit">确认重置</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
+import { updateUser } from "../../api/users";
+import type { UserInfo } from "../../types/api";
+
+const props = defineProps<{
+  visible: boolean;
+  user: UserInfo | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:visible", value: boolean): void;
+  (e: "reset"): void;
+}>();
+
+const visibleProxy = computed({
+  get: () => props.visible,
+  set: (val: boolean) => emit("update:visible", val),
+});
+
+const formRef = ref<FormInstance>();
+const submitting = ref(false);
+const form = reactive({
+  confirmUsername: "",
+  mode: "auto",
+  tempPassword: "",
+  manualPassword: "",
+});
+
+const rules = reactive<FormRules>({
+  confirmUsername: [{ required: true, message: "请再次输入用户名", trigger: "blur" }],
+  mode: [{ required: true, message: "请选择密码方式", trigger: "change" }],
+  passwordValue: [
+    {
+      validator: (_rule, _value, callback) => {
+        if (form.mode === "auto" && !form.tempPassword) {
+          callback(new Error("临时密码生成异常"));
+          return;
+        }
+        if (form.mode === "manual" && !form.manualPassword) {
+          callback(new Error("请输入新密码"));
+          return;
+        }
+        callback();
+      },
+      trigger: "blur",
+    },
+  ],
+});
+
+const generatePassword = () => {
+  const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%^&*";
+  let pwd = "";
+  for (let i = 0; i < 12; i++) {
+    pwd += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  form.tempPassword = pwd;
+};
+
+const regenerate = () => generatePassword();
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      form.confirmUsername = "";
+      form.mode = "auto";
+      generatePassword();
+      form.manualPassword = "";
+    }
+  }
+);
+
+const canSubmit = computed(() => !!props.user && form.confirmUsername === props.user.username);
+
+const onSubmit = async () => {
+  if (!props.user) return;
+  await formRef.value?.validate();
+  if (form.confirmUsername !== props.user.username) {
+    ElMessage.error("确认用户名不匹配，无法提交");
+    return;
+  }
+  const ok = await ElMessageBox.confirm(
+    "该操作将影响用户账号，请确认是否继续",
+    "确认重置密码",
+    {
+      type: "warning",
+      confirmButtonText: "确认重置",
+      cancelButtonText: "取消",
+    }
+  ).catch(() => null);
+  if (!ok) return;
+  submitting.value = true;
+  try {
+    const password = form.mode === "manual" ? form.manualPassword : form.tempPassword;
+    await updateUser(props.user.id, { password });
+    ElMessage.success("密码已重置");
+    emit("reset");
+    visibleProxy.value = false;
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "重置失败");
+  } finally {
+    submitting.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.mb-12 {
+  margin-bottom: 12px;
+}
+.info {
+  margin-bottom: 8px;
+}
+.hint {
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+</style>