@befly-addon/admin 1.0.54 → 1.0.56

package/views/log/login/index.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="page-login-log page-table">
+        <div class="main-tool">
+            <div class="left"></div>
+            <div class="right">
+                <TButton shape="circle" @click="$Method.handleRefresh">
+                    <template #icon>
+                        <ILucideRotateCw />
+                    </template>
+                </TButton>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="main-table">
+                <TTable :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" row-key="id" height="100%" active-row-type="single" @active-change="$Method.onActiveChange">
+                    <template #loginResult="{ row }">
+                        <TTag v-if="row.loginResult === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+                        <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+                    </template>
+                    <template #loginTime="{ row }">
+                        {{ $Method.formatTime(row.loginTime) }}
+                    </template>
+                    <template #deviceType="{ row }">
+                        <TTag shape="round" variant="light-outline">{{ row.deviceType || 'desktop' }}</TTag>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.detailFields">
+                    <template #loginResult="{ value }">
+                        <TTag v-if="value === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+                        <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+                    </template>
+                    <template #loginTime="{ value }">
+                        {{ $Method.formatTime(value) }}
+                    </template>
+                    <template #deviceType="{ value }">
+                        <TTag shape="round" variant="light-outline">{{ value || 'desktop' }}</TTag>
+                    </template>
+                </DetailPanel>
+            </div>
+        </div>
+
+        <div class="main-page">
+            <TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.limit" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @page-size-change="$Method.handleSizeChange" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton, Table as TTable, Tag as TTag, Pagination as TPagination, MessagePlugin } from 'tdesign-vue-next';
+import ILucideRotateCw from '~icons/lucide/rotate-cw';
+import DetailPanel from '@/components/DetailPanel.vue';
+import { $Http } from '@/plugins/http';
+import { withDefaultColumns } from '@/utils';
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    loading: false,
+    columns: withDefaultColumns([
+        { colKey: 'username', title: '用户名', fixed: 'left' },
+        { colKey: 'id', title: '序号' },
+        { colKey: 'ip', title: '登录IP' },
+        { colKey: 'browserName', title: '浏览器' },
+        { colKey: 'osName', title: '操作系统' },
+        { colKey: 'deviceType', title: '设备类型' },
+        { colKey: 'loginTime', title: '登录时间' },
+        { colKey: 'loginResult', title: '登录结果' }
+    ]),
+    // 详情面板显示更多字段
+    detailFields: [
+        { colKey: 'username', title: '用户名' },
+        { colKey: 'nickname', title: '昵称' },
+        { colKey: 'ip', title: '登录IP' },
+        { colKey: 'browserName', title: '浏览器' },
+        { colKey: 'browserVersion', title: '浏览器版本' },
+        { colKey: 'osName', title: '操作系统' },
+        { colKey: 'osVersion', title: '系统版本' },
+        { colKey: 'deviceType', title: '设备类型' },
+        { colKey: 'deviceVendor', title: '设备厂商' },
+        { colKey: 'deviceModel', title: '设备型号' },
+        { colKey: 'engineName', title: '渲染引擎' },
+        { colKey: 'cpuArchitecture', title: 'CPU架构' },
+        { colKey: 'loginTime', title: '登录时间' },
+        { colKey: 'loginResult', title: '登录结果' },
+        { colKey: 'failReason', title: '失败原因' }
+    ],
+    pagerConfig: {
+        currentPage: 1,
+        limit: 30,
+        total: 0
+    },
+    currentRow: null,
+    activeRowKeys: []
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.apiLoginLogList();
+    },
+
+    // 加载登录日志列表
+    async apiLoginLogList() {
+        $Data.loading = true;
+        try {
+            const res = await $Http('/addon/admin/loginLog/list', {
+                page: $Data.pagerConfig.currentPage,
+                limit: $Data.pagerConfig.limit
+            });
+            $Data.tableData = res.data.lists || [];
+            $Data.pagerConfig.total = res.data.total || 0;
+
+            // 自动高亮第一行
+            if ($Data.tableData.length > 0) {
+                $Data.currentRow = $Data.tableData[0];
+                $Data.activeRowKeys = [$Data.tableData[0].id];
+            } else {
+                $Data.currentRow = null;
+                $Data.activeRowKeys = [];
+            }
+        } catch (error) {
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
+        }
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.apiLoginLogList();
+    },
+
+    // 分页改变
+    onPageChange(currentPage) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiLoginLogList();
+    },
+
+    // 每页条数改变
+    handleSizeChange(pageSize) {
+        $Data.pagerConfig.limit = pageSize;
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiLoginLogList();
+    },
+
+    // 高亮行变化
+    onActiveChange(value, context) {
+        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
+            return;
+        }
+        $Data.activeRowKeys = value;
+        if (context.activeRowList && context.activeRowList.length > 0) {
+            $Data.currentRow = context.activeRowList[0].row;
+        }
+    },
+
+    // 格式化时间
+    formatTime(timestamp) {
+        if (!timestamp) return '-';
+        const date = new Date(timestamp);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/log/login/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "登录日志",
+    "order": 1
+}

