init

2026-01-23 08:00:22 +08:00 · 2023-12-07 21:55:23 +08:00
commit cfeb813b62
401 changed files with 11125 additions and 0 deletions
--- a/src/layouts/components/RoleSelect.vue
+++ b/src/layouts/components/RoleSelect.vue
@@ -0,0 +1,85 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:23:12
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <MeModal ref="modalRef" title="请选择角色" width="360px" class="p-12">
+    <n-radio-group v-model:value="roleCode" class="cus-scroll-y max-h-420 w-full py-16">
+      <n-space vertical :size="24" class="mx-12">
+        <n-radio-button
+          v-for="role in roles"
+          :key="role.id"
+          class="h-36 w-full text-center text-16 leading-36"
+          :class="{ 'bg-primary! color-white!': role.code === roleCode }"
+          :value="role.code"
+        >
+          {{ role.name }}
+        </n-radio-button>
+      </n-space>
+    </n-radio-group>
+
+    <template #footer>
+      <div class="flex">
+        <n-button class="flex-1" size="large" @click="logout()">退出登录</n-button>
+        <n-button
+          :loading="okLoading"
+          class="ml-20 flex-1"
+          type="primary"
+          size="large"
+          :disabled="userStore.currentRole?.code === roleCode"
+          @click="setCurrentRole"
+        >
+          确认
+        </n-button>
+      </div>
+    </template>
+  </MeModal>
+</template>
+
+<script setup>
+import api from '@/api'
+import { MeModal } from '@/components'
+import { useModal } from '@/composables'
+import { useUserStore, useAuthStore } from '@/store'
+
+const userStore = useUserStore()
+const authStore = useAuthStore()
+
+const roles = ref(userStore.roles || [])
+const roleCode = ref(userStore.currentRole?.code ?? roles[0]?.code ?? '')
+
+const [modalRef, okLoading] = useModal()
+function open(options) {
+  modalRef.value?.open({
+    ...options,
+  })
+}
+
+async function setCurrentRole() {
+  try {
+    okLoading.value = true
+    await userStore.switchCurrentRole(roleCode.value)
+    okLoading.value = false
+    $message.success('切换成功')
+    modalRef.value?.handleOk()
+  } catch (error) {
+    console.error(error)
+    okLoading.value = false
+  }
+}
+
+async function logout() {
+  await api.logout()
+  authStore.logout()
+  modalRef.value?.close()
+  $message.success('已退出登录')
+}
+
+defineExpose({
+  open,
+})
+</script>
--- a/src/layouts/components/index.js
+++ b/src/layouts/components/index.js
@@ -0,0 +1 @@
+export { default as RoleSelect } from './RoleSelect.vue'
--- a/src/layouts/default/header/components/UserAvatar.vue
+++ b/src/layouts/default/header/components/UserAvatar.vue
@@ -0,0 +1,83 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:23:46
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-dropdown :options="options" @select="handleSelect">
+    <div class="flex cursor-pointer items-center">
+      <n-avatar round :size="36" :src="userStore.avatar" class="mr-12" />
+      <div v-if="userStore.userInfo" class="flex-col items-center">
+        <span class="text-14">{{ userStore.nickName ?? userStore.username }}</span>
+        <span class="text-12 opacity-50">[{{ userStore.currentRole?.name }}]</span>
+      </div>
+    </div>
+  </n-dropdown>
+
+  <RoleSelect ref="roleSelectRef" />
+</template>
+
+<script setup>
+import { useUserStore, useAuthStore, usePermissionStore } from '@/store'
+import { RoleSelect } from '@/layouts/components'
+import { initUserAndPermissions } from '@/router'
+import api from '@/api'
+
+const router = useRouter()
+const userStore = useUserStore()
+const authStore = useAuthStore()
+const permissionStore = usePermissionStore()
+
+const options = reactive([
+  {
+    label: '个人资料',
+    key: 'profile',
+    icon: () => h('i', { class: 'i-material-symbols:person-outline text-14' }),
+    show: computed(() => permissionStore.accessRoutes?.some((item) => item.path === '/profile')),
+  },
+  {
+    label: '切换角色',
+    key: 'toggleRole',
+    icon: () => h('i', { class: 'i-basil:exchange-solid text-14' }),
+    show: computed(() => userStore.roles.length > 1),
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: () => h('i', { class: 'i-mdi:exit-to-app text-14' }),
+  },
+])
+
+const roleSelectRef = ref(null)
+function handleSelect(key) {
+  switch (key) {
+    case 'profile':
+      router.push('/profile')
+      break
+    case 'toggleRole':
+      roleSelectRef.value?.open({
+        onOk() {
+          initUserAndPermissions().then(() => {
+            router.replace('/')
+          })
+        },
+      })
+      break
+    case 'logout':
+      $dialog.confirm({
+        title: '提示',
+        type: 'info',
+        content: '确认退出？',
+        async confirm() {
+          await api.logout()
+          authStore.logout()
+          $message.success('已退出登录')
+        },
+      })
+      break
+  }
+}
+</script>
--- a/src/layouts/default/header/components/index.js
+++ b/src/layouts/default/header/components/index.js
@@ -0,0 +1,2 @@
+export { default as UserAvatar } from './UserAvatar.vue'
+export { default as AppTab } from './tab/index.vue'
--- a/src/layouts/default/header/components/tab/ContextMenu.vue
+++ b/src/layouts/default/header/components/tab/ContextMenu.vue
@@ -0,0 +1,125 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:23:32
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-dropdown
+    :show="show"
+    :options="options"
+    :x="x"
+    :y="y"
+    placement="bottom-start"
+    @clickoutside="handleHideDropdown"
+    @select="handleSelect"
+  />
+</template>
+
+<script setup>
+import { useTabStore } from '@/store'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  currentPath: {
+    type: String,
+    default: '',
+  },
+  x: {
+    type: Number,
+    default: 0,
+  },
+  y: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const emit = defineEmits(['update:show'])
+
+const tabStore = useTabStore()
+
+const options = computed(() => [
+  {
+    label: '重新加载',
+    key: 'reload',
+    disabled: props.currentPath !== tabStore.activeTab,
+    icon: () => h('i', { class: 'i-mdi:refresh text-14' }),
+  },
+  {
+    label: '关闭',
+    key: 'close',
+    disabled: tabStore.tabs.length <= 1,
+    icon: () => h('i', { class: 'i-mdi:close text-14' }),
+  },
+  {
+    label: '关闭其他',
+    key: 'close-other',
+    disabled: tabStore.tabs.length <= 1,
+    icon: () => h('i', { class: 'i-mdi:arrow-expand-horizontal text-14' }),
+  },
+  {
+    label: '关闭左侧',
+    key: 'close-left',
+    disabled: tabStore.tabs.length <= 1 || props.currentPath === tabStore.tabs[0].path,
+    icon: () => h('i', { class: 'i-mdi:arrow-expand-left text-14' }),
+  },
+  {
+    label: '关闭右侧',
+    key: 'close-right',
+    disabled:
+      tabStore.tabs.length <= 1 ||
+      props.currentPath === tabStore.tabs[tabStore.tabs.length - 1].path,
+    icon: () => h('i', { class: 'i-mdi:arrow-expand-right text-14' }),
+  },
+])
+
+const route = useRoute()
+const actionMap = new Map([
+  [
+    'reload',
+    () => {
+      tabStore.reloadTab(route.fullPath, route.meta?.keepAlive)
+    },
+  ],
+  [
+    'close',
+    () => {
+      tabStore.removeTab(props.currentPath)
+    },
+  ],
+  [
+    'close-other',
+    () => {
+      tabStore.removeOther(props.currentPath)
+    },
+  ],
+  [
+    'close-left',
+    () => {
+      tabStore.removeLeft(props.currentPath)
+    },
+  ],
+  [
+    'close-right',
+    () => {
+      tabStore.removeRight(props.currentPath)
+    },
+  ],
+])
+
+function handleHideDropdown() {
+  emit('update:show', false)
+}
+
+function handleSelect(key) {
+  const actionFn = actionMap.get(key)
+  actionFn && actionFn()
+  handleHideDropdown()
+}
+</script>
--- a/src/layouts/default/header/components/tab/index.vue
+++ b/src/layouts/default/header/components/tab/index.vue
@@ -0,0 +1,101 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:23:38
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div>
+    <n-tabs
+      :value="tabStore.activeTab"
+      :closable="tabStore.tabs.length > 1"
+      :style="`--selected-bg: ${appStore.isDark ? '#1b2429' : '#eaf0f1'}`"
+      type="card"
+      @close="(path) => tabStore.removeTab(path)"
+    >
+      <n-tab
+        v-for="item in tabStore.tabs"
+        :key="item.path"
+        :name="item.path"
+        @click="handleItemClick(item.path)"
+        @contextmenu.prevent="handleContextMenu($event, item)"
+      >
+        {{ item.title }}
+      </n-tab>
+    </n-tabs>
+
+    <ContextMenu
+      v-if="contextMenuOption.show"
+      v-model:show="contextMenuOption.show"
+      :current-path="contextMenuOption.currentPath"
+      :x="contextMenuOption.x"
+      :y="contextMenuOption.y"
+    />
+  </div>
+</template>
+
+<script setup>
+import ContextMenu from './ContextMenu.vue'
+import { useTabStore, useAppStore } from '@/store'
+
+const router = useRouter()
+const appStore = useAppStore()
+const tabStore = useTabStore()
+
+const contextMenuOption = reactive({
+  show: false,
+  x: 0,
+  y: 0,
+  currentPath: '',
+})
+
+const handleItemClick = (path) => {
+  tabStore.setActiveTab(path)
+  router.push(path)
+}
+
+function showContextMenu() {
+  contextMenuOption.show = true
+}
+function hideContextMenu() {
+  contextMenuOption.show = false
+}
+function setContextMenu(x, y, currentPath) {
+  Object.assign(contextMenuOption, { x, y, currentPath })
+}
+
+// 右击菜单
+async function handleContextMenu(e, tagItem) {
+  const { clientX, clientY } = e
+  hideContextMenu()
+  setContextMenu(clientX, clientY, tagItem.path)
+  await nextTick()
+  showContextMenu()
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.n-tabs) {
+  .n-tabs-tab {
+    padding-left: 16px;
+    height: 36px;
+    background: transparent !important;
+    border-radius: 4px !important;
+    margin-right: 4px;
+    &:hover {
+      border: 1px solid var(--primary-color) !important;
+    }
+  }
+  .n-tabs-tab--active {
+    border: 1px solid var(--primary-color) !important;
+    background-color: var(--selected-bg) !important;
+  }
+  .n-tabs-pad,
+  .n-tabs-tab-pad,
+  .n-tabs-scroll-padding {
+    border: none !important;
+  }
+}
+</style>
--- a/src/layouts/default/header/index.vue
+++ b/src/layouts/default/header/index.vue
@@ -0,0 +1,64 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:23:23
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <AppCard class="flex items-center px-12" border-b="1px solid light_border dark:dark_border">
+    <div
+      class="f-c-c cursor-pointer rounded-4 p-6 text-22 transition-all-300 auto-bg-hover"
+      @click="appStore.switchCollapsed"
+    >
+      <i :class="appStore.collapsed ? 'i-line-md-menu-unfold-left' : 'i-line-md-menu-fold-left'" />
+    </div>
+
+    <AppTab class="w-0 flex-1 px-12" />
+
+    <span class="mx-6 opacity-20">|</span>
+
+    <div class="flex flex-shrink-0 items-center px-12 text-18">
+      <i
+        class="mr-16 cursor-pointer"
+        :class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
+        @click="toggleDark"
+      />
+      <i
+        class="mr-16 cursor-pointer"
+        :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
+        @click="toggle"
+      />
+
+      <i
+        class="i-fe:github mr-16 cursor-pointer"
+        @click="handleLinkClick('https://github.com/zclzone/vue-naive-admin/tree/2.x-beta')"
+      />
+      <i
+        class="i-me:gitee mr-16 cursor-pointer"
+        @click="handleLinkClick('https://gitee.com/isme-admin/vue-naive-admin/tree/2.x-beta')"
+      />
+      <UserAvatar />
+    </div>
+  </AppCard>
+</template>
+
+<script setup>
+import { AppTab, UserAvatar } from './components'
+import { useAppStore } from '@/store'
+import { useDark, useToggle, useFullscreen } from '@vueuse/core'
+
+const appStore = useAppStore()
+const isDark = useDark()
+const toggleDark = () => {
+  appStore.toggleDark()
+  useToggle(isDark)()
+}
+
+const { isFullscreen, toggle } = useFullscreen()
+
+function handleLinkClick(link) {
+  window.open(link)
+}
+</script>
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@@ -0,0 +1,41 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:24:19
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div class="wh-full flex">
+    <aside
+      class="flex-col flex-shrink-0 transition-width-300"
+      :class="appStore.collapsed ? 'w-64' : 'w-220'"
+      border-r="1px solid light_border dark:dark_border"
+    >
+      <SideBar />
+    </aside>
+
+    <article class="w-0 flex-col flex-1">
+      <AppHeader :class="`h-${header.height}`" class="flex-shrink-0" />
+      <slot />
+    </article>
+  </div>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import SideBar from './sidebar/index.vue'
+import AppHeader from './header/index.vue'
+
+import settings from '@/settings'
+const { header } = settings
+
+const appStore = useAppStore()
+</script>
+
+<style>
+.collapsed {
+  width: 64px;
+}
+</style>
--- a/src/layouts/default/sidebar/components/SideLogo.vue
+++ b/src/layouts/default/sidebar/components/SideLogo.vue
@@ -0,0 +1,26 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:23:55
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <router-link class="h-60 f-c-c" to="/">
+    <img src="@/assets/images/logo.png" class="h-40" />
+    <h2
+      v-show="!appStore.collapsed"
+      class="ml-10 max-w-140 flex-shrink-0 text-16 font-bold color-primary"
+    >
+      {{ title }}
+    </h2>
+  </router-link>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+const title = import.meta.env.VITE_TITLE
+
+const appStore = useAppStore()
+</script>
--- a/src/layouts/default/sidebar/components/SideMenu.vue
+++ b/src/layouts/default/sidebar/components/SideMenu.vue
@@ -0,0 +1,62 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:24:02
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <n-menu
+    ref="menu"
+    class="side-menu"
+    accordion
+    :indent="18"
+    :collapsed-icon-size="22"
+    :collapsed-width="64"
+    :collapsed="appStore.collapsed"
+    :options="permissionStore.menus"
+    :value="activeKey"
+    @update:value="handleMenuSelect"
+  />
+</template>
+
+<script setup>
+import { useAppStore, usePermissionStore } from '@/store'
+import { isExternal } from '@/utils'
+
+const router = useRouter()
+const route = useRoute()
+const appStore = useAppStore()
+const permissionStore = usePermissionStore()
+
+const activeKey = computed(() => route.meta?.parentKey || route.name)
+
+const menu = ref(null)
+watch(route, async () => {
+  await nextTick()
+  menu.value?.showOption()
+})
+
+function handleMenuSelect(key, item) {
+  if (isExternal(item.path)) {
+    window.open(item.path)
+  } else {
+    router.push(item.path)
+  }
+}
+</script>
+
+<style lang="scss">
+.side-menu:not(.n-menu--collapsed) {
+  .n-menu-item-content {
+    &::before {
+      left: 8px;
+      right: 8px;
+    }
+    &.n-menu-item-content--selected::before {
+      border-left: 4px solid var(--primary-color);
+    }
+  }
+}
+</style>
--- a/src/layouts/default/sidebar/index.vue
+++ b/src/layouts/default/sidebar/index.vue
@@ -0,0 +1,17 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:24:09
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<script setup>
+import SideLogo from './components/SideLogo.vue'
+import SideMenu from './components/SideMenu.vue'
+</script>
+
+<template>
+  <SideLogo border-b="1px solid light_border dark:dark_border" />
+  <SideMenu class="cus-scroll-y mt-4 h-0 flex-1" />
+</template>
--- a/src/layouts/empty/index.vue
+++ b/src/layouts/empty/index.vue
@@ -0,0 +1,11 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/05 21:24:32
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <slot />
+</template>
				`@@ -0,0 +1 @@`
				`export { default as RoleSelect } from './RoleSelect.vue'`