@befly-addon/admin 1.0.9 → 1.0.11

package/views/admin/index.vue

@@ -0,0 +1,179 @@
+<template>
+    <div class="page-admin page-table">
+        <div class="main-tool">
+            <div class="left">
+                <tiny-button type="primary" @click="$Method.onAction('add', {})">
+                    <template #icon>
+                        <i-lucide:plus style="width: 16px; height: 16px" />
+                    </template>
+                    添加管理员
+                </tiny-button>
+            </div>
+            <div class="right">
+                <tiny-button @click="$Method.handleRefresh">
+                    <template #icon>
+                        <i-lucide:rotate-cw style="width: 16px; height: 16px" />
+                    </template>
+                </tiny-button>
+            </div>
+            <div class="right">
+                <tiny-button @click="$Method.handleRefresh">
+                    <template #icon>
+                        <i-lucide:rotate-cw style="width: 16px; height: 16px" />
+                    </template>
+                    刷新
+                </tiny-button>
+            </div>
+        </div>
+
+        <div class="main-table">
+            <tiny-grid :data="$Data.tableData" 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="username" title="用户名" />
+                <tiny-grid-column field="email" title="邮箱" :width="200" />
+                <tiny-grid-column field="nickname" title="昵称" :width="150" />
+                <tiny-grid-column field="roleCode" title="角色" :width="120" />
+                <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: 'role' }">
+                                        <i-lucide:user style="width: 14px; height: 14px; margin-right: 6px" />
+                                        分配角色
+                                    </tiny-dropdown-item>
+                                    <tiny-dropdown-item :item-data="{ command: 'upd' }">
+                                        <i-lucide:pencil style="width: 14px; height: 14px; margin-right: 6px" />
+                                        编辑
+                                    </tiny-dropdown-item>
+                                    <tiny-dropdown-item :item-data="{ command: 'del' }" divided>
+                                        <i-lucide:trash-2 style="width: 14px; height: 14px; margin-right: 6px" />
+                                        删除
+                                    </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.apiAdminList" />
+
+        <!-- 角色分配对话框组件 -->
+        <RoleDialog v-if="$Data.roleVisible" v-model="$Data.roleVisible" :row-data="$Data.rowData" @success="$Method.apiAdminList" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@opentiny/vue';
+
+import EditDialog from './components/edit.vue';
+import RoleDialog from './components/role.vue';
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    pagerConfig: {
+        currentPage: 1,
+        pageSize: 30,
+        total: 0,
+        align: 'right',
+        layout: 'total, prev, pager, next, jumper'
+    },
+    editVisible: false,
+    roleVisible: false,
+    actionType: 'add',
+    rowData: {}
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.apiAdminList();
+    },
+
+    // 加载管理员列表
+    async apiAdminList() {
+        try {
+            const res = await $Http('/addon/admin/list', {
+                page: $Data.pagerConfig.currentPage,
+                limit: $Data.pagerConfig.pageSize
+            });
+            $Data.tableData = res.data.lists || [];
+            $Data.pagerConfig.total = res.data.total || 0;
+        } catch (error) {
+            console.error('加载管理员列表失败:', error);
+            Modal.message({
+                message: '加载数据失败',
+                status: 'error'
+            });
+        }
+    },
+
+    // 删除管理员
+    async apiAdminDel(row) {
+        Modal.confirm({
+            header: '确认删除',
+            body: `确定要删除管理员"${row.username}" 吗？`,
+            status: 'warning'
+        }).then(async () => {
+            try {
+                const res = await $Http('/addon/admin/del', { id: row.id });
+                if (res.code === 0) {
+                    Modal.message({ message: '删除成功', status: 'success' });
+                    $Method.apiAdminList();
+                } else {
+                    Modal.message({ message: res.msg || '删除失败', status: 'error' });
+                }
+            } catch (error) {
+                console.error('删除失败:', error);
+                Modal.message({ message: '删除失败', status: 'error' });
+            }
+        });
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.apiAdminList();
+    },
+
+    // 分页改变
+    onPageChange({ currentPage }) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiAdminList();
+    },
+
+    // 操作菜单点击
+    onAction(command, rowData) {
+        $Data.actionType = command;
+        $Data.rowData = rowData;
+        if (command === 'add' || command === 'upd') {
+            $Data.editVisible = true;
+        } else if (command === 'role') {
+            $Data.roleVisible = true;
+        } else if (command === 'del') {
+            $Method.apiAdminDel(rowData);
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/dict/components/edit.vue

@@ -0,0 +1,159 @@
+<template>
+    <tiny-dialog-box v-model:visible="$Data.visible" :title="$Prop.actionType === 'upd' ? '编辑字典' : '添加字典'" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="10vh" @close="$Method.onClose">
+        <tiny-form :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
+            <tiny-form-item label="字典名称" prop="name">
+                <tiny-input v-model="$Data.formData.name" placeholder="请输入字典名称" />
+            </tiny-form-item>
+            <tiny-form-item label="字典代码" prop="code">
+                <tiny-input v-model="$Data.formData.code" placeholder="请输入字典代码，如：gender" />
+            </tiny-form-item>
+            <tiny-form-item label="字典值" prop="value">
+                <tiny-input v-model="$Data.formData.value" placeholder="请输入字典值" />
+            </tiny-form-item>
+            <tiny-form-item label="父级ID" prop="pid">
+                <tiny-numeric v-model="$Data.formData.pid" :min="0" :max="999999999999999" />
+            </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="description">
+                <tiny-input v-model="$Data.formData.description" type="textarea" placeholder="请输入描述" :rows="3" />
+            </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>
+import { ref, watch, shallowRef } from 'vue';
+import { Modal } from '@opentiny/vue';
+
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    actionType: {
+        type: String,
+        default: 'add'
+    },
+    rowData: {
+        type: Object,
+        default: {}
+    }
+});
+
+const $Emit = defineEmits(['update:modelValue', 'success']);
+
+// 表单引用
+const $From = $shallowRef({
+    form: null
+});
+
+const $Data = $ref({
+    visible: false,
+    formData: {
+        id: 0,
+        name: '',
+        code: '',
+        value: '',
+        pid: 0,
+        sort: 0,
+        description: '',
+        state: 1
+    }
+});
+
+const $Data2 = $shallowRef({
+    formRules: {
+        name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
+        code: [
+            { required: true, message: '请输入字典代码', trigger: 'blur' },
+            { pattern: /^[a-zA-Z0-9_]+$/, message: '字典代码只能包含字母、数字和下划线', trigger: 'blur' }
+        ],
+        value: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
+    }
+});
+
+// 方法集合
+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.code = $Prop.rowData.code || '';
+            $Data.formData.value = $Prop.rowData.value || '';
+            $Data.formData.pid = $Prop.rowData.pid || 0;
+            $Data.formData.sort = $Prop.rowData.sort || 0;
+            $Data.formData.description = $Prop.rowData.description || '';
+            $Data.formData.state = $Prop.rowData.state ?? 1;
+        } else {
+            // 重置表单
+            $Data.formData.id = 0;
+            $Data.formData.name = '';
+            $Data.formData.code = '';
+            $Data.formData.value = '';
+            $Data.formData.pid = 0;
+            $Data.formData.sort = 0;
+            $Data.formData.description = '';
+            $Data.formData.state = 1;
+        }
+    },
+
+    onClose() {
+        $Data.visible = false;
+        setTimeout(() => {
+            $Emit('update:modelValue', false);
+        }, 300);
+    },
+
+    async onSubmit() {
+        try {
+            const valid = await $From.form.validate();
+            if (!valid) return;
+
+            const res = await $Http($Prop.actionType === 'add' ? '/addon/admin/dictIns' : '/addon/admin/dictUpd', $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/views/dict/index.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="page-dict page-table">
+        <div class="main-tool">
+            <div class="left">
+                <tiny-button type="primary" @click="$Method.onAction('add', {})">
+                    <template #icon>
+                        <i-lucide:plus style="width: 16px; height: 16px" />
+                    </template>
+                    添加字典
+                </tiny-button>
+            </div>
+            <div class="right">
+                <tiny-button @click="$Method.handleRefresh">
+                    <template #icon>
+                        <i-lucide:rotate-cw style="width: 16px; height: 16px" />
+                    </template>
+                    刷新
+                </tiny-button>
+            </div>
+        </div>
+        <div class="main-table">
+            <tiny-grid :data="$Data.dictList" 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="code" title="字典代码" :width="150" />
+                <tiny-grid-column field="value" title="字典值" :width="200" />
+                <tiny-grid-column field="pid" title="父级ID" :width="100" />
+                <tiny-grid-column field="sort" title="排序" :width="80" />
+                <tiny-grid-column field="description" title="描述" />
+                <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' }">
+                                        <i-lucide:pencil style="width: 14px; height: 14px; margin-right: 6px" />
+                                        编辑
+                                    </tiny-dropdown-item>
+                                    <tiny-dropdown-item :item-data="{ command: 'del' }" divided>
+                                        <i-lucide:trash-2 style="width: 14px; height: 14px; margin-right: 6px" />
+                                        删除
+                                    </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.apiDictList" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Modal } from '@opentiny/vue';
+
+import EditDialog from './components/edit.vue';
+
+// 响应式数据
+const $Data = $ref({
+    dictList: [],
+    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.apiDictList();
+    },
+
+    // 加载字典列表
+    async apiDictList() {
+        try {
+            const res = await $Http('/addon/admin/dict/list', {
+                page: $Data.pagerConfig.currentPage,
+                limit: $Data.pagerConfig.pageSize
+            });
+            $Data.dictList = res.data.lists || [];
+            $Data.pagerConfig.total = res.data.total || 0;
+        } catch (error) {
+            console.error('加载字典列表失败:', error);
+            Modal.message({
+                message: '加载数据失败',
+                status: 'error'
+            });
+        }
+    },
+
+    // 删除字典
+    async apiDictDel(row) {
+        Modal.confirm({
+            header: '确认删除',
+            body: `确定要删除字典"${row.name}" 吗？`,
+            status: 'warning'
+        }).then(async () => {
+            try {
+                const res = await $Http('/addon/admin/dict/del', { id: row.id });
+                if (res.code === 0) {
+                    Modal.message({ message: '删除成功', status: 'success' });
+                    $Method.apiDictList();
+                } else {
+                    Modal.message({ message: res.msg || '删除失败', status: 'error' });
+                }
+            } catch (error) {
+                console.error('删除失败:', error);
+                Modal.message({ message: '删除失败', status: 'error' });
+            }
+        });
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.apiDictList();
+    },
+
+    // 分页改变
+    onPageChange({ currentPage }) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiDictList();
+    },
+
+    // 操作菜单点击
+    onAction(command, rowData) {
+        $Data.actionType = command;
+        $Data.rowData = rowData;
+        if (command === 'add' || command === 'upd') {
+            $Data.editVisible = true;
+        } else if (command === 'del') {
+            $Method.apiDictDel(rowData);
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/index/components/addonList.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <i-lucide:package style="width: 20px; height: 20px" />
+            <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-status-badge" :class="{ active: addon.enabled }"></div>
+                    <div class="addon-icon">
+                        <i-lucide:box style="width: 20px; height: 20px" />
+                    </div>
+                    <div class="addon-info">
+                        <div class="addon-title">
+                            <span class="addon-name">{{ addon.title }}</span>
+                            <tiny-tag type="success" size="small">{{ addon.version }}</tiny-tag>
+                        </div>
+                        <div class="addon-desc">{{ addon.description }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 组件内部数据
+const addonList = $ref([]);
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboard/addonList');
+        addonList.splice(0, addonList.length, ...data);
+    } catch (error) {
+        console.error('获取插件列表失败:', error);
+    }
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.addon-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .addon-item {
+        position: relative;
+        background: $bg-color-container;
+        border: 1px solid $border-color;
+        border-left: 3px solid $primary-color;
+        border-radius: $border-radius-small;
+        padding: 10px 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        transition: all 0.3s;
+
+        &:hover {
+            border-left-color: $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: $text-disabled;
+            transition: all 0.3s;
+
+            &.active {
+                background: $success-color;
+                box-shadow: 0 0 0 2px rgba($success-color, 0.2);
+            }
+        }
+
+        .addon-icon {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, $primary-color, #764ba2);
+            border-radius: $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: $text-primary;
+                }
+            }
+
+            .addon-desc {
+                font-size: 14px;
+                color: $text-secondary;
+                line-height: 1.3;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+</style>