fix:vue router name重复

README.md

@@ -12,13 +12,13 @@
 
 我深信，付费后台管理系统将为您带来更多的价值和便利，帮助您提升工作效率
 
+## 其他版本
+- [tp8 新版本](https://gitee.com/catchamin/catchadmin-tp)
+- [webman 高性能版本](https://gitee.com/catchamin/catchadmin-webman)
 
 ## ⚠️Thinkphp 用户注意
 由于新版本使用 `Laravel` 开发，所以请使用 `thinkphp` 分支或者 tag2.6.2，thinkphp 版本已经非常稳定了。
 
-## 为什么是 Laravel
-`V2` 版本使用`Thinkphp`，但从其社区来看，从我个人角度来看开发组的心思已经不在维护框架上，因为据观察，每一次小版本发布都会引发一些小问题，虽然不大，但给人一种不够稳定的感觉，所以思索再三，使用 `Laravel`。`Laravel` 社区非常繁荣，他们每周都会发布新版本，以及围绕`Laravel`构建的生态也非常完善，有 `Horizon` 队列管理工具, `Telescope` 调试工具，`Octane`（基于 `Swoole` 和 `RoadRunner` 提高性能）等等一系列的工具，而且都是免费的。
-
 ## 功能
 - [x] 用户管理 后台用户管理
 - [x] 部门管理 配置公司的部门结构，支持树形结构

modules/Common/Repository/Options/Components.php

@@ -20,6 +20,7 @@ class Components implements OptionInterface
 
     public function get(): array
     {
+        try {
             if ($module = request()->get('module')) {
                 $components = File::glob(CatchAdmin::getModuleViewsPath($module) . '*' . DIRECTORY_SEPARATOR . '*.vue');
 
@@ -38,5 +39,8 @@ class Components implements OptionInterface
             }
 
             return $this->components;
+        } catch (\Throwable $exception) {
+            return [];
+        }
     }
 }

modules/Develop/Support/Generate/stubs/request.stub

@@ -21,7 +21,7 @@ class {request} extends Request
      *
      * @return array
      */
-    public function message(): array
+    public function messages(): array
     {
         return [];
     }

modules/Develop/views/module/install.vue

@@ -8,7 +8,7 @@
             { label: 'ZIP 安装', value: 2 },
           ]"
           :key="item.value"
-          :label="item.value"
+          :value="item.value"
           name="type"
           >{{ item.label }}
         </el-radio-button>

modules/Permissions/Http/Controllers/PermissionsController.php

@@ -28,7 +28,9 @@ class PermissionsController extends Controller
     public function index(Request $request): mixed
     {
         if ($request->get('from') == 'role') {
-            return $this->model->getList();
+            return $this->model->setBeforeGetList(function ($query){
+                return $query->orderByDesc('sort');
+            })->getList();
         }
 
         return $this->model->setBeforeGetList(function ($query) {

modules/Permissions/views/jobs/form/create.vue

@@ -8,7 +8,7 @@
     </el-form-item>
     <el-form-item label="状态" prop="status">
       <el-radio-group v-model="formData.status">
-        <el-radio v-for="item in options" :key="item.value" :label="item.value" name="status">{{ item.label }}</el-radio>
+        <el-radio v-for="item in options" :key="item.value" :value="item.value" name="status">{{ item.label }}</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="排序" prop="sort">
@@ -30,7 +30,7 @@ import { useShow } from '/admin/composables/curd/useShow'
 import { onMounted } from 'vue'
 
 const props = defineProps({
-  primary: String | Number,
+  primary: [Number, String],
   api: String,
 })
 

modules/Permissions/views/permissions/form/create.vue

@@ -11,7 +11,7 @@
                 { label: '按钮', value: 3 },
               ]"
               :key="item.value"
-              :label="item.value"
+              :value="item.value"
               name="type"
               >{{ item.label }}
             </el-radio-button>
@@ -63,7 +63,7 @@
                 { label: '隐藏', value: 2 },
               ]"
               :key="item.value"
-              :label="item.value"
+              :value="item.value"
               name="hidden"
               >{{ item.label }}</el-radio
             >
@@ -77,7 +77,7 @@
                 { label: '禁用', value: 2 },
               ]"
               :key="item.value"
-              :label="item.value"
+              :value="item.value"
               name="keepalive"
               >{{ item.label }}
             </el-radio>
