From cc20f2c74fb3286e7daf4515e7151b6c4a1e3f40 Mon Sep 17 00:00:00 2001
From: Admin <admin@example.com>
Date: Wed, 29 Apr 2026 22:31:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DDocker=E6=9E=84=E5=BB=BA?=
 =?UTF-8?q?=EF=BC=9A=E6=B7=BB=E5=8A=A0=E8=A2=ABgitignore=E5=BF=BD=E7=95=A5?=
 =?UTF-8?q?=E7=9A=84logs=E9=A1=B5=E9=9D=A2=E6=96=87=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=89=8D=E7=AB=AF.gitignore=E7=9A=84logs?=
 =?UTF-8?q?=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.gitignore                           |   2 +-
 .../pages/admin/logs/components/columns.ts    | 346 ++++++++++++++++++
 .../logs/components/data-table-toolbar.vue    |  43 +++
 .../admin/logs/components/data-table.vue      |  93 +++++
 frontend/src/pages/admin/logs/data/schema.ts  |  37 ++
 frontend/src/pages/admin/logs/index.vue       | 231 ++++++++++++
 .../developer/logs/components/data-table.vue  |  93 +++++
 .../src/pages/developer/logs/data/schema.ts   |  37 ++
 8 files changed, 881 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/admin/logs/components/columns.ts
 create mode 100644 frontend/src/pages/admin/logs/components/data-table-toolbar.vue
 create mode 100644 frontend/src/pages/admin/logs/components/data-table.vue
 create mode 100644 frontend/src/pages/admin/logs/data/schema.ts
 create mode 100644 frontend/src/pages/admin/logs/index.vue
 create mode 100644 frontend/src/pages/developer/logs/components/data-table.vue
 create mode 100644 frontend/src/pages/developer/logs/data/schema.ts

diff --git a/frontend/.gitignore b/frontend/.gitignore
index e272c67..d66e075 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,5 +1,5 @@
 # Logs
-logs
+/logs
 *.log
 npm-debug.log*
 yarn-debug.log*
