@liujitcn/kratos-admin-system 0.0.29 → 0.0.32

package/dist/package/src/views/base/oauth-client/index.vue

@@ -0,0 +1,421 @@
+<!-- 开放授权客户端管理 -->
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      row-key="id"
+      :columns="columns"
+      :header-actions="headerActions"
+      :request-api="requestOauthClientTable"
+    />
+
+    <FormDialog
+      v-model="dialog.visible"
+      ref="formDialogRef"
+      :title="t(dialog.titleKey)"
+      width="960px"
+      :model="formData"
+      :fields="formFields"
+      :rules="rules"
+      @confirm="handleSubmit"
+      @close="handleCloseDialog"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import type { ColumnProps, HeaderActionProps, ProTableInstance } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+import ProTable from "@liujitcn/kratos-admin-core/components/ProTable";
+import FormDialog from "@liujitcn/kratos-admin-core/components/Dialog/FormDialog.vue";
+import type { ProFormField, ProFormOption } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
+import { useAuthButtons } from "@liujitcn/kratos-admin-core/auth";
+import { buildPageRequest, normalizeSelectedIds } from "@liujitcn/kratos-admin-core/table";
+import { t } from "@liujitcn/kratos-admin-core";
+import { copyText } from "@liujitcn/kratos-admin-core/security";
+import { defOauthClientService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/oauth_client";
+import { defBaseTenantService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_tenant";
+import type { BaseApi } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_api";
+import {
+  OauthClientCryptoType,
+  type OauthClient,
+  type OauthClientForm,
+  type PageOauthClientRequest
+} from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/oauth_client";
+import type { SelectOptionResponse_Option } from "@liujitcn/kratos-admin-system/rpc/common/v1/common";
+import { Status } from "@liujitcn/kratos-admin-system/rpc/common/v1/enum";
+import { useUserStore } from "@liujitcn/kratos-admin-core/stores/runtime";
+import { DEFAULT_TENANT_CODE, requestTenantOptions } from "@liujitcn/kratos-admin-core/tenant";
+
+/** 开放授权客户端表单状态，新增时租户保持未选择。 */
+type OauthClientFormState = Omit<OauthClientForm, "tenant_id"> & {
+  /** 绑定租户ID。 */
+  tenant_id?: number;
+};
+
+defineOptions({
+  name: "OauthClient",
+  inheritAttrs: false
+});
+
+const { BUTTONS } = useAuthButtons();
+const userStore = useUserStore();
+const isDefaultTenant = computed(() => userStore.userInfo.tenant_code === DEFAULT_TENANT_CODE);
+const proTable = ref<ProTableInstance>();
+const formDialogRef = ref<InstanceType<typeof FormDialog>>();
+const apiOptions = ref<BaseApi[]>([]);
+const tenantOptions = ref<SelectOptionResponse_Option[]>([]);
+
+const dialog = reactive({
+  titleKey: "common.action.create",
+  visible: false
+});
+
+const formData = reactive<OauthClientFormState>({
+  id: 0,
+  tenant_id: undefined,
+  client_name: "",
+  crypto_type: OauthClientCryptoType.OAUTH_CLIENT_CRYPTO_TYPE_SM4,
+  ip_whitelist: "",
+  api: [],
+  status: Status.STATUS_ENABLE
+});
+
+onMounted(() => {
+  void loadTenantOptions();
+});
+
+const cryptoOptions = computed<ProFormOption[]>(() => [
+  { label: "SM4-GCM", value: OauthClientCryptoType.OAUTH_CLIENT_CRYPTO_TYPE_SM4 },
+  { label: "AES-GCM", value: OauthClientCryptoType.OAUTH_CLIENT_CRYPTO_TYPE_AES }
+]);
+
+const statusOptions = computed<ProFormOption[]>(() => [
+  { label: t("common.status.enabled"), value: Status.STATUS_ENABLE },
+  { label: t("common.status.disabled"), value: Status.STATUS_DISABLE }
+]);
+
+const transferOptions = computed<ProFormOption[]>(() =>
+  apiOptions.value.map(item => ({
+    value: item.operation,
+    label: item.operation
+  }))
+);
+
+const tenantNameMap = computed(() => new Map(tenantOptions.value.map(item => [item.value, item.label])));
+
+const rules = computed(() => ({
+  tenant_id: [
+    {
+      required: isDefaultTenant.value,
+      message: t("common.validation.required_select", { field: t("common.field.tenant") }),
+      trigger: "change"
+    }
+  ],
+  client_name: [
+    {
+      required: true,
+      message: t("common.validation.required_input", { field: t("system.base.oauth_client.field.client_name") }),
+      trigger: "blur"
+    },
+    {
+      max: 100,
+      message: t("common.validation.max_length", { field: t("system.base.oauth_client.field.client_name"), max: 100 }),
+      trigger: "blur"
+    }
+  ],
+  crypto_type: [
+    {
+      required: true,
+      message: t("common.validation.required_select", { field: t("system.base.oauth_client.field.crypto_type") }),
+      trigger: "change"
+    }
+  ],
+  status: [
+    { required: true, message: t("common.validation.required_select", { field: t("common.field.status") }), trigger: "change" }
+  ]
+}));
+
+const formFields = computed<ProFormField[]>(() => [
+  {
+    prop: "tenant_id",
+    label: t("common.field.tenant"),
+    component: "select",
+    props: {
+      filterable: true,
+      disabled: Boolean(formData.id),
+      placeholder: t("common.placeholder.select")
+    },
+    options: tenantOptions.value,
+    visible: () => isDefaultTenant.value
+  },
+  {
+    prop: "client_name",
+    label: t("system.base.oauth_client.field.client_name"),
+    component: "input"
+  },
+  {
+    prop: "crypto_type",
+    label: t("system.base.oauth_client.field.crypto_type"),
+    component: "select",
+    options: cryptoOptions.value
+  },
+  {
+    prop: "ip_whitelist",
+    label: t("system.base.oauth_client.field.ip_whitelist"),
+    component: "textarea",
+    props: { rows: 2 },
+    colSpan: 24
+  },
+  {
+    prop: "api",
+    label: t("system.base.oauth_client.field.api"),
+    component: "transfer",
+    options: transferOptions.value,
+    props: {
+      filterable: true,
+      titles: [t("system.base.oauth_client.value.available_api"), t("system.base.oauth_client.value.selected_api")],
+      style: { width: "100%" }
+    },
+    colSpan: 24
+  },
+  { prop: "status", label: t("common.field.status"), component: "radio-group", options: statusOptions.value }
+]);
+
+const columns = computed<ColumnProps[]>(() => [
+  { type: "selection", width: 55 },
+  ...(isDefaultTenant.value
+    ? ([
+        {
+          prop: "tenant_id",
+          label: t("common.field.tenant"),
+          minWidth: 130,
+          search: { el: "select", key: "tenant_id", props: { filterable: true }, order: 1 },
+          enum: requestTenantOptions,
+          render: scope =>
+            tenantNameMap.value.get((scope.row as OauthClient).tenant_id) ?? String((scope.row as OauthClient).tenant_id)
+        }
+      ] satisfies ColumnProps[])
+    : []),
+  { prop: "client_id", label: t("system.base.oauth_client.field.client_id"), minWidth: 220 },
+  { prop: "client_name", label: t("system.base.oauth_client.field.client_name"), minWidth: 160, search: { el: "input" } },
+  {
+    prop: "crypto_type",
+    label: t("system.base.oauth_client.field.crypto_type"),
+    width: 110,
+    render: scope => formatCrypto((scope.row as OauthClient).crypto_type)
+  },
+  {
+    prop: "ip_whitelist",
+    label: t("system.base.oauth_client.field.ip_whitelist"),
+    minWidth: 180,
+    render: scope => (scope.row as OauthClient).ip_whitelist || t("common.value.none")
+  },
+  {
+    prop: "api",
+    label: t("system.base.oauth_client.field.api"),
+    width: 90,
+    render: scope => String((scope.row as OauthClient).api?.length ?? 0)
+  },
+  {
+    prop: "status",
+    label: t("common.field.status"),
+    width: 110,
+    search: { el: "select", enum: statusOptions.value },
+    cellType: "status",
+    statusProps: {
+      activeValue: Status.STATUS_ENABLE,
+      inactiveValue: Status.STATUS_DISABLE,
+      activeText: t("common.status.enabled"),
+      inactiveText: t("common.status.disabled"),
+      disabled: () => !BUTTONS.value["base:oauth-client:status"],
+      beforeChange: scope => handleSetStatus(scope.row as OauthClient)
+    }
+  },
+  {
+    prop: "operation",
+    label: t("common.field.operation"),
+    width: 280,
+    fixed: "right",
+    cellType: "actions",
+    actions: [
+      {
+        label: t("system.base.oauth_client.action.copy_credentials"),
+        type: "primary",
+        link: true,
+        icon: CopyDocument,
+        hidden: () => !BUTTONS.value["base:oauth-client:credentials"],
+        onClick: scope => handleCopyCredentials(scope.row as OauthClient)
+      },
+      {
+        label: t("common.action.edit"),
+        link: true,
+        icon: EditPen,
+        hidden: () => !BUTTONS.value["base:oauth-client:update"],
+        onClick: scope => handleOpenDialog((scope.row as OauthClient).id)
+      },
+      {
+        label: t("common.action.delete"),
+        type: "danger",
+        link: true,
+        icon: Delete,
+        hidden: () => !BUTTONS.value["base:oauth-client:delete"],
+        onClick: scope => handleDelete(scope.row as OauthClient)
+      }
+    ]
+  }
+]);
+
+const headerActions = computed<HeaderActionProps[]>(() => [
+  {
+    label: t("common.action.create"),
+    type: "success",
+    icon: CirclePlus,
+    hidden: () => !BUTTONS.value["base:oauth-client:create"],
+    onClick: () => handleOpenDialog()
+  },
+  {
+    label: t("common.action.delete"),
+    type: "danger",
+    icon: Delete,
+    hidden: () => !BUTTONS.value["base:oauth-client:delete"],
+    disabled: scope => !scope.selectedList.length,
+    onClick: scope => handleDelete(scope.selectedList as OauthClient[])
+  }
+]);
+
+async function requestOauthClientTable(params: PageOauthClientRequest) {
+  const data = await defOauthClientService.PageOauthClient(buildPageRequest(params));
+  return { data: { list: data.oauth_clients ?? [], total: data.total } };
+}
+
+async function loadApiOptions() {
+  const data = await defOauthClientService.OptionOauthClientApi({});
+  apiOptions.value = data.base_apis ?? [];
+}
+
+async function loadTenantOptions() {
+  if (userStore.userInfo.tenant_code !== DEFAULT_TENANT_CODE || tenantOptions.value.length) return;
+  const data = await defBaseTenantService.OptionBaseTenant({ keyword: "" });
+  tenantOptions.value = data.list ?? [];
+}
+
+async function handleOpenDialog(id?: number) {
+  await loadTenantOptions();
+  await loadApiOptions();
+  resetForm();
+  dialog.titleKey = id ? "common.action.edit" : "common.action.create";
+  dialog.visible = true;
+  if (id) Object.assign(formData, await defOauthClientService.GetOauthClient({ id }));
+}
+
+function resetForm() {
+  formDialogRef.value?.resetFields();
+  formDialogRef.value?.clearValidate();
+  Object.assign(formData, {
+    id: 0,
+    tenant_id: undefined,
+    client_name: "",
+    crypto_type: OauthClientCryptoType.OAUTH_CLIENT_CRYPTO_TYPE_SM4,
+    ip_whitelist: "",
+    api: [],
+    status: Status.STATUS_ENABLE
+  });
+}
+
+function handleCloseDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+function handleSubmit() {
+  formDialogRef.value?.validate()?.then(valid => {
+    if (!valid) return;
+    const payload = JSON.parse(JSON.stringify(formData)) as OauthClientForm;
+    const request = payload.id
+      ? defOauthClientService.UpdateOauthClient({ oauth_client: payload })
+      : defOauthClientService.CreateOauthClient({ oauth_client: payload });
+    request.then(() => {
+      ElMessage.success(
+        t(payload.id ? "common.message.update_success" : "common.message.create_success", {
+          resource: t("system.base.oauth_client.resource")
+        })
+      );
+      handleCloseDialog();
+      proTable.value?.getTableList();
+    });
+  });
+}
+
+async function handleSetStatus(row: OauthClient) {
+  const nextStatus = row.status === Status.STATUS_ENABLE ? Status.STATUS_DISABLE : Status.STATUS_ENABLE;
+  try {
+    await ElMessageBox.confirm(
+      t("common.dialog.status_change", {
+        action: nextStatus === Status.STATUS_ENABLE ? t("common.action.enable") : t("common.action.disable"),
+        resource: t("system.base.oauth_client.resource"),
+        field: t("system.base.oauth_client.field.client_name"),
+        value: row.client_name
+      }),
+      t("common.title.warning"),
+      { type: "warning", confirmButtonText: t("common.action.confirm"), cancelButtonText: t("common.action.cancel") }
+    );
+    await defOauthClientService.SetOauthClientStatus({ id: row.id, status: nextStatus });
+    ElMessage.success(t("common.message.update_success", { resource: t("system.base.oauth_client.resource") }));
+    proTable.value?.getTableList();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function handleDelete(selected?: number | string | Array<number | string> | OauthClient | OauthClient[]) {
+  const rowList = Array.isArray(selected)
+    ? (selected.filter(item => typeof item === "object") as OauthClient[])
+    : selected && typeof selected === "object"
+      ? [selected as OauthClient]
+      : [];
+  const ids = rowList.length
+    ? rowList.map(item => item.id)
+    : normalizeSelectedIds(selected as number | string | Array<number | string>);
+  const value = ids.filter(Boolean).join(",");
+  if (!value) {
+    ElMessage.warning(t("common.message.select_delete_item"));
+    return;
+  }
+  const resource = rowList.length
+    ? `${t("system.base.oauth_client.resource")}：${rowList
+        .map(item => item.client_name)
+        .filter(Boolean)
+        .join("、")}`
+    : t("system.base.oauth_client.resource");
+  ElMessageBox.confirm(t("common.dialog.delete_selected", { resource }), t("common.title.warning"), {
+    type: "warning",
+    confirmButtonText: t("common.action.confirm"),
+    cancelButtonText: t("common.action.cancel")
+  })
+    .then(() => {
+      return defOauthClientService.DeleteOauthClient({ id: value });
+    })
+    .then(() => {
+      ElMessage.success(t("common.message.delete_success", { resource: t("system.base.oauth_client.resource") }));
+      proTable.value?.getTableList();
+    });
+}
+
+async function handleCopyCredentials(row: OauthClient) {
+  const credentials = await defOauthClientService.RotateOauthClientCredentials({ id: row.id });
+  const content = [
+    `${t("system.base.oauth_client.field.client_id")}：${credentials.client_id}`,
+    `${t("system.base.oauth_client.field.client_secret")}：${credentials.client_secret}`,
+    `${t("system.base.oauth_client.field.crypto_type")}：${formatCrypto(credentials.crypto_type)}`,
+    `${t("system.base.oauth_client.field.crypto_key")}：${credentials.crypto_key}`
+  ].join("\n");
+  await copyText(content);
+  ElMessage.success(t("core.clipboard.success"));
+}
+
+function formatCrypto(value: OauthClientCryptoType) {
+  return cryptoOptions.value.find(item => item.value === value)?.label ?? String(value);
+}
+</script>

package/dist/package/src/views/base/operation-log/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <LogTable ref="page" :config="config" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { ColumnProps } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+import { t } from "@liujitcn/kratos-admin-core";
+import { buildPageRequest } from "@liujitcn/kratos-admin-core/table";
+import LogTable, { type LogTableConfig } from "@liujitcn/kratos-admin-system/components/LogTable.vue";
+import { logDateSearch, logDetailColumn, logEnumLabel, createLogEnumOptions, requestLogTrace } from "@liujitcn/kratos-admin-system/components/log";
+import { defBaseOperationLogService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_operation_log";
+import { BaseLogResult } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_log";
+import { BaseOperationAction } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_operation_log";
+import type { BaseOperationLog, PageBaseOperationLogRequest } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_operation_log";
+
+defineOptions({ name: "BaseOperationLog", inheritAttrs: false });
+
+const page = ref<InstanceType<typeof LogTable>>();
+const resultOptions = computed(() => createLogEnumOptions([
+  [BaseLogResult.BASE_LOG_RESULT_UNSPECIFIED, t("system.base.log.result.unspecified")],
+  [BaseLogResult.BASE_LOG_RESULT_SUCCESS, t("system.base.log.result.success")],
+  [BaseLogResult.BASE_LOG_RESULT_FAILURE, t("system.base.log.result.failure")],
+  [BaseLogResult.BASE_LOG_RESULT_ERROR, t("system.base.log.result.error")]
+]));
+const actionOptions = computed(() => createLogEnumOptions([
+  [BaseOperationAction.BASE_OPERATION_ACTION_UNSPECIFIED, t("system.base.log.operation_action.unspecified")],
+  [BaseOperationAction.BASE_OPERATION_ACTION_CREATE, t("system.base.log.operation_action.create")],
+  [BaseOperationAction.BASE_OPERATION_ACTION_UPDATE, t("system.base.log.operation_action.update")],
+  [BaseOperationAction.BASE_OPERATION_ACTION_DELETE, t("system.base.log.operation_action.delete")],
+  [BaseOperationAction.BASE_OPERATION_ACTION_PUBLISH, t("system.base.log.operation_action.publish")],
+  [BaseOperationAction.BASE_OPERATION_ACTION_REVOKE, t("system.base.log.operation_action.revoke")],
+  [BaseOperationAction.BASE_OPERATION_ACTION_IMPORT, t("system.base.log.operation_action.import")],
+  [BaseOperationAction.BASE_OPERATION_ACTION_EXPORT, t("system.base.log.operation_action.export")],
+  [BaseOperationAction.BASE_OPERATION_ACTION_OTHER, t("system.base.log.operation_action.other")]
+]));
+const columns = computed<ColumnProps[]>(() => [
+  { prop: "resource_type", label: t("system.base.log.field.resource_type"), minWidth: 150, search: { el: "input" } },
+  { prop: "resource_id", label: t("system.base.log.field.resource_id"), minWidth: 120 },
+  { prop: "resource_name", label: t("system.base.log.field.resource_name"), minWidth: 160 },
+  { prop: "action", label: t("system.base.log.field.action"), minWidth: 110, search: { el: "select", enum: actionOptions.value }, render: scope => logEnumLabel(actionOptions.value, (scope.row as BaseOperationLog).action) },
+  { prop: "result", label: t("system.base.log.field.result"), minWidth: 110, search: { el: "select", enum: resultOptions.value }, render: scope => logEnumLabel(resultOptions.value, (scope.row as BaseOperationLog).result) },
+  { prop: "user_name", label: t("system.base.log.field.user_name"), minWidth: 130 },
+  { prop: "occurred_at", label: t("system.base.log.field.occurred_at"), minWidth: 190, search: logDateSearch(t) },
+  logDetailColumn(t("common.action.view"), id => page.value?.handleOpenDialog(id))
+]);
+
+const config = computed<LogTableConfig>(() => ({
+  columns: columns.value,
+  detailTitle: t("system.base.log.operation.title.detail"),
+  closeText: t("common.action.close"),
+  trace: requestLogTrace,
+  detailFields: [
+    { key: "id", label: t("system.base.log.field.id") },
+    { key: "tenant_id", label: t("system.base.log.field.tenant_id") },
+    { key: "tenant_code", label: t("system.base.log.field.tenant_code") },
+    { key: "user_id", label: t("system.base.log.field.user_id") },
+    { key: "user_name", label: t("system.base.log.field.user_name") },
+    { key: "resource_type", label: t("system.base.log.field.resource_type") },
+    { key: "resource_id", label: t("system.base.log.field.resource_id") },
+    { key: "resource_name", label: t("system.base.log.field.resource_name") },
+    { key: "action", label: t("system.base.log.field.action"), enum: actionOptions.value },
+    { key: "result", label: t("system.base.log.field.result"), enum: resultOptions.value },
+    { key: "changed_fields", label: t("system.base.log.field.changed_fields"), span: 2, code: true },
+    { key: "before_data", label: t("system.base.log.field.before_data"), span: 2, code: true },
+    { key: "after_data", label: t("system.base.log.field.after_data"), span: 2, code: true },
+    { key: "reason_code", label: t("system.base.log.field.reason_code") },
+    { key: "reason", label: t("system.base.log.field.reason"), span: 2 },
+    { key: "request_id", label: t("system.base.log.field.request_id") },
+    { key: "trace_id", label: t("system.base.log.field.trace_id") },
+    { key: "occurred_at", label: t("system.base.log.field.occurred_at") },
+    { key: "created_at", label: t("system.base.log.field.created_at") }
+  ],
+  request: requestTable,
+  get: getDetail
+}));
+
+async function requestTable(params: Record<string, unknown>) {
+  const response = await defBaseOperationLogService.PageBaseOperationLog(buildPageRequest(params as unknown as PageBaseOperationLogRequest));
+  return { list: response.base_operation_logs as unknown as Record<string, unknown>[], total: response.total };
+}
+
+async function getDetail(id: string) {
+  return (await defBaseOperationLogService.GetBaseOperationLog({ id })) as unknown as Record<string, unknown>;
+}
+</script>

package/dist/package/src/views/base/permission-log/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <LogTable ref="page" :config="config" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { ColumnProps } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+import { t } from "@liujitcn/kratos-admin-core";
+import { buildPageRequest } from "@liujitcn/kratos-admin-core/table";
+import LogTable, { type LogTableConfig } from "@liujitcn/kratos-admin-system/components/LogTable.vue";
+import { logDateSearch, logDetailColumn, logEnumLabel, createLogEnumOptions, requestLogTrace } from "@liujitcn/kratos-admin-system/components/log";
+import { defBasePermissionLogService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_permission_log";
+import { BaseLogResult } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_log";
+import { BasePermissionAction, BasePermissionTargetType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_permission_log";
+import type { BasePermissionLog, PageBasePermissionLogRequest } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_permission_log";
+
+defineOptions({ name: "BasePermissionLog", inheritAttrs: false });
+
+const page = ref<InstanceType<typeof LogTable>>();
+const resultOptions = computed(() => createLogEnumOptions([
+  [BaseLogResult.BASE_LOG_RESULT_UNSPECIFIED, t("system.base.log.result.unspecified")],
+  [BaseLogResult.BASE_LOG_RESULT_SUCCESS, t("system.base.log.result.success")],
+  [BaseLogResult.BASE_LOG_RESULT_FAILURE, t("system.base.log.result.failure")],
+  [BaseLogResult.BASE_LOG_RESULT_ERROR, t("system.base.log.result.error")]
+]));
+const targetOptions = computed(() => createLogEnumOptions([
+  [BasePermissionTargetType.BASE_PERMISSION_TARGET_TYPE_UNSPECIFIED, t("system.base.log.target_type.unspecified")],
+  [BasePermissionTargetType.BASE_PERMISSION_TARGET_TYPE_USER, t("common.field.user")],
+  [BasePermissionTargetType.BASE_PERMISSION_TARGET_TYPE_ROLE, t("common.field.role")],
+  [BasePermissionTargetType.BASE_PERMISSION_TARGET_TYPE_MENU, t("system.base.log.target_type.menu")],
+  [BasePermissionTargetType.BASE_PERMISSION_TARGET_TYPE_API, t("system.base.log.target_type.api")],
+  [BasePermissionTargetType.BASE_PERMISSION_TARGET_TYPE_TENANT, t("common.field.tenant")]
+]));
+const actionOptions = computed(() => createLogEnumOptions([
+  [BasePermissionAction.BASE_PERMISSION_ACTION_UNSPECIFIED, t("system.base.log.permission_action.unspecified")],
+  [BasePermissionAction.BASE_PERMISSION_ACTION_GRANT, t("system.base.log.permission_action.grant")],
+  [BasePermissionAction.BASE_PERMISSION_ACTION_REVOKE, t("system.base.log.permission_action.revoke")],
+  [BasePermissionAction.BASE_PERMISSION_ACTION_CREATE, t("system.base.log.permission_action.create")],
+  [BasePermissionAction.BASE_PERMISSION_ACTION_UPDATE, t("system.base.log.permission_action.update")],
+  [BasePermissionAction.BASE_PERMISSION_ACTION_DELETE, t("system.base.log.permission_action.delete")],
+  [BasePermissionAction.BASE_PERMISSION_ACTION_ASSIGN, t("system.base.log.permission_action.assign")]
+]));
+const columns = computed<ColumnProps[]>(() => [
+  { prop: "target_type", label: t("system.base.log.field.target_type"), minWidth: 120, search: { el: "select", enum: targetOptions.value }, render: scope => logEnumLabel(targetOptions.value, (scope.row as BasePermissionLog).target_type) },
+  { prop: "target_name", label: t("system.base.log.field.target_name"), minWidth: 180, search: { el: "input" } },
+  { prop: "action", label: t("system.base.log.field.action"), minWidth: 110, search: { el: "select", enum: actionOptions.value }, render: scope => logEnumLabel(actionOptions.value, (scope.row as BasePermissionLog).action) },
+  { prop: "result", label: t("system.base.log.field.result"), minWidth: 110, search: { el: "select", enum: resultOptions.value }, render: scope => logEnumLabel(resultOptions.value, (scope.row as BasePermissionLog).result) },
+  { prop: "user_name", label: t("system.base.log.field.user_name"), minWidth: 130 },
+  { prop: "occurred_at", label: t("system.base.log.field.occurred_at"), minWidth: 190, search: logDateSearch(t) },
+  logDetailColumn(t("common.action.view"), id => page.value?.handleOpenDialog(id))
+]);
+
+const config = computed<LogTableConfig>(() => ({
+  columns: columns.value,
+  detailTitle: t("system.base.log.permission.title.detail"),
+  closeText: t("common.action.close"),
+  trace: requestLogTrace,
+  detailFields: [
+    { key: "id", label: t("system.base.log.field.id") },
+    { key: "tenant_id", label: t("system.base.log.field.tenant_id") },
+    { key: "tenant_code", label: t("system.base.log.field.tenant_code") },
+    { key: "user_id", label: t("system.base.log.field.user_id") },
+    { key: "user_name", label: t("system.base.log.field.user_name") },
+    { key: "target_type", label: t("system.base.log.field.target_type"), enum: targetOptions.value },
+    { key: "target_id", label: t("system.base.log.field.target_id") },
+    { key: "target_name", label: t("system.base.log.field.target_name") },
+    { key: "action", label: t("system.base.log.field.action"), enum: actionOptions.value },
+    { key: "old_value", label: t("system.base.log.field.old_value"), span: 2, code: true },
+    { key: "new_value", label: t("system.base.log.field.new_value"), span: 2, code: true },
+    { key: "result", label: t("system.base.log.field.result"), enum: resultOptions.value },
+    { key: "reason_code", label: t("system.base.log.field.reason_code") },
+    { key: "reason", label: t("system.base.log.field.reason"), span: 2 },
+    { key: "request_id", label: t("system.base.log.field.request_id") },
+    { key: "trace_id", label: t("system.base.log.field.trace_id") },
+    { key: "occurred_at", label: t("system.base.log.field.occurred_at") },
+    { key: "created_at", label: t("system.base.log.field.created_at") }
+  ],
+  request: requestTable,
+  get: getDetail
+}));
+
+async function requestTable(params: Record<string, unknown>) {
+  const response = await defBasePermissionLogService.PageBasePermissionLog(buildPageRequest(params as unknown as PageBasePermissionLogRequest));
+  return { list: response.base_permission_logs as unknown as Record<string, unknown>[], total: response.total };
+}
+
+async function getDetail(id: string) {
+  return (await defBasePermissionLogService.GetBasePermissionLog({ id })) as unknown as Record<string, unknown>;
+}
+</script>