@befly-addon/admin 1.0.31 → 1.0.32

package/views/dict/index.vue

@@ -2,61 +2,49 @@
     <div class="page-dict 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.dictList" header-cell-class-name="custom-table-cell-class" size="small" height="100%" seq-serial>
-                <TinyGridColumn type="index" title="序号" :width="60" />
-                <TinyGridColumn field="name" title="字典名称" />
-                <TinyGridColumn field="code" title="字典代码" :width="150" />
-                <TinyGridColumn field="value" title="字典值" :width="200" />
-                <TinyGridColumn field="pid" title="父级ID" :width="100" />
-                <TinyGridColumn field="sort" title="排序" :width="80" />
-                <TinyGridColumn field="description" title="描述" />
-                <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: '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.dictList" :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="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>
 
         <!-- 编辑对话框组件 -->
@@ -65,15 +53,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';
@@ -85,6 +64,17 @@ import { $Http } from '@/plugins/http';
 // 响应式数据
 const $Data = $ref({
     dictList: [],
+    columns: [
+        { 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' }
+    ],
     pagerConfig: {
         currentPage: 1,
         pageSize: 30,
@@ -114,7 +104,7 @@ const $Method = {
             $Data.pagerConfig.total = res.data.total || 0;
         } catch (error) {
             console.error('加载字典列表失败:', error);
-            Modal.message({
+            MessagePlugin.info({
                 message: '加载数据失败',
                 status: 'error'
             });
@@ -123,7 +113,7 @@ const $Method = {
 
     // 删除字典
     async apiDictDel(row) {
-        Modal.confirm({
+        DialogPlugin.confirm({
             header: '确认删除',
             body: `确定要删除字典"${row.name}" 吗？`,
             status: 'warning'
@@ -131,14 +121,14 @@ const $Method = {
             try {
                 const res = await $Http('/addon/admin/dict/del', { id: row.id });
                 if (res.code === 0) {
-                    Modal.message({ message: '删除成功', status: 'success' });
+                    MessagePlugin.info({ message: '删除成功', status: 'success' });
                     $Method.apiDictList();
                 } 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/index/components/addonList.vue

@@ -13,7 +13,7 @@
                     <div class="addon-info">
                         <div class="addon-title">
                             <span class="addon-name">{{ addon.title }}</span>
-                            <TinyTag type="success" size="small">{{ addon.version }}</TinyTag>
+                            <t-tag type="success" size="small">{{ addon.version }}</t-tag>
                         </div>
                         <div class="addon-desc">{{ addon.description }}</div>
                     </div>
@@ -25,7 +25,6 @@
 
 <script setup>
 import IconLucideBox from '~icons/lucide/box';
-import TinyTag from '@opentiny/vue-tag';
 import IconLucidePackage from '~icons/lucide/package';
 import { $Http } from '@/plugins/http';
 

package/views/index/components/operationLogs.vue

@@ -22,9 +22,9 @@
                         <span class="col-module">{{ log.module }}</span>
                         <span class="col-ip">{{ log.ip }}</span>
                         <span class="col-status">
-                            <TinyTag :type="log.status === 'success' ? 'success' : 'danger'" size="small">
+                            <t-tag :type="log.status === 'success' ? 'success' : 'danger'" size="small">
                                 {{ log.status === 'success' ? '成功' : '失败' }}
-                            </TinyTag>
+                            </t-tag>
                         </span>
                     </div>
                 </div>
@@ -34,7 +34,6 @@
 </template>
 
 <script setup>
-import TinyTag from '@opentiny/vue-tag';
 import IconLucideFileText from '~icons/lucide/file-text';
 
 // 组件内部数据

package/views/index/components/quickActions.vue

@@ -1,18 +1,17 @@
 <template>
     <div class="section-block">
         <div class="section-content">
-            <TinyButton type="primary" size="large" @click="handleClearCache">
+            <t-button type="primary" size="large" @click="handleClearCache">
                 <template #prefix>
                     <IconLucideRotateCw />
                 </template>
                 刷新缓存
-            </TinyButton>
+            </t-button>
         </div>
     </div>
 </template>
 
 <script setup>
-import TinyButton from '@opentiny/vue-button';
 import IconLucideRotateCw from '~icons/lucide/rotate-cw';
 const handleClearCache = () => {
     console.log('刷新缓存');

package/views/index/components/systemNotifications.vue

@@ -18,7 +18,7 @@
                         <span class="notification-title">{{ notification.title }}</span>
                         <span class="notification-time">{{ formatTime(notification.createdAt) }}</span>
                     </div>
-                    <TinyTag v-if="!notification.isRead" type="primary" size="small">新</TinyTag>
+                    <t-tag v-if="!notification.isRead" type="primary" size="small">新</t-tag>
                 </div>
             </div>
         </div>
@@ -30,7 +30,6 @@ import IconLucideBell from '~icons/lucide/bell';
 import IconLucideCheckCircle from '~icons/lucide/check-circle';
 import IconLucideAlertTriangle from '~icons/lucide/alert-triangle';
 import IconLucideXCircle from '~icons/lucide/x-circle';
-import TinyTag from '@opentiny/vue-tag';
 import IconLucideInfo from '~icons/lucide/info';
 import IconLucideCheck from '~icons/lucide/check';
 import IconLucideX from '~icons/lucide/x';

package/views/index/components/systemResources.vue

@@ -40,7 +40,6 @@
 
 <script setup>
 import IconLucideDisc from '~icons/lucide/disc';
-import TinyProgress from '@opentiny/vue-progress';
 import IconLucideCpu from '~icons/lucide/cpu';
 import IconLucideHardDrive from '~icons/lucide/hard-drive';
 import IconLucideActivity from '~icons/lucide/activity';

package/views/index/components/userInfo.vue

@@ -26,12 +26,12 @@
 
         <!-- 仅 dev 角色显示刷新缓存按钮 -->
         <div v-if="$Data.userInfo.roleCode === 'dev'" class="user-actions">
-            <TinyButton type="primary" size="mini" :loading="$Data.refreshing" @click="$Method.handleRefreshCache">
+            <t-button type="primary" size="mini" :loading="$Data.refreshing" @click="$Method.handleRefreshCache">
                 <template #icon>
                     <IconLucideRotateCw />
                 </template>
                 刷新缓存
-            </TinyButton>
+            </t-button>
         </div>
     </div>
 </template>
@@ -39,7 +39,6 @@
 <script setup>
 import IconLucidePhone from '~icons/lucide/phone';
 import IconLucideClock from '~icons/lucide/clock';
-import TinyButton from '@opentiny/vue-button';
 import IconLucideUser from '~icons/lucide/user';
 import IconLucideMail from '~icons/lucide/mail';
 import IconLucideRotateCw from '~icons/lucide/rotate-cw';

package/views/login/components/emailLoginForm.vue

@@ -1,36 +1,31 @@
 <template>
-    <TinyForm :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="90px" label-position="left" :show-message="false">
-        <TinyFormItem prop="account" label="账号">
-            <TinyInput v-model="$Data.formData.account" placeholder="请输入用户名或邮箱" size="large" clearable>
+    <t-form :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="90px" label-position="left" :show-message="false">
+        <t-form-item prop="account" label="账号">
+            <t-input v-model="$Data.formData.account" placeholder="请输入用户名或邮箱" size="large" clearable>
                 <template #prefix-icon>
                     <IconLucideUser />
                 </template>
-            </TinyInput>
-        </TinyFormItem>
+            </t-input>
+        </t-form-item>
 
-        <TinyFormItem prop="password" label="密码">
-            <TinyInput v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
+        <t-form-item prop="password" label="密码">
+            <t-input v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
                 <template #prefix-icon>
                     <IconLucideLock />
                 </template>
-            </TinyInput>
-        </TinyFormItem>
+            </t-input>
+        </t-form-item>
 
         <div class="form-footer">
             <a href="#" class="forgot-password">忘记密码？</a>
         </div>
 
-        <TinyButton theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.apiLogin"> 登录 </TinyButton>
-    </TinyForm>
+        <t-button theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.apiLogin"> 登录 </t-button>
+    </t-form>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
-import TinyButton from '@opentiny/vue-button';
-import TinyForm from '@opentiny/vue-form';
-import TinyFormItem from '@opentiny/vue-form-item';
-import TinyInput from '@opentiny/vue-input';
-import Modal from '@opentiny/vue-modal';
 import IconLucideUser from '~icons/lucide/user';
 import IconLucideLock from '~icons/lucide/lock';
 import { $Http } from '@/plugins/http';
@@ -80,7 +75,7 @@ const $Method = {
                 $Storage.local.set('userInfo', res.data.userInfo);
             }
 
-            Modal.message({
+            MessagePlugin.info({
                 message: '登录成功',
                 status: 'success'
             });

package/views/login/components/registerForm.vue

@@ -1,46 +1,42 @@
 <template>
-    <TinyForm :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="70px" label-position="left">
-        <TinyFormItem prop="username" label="用户名">
-            <TinyInput v-model="$Data.formData.username" placeholder="请输入用户名" size="large" clearable>
+    <t-form :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="70px" label-position="left">
+        <t-form-item prop="username" label="用户名">
+            <t-input v-model="$Data.formData.username" placeholder="请输入用户名" size="large" clearable>
                 <template #prefix-icon>
                     <IconLucideUser />
                 </template>
-            </TinyInput>
-        </TinyFormItem>
+            </t-input>
+        </t-form-item>
 
-        <TinyFormItem prop="email" label="邮箱">
-            <TinyInput v-model="$Data.formData.email" placeholder="请输入邮箱" size="large" clearable>
+        <t-form-item prop="email" label="邮箱">
+            <t-input v-model="$Data.formData.email" placeholder="请输入邮箱" size="large" clearable>
                 <template #prefix-icon>
                     <IconLucideMail />
                 </template>
-            </TinyInput>
-        </TinyFormItem>
+            </t-input>
+        </t-form-item>
 
-        <TinyFormItem prop="password" label="密码">
-            <TinyInput v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
+        <t-form-item prop="password" label="密码">
+            <t-input v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
                 <template #prefix-icon>
                     <IconLucideLock />
                 </template>
-            </TinyInput>
-        </TinyFormItem>
+            </t-input>
+        </t-form-item>
 
-        <TinyFormItem prop="nickname" label="昵称">
-            <TinyInput v-model="$Data.formData.nickname" placeholder="请输入昵称（选填）" size="large" clearable>
+        <t-form-item prop="nickname" label="昵称">
+            <t-input v-model="$Data.formData.nickname" placeholder="请输入昵称（选填）" size="large" clearable>
                 <template #prefix-icon>
                     <IconLucideSmile />
                 </template>
-            </TinyInput>
-        </TinyFormItem>
+            </t-input>
+        </t-form-item>
 
-        <TinyButton theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.handleSubmit"> 注册 </TinyButton>
-    </TinyForm>
+        <t-button theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.handleSubmit"> 注册 </t-button>
+    </t-form>
 </template>
 
 <script setup>
-import TinyButton from '@opentiny/vue-button';
-import TinyForm from '@opentiny/vue-form';
-import TinyFormItem from '@opentiny/vue-form-item';
-import TinyInput from '@opentiny/vue-input';
 import IconLucideUser from '~icons/lucide/user';
 import IconLucideMail from '~icons/lucide/mail';
 import IconLucideLock from '~icons/lucide/lock';

package/views/menu/components/edit.vue

@@ -1,43 +1,34 @@
 <template>
-    <TinyDialogBox v-model:visible="$Data.visible" :title="$Prop.actionType === 'add' ? '添加菜单' : '编辑菜单'" width="600px" :append-to-body="true" :show-footer="true" top="10vh">
-        <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="path">
-                <TinyInput v-model="$Data.formData.path" placeholder="请输入菜单路径，如：/user" />
-            </TinyFormItem>
-            <TinyFormItem label="图标" prop="icon">
-                <TinyInput v-model="$Data.formData.icon" placeholder="请输入图标名称，如：User" />
-            </TinyFormItem>
-            <TinyFormItem label="排序" prop="sort">
-                <TinyNumeric v-model="$Data.formData.sort" :min="0" :max="9999" />
-            </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 === 'add' ? '添加菜单' : '编辑菜单'" width="600px" :append-to-body="true" :show-footer="true" top="10vh">
+        <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="path">
+                <t-input v-model="$Data.formData.path" placeholder="请输入菜单路径，如：/user" />
+            </t-form-item>
+            <t-form-item label="图标" prop="icon">
+                <t-input v-model="$Data.formData.icon" placeholder="请输入图标名称，如：User" />
+            </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="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({
@@ -122,7 +113,7 @@ const $Method = {
 
             const res = await $Http($Prop.actionType === 'add' ? '/addon/admin/menuIns' : '/addon/admin/menuUpd', $Data.formData);
 
-            Modal.message({
+            MessagePlugin.info({
                 message: $Prop.actionType === 'add' ? '添加成功' : '编辑成功',
                 status: 'success'
             });