befly-admin 3.0.1

package/src/views/menu/components/edit.vue

@@ -0,0 +1,150 @@
+<template>
+    <tiny-dialog-box v-model:visible="$Data.visible" :title="$Prop.actionType === 'add' ? '添加菜单' : '编辑菜单'" width="600px" :append-to-body="true" :show-footer="true" top="10vh">
+        <tiny-form :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($Form.form = el)">
+            <tiny-form-item label="菜单名称" prop="name">
+                <tiny-input v-model="$Data.formData.name" placeholder="请输入菜单名称" />
+            </tiny-form-item>
+            <tiny-form-item label="菜单路径" prop="path">
+                <tiny-input v-model="$Data.formData.path" placeholder="请输入菜单路径，如：/user" />
+            </tiny-form-item>
+            <tiny-form-item label="图标" prop="icon">
+                <tiny-input v-model="$Data.formData.icon" placeholder="请输入图标名称，如：User" />
+            </tiny-form-item>
+            <tiny-form-item label="菜单类型" prop="type">
+                <tiny-radio-group v-model="$Data.formData.type">
+                    <tiny-radio :label="0">目录</tiny-radio>
+                    <tiny-radio :label="1">菜单</tiny-radio>
+                </tiny-radio-group>
+            </tiny-form-item>
+            <tiny-form-item label="排序" prop="sort">
+                <tiny-numeric v-model="$Data.formData.sort" :min="0" :max="9999" />
+            </tiny-form-item>
+            <tiny-form-item label="状态" prop="state">
+                <tiny-radio-group v-model="$Data.formData.state">
+                    <tiny-radio :label="1">正常</tiny-radio>
+                    <tiny-radio :label="2">禁用</tiny-radio>
+                </tiny-radio-group>
+            </tiny-form-item>
+        </tiny-form>
+        <template #footer>
+            <tiny-button @click="$Method.onClose">取消</tiny-button>
+            <tiny-button type="primary" @click="$Method.onSubmit">确定</tiny-button>
+        </template>
+    </tiny-dialog-box>
+</template>
+
+<script setup>
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    actionType: {
+        type: String,
+        default: 'add'
+    },
+    rowData: {
+        type: Object,
+        default: {}
+    }
+});
+
+const $Emit = defineEmits(['update:modelValue', 'success']);
+
+// 表单引用
+const $Form = $shallowRef({
+    form: null
+});
+
+const $Data = $ref({
+    visible: false,
+    formData: {
+        id: 0,
+        name: '',
+        path: '',
+        icon: '',
+        type: 1,
+        sort: 0,
+        state: 1
+    }
+});
+
+const $Data2 = $shallowRef({
+    formRules: {
+        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+        path: [{ required: true, message: '请输入菜单路径', trigger: 'blur' }],
+        type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }]
+    }
+});
+
+// 方法集合
+const $Method = {
+    async initData() {
+        $Method.onShow();
+    },
+
+    onShow() {
+        $Data.visible = true;
+        if ($Prop.actionType === 'upd' && $Prop.rowData) {
+            $Data.formData.id = $Prop.rowData.id || 0;
+            $Data.formData.name = $Prop.rowData.name || '';
+            $Data.formData.path = $Prop.rowData.path || '';
+            $Data.formData.icon = $Prop.rowData.icon || '';
+            $Data.formData.type = $Prop.rowData.type ?? 1;
+            $Data.formData.sort = $Prop.rowData.sort || 0;
+            $Data.formData.state = $Prop.rowData.state ?? 1;
+        } else {
+            // 重置表单
+            $Data.formData.id = 0;
+            $Data.formData.name = '';
+            $Data.formData.path = '';
+            $Data.formData.icon = '';
+            $Data.formData.type = 1;
+            $Data.formData.sort = 0;
+            $Data.formData.state = 1;
+        }
+    },
+
+    onClose() {
+        $Data.visible = false;
+        setTimeout(() => {
+            $Emit('update:modelValue', false);
+        }, 300);
+    },
+
+    async onSubmit() {
+        try {
+            const valid = await $Form.form.validate();
+            if (!valid) return;
+
+            const res = await $Http($Prop.actionType === 'add' ? '/addon/admin/menuIns' : '/addon/admin/menuUpd', $Data.formData);
+
+            Modal.message({
+                message: $Prop.actionType === 'add' ? '添加成功' : '编辑成功',
+                status: 'success'
+            });
+            $Method.onClose();
+            $Emit('success');
+        } catch (error) {
+            console.error('提交失败:', error);
+        }
+    }
+};
+
+// 监听 modelValue 变化
+watch(
+    () => $Prop.modelValue,
+    (val) => {
+        if (val && !$Data.visible) {
+            $Method.initData();
+        } else if (!val && $Data.visible) {
+            $Data.visible = false;
+        }
+    },
+    { immediate: true }
+);
+</script>
+
+<style scoped lang="scss">
+// 可根据需要添加样式
+</style>

