befly-admin-ui 1.8.14

package/views/config/system/index.vue

@@ -0,0 +1,188 @@
+<template>
+    <PagedTableDetail class="page-sys-config page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['isSystem', 'valueType', 'state']">
+        <template #toolLeft="scope">
+            <TButton theme="primary" @click="onAdd">
+                <template #icon>
+                    <AddIcon />
+                </template>
+                新增配置
+            </TButton>
+            <TSelect v-model="$Data.filter.group" placeholder="配置分组" clearable style="width: 150px" @change="handleFilter(scope.reload)">
+                <TOption v-for="item in $Data.groupOptions" :key="item" :label="item" :value="item" />
+            </TSelect>
+        </template>
+
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="onReload(scope.reload)">
+                <template #icon>
+                    <RefreshIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <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, deleteRow }">
+            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+                <TButton theme="primary" size="small">
+                    操作
+                    <template #suffix><ChevronDownIcon /></template>
+                </TButton>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <EditIcon />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem v-if="row.isSystem !== 1" value="del" :divider="true">
+                        <DeleteIcon style="width: 14px; height: 14px; margin-right: 6px" />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </template>
+
+        <template #detail="scope">
+            <DetailPanel :data="scope.row" :fields="$Data.columns">
+                <template #isSystem="slotScope">
+                    <TTag v-if="slotScope.value === 1" shape="round" theme="warning" variant="light-outline">系统配置</TTag>
+                    <TTag v-else shape="round" variant="light-outline">自定义配置</TTag>
+                </template>
+                <template #valueType="slotScope">
+                    <TTag shape="round" variant="light-outline">{{ slotScope.value }}</TTag>
+                </template>
+                <template #value="slotScope">
+                    <pre class="config-value">{{ slotScope.value }}</pre>
+                </template>
+            </DetailPanel>
+        </template>
+
+        <template #dialogs="scope">
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+        </template>
+    </PagedTableDetail>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
+import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon } from "tdesign-icons-vue-next";
+import EditDialog from "./components/edit.vue";
+import DetailPanel from "@/components/detailPanel.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+// 响应式数据
+const $Data = reactive({
+    columns: withDefaultColumns([
+        { colKey: "name", title: "配置名称", fixed: "left", width: 150 },
+        { 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 },
+        { colKey: "description", title: "描述说明", detail: true }
+    ]),
+    endpoints: {
+        list: {
+            path: "/core/sysConfig/list",
+            dropValues: [0, ""],
+            dropKeyValue: {
+                group: [""]
+            },
+            buildData: () => {
+                return {
+                    group: $Data.filter.group
+                };
+            }
+        },
+        delete: {
+            path: "/core/sysConfig/del",
+            idKey: "id",
+            confirm: (row) => {
+                return {
+                    header: "确认删除",
+                    body: `确认删除配置“${row.name}”吗？`,
+                    confirmBtn: "删除",
+                    status: "warning"
+                };
+            }
+        }
+    },
+    editVisible: false,
+    actionType: "add",
+    rowData: {},
+    filter: {
+        group: ""
+    },
+    groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
+});
+
+function onAdd(): void {
+    onAction("add", {});
+}
+
+function handleFilter(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: true });
+}
+
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+function onAction(command: string, rowData: Record<string, unknown>): void {
+    $Data.actionType = command;
+    if (command === "add") {
+        $Data.rowData = {};
+    } else {
+        $Data.rowData = Object.assign({}, rowData);
+    }
+
+    if (command === "add" || command === "upd") {
+        $Data.editVisible = true;
+    }
+}
+
+function onDropdownAction(data: unknown, rowData: Record<string, unknown>, deleteRow: (row: Record<string, unknown>) => void): void {
+    const record = data as Record<string, unknown>;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
+    if (cmd === "del") {
+        deleteRow(rowData);
+        return;
+    }
+    onAction(cmd, rowData);
+}
+</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/views/index/components/addonList.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <MenuIcon />
+            <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">
+                        <SystemStorageIcon />
+                    </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 lang="ts">
+import { reactive } from "vue";
+import { MenuIcon, SystemStorageIcon } from "tdesign-icons-vue-next";
+import { $Http } from "@/plugins/http";
+
+type AddonListItem = {
+    name: string;
+    title: string;
+    version: string;
+    description: string;
+};
+
+// 组件内部数据
+const addonList = reactive<AddonListItem[]>([]);
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http.post(
+            "/core/dashboard/addonList",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        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/views/index/components/environmentInfo.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ServerIcon />
+            <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 lang="ts">
+import { reactive } from "vue";
+import { ServerIcon } from "tdesign-icons-vue-next";
+import { $Http } from "@/plugins/http";
+
+type EnvironmentInfo = {
+    os: string;
+    server: string;
+    nodeVersion: string;
+    database: string;
+    cache: string;
+    timezone: string;
+};
+
+// 组件内部数据
+const environmentInfo = reactive<EnvironmentInfo>({
+    os: "",
+    server: "",
+    nodeVersion: "",
+    database: "",
+    cache: "",
+    timezone: ""
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http.post(
+            "/core/dashboard/environmentInfo",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        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/views/index/components/operationLogs.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <CodeIcon />
+            <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 lang="ts">
+import { reactive } from "vue";
+import { CodeIcon } from "tdesign-icons-vue-next";
+
+type OperationLogStatus = "success" | "failed";
+
+type OperationLogItem = {
+    id: number;
+    userName: string;
+    action: string;
+    module: string;
+    ip: string;
+    status: OperationLogStatus;
+    createdAt: number;
+};
+
+// 组件内部数据
+const operationLogs = reactive<OperationLogItem[]>([
+    { 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: number): string => {
+    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>