@befly-addon/admin 1.8.2 → 1.8.5

package/adminViews/login_1/index.vue

@@ -21,7 +21,7 @@
                     <p class="login-subtitle">请登录您的账户</p>
                 </div>
 
-                <TForm :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" :show-message="false" label-width="0">
+                <TForm :model="$Data.formData" :rules="$Data.formRules" :ref="(el) => ($From.form = el)" class="login-form" :show-message="false" label-width="0">
                     <TFormItem prop="account">
                         <TInputAdornment>
                             <template #prepend>
@@ -31,7 +31,7 @@
                                     <TOption value="phone" label="手机号" />
                                 </TSelect>
                             </template>
-                            <TInput v-model="$Data.formData.account" :placeholder="$Data.formData.loginType === 'username' ? '请输入用户名' : $Data.formData.loginType === 'email' ? '请输入邮箱' : '请输入手机号'" size="large" clearable @enter="$Method.apiLogin">
+                            <TInput v-model="$Data.formData.account" :placeholder="$Data.formData.loginType === 'username' ? '请输入用户名' : $Data.formData.loginType === 'email' ? '请输入邮箱' : '请输入手机号'" size="large" clearable @enter="apiLogin">
                                 <template #prefix-icon>
                                     <ILucideUser />
                                 </template>
@@ -40,7 +40,7 @@
                     </TFormItem>
 
                     <TFormItem prop="password">
-                        <TInput v-model="$Data.formData.password" type="password" placeholder="密码" size="large" clearable @enter="$Method.apiLogin">
+                        <TInput v-model="$Data.formData.password" type="password" placeholder="密码" size="large" clearable @enter="apiLogin">
                             <template #prefix-icon>
                                 <ILucideLock />
                             </template>
@@ -52,7 +52,7 @@
                         <a href="#" class="link-text">忘记密码？</a>
                     </div>
 
-                    <TButton theme="primary" class="login-btn" size="large" block :loading="$Data.loading" @click="$Method.apiLogin"> 登录 </TButton>
+                    <TButton theme="primary" class="login-btn" size="large" block :loading="$Data.loading" @click="apiLogin"> 登录 </TButton>
                 </TForm>
 
                 <div class="login-footer">