package/src/views/menu/index.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="page-menu page-table">
+        <div class="main-tool">
+            <div class="left">
+                <tiny-button type="primary" @click="$Method.onAction('add', {})">
+                    <template #icon>
+                        <Icon name="Plus" :size="16" />
+                    </template>
+                    添加菜单
+                </tiny-button>
+            </div>
+            <div class="right">
+                <tiny-button @click="$Method.handleRefresh">
+                    <template #icon>
+                        <Icon name="RotateCw" :size="16" />
+                    </template>
+                    刷新
+                </tiny-button>
+            </div>
+        </div>
+        <div class="main-table">
+            <tiny-grid :data="$Data.menuList" header-cell-class-name="custom-table-cell-class" size="small" height="100%" seq-serial>
+                <tiny-grid-column type="index" title="序号" :width="60" />
+                <tiny-grid-column field="name" title="菜单名称" />
+                <tiny-grid-column field="path" title="路径" :width="200" />
+                <tiny-grid-column field="icon" title="图标" :width="100">
+                    <template #default="{ row }">
+                        <Icon v-if="row.icon" :name="row.icon" :size="16" />
+                        <span v-else>-</span>
+                    </template>
+                </tiny-grid-column>
+                <tiny-grid-column field="type" title="类型" :width="100">
+                    <template #default="{ row }">
+                        <tiny-tag v-if="row.type === 0" type="info">目录</tiny-tag>
+                        <tiny-tag v-else type="success">菜单</tiny-tag>
+                    </template>
+                </tiny-grid-column>
+                <tiny-grid-column field="sort" title="排序" :width="80" />
+                <tiny-grid-column field="state" title="状态" :width="100">
+                    <template #default="{ row }">
+                        <tiny-tag v-if="row.state === 1" type="success">正常</tiny-tag>
+                        <tiny-tag v-else-if="row.state === 2" type="warning">禁用</tiny-tag>
+                        <tiny-tag v-else type="danger">已删除</tiny-tag>
+                    </template>
+                </tiny-grid-column>
+                <tiny-grid-column title="操作" :width="120" align="right">
+                    <template #default="{ row }">
+                        <tiny-dropdown title="操作" trigger="click" size="small" border visible-arrow @item-click="(data) => $Method.onAction(data.itemData.command, row)">
+                            <template #dropdown>
+                                <tiny-dropdown-menu>
+                                    <tiny-dropdown-item :item-data="{ command: 'upd' }">
+                                        <Icon name="Edit" />
+                                        编辑
+                                    </tiny-dropdown-item>
+                                    <tiny-dropdown-item :item-data="{ command: 'del' }" divided>
+                                        <Icon name="Trash2" />
+                                        删除
+                                    </tiny-dropdown-item>
+                                </tiny-dropdown-menu>
+                            </template>
+                        </tiny-dropdown>
+                    </template>
+                </tiny-grid-column>
+            </tiny-grid>
+        </div>
+
+        <div class="main-page">
+            <tiny-pager :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
+        </div>
+
+        <!-- 编辑对话框组件 -->
+        <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.apiMenuList" />
+    </div>
+</template>
+
+<script setup>
+import EditDialog from './components/edit.vue';
+
+// 响应式数据
+const $Data = $ref({
+    menuList: [],
+    pagerConfig: {
+        currentPage: 1,
+        pageSize: 30,
+        total: 0,
+        align: 'right',
+        layout: 'total, prev, pager, next, jumper'
+    },
+    editVisible: false,
+    actionType: 'add',
+    rowData: {}
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.apiMenuList();
+    },
+
+    // 加载菜单列表
+    async apiMenuList() {
+        try {
+            const res = await $Http('/addon/admin/menuList', {
+                page: $Data.pagerConfig.currentPage,
+                limit: $Data.pagerConfig.pageSize
+            });
+            $Data.menuList = res.data.lists || [];
+            $Data.pagerConfig.total = res.data.total || 0;
+        } catch (error) {
+            console.error('加载菜单列表失败:', error);
+            Modal.message({
+                message: '加载数据失败',
+                status: 'error'
+            });
+        }
+    },
+
+    // 删除菜单
+    async apiMenuDel(row) {
+        Modal.confirm({
+            header: '确认删除',
+            body: `确定要删除菜单"${row.name}" 吗？`,
+            status: 'warning'
+        }).then(async () => {
+            try {
+                const res = await $Http('/addon/admin/menuDel', { id: row.id });
+                if (res.code === 0) {
+                    Modal.message({ message: '删除成功', status: 'success' });
+                    $Method.apiMenuList();
+                } else {
+                    Modal.message({ message: res.msg || '删除失败', status: 'error' });
+                }
+            } catch (error) {
+                console.error('删除失败:', error);
+                Modal.message({ message: '删除失败', status: 'error' });
+            }
+        });
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.apiMenuList();
+    },
+
+    // 分页改变
+    onPageChange({ currentPage }) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiMenuList();
+    },
+
+    // 操作菜单点击
+    onAction(command, rowData) {
+        $Data.actionType = command;
+        $Data.rowData = rowData;
+        if (command === 'add' || command === 'upd') {
+            $Data.editVisible = true;
+        } else if (command === 'del') {
+            $Method.apiMenuDel(rowData);
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/src/views/news/detail/detail_2.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="news-page">
+        <h1>新闻页面2</h1>
+        <p>这个页面使用布局 1.vue</p>
+        <div class="news-content">
+            <p>这里是新闻内容...</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 新闻页面逻辑
+</script>
+
+<style scoped>
+.news-page {
+    padding: 20px;
+}
+
+.news-content {
+    margin-top: 20px;
+    padding: 20px;
+    background: #f5f5f5;
+    border-radius: 8px;
+}
+</style>

package/src/views/news/detail/index.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="news-page">
+        <h1>新闻页面 index</h1>
+        <p>这个页面使用布局 1.vue</p>
+        <div class="news-content">
+            <p>这里是新闻内容...</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 新闻页面逻辑
+</script>
+
+<style scoped>
+.news-page {
+    padding: 20px;
+}
+
+.news-content {
+    margin-top: 20px;
+    padding: 20px;
+    background: #f5f5f5;
+    border-radius: 8px;
+}
+</style>

package/src/views/news/news.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="news-page">
+        <h1>新闻页面</h1>
+        <p>这个页面使用布局 1.vue</p>
+        <div class="news-content">
+            <p>这里是新闻内容...</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 新闻页面逻辑
+</script>
+
+<style scoped>
+.news-page {
+    padding: 20px;
+}
+
+.news-content {
+    margin-top: 20px;
+    padding: 20px;
+    background: #f5f5f5;
+    border-radius: 8px;
+}
+</style>

package/src/views/role/components/api.vue

@@ -0,0 +1,280 @@
+<template>
+    <tiny-dialog-box v-model:visible="$Data.visible" title="接口权限" width="900px" :append-to-body="true" :show-footer="true" top="5vh" @close="$Method.onClose">
+        <div class="comp-role-api">
+            <!-- 搜索框 -->
+            <div class="search-box">
+                <tiny-search v-model="$Data.searchText" placeholder="搜索接口名称或路径" clearable @update:modelValue="$Method.onSearch" />
+            </div>
+
+            <!-- 接口分组列表 -->
+            <div class="api-container">
+                <div v-for="group in $Data.filteredApiData" :key="group.name" class="api-group">
+                    <div class="group-header">{{ group.title }}</div>
+                    <div class="api-checkbox-list">
+                        <tiny-checkbox-group v-model="$Data.checkedApiIds">
+                            <tiny-checkbox v-for="api in group.apis" :key="api.id" :label="api.id"> {{ api.label }} </tiny-checkbox>
+                        </tiny-checkbox-group>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="footer-left">
+                <tiny-button size="small" @click="$Method.onCheckAll">全选</tiny-button>
+                <tiny-button size="small" @click="$Method.onUncheckAll">取消全选</tiny-button>
+            </div>
+            <div class="footer-right">
+                <tiny-button @click="$Method.onClose">取消</tiny-button>
+                <tiny-button type="primary" @click="$Method.onSubmit">保存</tiny-button>
+            </div>
+        </template>
+    </tiny-dialog-box>
+</template>
+
+<script setup>
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    rowData: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+const $Emit = defineEmits(['update:modelValue', 'success']);
+
+const $Data = $ref({
+    visible: false,
+    apiData: [],
+    filteredApiData: [],
+    searchText: '',
+    checkedApiIds: []
+});
+
+// 方法集合
+const $Method = {
+    async initData() {
+        $Method.onShow();
+        await Promise.all([$Method.apiApiAll(), $Method.apiRoleApiDetail()]);
+        $Data.filteredApiData = $Data.apiData;
+    },
+
+    onShow() {
+        setTimeout(() => {
+            $Data.visible = $Prop.modelValue;
+        }, 100);
+    },
+
+    onClose() {
+        $Data.visible = false;
+        setTimeout(() => {
+            $Emit('update:modelValue', false);
+        }, 300);
+    },
+
+    // 加载所有接口
+    async apiApiAll() {
+        try {
+            const res = await $Http('/addon/admin/apiAll');
+
+            // 将接口列表按 addonTitle 分组
+            const apiMap = new Map();
+
+            res.data.lists.forEach((api) => {
+                const addonTitle = api.addonTitle || api.addonName || '项目接口';
+                const addonName = api.addonName || 'project';
+
+                if (!apiMap.has(addonName)) {
+                    apiMap.set(addonName, {
+                        name: addonName,
+                        title: addonTitle,
+                        apis: []
+                    });
+                }
+
+                apiMap.get(addonName).apis.push({
+                    id: api.id,
+                    label: `${api.name}`,
+                    description: api.description
+                });
+            });
+
+            $Data.apiData = Array.from(apiMap.values());
+        } catch (error) {
+            console.error('加载接口失败:', error);
+            Modal.message({ message: '加载接口失败', status: 'error' });
+        }
+    },
+
+    // 加载该角色已分配的接口
+    async apiRoleApiDetail() {
+        if (!$Prop.rowData.id) return;
+
+        try {
+            const res = await $Http('/addon/admin/roleApiDetail', {
+                roleId: $Prop.rowData.id
+            });
+
+            $Data.checkedApiIds = res.data.apiIds || [];
+        } catch (error) {
+            console.error('加载角色接口失败:', error);
+        }
+    },
+
+    // 搜索过滤
+    onSearch() {
+        if (!$Data.searchText) {
+            $Data.filteredApiData = $Data.apiData;
+            return;
+        }
+
+        const searchLower = $Data.searchText.toLowerCase();
+        $Data.filteredApiData = $Data.apiData
+            .map((group) => ({
+                ...group,
+                apis: group.apis.filter((api) => api.label.toLowerCase().includes(searchLower))
+            }))
+            .filter((group) => group.apis.length > 0);
+    },
+
+    // 全选
+    onCheckAll() {
+        const allApiIds = [];
+        $Data.apiData.forEach((group) => {
+            group.apis.forEach((api) => {
+                allApiIds.push(api.id);
+            });
+        });
+        $Data.checkedApiIds = allApiIds;
+    },
+
+    // 取消全选
+    onUncheckAll() {
+        $Data.checkedApiIds = [];
+    },
+
+    // 提交表单
+    async onSubmit() {
+        try {
+            const res = await $Http('/addon/admin/roleApiSave', {
+                roleId: $Prop.rowData.id,
+                apiIds: $Data.checkedApiIds
+            });
+
+            if (res.code === 0) {
+                Modal.message({
+                    message: '保存成功',
+                    status: 'success'
+                });
+                $Data.visible = false;
+                $Emit('success');
+            } else {
+                Modal.message({
+                    message: res.msg || '保存失败',
+                    status: 'error'
+                });
+            }
+        } catch (error) {
+            console.error('保存失败:', error);
+            Modal.message({
+                message: '保存失败',
+                status: 'error'
+            });
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+.comp-role-api {
+    height: 60vh;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .search-box {
+    }
+
+    .api-container {
+        flex: 1;
+        overflow-y: auto;
+
+        .api-group {
+            margin-bottom: 16px;
+            border: 1px solid $border-color;
+            border-radius: $border-radius-small;
+            overflow: hidden;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .group-header {
+                padding: 12px 16px;
+                background-color: $bg-color-hover;
+                font-weight: 500;
+                font-size: $font-size-sm;
+                color: $text-primary;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                &::before {
+                    content: '';
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    background-color: $primary-color;
+                    opacity: 0.3;
+                    flex-shrink: 0;
+                }
+            }
+
+            .api-checkbox-list {
+                padding: 16px;
+                background-color: $bg-color-container;
+
+                :deep(.tiny-checkbox-group) {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 12px;
+                    width: 100%;
+                }
+
+                :deep(.tiny-checkbox) {
+                    flex: 0 0 calc(33.333% - 8px);
+                    margin: 0;
+
+                    .tiny-checkbox__label {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 底部操作栏布局
+:deep(.tiny-dialog-box__footer) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .footer-left {
+        display: flex;
+        gap: 8px;
+    }
+
+    .footer-right {
+        display: flex;
+        gap: 8px;
+    }
+}
+</style>