chore: bump version to 0.9.12 and update dependencies

README.md

@@ -86,11 +86,11 @@ docker compose -f docker-compose.product.yml up --build -d
 
 Nova-Admin is a completely open-source and free project. It is still being optimized and iterated. It is designed to help developers more conveniently develop medium and large management systems. If you have any questions, please ask questions in the QQ exchange group.
 
-| Q-Group | wechat-Group |wechat |
-| :--: |:--: |:--: |
-| <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/q-group.png" width=170> | <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/wx-group.png" width=170>|<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|
+| Q-Group | wechat-Group |
+| :--: |:--: |
+| <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/q-group.png" width=170> |<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|
 
-> The WeChat group QR code is invalid, please add me as a friend.
+> Please indicate the purpose of adding WeChat.
 
 ## Contribution
 

README.zh-CN.md

@@ -86,11 +86,11 @@ docker compose -f docker-compose.product.yml up --build -d
 
 Nova-Admin 是完全开源免费的项目，目前仍然在优化迭代中，旨在帮助开发者更方便地进行中大型管理系统开发，有使用问题欢迎在交流群内提问。
 
-| Q群 | 微信群 | 个人微信 |
-| :--: |:--: |:--: |
-| <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/q-group.png" width=170> | <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/wx-group.png" width=170>|<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|
+| Q群 | 微信群 |
+| :--: |:--: |
+| <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/q-group.png" width=170> |<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|
 
-> 微信群二维码失效请加我为好友
+> 添加微信请注明来意
 
 ## 贡献
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nova-admin",
   "type": "module",
