@befly-addon/admin 1.0.19 → 1.0.21

package/views/index/components/quickActions.vue

@@ -1,17 +1,20 @@
 <template>
     <div class="section-block">
         <div class="section-content">
-            <tiny-button type="primary" size="large" @click="handleClearCache">
+            <TinyButton type="primary" size="large" @click="handleClearCache">
                 <template #prefix>
-                    <i-lucide:rotate-cw style="width: 18px; height: 18px" />
+                    <IconLucideRotateCw />
                 </template>
                 刷新缓存
-            </tiny-button>
+            </TinyButton>
         </div>
     </div>
 </template>
 
 <script setup>
+import { useRouter, useRoute } from 'vue-router';
+import { Button as TinyButton } from '@opentiny/vue';
+import IconLucideRotateCw from '~icons/lucide/rotate-cw';
 const handleClearCache = () => {
     console.log('刷新缓存');
 };

package/views/index/components/serviceStatus.vue

@@ -1,19 +1,19 @@
 <template>
     <div class="section-block">
         <div class="section-header flex items-center gap-2">
-            <i-lucide:check-circle style="width: 20px; height: 20px" />
+            <IconLucideCheckCircle />
             <h2>服务状态</h2>
         </div>
         <div class="section-content">
             <div class="config-grid">
                 <div v-for="service in services" :key="service.name" class="config-card" :class="`config-${service.status}`">
                     <div class="config-icon">
-                        <i-lucide:database v-if="service.name === '数据库'" style="width: 20px; height: 20px" />
-                        <i-lucide:zap v-else-if="service.name === 'Redis'" style="width: 20px; height: 20px" />
-                        <i-lucide:hard-drive v-else-if="service.name === '文件系统'" style="width: 20px; height: 20px" />
-                        <i-lucide:mail v-else-if="service.name === '邮件服务'" style="width: 20px; height: 20px" />
-                        <i-lucide:cloud v-else-if="service.name === 'OSS存储'" style="width: 20px; height: 20px" />
-                        <i-lucide:circle v-else style="width: 20px; height: 20px" />
+                        <IconLucideDatabase v-if="service.name === '数据库'" style="width: 20px; height: 20px" />
+                        <IconLucideZap v-else-if="service.name === 'Redis'" style="width: 20px; height: 20px" />
+                        <IconLucideHardDrive v-else-if="service.name === '文件系统'" style="width: 20px; height: 20px" />
+                        <IconLucideMail v-else-if="service.name === '邮件服务'" style="width: 20px; height: 20px" />
+                        <IconLucideCloud v-else-if="service.name === 'OSS存储'" style="width: 20px; height: 20px" />
+                        <IconLucideCircle v-else style="width: 20px; height: 20px" />
                     </div>
                     <div class="config-info">
                         <div class="config-name">{{ service.name }}</div>
@@ -23,10 +23,10 @@
                         </div>
                     </div>
                     <div class="config-badge">
-                        <i-lucide:check-circle v-if="service.status === 'running'" style="width: 32px; height: 32px" />
-                        <i-lucide:x-circle v-else-if="service.status === 'stopped'" style="width: 32px; height: 32px" />
-                        <i-lucide:alert-circle v-else-if="service.status === 'unconfigured'" style="width: 32px; height: 32px" />
-                        <i-lucide:circle v-else style="width: 32px; height: 32px" />
+                        <IconLucideCheckCircle v-if="service.status === 'running'" style="width: 32px; height: 32px" />
+                        <IconLucideXCircle v-else-if="service.status === 'stopped'" style="width: 32px; height: 32px" />
+                        <IconLucideAlertCircle v-else-if="service.status === 'unconfigured'" style="width: 32px; height: 32px" />
+                        <IconLucideCircle v-else style="width: 32px; height: 32px" />
                     </div>
                 </div>
             </div>
@@ -35,7 +35,17 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import IconLucideCheckCircle from '~icons/lucide/check-circle';
+import IconLucideZap from '~icons/lucide/zap';
+import IconLucideCloud from '~icons/lucide/cloud';
+import IconLucideCircle from '~icons/lucide/circle';
+import IconLucideXCircle from '~icons/lucide/x-circle';
+import IconLucideCheck from '~icons/lucide/check';
+import IconLucideX from '~icons/lucide/x';
+import IconLucideAlertCircle from '~icons/lucide/alert-circle';
+import IconLucideDatabase from '~icons/lucide/database';
+import IconLucideMail from '~icons/lucide/mail';
+import IconLucideHardDrive from '~icons/lucide/hard-drive';
 
 // 组件内部数据
 const services = $ref([]);