package/views/log/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "日志管理",
+    "order": 40
+}

package/views/log/operate/index.vue

@@ -0,0 +1,242 @@
+<template>
+    <div class="page-operate-log page-table">
+        <div class="main-tool">
+            <div class="left">
+                <TSelect v-model="$Data.filter.module" placeholder="操作模块" clearable style="width: 150px" @change="$Method.handleFilter">
+                    <TOption v-for="item in $Data.moduleOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </TSelect>
+                <TSelect v-model="$Data.filter.action" placeholder="操作类型" clearable style="width: 150px" @change="$Method.handleFilter">
+                    <TOption v-for="item in $Data.actionOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </TSelect>
+                <TSelect v-model="$Data.filter.result" placeholder="操作结果" clearable style="width: 120px" @change="$Method.handleFilter">
+                    <TOption label="成功" :value="1" />
+                    <TOption label="失败" :value="0" />
+                </TSelect>
+            </div>
+            <div class="right">
+                <TButton shape="circle" @click="$Method.handleRefresh">
+                    <template #icon>
+                        <ILucideRotateCw />
+                    </template>
+                </TButton>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="main-table">
+                <TTable :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" row-key="id" height="100%" active-row-type="single" @active-change="$Method.onActiveChange">
+                    <template #result="{ row }">
+                        <TTag v-if="row.result === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+                        <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+                    </template>
+                    <template #operateTime="{ row }">
+                        {{ $Method.formatTime(row.operateTime) }}
+                    </template>
+                    <template #duration="{ row }">
+                        <TTag shape="round" :theme="row.duration > 1000 ? 'warning' : 'default'" variant="light-outline">{{ row.duration }}ms</TTag>
+                    </template>
+                    <template #action="{ row }">
+                        <TTag shape="round" variant="light-outline">{{ row.action }}</TTag>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.detailFields">
+                    <template #result="{ value }">
+                        <TTag v-if="value === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+                        <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+                    </template>
+                    <template #operateTime="{ value }">
+                        {{ $Method.formatTime(value) }}
+                    </template>
+                    <template #duration="{ value }">
+                        <TTag shape="round" :theme="value > 1000 ? 'warning' : 'default'" variant="light-outline">{{ value }}ms</TTag>
+                    </template>
+                    <template #params="{ value }">
+                        <pre class="json-content">{{ $Method.formatJson(value) }}</pre>
+                    </template>
+                    <template #response="{ value }">
+                        <pre class="json-content">{{ $Method.formatJson(value) }}</pre>
+                    </template>
+                </DetailPanel>
+            </div>
+        </div>
+
+        <div class="main-page">
+            <TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.limit" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @page-size-change="$Method.handleSizeChange" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton, Table as TTable, Tag as TTag, Pagination as TPagination, Select as TSelect, Option as TOption, MessagePlugin } from 'tdesign-vue-next';
+import ILucideRotateCw from '~icons/lucide/rotate-cw';
+import DetailPanel from '@/components/DetailPanel.vue';
+import { $Http } from '@/plugins/http';
+import { withDefaultColumns } from '@/utils';
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    loading: false,
+    columns: withDefaultColumns([
+        { colKey: 'username', title: '操作人', fixed: 'left', width: 100 },
+        { colKey: 'id', title: '序号', width: 80 },
+        { colKey: 'module', title: '模块', width: 100 },
+        { colKey: 'action', title: '操作', width: 80 },
+        { colKey: 'path', title: '请求路径', ellipsis: true },
+        { colKey: 'ip', title: 'IP地址', width: 130 },
+        { colKey: 'duration', title: '耗时', width: 100 },
+        { colKey: 'operateTime', title: '操作时间', width: 170 },
+        { colKey: 'result', title: '结果', width: 80 }
+    ]),
+    detailFields: [
+        { colKey: 'username', title: '操作人账号' },
+        { colKey: 'nickname', title: '操作人昵称' },
+        { colKey: 'module', title: '操作模块' },
+        { colKey: 'action', title: '操作类型' },
+        { colKey: 'method', title: '请求方法' },
+        { colKey: 'path', title: '请求路径' },
+        { colKey: 'ip', title: 'IP地址' },
+        { colKey: 'params', title: '请求参数' },
+        { colKey: 'response', title: '响应内容' },
+        { colKey: 'duration', title: '耗时' },
+        { colKey: 'operateTime', title: '操作时间' },
+        { colKey: 'result', title: '操作结果' },
+        { colKey: 'remark', title: '备注' }
+    ],
+    pagerConfig: {
+        currentPage: 1,
+        limit: 30,
+        total: 0
+    },
+    currentRow: null,
+    activeRowKeys: [],
+    filter: {
+        module: '',
+        action: '',
+        result: null
+    },
+    moduleOptions: [
+        { label: '管理员', value: '管理员' },
+        { label: '角色', value: '角色' },
+        { label: '菜单', value: '菜单' },
+        { label: '接口', value: '接口' },
+        { label: '字典', value: '字典' }
+    ],
+    actionOptions: [
+        { label: '新增', value: '新增' },
+        { label: '编辑', value: '编辑' },
+        { label: '删除', value: '删除' },
+        { label: '查询', value: '查询' }
+    ]
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.apiOperateLogList();
+    },
+
+    // 加载操作日志列表
+    async apiOperateLogList() {
+        $Data.loading = true;
+        try {
+            const res = await $Http('/addon/admin/operateLog/list', {
+                page: $Data.pagerConfig.currentPage,
+                limit: $Data.pagerConfig.limit
+            });
+            $Data.tableData = res.data.lists || [];
+            $Data.pagerConfig.total = res.data.total || 0;
+
+            if ($Data.tableData.length > 0) {
+                $Data.currentRow = $Data.tableData[0];
+                $Data.activeRowKeys = [$Data.tableData[0].id];
+            } else {
+                $Data.currentRow = null;
+                $Data.activeRowKeys = [];
+            }
+        } catch (error) {
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
+        }
+    },
+
+    // 筛选
+    handleFilter() {
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiOperateLogList();
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.apiOperateLogList();
+    },
+
+    // 分页改变
+    onPageChange(currentPage) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiOperateLogList();
+    },
+
+    // 每页条数改变
+    handleSizeChange(pageSize) {
+        $Data.pagerConfig.limit = pageSize;
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiOperateLogList();
+    },
+
+    // 高亮行变化
+    onActiveChange(value, context) {
+        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
+            return;
+        }
+        $Data.activeRowKeys = value;
+        if (context.activeRowList && context.activeRowList.length > 0) {
+            $Data.currentRow = context.activeRowList[0].row;
+        }
+    },
+
+    // 格式化时间
+    formatTime(timestamp) {
+        if (!timestamp) return '-';
+        const date = new Date(timestamp);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    },
+
+    // 格式化 JSON
+    formatJson(value) {
+        if (!value) return '-';
+        try {
+            const obj = typeof value === 'string' ? JSON.parse(value) : value;
+            return JSON.stringify(obj, null, 2);
+        } catch {
+            return value;
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+.json-content {
+    margin: 0;
+    padding: 8px;
+    background: var(--td-bg-color-container);
+    border-radius: 4px;
+    font-size: 12px;
+    max-height: 200px;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+</style>

package/views/log/operate/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "操作日志",
+    "order": 3
+}

package/views/login_1/meta.json

@@ -0,0 +1,4 @@
+{
+    "name": "登录页",
+    "order": 100
+}

package/views/{admin → people/admin}/components/edit.vue

@@ -3,23 +3,17 @@
         <div class="dialog-wrapper">
             <TForm :model="$Data.formData" label-width="80px" label-position="left" label-align="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
                 <TFormItem label="角色" prop="roleId">
-                    <TSelect v-model="$Data.formData.roleId" :options="$Data.roleOptions" placeholder="请选择角色" />
+                    <TSelect v-model="$Data.formData.roleId" :options="$Data.allRoleLists" :keys="$Data.keys" placeholder="请选择角色" />
                 </TFormItem>
                 <TFormItem label="用户名" prop="username">
                     <TInput v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
                 </TFormItem>
-                <TFormItem label="邮箱" prop="email">
-                    <TInput v-model="$Data.formData.email" placeholder="请输入邮箱" />
-                </TFormItem>
                 <TFormItem v-if="$Prop.actionType === 'add'" label="密码" prop="password">
                     <TInput v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
                 </TFormItem>
                 <TFormItem label="昵称" prop="nickname">
                     <TInput v-model="$Data.formData.nickname" placeholder="请输入昵称" />
                 </TFormItem>
-                <TFormItem label="手机号" prop="phone">
-                    <TInput v-model="$Data.formData.phone" placeholder="请输入手机号" />
-                </TFormItem>
                 <TFormItem v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
                     <TRadioGroup v-model="$Data.formData.state">
                         <TRadio :label="1">正常</TRadio>
@@ -32,7 +26,7 @@
             <div class="dialog-footer">
                 <t-space>
                     <TButton theme="default" @click="$Method.onClose">取消</TButton>
-                    <TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
+                    <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">确定</TButton>
                 </t-space>
             </div>
         </template>
@@ -53,7 +47,7 @@ import {
     MessagePlugin
 } from 'tdesign-vue-next';
 import { $Http } from '@/plugins/http';
-import { fieldClear } from 'befly-util/fieldClear';
+import { fieldClear } from 'befly-shared/fieldClear';
 
 const $Prop = defineProps({
     modelValue: {
@@ -79,16 +73,18 @@ const $From = $shallowRef({
 
 const $Data = $ref({
     visible: false,
-    roleOptions: [],
+    submitting: false,
+    allRoleLists: [],
+    keys: {
+        label: 'name',
+        value: 'id'
+    },
     formData: {
-        id: 0,
+        id: null,
         username: '',
-        email: '',
         password: '',
-        name: '',
         nickname: '',
-        phone: '',
-        roleId: 0,
+        roleId: null,
         state: 1
     }
 });
@@ -96,18 +92,12 @@ const $Data = $ref({
 const $Data2 = $shallowRef({
     formRules: {
         username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-        email: [
-            { required: true, message: '请输入邮箱', trigger: 'blur' },
-            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
-        ],
         password: [
             { required: true, message: '请输入密码', trigger: 'blur' },
             { min: 6, message: '密码至少6位', trigger: 'blur' }
         ],
         roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
-        name: [{ min: 2, max: 50, message: '姓名长度在 2 到 50 个字符', trigger: 'blur' }],
-        nickname: [{ min: 2, max: 50, message: '昵称长度在 2 到 50 个字符', trigger: 'blur' }],
-        phone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }]
+        nickname: [{ min: 2, max: 50, message: '昵称长度在 2 到 50 个字符', trigger: 'blur' }]
     }
 });
 
@@ -115,9 +105,8 @@ const $Data2 = $shallowRef({
 const $Method = {
     async initData() {
         $Method.onShow();
-        await $Method.loadRoles();
+        await $Method.apiRoleLists();
         if ($Prop.actionType === 'upd' && $Prop.rowData.id) {
-            // 编辑模式：直接赋值
             $Data.formData = { ...$Prop.rowData };
         }
     },
@@ -135,17 +124,13 @@ const $Method = {
         }, 300);
     },
 
-    async loadRoles() {
+    async apiRoleLists() {
         try {
             const result = await $Http('/addon/admin/role/all');
-            $Data.roleOptions = result
-                .filter((role) => role.state === 1)
-                .map((role) => ({
-                    label: role.name,
-                    value: role.id
-                }));
+            $Data.allRoleLists = result.data || [];
         } catch (error) {
-            MessagePlugin.error(error.msg || '加载角色列表失败');
+            console.error('加载角色列表失败:', error);
+            MessagePlugin.error('加载角色列表失败');
         }
     },
 
@@ -154,15 +139,18 @@ const $Method = {
             const valid = await $From.form.validate();
             if (!valid) return;
 
-            const submitData = $Prop.actionType === 'add' ? fieldClear($Data.formData, { omitKeys: ['id', 'state'] }) : fieldClear($Data.formData, { omitKeys: ['password'] });
+            $Data.submitting = true;
+            const formData = $Prop.actionType === 'add' ? fieldClear($Data.formData, { omitKeys: ['id', 'state'] }) : fieldClear($Data.formData, { omitKeys: ['password'] });
 
-            await $Http($Prop.actionType === 'upd' ? '/addon/admin/admin/upd' : '/addon/admin/admin/ins', submitData);
+            const result = await $Http($Prop.actionType === 'upd' ? '/addon/admin/admin/upd' : '/addon/admin/admin/ins', formData);
 
-            MessagePlugin.success($Prop.actionType === 'upd' ? '编辑成功' : '添加成功');
+            MessagePlugin.success(result.msg);
             $Emit('success');
             $Method.onClose();
         } catch (error) {
             MessagePlugin.error(error.msg || '提交失败');
+        } finally {
+            $Data.submitting = false;
         }
     }
 };