@befly-addon/admin 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@befly-addon/admin",
-    "version": "1.0.31",
+    "version": "1.0.33",
     "description": "Befly - 管理后台功能组件",
     "type": "module",
     "private": false,
@@ -39,35 +39,8 @@
         "url": "https://github.com/chenbimo/befly.git",
         "directory": "packages/addon-admin"
     },
-    "gitHead": "f279b3e03931a8f13ac1c559e545d18052ce2b87",
+    "gitHead": "e4130ff7b23ea4f0913969220c6374d550d2acc5",
     "dependencies": {
         "befly": "3.8.12"
-    },
-    "peerDependencies": {
-        "@opentiny/vue-button": "~3.27.0",
-        "@opentiny/vue-checkbox": "~3.27.0",
-        "@opentiny/vue-checkbox-group": "~3.27.0",
-        "@opentiny/vue-dialog-box": "~3.27.0",
-        "@opentiny/vue-dropdown": "~3.27.0",
-        "@opentiny/vue-dropdown-item": "~3.27.0",
-        "@opentiny/vue-dropdown-menu": "~3.27.0",
-        "@opentiny/vue-form": "~3.27.0",
-        "@opentiny/vue-form-item": "~3.27.0",
-        "@opentiny/vue-grid": "~3.27.0",
-        "@opentiny/vue-grid-column": "~3.27.0",
-        "@opentiny/vue-icon": "~3.27.0",
-        "@opentiny/vue-input": "~3.27.0",
-        "@opentiny/vue-modal": "~3.27.0",
-        "@opentiny/vue-numeric": "~3.27.0",
-        "@opentiny/vue-pager": "~3.27.0",
-        "@opentiny/vue-progress": "~3.27.0",
-        "@opentiny/vue-radio": "~3.27.0",
-        "@opentiny/vue-radio-group": "~3.27.0",
-        "@opentiny/vue-search": "~3.27.0",
-        "@opentiny/vue-select": "~3.27.0",
-        "@opentiny/vue-tag": "~3.27.0",
-        "@opentiny/vue-tree": "~3.27.0",
-        "vue": "^3.0.0",
-        "vue-router": "^4.0.0"
     }
 }

package/views/403/index.vue

@@ -5,17 +5,14 @@
             <h1 class="error-title">无权限访问</h1>
             <p class="error-description">抱歉，您没有访问该页面的权限</p>
             <div class="error-actions">