@@ -110,7 +110,7 @@ import http from '/admin/support/http'
 import { MenuType } from '/admin/enum/app'
 
 const props = defineProps({
-  primary: String | Number,
+  primary: [String,Number],
   api: String,
 })
 

modules/Permissions/views/permissions/index.vue

@@ -18,9 +18,9 @@
               <el-tag v-for="action in scope.row.actions" class="cursor-pointer min-w-fit" @click="open(action.id)" closable @close="destroy(api, action.id)">{{ action.permission_name }}</el-tag>
             </div>
             <div v-else>
-              <el-popconfirm confirm-button-text="确认" title="添加基础actions" @confirm="actionGenerate(scope.row.id)" placement="top">
+              <el-popconfirm v-if="scope.row.type === MenuType.PAGE_TYPE" confirm-button-text="确认" title="添加基础actions" @confirm="actionGenerate(scope.row.id)" placement="top">
                 <template #reference>
-                  <el-tag class="cursor-pointer w-8" v-if="scope.row.type === MenuType.PAGE_TYPE">
+                  <el-tag class="cursor-pointer w-8">
                     <Icon name="cog-6-tooth" class="animate-spin w-5 h-5" v-if="generateId === scope.row.id" />
                     <Icon name="plus" className="w-4 h-4" v-else />
                   </el-tag>

modules/User/views/user/components/operateLog.vue

@@ -2,8 +2,8 @@
   <div class="table-default">
     <div class="w-full flex justify-end">
       <el-radio-group v-model="query.scope" size="small" @change="search">
-        <el-radio-button label="self">只看自己</el-radio-button>
-        <el-radio-button label="all">全部</el-radio-button>
+        <el-radio-button value="self">只看自己</el-radio-button>
+        <el-radio-button value="all">全部</el-radio-button>
       </el-radio-group>
     </div>
     <el-table :data="tableData" class="mt-3" v-loading="loading">

package.json

@@ -8,48 +8,48 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@heroicons/vue": "^2.1.1",
+        "@heroicons/vue": "^2.1.3",
         "@tinymce/tinymce-vue": "^5.1.1",
-        "@vueuse/core": "^10.1.2",
-        "element-plus": "^2.5.3",
+        "@vueuse/core": "^10.9.0",
+        "element-plus": "^2.6.3",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
-        "terser": "^5.16.6",
-        "vue": "^3.4.15",
+        "terser": "^5.29.2",
+        "vue": "^3.4.21",
         "vue-i18n": "9",
-        "vue-router": "4.2.5",
+        "vue-router": "4.3.0",
         "vuedraggable": "^2.24.3"
     },
     "devDependencies": {
-        "@iconify-json/logos": "^1.1.31",
-        "@rollup/plugin-alias": "^5.0.0",
+        "@iconify-json/logos": "^1.1.42",
+        "@rollup/plugin-alias": "^5.1.0",
         "@types/mockjs": "^1.0.7",
-        "@types/node": "^20.2.3",
+        "@types/node": "^20.11.30",
         "@types/nprogress": "^0.2.0",
-        "@typescript-eslint/eslint-plugin": "^6.19.1",
-        "@typescript-eslint/parser": "^6.19.1",
-        "@vitejs/plugin-vue": "^5.0.3",
+        "@typescript-eslint/eslint-plugin": "^6.21.0",
+        "@typescript-eslint/parser": "^6.21.0",
+        "@vitejs/plugin-vue": "^5.0.4",
         "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "autoprefixer": "^10.4.17",
-        "axios": "^1.5.1",
-        "eslint": "^8.41.0",
+        "autoprefixer": "^10.4.19",
+        "axios": "^1.6.8",
+        "eslint": "^8.57.0",
         "eslint-config-standard": "^17.0.0",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-n": "^16.0.0",
         "eslint-plugin-promise": "^6.1.1",
-        "eslint-plugin-vue": "^9.19.2",
+        "eslint-plugin-vue": "^9.23.0",
         "mockjs": "^1.1.0",
-        "postcss": "^8.4.33",
-        "prettier": "2.8.8",
-        "sass": "^1.62.1",
+        "postcss": "^8.4.38",
+        "prettier": "3.2.5",
+        "sass": "^1.72.0",
         "tailwindcss": "^3.4.1",
-        "typescript": "^5.1.6",
-        "unplugin-auto-import": "^0.17.3",
-        "unplugin-icons": "^0.18.2",
-        "unplugin-vue-components": "^0.25.2",
-        "vite": "^5.0.12",
+        "typescript": "^5.4.3",
+        "unplugin-auto-import": "^0.17.5",
+        "unplugin-icons": "^0.18.5",
+        "unplugin-vue-components": "^0.26.0",
+        "vite": "^5.2.3",
         "vite-plugin-html": "^3.2.0",
         "vite-plugin-mock": "^3.0.0",
-        "vue-tsc": "^1.6.5"
+        "vue-tsc": "^2.0.7"
     }
 }

