@befly-addon/admin 1.2.1 → 1.2.3

package/adminViews/config/system/index.vue

@@ -0,0 +1,286 @@
+<template>
+    <div class="page-sys-config page-table">
+        <div class="main-tool">
+            <div class="left">
+                <TButton theme="primary" @click="$Method.onAction('add', {})">
+                    <template #icon>
+                        <ILucidePlus />
+                    </template>
+                    新增配置
+                </TButton>
+                <TSelect v-model="$Data.filter.group" placeholder="配置分组" clearable style="width: 150px" @change="$Method.handleFilter">
+                    <TOption v-for="item in $Data.groupOptions" :key="item" :label="item" :value="item" />
+                </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 #isSystem="{ row }">
+                        <TTag v-if="row.isSystem === 1" shape="round" theme="warning" variant="light-outline">系统</TTag>
+                        <TTag v-else shape="round" variant="light-outline">自定义</TTag>
+                    </template>
+                    <template #valueType="{ row }">
+                        <TTag shape="round" variant="light-outline">{{ row.valueType }}</TTag>
+                    </template>
+                    <template #state="{ row }">
+                        <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
+                        <TTag v-else-if="row.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
+                    </template>
+                    <template #operation="{ row }">
+                        <TDropdown trigger="click" placement="bottom-right" @click="(data) => $Method.onAction(data.value, row)">
+                            <TButton theme="primary" size="small">
+                                操作
+                                <template #suffix><ILucideChevronDown /></template>
+                            </TButton>
+                            <TDropdownMenu slot="dropdown">
+                                <TDropdownItem value="upd">
+                                    <ILucidePencil />
+                                    编辑
+                                </TDropdownItem>
+                                <TDropdownItem v-if="row.isSystem !== 1" value="del" :divider="true">
+                                    <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                                    删除
+                                </TDropdownItem>
+                            </TDropdownMenu>
+                        </TDropdown>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.detailFields">
+                    <template #isSystem="{ value }">
+                        <TTag v-if="value === 1" shape="round" theme="warning" variant="light-outline">系统配置</TTag>
+                        <TTag v-else shape="round" variant="light-outline">自定义配置</TTag>
+                    </template>
+                    <template #valueType="{ value }">
+                        <TTag shape="round" variant="light-outline">{{ value }}</TTag>
+                    </template>
+                    <template #value="{ value }">
+                        <pre class="config-value">{{ 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>
+
+        <!-- 编辑对话框 -->
+        <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.apiConfigList" />
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton, Table as TTable, Tag as TTag, Select as TSelect, Option as TOption, Dropdown as TDropdown, DropdownMenu as TDropdownMenu, DropdownItem as TDropdownItem, Pagination as TPagination, MessagePlugin, DialogPlugin } from "tdesign-vue-next";
+import ILucidePlus from "~icons/lucide/plus";
+import ILucideRotateCw from "~icons/lucide/rotate-cw";
+import ILucidePencil from "~icons/lucide/pencil";
+import ILucideTrash2 from "~icons/lucide/trash-2";
+import ILucideChevronDown from "~icons/lucide/chevron-down";
+import EditDialog from "./components/edit.vue";
+import DetailPanel from "@/components/DetailPanel.vue";
+import { $Http } from "@/plugins/http";
+import { withDefaultColumns } from "befly-vite/utils/withDefaultColumns";
+
+definePage({
+    meta: {
+        title: "系统配置",
+        order: 3
+    }
+});
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    loading: false,
+    columns: withDefaultColumns([
+        { colKey: "name", title: "配置名称", fixed: "left", width: 150 },
+        { colKey: "id", title: "序号", width: 80 },
+        { colKey: "code", title: "配置代码", ellipsis: true },
+        { colKey: "value", title: "配置值", ellipsis: true, width: 200 },
+        { colKey: "valueType", title: "值类型", width: 100 },
+        { colKey: "group", title: "分组", width: 100 },
+        { colKey: "sort", title: "排序", width: 80 },
+        { colKey: "isSystem", title: "类型", width: 80 },
+        { colKey: "state", title: "状态", width: 80 },
+        { colKey: "operation", title: "操作", width: 100 }
+    ]),
+    detailFields: [
+        { colKey: "name", title: "配置名称" },
+        { colKey: "code", title: "配置代码" },
+        { colKey: "value", title: "配置值" },
+        { colKey: "valueType", title: "值类型" },
+        { colKey: "group", title: "配置分组" },
+        { colKey: "sort", title: "排序" },
+        { colKey: "isSystem", title: "配置类型" },
+        { colKey: "description", title: "描述说明" }
+    ],
+    pagerConfig: {
+        currentPage: 1,
+        limit: 30,
+        total: 0
+    },
+    currentRow: null,
+    activeRowKeys: [],
+    editVisible: false,
+    actionType: "add",
+    rowData: {},
+    filter: {
+        group: ""
+    },
+    groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.apiConfigList();
+    },
+
+    // 加载配置列表
+    async apiConfigList() {
+        $Data.loading = true;
+        try {
+            const res = await $Http("/addon/admin/sysConfig/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;
+        }
+    },
+
+    // 删除配置
+    async apiConfigDel(row) {
+        if (row.isSystem === 1) {
+            MessagePlugin.warning("系统配置不允许删除");
+            return;
+        }
+
+        let dialog = null;
+        let destroyed = false;
+
+        const destroy = () => {
+            if (destroyed) return;
+            destroyed = true;
+            if (dialog && typeof dialog.destroy === "function") {
+                dialog.destroy();
+            }
+        };
+
+        dialog = DialogPlugin.confirm({
+            header: "确认删除",
+            body: `确认删除配置“${row.name}”吗？`,
+            status: "warning",
+            confirmBtn: "删除",
+            cancelBtn: "取消",
+            onConfirm: async () => {
+                if (dialog && typeof dialog.setConfirmLoading === "function") {
+                    dialog.setConfirmLoading(true);
+                }
+
+                try {
+                    await $Http("/addon/admin/sysConfig/del", { id: row.id });
+                    MessagePlugin.success("删除成功");
+                    destroy();
+                    await $Method.apiConfigList();
+                } catch (error) {
+                    MessagePlugin.error("删除失败");
+                } finally {
+                    if (dialog && typeof dialog.setConfirmLoading === "function") {
+                        dialog.setConfirmLoading(false);
+                    }
+                }
+            },
+            onClose: () => {
+                destroy();
+            }
+        });
+    },
+
+    // 筛选
+    handleFilter() {
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiConfigList();
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.apiConfigList();
+    },
+
+    // 分页改变
+    onPageChange(currentPage) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiConfigList();
+    },
+
+    // 每页条数改变
+    handleSizeChange(pageSize) {
+        $Data.pagerConfig.limit = pageSize;
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiConfigList();
+    },
+
+    // 高亮行变化
+    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;
+        }
+    },
+
+    // 操作菜单点击
+    onAction(command, rowData) {
+        $Data.actionType = command;
+        $Data.rowData = rowData;
+        if (command === "add" || command === "upd") {
+            $Data.editVisible = true;
+        } else if (command === "del") {
+            $Method.apiConfigDel(rowData);
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+.config-value {
+    margin: 0;
+    padding: 8px;
+    background: var(--td-bg-color-container);
+    border-radius: 4px;
+    font-size: 12px;
+    max-height: 150px;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+</style>

package/adminViews/index/components/addonList.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <i-lucide:package />
+            <h2>已安装插件</h2>
+        </div>
+        <div class="section-content">
+            <div class="addon-list">
+                <div v-for="addon in addonList" :key="addon.name" class="addon-item">
+                    <div class="addon-icon">
+                        <i-lucide:box />
+                    </div>
+                    <div class="addon-info">
+                        <div class="addon-title">
+                            <span class="addon-name">{{ addon.title }}</span>
+                            <t-tag type="success" size="small">{{ addon.version }}</t-tag>
+                        </div>
+                        <div class="addon-desc">{{ addon.description }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { $Http } from "@/plugins/http";
+
+// 组件内部数据
+const addonList = $ref([]);
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http("/addon/admin/dashboard/addonList");
+        addonList.splice(0, addonList.length, ...data);
+    } catch (error) {
+        // 静默失败：不阻断页面展示
+    }
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.addon-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .addon-item {
+        position: relative;
+        background: var(--bg-color-container);
+        border: 1px solid var(--border-color);
+        border-left: 3px solid var(--primary-color);
+        border-radius: var(--border-radius-small);
+        padding: 10px 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        transition: all 0.3s;
+
+        &:hover {
+            border-left-color: var(--success-color);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+            transform: translateY(-2px);
+        }
+
+        .addon-status-badge {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--text-disabled);
+            transition: all 0.3s;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: -2px;
+                right: -2px;
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: var(--success-color);
+                box-shadow: 0 0 0 2px rgba(var(--success-color-rgb), 0.2);
+        }
+
+        .addon-icon {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, var(--primary-color), #764ba2);
+            border-radius: var(--border-radius-small);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            flex-shrink: 0;
+        }
+
+        .addon-info {
+            flex: 1;
+            min-width: 0;
+            padding-right: 16px;
+
+            .addon-title {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                margin-bottom: 2px;
+
+                .addon-name {
+                    font-size: 14px;
+                    font-weight: 600;
+                    color: var(--text-primary);
+                }
+            }
+
+            .addon-desc {
+                font-size: 14px;
+                color: var(--text-secondary);
+                line-height: 1.3;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+</style>

package/adminViews/index/components/environmentInfo.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ILucideServer />
+            <h2>运行环境</h2>
+        </div>
+        <div class="section-content">
+            <div class="env-grid-compact">
+                <div class="env-compact-item">
+                    <span class="env-label">操作系统</span>
+                    <span class="env-value">{{ environmentInfo.os }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">服务器</span>
+                    <span class="env-value">{{ environmentInfo.server }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">Node版本</span>
+                    <span class="env-value">{{ environmentInfo.nodeVersion }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">数据库</span>
+                    <span class="env-value">{{ environmentInfo.database }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">缓存</span>
+                    <span class="env-value">{{ environmentInfo.cache }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">时区</span>
+                    <span class="env-value">{{ environmentInfo.timezone }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ILucideServer from "~icons/lucide/server";
+import { $Http } from "@/plugins/http";
+
+// 组件内部数据
+const environmentInfo = $ref({
+    os: "",
+    server: "",
+    nodeVersion: "",
+    database: "",
+    cache: "",
+    timezone: ""
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http("/addon/admin/dashboard/environmentInfo");
+        Object.assign(environmentInfo, data);
+    } catch (error) {
+        // 静默失败：不阻断页面展示
+    }
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.env-grid-compact {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+
+    .env-compact-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 12px;
+        background: var(--bg-color-container);
+        border-radius: 6px;
+        border: 1px solid var(--border-color);
+        transition: all 0.2s ease;
+
+        &:hover {
+            background: rgba(var(--primary-color-rgb), 0.03);
+            border-color: rgba(var(--primary-color-rgb), 0.2);
+        }
+
+        .env-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .env-value {
+            font-size: 14px;
+            color: var(--text-primary);
+            font-weight: 600;
+            text-align: right;
+        }
+    }
+}
+</style>

package/adminViews/index/components/operationLogs.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <i-lucide:file-text />
+            <h2>操作日志</h2>
+        </div>
+        <div class="section-content">
+            <div class="operation-table">
+                <div class="operation-header">
+                    <span class="col-time">时间</span>
+                    <span class="col-user">操作人</span>
+                    <span class="col-action">操作</span>
+                    <span class="col-module">模块</span>
+                    <span class="col-ip">IP地址</span>
+                    <span class="col-status">状态</span>
+                </div>
+                <div class="operation-body">
+                    <div v-for="log in operationLogs" :key="log.id" class="operation-row">
+                        <span class="col-time">{{ formatTime(log.createdAt) }}</span>
+                        <span class="col-user">{{ log.userName }}</span>
+                        <span class="col-action">{{ log.action }}</span>
+                        <span class="col-module">{{ log.module }}</span>
+                        <span class="col-ip">{{ log.ip }}</span>
+                        <span class="col-status">
+                            <t-tag :type="log.status === 'success' ? 'success' : 'danger'" size="small">
+                                {{ log.status === "success" ? "成功" : "失败" }}
+                            </t-tag>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+const operationLogs = $ref([
+    { id: 1, userName: "管理员", action: "创建角色", module: "权限管理", ip: "192.168.1.100", status: "success", createdAt: Date.now() - 120000 },
+    { id: 2, userName: "张三", action: "修改菜单", module: "系统设置", ip: "192.168.1.101", status: "success", createdAt: Date.now() - 900000 },
+    { id: 3, userName: "李四", action: "删除接口", module: "接口管理", ip: "192.168.1.102", status: "failed", createdAt: Date.now() - 3600000 },
+    { id: 4, userName: "管理员", action: "同步数据库", module: "数据库", ip: "192.168.1.100", status: "success", createdAt: Date.now() - 7200000 },
+    { id: 5, userName: "王五", action: "登录系统", module: "系统", ip: "192.168.1.103", status: "success", createdAt: Date.now() - 10800000 }
+]);
+
+const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    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");
+    return `${month}-${day} ${hours}:${minutes}`;
+};
+</script>
+
+<style scoped lang="scss">
+.operation-table {
+    .operation-header,
+    .operation-row {
+        display: grid;
+        grid-template-columns: 100px 100px 1fr 120px 120px 80px;
+        gap: 12px;
+        align-items: center;
+    }
+
+    .operation-header {
+        padding: 10px 12px;
+        background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        margin-bottom: 6px;
+    }
+
+    .operation-body {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .operation-row {
+        padding: 6px 12px;
+        background: var(--bg-color-container);
+        border-radius: 6px;
+        border: 1px solid var(--border-color);
+        font-size: 14px;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background: rgba(var(--primary-color-rgb), 0.02);
+            border-color: rgba(var(--primary-color-rgb), 0.2);
+        }
+
+        .col-time {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+
+        .col-user,
+        .col-action,
+        .col-module,
+        .col-ip {
+            color: var(--text-primary);
+        }
+
+        .col-action {
+            font-weight: 600;
+        }
+    }
+}
+</style>