@befly-addon/admin 1.2.1 → 1.2.3

package/adminViews/permission/role/components/api.vue

@@ -0,0 +1,361 @@
+<template>
+    <TDialog 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">
+                <TInput v-model="$Data.searchText" placeholder="搜索接口名称或路径" clearable @change="$Method.onSearch">
+                    <template #prefix-icon>
+                        <ILucideSearch />
+                    </template>
+                </TInput>
+            </div>
+
+            <!-- 接口分组列表 -->
+            <div class="api-container">
+                <div class="api-group" v-for="group in $Data.filteredApiData" :key="group.name">
+                    <div class="group-header">{{ group.title }}</div>
+                    <div class="api-checkbox-list">
+                        <TCheckboxGroup v-model="$Data.checkedApiPaths">
+                            <TCheckbox v-for="api in group.apis" :key="api.value" :value="api.value">
+                                <div class="api-checkbox-label">
+                                    <div class="api-label-main">
+                                        <div class="api-name" :title="api.name">{{ api.name }}</div>
+                                        <div class="api-path" :title="api.path">{{ api.path }}</div>
+                                    </div>
+
+                                    <span class="api-copy" title="复制路径" @click.stop="$Method.copyApiPath(api.path)">
+                                        <ILucideCopy :size="14" />
+                                    </span>
+                                </div>
+                            </TCheckbox>
+                        </TCheckboxGroup>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="dialog-footer">
+                <t-space>
+                    <TButton theme="default" @click="$Method.onClose">取消</TButton>
+                    <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">保存</TButton>
+                </t-space>
+            </div>
+        </template>
+    </TDialog>
+</template>
+
+<script setup>
+import { Dialog as TDialog, Input as TInput, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Button as TButton, MessagePlugin } from "tdesign-vue-next";
+import ILucideCopy from "~icons/lucide/copy";
+import ILucideSearch from "~icons/lucide/search";
+import { $Http } from "@/plugins/http";
+
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    rowData: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+const $Emit = defineEmits(["update:modelValue", "success"]);
+
+const $Data = $ref({
+    visible: false,
+    submitting: false,
+    apiData: [],
+    filteredApiData: [],
+    searchText: "",
+    checkedApiPaths: []
+});
+
+// 方法集合
+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/api/all");
+
+            // 将接口列表按 addonTitle 分组
+            const apiMap = new Map();
+
+            res.data.lists.forEach((api) => {
+                const addonTitle = api.addonTitle || api.addonName || "项目接口";
+                const addonName = api.addonName || "app";
+
+                if (!apiMap.has(addonName)) {
+                    apiMap.set(addonName, {
+                        name: addonName,
+                        title: addonTitle,
+                        apis: []
+                    });
+                }
+
+                apiMap.get(addonName).apis.push({
+                    value: api.routePath,
+                    name: api.name || "",
+                    path: api.routePath || "",
+                    label: `${api.name || ""} ${api.routePath ? `(${api.routePath})` : ""}`.trim(),
+                    description: api.description
+                });
+            });
+
+            $Data.apiData = Array.from(apiMap.values());
+        } catch (error) {
+            MessagePlugin.error("加载接口失败");
+        }
+    },
+
+    // 加载该角色已分配的接口
+    async apiRoleApiDetail() {
+        if (!$Prop.rowData.id) return;
+
+        try {
+            const res = await $Http("/addon/admin/role/apis", {
+                roleCode: $Prop.rowData.code
+            });
+
+            $Data.checkedApiPaths = res.data.apiPaths || [];
+        } catch (error) {
+            MessagePlugin.error("加载数据失败");
+        }
+    },
+
+    // 搜索过滤
+    onSearch() {
+        if (!$Data.searchText) {
+            $Data.filteredApiData = $Data.apiData;
+            return;
+        }
+
+        const searchLower = $Data.searchText.toLowerCase();
+        $Data.filteredApiData = $Data.apiData
+            .map((group) => {
+                const apis = group.apis.filter((api) => api.label.toLowerCase().includes(searchLower));
+                return {
+                    name: group.name,
+                    title: group.title,
+                    apis: apis
+                };
+            })
+            .filter((group) => group.apis.length > 0);
+    },
+
+    async copyApiPath(path) {
+        if (typeof path !== "string" || path.trim().length === 0) {
+            MessagePlugin.warning("路径为空");
+            return;
+        }
+
+        const value = path.trim();
+
+        try {
+            if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+                await navigator.clipboard.writeText(value);
+                MessagePlugin.success("已复制");
+                return;
+            }
+        } catch (error) {
+            // ignore and fallback
+        }
+
+        try {
+            const textarea = document.createElement("textarea");
+            textarea.value = value;
+            textarea.setAttribute("readonly", "readonly");
+            textarea.style.position = "fixed";
+            textarea.style.left = "-9999px";
+            textarea.style.top = "-9999px";
+            document.body.appendChild(textarea);
+            textarea.select();
+            const ok = document.execCommand("copy");
+            document.body.removeChild(textarea);
+
+            if (ok) {
+                MessagePlugin.success("已复制");
+                return;
+            }
+
+            MessagePlugin.error("复制失败");
+        } catch (error) {
+            MessagePlugin.error("复制失败");
+        }
+    },
+
+    // 提交表单
+    async onSubmit() {
+        try {
+            $Data.submitting = true;
+
+            const res = await $Http("/addon/admin/role/apiSave", {
+                roleCode: $Prop.rowData.code,
+                apiPaths: $Data.checkedApiPaths
+            });
+
+            if (res.code === 0) {
+                MessagePlugin.success("保存成功");
+                $Data.visible = false;
+                $Emit("success");
+            } else {
+                MessagePlugin.error(res.msg || "保存失败");
+            }
+        } catch (error) {
+            MessagePlugin.error("保存失败");
+        } finally {
+            $Data.submitting = false;
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+.comp-role-api {
+    height: 60vh;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .api-container {
+        flex: 1;
+        overflow-y: auto;
+
+        .api-group {
+            margin-bottom: 16px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius-small);
+            overflow: hidden;
+
+            .api-checkbox-list {
+                padding: 10px;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .group-header {
+                padding: 12px 16px;
+                background-color: var(--bg-color-hover);
+                font-weight: 500;
+                font-size: var(--font-size-sm);
+                color: var(--text-primary);
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                &::before {
+                    content: "";
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    background-color: var(--primary-color);
+                    opacity: 0.3;
+                    flex-shrink: 0;
+                }
+            }
+
+            .api-item {
+                padding: 8px 16px;
+                cursor: pointer;
+                transition: background-color 0.2s;
+                background-color: var(--bg-color-container);
+
+                :deep(.t-checkbox-group) {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 12px;
+                    width: 100%;
+                }
+
+                :deep(.t-checkbox) {
+                    flex: 0 0 calc(33.333% - 8px);
+                    margin: 0;
+
+                    .t-checkbox__label {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.api-checkbox-label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.api-label-main {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.api-name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.api-path {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    opacity: 0.7;
+    font-size: 12px;
+}
+
+.api-copy {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.api-copy:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+.dialog-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+</style>

package/adminViews/permission/role/components/edit.vue

@@ -0,0 +1,142 @@
+<template>
+    <TDialog v-model:visible="$Data.visible" :header="$Prop.actionType === 'upd' ? '更新角色' : '添加角色'" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="10vh" @close="$Method.onClose">
+        <div class="comp-role-edit">
+            <TForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
+                <TFormItem label="角色名称" prop="name">
+                    <TInput v-model="$Data.formData.name" placeholder="请输入角色名称" />
+                </TFormItem>
+                <TFormItem label="角色代码" prop="code">
+                    <TInput v-model="$Data.formData.code" placeholder="请输入角色代码，如：admin" />
+                </TFormItem>
+                <TFormItem label="角色描述" prop="description">
+                    <TInput v-model="$Data.formData.description" placeholder="请输入角色描述" />
+                </TFormItem>
+                <TFormItem label="排序" prop="sort">
+                    <TInputNumber v-model="$Data.formData.sort" :min="0" :max="9999" />
+                </TFormItem>
+                <TFormItem label="状态" prop="state">
+                    <TRadioGroup v-model="$Data.formData.state">
+                        <TRadio :value="1">正常</TRadio>
+                        <TRadio :value="2">禁用</TRadio>
+                    </TRadioGroup>
+                </TFormItem>
+            </TForm>
+        </div>
+        <template #footer>
+            <TButton @click="$Method.onClose">取消</TButton>
+            <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">确定</TButton>
+        </template>
+    </TDialog>
+</template>
+
+<script setup>
+import {
+    //
+    Dialog as TDialog,
+    Form as TForm,
+    FormItem as TFormItem,
+    Input as TInput,
+    InputNumber as TInputNumber,
+    RadioGroup as TRadioGroup,
+    Radio as TRadio,
+    Button as TButton,
+    MessagePlugin
+} from "tdesign-vue-next";
+import { fieldClear } from "befly-vite/utils/fieldClear";
+import { $Http } from "@/plugins/http";
+
+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 $Computed = {};
+
+const $Data = $ref({
+    visible: false,
+    submitting: false,
+    formData: {
+        id: 0,
+        name: "",
+        code: "",
+        description: "",
+        sort: 0,
+        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" }
+        ],
+        sort: [{ type: "number", message: "排序必须是数字", trigger: "blur" }]
+    }
+});
+
+// 方法集合
+const $Method = {
+    async initData() {
+        if ($Prop.actionType === "upd" && $Prop.rowData.id) {
+            $Data.formData = Object.assign({}, $Prop.rowData);
+        }
+        $Method.onShow();
+    },
+    onShow() {
+        setTimeout(() => {
+            $Data.visible = $Prop.modelValue;
+        }, 100);
+    },
+    // 关闭抽屉事件
+    onClose() {
+        $Data.visible = false;
+        setTimeout(() => {
+            $Emit("update:modelValue", false);
+        }, 300);
+    },
+    async onSubmit() {
+        try {
+            const valid = await $From.form.validate();
+            if (!valid) return;
+
+            $Data.submitting = true;
+            const formData = $Prop.actionType === "add" ? fieldClear($Data.formData, { omitKeys: ["id", "state"] }) : $Data.formData;
+            const res = await $Http($Prop.actionType === "upd" ? "/addon/admin/role/upd" : "/addon/admin/role/ins", formData);
+
+            MessagePlugin.success(res.msg);
+            $Emit("success");
+            $Method.onClose();
+        } catch (error) {
+            MessagePlugin.error(error.msg || "提交失败");
+        } finally {
+            $Data.submitting = false;
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+.comp-role-edit {
+}
+</style>

package/adminViews/permission/role/components/menu.vue

@@ -0,0 +1,118 @@
+<template>
+    <TDialog v-model:visible="$Data.visible" title="菜单权限" width="600px" :append-to-body="true" :show-footer="true" top="10vh" @close="$Method.onClose">
+        <div class="comp-role-menu">
+            <TTree v-model:value="$Data.menuTreeCheckedKeys" :data="$Data.menuTreeData" value-mode="all" :keys="{ value: 'path', label: 'name', children: 'children' }" checkable expand-all />
+        </div>
+        <template #footer>
+            <TButton @click="$Method.onClose">取消</TButton>
+            <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">保存</TButton>
+        </template>
+    </TDialog>
+</template>
+
+<script setup>
+import { Dialog as TDialog, Tree as TTree, Button as TButton, MessagePlugin } from "tdesign-vue-next";
+import { $Http } from "@/plugins/http";
+import { arrayToTree } from "befly-shared/utils/arrayToTree";
+
+const $Prop = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    rowData: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+const $Emit = defineEmits(["update:modelValue", "success"]);
+
+const $Data = $ref({
+    visible: false,
+    submitting: false,
+    menuTreeData: [],
+    menuTreeCheckedKeys: []
+});
+
+// 方法集合
+const $Method = {
+    async initData() {
+        await Promise.all([$Method.apiMenuAll(), $Method.apiRoleMenuDetail()]);
+        $Method.onShow();
+    },
+
+    onShow() {
+        setTimeout(() => {
+            $Data.visible = $Prop.modelValue;
+        }, 100);
+    },
+
+    onClose() {
+        $Data.visible = false;
+        setTimeout(() => {
+            $Emit("update:modelValue", false);
+        }, 300);
+    },
+
+    // 加载菜单树（用于配置权限）
+    async apiMenuAll() {
+        try {
+            const res = await $Http("/addon/admin/menu/all");
+            const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+
+            const treeResult = arrayToTree(lists, "path", "parentPath", "children", "sort");
+            $Data.menuTreeData = treeResult.tree;
+        } catch (error) {
+            MessagePlugin.error("加载菜单失败");
+        }
+    },
+
+    // 加载该角色已分配的菜单
+    async apiRoleMenuDetail() {
+        if (!$Prop.rowData.id) return;
+
+        try {
+            const res = await $Http("/addon/admin/role/menus", {
+                roleCode: $Prop.rowData.code
+            });
+
+            // menus 返回的 data 直接就是菜单 path 数组
+            $Data.menuTreeCheckedKeys = Array.isArray(res.data) ? res.data : [];
+        } catch (error) {
+            MessagePlugin.error("加载数据失败");
+        }
+    },
+
+    // 提交表单
+    async onSubmit() {
+        try {
+            $Data.submitting = true;
+
+            const res = await $Http("/addon/admin/role/menuSave", {
+                roleCode: $Prop.rowData.code,
+                menuPaths: $Data.menuTreeCheckedKeys
+            });
+
+            if (res.code === 0) {
+                MessagePlugin.success("保存成功");
+                $Data.visible = false;
+                $Emit("success");
+            } else {
+                MessagePlugin.error(res.msg || "保存失败");
+            }
+        } catch (error) {
+            MessagePlugin.error("保存失败");
+        } finally {
+            $Data.submitting = false;
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+.comp-role-menu {
+}
+</style>