@befly-addon/admin 1.0.20 → 1.0.22

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,10 +68,15 @@
 </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';
+import { $Http } from '@/plugins/http';
 
 // 响应式数据
 const $Data = $ref({

package/views/news/index.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script setup>
+import { useRouter, useRoute } from 'vue-router';
+import { Modal } from '@opentiny/vue';
 // 新闻页面逻辑
 </script>
 

package/views/role/components/api.vue

@@ -1,9 +1,9 @@
 <template>
-    <tiny-dialog-box v-model:visible="$Data.visible" title="接口权限" width="900px" :append-to-body="true" :show-footer="true" top="5vh" @close="$Method.onClose">
+    <TinyDialogBox v-model:visible="$Data.visible" title="接口权限" width="900px" :append-to-body="true" :show-footer="true" top="5vh" @close="$Method.onClose">
         <div class="comp-role-api">
             <!-- 搜索框 -->
             <div class="search-box">
-                <tiny-search v-model="$Data.searchText" placeholder="搜索接口名称或路径" clearable @update:modelValue="$Method.onSearch" />
+                <TinySearch v-model="$Data.searchText" placeholder="搜索接口名称或路径" clearable @update:modelValue="$Method.onSearch" />
             </div>
 
             <!-- 接口分组列表 -->
@@ -11,9 +11,9 @@
                 <div v-for="group in $Data.filteredApiData" :key="group.name" class="api-group">
                     <div class="group-header">{{ group.title }}</div>
                     <div class="api-checkbox-list">
-                        <tiny-checkbox-group v-model="$Data.checkedApiIds">
-                            <tiny-checkbox v-for="api in group.apis" :key="api.id" :label="api.id"> {{ api.label }} </tiny-checkbox>
-                        </tiny-checkbox-group>
+                        <TinyCheckboxGroup v-model="$Data.checkedApiIds">
+                            <TinyCheckbox v-for="api in group.apis" :key="api.id" :label="api.id"> {{ api.label }} </TinyCheckbox>
+                        </TinyCheckboxGroup>
                     </div>
                 </div>
             </div>
@@ -21,20 +21,20 @@
 
         <template #footer>
             <div class="footer-left">
-                <tiny-button size="small" @click="$Method.onCheckAll">全选</tiny-button>
-                <tiny-button size="small" @click="$Method.onUncheckAll">取消全选</tiny-button>
+                <TinyButton size="small" @click="$Method.onCheckAll">全选</TinyButton>
+                <TinyButton size="small" @click="$Method.onUncheckAll">取消全选</TinyButton>
             </div>
             <div class="footer-right">
-                <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>
             </div>
         </template>
-    </tiny-dialog-box>
+    </TinyDialogBox>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { Modal } from '@opentiny/vue';
+import { Button as TinyButton, DialogBox as TinyDialogBox, Search as TinySearch, Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup, Modal } from '@opentiny/vue';
+import { $Http } from '@/plugins/http';
 
 const $Prop = defineProps({
     modelValue: {

package/views/role/components/edit.vue

@@ -1,37 +1,38 @@
 <template>
-    <tiny-dialog-box 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">
+    <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">
         <div class="comp-role-edit">
-            <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="code">
-                    <tiny-input v-model="$Data.formData.code" placeholder="请输入角色代码，如：admin" />
-                </tiny-form-item>
-                <tiny-form-item label="角色描述" prop="description">
-                    <tiny-input v-model="$Data.formData.description" type="textarea" placeholder="请输入角色描述" :rows="3" />
-                </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>
+            <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="请输入角色代码，如：admin" />
+                </TinyFormItem>
+                <TinyFormItem label="角色描述" prop="description">
+                    <TinyInput v-model="$Data.formData.description" type="textarea" placeholder="请输入角色描述" :rows="3" />
+                </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>
         </div>
         <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, shallowRef } from 'vue';
-import { Modal } from '@opentiny/vue';
+import { 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';
+import { $Http } from '@/plugins/http';
 
 const $Prop = defineProps({
     modelValue: {

package/views/role/components/menu.vue

@@ -1,20 +1,21 @@
 <template>
-    <tiny-dialog-box v-model:visible="$Data.visible" title="菜单权限" width="600px" :append-to-body="true" :show-footer="true" top="10vh" @close="$Method.onClose">
+    <TinyDialogBox 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">
-            <tiny-tree :data="$Data.menuTreeData" node-key="id" show-checkbox default-expand-all :props="{ label: 'name' }" :ref="(el) => ($From.tree = el)" />
+            <TinyTree :data="$Data.menuTreeData" node-key="id" show-checkbox default-expand-all :props="{ label: 'name' }" :ref="(el) => ($From.tree = el)" />
         </div>
         <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, nextTick, shallowRef } from 'vue';
-import { Modal } from '@opentiny/vue';
+import { nextTick, shallowRef } 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';
 
 const $Prop = defineProps({
     modelValue: {

package/views/role/index.vue

@@ -2,67 +2,67 @@
     <div class="page-role 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.tableData" header-cell-class-name="custom-table-cell-class" size="small" height="100%" show-overflow="tooltip" border seq-serial>
-                <tiny-grid-column type="index" title="序号" align="center" :width="100" />
-                <tiny-grid-column field="name" title="角色名称" :width="150" />
-                <tiny-grid-column field="code" title="角色代码" :width="150" />
-                <tiny-grid-column field="description" title="描述" :min-width="150" />
-                <tiny-grid-column field="sort" title="排序" align="center" :width="80" />
-                <tiny-grid-column field="state" title="状态" align="center" :width="100">
+            <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 }">
-                        <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="center" fixed="right">
+                </TinyGridColumn>
+                <TinyGridColumn title="操作" :width="120" align="center" fixed="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: 'menu' }">
-                                        <i-lucide:settings style="width: 14px; height: 14px; margin-right: 6px" />
+                                    </TinyDropdownItem>
+                                    <TinyDropdownItem :item-data="{ command: 'menu' }">
+                                        <IconLucideSettings />
                                         菜单权限
-                                    </tiny-dropdown-item>
-                                    <tiny-dropdown-item :item-data="{ command: 'api' }">
-                                        <i-lucide:code style="width: 14px; height: 14px; margin-right: 6px" />
+                                    </TinyDropdownItem>
+                                    <TinyDropdownItem :item-data="{ command: 'api' }">
+                                        <IconLucideCode />
                                         接口权限
-                                    </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>
 
         <!-- 编辑对话框组件 -->
@@ -77,9 +77,17 @@
 </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';
+import IconLucideSettings from '~icons/lucide/settings';
+import IconLucideCode from '~icons/lucide/code';
+import IconLucideTrash2 from '~icons/lucide/trash-2';
 import EditDialog from './components/edit.vue';
 import MenuDialog from './components/menu.vue';
 import ApiDialog from './components/api.vue';
+import { $Http } from '@/plugins/http';
 
 // 响应式数据
 const $Data = $ref({

package/views/user/index.vue

@@ -5,7 +5,7 @@
             <div class="toolbar-left">
                 <t-button theme="primary" @click="$Method.handleAdd">
                     <template #icon>
-                        <i-lucide:plus />
+                        <IconLucidePlus />
                     </template>
                     添加管理员
                 </t-button>
@@ -16,13 +16,13 @@
                     <t-select v-model="$Data.searchState" placeholder="状态" clearable style="width: 120px" :options="$Data.stateOptions" @change="$Method.handleSearch" />
                     <t-button theme="default" @click="$Method.handleSearch">
                         <template #icon>
-                            <i-lucide:search />
+                            <IconLucideSearch />
                         </template>
                         搜索
                     </t-button>
                     <t-button theme="default" @click="$Method.handleReset">
                         <template #icon>
-                            <i-lucide:rotate-cw />
+                            <IconLucideRotateCw />
                         </template>
                         重置
                     </t-button>
@@ -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 }">
-                    <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>
 
                 <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">
-                    <tiny-tag type="primary">{{ $Data.currentUser.username }}</tiny-tag>
+                    <TinyTag type="primary">{{ $Data.currentUser.username }}</TinyTag>
                     <span class="user-email">{{ $Data.currentUser.email }}</span>
                 </div>
                 <t-divider />
@@ -74,7 +74,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+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';
+import { $Http } from '@/plugins/http';
 
 // 响应式数据
 const $Data = $ref({