-                <TinyButton type="primary" @click="$Method.goHome">返回首页</TinyButton>
-                <TinyButton @click="$Method.goBack">返回上一页</TinyButton>
+                <t-button type="primary" @click="$Method.goHome">返回首页</t-button>
+                <t-button @click="$Method.goBack">返回上一页</t-button>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
-import TinyButton from '@opentiny/vue-button';
-
 const router = useRouter();
 
 const $Method = {

package/views/admin/components/edit.vue

@@ -1,47 +1,39 @@
 <template>
-    <TinyDialogBox 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">
-        <TinyForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
-            <TinyFormItem label="用户名" prop="username">
-                <TinyInput v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
-            </TinyFormItem>
-            <TinyFormItem label="邮箱" prop="email">
-                <TinyInput v-model="$Data.formData.email" placeholder="请输入邮箱" />
-            </TinyFormItem>
-            <TinyFormItem v-if="$Prop.actionType === 'add'" label="密码" prop="password">
-                <TinyInput v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
-            </TinyFormItem>
-            <TinyFormItem label="姓名" prop="name">
-                <TinyInput v-model="$Data.formData.name" placeholder="请输入姓名" />
-            </TinyFormItem>
-            <TinyFormItem label="昵称" prop="nickname">
-                <TinyInput v-model="$Data.formData.nickname" placeholder="请输入昵称" />
-            </TinyFormItem>
-            <TinyFormItem label="手机号" prop="phone">
-                <TinyInput v-model="$Data.formData.phone" placeholder="请输入手机号" />
-            </TinyFormItem>
-            <TinyFormItem v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
-                <TinyRadioGroup v-model="$Data.formData.state">
-                    <TinyRadio :label="1">正常</TinyRadio>
-                    <TinyRadio :label="2">禁用</TinyRadio>
-                </TinyRadioGroup>
-            </TinyFormItem>
-        </TinyForm>
+    <t-dialog 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">
+        <t-form :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
+            <t-form-item label="用户名" prop="username">
+                <t-input v-model="$Data.formData.username" placeholder="请输入用户名" :disabled="$Prop.actionType === 'upd'" />
+            </t-form-item>
+            <t-form-item label="邮箱" prop="email">
+                <t-input v-model="$Data.formData.email" placeholder="请输入邮箱" />
+            </t-form-item>
+            <t-form-item v-if="$Prop.actionType === 'add'" label="密码" prop="password">
+                <t-input v-model="$Data.formData.password" type="password" placeholder="请输入密码，至少6位" />
+            </t-form-item>
+            <t-form-item label="姓名" prop="name">
+                <t-input v-model="$Data.formData.name" placeholder="请输入姓名" />
+            </t-form-item>
+            <t-form-item label="昵称" prop="nickname">
+                <t-input v-model="$Data.formData.nickname" placeholder="请输入昵称" />
+            </t-form-item>
+            <t-form-item label="手机号" prop="phone">
+                <t-input v-model="$Data.formData.phone" placeholder="请输入手机号" />
+            </t-form-item>
+            <t-form-item v-if="$Prop.actionType === 'upd'" label="状态" prop="state">
+                <t-radio-group v-model="$Data.formData.state">
+                    <t-radio :label="1">正常</t-radio>
+                    <t-radio :label="2">禁用</t-radio>
+                </t-radio-group>
+            </t-form-item>
+        </t-form>
         <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 TinyButton from '@opentiny/vue-button';
-import TinyDialogBox from '@opentiny/vue-dialog-box';
-import TinyForm from '@opentiny/vue-form';
-import TinyFormItem from '@opentiny/vue-form-item';
-import TinyInput from '@opentiny/vue-input';
-import TinyRadio from '@opentiny/vue-radio';
-import TinyRadioGroup from '@opentiny/vue-radio-group';
-import Modal from '@opentiny/vue-modal';
 import { $Http } from '@/plugins/http';
 
 const $Prop = defineProps({
@@ -133,7 +125,7 @@ const $Method = {
 
             const res = await $Http($Prop.actionType === 'upd' ? '/addon/admin/admin/upd' : '/addon/admin/admin/ins', $Data.formData);
 
-            Modal.message({
+            MessagePlugin.info({
                 message: $Prop.actionType === 'upd' ? '编辑成功' : '添加成功',
                 status: 'success'
             });
@@ -141,7 +133,7 @@ const $Method = {
             $Method.onClose();
         } catch (error) {
             console.error('提交失败:', error);
-            Modal.message({
+            MessagePlugin.info({
                 message: '提交失败',
                 status: 'error'
             });

package/views/admin/components/role.vue

@@ -1,26 +1,21 @@
 <template>
-    <TinyDialogBox v-model:visible="$Data.visible" title="分配角色" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="20vh" @close="$Method.onClose">
+    <t-dialog v-model:visible="$Data.visible" title="分配角色" width="600px" :append-to-body="true" :show-footer="true" :esc-closable="false" top="20vh" @close="$Method.onClose">
         <div class="role-dialog">
             <div class="user-info">
-                <TinyTag type="info">{{ $Prop.rowData.username }}</TinyTag>
+                <t-tag type="info">{{ $Prop.rowData.username }}</t-tag>
                 <span class="user-email">{{ $Prop.rowData.email }}</span>
             </div>
             <tiny-divider />
-            <TinySelect v-model="$Data.checkedRoleCode" :options="$Data.roleOptions" placeholder="请选择角色" />
+            <t-select v-model="$Data.checkedRoleCode" :options="$Data.roleOptions" placeholder="请选择角色" />
         </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 TinyButton from '@opentiny/vue-button';
-import TinyDialogBox from '@opentiny/vue-dialog-box';
-import TinySelect from '@opentiny/vue-select';
-import TinyTag from '@opentiny/vue-tag';
-import Modal from '@opentiny/vue-modal';
 import { $Http } from '@/plugins/http';
 
 const $Prop = defineProps({
@@ -78,7 +73,7 @@ const $Method = {
                 }));
         } catch (error) {
             console.error('加载角色列表失败:', error);
-            Modal.message({ message: '加载角色列表失败', status: 'error' });
+            MessagePlugin.info({ message: '加载角色列表失败', status: 'error' });
         }
     },
 
@@ -99,7 +94,7 @@ const $Method = {
     // 提交角色分配
     async onSubmit() {
         if (!$Data.checkedRoleCode) {
-            Modal.message({ message: '请选择角色', status: 'warning' });
+            MessagePlugin.info({ message: '请选择角色', status: 'warning' });
             return;
         }
 
@@ -110,15 +105,15 @@ const $Method = {
             });
 
             if (res.code === 0) {
-                Modal.message({ message: '角色分配成功', status: 'success' });
+                MessagePlugin.info({ message: '角色分配成功', status: 'success' });
                 $Method.onClose();
                 $Emit('success');
             } 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/admin/index.vue

@@ -2,71 +2,61 @@
     <div class="page-admin 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 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%" seq-serial>
-                <TinyGridColumn type="index" title="序号" :width="60" />
-                <TinyGridColumn field="username" title="用户名" />
-                <TinyGridColumn field="email" title="邮箱" :width="200" />
-                <TinyGridColumn field="nickname" title="昵称" :width="150" />
-                <TinyGridColumn field="roleCode" title="角色" :width="120" />
-                <TinyGridColumn field="state" title="状态" :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="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: 'role' }">
-                                        <IconLucideUser />
-                                        分配角色
-                                    </TinyDropdownItem>
-                                    <TinyDropdownItem :item-data="{ command: 'upd' }">
-                                        <IconLucidePencil />
-                                        编辑
-                                    </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">
+                <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="role">
+                                <IconLucideUser />
+                                分配角色
+                            </t-dropdown-item>
+                            <t-dropdown-item value="upd">
+                                <IconLucidePencil />
+                                编辑
+                            </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>
 
         <!-- 编辑对话框组件 -->
@@ -78,21 +68,6 @@
 </template>
 
 <script setup>
-import TinyButton from '@opentiny/vue-button';
-import TinyGrid from '@opentiny/vue-grid';
-import TinyGridColumn from '@opentiny/vue-grid-column';
-import TinyTag from '@opentiny/vue-tag';
-import TinyDropdown from '@opentiny/vue-dropdown';
-import TinyDropdownMenu from '@opentiny/vue-dropdown-menu';
-import TinyDropdownItem from '@opentiny/vue-dropdown-item';
-import TinyPager from '@opentiny/vue-pager';
-import Modal from '@opentiny/vue-modal';
-import IconLucidePlus from '~icons/lucide/plus';
-import IconLucideRotateCw from '~icons/lucide/rotate-cw';
-import IconLucidePencil from '~icons/lucide/pencil';
-import IconLucideUser from '~icons/lucide/user';
-import IconLucideTrash2 from '~icons/lucide/trash-2';
-
 import EditDialog from './components/edit.vue';
 import RoleDialog from './components/role.vue';
 import { $Http } from '@/plugins/http';
@@ -100,6 +75,15 @@ import { $Http } from '@/plugins/http';
 // 响应式数据
 const $Data = $ref({
     tableData: [],
+    columns: [
+        { colKey: 'index', title: '序号', width: 60, align: 'center' },
+        { colKey: 'username', title: '用户名' },
+        { colKey: 'email', title: '邮箱', width: 200 },
+        { colKey: 'nickname', title: '昵称', width: 150 },
+        { colKey: 'roleCode', title: '角色', width: 120 },
+        { colKey: 'state', title: '状态', width: 100 },
+        { colKey: 'operation', title: '操作', width: 120, align: 'right' }
+    ],
     pagerConfig: {
         currentPage: 1,
         pageSize: 30,
@@ -130,7 +114,7 @@ const $Method = {
             $Data.pagerConfig.total = res.data.total || 0;
         } catch (error) {
             console.error('加载管理员列表失败:', error);
-            Modal.message({
+            MessagePlugin.info({
                 message: '加载数据失败',
                 status: 'error'
             });
@@ -139,7 +123,7 @@ const $Method = {
 
     // 删除管理员
     async apiAdminDel(row) {
-        Modal.confirm({
+        DialogPlugin.confirm({
             header: '确认删除',
             body: `确定要删除管理员"${row.username}" 吗？`,
             status: 'warning'
@@ -147,14 +131,14 @@ const $Method = {
             try {
                 const res = await $Http('/addon/admin/admin/del', { id: row.id });
                 if (res.code === 0) {
-                    Modal.message({ message: '删除成功', status: 'success' });
+                    MessagePlugin.info({ message: '删除成功', status: 'success' });
                     $Method.apiAdminList();
                 } 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/dict/components/edit.vue

@@ -1,49 +1,40 @@
 <template>
-    <TinyDialogBox 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">
-        <TinyForm :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
-            <TinyFormItem label="字典名称" prop="name">
-                <TinyInput v-model="$Data.formData.name" placeholder="请输入字典名称" />
-            </TinyFormItem>
-            <TinyFormItem label="字典代码" prop="code">
-                <TinyInput v-model="$Data.formData.code" placeholder="请输入字典代码，如：gender" />
-            </TinyFormItem>
-            <TinyFormItem label="字典值" prop="value">
-                <TinyInput v-model="$Data.formData.value" placeholder="请输入字典值" />
-            </TinyFormItem>
-            <TinyFormItem label="父级ID" prop="pid">
-                <TinyNumeric v-model="$Data.formData.pid" :min="0" :max="999999999999999" />
-            </TinyFormItem>
-            <TinyFormItem label="排序" prop="sort">
-                <TinyNumeric v-model="$Data.formData.sort" :min="0" :max="9999" />
-            </TinyFormItem>
-            <TinyFormItem label="描述" prop="description">
-                <TinyInput v-model="$Data.formData.description" type="textarea" placeholder="请输入描述" :rows="3" />
-            </TinyFormItem>
-            <TinyFormItem label="状态" prop="state">
-                <TinyRadioGroup v-model="$Data.formData.state">
-                    <TinyRadio :label="1">正常</TinyRadio>
-                    <TinyRadio :label="2">禁用</TinyRadio>
-                </TinyRadioGroup>
-            </TinyFormItem>
-        </TinyForm>
+    <t-dialog 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">
+        <t-form :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
+            <t-form-item label="字典名称" prop="name">
+                <t-input v-model="$Data.formData.name" placeholder="请输入字典名称" />
+            </t-form-item>
+            <t-form-item label="字典代码" prop="code">
+                <t-input v-model="$Data.formData.code" placeholder="请输入字典代码，如：gender" />
+            </t-form-item>
+            <t-form-item label="字典值" prop="value">
+                <t-input v-model="$Data.formData.value" placeholder="请输入字典值" />
+            </t-form-item>
+            <t-form-item label="父级ID" prop="pid">
+                <t-input-number v-model="$Data.formData.pid" :min="0" :max="999999999999999" />
+            </t-form-item>
+            <t-form-item label="排序" prop="sort">
+                <t-input-number v-model="$Data.formData.sort" :min="0" :max="9999" />
+            </t-form-item>
+            <t-form-item label="描述" prop="description">
+                <t-input v-model="$Data.formData.description" type="textarea" placeholder="请输入描述" :rows="3" />
+            </t-form-item>
+            <t-form-item label="状态" prop="state">
+                <t-radio-group v-model="$Data.formData.state">
+                    <t-radio :label="1">正常</t-radio>
+                    <t-radio :label="2">禁用</t-radio>
+                </t-radio-group>
+            </t-form-item>
+        </t-form>
         <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 { watch } from 'vue';
-import TinyButton from '@opentiny/vue-button';
-import TinyDialogBox from '@opentiny/vue-dialog-box';
-import TinyForm from '@opentiny/vue-form';
-import TinyFormItem from '@opentiny/vue-form-item';
-import TinyInput from '@opentiny/vue-input';
-import TinyNumeric from '@opentiny/vue-numeric';
-import TinyRadio from '@opentiny/vue-radio';
-import TinyRadioGroup from '@opentiny/vue-radio-group';
-import Modal from '@opentiny/vue-modal';
 import { $Http } from '@/plugins/http';
 
 const $Prop = defineProps({
@@ -137,7 +128,7 @@ const $Method = {
 
             const res = await $Http($Prop.actionType === 'add' ? '/addon/admin/dictIns' : '/addon/admin/dictUpd', $Data.formData);
 
-            Modal.message({
+            MessagePlugin.info({
                 message: $Prop.actionType === 'add' ? '添加成功' : '编辑成功',
                 status: 'success'
             });