feat: 适配初始菜单 SQL

src/views/monitor/operlog/modules/oper-log-view-drawer.vue

@@ -0,0 +1,72 @@
+<script setup lang="tsx">
+import { NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
+import { getRequestMethodTagType } from '@/utils/format';
+import { $t } from '@/locales';
+import DictTag from '@/components/custom/dict-tag.vue';
+
+defineOptions({
+  name: 'OperLogViewDrawer'
+});
+
+interface Props {
+  /** the edit row data */
+  rowData: Api.Monitor.OperLog | null;
+}
+
+const props = defineProps<Props>();
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+const title = '操作日志详情';
+
+function closeDrawer() {
+  visible.value = false;
+}
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NDescriptions label-class="min-w-100px" :column="1" size="small" bordered label-placement="left">
+        <NDescriptionsItem label="日志编号">{{ props.rowData?.operId }}</NDescriptionsItem>
+        <NDescriptionsItem label="操作状态">
+          <DictTag size="small" :value="props.rowData?.status" dict-code="sys_common_status" />
+        </NDescriptionsItem>
+        <NDescriptionsItem label="系统模块">
+          <NSpace>
+            <NTag class="m-1" size="small" type="primary">{{ props.rowData?.title }}模块</NTag>
+            <DictTag size="small" :value="props.rowData?.businessType" dict-code="sys_oper_type" />
+          </NSpace>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="操作信息">
+          {{ props.rowData?.operName }} | {{ props.rowData?.deptName }} | {{ props.rowData?.operIp }} |
+          {{ props.rowData?.operLocation }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="请求信息">
+          <NSpace>
+            <NTag size="small" :type="getRequestMethodTagType(props.rowData?.requestMethod ?? '')">
+              {{ `${props.rowData?.requestMethod?.toUpperCase()}请求` }}
+            </NTag>
+            {{ props.rowData?.operUrl }}
+          </NSpace>
+        </NDescriptionsItem>
+        <NDescriptionsItem label="操作时间">{{ props.rowData?.operTime }}</NDescriptionsItem>
+        <NDescriptionsItem label="请求参数">
+          <JsonPreview :code="props.rowData?.operParam" />
+        </NDescriptionsItem>
+        <NDescriptionsItem label="返回参数">
+          <JsonPreview :code="props.rowData?.jsonResult" />
+        </NDescriptionsItem>
+        <NDescriptionsItem label="消耗时间">
+          {{ `${props.rowData?.costTime} ms` }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="错误消息">{{ props.rowData?.errorMsg }}</NDescriptionsItem>
+      </NDescriptions>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.close') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>