@befly-addon/admin 1.0.52 → 1.0.55

package/views/api/index.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="page-api page-table">
+        <div class="main-tool">
+            <div class="left">
+                <TInput v-model="$Data.searchKeyword" placeholder="搜索接口名称或路径" clearable style="width: 300px" @enter="$Method.handleSearch" @clear="$Method.handleSearch">
+                    <template #suffix-icon>
+                        <ILucideSearch />
+                    </template>
+                </TInput>
+                <span style="margin-left: 16px; color: var(--text-secondary); font-size: 13px">共 {{ $Data.allData.length }} 个接口</span>
+            </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 v-bind="withTableProps()" :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :selected-row-keys="$Data.selectedRowKeys" :active-row-keys="$Data.activeRowKeys" @select-change="$Method.onSelectChange" @active-change="$Method.onActiveChange">
+                    <template #method="{ row }">
+                        <TTag v-if="row.method === 'GET'" shape="round" theme="success" variant="light-outline">GET</TTag>
+                        <TTag v-else-if="row.method === 'POST'" shape="round" theme="primary" variant="light-outline">POST</TTag>
+                        <TTag v-else-if="row.method === 'PUT'" shape="round" theme="warning" variant="light-outline">PUT</TTag>
+                        <TTag v-else-if="row.method === 'DELETE'" shape="round" theme="danger" variant="light-outline">DELETE</TTag>
+                        <TTag v-else shape="round" variant="light-outline">{{ row.method }}</TTag>
+                    </template>
+                    <template #addonName="{ row }">
+                        <TTag v-if="row.addonName" shape="round" variant="light-outline">{{ row.addonTitle || row.addonName }}</TTag>
+                        <span v-else>项目</span>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel
+                    :data="$Data.currentRow"
+                    :fields="[
+                        { key: 'id', label: 'ID' },
+                        { key: 'name', label: '接口名称' },
+                        { key: 'path', label: '接口路径' },
+                        { key: 'method', label: '请求方法' },
+                        { key: 'addonName', label: '所属组件', default: '项目' },
+                        { key: 'description', label: '接口描述' }
+                    ]"
+                >
+                    <template #method="{ value }">
+                        <TTag v-if="value === 'GET'" shape="round" theme="success" variant="light-outline">GET</TTag>
+                        <TTag v-else-if="value === 'POST'" shape="round" theme="primary" variant="light-outline">POST</TTag>
+                        <TTag v-else-if="value === 'PUT'" shape="round" theme="warning" variant="light-outline">PUT</TTag>
+                        <TTag v-else-if="value === 'DELETE'" shape="round" theme="danger" variant="light-outline">DELETE</TTag>
+                        <TTag v-else shape="round" variant="light-outline">{{ value }}</TTag>
+                    </template>
+                </DetailPanel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton, Table as TTable, Tag as TTag, Input as TInput, MessagePlugin } from 'tdesign-vue-next';
+import ILucideRotateCw from '~icons/lucide/rotate-cw';
+import ILucideSearch from '~icons/lucide/search';
+import { $Http } from '@/plugins/http';
+import { withDefaultColumns, withTableProps } from '@/utils';
+import DetailPanel from '@/components/DetailPanel.vue';
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    allData: [],
+    loading: false,
+    searchKeyword: '',
+    columns: withDefaultColumns([
+        {
+            colKey: 'row-select',
+            type: 'single',
+            width: 50,
+            fixed: 'left',
+            checkProps: { allowUncheck: true },
+            ellipsis: false
+        },
+        { colKey: 'name', title: '接口名称', width: 200, fixed: 'left' },
+        { colKey: 'id', title: '序号', width: 80, align: 'center' },
+        { colKey: 'path', title: '接口路径', width: 350 },
+        { colKey: 'method', title: '请求方法', width: 100, align: 'center', ellipsis: false },
+        { colKey: 'addonName', title: '所属组件', width: 120, ellipsis: false }
+    ]),
+    currentRow: null,
+    selectedRowKeys: [],
+    activeRowKeys: []
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.loadApiAll();
+    },
+
+    // 加载全部接口
+    async loadApiAll() {
+        $Data.loading = true;
+        try {
+            const res = await $Http('/addon/admin/api/all');
+            const list = res.data?.lists || [];
+            $Data.allData = list;
+            $Data.tableData = list;
+
+            // 自动选中并高亮第一行
+            if ($Data.tableData.length > 0) {
+                $Data.currentRow = $Data.tableData[0];
+                $Data.selectedRowKeys = [$Data.tableData[0].id];
+                $Data.activeRowKeys = [$Data.tableData[0].id];
+            } else {
+                $Data.currentRow = null;
+                $Data.selectedRowKeys = [];
+                $Data.activeRowKeys = [];
+            }
+        } catch (error) {
+            console.error('加载接口列表失败:', error);
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
+        }
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.loadApiAll();
+    },
+
+    // 搜索
+    handleSearch() {
+        if (!$Data.searchKeyword) {
+            $Data.tableData = $Data.allData;
+            return;
+        }
+        const keyword = $Data.searchKeyword.toLowerCase();
+        $Data.tableData = $Data.allData.filter((item) => item.name?.toLowerCase().includes(keyword) || item.path?.toLowerCase().includes(keyword));
+    },
+
+    // 单选变化
+    onSelectChange(value, { selectedRowData }) {
+        $Data.selectedRowKeys = value;
+        $Data.activeRowKeys = value;
+        if (selectedRowData && selectedRowData.length > 0) {
+            $Data.currentRow = selectedRowData[0];
+        } else if ($Data.tableData.length > 0) {
+            $Data.currentRow = $Data.tableData[0];
+            $Data.selectedRowKeys = [$Data.tableData[0].id];
+            $Data.activeRowKeys = [$Data.tableData[0].id];
+        } else {
+            $Data.currentRow = null;
+        }
+    },
+
+    // 高亮行变化
+    onActiveChange(value, { activeRowData }) {
+        $Data.activeRowKeys = value;
+        $Data.selectedRowKeys = value;
+        if (activeRowData && activeRowData.length > 0) {
+            $Data.currentRow = activeRowData[0];
+        } else if ($Data.tableData.length > 0) {
+            $Data.currentRow = $Data.tableData[0];
+            $Data.selectedRowKeys = [$Data.tableData[0].id];
+            $Data.activeRowKeys = [$Data.tableData[0].id];
+        } else {
+            $Data.currentRow = null;
+        }
+    }
+};
+
+$Method.initData();
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/views/dict/components/edit.vue