resources/admin/components/admin/dialog/index.vue

@@ -12,7 +12,9 @@
           </div>
         </div>
       </template>
+        <div class="pt-4">
             <slot />
+        </div>
       <template #footer v-if="showFooter">
         <span class="dialog-footer">
           <el-button @click="close">{{ $t('system.cancel') }}</el-button>

resources/admin/components/admin/paginate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-end pt-5">
-    <el-pagination background :layout="layout" :current-page="page" :page-size="limit" @current-change="changePage" @size-change="changeLimit" :total="total" :page-sizes="pageSizes" />
+    <el-pagination background :layout="layout" :current-page="page" :page-size="limit" @current-change="changePage" @size-change="changeLimit" :total="parseInt(total)" :page-sizes="pageSizes" />
   </div>
 </template>
 
@@ -14,12 +14,10 @@ const pageSizes = [10, 20, 30, 50]
 interface paginate {
   page: number
   limit: number
-  total: number
+  total: string
   changePage: number
   changeLimit: number
 }
 
 const { page, limit, total, changePage, changeLimit } = inject('paginate') as paginate
 </script>
-
-<style scoped></style>

resources/admin/components/admin/table/search.vue

@@ -30,4 +30,8 @@ defineProps({
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+:deep(.el-form-item) {
+    min-width: 240px;
+}
+</style>

resources/admin/directives/permission/action.ts

@@ -8,7 +8,7 @@ function checkAction(el: any, action: any) {
     action = action.value.replace('@', '.').toLowerCase()
     const hasAction = permissions?.some(permission => {
       if (permission.type === MenuType.Button_Type) {
-        const a: string = permission.module + '.' + permission.permission_mark.replace('@', '.')
+        const a: string = permission.module + '.' + permission.permission_mark.replaceAll('@', '.')
         return action === a.toLowerCase()
       }
     })

resources/admin/layout/components/Menu/item.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-sub-menu :index="menu?.path" :class="subMenuClass" v-if="menu?.children?.length">
+  <el-sub-menu :index="menu?.path" :class="subMenuClass" v-if="menu?.children?.length" :key="menu?.path">
     <template #title>
       <el-icon>
         <Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm" />
@@ -9,7 +9,7 @@
     <slot />
   </el-sub-menu>
 
-  <el-menu-item v-else class="ct-menu-item" :index="menu?.path" @click="isMiniScreen() && store.changeExpaned()">
+  <el-menu-item v-else class="ct-menu-item" :index="menu?.path" @click="isMiniScreen() && store.changeExpaned()" :key="menu?.path">
     <el-icon>
       <Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm" />
     </el-icon>

resources/admin/layout/components/Menu/menus.vue

@@ -14,8 +14,25 @@
 </template>
 <script lang="ts" setup>
 import { useAppStore } from '/admin/stores/modules/app'
+import { watch } from 'vue'
+import router from '/admin/router'
+import { useNavTabStore } from '/admin/stores/modules/tabs'
 
 const appStore = useAppStore()
+const navTabStore = useNavTabStore()
+watch(() => router.currentRoute, (to, from) => {
+    const tab: any = {
+        name: to.value.name,
+        fullPath: to.value.fullPath,
+        path: to.value.path,
+        is_active: true,
+        meta: {
+            title: to.value.meta.title,
+            affix: false,
+        }
+    }
+    navTabStore.addTabs(tab)
+}, {deep:true, immediate:true})
 </script>
 
 <style scoped lang="scss">

resources/admin/layout/components/header/contextMenu.vue

@@ -0,0 +1,70 @@
+<template>
+    <div @contextmenu.prevent="handleContextMenu" class="flex gap-x-2">
+        <slot></slot>
+        <!-- 右击菜单 -->
+        <div v-if="showMenu" class="absolute z-[1000] bg-white dark:bg-regal-dark shadow-xl rounded border border-gray-200" :style="{ top: `${position.y}px`, left: `${position.x}px` }">
+            <ul class="w-20 text-center py-1">
+                <li v-for="(item, index) in menuItems" :key="index" @click="item.action()" class="hover:bg-gray-50 px-2 py-1 hover:cursor-pointer text-[12px]">
+                    {{ item.label }}
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onUnmounted } from 'vue';
+import { useNavTabStore } from '/admin/stores/modules/tabs';
+
+const navTabStore = useNavTabStore();
+interface MenuItem {
+    label: string;
+    action: Function;
+}
+
+const position = reactive({ x: 0, y: 0 });
+const showMenu = ref(false);
+const menuItems = ref<Array<MenuItem>>([
+    { label: '刷新', action: () => {
+        navTabStore.refreshCurrentTab();
+      }
+    },
+    { label: '关闭', action: () => {
+         navTabStore.removeCurrentTab();
+      }
+    },
+    { label: '关闭其他', action: () => { navTabStore.removeOtherTabs() } },
+    { label: '关闭所有', action: () => { navTabStore.removeAllTabs() } },
+]);
+
+const handleContextMenu = (event: MouseEvent) => {
+    event.preventDefault();
+    position.x = event.clientX;
+    position.y = event.clientY;
+    showMenu.value = true;
+};
+
+const handleClickOutside = () => {
+    showMenu.value = false;
+};
+
+window.addEventListener('click', handleClickOutside);
+
+onUnmounted(() => {
+    window.removeEventListener('click', handleClickOutside);
+});
+
+const handleMenuItemClick = (action: string) => {
+    console.log('执行操作：', action);
+};
+</script>
+
+<style>
+.context-menu {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+}
+</style>

resources/admin/layout/components/header/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-row h-16 w-full drop-shadow border-l dark:border-l-0 border-gray-200" style="background-color: var(--header-bg-color)">
-    <div class="flex flex-row justify-between w-full h-16">
+  <div class="flex flex-row h-14 w-full drop-shadow border-l border-gray-200" style="background-color: var(--header-bg-color)">
+    <div class="flex flex-row justify-between w-full h-14">
       <div class="flex flex-row min-w-[17rem]">
         <div class="h-full flex items-center w-8 ml-2 hover:cursor-pointer" @click="store.changeExpaned">
           <Icon name="list-bullet" class="w-6 h-8" />
@@ -24,11 +24,12 @@
       </div>
     </div>
   </div>
+  <Tabs/>
 </template>
 <script setup lang="ts">
 import { useAppStore } from '/admin/stores/modules/app'
 import Notification from './notification.vue'
 import MenuSearch from './menuSearch.vue'
-
+import Tabs from './tabs.vue'
 const store = useAppStore()
 </script>

resources/admin/layout/components/header/lang.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer">
+  <div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer">
     <div class="flex hover:cursor-pointer pl-1 pr-1">
       <el-dropdown size="large" class="flex items-center justify-center hover:cursor-pointer w-full" @command="selectLanguage">
         <Icon name="language" />

resources/admin/layout/components/header/menuSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer">
+  <div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer">
     <div class="flex flex-row w-96">
       <Icon name="magnifying-glass" class="hidden sm:block" @click="searchMenuVisiable = true" />
 

resources/admin/layout/components/header/notification.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 通知 -->
-  <div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer" ref="messageRef" v-click-outside="onClickOutside">
+  <div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer" ref="messageRef" v-click-outside="onClickOutside">
     <el-badge :value="3">
       <Icon name="bell" />
     </el-badge>

resources/admin/layout/components/header/tabs.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useNavTabStore } from '/admin/stores/modules/tabs'
+import ContextMenu from './contextMenu.vue'
+import { computed, ref, onMounted,onBeforeUnmount, watch } from 'vue'
+const navTabStore = useNavTabStore()
+const tabs = computed(() => navTabStore.getNavTabs)
+</script>
+
+<template>
+    <div class="h-10 bg-white dark:bg-regal-dark px-1 sm:px-3 w-full flex gap-x-2" ref="container" v-if="tabs.length > 0">
+        <ContextMenu>
+            <el-tag
+                class="mt-1.5 hover:cursor-pointer"
+                v-for="(tag, index) in tabs" :key="index"
+                :closable="!tag.meta.affix"
+                :disable-transitions="false"
+                :effect="tag.is_active ? 'dark' : 'plain'"
+                @click.prevent="navTabStore.selectTab(tag)"
+                @close="navTabStore.removeTab(index)"
+            >
+                {{ tag.meta.title }}
+            </el-tag>
+        </ContextMenu>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/admin/layout/components/header/theme.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer">
+  <div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer">
     <Icon name="moon" @click="changeTheme()" v-if="isDark" />
     <Icon name="sun" @click="changeTheme()" v-else />
   </div>

resources/admin/stores/modules/tabs/index.ts

@@ -0,0 +1,130 @@
+import { defineStore } from 'pinia'
+import router from '/admin/router'
+interface meta {
+    title: string
+    affix: boolean
+}
+interface tab {
+    name: string
+    fullPath: string
+    path: string
+    is_active:boolean,
+    meta: meta
+}
+
+const defaultTab: tab = {
+    name: 'Dashboard',
+    fullPath: '/dashboard',
+    path: '/dashboard',
+    is_active: true,
+    meta: {
+        title: 'Dashboard',
+        affix: true,
+    },
+}
+
+export const useNavTabStore = defineStore('nav_tabs', {
+    state: ()=> {
+        return {
+            tabs: [defaultTab] as Array<tab>,
+        }
+    },
+
+    getters: {
+        getNavTabs(state): Array<tab> {
+            return state.tabs
+        },
+    },
+
+    actions: {
+        addTabs(Tab: tab): void {
+            if (this.tabs.length >= 20) {
+                console.log('最多添加 20 个 tab 标签');
+                return;
+            }
+
+            let isExist = false
+
+            this.tabs.map(t => {
+                if (t.name === Tab.name) {
+                    isExist = true
+                    t.is_active = true
+                } else {
+                    t.is_active = false
+                }
+            })
+
+            if (!isExist) {
+                this.tabs.push(Tab)
+            }
+        },
+
+        getActiveTabIndex(): number|null {
+            for (let i = 0; i < this.tabs.length; i++) {
+                if (this.tabs[i].is_active) {
+                    return i
+                }
+            }
+
+            return null;
+        },
+
+        selectTab(tab: tab): void {
+            this.tabs.map(t => {
+                if (t.name === tab.name) {
+                    t.is_active = true
+                } else {
+                    t.is_active = false
+                }
+            })
+
+            router.push(tab.fullPath)
+        },
+
+        removeTab(index: number): void {
+            const activeIndex = this.getActiveTabIndex()
+            if (index === activeIndex) {
+                this.tabs = this.tabs.filter((_, idx) => idx !== index);
+                router.push(this.tabs[index - 1].fullPath)
+            } else {
+                const goPath = activeIndex ? this.tabs[activeIndex].fullPath : this.tabs[index - 1].fullPath
+                this.tabs = this.tabs.filter((_, idx) => idx !== index);
+                router.push(goPath)
+            }
+        },
+
+
+        // 右击菜单操作
+        // 刷新
+        refreshCurrentTab() {
+            const index = this.getActiveTabIndex()
+            if (index) {
+                router.replace({ path: this.tabs[index].fullPath });
+
+                // router.push({ path: this.tabs[index].fullPath });
+            }
+        },
+        // 关闭当前
+        removeCurrentTab() {
+            const index = this.getActiveTabIndex()
+            if (index) {
+                if (this.tabs[index].meta.affix) {
+                    return
+                }
+                this.removeTab(index)
+            }
+        },
+        // 关闭所有
+        removeAllTabs() {
+            this.tabs = [defaultTab]
+            router.push('/dashboard')
+        },
+        // 关闭其他
+        removeOtherTabs() {
+            const index = this.getActiveTabIndex()
+            if (index) {
+                this.tabs = this.tabs.filter((_, idx) => idx === index || idx === 0)
+            }
+        }
+    },
+})

resources/admin/stores/modules/user/permissions.ts

@@ -135,7 +135,7 @@ export const usePermissionsStore = defineStore('PermissionsStore', {
           }
           const menu: Menu = Object.assign({
             path: this.resolveRoutePathRoutePath(permission.route, path),
-            name: permission.module + '_' + permission.permission_mark,
+              name: permission.module + '_' + permission.permission_mark + permission.route.replace('/', '_'),
             component: importComponent,
             redirect: permission.redirect,
             meta: Object.assign({ title: permission.permission_name, icon: permission.icon, hidden: permission.hidden, active_menu: permission.active_menu }),