From 43487136fb1e70dcda885b66faf7a65b06e2a9d2 Mon Sep 17 00:00:00 2001
From: luoer <luoer@szbeihai.com>
Date: Fri, 15 Dec 2023 17:36:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/log/index.vue           |  13 +++
 src/pages/log/login/index.vue     | 145 ++++++++++++++++++++++++++++++
 src/pages/log/operation/index.vue |  84 +++++++++++++++++
 3 files changed, 242 insertions(+)
 create mode 100644 src/pages/log/index.vue
 create mode 100644 src/pages/log/login/index.vue
 create mode 100644 src/pages/log/operation/index.vue

diff --git a/src/pages/log/index.vue b/src/pages/log/index.vue
new file mode 100644
index 0000000..fef3acd
--- /dev/null
+++ b/src/pages/log/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<route lang="json">
+{
+  "meta": {
+    "title": "日志管理",
+    "icon": "icon-park-outline-log",
+    "sort": 30000
+  }
+}
+</route>
diff --git a/src/pages/log/login/index.vue b/src/pages/log/login/index.vue
new file mode 100644
index 0000000..544b43b
--- /dev/null
+++ b/src/pages/log/login/index.vue
@@ -0,0 +1,145 @@
+<template>
+  <BreadPage>
+    <LoginLogTable>
+      <template #action>
+        <a-button type="primary" @click="visible = true">
+          <template #icon>
+            <i class="icon-park-outline-add"></i>
+          </template>
+          添加
+        </a-button>
+        <ani-editor v-model:visible="visible"></ani-editor>
+      </template>
+    </LoginLogTable>
+  </BreadPage>
+</template>
+
+<script setup lang="tsx">
+import { api } from '@/api';
+import { useTable } from '@/components/AnTable';
+import { Editor as aniEditor } from '@/components/editor';
+import { TableColumnData } from '@arco-design/web-vue';
+import dayjs from 'dayjs';
+
+defineOptions({ name: 'SystemLoglPage' });
+const visible = ref(false);
+
+const useTwoRowsColumn = (tkey: string, bkey: string): TableColumnData['render'] => {
+  return ({ record }) => {
+    return (
+      <div class="flex flex-col overflow-hidden">
+        <span>{record[tkey] || '未知'}</span>
+        <span class="text-gray-400 text-xs truncate">{record[bkey]}</span>
+      </div>
+    );
+  };
+};
+
+const { component: LoginLogTable } = useTable({
+  source: async model => {
+    return api.log.getLoginLogs(model);
+  },
+  columns: [
+    {
+      title: '操作描述',
+      dataIndex: 'description',
+      render: ({ record }) => {
+        return (
+          <div class="flex items-center gap-2">
+            <span
+              class={
+                record.status === null || record.status
+                  ? 'text-base text-green-500 icon-park-outline-check-one mr-2'
+                  : 'text-base text-red-500 icon-park-outline-close-one mr-2'
+              }
+            ></span>
+            <div>
+              <div>{record.description}</div>
+              <div class="text-xs text-gray-400">用户：{record.nickname}</div>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      title: '登陆地址',
+      dataIndex: 'ip',
+      width: 200,
+      render: useTwoRowsColumn('addr', 'ip'),
+    },
+    {
+      title: '操作系统',
+      dataIndex: 'os',
+      width: 200,
+      render({ record }) {
+        const [os, version] = record.os.split(' ');
+        return (
+          <div class="flex flex-col overflow-hidden">
+            <span>{os || '未知'}</span>
+            <span class="text-gray-400 text-xs truncate">{version}</span>
+          </div>
+        );
+      },
+    },
+    {
+      title: '浏览器',
+      dataIndex: 'browser',
+      width: 200,
+      render({ record }) {
+        const [browser, version] = record.browser.split(' ');
+        return (
+          <div class="flex flex-col overflow-hidden">
+            <span>{browser || '未知'}</span>
+            <span class="text-gray-400 text-xs truncate">v{version}</span>
+          </div>
+        );
+      },
+    },
+    {
+      title: '登陆时间',
+      dataIndex: 'createAt',
+      width: 200,
+      render({ record }) {
+        return (
+          <div class="flex flex-col overflow-hidden">
+            <span>{dayjs(record.createdAt).fromNow()}</span>
+            <span class="text-gray-400 text-xs truncate">{dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss')}</span>
+          </div>
+        );
+      },
+    },
+  ],
+  search: {
+    items: [
+      {
+        field: '[startDate, endDate]',
+        label: '登陆账号',
+        setter: 'dateRange',
+        setterProps: {
+          placeholder: ['开始时间', '结束时间'],
+          showTime: true,
+          timePickerProps: { defaultValue: ['23:59:59', '00:00:00'] },
+        },
+      },
+      {
+        field: 'nickname',
+        label: '登陆账号',
+        setter: 'input',
+      },
+    ],
+  },
+});
+</script>
+
+<style scoped></style>
+
+<route lang="json">
+{
+  "meta": {
+    "name": "SystemLoglPage",
+    "sort": 10303,
+    "title": "登陆日志",
+    "icon": "icon-park-outline-log"
+  }
+}
+</route>
diff --git a/src/pages/log/operation/index.vue b/src/pages/log/operation/index.vue
new file mode 100644
index 0000000..7b8d23b
--- /dev/null
+++ b/src/pages/log/operation/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <BreadPage>
+    <OperationTable></OperationTable>
+  </BreadPage>
+</template>
+
+<script setup lang="tsx">
+import { api } from '@/api';
+import { useTable } from '@/components/AnTable';
+import { dayjs } from '@/libs/dayjs';
+import { Tag } from '@arco-design/web-vue';
+
+defineOptions({ name: 'SystemLogoPage' });
+
+const { component: OperationTable } = useTable({
+  columns: [
+    {
+      title: '登陆账号',
+      dataIndex: 'nickname',
+      width: 140,
+    },
+    {
+      title: '操作描述',
+      dataIndex: 'description',
+      render: ({ record: { status, description } }) => {
+        return (
+          <span>
+            <Tag color={status === null || status ? 'green' : 'red'} class="mr-2">
+              {status === null || status ? '成功' : '失败'}
+            </Tag>
+            {description}
+          </span>
+        );
+      },
+    },
+    {
+      title: '登陆地址',
+      dataIndex: 'ip',
+      width: 200,
+      render: ({ record }) => `${record.addr || '未知'}(${record.ip})`,
+    },
+    {
+      title: '操作系统',
+      dataIndex: 'os',
+      width: 160,
+    },
+    {
+      title: '浏览器',
+      dataIndex: 'browser',
+      width: 160,
+    },
+    {
+      title: '登陆时间',
+      dataIndex: 'createdAt',
+      width: 120,
+      render: ({ record }) => dayjs(record.createdAt).fromNow(),
+    },
+  ],
+  source: model => {
+    return api.log.getLoginLogs(model);
+  },
+  search: [
+    {
+      field: 'nickname',
+      label: '登陆账号',
+      setter: 'input',
+      required: false,
+    },
+  ],
+});
+</script>
+
+<style scoped></style>
+
+<route lang="json">
+{
+  "meta": {
+    "name": "SystemLogoPage",
+    "sort": 10304,
+    "title": "操作日志",
+    "icon": "icon-park-outline-doc-detail"
+  }
+}
+</route>