webview/src/modules/system/logger.preview.vue

<script setup lang="ts">
import type { LoggerModel } from '@/request/model/manage.model';

defineOptions({
  name: 'LoggerPreview',
  inheritAttrs: false,
});

const props = defineProps<
  LoggerModel & {
    onComplete?: (result?: LoggerModel) => void;
    onCancel?: () => void;
  }
>();

const BUSINESS_TYPES: Record<number, string> = {
  0: '其它',
  1: '新增',
  2: '修改',
  3: '删除',
  4: '授权',
  5: '导出',
  6: '导入',
  7: '强退',
  8: '生成代码',
  9: '清空数据',
  10: '其它',
};

const OPERATOR_TYPES: Record<number, string> = {
  1: '后台用户',
  2: '手机端用户',
};

function display(v: unknown): string {
  if (v === null || v === undefined || v === '') return '—';
  return String(v);
}

function prettyJson(text: string | null | undefined): string {
  if (text == null || text === '') return '—';
  try {
    return JSON.stringify(JSON.parse(text), null, 2);
  } catch {
    return text;
  }
}

function mapDict(v: unknown, dict: Record<number, string>): string {
  if (v === null || v === undefined || v === '') return '—';
  const n = Number(v);
  if (Number.isNaN(n)) return String(v);
  return dict[n] ?? String(v);
}

const detail = computed(() => {
  const raw = props.__raw__;
  if (raw && typeof raw === 'object') {
    return raw as Record<string, unknown>;
  }
  return {
    operId: props.id,
    title: props.title,
    operTime: props.date,
    operName: props.operator,
  } as Record<string, unknown>;
});

const operParamPretty = computed(() => prettyJson(detail.value.operParam as string | undefined));
const jsonResultPretty = computed(() => prettyJson(detail.value.jsonResult as string | undefined));

const statusTagType = computed(() => {
  const s = detail.value.status;
  if (s === 0) return 'success' as const;
  if (s === 1) return 'danger' as const;
  return 'default' as const;
});

const statusLabel = computed(() => {
  const s = detail.value.status;
  if (s === 0) return '成功';
  if (s === 1) return '失败';
  return display(s);
});

const showError = computed(() => {
  const msg = detail.value.errorMsg;
  if (msg !== null && msg !== undefined && String(msg).trim() !== '') return true;
  return detail.value.status === 1;
});

const collapseActive = ref<string[]>([]);
</script>

<template>
  <div class="logger-preview pb-safe">
    <van-cell-group inset title="概要">
      <van-cell title="模块标题" :value="display(detail.title)" />
      <van-cell title="操作 ID" :value="display(detail.operId)" />
      <van-cell title="操作人" :value="display(detail.operName)" />
      <van-cell title="操作时间" :value="display(detail.operTime)" />
      <!--      <van-cell title="业务类型" :value="mapDict(detail.businessType, BUSINESS_TYPES)" />-->
      <!--      <van-cell title="操作类别" :value="mapDict(detail.operatorType, OPERATOR_TYPES)" />-->
      <!--      <van-cell title="部门" :value="display(detail.deptName)" />-->
      <van-cell title="备注" :value="display(detail.remark)" />
      <van-cell title="状态与请求">
        <template #value>
          <div class="tag-row">
            <van-tag v-if="detail.requestMethod" plain type="primary">{{ display(detail.requestMethod) }}</van-tag>
            <van-tag :type="statusTagType">{{ statusLabel }}</van-tag>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group v-if="showError" inset title="错误" class="mt-3">
      <van-cell title="错误信息">
        <template #value>
          <span class="text-danger">{{ display(detail.errorMsg) }}</span>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group inset title="请求信息" class="mt-3">
      <van-cell title="请求 URL" :value="display(detail.operUrl)" />
      <van-cell title="IP" :value="display(detail.operIp)">
        <template #value>
          <div class="tag-row">
            <van-tag v-if="detail.operLocation" plain>{{ detail.operLocation }}</van-tag>
            <span>{{ display(detail.operIp) }}</span>
          </div>
        </template>
      </van-cell>
      <van-cell title="调用方法">
        <template #value>
          <span class="mono-wrap">{{ display(detail.method) }}</span>
        </template>
      </van-cell>
    </van-cell-group>

    <van-collapse v-model="collapseActive" class="mt-3 logger-preview__collapse">
      <van-collapse-item title="请求参数" name="params">
        <pre class="json-block">{{ operParamPretty }}</pre>
      </van-collapse-item>
      <van-collapse-item title="返回结果" name="result">
        <pre class="json-block">{{ jsonResultPretty }}</pre>
      </van-collapse-item>
    </van-collapse>

    <div class="px-4 py-3">
      <van-button block type="primary" plain @click="onCancel?.()">关闭</van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.logger-preview {
  --van-cell-group-title-color: hsl(var(--primary-color-hover) / 0.5);
  --van-cell-text-color: hsl(var(--primary-hover) / 0.5);
  --van-cell-value-color: #fff;
  --van-cell-value-font-size: 14px;
  :deep(.van-cell__value) {
    flex: 2;
  }
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.text-danger {
  color: var(--van-danger-color);
  text-align: right;
  word-break: break-word;
}

.mono-wrap {
  display: block;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
  word-break: break-all;
  white-space: pre-wrap;
}

.logger-preview__collapse {
  margin-left: 16px;
  margin-right: 16px;
  overflow: hidden;
  border-radius: var(--van-radius-lg);
}

.json-block {
  margin: 0;
  padding: 8px 0 4px;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
  white-space: pre-wrap;
  color: #fff;
}

.pb-safe {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
</style>