@befly-addon/admin 1.0.30 → 1.0.32

package/views/role/components/menu.vue

@@ -1,19 +1,17 @@
 <template>
-    <TinyDialogBox v-model:visible="$Data.visible" title="菜单权限" width="600px" :append-to-body="true" :show-footer="true" top="10vh" @close="$Method.onClose">
+    <t-dialog 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">
-            <TinyTree :data="$Data.menuTreeData" node-key="id" show-checkbox default-expand-all :props="{ label: 'name' }" :ref="(el) => ($From.tree = el)" />
+            <t-tree :data="$Data.menuTreeData" node-key="id" show-checkbox default-expand-all :props="{ label: 'name' }" :ref="(el) => ($From.tree = el)" />
         </div>
         <template #footer>
-            <TinyButton @click="$Method.onClose">取消</TinyButton>
-            <TinyButton type="primary" @click="$Method.onSubmit">保存</TinyButton>
+            <t-button @click="$Method.onClose">取消</t-button>
+            <t-button type="primary" @click="$Method.onSubmit">保存</t-button>
         </template>
-    </TinyDialogBox>
+    </t-dialog>
 </template>
 
 <script setup>
 import { nextTick } from 'vue';
-import { Button as TinyButton, DialogBox as TinyDialogBox, Tree as TinyTree, Modal } from '@opentiny/vue';
-
 import { arrayToTree } from '@/utils';
 import { $Http } from '@/plugins/http';
 
@@ -70,7 +68,7 @@ const $Method = {
             $Data.menuTreeData = arrayToTree(menuList);
         } catch (error) {
             console.error('加载菜单失败:', error);
-            Modal.message({ message: '加载菜单失败', status: 'error' });
+            MessagePlugin.info({ message: '加载菜单失败', status: 'error' });
         }
     },
 
