feat: implement tenant-side creator audit feature and update related tests and documentation
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
347
frontend/portal/src/views/creator/AuditView.vue
Normal file
347
frontend/portal/src/views/creator/AuditView.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<script setup>
|
||||
import Paginator from "primevue/paginator";
|
||||
import Toast from "primevue/toast";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { creatorApi } from "../../api/creator";
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const logs = ref([]);
|
||||
const loading = ref(false);
|
||||
const totalRecords = ref(0);
|
||||
const rows = ref(10);
|
||||
const first = ref(0);
|
||||
|
||||
const operatorID = ref("");
|
||||
const operatorName = ref("");
|
||||
const action = ref("");
|
||||
const targetID = ref("");
|
||||
const keyword = ref("");
|
||||
const createdAtFrom = ref("");
|
||||
const createdAtTo = ref("");
|
||||
const sortField = ref("created_at");
|
||||
const sortOrder = ref("desc");
|
||||
|
||||
const page = computed(() => Math.floor(first.value / rows.value) + 1);
|
||||
|
||||
const toISO = (value) => {
|
||||
if (!value) return undefined;
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return undefined;
|
||||
return date.toISOString();
|
||||
};
|
||||
|
||||
const formatDate = (value) => {
|
||||
if (!value) return "-";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
return date.toLocaleString();
|
||||
};
|
||||
|
||||
const actionTagClass = (value) => {
|
||||
if (!value) return "bg-slate-100 text-slate-500";
|
||||
if (value.includes("create") || value.includes("approve")) {
|
||||
return "bg-emerald-50 text-emerald-700";
|
||||
}
|
||||
if (value.includes("update") || value.includes("review")) {
|
||||
return "bg-blue-50 text-blue-700";
|
||||
}
|
||||
if (
|
||||
value.includes("delete") ||
|
||||
value.includes("reject") ||
|
||||
value.includes("disable")
|
||||
) {
|
||||
return "bg-rose-50 text-rose-700";
|
||||
}
|
||||
return "bg-slate-100 text-slate-600";
|
||||
};
|
||||
|
||||
const buildParams = () => {
|
||||
const params = {
|
||||
page: page.value,
|
||||
limit: rows.value,
|
||||
};
|
||||
|
||||
if (operatorID.value) {
|
||||
const parsed = Number(operatorID.value);
|
||||
if (Number.isFinite(parsed) && parsed > 0) {
|
||||
params.operator_id = parsed;
|
||||
}
|
||||
}
|
||||
if (operatorName.value.trim())
|
||||
params.operator_name = operatorName.value.trim();
|
||||
if (action.value.trim()) params.action = action.value.trim();
|
||||
if (targetID.value.trim()) params.target_id = targetID.value.trim();
|
||||
if (keyword.value.trim()) params.keyword = keyword.value.trim();
|
||||
|
||||
const fromISO = toISO(createdAtFrom.value);
|
||||
if (fromISO) params.created_at_from = fromISO;
|
||||
const toISOValue = toISO(createdAtTo.value);
|
||||
if (toISOValue) params.created_at_to = toISOValue;
|
||||
|
||||
if (sortOrder.value === "asc") {
|
||||
params.asc = sortField.value;
|
||||
} else {
|
||||
params.desc = sortField.value;
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
const fetchLogs = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await creatorApi.listAuditLogs(buildParams());
|
||||
logs.value = res?.items || [];
|
||||
totalRecords.value = res?.total || 0;
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "加载失败",
|
||||
detail: error?.message || "审计日志加载失败",
|
||||
life: 3000,
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onSearch = () => {
|
||||
first.value = 0;
|
||||
fetchLogs();
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
operatorID.value = "";
|
||||
operatorName.value = "";
|
||||
action.value = "";
|
||||
targetID.value = "";
|
||||
keyword.value = "";
|
||||
createdAtFrom.value = "";
|
||||
createdAtTo.value = "";
|
||||
sortField.value = "created_at";
|
||||
sortOrder.value = "desc";
|
||||
first.value = 0;
|
||||
rows.value = 10;
|
||||
fetchLogs();
|
||||
};
|
||||
|
||||
const onPage = (event) => {
|
||||
first.value = event.first;
|
||||
rows.value = event.rows;
|
||||
fetchLogs();
|
||||
};
|
||||
|
||||
onMounted(fetchLogs);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Toast />
|
||||
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h1 class="text-2xl font-bold text-slate-900">操作审计</h1>
|
||||
<div class="text-sm text-slate-500">仅展示当前租户审计记录</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 block mb-1"
|
||||
>操作者ID</label
|
||||
>
|
||||
<input
|
||||
v-model="operatorID"
|
||||
type="number"
|
||||
min="1"
|
||||
class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
|
||||
placeholder="精确匹配"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 block mb-1"
|
||||
>操作者</label
|
||||
>
|
||||
<input
|
||||
v-model="operatorName"
|
||||
type="text"
|
||||
class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
|
||||
placeholder="用户名/昵称"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 block mb-1"
|
||||
>动作</label
|
||||
>
|
||||
<input
|
||||
v-model="action"
|
||||
type="text"
|
||||
class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
|
||||
placeholder="如 update_settings"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 block mb-1"
|
||||
>目标ID</label
|
||||
>
|
||||
<input
|
||||
v-model="targetID"
|
||||
type="text"
|
||||
class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
|
||||
placeholder="精确匹配"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 block mb-1"
|
||||
>关键词</label
|
||||
>
|
||||
<input
|
||||
v-model="keyword"
|
||||
type="text"
|
||||
class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
|
||||
placeholder="详情关键词"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 block mb-1"
|
||||
>创建时间 From</label
|
||||
>
|
||||
<input
|
||||
v-model="createdAtFrom"
|
||||
type="datetime-local"
|
||||
class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 block mb-1"
|
||||
>创建时间 To</label
|
||||
>
|
||||
<input
|
||||
v-model="createdAtTo"
|
||||
type="datetime-local"
|
||||
class="w-full h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 block mb-1"
|
||||
>排序</label
|
||||
>
|
||||
<div class="flex gap-2">
|
||||
<select
|
||||
v-model="sortField"
|
||||
class="flex-1 h-9 px-2 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white"
|
||||
>
|
||||
<option value="created_at">created_at</option>
|
||||
<option value="id">id</option>
|
||||
</select>
|
||||
<select
|
||||
v-model="sortOrder"
|
||||
class="w-24 h-9 px-2 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white"
|
||||
>
|
||||
<option value="desc">降序</option>
|
||||
<option value="asc">升序</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button
|
||||
@click="onReset"
|
||||
class="px-4 h-9 border border-slate-200 rounded text-sm text-slate-600 hover:bg-slate-50"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
@click="onSearch"
|
||||
class="px-4 h-9 bg-slate-900 text-white rounded text-sm hover:bg-slate-800"
|
||||
>
|
||||
查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden"
|
||||
>
|
||||
<div v-if="loading" class="px-6 py-10 text-center text-slate-400">
|
||||
加载中...
|
||||
</div>
|
||||
<template v-else>
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead
|
||||
class="bg-slate-50 text-slate-500 font-bold border-b border-slate-200"
|
||||
>
|
||||
<tr>
|
||||
<th class="px-6 py-4 whitespace-nowrap">日志ID</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">操作者</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">动作</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">目标ID</th>
|
||||
<th class="px-6 py-4">详情</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr
|
||||
v-for="item in logs"
|
||||
:key="item.id"
|
||||
class="hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<td class="px-6 py-4 font-mono text-slate-600">{{ item.id }}</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="font-medium text-slate-900">
|
||||
{{ item.operator_name || "-" }}
|
||||
</div>
|
||||
<div class="text-xs text-slate-500">
|
||||
ID: {{ item.operator_id || "-" }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span
|
||||
class="inline-block px-2.5 py-1 rounded text-xs font-bold"
|
||||
:class="actionTagClass(item.action)"
|
||||
>
|
||||
{{ item.action || "-" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-slate-600">
|
||||
{{ item.target_id || "-" }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-700">
|
||||
<span
|
||||
class="block max-w-[520px] truncate"
|
||||
:title="item.detail"
|
||||
>{{ item.detail || "-" }}</span
|
||||
>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500 whitespace-nowrap">
|
||||
{{ formatDate(item.created_at) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-if="logs.length === 0" class="text-center py-12 text-slate-400">
|
||||
暂无审计记录
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end" v-if="totalRecords > rows">
|
||||
<Paginator
|
||||
:rows="rows"
|
||||
:first="first"
|
||||
:totalRecords="totalRecords"
|
||||
@page="onPage"
|
||||
template="PrevPageLink PageLinks NextPageLink RowsPerPageDropdown"
|
||||
:rowsPerPageOptions="[10, 20, 50]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user