diff --git a/frontend/src/pages/admin/logs/components/columns.ts b/frontend/src/pages/admin/logs/components/columns.ts
new file mode 100644
index 0000000..c1b653e
--- /dev/null
+++ b/frontend/src/pages/admin/logs/components/columns.ts
@@ -0,0 +1,346 @@
+import type { ColumnDef } from '@tanstack/vue-table'
+import { h } from 'vue'
+import type { Composer } from 'vue-i18n'
+
+import Badge from '@/components/ui/badge/Badge.vue'
+
+import type { Log } from '@/pages/developer/logs/data/schema'
+
+function translateDetails(t: Composer['t'], details: string): string {
+  if (!details) return '-'
+
+  const patterns: Array<{
+    pattern: RegExp
+    template: string
+    extract: (match: RegExpMatchArray) => Record<string, string>
+  }> = [
+    {
+      pattern: /^用户注册: (.+)$/,
+      template: 'developer.logs.details.register',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^注册失败: 用户已存在 - (.+)$/,
+      template: 'developer.logs.details.register_failed_exists',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^用户登录: (.+)$/,
+      template: 'developer.logs.details.login',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^登录失败: 用户不存在 - (.+)$/,
+      template: 'developer.logs.details.login_failed_not_found',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^登录失败: 密码错误 - (.+)$/,
+      template: 'developer.logs.details.login_failed_password',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^登录失败: 余额不足 - (.+)$/,
+      template: 'developer.logs.details.login_failed_balance',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^登录失败: 设备绑定数量已达上限 - (.+)$/,
+      template: 'developer.logs.details.login_failed_device_limit',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^登录失败: 多开数量已达上限 - (.+)$/,
+      template: 'developer.logs.details.login_failed_multi_limit',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^用户充值: (.+), 卡密: (.+), 金额: ([\d.]+)$/,
+      template: 'developer.logs.details.recharge',
+      extract: (m) => ({ username: m[1], card: m[2], amount: m[3] }),
+    },
+    {
+      pattern: /^充值失败: 用户不存在 - (.+)$/,
+      template: 'developer.logs.details.recharge_failed_user_not_found',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^充值失败: 用户已是永久会员 - (.+)$/,
+      template: 'developer.logs.details.recharge_failed_permanent',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^充值失败: 卡密不存在 - (.+)$/,
+      template: 'developer.logs.details.recharge_failed_card_not_found',
+      extract: (m) => ({ card: m[1] }),
+    },
+    {
+      pattern: /^充值失败: 卡密已使用 - (.+)$/,
+      template: 'developer.logs.details.recharge_failed_card_used',
+      extract: (m) => ({ card: m[1] }),
+    },
+    {
+      pattern: /^用户解绑设备: (.+)$/,
+      template: 'developer.logs.details.unbind_device',
+      extract: (m) => ({ device: m[1] }),
+    },
+    {
+      pattern: /^扩展API充值: 用户(.+), 类型:(.+), 数量:(\d+)$/,
+      template: 'developer.logs.details.extension_recharge',
+      extract: (m) => ({ username: m[1], type: m[2], amount: m[3] }),
+    },
+    {
+      pattern: /^扩展API充值失败: 用户不存在 - (.+)$/,
+      template: 'developer.logs.details.extension_recharge_failed_user_not_found',
+      extract: (m) => ({ userId: m[1] }),
+    },
+    {
+      pattern: /^扩展API充值失败: 用户已是永久会员 - (.+)$/,
+      template: 'developer.logs.details.extension_recharge_failed_permanent',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^扩展API充值失败: 类型无效 - (.+)$/,
+      template: 'developer.logs.details.extension_recharge_failed_type',
+      extract: (m) => ({ type: m[1] }),
+    },
+    {
+      pattern: /^扩展API充值失败: 保存失败 - (.+)$/,
+      template: 'developer.logs.details.extension_recharge_failed_save',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^扩展API扣费: 用户(.+), 类型:(.+), 数量:(\d+)$/,
+      template: 'developer.logs.details.extension_deduct',
+      extract: (m) => ({ username: m[1], type: m[2], amount: m[3] }),
+    },
+    {
+      pattern: /^扩展API扣费失败: 用户不存在 - (.+)$/,
+      template: 'developer.logs.details.extension_deduct_failed_user_not_found',
+      extract: (m) => ({ userId: m[1] }),
+    },
+    {
+      pattern: /^扩展API扣费失败: 用户已是永久会员 - (.+)$/,
+      template: 'developer.logs.details.extension_deduct_failed_permanent',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^扩展API扣费失败: 用户订阅已过期 - (.+)$/,
+      template: 'developer.logs.details.extension_deduct_failed_expired',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^扩展API扣费失败: 余额不足 - (.+)$/,
+      template: 'developer.logs.details.extension_deduct_failed_balance',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^扩展API扣费失败: 类型无效 - (.+)$/,
+      template: 'developer.logs.details.extension_deduct_failed_type',
+      extract: (m) => ({ type: m[1] }),
+    },
+    {
+      pattern: /^扩展API扣费失败: 保存失败 - (.+)$/,
+      template: 'developer.logs.details.extension_deduct_failed_save',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^创建应用: (.+)$/,
+      template: 'developer.logs.details.create_application',
+      extract: (m) => ({ name: m[1] }),
+    },
+    {
+      pattern: /^更新应用: (.+)$/,
+      template: 'developer.logs.details.update_application',
+      extract: (m) => ({ name: m[1] }),
+    },
+    {
+      pattern: /^删除应用: (.+)$/,
+      template: 'developer.logs.details.delete_application',
+      extract: (m) => ({ name: m[1] }),
+    },
+    {
+      pattern: /^创建用户: (.+) \(应用: (.+)\)$/,
+      template: 'developer.logs.details.create_user',
+      extract: (m) => ({ username: m[1], app: m[2] }),
+    },
+    {
+      pattern: /^更新用户: (.+)$/,
+      template: 'developer.logs.details.update_user',
+      extract: (m) => ({ username: m[1] }),
+    },
+    {
+      pattern: /^删除用户: (.+) \(应用: (.+)\)$/,
+      template: 'developer.logs.details.delete_user',
+      extract: (m) => ({ username: m[1], app: m[2] }),
+    },
+    {
+      pattern: /^解绑设备: (.+) \(应用: (.+)\)$/,
+      template: 'developer.logs.details.unbind_device_app',
+      extract: (m) => ({ device: m[1], app: m[2] }),
+    },
+    {
+      pattern: /^批量解绑设备: (\d+)个$/,
+      template: 'developer.logs.details.batch_unbind',
+      extract: (m) => ({ count: m[1] }),
+    },
+    {
+      pattern: /^创建工单: (.+)$/,
+      template: 'developer.logs.details.create_ticket',
+      extract: (m) => ({ title: m[1] }),
+    },
+    {
+      pattern: /^删除工单: (.+)$/,
+      template: 'developer.logs.details.delete_ticket',
+      extract: (m) => ({ title: m[1] }),
+    },
+    {
+      pattern: /^创建Webhook: (.+)$/,
+      template: 'developer.logs.details.create_webhook',
+      extract: (m) => ({ name: m[1] }),
+    },
+    {
+      pattern: /^删除Webhook: (.+)$/,
+      template: 'developer.logs.details.delete_webhook',
+      extract: (m) => ({ name: m[1] }),
+    },
+    {
+      pattern: /^创建云端常量: (.+)$/,
+      template: 'developer.logs.details.create_cloud_constant',
+      extract: (m) => ({ key: m[1] }),
+    },
+    {
+      pattern: /^更新云端常量: (.+)$/,
+      template: 'developer.logs.details.update_cloud_constant',
+      extract: (m) => ({ key: m[1] }),
+    },
+    {
+      pattern: /^删除云端常量: (.+)$/,
+      template: 'developer.logs.details.delete_cloud_constant',
+      extract: (m) => ({ key: m[1] }),
+    },
+    {
+      pattern: /^创建卡密类型: (.+)$/,
+      template: 'developer.logs.details.create_card_type',
+      extract: (m) => ({ name: m[1] }),
+    },
+    {
+      pattern: /^更新卡密类型: (.+)$/,
+      template: 'developer.logs.details.update_card_type',
+      extract: (m) => ({ name: m[1] }),
+    },
+    {
+      pattern: /^删除卡密类型: (.+)$/,
+      template: 'developer.logs.details.delete_card_type',
+      extract: (m) => ({ name: m[1] }),
+    },
+  ]
+
+  for (const { pattern, template, extract } of patterns) {
+    const match = details.match(pattern)
+    if (match) {
+      const params = extract(match)
+      return t(template, params)
+    }
+  }
+
+  return details
+}
+
+export function getColumns(t: Composer['t']): ColumnDef<Log>[] {
+  return [
+    {
+      accessorKey: 'log_type',
+      header: () => t('developer.logs.columns.type'),
+      cell: ({ row }) => {
+        const type = row.getValue('log_type') as string
+        const typeMap: Record<string, { text: string, variant: any }> = {
+          operation: { text: t('developer.logs.types.operation'), variant: 'default' },
+          verification: { text: t('developer.logs.types.verification'), variant: 'secondary' },
+          exception: { text: t('developer.logs.types.exception'), variant: 'destructive' },
+        }
+        const { text, variant } = typeMap[type] || { text: type, variant: 'default' }
+        return h(Badge, { variant }, () => text)
+      },
+    },
+    {
+      accessorKey: 'action',
+      header: () => t('developer.logs.columns.action'),
+      cell: ({ row }) => {
+        const action = row.getValue('action') as string
+        if (!action) return '-'
+        const actionKey = `developer.logs.actions.${action}`
+        const translated = t(actionKey)
+        return translated === actionKey ? action : translated
+      },
+    },
+    {
+      accessorKey: 'details',
+      header: () => t('developer.logs.columns.detail'),
+      cell: ({ row }) => {
+        const details = row.getValue('details') as string
+        if (!details) return '-'
+        const translated = translateDetails(t, details)
+        return h('div', { class: 'max-w-xs truncate', title: details }, translated)
+      },
+    },
+    {
+      accessorKey: 'status',
+      header: () => t('developer.logs.columns.status'),
+      cell: ({ row }) => {
+        const status = row.getValue('status') as string
+        const statusMap: Record<string, { text: string, variant: any }> = {
+          success: { text: t('developer.success'), variant: 'default' },
+          failed: { text: t('developer.failed'), variant: 'destructive' },
+        }
+        const { text, variant } = statusMap[status] || { text: status, variant: 'default' }
+        return h(Badge, { variant }, () => text)
+      },
+    },
+    {
+      accessorKey: 'ip_address',
+      header: () => t('developer.logs.columns.ip'),
+      cell: ({ row }) => {
+        const ip = row.getValue('ip_address') as string
+        return h('code', { class: 'text-xs font-mono' }, ip || '-')
+      },
+    },
+    {
+      accessorKey: 'application.name',
+      header: () => t('developer.logs.columns.application'),
+      cell: ({ row }) => {
+        const appName = row.original.application?.name
+        return appName ? h(Badge, { variant: 'outline' }, () => appName) : '-'
+      },
+    },
+    {
+      accessorKey: 'user.username',
+      header: () => t('developer.logs.columns.user'),
+      cell: ({ row }) => {
+        const username = row.original.user?.username || row.original.app_user?.username
+        return username || '-'
+      },
+    },
+    {
+      accessorKey: 'created_at',
+      header: () => t('developer.logs.columns.time'),
+      cell: ({ row }) => {
+        const createdAt = row.getValue('created_at')
+        if (!createdAt) return '-'
+        try {
+          const date = new Date(createdAt as string)
+          if (isNaN(date.getTime())) return '-'
+          return date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+          })
+        } catch {
+          return '-'
+        }
+      },
+    },
+  ]
+}
diff --git a/frontend/src/pages/admin/logs/components/data-table-toolbar.vue b/frontend/src/pages/admin/logs/components/data-table-toolbar.vue
new file mode 100644
index 0000000..749b5ae
--- /dev/null
+++ b/frontend/src/pages/admin/logs/components/data-table-toolbar.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { Table } from '@tanstack/vue-table'
+
+import { X } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+
+import type { Log } from '@/pages/admin/logs/data/schema'
+
+const { t } = useI18n()
+
+interface DataTableToolbarProps {
+  table: Table<Log>
+}
+
+const props = defineProps<DataTableToolbarProps>()
+
+const isFiltered = computed(() => props.table.getState().columnFilters.length > 0)
+</script>
+
+<template>
+  <div class="flex items-center flex-1 space-x-2">
+    <Input
+      :placeholder="t('developer.logs.searchPlaceholder')"
+      :model-value="(table.getColumn('action')?.getFilterValue() as string) ?? ''"
+      class="h-8 w-[150px] lg:w-[250px]"
+      @input="table.getColumn('action')?.setFilterValue($event.target.value)"
+    />
+
+    <Button
+      v-if="isFiltered"
+      variant="ghost"
+      class="h-8 px-2 lg:px-3"
+      @click="table.resetColumnFilters()"
+    >
+      {{ t('common.reset') }}
+      <X class="size-4 ml-2" />
+    </Button>
+  </div>
+</template>
diff --git a/frontend/src/pages/admin/logs/components/data-table.vue b/frontend/src/pages/admin/logs/components/data-table.vue
new file mode 100644
index 0000000..9cb4f7a
--- /dev/null
+++ b/frontend/src/pages/admin/logs/components/data-table.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ColumnDef } from '@tanstack/vue-table'
+
+import DataTable from '@/components/data-table/data-table.vue'
+import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
+import { SelectColumn } from '@/components/data-table/table-columns'
+import DataTableViewOptions from '@/components/data-table/view-options.vue'
+
+import type { Log } from '@/pages/admin/logs/data/schema'
+
+import { getColumns } from '@/pages/admin/logs/components/columns'
+import DataTableToolbar from '@/pages/admin/logs/components/data-table-toolbar.vue'
+
+const { t } = useI18n()
+
+interface Props {
+  loading?: boolean
+  data: Log[]
+  serverPage?: number
+  serverPageSize?: number
+  serverTotal?: number
+  serverTotalPages?: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  refresh: []
+  'page-change': [page: number]
+  'page-size-change': [pageSize: number]
+}>()
+
+const columns = computed(() => [
+  SelectColumn as ColumnDef<Log>,
+  ...getColumns(t),
+])
+
+const table = generateVueTable<Log>({
+  get data() { return props.data },
+  get loading() { return props.loading },
+  columns: columns.value,
+}, columns.value)
+
+const columnLabels: Record<string, string> = {
+  'select': 'developer.logs.select',
+  'type': 'developer.logs.columns.type',
+  'action': 'developer.logs.columns.action',
+  'details': 'developer.logs.columns.detail',
+  'status': 'developer.logs.columns.status',
+  'ip': 'developer.logs.columns.ip',
+  'application_name': 'developer.logs.columns.application',
+  'user_username': 'developer.logs.columns.user',
+  'created_at': 'developer.logs.columns.time',
+}
+
+const serverPagination = computed(() => {
+  if (props.serverPage && props.serverPageSize && props.serverTotal) {
+    return {
+      page: props.serverPage,
+      pageSize: props.serverPageSize,
+      total: props.serverTotal,
+      onPageChange: (page: number) => emit('page-change', page),
+      onPageSizeChange: (pageSize: number) => emit('page-size-change', pageSize),
+    }
+  }
+  return undefined
+})
+
+defineExpose({
+  table,
+})
+</script>
+
+<template>
+  <DataTable :columns="columns" :data :loading :table :server-pagination @refresh="emit('refresh')">
+    <template #toolbar>
+      <div class="space-y-3">
+        <div class="flex items-center justify-end">
+          <slot name="actions" />
+        </div>
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="flex flex-wrap items-center gap-2">
+            <DataTableToolbar :table />
+            <slot name="filters" />
+          </div>
+          <DataTableViewOptions :table="table" :column-labels="columnLabels" />
+        </div>
+      </div>
+    </template>
+  </DataTable>
+</template>
diff --git a/frontend/src/pages/admin/logs/data/schema.ts b/frontend/src/pages/admin/logs/data/schema.ts
new file mode 100644
index 0000000..858d83e
--- /dev/null
+++ b/frontend/src/pages/admin/logs/data/schema.ts
@@ -0,0 +1,37 @@
+import { z } from 'zod'
+
+export const logTypeSchema = z.enum(['operation', 'verification', 'exception'])
+export const logStatusSchema = z.enum(['success', 'failed'])
+
+export const logSchema = z.object({
+  id: z.union([z.string(), z.number()]),
+  log_type: logTypeSchema,
+  action: z.string(),
+  resource: z.string().optional().nullable(),
+  resource_id: z.union([z.string(), z.number()]).optional().nullable(),
+  details: z.string(),
+  status: logStatusSchema,
+  ip_address: z.string(),
+  user_agent: z.string().optional().nullable(),
+  device_id: z.string().optional().nullable(),
+  level: z.string().optional().nullable(),
+  error_message: z.string().optional().nullable(),
+  application_id: z.union([z.string(), z.number()]).optional().nullable(),
+  user_id: z.union([z.string(), z.number()]).optional().nullable(),
+  app_user_id: z.union([z.string(), z.number()]).optional().nullable(),
+  created_at: z.string(),
+  application: z.object({
+    id: z.union([z.string(), z.number()]),
+    name: z.string(),
+  }).optional().nullable(),
+  user: z.object({
+    id: z.union([z.string(), z.number()]),
+    username: z.string(),
+  }).optional().nullable(),
+  app_user: z.object({
+    id: z.union([z.string(), z.number()]),
+    username: z.string(),
+  }).optional().nullable(),
+})
+
+export type Log = z.infer<typeof logSchema>
diff --git a/frontend/src/pages/admin/logs/index.vue b/frontend/src/pages/admin/logs/index.vue
new file mode 100644
index 0000000..3ecd4ca
--- /dev/null
+++ b/frontend/src/pages/admin/logs/index.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { BasicPage } from '@/components/global-layout'
+import SingleFilter from '@/components/data-table/single-filter.vue'
+import DateRangeFilter from '@/components/data-table/date-range-filter.vue'
+import api from '@/services/api'
+
+import type { Log } from '@/pages/admin/logs/data/schema'
+
+import DataTable from '@/pages/admin/logs/components/data-table.vue'
+
+const { t } = useI18n()
+
+interface Application {
+  id: number
+  name: string
+}
+
+interface LogsResponse {
+  logs: Log[]
+  total: number
+  page: number
+  page_size: number
+  total_page: number
+}
+
+const loading = ref(true)
+const logs = ref<Log[]>([])
+const applications = ref<Application[]>([])
+
+const appFilter = ref<string>('all')
+const typeFilter = ref<string>('all')
+const statusFilter = ref<string>('all')
+const startDate = ref<string>('')
+const endDate = ref<string>('')
+const currentPage = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+const totalPages = ref(0)
+
+const applicationOptions = computed(() => {
+  return applications.value.map(app => ({
+    label: app.name,
+    value: String(app.id),
+  }))
+})
+
+const typeOptions = computed(() => [
+  { label: t('developer.logs.types.all'), value: 'all' },
+  { label: t('developer.logs.types.operation'), value: 'operation' },
+  { label: t('developer.logs.types.verification'), value: 'verification' },
+  { label: t('developer.logs.types.exception'), value: 'exception' },
+])
+
+const statusOptions = computed(() => [
+  { label: t('developer.logs.statuses.all'), value: 'all' },
+  { label: t('developer.success'), value: 'success' },
+  { label: t('developer.failed'), value: 'failed' },
+])
+
+async function fetchApplications() {
+  try {
+    const data = await api.get<{ applications: Application[] }>('/dev/applications')
+    applications.value = data?.applications || []
+  }
+  catch (error) {
+    console.error('获取应用列表失败:', error)
+  }
+}
+
+async function fetchLogs() {
+  loading.value = true
+  try {
+    const params = new URLSearchParams()
+    params.append('page', String(currentPage.value))
+    params.append('page_size', String(pageSize.value))
+    
+    if (appFilter.value && appFilter.value !== 'all') {
+      params.append('application_id', appFilter.value)
+    }
+    if (typeFilter.value && typeFilter.value !== 'all') {
+      params.append('type', typeFilter.value)
+    }
+    if (statusFilter.value && statusFilter.value !== 'all') {
+      params.append('status', statusFilter.value)
+    }
+    if (startDate.value) {
+      params.append('start_date', startDate.value)
+    }
+    if (endDate.value) {
+      params.append('end_date', endDate.value)
+    }
+
+    const data = await api.get<LogsResponse>(`/dev/logs?${params.toString()}`)
+    
+    if (data) {
+      logs.value = data.logs || []
+      total.value = data.total || 0
+      currentPage.value = data.page || 1
+      totalPages.value = data.total_page || 0
+    }
+  }
+  catch (error) {
+    console.error('获取日志记录失败:', error)
+    logs.value = []
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+watch([appFilter, typeFilter, statusFilter, startDate, endDate], () => {
+  currentPage.value = 1
+  fetchLogs()
+})
+
+onMounted(() => {
+  fetchApplications()
+  fetchLogs()
+})
+</script>
+
+<template>
+  <BasicPage
+    :title="t('developer.logs.title')"
+    :description="t('developer.logs.description')"
+    sticky
+  >
+    <div class="space-y-6">
+      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('developer.logs.totalLogs') }}
+            </UiCardTitle>
+            <Icon icon="lucide:file-text" class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ total }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('developer.logs.successCount') }}
+            </UiCardTitle>
+            <Icon icon="lucide:check-circle" class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold text-green-600">
+              {{ logs.filter(log => log.status === 'success').length }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('developer.logs.failedCount') }}
+            </UiCardTitle>
+            <Icon icon="lucide:x-circle" class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold text-red-600">
+              {{ logs.filter(log => log.status === 'failed').length }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+
+        <UiCard>
+          <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+            <UiCardTitle class="text-sm font-medium">
+              {{ t('developer.logs.operationCount') }}
+            </UiCardTitle>
+            <Icon icon="lucide:activity" class="size-4 text-muted-foreground" />
+          </UiCardHeader>
+          <UiCardContent>
+            <div class="text-2xl font-bold">
+              {{ logs.filter(log => log.log_type === 'operation').length }}
+            </div>
+          </UiCardContent>
+        </UiCard>
+      </div>
+
+      <UiCard>
+        <UiCardContent class="p-6">
+          <DataTable
+            ref="tableRef"
+            :loading
+            :data="logs"
+            :server-page="currentPage"
+            :server-page-size="pageSize"
+            :server-total="total"
+            :server-total-pages="totalPages"
+            @refresh="fetchLogs"
+            @page-change="currentPage = $event; fetchLogs()"
+            @page-size-change="pageSize = $event; currentPage = 1; fetchLogs()"
+          >
+            <template #filters>
+              <SingleFilter
+                v-model="appFilter"
+                :title="t('developer.logs.columns.application')"
+                :options="[{ label: t('developer.logs.allApplications'), value: 'all' }, ...applicationOptions]"
+              />
+              <SingleFilter
+                v-model="typeFilter"
+                :title="t('developer.logs.columns.type')"
+                :options="typeOptions"
+              />
+              <SingleFilter
+                v-model="statusFilter"
+                :title="t('developer.logs.columns.status')"
+                :options="statusOptions"
+              />
+              <DateRangeFilter
+                v-model:start-model-value="startDate"
+                v-model:end-model-value="endDate"
+              />
+            </template>
+          </DataTable>
+        </UiCardContent>
+      </UiCard>
+    </div>
+  </BasicPage>
+</template>
diff --git a/frontend/src/pages/developer/logs/components/data-table.vue b/frontend/src/pages/developer/logs/components/data-table.vue
new file mode 100644
index 0000000..00a9e52
--- /dev/null
+++ b/frontend/src/pages/developer/logs/components/data-table.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ColumnDef } from '@tanstack/vue-table'
+
+import DataTable from '@/components/data-table/data-table.vue'
+import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
+import { SelectColumn } from '@/components/data-table/table-columns'
+import DataTableViewOptions from '@/components/data-table/view-options.vue'
+
+import type { Log } from '@/pages/developer/logs/data/schema'
+
+import { getColumns } from '@/pages/developer/logs/components/columns'
+import DataTableToolbar from '@/pages/developer/logs/components/data-table-toolbar.vue'
+
+const { t } = useI18n()
+
+interface Props {
+  loading?: boolean
+  data: Log[]
+  serverPage?: number
+  serverPageSize?: number
+  serverTotal?: number
+  serverTotalPages?: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  refresh: []
+  'page-change': [page: number]
+  'page-size-change': [pageSize: number]
+}>()
+
+const columns = computed(() => [
+  SelectColumn as ColumnDef<Log>,
+  ...getColumns(t),
+])
+
+const table = generateVueTable<Log>({
+  get data() { return props.data },
+  get loading() { return props.loading },
+  columns: columns.value,
+}, columns.value)
+
+const columnLabels: Record<string, string> = {
+  'select': 'developer.logs.select',
+  'type': 'developer.logs.columns.type',
+  'action': 'developer.logs.columns.action',
+  'details': 'developer.logs.columns.detail',
+  'status': 'developer.logs.columns.status',
+  'ip': 'developer.logs.columns.ip',
+  'application_name': 'developer.logs.columns.application',
+  'user_username': 'developer.logs.columns.user',
+  'created_at': 'developer.logs.columns.time',
+}
+
+const serverPagination = computed(() => {
+  if (props.serverPage && props.serverPageSize && props.serverTotal) {
+    return {
+      page: props.serverPage,
+      pageSize: props.serverPageSize,
+      total: props.serverTotal,
+      onPageChange: (page: number) => emit('page-change', page),
+      onPageSizeChange: (pageSize: number) => emit('page-size-change', pageSize),
+    }
+  }
+  return undefined
+})
+
+defineExpose({
+  table,
+})
+</script>
+
+<template>
+  <DataTable :columns="columns" :data :loading :table :server-pagination @refresh="emit('refresh')">
+    <template #toolbar>
+      <div class="space-y-3">
+        <div class="flex items-center justify-end">
+          <slot name="actions" />
+        </div>
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="flex flex-wrap items-center gap-2">
+            <DataTableToolbar :table />
+            <slot name="filters" />
+          </div>
+          <DataTableViewOptions :table="table" :column-labels="columnLabels" />
+        </div>
+      </div>
+    </template>
+  </DataTable>
+</template>
diff --git a/frontend/src/pages/developer/logs/data/schema.ts b/frontend/src/pages/developer/logs/data/schema.ts
new file mode 100644
index 0000000..858d83e
--- /dev/null
+++ b/frontend/src/pages/developer/logs/data/schema.ts
@@ -0,0 +1,37 @@
+import { z } from 'zod'
+
+export const logTypeSchema = z.enum(['operation', 'verification', 'exception'])
+export const logStatusSchema = z.enum(['success', 'failed'])
+
+export const logSchema = z.object({
+  id: z.union([z.string(), z.number()]),
+  log_type: logTypeSchema,
+  action: z.string(),
+  resource: z.string().optional().nullable(),
+  resource_id: z.union([z.string(), z.number()]).optional().nullable(),
+  details: z.string(),
+  status: logStatusSchema,
+  ip_address: z.string(),
+  user_agent: z.string().optional().nullable(),
+  device_id: z.string().optional().nullable(),
+  level: z.string().optional().nullable(),
+  error_message: z.string().optional().nullable(),
+  application_id: z.union([z.string(), z.number()]).optional().nullable(),
+  user_id: z.union([z.string(), z.number()]).optional().nullable(),
+  app_user_id: z.union([z.string(), z.number()]).optional().nullable(),
+  created_at: z.string(),
+  application: z.object({
+    id: z.union([z.string(), z.number()]),
+    name: z.string(),
+  }).optional().nullable(),
+  user: z.object({
+    id: z.union([z.string(), z.number()]),
+    username: z.string(),
+  }).optional().nullable(),
+  app_user: z.object({
+    id: z.union([z.string(), z.number()]),
+    username: z.string(),
+  }).optional().nullable(),
+})
+
+export type Log = z.infer<typeof logSchema>