@@ -101,7 +99,7 @@ const $Method = {
     async onSubmit() {
         try {
             if (!$From.tree) {
-                Modal.message({ message: '菜单树未初始化', status: 'error' });
+                MessagePlugin.info({ message: '菜单树未初始化', status: 'error' });
                 return;
             }
 
@@ -116,21 +114,21 @@ const $Method = {
             });
 
             if (res.code === 0) {
-                Modal.message({
+                MessagePlugin.info({
                     message: '保存成功',
                     status: 'success'
                 });
                 $Data.visible = false;
                 $Emit('success');
             } else {
-                Modal.message({
+                MessagePlugin.info({
                     message: res.msg || '保存失败',
                     status: 'error'
                 });
             }
         } catch (error) {
             console.error('保存失败:', error);
-            Modal.message({
+            MessagePlugin.info({
                 message: '保存失败',
                 status: 'error'
             });

package/views/role/index.vue

@@ -2,67 +2,57 @@
     <div class="page-role page-table">
         <div class="main-tool">
             <div class="left">
-                <TinyButton type="primary" @click="$Method.onAction('add', {})">
+                <t-button type="primary" @click="$Method.onAction('add', {})">
                     <template #icon>
                         <IconLucidePlus />
                     </template>
                     添加角色
-                </TinyButton>
+                </t-button>
             </div>
             <div class="right">
-                <TinyButton @click="$Method.handleRefresh">
+                <t-button @click="$Method.handleRefresh">
                     <template #icon>
                         <IconLucideRotateCw />
                     </template>
                     刷新
-                </TinyButton>
+                </t-button>
             </div>
         </div>
         <div class="main-table">
-            <TinyGrid :data="$Data.tableData" header-cell-class-name="custom-table-cell-class" size="small" height="100%" show-overflow="tooltip" border seq-serial>
-                <TinyGridColumn type="index" title="序号" align="center" :width="100" />
-                <TinyGridColumn field="name" title="角色名称" :width="150" />
-                <TinyGridColumn field="code" title="角色代码" :width="150" />
-                <TinyGridColumn field="description" title="描述" :min-width="150" />
-                <TinyGridColumn field="sort" title="排序" align="center" :width="80" />
-                <TinyGridColumn field="state" title="状态" align="center" :width="100">
-                    <template #default="{ row }">
-                        <TinyTag v-if="row.state === 1" type="success">正常</TinyTag>
-                        <TinyTag v-else-if="row.state === 2" type="warning">禁用</TinyTag>
-                        <TinyTag v-else type="danger">已删除</TinyTag>
-                    </template>
-                </TinyGridColumn>
-                <TinyGridColumn title="操作" :width="120" align="center" fixed="right">
-                    <template #default="{ row }">
-                        <TinyDropdown title="操作" trigger="click" size="small" border visible-arrow @item-click="(data) => $Method.onAction(data.itemData.command, row)">
-                            <template #dropdown>
-                                <TinyDropdownMenu>
-                                    <TinyDropdownItem :item-data="{ command: 'upd' }">
-                                        <IconLucidePencil />
-                                        编辑
-                                    </TinyDropdownItem>
-                                    <TinyDropdownItem :item-data="{ command: 'menu' }">
-                                        <IconLucideSettings />
-                                        菜单权限
-                                    </TinyDropdownItem>
-                                    <TinyDropdownItem :item-data="{ command: 'api' }">
-                                        <IconLucideCode />
-                                        接口权限
-                                    </TinyDropdownItem>
-                                    <TinyDropdownItem :item-data="{ command: 'del' }" divided>
-                                        <IconLucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
-                                        删除
-                                    </TinyDropdownItem>
-                                </TinyDropdownMenu>
-                            </template>
-                        </TinyDropdown>
-                    </template>
-                </TinyGridColumn>
-            </TinyGrid>
+            <t-table :data="$Data.tableData" :columns="$Data.columns" header-cell-class-name="custom-table-cell-class" size="small" height="100%" row-key="id" bordered>
+                <template #state="{ row }">
+                    <t-tag v-if="row.state === 1" theme="success">正常</t-tag>
+                    <t-tag v-else-if="row.state === 2" theme="warning">禁用</t-tag>
+                    <t-tag v-else theme="danger">已删除</t-tag>
+                </template>
+                <template #operation="{ row }">
+                    <t-dropdown trigger="click" min-column-width="120" @click="(data) => $Method.onAction(data.value, row)">
+                        <t-button variant="text" size="small">操作</t-button>
+                        <t-dropdown-menu slot="dropdown">
+                            <t-dropdown-item value="upd">
+                                <IconLucidePencil />
+                                编辑
+                            </t-dropdown-item>
+                            <t-dropdown-item value="menu">
+                                <IconLucideSettings />
+                                菜单权限
+                            </t-dropdown-item>
+                            <t-dropdown-item value="api">
+                                <IconLucideCode />
+                                接口权限
+                            </t-dropdown-item>
+                            <t-dropdown-item value="del" :divider="true">
+                                <IconLucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                                删除
+                            </t-dropdown-item>
+                        </t-dropdown-menu>
+                    </t-dropdown>
+                </template>
+            </t-table>
         </div>
 
         <div class="main-page">
-            <TinyPager :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
+            <t-pagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
         </div>
 
         <!-- 编辑对话框组件 -->
@@ -77,7 +67,6 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Grid as TinyGrid, GridColumn as TinyGridColumn, Tag as TinyTag, Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, DropdownItem as TinyDropdownItem, Pager as TinyPager, Modal } from '@opentiny/vue';
 import IconLucidePlus from '~icons/lucide/plus';
 import IconLucideRotateCw from '~icons/lucide/rotate-cw';
 import IconLucidePencil from '~icons/lucide/pencil';
@@ -92,6 +81,15 @@ import { $Http } from '@/plugins/http';
 // 响应式数据
 const $Data = $ref({
     tableData: [],
+    columns: [
+        { colKey: 'index', title: '序号', width: 100, align: 'center' },
+        { colKey: 'name', title: '角色名称', width: 150 },
+        { colKey: 'code', title: '角色代码', width: 150 },
+        { colKey: 'description', title: '描述', minWidth: 150, ellipsis: true },
+        { colKey: 'sort', title: '排序', width: 80, align: 'center' },
+        { colKey: 'state', title: '状态', width: 100, align: 'center' },
+        { colKey: 'operation', title: '操作', width: 120, align: 'center', fixed: 'right' }
+    ],
     pagerConfig: {
         currentPage: 1,
         pageSize: 30,
@@ -122,7 +120,7 @@ const $Method = {
             $Data.pagerConfig.total = res.data.total || 0;
         } catch (error) {
             console.error('加载角色列表失败:', error);
-            Modal.message({
+            MessagePlugin.info({
                 message: '加载数据失败',
                 status: 'error'
             });
@@ -131,7 +129,7 @@ const $Method = {
 
     // 删除角色
     async apiRoleDel(row) {
-        Modal.confirm({
+        DialogPlugin.confirm({
             header: '确认删除',
             body: `确定要删除角色"${row.name}" 吗？`,
             status: 'warning'
@@ -139,14 +137,14 @@ const $Method = {
             try {
                 const res = await $Http('/addon/admin/role/del', { id: row.id });
                 if (res.code === 0) {
-                    Modal.message({ message: '删除成功', status: 'success' });
+                    MessagePlugin.info({ message: '删除成功', status: 'success' });
                     $Method.apiRoleList();
                 } else {
-                    Modal.message({ message: res.msg || '删除失败', status: 'error' });
+                    MessagePlugin.info({ message: res.msg || '删除失败', status: 'error' });
                 }
             } catch (error) {
                 console.error('删除失败:', error);
-                Modal.message({ message: '删除失败', status: 'error' });
+                MessagePlugin.info({ message: '删除失败', status: 'error' });
             }
         });
     },

package/views/user/index.vue

@@ -34,9 +34,9 @@
         <div class="table-wrapper">
             <t-table :data="$Data.userList" :columns="$Data.columns" row-key="id" :loading="$Data.loading" bordered stripe hover max-height="100%">
                 <template #state="{ row }">
-                    <TinyTag v-if="row.state === 1" type="success">正常</TinyTag>
-                    <TinyTag v-else-if="row.state === 2" type="warning">禁用</TinyTag>
-                    <TinyTag v-else type="danger">已删除</TinyTag>
+                    <t-tag v-if="row.state === 1" type="success">正常</t-tag>
+                    <t-tag v-else-if="row.state === 2" type="warning">禁用</t-tag>
+                    <t-tag v-else type="danger">已删除</t-tag>
                 </template>
 
                 <template #lastLoginTime="{ row }">
@@ -63,7 +63,7 @@
         <t-dialog v-model:visible="$Data.roleVisible" header="分配角色" width="600px" :on-confirm="$Method.handleRoleSubmit">
             <div class="role-dialog">
                 <div class="user-info">
-                    <TinyTag type="primary">{{ $Data.currentUser.username }}</TinyTag>
+                    <t-tag type="primary">{{ $Data.currentUser.username }}</t-tag>
                     <span class="user-email">{{ $Data.currentUser.email }}</span>
                 </div>
                 <t-divider />
@@ -74,7 +74,6 @@
 </template>
 
 <script setup>
-import { Tag as TinyTag, Modal } from '@opentiny/vue';
 import IconLucidePlus from '~icons/lucide/plus';
 import IconLucideSearch from '~icons/lucide/search';
 import IconLucideRotateCw from '~icons/lucide/rotate-cw';