-  "version": "0.9.10",
+  "version": "0.9.12",
   "private": true,
   "description": "a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI.",
   "author": {
@@ -50,42 +50,42 @@
     "sizecheck": "npx vite-bundle-visualizer"
   },
   "dependencies": {
-    "@vueuse/core": "^12.3.0",
-    "alova": "^3.2.7",
+    "@vueuse/core": "^13.0.0",
+    "alova": "^3.2.10",
     "colord": "^2.9.3",
     "echarts": "^5.6.0",
-    "md-editor-v3": "^5.1.1",
-    "pinia": "^2.3.0",
+    "md-editor-v3": "^5.4.5",
+    "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
     "quill": "^2.0.3",
     "radash": "^12.1.0",
     "vue": "^3.5.13",
     "vue-draggable-plus": "^0.6.0",
-    "vue-i18n": "^11.0.1",
+    "vue-i18n": "^11.1.2",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.12.1",
+    "@antfu/eslint-config": "^4.11.0",
     "@iconify-json/icon-park-outline": "^1.2.2",
     "@iconify/vue": "^4.3.0",
-    "@types/node": "^22.10.5",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "eslint": "^9.17.0",
-    "lint-staged": "^15.3.0",
-    "naive-ui": "^2.40.4",
-    "sass": "^1.83.1",
-    "simple-git-hooks": "^2.11.1",
-    "typescript": "^5.7.2",
-    "unocss": "^0.65.3",
-    "unplugin-auto-import": "^0.19.0",
-    "unplugin-icons": "^0.22.0",
-    "unplugin-vue-components": "^0.28.0",
-    "vite": "^6.0.7",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "eslint": "^9.24.0",
+    "lint-staged": "^15.5.0",
+    "naive-ui": "^2.41.0",
+    "sass": "^1.86.3",
+    "simple-git-hooks": "^2.12.1",
+    "typescript": "^5.8.3",
+    "unocss": "^0.65.4",
+    "unplugin-auto-import": "^19.1.2",
+    "unplugin-icons": "^22.1.0",
+    "unplugin-vue-components": "^28.4.1",
+    "vite": "^6.2.5",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-vue-devtools": "7.6.8",
-    "vue-tsc": "^2.2.0"
+    "vite-plugin-vue-devtools": "7.7.2",
+    "vue-tsc": "^2.2.8"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

src/hooks/usePermission.ts

@@ -1,12 +1,11 @@
 import { useAuthStore } from '@/store'
-import { isArray, isString } from 'radash'
 
 /** 权限判断 */
 export function usePermission() {
   const authStore = useAuthStore()
 
   function hasPermission(
-    permission: Entity.RoleType | Entity.RoleType[] | undefined,
+    permission?: Entity.RoleType[],
   ) {
     if (!permission)
       return true
@@ -15,13 +14,9 @@ export function usePermission() {
       return false
     const { role } = authStore.userInfo
 
-    let has = role === 'super'
+    let has = role.includes('super')
     if (!has) {
-      if (isArray(permission))
-        has = permission.includes(role)
-
-      if (isString(permission))
-        has = permission === role
+      has = permission.every(i => role.includes(i))
     }
     return has
   }

src/layouts/components/header/UserCenter.vue

@@ -82,7 +82,7 @@ function handleSelect(key: string | number) {
   >
     <n-avatar
       round
-
+      class="cursor-pointer"
       :src="userInfo?.avatar"
     >
       <template #fallback>

src/layouts/components/index.ts

@@ -1,17 +1,17 @@
 import BackTop from './common/BackTop.vue'
 import Setting from './common/Setting.vue'
-
 import SettingDrawer from './common/SettingDrawer.vue'
+
 import Breadcrumb from './header/Breadcrumb.vue'
 import CollapaseButton from './header/CollapaseButton.vue'
 import FullScreen from './header/FullScreen.vue'
 import Notices from './header/Notices.vue'
 import Search from './header/Search.vue'
-
 import UserCenter from './header/UserCenter.vue'
 
 import Logo from './sider/Logo.vue'
 import Menu from './sider/Menu.vue'
+
 import TabBar from './tab/TabBar.vue'
 
 export {

src/layouts/components/tab/TabBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { RouteLocationNormalized } from 'vue-router'
 import { useAppStore, useTabStore } from '@/store'
+import { useDraggable } from 'vue-draggable-plus'
 import IconClose from '~icons/icon-park-outline/close'
 import IconDelete from '~icons/icon-park-outline/delete-four'
 import IconFullwith from '~icons/icon-park-outline/fullwidth'
@@ -10,6 +11,7 @@ import IconRight from '~icons/icon-park-outline/to-right'
 import ContentFullScreen from './ContentFullScreen.vue'
 import DropTabs from './DropTabs.vue'
 import Reload from './Reload.vue'
+import TabBarItem from './TabBarItem.vue'
 
 const tabStore = useTabStore()
 const appStore = useAppStore()
@@ -98,54 +100,49 @@ function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) {
 function onClickoutside() {
   showDropdown.value = false
 }
+
+// const [DefineTabItem, ReuseTabItem] = createReusableTemplate<{ route: RouteLocationNormalized }>()
+
+const el = ref()
+
+useDraggable(el, tabStore.tabs, {
+  animation: 150,
+  ghostClass: 'ghost',
+})
 </script>
 
 <template>
-  <div class="wh-full flex items-end">
-    <n-tabs
-      type="card"
-      size="small"
-      :tabs-padding="10"
-      :value="tabStore.currentTabPath"
-      @close="tabStore.closeTab"
-    >
-      <n-tab
-        v-for="item in tabStore.pinTabs"
-        :key="item.fullPath"
-        :name="item.fullPath"
-        @click="router.push(item.fullPath)"
-      >
-        <div class="flex-x-center gap-2">
-          <nova-icon :icon="item.meta.icon" /> {{ $t(`route.${String(item.name)}`, item.meta.title) }}
-        </div>
-      </n-tab>
-      <n-tab
-        v-for="item in tabStore.tabs"
-        :key="item.fullPath"
-        closable
-        :name="item.fullPath"
+  <div class="p-l-2 flex w-full relative">
+    <div class="flex items-end">
+      <TabBarItem
+        v-for="item in tabStore.pinTabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item"
+        @click="handleTab(item)"
+      />
+    </div>
+    <div ref="el" class="flex items-end flex-1">
+      <TabBarItem
+        v-for="item in tabStore.tabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item" closable
+        @close="tabStore.closeTab"
         @click="handleTab(item)"
         @contextmenu="handleContextMenu($event, item)"
-      >
-        <div class="flex-x-center gap-2">
-          <nova-icon :icon="item.meta.icon" /> {{ $t(`route.${String(item.name)}`, item.meta.title) }}
-        </div>
-      </n-tab>
-      <template #suffix>
-        <Reload />
-        <ContentFullScreen />
-        <DropTabs />
-      </template>
-    </n-tabs>
-    <n-dropdown
-      placement="bottom-start"
-      trigger="manual"
-      :x="x"
-      :y="y"
-      :options="options"
-      :show="showDropdown"
-      :on-clickoutside="onClickoutside"
-      @select="handleSelect"
-    />
+      />
+      <n-dropdown
+        placement="bottom-start" trigger="manual" :x="x" :y="y" :options="options" :show="showDropdown"
+        :on-clickoutside="onClickoutside" @select="handleSelect"
+      />
+    </div>
+    <!-- <span class="m-l-auto" /> -->
+    <n-el class="absolute right-0 flex items-center gap-1 bg-[var(--base-color)] h-full">
+      <Reload />
+      <ContentFullScreen />
+      <DropTabs />
+    </n-el>
   </div>
 </template>
+
+<style scoped>
+.ghost {
+  opacity: 0.5;
+  background: #c4f6d5;
+}
+</style>

src/layouts/components/tab/TabBarItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { RouteLocationNormalized } from 'vue-router'
+
+const { route, value, closable = false } = defineProps<{
+  route: RouteLocationNormalized
+  value: string
+  closable?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: [string]
+}>()
+</script>
+
+<template>
+  <n-el
+    class="cursor-pointer p-x-4 p-y-2 m-x-2px b b-[--divider-color] b-b-[#0000] rounded-[--border-radius]"
+    :class="[
+      value === route.fullPath ? 'c-[--primary-color]' : 'c-[--text-color-2]',
+      value === route.fullPath ? 'bg-[#0000]' : 'bg-[--tab-color]',
+      closable && 'p-r-2',
+    ]"
+    style="transition: box-shadow .3s var(--n-bezier), color .3s var(--n-bezier), background-color .3s var(--n-bezier), border-color .3s var(--n-bezier);"
+  >
+    <div class="flex-center gap-2 text-nowrap">
+      <nova-icon :icon="route.meta.icon" />
+      <span>{{ $t(`route.${String(route.name)}`, route.meta.title) }}</span>
+      <button
+        v-if="closable"
+        type="button"
+        class="bg-transparent h-18px w-18px flex-center text-[var(--close-icon-color)] hover:bg-[var(--close-color-hover)] rounded-3px"
+        style="transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier);"
+        @click.stop="emit('close', route.fullPath)"
+      >
+        <n-icon size="14">
+          <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="currentColor" fill-rule="nonzero"><path d="M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z" /></g></g></svg>
+        </n-icon>
+      </button>
+    </div>
+  </n-el>
+</template>

src/typings/api/login.d.ts

@@ -7,7 +7,7 @@ namespace Api {
       /** 用户id */
       id: number
       /** 用户角色类型 */
-      role: Entity.RoleType
+      role: Entity.RoleType[]
       /** 访问toekn */
       accessToken: string
       /** 刷新toekn */

src/views/demo/permission/permission/index.vue

@@ -4,7 +4,7 @@ import { useAuthStore } from '@/store'
 
 const authStore = useAuthStore()
 const { hasPermission } = usePermission()
-const { role } = authStore.userInfo!
+const { role } = authStore.userInfo
 
 const roleList: Entity.RoleType[] = ['super', 'admin', 'user']
 
@@ -23,7 +23,7 @@ function toggleUserRole(role: Entity.RoleType) {
     </n-button-group>
     <n-h2>v-permission 指令用法</n-h2>
     <n-space>
-      <n-button v-permission="'super'">
+      <n-button v-permission="['super']">
         仅super可见
       </n-button>
       <n-button v-permission="['admin']">
@@ -33,10 +33,10 @@ function toggleUserRole(role: Entity.RoleType) {
 
     <n-h2>usePermission 函数用法</n-h2>
     <n-space>
-      <n-button v-if="hasPermission('super')">
+      <n-button v-if="hasPermission(['super'])">
         super可见
       </n-button>
-      <n-button v-if="hasPermission('admin')">
+      <n-button v-if="hasPermission(['admin'])">
         admin可见
       </n-button>
       <n-button v-if="hasPermission(['admin', 'user'])">
@@ -45,5 +45,3 @@ function toggleUserRole(role: Entity.RoleType) {
     </n-space>
   </n-card>
 </template>
-
-<style scoped></style>