package/views/index/components/systemNotifications.vue

@@ -1,24 +1,24 @@
 <template>
     <div class="section-block">
         <div class="section-header flex items-center gap-2">
-            <i-lucide:bell style="width: 20px; height: 20px" />
+            <IconLucideBell />
             <h2>系统通知</h2>
         </div>
         <div class="section-content">
             <div class="notification-compact-list">
                 <div v-for="notification in notifications" :key="notification.id" class="notification-compact-item">
                     <div class="notification-icon" :class="`type-${notification.type}`">
-                        <i-lucide:info v-if="notification.type === 'info'" />
-                        <i-lucide:check-circle v-else-if="notification.type === 'success'" />
-                        <i-lucide:alert-triangle v-else-if="notification.type === 'warning'" />
-                        <i-lucide:x-circle v-else-if="notification.type === 'error'" />
-                        <i-lucide:bell v-else />
+                        <IconLucideInfo v-if="notification.type === 'info'" />
+                        <IconLucideCheckCircle v-else-if="notification.type === 'success'" />
+                        <IconLucideAlertTriangle v-else-if="notification.type === 'warning'" />
+                        <IconLucideXCircle v-else-if="notification.type === 'error'" />
+                        <IconLucideBell v-else />
                     </div>
                     <div class="notification-content">
                         <span class="notification-title">{{ notification.title }}</span>
                         <span class="notification-time">{{ formatTime(notification.createdAt) }}</span>
                     </div>
-                    <tiny-tag v-if="!notification.isRead" type="primary" size="small">新</tiny-tag>
+                    <TinyTag v-if="!notification.isRead" type="primary" size="small">新</TinyTag>
                 </div>
             </div>
         </div>
