@liujitcn/kratos-admin-system 0.0.29 → 0.0.32

package/dist/package/src/components/ChangePasswordForm.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="change-password-form">
+    <ProForm
+      ref="passwordFormRef"
+      :model="passwordForm"
+      :fields="passwordFormFields"
+      :rules="passwordFormRules"
+    />
+    <PasswordStrength :password="passwordForm.new_pwd" class="change-password-form__strength" />
+    <div class="change-password-form__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>
+</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/admin/v1/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 { clearPasswordChangeRequired } from "@liujitcn/kratos-admin-core/request";
+import { useUserStore } from "@liujitcn/kratos-admin-core/stores/runtime";
+import {
+  PASSWORD_CRYPTO_SCENE,
+  encryptPassword
+} 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" }
+  ],
+  confirm_pwd: [{ required: true, message: t("system.profile.password.placeholder.confirm_password"), trigger: "blur" }]
+}));
+
+/** 提交修改密码请求，并校验两次输入的一致性。 */
+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;
+  }
+  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 });
+    clearPasswordChangeRequired();
+    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);
+}
+
+</script>
+
+<style scoped lang="scss">
+.change-password-form__strength {
+  margin-top: 16px;
+}
+
+.change-password-form__footer {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+</style>

package/dist/package/src/components/DynamicI18nCell.vue

@@ -30,16 +30,28 @@
           </span>
         </template>
       </el-table-column>
-      <el-table-column :label="t('common.field.operation')" width="200" fixed="right">
+      <el-table-column v-if="editable" :label="t('common.field.operation')" width="200" fixed="right">
         <template #default="{ row }">
-          <el-button v-if="!row.editing" link type="primary" :icon="EditPen" @click="startEdit(row)">
+          <el-button
+            v-if="editable && !row.editing"
+            link
+            type="primary"
+            :icon="EditPen"
+            @click="startEdit(row as DynamicI18nRow)"
+          >
             {{ t("common.action.edit") }}
           </el-button>
           <template v-else>
-            <el-button link type="primary" :icon="Check" :loading="row.saving" @click="saveI18n(row)">
+            <el-button
+              link
+              type="primary"
+              :icon="Check"
+              :loading="row.saving"
+              @click="saveI18n(row as DynamicI18nRow)"
+            >
               {{ t("common.action.save") }}
             </el-button>
-            <el-button link :icon="Close" :disabled="row.saving" @click="cancelEdit(row)">
+            <el-button link :icon="Close" :disabled="row.saving" @click="cancelEdit(row as DynamicI18nRow)">
               {{ t("common.action.cancel") }}
             </el-button>
           </template>
@@ -55,8 +67,8 @@ import { ElMessage } from "element-plus";
 import { Check, Close, EditPen } from "@element-plus/icons-vue";
 import ProDialog from "@liujitcn/kratos-admin-core/components/Dialog/ProDialog.vue";
 import { t, useLocaleStore } from "@liujitcn/kratos-admin-core";
-import { loadEnabledBaseLanguages, useEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/base_language";
-import { defBaseI18nService } from "@liujitcn/kratos-admin-system/api/system/base_i18n";
+import { loadEnabledBaseLanguages, useEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_language";
+import { defBaseI18nService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_i18n";
 import type { BaseI18n } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_i18n";
 import { I18nTargetType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_i18n";
 import { getLanguageLabel } from "./dynamicI18n";
@@ -71,9 +83,15 @@ interface DynamicI18nCellProps {
   targetId?: number;
   /** 资源列表返回的非主语言翻译。 */
   i18ns?: BaseI18n[];
+  /** 是否允许编辑翻译。 */
+  editable?: boolean;
 }
 
-const props = defineProps<DynamicI18nCellProps>();
+const props = withDefaults(defineProps<DynamicI18nCellProps>(), {
+  editable: true
+});
+
+const editable = computed(() => props.editable);
 
 const { languages } = useEnabledBaseLanguages();
 const { locale } = useLocaleStore();
@@ -130,6 +148,7 @@ async function loadI18ns() {
     await loadEnabledBaseLanguages();
     const rows = await queryI18nRows();
     i18nRows.value = rows;
+    if (!props.editable) return;
     const missingRows = rows.filter(row => !row.text);
     if (missingRows.length === 0) return;
     if (!props.source) return;
@@ -183,6 +202,7 @@ async function queryI18nRows(): Promise<DynamicI18nRow[]> {
 
 /** startEdit 开启指定语言的编辑状态。 */
 function startEdit(row: DynamicI18nRow) {
+  if (!props.editable) return;
   row.originalText = row.text;
   row.editing = true;
 }
@@ -197,7 +217,7 @@ function cancelEdit(row: DynamicI18nRow) {
 async function saveI18n(row: DynamicI18nRow) {
   const targetType = props.targetType;
   const targetId = props.targetId;
-  if (row.saving || !targetType || !targetId) return;
+  if (!props.editable || row.saving || !targetType || !targetId) return;
   if (row.id === 0 && !row.text) {
     row.editing = false;
     return;

package/dist/package/src/components/DynamicI18nEditor.vue

@@ -49,7 +49,7 @@ import { computed, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
 import { Promotion } from "@element-plus/icons-vue";
 import { t, useLocaleStore } from "@liujitcn/kratos-admin-core";
-import { defBaseI18nService } from "@liujitcn/kratos-admin-system/api/system/base_i18n";
+import { defBaseI18nService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_i18n";
 import { getLanguageLabel, type DynamicI18nValue } from "./dynamicI18n";
 
 /** DynamicI18nEditorProps 动态翻译编辑器属性。 */

package/dist/package/src/components/ForcedPasswordDialog.vue

@@ -0,0 +1,40 @@
+<template>
+  <ProDialog
+    :model-value="passwordChangeState.required"
+    :title="t('system.profile.password.title')"
+    width="min(560px, calc(100vw - 32px))"
+    top="8vh"
+    class="forced-password-dialog"
+    append-to-body
+    :show-footer="false"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-alert
+      :title="passwordChangeState.message || t('system.profile.password.description')"
+      type="warning"
+      :closable="false"
+      show-icon
+      class="forced-password-alert"
+    />
+    <ChangePasswordForm v-if="passwordChangeState.required" />
+  </ProDialog>
+</template>
+
+<script setup lang="ts">
+import { t } from "@liujitcn/kratos-admin-core";
+import ProDialog from "@liujitcn/kratos-admin-core/components/Dialog/ProDialog.vue";
+import { passwordChangeState } from "@liujitcn/kratos-admin-core/request";
+import ChangePasswordForm from "./ChangePasswordForm.vue";
+</script>
+
+<style scoped>
+.forced-password-alert {
+  margin-bottom: 16px;
+}
+
+:deep(.forced-password-dialog .change-password-form__footer) {
+  margin-top: 12px;
+}
+</style>

package/dist/package/src/components/LogTable.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="table-box">
+    <ProTable ref="proTable" row-key="id" :columns="resolvedColumns" :request-api="requestTable" />
+
+    <ProDialog v-model="dialog.visible" :title="config.detailTitle" width="1280px" @close="handleCloseDialog">
+      <el-descriptions border :column="2" class="detail-container">
+        <el-descriptions-item v-for="field in config.detailFields" :key="field.key" :label="field.label" :span="field.span ?? 1">
+          <pre v-if="field.code" class="code-block">{{ formatField(field) }}</pre>
+          <span v-else>{{ formatField(field) }}</span>
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <section v-if="config.trace && (traceLoading || traceItems.length > 0)" class="trace-section">
+        <h3>{{ t("system.base.log.trace.title") }}</h3>
+        <el-table v-loading="traceLoading" :data="traceItems" max-height="300" border>
+          <el-table-column :label="t('system.base.log.trace.log_type')" width="130">
+            <template #default="scope">{{ formatLogType(scope.row.log_type) }}</template>
+          </el-table-column>
+          <el-table-column prop="resource" :label="t('system.base.log.trace.resource')" min-width="280" show-overflow-tooltip />
+          <el-table-column prop="user_name" :label="t('system.base.log.field.user_name')" width="130" />
+          <el-table-column :label="t('system.base.log.field.result')" width="100">
+            <template #default="scope">{{ formatResult(scope.row.result) }}</template>
+          </el-table-column>
+          <el-table-column :label="t('system.base.log.trace.duration')" width="110" align="right">
+            <template #default="scope">{{ formatDuration(scope.row.duration_ms) }}</template>
+          </el-table-column>
+          <el-table-column prop="occurred_at" :label="t('system.base.log.field.occurred_at')" width="190" />
+        </el-table>
+      </section>
+
+      <template #footer>
+        <el-button @click="handleCloseDialog">{{ config.closeText }}</el-button>
+      </template>
+    </ProDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, unref } from "vue";
+import type { ColumnProps, EnumProps, ProTableInstance } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+import ProTable from "@liujitcn/kratos-admin-core/components/ProTable";
+import ProDialog from "@liujitcn/kratos-admin-core/components/Dialog/ProDialog.vue";
+import { buildPageRequest } from "@liujitcn/kratos-admin-core/table";
+import { formatJson } from "@liujitcn/kratos-admin-core/format";
+import { t } from "@liujitcn/kratos-admin-core";
+import { BaseLogType, BaseLogResult } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_log";
+import type { BaseLogTraceItem } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_log";
+import { logEnumLabel } from "./log";
+
+/** 审计详情字段配置。 */
+export interface LogDetailField {
+  /** 详情对象中对应的字段名。 */
+  key: string;
+  /** 字段在详情弹窗中的显示名称。 */
+  label: string;
+  /** 字段占用的描述列数，未设置时使用一列。 */
+  span?: number;
+  /** 是否按格式化 JSON 的代码块展示。 */
+  code?: boolean;
+  /** 字段对应的枚举字典选项。 */
+  enum?: EnumProps[];
+  /** 字段自定义格式化函数。 */
+  format?: (value: unknown) => string;
+}
+
+/** 审计列表页面配置。 */
+export interface LogTableConfig {
+  /** 审计列表表格的列定义。 */
+  columns: ColumnProps[];
+  /** 详情弹窗标题。 */
+  detailTitle: string;
+  /** 详情弹窗关闭按钮文案。 */
+  closeText: string;
+  /** 详情字段和展示格式定义。 */
+  detailFields: LogDetailField[];
+  /** 分页查询函数，返回列表和总数。 */
+  request: (params: Record<string, unknown>) => Promise<{ list: Record<string, unknown>[]; total: number }>;
+  /** 按日志编号读取详情。 */
+  get: (id: string) => Promise<Record<string, unknown>>;
+  /** 按请求编号和链路编号读取关联审计时间线。 */
+  trace?: (requestID: string, traceID: string) => Promise<BaseLogTraceItem[]>;
+}
+
+const props = defineProps<{ config: LogTableConfig }>();
+const proTable = ref<ProTableInstance>();
+const detail = reactive<Record<string, unknown>>({});
+const dialog = reactive({ visible: false });
+const traceItems = ref<BaseLogTraceItem[]>([]);
+const traceLoading = ref(false);
+const resolvedColumns = computed(() => unref(props.config.columns));
+
+/** 请求审计日志分页数据。 */
+async function requestTable(params: Record<string, unknown>) {
+  const result = await props.config.request(buildPageRequest(params));
+  return { data: { list: result.list, total: result.total } };
+}
+
+/** 打开审计详情弹窗。 */
+async function handleOpenDialog(id: string) {
+  const value = await props.config.get(id);
+  Object.keys(detail).forEach(key => delete detail[key]);
+  Object.assign(detail, value);
+  dialog.visible = true;
+  traceItems.value = [];
+  const requestID = String(detail.request_id ?? "");
+  const traceID = String(detail.trace_id ?? "");
+  if (!props.config.trace || (!requestID && !traceID)) return;
+  traceLoading.value = true;
+  try {
+    traceItems.value = await props.config.trace(requestID, traceID);
+  } catch {
+    traceItems.value = [];
+  } finally {
+    traceLoading.value = false;
+  }
+}
+
+/** 关闭并清理审计详情弹窗。 */
+function handleCloseDialog() {
+  dialog.visible = false;
+  Object.keys(detail).forEach(key => delete detail[key]);
+  traceItems.value = [];
+  traceLoading.value = false;
+}
+
+/** 格式化详情字段，JSON 内容使用统一脱敏展示格式。 */
+function formatField(field: LogDetailField) {
+  const value = detail[field.key];
+  if (value === undefined || value === null || value === "") return t("common.value.none");
+  if (field.enum) return logEnumLabel(field.enum, value, t("common.value.unknown"));
+  if (field.format) return field.format(value);
+  if (field.code) return formatJson(String(value));
+  return String(value);
+}
+
+/** 格式化关联日志耗时。 */
+function formatDuration(value: unknown) {
+  const duration = Number(value);
+  return duration > 0 ? `${duration} ms` : t("common.value.none");
+}
+
+/** 格式化关联审计日志类型。 */
+function formatLogType(value: BaseLogType) {
+  const keys: Partial<Record<BaseLogType, string>> = {
+    [BaseLogType.BASE_LOG_TYPE_LOGIN]: "system.base.log.trace.type.login",
+    [BaseLogType.BASE_LOG_TYPE_API]: "system.base.log.trace.type.api",
+    [BaseLogType.BASE_LOG_TYPE_OPERATION]: "system.base.log.trace.type.operation",
+    [BaseLogType.BASE_LOG_TYPE_DATA_ACCESS]: "system.base.log.trace.type.data_access",
+    [BaseLogType.BASE_LOG_TYPE_PERMISSION]: "system.base.log.trace.type.permission",
+    [BaseLogType.BASE_LOG_TYPE_POLICY_EVALUATION]: "system.base.log.trace.type.policy"
+  };
+  return t(keys[value] ?? "system.base.log.trace.type.unknown");
+}
+
+/** 格式化关联审计结果。 */
+function formatResult(value: BaseLogResult) {
+  const keys: Partial<Record<BaseLogResult, string>> = {
+    [BaseLogResult.BASE_LOG_RESULT_SUCCESS]: "system.base.log.result.success",
+    [BaseLogResult.BASE_LOG_RESULT_FAILURE]: "system.base.log.result.failure",
+    [BaseLogResult.BASE_LOG_RESULT_ERROR]: "system.base.log.result.error"
+  };
+  return t(keys[value] ?? "system.base.log.result.unspecified");
+}
+
+defineExpose({ handleOpenDialog, proTable });
+</script>
+
+<style scoped>
+.detail-container {
+  width: 100%;
+}
+
+.code-block {
+  max-height: 360px;
+  margin: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.trace-section {
+  margin-top: 20px;
+}
+
+.trace-section h3 {
+  margin: 0 0 12px;
+  font-size: 15px;
+  font-weight: 600;
+}
+</style>