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:
@@ -18,6 +18,10 @@ export const creatorApi = {
|
||||
const qs = new URLSearchParams(params).toString();
|
||||
return request(`/creator/orders?${qs}`);
|
||||
},
|
||||
listAuditLogs: (params) => {
|
||||
const qs = new URLSearchParams(params).toString();
|
||||
return request(`/creator/audit-logs?${qs}`);
|
||||
},
|
||||
refundOrder: (id, data) =>
|
||||
request(`/creator/orders/${id}/refund`, { method: "POST", body: data }),
|
||||
listCoupons: (params) => {
|
||||
|
||||
@@ -91,6 +91,16 @@ const isFullWidth = computed(() => {
|
||||
></i>
|
||||
<span class="font-medium">订单管理</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="tenantRoute('/creator/audit')"
|
||||
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-surface-highlight hover:text-content transition-all group"
|
||||
>
|
||||
<i
|
||||
class="pi pi-shield text-lg group-hover:scale-110 transition-transform"
|
||||
></i>
|
||||
<span class="font-medium">操作审计</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="tenantRoute('/creator/coupons')"
|
||||
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
|
||||
|
||||
@@ -175,6 +175,11 @@ const router = createRouter({
|
||||
name: "creator-orders",
|
||||
component: () => import("../views/creator/OrdersView.vue"),
|
||||
},
|
||||
{
|
||||
path: "audit",
|
||||
name: "creator-audit",
|
||||
component: () => import("../views/creator/AuditView.vue"),
|
||||
},
|
||||
{
|
||||
path: "members",
|
||||
name: "creator-members",
|
||||
|
||||
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>
|
||||
@@ -1,42 +1,61 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import Toast from "primevue/toast";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import { userApi } from "../../api/user";
|
||||
import { tenantPath } from "../../utils/tenant";
|
||||
|
||||
const toast = useToast();
|
||||
const route = useRoute();
|
||||
const tenantRoute = (path) => tenantPath(path, route);
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
id: 4,
|
||||
title: "《霸王别姬》全本实录珍藏版",
|
||||
cover:
|
||||
"https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60",
|
||||
author: "梅派传人小林",
|
||||
authorAvatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Master1",
|
||||
type: "video",
|
||||
duration: "120:00",
|
||||
time: "昨天点赞",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "京剧打击乐基础教程",
|
||||
cover:
|
||||
"https://images.unsplash.com/photo-1576014131795-d44019d02374?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60",
|
||||
author: "戏曲学院官方",
|
||||
authorAvatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=School",
|
||||
type: "video",
|
||||
duration: "45:00",
|
||||
time: "3天前点赞",
|
||||
},
|
||||
]);
|
||||
const items = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
const removeItem = (id) => {
|
||||
items.value = items.value.filter((i) => i.id !== id);
|
||||
toast.add({ severity: "success", summary: "已取消点赞", life: 2000 });
|
||||
const fetchLikes = async () => {
|
||||
try {
|
||||
const res = await userApi.getLikes();
|
||||
items.value = res || [];
|
||||
} catch (e) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "加载失败",
|
||||
detail: e.message,
|
||||
life: 3000,
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(fetchLikes);
|
||||
|
||||
const removeItem = async (id) => {
|
||||
try {
|
||||
await userApi.removeLike(id);
|
||||
items.value = items.value.filter((i) => i.id !== id);
|
||||
toast.add({ severity: "success", summary: "已取消点赞", life: 2000 });
|
||||
} catch (e) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "操作失败",
|
||||
detail: e.message,
|
||||
life: 3000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeIcon = (type) => {
|
||||
if (type === "video") return "pi-play-circle";
|
||||
if (type === "audio") return "pi-volume-up";
|
||||
return "pi-book";
|
||||
};
|
||||
|
||||
const getTypeLabel = (type) => {
|
||||
if (type === "video") return "视频";
|
||||
if (type === "audio") return "音频";
|
||||
return "文章";
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -65,11 +84,8 @@ const removeItem = (id) => {
|
||||
<div
|
||||
class="absolute bottom-2 left-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded flex items-center gap-1"
|
||||
>
|
||||
<i
|
||||
class="pi"
|
||||
:class="item.type === 'video' ? 'pi-play-circle' : 'pi-book'"
|
||||
></i>
|
||||
<span>{{ item.duration || "文章" }}</span>
|
||||
<i class="pi" :class="getTypeIcon(item.type)"></i>
|
||||
<span>{{ getTypeLabel(item.type) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -81,13 +97,19 @@ const removeItem = (id) => {
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 text-xs text-slate-500 mb-3">
|
||||
<img :src="item.authorAvatar" class="w-5 h-5 rounded-full" />
|
||||
<span>{{ item.author }}</span>
|
||||
<img
|
||||
:src="
|
||||
item.author_avatar ||
|
||||
`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.author_id}`
|
||||
"
|
||||
class="w-5 h-5 rounded-full"
|
||||
/>
|
||||
<span>{{ item.author_name }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-between text-xs text-slate-400 border-t border-slate-50 pt-3"
|
||||
>
|
||||
<span>{{ item.time }}</span>
|
||||
<span>{{ item.created_at }}</span>
|
||||
<button
|
||||
@click.stop="removeItem(item.id)"
|
||||
class="hover:text-primary-600 flex items-center gap-1 transition-colors"
|
||||
@@ -100,7 +122,7 @@ const removeItem = (id) => {
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="items.length === 0" class="text-center py-20">
|
||||
<div v-if="!loading && items.length === 0" class="text-center py-20">
|
||||
<div
|
||||
class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 mb-4"
|
||||
>
|
||||
|
||||
2
frontend/superadmin/dist/index.html
vendored
2
frontend/superadmin/dist/index.html
vendored
@@ -7,7 +7,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sakai Vue</title>
|
||||
<link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet">
|
||||
<script type="module" crossorigin src="./assets/index-CsH8eBi3.js"></script>
|
||||
<script type="module" crossorigin src="./assets/index-DRIu3C4l.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="./assets/index-CLNNtsXI.css">
|
||||
</head>
|
||||
|
||||
|
||||
@@ -225,10 +225,18 @@ const router = createRouter({
|
||||
]
|
||||
});
|
||||
|
||||
const isDemoOnlyRoute = (path) => {
|
||||
return path.startsWith('/uikit/') || path === '/blocks' || path === '/pages/empty' || path === '/pages/crud' || path === '/documentation' || path === '/landing';
|
||||
};
|
||||
|
||||
let tokenValidated = false;
|
||||
let tokenValidationPromise = null;
|
||||
|
||||
router.beforeEach(async (to) => {
|
||||
if (!import.meta.env.DEV && isDemoOnlyRoute(to.path)) {
|
||||
return { name: 'dashboard' };
|
||||
}
|
||||
|
||||
if (to.meta?.requiresAuth !== true) return true;
|
||||
|
||||
const isAuthed = hasSuperAuthToken();
|
||||
|
||||
Reference in New Issue
Block a user