@@ -26,7 +26,14 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+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 { Tag as TinyTag } from '@opentiny/vue';
+import IconLucideInfo from '~icons/lucide/info';
+import IconLucideCheck from '~icons/lucide/check';
+import IconLucideX from '~icons/lucide/x';
 
 // 组件内部数据
 const notifications = $ref([

package/views/index/components/systemOverview.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="section-block">
         <div class="section-header flex items-center gap-2">
-            <i-lucide:info style="width: 20px; height: 20px" />
+            <IconLucideInfo />
             <h2>系统概览</h2>
         </div>
         <div class="section-content">
@@ -10,21 +10,21 @@
                     <div class="info-block">
                         <div class="stats-grid">
                             <div class="stat-box stat-primary">
-                                <i-lucide:menu style="width: 24px; height: 24px" />
+                                <IconLucideMenu />
                                 <div class="stat-content">
                                     <div class="stat-value">{{ permissionStats.menuCount }}</div>
                                     <div class="stat-label">菜单总数</div>
                                 </div>
                             </div>
                             <div class="stat-box stat-success">
-                                <i-lucide:webhook style="width: 24px; height: 24px" />
+                                <IconLucideWebhook />
                                 <div class="stat-content">
                                     <div class="stat-value">{{ permissionStats.apiCount }}</div>
                                     <div class="stat-label">接口总数</div>
                                 </div>
                             </div>
                             <div class="stat-box stat-warning">
-                                <i-lucide:users style="width: 24px; height: 24px" />
+                                <IconLucideUsers />
                                 <div class="stat-content">
                                     <div class="stat-value">{{ permissionStats.roleCount }}</div>
                                     <div class="stat-label">角色总数</div>
@@ -39,7 +39,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import IconLucideWebhook from '~icons/lucide/webhook';
+import IconLucideUsers from '~icons/lucide/users';
+import IconLucideUser from '~icons/lucide/user';
+import IconLucideMenu from '~icons/lucide/menu';
+import IconLucideInfo from '~icons/lucide/info';
 
 // 组件内部数据
 const permissionStats = $ref({

package/views/index/components/systemResources.vue

@@ -1,37 +1,37 @@
 <template>
     <div class="section-block">
         <div class="section-header flex items-center gap-2">
-            <i-lucide:activity style="width: 20px; height: 20px" />
+            <IconLucideActivity />
             <h2>系统资源</h2>
         </div>
         <div class="section-content">
             <div class="resource-compact-list">
                 <div class="resource-compact-item">
                     <div class="resource-compact-header">
-                        <i-lucide:cpu />
+                        <IconLucideCpu />
                         <span class="resource-label">CPU</span>
                         <span class="resource-value">{{ systemResources.cpu.usage }}%</span>
                         <span class="resource-desc">{{ systemResources.cpu.cores }}核心</span>
                     </div>
-                    <tiny-progress :percentage="systemResources.cpu.usage" :status="getProgressColor(systemResources.cpu.usage)" />
+                    <TinyProgress :percentage="systemResources.cpu.usage" :status="getProgressColor(systemResources.cpu.usage)" />
                 </div>
                 <div class="resource-compact-item">
                     <div class="resource-compact-header">
-                        <i-lucide:hard-drive />
+                        <IconLucideHardDrive />
                         <span class="resource-label">内存</span>
                         <span class="resource-value">{{ systemResources.memory.percentage }}%</span>
                         <span class="resource-desc">{{ systemResources.memory.used }}GB / {{ systemResources.memory.total }}GB</span>
                     </div>
-                    <tiny-progress :percentage="systemResources.memory.percentage" :status="getProgressColor(systemResources.memory.percentage)" />
+                    <TinyProgress :percentage="systemResources.memory.percentage" :status="getProgressColor(systemResources.memory.percentage)" />
                 </div>
                 <div class="resource-compact-item">
                     <div class="resource-compact-header">
-                        <i-lucide:disc />
+                        <IconLucideDisc />
                         <span class="resource-label">磁盘</span>
                         <span class="resource-value">{{ systemResources.disk.percentage }}%</span>
                         <span class="resource-desc">{{ systemResources.disk.used }}GB / {{ systemResources.disk.total }}GB</span>
                     </div>
-                    <tiny-progress :percentage="systemResources.disk.percentage" :status="getProgressColor(systemResources.disk.percentage)" />
+                    <TinyProgress :percentage="systemResources.disk.percentage" :status="getProgressColor(systemResources.disk.percentage)" />
                 </div>
             </div>
         </div>
@@ -39,7 +39,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import IconLucideDisc from '~icons/lucide/disc';
+import { Progress as TinyProgress } from '@opentiny/vue';
+import IconLucideCpu from '~icons/lucide/cpu';
+import IconLucideHardDrive from '~icons/lucide/hard-drive';
+import IconLucideActivity from '~icons/lucide/activity';
 
 // 组件内部数据
 const systemResources = $ref({

package/views/index/components/userInfo.vue

@@ -2,7 +2,7 @@
     <div class="section-block user-info-card">
         <div class="user-header">
             <div class="user-avatar">
-                <i-lucide:user style="width: 32px; height: 32px" />
+                <IconLucideUser />
             </div>
             <div class="user-basic">
                 <div class="user-name">{{ $Data.userInfo.nickname || $Data.userInfo.name || $Data.userInfo.username || '未设置' }}</div>
@@ -11,33 +11,38 @@
         </div>
         <div class="user-details">
             <div class="detail-item">
-                <i-lucide:mail style="width: 14px; height: 14px" />
+                <IconLucideMail />
                 <span>{{ $Data.userInfo.email || '未设置' }}</span>
             </div>
             <div v-if="$Data.userInfo.phone" class="detail-item">
-                <i-lucide:phone style="width: 14px; height: 14px" />
+                <IconLucidePhone />
                 <span>{{ $Data.userInfo.phone }}</span>
             </div>
             <div v-if="$Data.userInfo.lastLoginTime" class="detail-item">
-                <i-lucide:clock style="width: 14px; height: 14px" />
+                <IconLucideClock />
                 <span>{{ $Method.formatTime($Data.userInfo.lastLoginTime) }}</span>
             </div>
         </div>
 
         <!-- 仅 dev 角色显示刷新缓存按钮 -->
         <div v-if="$Data.userInfo.roleCode === 'dev'" class="user-actions">
-            <tiny-button type="primary" size="mini" :loading="$Data.refreshing" @click="$Method.handleRefreshCache">
+            <TinyButton type="primary" size="mini" :loading="$Data.refreshing" @click="$Method.handleRefreshCache">
                 <template #icon>
-                    <i-lucide:rotate-cw style="width: 14px; height: 14px" />
+                    <IconLucideRotateCw />
                 </template>
                 刷新缓存
-            </tiny-button>
+            </TinyButton>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import IconLucidePhone from '~icons/lucide/phone';
+import IconLucideClock from '~icons/lucide/clock';
+import { Button as TinyButton } from '@opentiny/vue';
+import IconLucideUser from '~icons/lucide/user';
+import IconLucideMail from '~icons/lucide/mail';
+import IconLucideRotateCw from '~icons/lucide/rotate-cw';
 
 // 响应式数据
 const $Data = $ref({

package/views/login/components/emailLoginForm.vue

@@ -1,33 +1,35 @@
 <template>
-    <tiny-form :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="90px" label-position="left" :show-message="false">
-        <tiny-form-item prop="account" label="账号">
-            <tiny-input v-model="$Data.formData.account" placeholder="请输入用户名或邮箱" size="large" clearable>
+    <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>
                 <template #prefix-icon>
-                    <i-lucide:user style="width: 18px; height: 18px" />
+                    <IconLucideUser />
                 </template>
-            </tiny-input>
-        </tiny-form-item>
+            </TinyInput>
+        </TinyFormItem>
 
-        <tiny-form-item prop="password" label="密码">
-            <tiny-input v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
+        <TinyFormItem prop="password" label="密码">
+            <TinyInput v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
                 <template #prefix-icon>
-                    <i-lucide:lock style="width: 18px; height: 18px" />
+                    <IconLucideLock />
                 </template>
-            </tiny-input>
-        </tiny-form-item>
+            </TinyInput>
+        </TinyFormItem>
 
         <div class="form-footer">
             <a href="#" class="forgot-password">忘记密码？</a>
         </div>
 
-        <tiny-button theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.apiLogin"> 登录 </tiny-button>
-    </tiny-form>
+        <TinyButton theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.apiLogin"> 登录 </TinyButton>
+    </TinyForm>
 </template>
 
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue';
-import { useRouter } from 'vue-router';
-import { Modal } from '@opentiny/vue';
+import { shallowRef } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { Button as TinyButton, Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Modal } from '@opentiny/vue';
+import IconLucideUser from '~icons/lucide/user';
+import IconLucideLock from '~icons/lucide/lock';
 
 const router = useRouter();
 

package/views/login/components/registerForm.vue

@@ -1,43 +1,48 @@
 <template>
-    <tiny-form :model="$Data.formData" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)" class="login-form" label-width="70px" label-position="left">
-        <tiny-form-item prop="username" label="用户名">
-            <tiny-input v-model="$Data.formData.username" placeholder="请输入用户名" size="large" clearable>
+    <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>
                 <template #prefix-icon>
-                    <i-lucide:user style="width: 18px; height: 18px" />
+                    <IconLucideUser />
                 </template>
-            </tiny-input>
-        </tiny-form-item>
+            </TinyInput>
+        </TinyFormItem>
 
-        <tiny-form-item prop="email" label="邮箱">
-            <tiny-input v-model="$Data.formData.email" placeholder="请输入邮箱" size="large" clearable>
+        <TinyFormItem prop="email" label="邮箱">
+            <TinyInput v-model="$Data.formData.email" placeholder="请输入邮箱" size="large" clearable>
                 <template #prefix-icon>
-                    <i-lucide:mail style="width: 18px; height: 18px" />
+                    <IconLucideMail />
                 </template>
-            </tiny-input>
-        </tiny-form-item>
+            </TinyInput>
+        </TinyFormItem>
 
-        <tiny-form-item prop="password" label="密码">
-            <tiny-input v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
+        <TinyFormItem prop="password" label="密码">
+            <TinyInput v-model="$Data.formData.password" type="password" placeholder="请输入密码" size="large" clearable>
                 <template #prefix-icon>
-                    <i-lucide:lock style="width: 18px; height: 18px" />
+                    <IconLucideLock />
                 </template>
-            </tiny-input>
-        </tiny-form-item>
+            </TinyInput>
+        </TinyFormItem>
 
-        <tiny-form-item prop="nickname" label="昵称">
-            <tiny-input v-model="$Data.formData.nickname" placeholder="请输入昵称（选填）" size="large" clearable>
+        <TinyFormItem prop="nickname" label="昵称">
+            <TinyInput v-model="$Data.formData.nickname" placeholder="请输入昵称（选填）" size="large" clearable>
                 <template #prefix-icon>
-                    <i-lucide:smile style="width: 18px; height: 18px" />
+                    <IconLucideSmile />
                 </template>
-            </tiny-input>
-        </tiny-form-item>
+            </TinyInput>
+        </TinyFormItem>
 
-        <tiny-button theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.handleSubmit"> 注册 </tiny-button>
-    </tiny-form>
+        <TinyButton theme="primary" class="auth-btn" size="large" :loading="$Data.loading" @click="$Method.handleSubmit"> 注册 </TinyButton>
+    </TinyForm>
 </template>
 
 <script setup>
-import { ref, shallowRef } from 'vue';
+import { shallowRef } from 'vue';
+import { Button as TinyButton, Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput } from '@opentiny/vue';
+import IconLucideUser from '~icons/lucide/user';
+import IconLucideMail from '~icons/lucide/mail';
+import IconLucideLock from '~icons/lucide/lock';
+import IconLucideSmile from '~icons/lucide/smile';
 
 const emit = defineEmits(['success']);
 

package/views/login/index_1.vue

@@ -26,8 +26,6 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-
 import WelcomePanel from './components/welcomePanel.vue';
 import EmailLoginForm from './components/emailLoginForm.vue';
 import RegisterForm from './components/registerForm.vue';

package/views/menu/components/edit.vue

@@ -1,35 +1,35 @@
 <template>
-    <tiny-dialog-box v-model:visible="$Data.visible" :title="$Prop.actionType === 'add' ? '添加菜单' : '编辑菜单'" width="600px" :append-to-body="true" :show-footer="true" top="10vh">
-        <tiny-form :model="$Data.formData" label-width="120px" label-position="left" :rules="$Data2.formRules" :ref="(el) => ($From.form = el)">
-            <tiny-form-item label="菜单名称" prop="name">
-                <tiny-input v-model="$Data.formData.name" placeholder="请输入菜单名称" />
-            </tiny-form-item>
-            <tiny-form-item label="菜单路径" prop="path">
-                <tiny-input v-model="$Data.formData.path" placeholder="请输入菜单路径，如：/user" />
-            </tiny-form-item>
-            <tiny-form-item label="图标" prop="icon">
-                <tiny-input v-model="$Data.formData.icon" placeholder="请输入图标名称，如：User" />
-            </tiny-form-item>
-            <tiny-form-item label="排序" prop="sort">
-                <tiny-numeric v-model="$Data.formData.sort" :min="0" :max="9999" />
-            </tiny-form-item>
-            <tiny-form-item label="状态" prop="state">
-                <tiny-radio-group v-model="$Data.formData.state">
-                    <tiny-radio :label="1">正常</tiny-radio>
-                    <tiny-radio :label="2">禁用</tiny-radio>
-                </tiny-radio-group>
-            </tiny-form-item>
-        </tiny-form>
+    <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>
         <template #footer>
-            <tiny-button @click="$Method.onClose">取消</tiny-button>
-            <tiny-button type="primary" @click="$Method.onSubmit">确定</tiny-button>
+            <TinyButton @click="$Method.onClose">取消</TinyButton>
+            <TinyButton type="primary" @click="$Method.onSubmit">确定</TinyButton>
         </template>
-    </tiny-dialog-box>
+    </TinyDialogBox>
 </template>
 
 <script setup>
-import { ref, watch, shallowRef } from 'vue';
-import { Modal } from '@opentiny/vue';
+import { watch, shallowRef } from 'vue';
+import { Button as TinyButton, DialogBox as TinyDialogBox, Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Numeric as TinyNumeric, Radio as TinyRadio, RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue';
 
 const $Prop = defineProps({
     modelValue: {

package/views/menu/index.vue

@@ -2,64 +2,64 @@
     <div class="page-menu page-table">
         <div class="main-tool">
             <div class="left">
-                <tiny-button type="primary" @click="$Method.onAction('add', {})">
+                <TinyButton type="primary" @click="$Method.onAction('add', {})">
                     <template #icon>
-                        <i-lucide:plus />
+                        <IconLucidePlus />
                     </template>
                     添加菜单
-                </tiny-button>
+                </TinyButton>
             </div>
             <div class="right">
-                <tiny-button @click="$Method.handleRefresh">
+                <TinyButton @click="$Method.handleRefresh">
                     <template #icon>
-                        <i-lucide:rotate-cw />
+                        <IconLucideRotateCw />
                     </template>
                     刷新
-                </tiny-button>
+                </TinyButton>
             </div>
         </div>
         <div class="main-table">
-            <tiny-grid :data="$Data.menuList" header-cell-class-name="custom-table-cell-class" size="small" height="100%" seq-serial>
-                <tiny-grid-column type="index" title="序号" :width="60" />
-                <tiny-grid-column field="name" title="菜单名称" />
-                <tiny-grid-column field="path" title="路径" :width="200" />
-                <tiny-grid-column field="icon" title="图标" :width="100">
+            <TinyGrid :data="$Data.menuList" 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="path" title="路径" :width="200" />
+                <TinyGridColumn field="icon" title="图标" :width="100">
                     <template #default="{ row }">
-                        <i-lucide:square v-if="row.icon" />
+                        <IconLucideSquare v-if="row.icon" />
                         <span v-else>-</span>
                     </template>
-                </tiny-grid-column>
-                <tiny-grid-column field="sort" title="排序" :width="80" />
-                <tiny-grid-column field="state" title="状态" :width="100">
+                </TinyGridColumn>
+                <TinyGridColumn field="sort" title="排序" :width="80" />
+                <TinyGridColumn field="state" title="状态" :width="100">
                     <template #default="{ row }">
-                        <tiny-tag v-if="row.state === 1" type="success">正常</tiny-tag>
-                        <tiny-tag v-else-if="row.state === 2" type="warning">禁用</tiny-tag>
-                        <tiny-tag v-else type="danger">已删除</tiny-tag>
+                        <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>
-                </tiny-grid-column>
-                <tiny-grid-column title="操作" :width="120" align="right">
+                </TinyGridColumn>
+                <TinyGridColumn title="操作" :width="120" align="right">
                     <template #default="{ row }">
-                        <tiny-dropdown title="操作" trigger="click" size="small" border visible-arrow @item-click="(data) => $Method.onAction(data.itemData.command, row)">
+                        <TinyDropdown title="操作" trigger="click" size="small" border visible-arrow @item-click="(data) => $Method.onAction(data.itemData.command, row)">
                             <template #dropdown>
-                                <tiny-dropdown-menu>
-                                    <tiny-dropdown-item :item-data="{ command: 'upd' }">
-                                        <i-lucide:pencil style="width: 14px; height: 14px; margin-right: 6px" />
+                                <TinyDropdownMenu>
+                                    <TinyDropdownItem :item-data="{ command: 'upd' }">
+                                        <IconLucidePencil />
                                         编辑
-                                    </tiny-dropdown-item>
-                                    <tiny-dropdown-item :item-data="{ command: 'del' }" divided>
-                                        <i-lucide:trash-2 style="width: 14px; height: 14px; margin-right: 6px" />
+                                    </TinyDropdownItem>
+                                    <TinyDropdownItem :item-data="{ command: 'del' }" divided>
+                                        <IconLucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
                                         删除
-                                    </tiny-dropdown-item>
-                                </tiny-dropdown-menu>
+                                    </TinyDropdownItem>
+                                </TinyDropdownMenu>
                             </template>
-                        </tiny-dropdown>
+                        </TinyDropdown>
                     </template>
-                </tiny-grid-column>
-            </tiny-grid>
+                </TinyGridColumn>
+            </TinyGrid>
         </div>
 
         <div class="main-page">
-            <tiny-pager :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
+            <TinyPager :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.pageSize" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @size-change="$Method.handleSizeChange" />
         </div>
 
         <!-- 编辑对话框组件 -->
@@ -68,8 +68,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { Modal } from '@opentiny/vue';
+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 IconLucideSquare from '~icons/lucide/square';
+import IconLucidePencil from '~icons/lucide/pencil';
+import IconLucideTrash2 from '~icons/lucide/trash-2';
 
 import EditDialog from './components/edit.vue';