@@ -83,6 +83,10 @@ const $From = $shallowRef({
 const $Data = $ref({
     loading: false,
     rememberMe: false,
+    formRules: {
+        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
+    },
     formData: {
         loginType: "username",
         account: "",
@@ -90,49 +94,35 @@ const $Data = $ref({
     }
 });
 
-const $Data2 = $shallowRef({
-    formRules: {
-        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
-        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
-    }
-});
-
-// 方法定义
-const $Method = {
-    async apiLogin() {
-        try {
-            const valid = await $From.form.validate();
+async function apiLogin(): Promise<void> {
+    try {
+        await $From.form.validate();
 
-            $Data.loading = true;
+        $Data.loading = true;
 
-            // 对密码进行 SHA-256 加密
-            const hashedPassword = await hashPassword($Data.formData.password);
+        const hashedPassword = await hashPassword($Data.formData.password);
 
-            const res = await $Http.post("/addon/admin/auth/login", {
-                loginType: $Data.formData.loginType,
-                account: $Data.formData.account,
-                password: hashedPassword
-            });
+        const res = await $Http.post("/addon/admin/auth/login", {
+            loginType: $Data.formData.loginType,
+            account: $Data.formData.account,
+            password: hashedPassword
+        });
 
-            // 先保存 token
-            $Storage.local.set("token", res.data.token);
+        $Storage.local.set("token", res.data.token);
 
-            // 如果返回用户信息,也可以存储
-            if (res.data.userInfo) {
-                $Storage.local.set("userInfo", res.data.userInfo);
-            }
+        if (res.data.userInfo) {
+            $Storage.local.set("userInfo", res.data.userInfo);
+        }
 
-            MessagePlugin.success(res.msg || "登录成功");
+        MessagePlugin.success(res.msg || "登录成功");
 
-            // 跳转到首页，路由守卫会自动加载菜单
-            await router.push("/");
-        } catch (error) {
-            MessagePlugin.error("登录失败");
-        } finally {
-            $Data.loading = false;
-        }
+        await router.push("/");
+    } catch (error) {
+        MessagePlugin.error("登录失败");
+    } finally {
+        $Data.loading = false;
     }
-};
+}
 </script>
 
 <style scoped lang="scss">

package/adminViews/people/admin/components/edit.vue

@@ -1,5 +1,5 @@
 <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">
+    <PageDialog v-model="dialogVisible" :title="$Prop.actionType === 'upd' ? '编辑管理员' : '添加管理员'" :confirm-loading="$Data.submitting" @confirm="onSubmit">
         <div class="dialog-wrapper">
             <TForm :model="$Data.formData" label-width="80px" label-position="left" label-align="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
                 <TFormItem label="角色" prop="roleCode">
@@ -22,30 +22,23 @@
                 </TFormItem>
             </TForm>
         </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>
+    </PageDialog>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+
 import {
     //
-    Dialog as TDialog,
     Form as TForm,
     FormItem as TFormItem,
     Input as TInput,
     Select as TSelect,
     RadioGroup as TRadioGroup,
     Radio as TRadio,
-    Button as TButton,
     MessagePlugin
 } from "tdesign-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 import { fieldClear } from "befly-shared/utils/fieldClear";
 import { hashPassword } from "befly-shared/utils/hashPassword";
@@ -65,15 +58,28 @@ const $Prop = defineProps({
     }
 });
 
-const $Emit = defineEmits(["update:modelValue", "success"]);
+const $Emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "success"): void;
+}>();
+
+type PageDialogEventContext = {
+    close: () => void;
+};
 
 // 表单引用
 const $From = $shallowRef({
     form: null
 });
 
+const dialogVisible = computed({
+    get: () => $Prop.modelValue,
+    set: (value) => {
+        $Emit("update:modelValue", value);
+    }
+});
+
 const $Data = $ref({
-    visible: false,
     submitting: false,
     allRoleLists: [],
     keys: {
@@ -102,71 +108,56 @@ const $Data2 = $shallowRef({
     }
 });
 
-// 方法集合
-const $Method = {
-    async initData() {
-        $Method.onShow();
-        await $Method.apiRoleLists();
-        if ($Prop.actionType === "upd" && $Prop.rowData.id) {
-            $Data.formData = { ...$Prop.rowData };
-        }
-    },
+async function initData(): Promise<void> {
+    await apiRoleLists();
+    if ($Prop.actionType === "upd" && $Prop.rowData.id) {
+        $Data.formData = Object.assign({}, $Prop.rowData);
+    }
+}
+
+async function apiRoleLists(): Promise<void> {
+    try {
+        const result = await $Http.post(
+            "/addon/admin/role/all",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        $Data.allRoleLists = result.data || [];
+    } catch (error) {
+        MessagePlugin.error("加载角色列表失败");
+    }
+}
 
-    onShow() {
-        setTimeout(() => {
-            $Data.visible = $Prop.modelValue;
-        }, 100);
-    },
+async function onSubmit(context?: PageDialogEventContext): Promise<void> {
+    try {
+        const valid = await $From.form.validate();
+        if (!valid) return;
 
-    onClose() {
-        $Data.visible = false;
-        setTimeout(() => {
-            $Emit("update:modelValue", false);
-        }, 300);
-    },
+        $Data.submitting = true;
+        const formData = ($Prop.actionType === "add" ? fieldClear($Data.formData, { omitKeys: ["id", "state"] }) : fieldClear($Data.formData, { omitKeys: ["password"] })) as Record<string, unknown>;
 
-    async apiRoleLists() {
-        try {
-            const result = await $Http.post(
-                "/addon/admin/role/all",
-                {},
-                {
-                    dropValues: [""]
-                }
-            );
-            $Data.allRoleLists = result.data || [];
-        } catch (error) {
-            MessagePlugin.error("加载角色列表失败");
+        const password = typeof formData["password"] === "string" ? String(formData["password"]) : "";
+        if ($Prop.actionType === "add" && password) {
+            formData["password"] = await hashPassword(password);
         }
-    },
-
-    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"] }) : fieldClear($Data.formData, { omitKeys: ["password"] });
+        const result = await $Http.post($Prop.actionType === "upd" ? "/addon/admin/admin/upd" : "/addon/admin/admin/ins", formData);
 
-            // 添加管理员时，对密码进行 SHA-256 加密
-            if ($Prop.actionType === "add" && formData.password) {
-                formData.password = await hashPassword(formData.password);
-            }
-
-            const result = await $Http.post($Prop.actionType === "upd" ? "/addon/admin/admin/upd" : "/addon/admin/admin/ins", formData);
-
-            MessagePlugin.success(result.msg);
-            $Emit("success");
-            $Method.onClose();
-        } catch (error) {
-            MessagePlugin.error(error.msg || "提交失败");
-        } finally {
-            $Data.submitting = false;
+        MessagePlugin.success(result.msg);
+        $Emit("success");
+        if (context && typeof context.close === "function") {
+            context.close();
         }
+    } catch (error) {
+        MessagePlugin.error((error as { msg?: string }).msg || "提交失败");
+    } finally {
+        $Data.submitting = false;
     }
-};
+}
 
-$Method.initData();
+initData();
 </script>
 
 <style scoped lang="scss">

package/adminViews/people/admin/index.vue

@@ -1,90 +1,65 @@
 <template>
-    <div class="page-admin page-table">
-        <div class="main-tool">
-            <div class="left">
-                <TButton theme="primary" @click="$Method.onAction('add', {})">
-                    <template #icon>
-                        <ILucidePlus />
-                    </template>
+    <PagedTableDetail class="page-admin" :columns="$Data.columns" :endpoints="$Data.endpoints">
+        <template #toolLeft>
+            <TButton theme="primary" @click="onAdd">
+                <template #icon>
+                    <ILucidePlus />
+                </template>
+            </TButton>
+        </template>
+
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="onReload(scope.reload)">
+                <template #icon>
+                    <ILucideRotateCw />
+                </template>
+            </TButton>
+        </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>
+            <TTag v-else-if="row.state === 0" shape="round" theme="danger" 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> <ILucideChevronDown /></template>
                 </TButton>
-            </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="calc(100vh - var(--search-height) - var(--pagination-height) - var(--layout-gap) * 4)"
-                    active-row-type="single"
-                    @active-change="$Method.onActiveChange"
-                >
-                    <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>
-                        <TTag v-else-if="row.state === 0" shape="round" theme="danger" 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 value="del" :divider="true">
-                                    <ILucideTrash2 />
-                                    删除
-                                </TDropdownItem>
-                            </TDropdownMenu>
-                        </TDropdown>
-                    </template>
-                </TTable>
-            </div>
-
-            <div class="main-detail">
-                <DetailPanel :data="$Data.currentRow" :fields="$Data.columns" />
-            </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.apiAdminList" />
-    </div>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <ILucidePencil />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem value="del" :divider="true">
+                        <ILucideTrash2 />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </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 { Button as TButton, Table as TTable, Tag as TTag, Dropdown as TDropdown, DropdownMenu as TDropdownMenu, DropdownItem as TDropdownItem, Pagination as TPagination, MessagePlugin, DialogPlugin } from "tdesign-vue-next";
+import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Tag as TTag } 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 PagedTableDetail from "@/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 // 响应式数据
 const $Data = $ref({
-    tableData: [],
-    loading: false,
     columns: withDefaultColumns([
         { colKey: "username", title: "用户名", fixed: "left" },
         { colKey: "nickname", title: "昵称" },
@@ -92,147 +67,56 @@ const $Data = $ref({
         { colKey: "state", title: "状态" },
         { colKey: "operation", title: "操作" }
     ]),
-    pagerConfig: {
-        currentPage: 1,
-        limit: 30,
-        total: 0,
-        align: "right",
-        layout: "total, prev, pager, next, jumper"
+    endpoints: {
+        list: {
+            path: "/addon/admin/admin/list",
+            dropValues: [""]
+        },
+        delete: {
+            path: "/addon/admin/admin/del",
+            idKey: "id",
+            confirm: (row) => ({
+                header: "确认删除",
+                body: `确认删除“${row.username}”吗？`,
+                confirmBtn: "删除"
+            })
+        }
     },
     editVisible: false,
     actionType: "add",
-    rowData: {},
-    currentRow: null,
-    activeRowKeys: []
+    rowData: {}
 });
 
-// 方法
-const $Method = {
-    async initData() {
-        await $Method.apiAdminList();
-    },
-
-    // 加载管理员列表
-    async apiAdminList() {
-        $Data.loading = true;
-        try {
-            const res = await $Http.post(
-                "/addon/admin/admin/list",
-                {
-                    page: $Data.pagerConfig.currentPage,
-                    limit: $Data.pagerConfig.limit
-                },
-                {
-                    dropValues: [""]
-                }
-            );
-            $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;
-        }
-    },
+function onAdd(): void {
+    onAction("add", {});
+}
 
-    // 删除管理员
-    async apiAdminDel(row) {
-        let dialog = null;
-        let destroyed = false;
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-        const destroy = () => {
-            if (destroyed) return;
-            destroyed = true;
-            if (dialog && typeof dialog.destroy === "function") {
-                dialog.destroy();
-            }
-        };
-
-        dialog = DialogPlugin.confirm({
-            header: "确认删除",
-            body: `确认删除管理员“${row.username}”吗？`,
-            status: "warning",
-            confirmBtn: "删除",
-            cancelBtn: "取消",
-            onConfirm: async () => {
-                if (dialog && typeof dialog.setConfirmLoading === "function") {
-                    dialog.setConfirmLoading(true);
-                }
-
-                try {
-                    await $Http.post("/addon/admin/admin/del", {
-                        id: row.id
-                    });
-                    MessagePlugin.success("删除成功");
-                    destroy();
-                    await $Method.apiAdminList();
-                } catch (error) {
-                    MessagePlugin.error("删除失败");
-                } finally {
-                    if (dialog && typeof dialog.setConfirmLoading === "function") {
-                        dialog.setConfirmLoading(false);
-                    }
-                }
-            },
-            onClose: () => {
-                destroy();
-            }
-        });
-    },
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-    // 刷新
-    handleRefresh() {
-        $Method.apiAdminList();
-    },
-
-    // 分页改变
-    onPageChange({ currentPage }) {
-        $Data.pagerConfig.currentPage = currentPage;
-        $Method.apiAdminList();
-    },
-
-    // 每页条数改变
-    handleSizeChange({ pageSize }) {
-        $Data.pagerConfig.limit = pageSize;
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiAdminList();
-    },
-
-    // 高亮行变化
-    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.apiAdminDel(rowData);
-        }
+function onAction(command: string, rowData: Record<string, unknown>): void {
+    $Data.actionType = command;
+    $Data.rowData = rowData;
+    if (command === "add" || command === "upd") {
+        $Data.editVisible = true;
     }
-};
-
-$Method.initData();
+}
+
+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">