@@ -28,7 +28,7 @@
         </TForm>
         <template #footer>
             <TButton @click="$Method.onClose">取消</TButton>
-            <TButton theme="primary" @click="$Method.onSubmit">确定</TButton>
+            <TButton theme="primary" :loading="$Data.submitting" @click="$Method.onSubmit">确定</TButton>
         </template>
     </TDialog>
 </template>
@@ -62,6 +62,7 @@ const $From = $shallowRef({
 
 const $Data = $ref({
     visible: false,
+    submitting: false,
     formData: {
         id: 0,
         name: '',
@@ -127,16 +128,17 @@ const $Method = {
             const valid = await $From.form.validate();
             if (!valid) return;
 
+            $Data.submitting = true;
             const res = await $Http($Prop.actionType === 'add' ? '/addon/admin/dictIns' : '/addon/admin/dictUpd', $Data.formData);
 
-            MessagePlugin.info({
-                message: $Prop.actionType === 'add' ? '添加成功' : '编辑成功',
-                status: 'success'
-            });
+            MessagePlugin.success($Prop.actionType === 'add' ? '添加成功' : '编辑成功');
             $Method.onClose();
             $Emit('success');
         } catch (error) {
             console.error('提交失败:', error);
+            MessagePlugin.error('提交失败');
+        } finally {
+            $Data.submitting = false;
         }
     }
 };

package/views/dict/index.vue

@@ -16,33 +16,51 @@
                 </TButton>
             </div>
         </div>
-        <div class="main-table">
-            <TTable :data="$Data.dictList" :columns="$Data.columns" header-cell-class-name="custom-table-cell-class" size="small" height="100%" row-key="id">
-                <template #state="{ row }">
-                    <TTag v-if="row.state === 1" theme="success">正常</TTag>
-                    <TTag v-else-if="row.state === 2" theme="warning">禁用</TTag>
-                    <TTag v-else theme="danger">已删除</TTag>
-                </template>
-                <template #operation="{ row }">
-                    <TDropdown trigger="click" min-column-width="120" @click="(data) => $Method.onAction(data.value, row)">
-                        <TButton variant="text" size="small">操作</TButton>
-                        <TDropdownMenu slot="dropdown">
-                            <TDropdownItem value="upd">
-                                <ILucidePencil />
-                                编辑
-                            </TDropdownItem>
-                            <TDropdownItem value="del" :divider="true">
-                                <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
-                                删除
-                            </TDropdownItem>
-                        </TDropdownMenu>
-                    </TDropdown>
-                </template>
-            </TTable>
+        <div class="main-content">
+            <div class="main-table">
+                <TTable v-bind="withTableProps()" :data="$Data.dictList" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" @active-change="$Method.onActiveChange">
+                    <template #state="{ row }">
+                        <TTag v-if="row.state === 1" theme="success">正常</TTag>
+                        <TTag v-else-if="row.state === 2" theme="warning">禁用</TTag>
+                        <TTag v-else theme="danger">已删除</TTag>
+                    </template>
+                    <template #operation="{ row }">
+                        <TDropdown trigger="click" min-column-width="120" @click="(data) => $Method.onAction(data.value, row)">
+                            <TButton variant="text" size="small">操作</TButton>
+                            <TDropdownMenu slot="dropdown">
+                                <TDropdownItem value="upd">
+                                    <ILucidePencil />
+                                    编辑
+                                </TDropdownItem>
+                                <TDropdownItem value="del" :divider="true">
+                                    <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                                    删除
+                                </TDropdownItem>
+                            </TDropdownMenu>
+                        </TDropdown>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel
+                    :data="$Data.currentRow"
+                    :fields="[
+                        { key: 'id', label: 'ID' },
+                        { key: 'name', label: '字典名称' },
+                        { key: 'code', label: '字典代码' },
+                        { key: 'value', label: '字典值' },
+                        { key: 'pid', label: '父级ID', default: '顶级' },
+                        { key: 'sort', label: '排序' },
+                        { key: 'description', label: '描述' },
+                        { key: 'state', label: '状态' }
+                    ]"
+                />
+            </div>
         </div>
 
         <div class="main-page">
-            <TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
+            <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>
 
         <!-- 编辑对话框组件 -->
@@ -57,25 +75,30 @@ import ILucideRotateCw from '~icons/lucide/rotate-cw';
 import ILucidePencil from '~icons/lucide/pencil';
 import ILucideTrash2 from '~icons/lucide/trash-2';
 import EditDialog from './components/edit.vue';
+import DetailPanel from '@/components/DetailPanel.vue';
 import { $Http } from '@/plugins/http';
+import { withDefaultColumns, withTableProps } from '@/utils';
 
 // 响应式数据
 const $Data = $ref({
     dictList: [],
-    columns: [
+    loading: false,
+    activeRowKeys: [],
+    currentRow: null,
+    columns: withDefaultColumns([
         { colKey: 'index', title: '序号', width: 60, align: 'center' },
         { colKey: 'name', title: '字典名称' },
         { colKey: 'code', title: '字典代码', width: 150 },
         { colKey: 'value', title: '字典值', width: 200 },
         { colKey: 'pid', title: '父级ID', width: 100 },
         { colKey: 'sort', title: '排序', width: 80 },
-        { colKey: 'description', title: '描述', ellipsis: true },
-        { colKey: 'state', title: '状态', width: 100 },
-        { colKey: 'operation', title: '操作', width: 120, align: 'right' }
-    ],
+        { colKey: 'description', title: '描述' },
+        { colKey: 'state', title: '状态', width: 100, ellipsis: false },
+        { colKey: 'operation', title: '操作', width: 120, align: 'right', ellipsis: false }
+    ]),
     pagerConfig: {
         currentPage: 1,
-        pageSize: 30,
+        limit: 30,
         total: 0,
         align: 'right',
         layout: 'total, prev, pager, next, jumper'
@@ -93,19 +116,28 @@ const $Method = {
 
     // 加载字典列表
     async apiDictList() {
+        $Data.loading = true;
         try {
             const res = await $Http('/addon/admin/dict/list', {
                 page: $Data.pagerConfig.currentPage,
-                limit: $Data.pagerConfig.pageSize
+                limit: $Data.pagerConfig.limit
             });
             $Data.dictList = res.data.lists || [];
             $Data.pagerConfig.total = res.data.total || 0;
+
+            // 自动选中并高亮第一行
+            if ($Data.dictList.length > 0) {
+                $Data.currentRow = $Data.dictList[0];
+                $Data.activeRowKeys = [$Data.dictList[0].id];
+            } else {
+                $Data.currentRow = null;
+                $Data.activeRowKeys = [];
+            }
         } catch (error) {
             console.error('加载字典列表失败:', error);
-            MessagePlugin.info({
-                message: '加载数据失败',
-                status: 'error'
-            });
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            $Data.loading = false;
         }
     },
 
@@ -113,20 +145,20 @@ const $Method = {
     async apiDictDel(row) {
         DialogPlugin.confirm({
             header: '确认删除',
-            body: `确定要删除字典"${row.name}" 吗？`,
+            body: `确定要删除字典“${row.name}” 吗？`,
             status: 'warning'
         }).then(async () => {
             try {
                 const res = await $Http('/addon/admin/dict/del', { id: row.id });
                 if (res.code === 0) {
-                    MessagePlugin.info({ message: '删除成功', status: 'success' });
+                    MessagePlugin.success('删除成功');
                     $Method.apiDictList();
                 } else {
-                    MessagePlugin.info({ message: res.msg || '删除失败', status: 'error' });
+                    MessagePlugin.error(res.msg || '删除失败');
                 }
             } catch (error) {
                 console.error('删除失败:', error);
-                MessagePlugin.info({ message: '删除失败', status: 'error' });
+                MessagePlugin.error('删除失败');
             }
         });
     },
@@ -142,6 +174,28 @@ const $Method = {
         $Method.apiDictList();
     },
 
+    // 每页条数改变
+    handleSizeChange({ pageSize }) {
+        $Data.pagerConfig.limit = pageSize;
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiDictList();
+    },
+
+    // 高亮行变化（点击行选中）
+    onActiveChange(value, { activeRowData }) {
+        $Data.activeRowKeys = value;
+        // 更新当前高亮的行数据
+        if (activeRowData && activeRowData.length > 0) {
+            $Data.currentRow = activeRowData[0];
+        } else if ($Data.dictList.length > 0) {
+            // 如果取消高亮，默认显示第一行
+            $Data.currentRow = $Data.dictList[0];
+            $Data.activeRowKeys = [$Data.dictList[0].id];
+        } else {
+            $Data.currentRow = null;
+        }
+    },
+
     // 操作菜单点击
     onAction(command, rowData) {
         $Data.actionType = command;