create-jnrs-template-vue 1.1.6 → 1.1.7

package/jnrs-template-vue/.env.development

@@ -3,11 +3,10 @@ ENV = 'development'
 # 是否是 mock 模式
 VITE_USE_MOCK = true
 
-# 开发环境后端接口基地址
-# VITE_BASE_URL = '192.168.10.245:6001'
-VITE_BASE_URL = '192.168.1.120:5001'
+# 后端接口基地址 - 开发环境
+VITE_BASE_URL = '192.168.1.120:6001'
 
-# 应用运行主机
+# 应用运行主机（置空默认为 localhost）
 VITE_APP_HOST = ''
 # 应用运行端口
-VITE_APP_PORT = 5888
+VITE_APP_PORT = 5788

package/jnrs-template-vue/.env.production

@@ -1,4 +1,4 @@
 ENV = 'production'
 
 # 生产环境后端接口基地址
-VITE_BASE_URL = '192.168.1.134:7078'
+VITE_BASE_URL = '192.168.1.120:6001'

package/jnrs-template-vue/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePickerPanel: typeof import('element-plus/es')['ElDatePickerPanel']
@@ -32,6 +33,9 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

package/jnrs-template-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jnrs-template-vue",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "JNRS 信息化管理系统模板",
   "author": "Talia-Tan",
   "private": true,

package/jnrs-template-vue/public/system/menu.json

@@ -27,8 +27,7 @@
       "meta": {
         "title": "系统管理",
         "icon": "Tools",
-        "todoCount": 99,
-        "permissions": ["system:view"]
+        "todoCount": 99
       },
       "children": [
         {

package/jnrs-template-vue/src/api/request.ts

@@ -10,6 +10,7 @@ import { ElMessage } from 'element-plus'
 import { createAxiosInstance } from '@jnrs/core/axios'
 import type { BusinessRequest, BusinessResponse } from '@jnrs/core/axios'
 import { useMockStore, useAuthStore } from '@/stores'
+import { handleRouter } from '@jnrs/vue-core/router'
 
 const axiosInstance = createAxiosInstance({
   handleMessageFn: ElMessage,
@@ -17,7 +18,9 @@ const axiosInstance = createAxiosInstance({
     const { token } = useAuthStore()
     return token
   },
-  handleNoAuthFn: () => {}
+  handleNoAuthFn: () => {
+    handleRouter({ name: 'Login' })
+  }
 })
 
 /**

package/jnrs-template-vue/src/api/system/index.ts

@@ -1,19 +1,7 @@
 import { request } from '../request'
-import type { Dict, DictItem, User } from '@jnrs/shared'
+import type { Dict, DictItem, User, Role } from '@jnrs/shared'
 import type { MenuItem } from '@jnrs/vue-core'
 
-// 登录结果
-export interface LoginResult extends User {
-  token: string
-  dict: Dict
-}
-
-// 修改密码
-interface PasswordChange {
-  userId: number
-  password: string
-}
-
 // 菜单
 export const MenuApi = (): Promise<MenuItem[]> => {
   return request({
@@ -23,12 +11,15 @@ export const MenuApi = (): Promise<MenuItem[]> => {
   })
 }
 
+// 登录
 interface LoginParams {
   account: string
   password: string
 }
-
-// 登录
+export interface LoginResult extends User {
+  token: string
+  dict: Dict
+}
 export const LoginApi = (data: LoginParams): Promise<LoginResult> => {
   return request({
     url: '/api/auth/login',
@@ -55,6 +46,10 @@ export const UserInfoApi = (): Promise<User> => {
 }
 
 // 修改密码
+interface PasswordChange {
+  userId: number
+  password: string
+}
 export const PasswordChangeApi = (data: PasswordChange) => {
   return request({
     url: '/api/auth/change-password',
@@ -87,3 +82,12 @@ export const DictChangeApi = (data: DictItem) => {
     data
   })
 }
+
+// 获取角色列表
+export const RoleApi = (): Promise<Role[]> => {
+  return request({
+    url: '/api/role-manager',
+    method: 'get',
+    noAuth: true
+  })
+}

package/jnrs-template-vue/src/directives/permissions.ts

@@ -0,0 +1,28 @@
+import type { Directive } from 'vue'
+import { hasPermission } from '@/utils/permissions'
+
+export type PermissionsDirective = Directive<HTMLElement, string[]>
+
+declare module 'vue' {
+  export interface ComponentCustomProperties {
+    vPermissions: PermissionsDirective
+  }
+}
+
+export const permissions = {
+  mounted(el, binding) {
+    const { value, modifiers } = binding
+    const hasPerm = hasPermission(value)
+
+    if (!hasPerm) {
+      if (modifiers.display) {
+        el.style.display = 'none'
+      } else if (modifiers.disabled) {
+        el.setAttribute('disabled', 'disabled')
+        el.classList.add('disabled')
+      } else {
+        el.remove()
+      }
+    }
+  }
+} satisfies PermissionsDirective

package/jnrs-template-vue/src/layout/SideMenu.vue

@@ -3,9 +3,7 @@ import SideMenuItem from './SideMenuItem.vue'
 import { storeToRefs } from 'pinia'
 import { useRoute } from '@jnrs/vue-core/router'
 import { useSystemStore, useMenuStore } from '@/stores'
-import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
 const systemStore = useSystemStore()
 const { menuCollapse } = storeToRefs(systemStore)
 const { toggleCollapse } = systemStore
@@ -18,7 +16,7 @@ const route = useRoute()
   <el-aside class="sideMenu">
     <div class="logo" :class="{ logo_collapse: menuCollapse }">
       <img class="logo_img" src="@/assets/images/common/jnrs-white.svg" alt="jnrs" />
-      <span class="logo_text">{{ t('main.title') }}</span>
+      <span class="logo_text">{{ $t('main.title') }}</span>
     </div>
     <el-icon
       class="collapseBtn"
@@ -136,7 +134,7 @@ $mainFontColor: rgba(255, 255, 255, 0.8);
 
   .leftSide_menu {
     border: none;
-    min-width: 180px;
+    min-width: 200px;
     --el-menu-text-color: $mainFontColor;
     --el-menu-active-color: $mainFontColor;
     --el-menu-bg-color: none;

package/jnrs-template-vue/src/layout/TopHeader.vue

@@ -4,13 +4,14 @@ import { ref, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElMessageBox } from 'element-plus'
 import { handleRouter } from '@jnrs/vue-core/router'
-import { useSystemStore, useAuthStore } from '@/stores'
+import { useSystemStore, useAuthStore, useMenuStore } from '@/stores'
 import { useAvatar } from '@/composables/common/useAvatar'
 import { LogoutApi } from '@/api/system'
 import { getDictLabel, getDictColor } from '@/utils/common'
 
 const { avatar } = useAvatar()
-const { userInfo, asyncClearAuth } = useAuthStore()
+const { userInfo, clearAuth } = useAuthStore()
+const { clearMenu } = useMenuStore()
 
 const roleLabel = computed(() => getDictLabel('role', userInfo?.role || ''))
 const roleColor = computed(() => getDictColor('role', userInfo?.role || ''))
@@ -28,7 +29,8 @@ const handleLogout = async () => {
       type: 'warning'
     })
     await LogoutApi()
-    await asyncClearAuth()
+    await clearAuth()
+    await clearMenu()
     handleRouter({ name: 'Login' }, 'replace')
   } catch {}
 }
@@ -73,7 +75,7 @@ const showGlobalSetting = () => {
         <div class="userMenu_dropdown">
           <img class="userMenu_dropdown_avatar" :src="avatar" alt="avatar" />
           <b>
-            {{ userInfo?.name }}
+            <span>{{ userInfo?.name }}</span>
             <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo?.role">[{{ roleLabel }}]</span>
           </b>
           <div class="loginDateTime" v-if="userInfo?.loginDateTime">
@@ -152,7 +154,9 @@ $topHoverSize: 35px;
     transition: all 0.25s ease;
     cursor: pointer;
     &:hover {
-      color: var(--jnrs-color-primary);
+      span {
+        color: var(--jnrs-color-primary) !important;
+      }
       .userMenu_icon {
         color: var(--jnrs-color-primary);
       }
@@ -188,7 +192,7 @@ $topHoverSize: 35px;
     }
   }
   .userMenu_roleName {
-    display: inline;
+    margin-left: 4px;
     color: var(--jnrs-color-primary);
   }
 }

package/jnrs-template-vue/src/locales/index.ts

@@ -1,6 +1,7 @@
 import { createI18n } from 'vue-i18n'
-import zhCN from './zhCn'
+import zhCn from './zhCn'
 import en from './en'
+import { zhCn as vueCore_zhCn, en as vueCore_en } from '@jnrs/vue-core/locales'
 
 const i18n = createI18n({
   legacy: false, // 启用 Composition API 模式
@@ -8,8 +9,14 @@ const i18n = createI18n({
   locale: 'zhCn',
   fallbackLocale: 'en',
   messages: {
-    zhCn: zhCN,
-    en: en
+    zhCn: {
+      ...zhCn,
+      ...vueCore_zhCn
+    },
+    en: {
+      ...en,
+      ...vueCore_en
+    }
   }
 })
 

package/jnrs-template-vue/src/main.ts

@@ -10,9 +10,12 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import { router } from './router'
 import locales from './locales/index'
+import { permissions } from './directives/permissions'
 
 const app = createApp(App)
 
+app.directive('permissions', permissions)
+
 // element-plus 自动引入所有图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)

package/jnrs-template-vue/src/router/index.ts

@@ -1,12 +1,35 @@
 import { LAYOUT_NAME, GLOBAL_COMPONENT, routes } from './routes'
 import { createVueRouter } from '@jnrs/vue-core/router'
 import type { FileModules, RouteLocationNormalizedGeneric } from '@jnrs/vue-core/router'
+import type { MenuItem } from '@jnrs/vue-core'
 import { useAuthStore, useMenuStore } from '@/stores'
 import { MenuApi } from '@/api/system'
-import { hasPermission } from '@jnrs/shared'
+import { hasMenuViewPermission } from '@/utils/permissions'
 
 const fileModules = import.meta.glob('/src/views/**/*.vue') as FileModules
 
+/**
+ * 递归过滤菜单树，仅保留当前用户有权限访问的节点
+ * TODO 如果是后端返回的数据就没必要判断了，后端会判断
+ */
+function filterMenuByPermission(menus: MenuItem[]): MenuItem[] {
+  return menus
+    .map((item) => {
+      const children = item.children ? filterMenuByPermission(item.children) : []
+
+      const hasSelfPermission = hasMenuViewPermission(item.meta?.permissions)
+
+      if (hasSelfPermission) {
+        return { ...item, ...(children.length > 0 ? { children } : {}) }
+      }
+      if (children.length > 0) {
+        return { ...item, children }
+      }
+      return null
+    })
+    .filter(Boolean) as MenuItem[]
+}
+
 const router = createVueRouter({
   options: {
     routes
@@ -19,22 +42,28 @@ const router = createVueRouter({
     if (to.meta.noAuth) return true
 
     // 页面刷新处理：未[身份验证]时，重定向到[身份验证]页
-    const { hasAuthenticated, userInfo } = useAuthStore()
+    const { hasAuthenticated } = useAuthStore()
     if (!hasAuthenticated) {
       return { name: 'Login', query: { redirect: to.path }, replace: true }
     }
 
     // 校验访问权限
-    if (to.meta.permissions && !hasPermission(to.meta.permissions, userInfo?.permissions || [])) {
+    if (to.meta.permissions && !hasMenuViewPermission(to.meta.permissions)) {
       return { name: '403' }
     }
 
-    // 页面刷新处理：菜单未获取时，先获取菜单，再重定向当前路由，即重新开始进入handleBeforeEach
+    // 页面刷新处理：菜单未获取时，先获取菜单，再重定向当前路由，即重新开始进入 handleBeforeEach
     const { hasFetchedAsyncMenus, asyncSetMenus } = useMenuStore()
     if (!hasFetchedAsyncMenus) {
       try {
-        const res = await MenuApi()
-        await asyncSetMenus(res)
+        const menuRes = await MenuApi()
+        /**
+         * 校验用户的菜单访问权限，进行菜单筛选
+         * TODO 如果是后端返回的数据就没必要校验筛选了，后端会筛选
+         */
+        const perRes = filterMenuByPermission(menuRes)
+
+        await asyncSetMenus(perRes)
         return to.fullPath
       } catch (error) {
         throw error

package/jnrs-template-vue/src/router/routes.ts

@@ -10,25 +10,37 @@ export const LAYOUT_NAME = 'Layout'
 export const GLOBAL_COMPONENT = import('@/layout/BlankLayout.vue')
 
 export const routes = [
-  {
-    path: '/login',
-    component: () => import('@/layout/BlankLayout.vue'),
-    meta: { title: '登录' },
-    children: [
-      {
-        path: '',
-        name: 'Login',
-        meta: { title: '登录', noAuth: true },
-        component: () => import('@/views/login/index.vue')
-      }
-    ]
-  },
   // {
-  //   name: 'Login',
   //   path: '/login',
-  //   component: () => import('@/views/login/index.vue'),
-  //   meta: { title: '登录', noAuth: true, global: true }
+  //   component: () => import('@/layout/BlankLayout.vue'),
+  //   meta: { title: '登录' },
+  //   children: [
+  //     {
+  //       path: '',
+  //       name: 'Login',
+  //       meta: { title: '登录', noAuth: true },
+  //       component: () => import('@/views/login/index.vue')
+  //     }
+  //   ]
   // },
+  {
+    name: '403',
+    path: '/403',
+    component: () => import('@/views/common/403.vue'),
+    meta: { title: '403', noAuth: true, global: true }
+  },
+  {
+    name: '404',
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/common/404.vue'),
+    meta: { title: '404', global: true }
+  },
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录', noAuth: true, global: true }
+  },
   {
     name: LAYOUT_NAME,
     path: '/',
@@ -45,17 +57,5 @@ export const routes = [
         component: () => import('@/views/home/index.vue')
       }
     ]
-  },
-  {
-    name: '403',
-    path: '/403',
-    component: () => import('@/views/common/403.vue'),
-    meta: { title: '403', noAuth: true, global: true }
-  },
-  {
-    name: '404',
-    path: '/:pathMatch(.*)*',
-    component: () => import('@/views/common/404.vue'),
-    meta: { title: '404', global: true }
   }
 ]

package/jnrs-template-vue/src/stores/mock.ts

@@ -1,13 +1,15 @@
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
 /**
  * Mock仓库
  * @returns isMock 是否使用mock数据
  */
 export const useMockStore = defineStore(
-  'mock',
+  'jnrs-app-mock',
   () => {
-    const isMock = import.meta.env.VITE_USE_MOCK === 'true' // 是否使用mock数据
+    // 是否使用mock数据
+    const isMock = ref(import.meta.env.VITE_USE_MOCK === 'true')
 
     return { isMock }
   },

package/jnrs-template-vue/src/utils/permissions.ts

@@ -0,0 +1,16 @@
+import { hasPermissionWithSuffix } from '@jnrs/shared'
+import { useAuthStore } from '@/stores'
+
+// 菜单查看权限
+export function hasMenuViewPermission(requiredPerms: string[] | undefined) {
+  const { userInfo } = useAuthStore()
+  const userPerms = userInfo?.permissions || []
+  return hasPermissionWithSuffix(requiredPerms, userPerms, ':view', 'some')
+}
+
+// 按钮操作权限
+export function hasPermission(requiredPerms: string[] | undefined) {
+  const { userInfo } = useAuthStore()
+  const userPerms = userInfo?.permissions || []
+  return hasPermissionWithSuffix(requiredPerms, userPerms)
+}

package/jnrs-template-vue/src/views/common/403.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { router } from '@/router'
-import { useRoute, handleRouter } from '@jnrs/vue-core/router'
-
-const route = useRoute()
+import { handleRouter } from '@jnrs/vue-core/router'
 
 const goLogin = () => {
-  handleRouter({ name: 'Login', query: { redirect: route.fullPath } }, 'replace')
+  handleRouter({ name: 'Login' }, 'replace')
 }
 const goHome = () => {
   handleRouter({ path: '/' }, 'replace')
@@ -22,9 +20,7 @@ const goBack = () => {
       <h3>抱歉，您访问的资源权限受限</h3>
       <div class="main_mid_btn">
         <el-button @click="goLogin" style="margin-right: 20px">重新登录</el-button>
-        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">
-          返回首页
-        </el-button>
+        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">返回首页</el-button>
         <el-button type="primary" @click="goBack">返回上一页</el-button>
       </div>
     </div>

package/jnrs-template-vue/src/views/common/404.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { router } from '@/router'
-import { useRoute, handleRouter } from '@jnrs/vue-core/router'
-
-const route = useRoute()
+import { handleRouter } from '@jnrs/vue-core/router'
 
 const goLogin = () => {
-  handleRouter({ name: 'Login', query: { redirect: route.fullPath } }, 'replace')
+  handleRouter({ name: 'Login' }, 'replace')
 }
 const goHome = () => {
   handleRouter({ path: '/' }, 'replace')
@@ -22,9 +20,7 @@ const goBack = () => {
       <h3>抱歉，您访问的页面不存在</h3>
       <div class="main_mid_btn">
         <el-button @click="goLogin" style="margin-right: 20px">重新登录</el-button>
-        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">
-          返回首页
-        </el-button>
+        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">返回首页</el-button>
         <el-button type="primary" @click="goBack">返回上一页</el-button>
       </div>
     </div>

package/jnrs-template-vue/src/views/home/index.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus'
 import { MenuApi, LoginApi, UserInfoApi } from '@/api/system'
 import { NotFoundApi, NoAuth } from '@/api/mock'
 import { handleRouter } from '@jnrs/vue-core/router'
 import type { MenuItem } from '@jnrs/vue-core'
+import { hasPermission } from '@/utils/permissions'
+import { useMockStore } from '@/stores'
+
+const { isMock } = storeToRefs(useMockStore())
 
 const loginParams = ref({
-  account: 'admin',
+  account: 'user',
   password: '123456'
 })
 
@@ -15,9 +20,7 @@ const routeOptions = ref<MenuItem[]>([])
 const currentRoute = ref('')
 const datePicker = ref(new Date())
 
-onMounted(() => {
-  handleInfoApi()
-})
+onMounted(() => {})
 
 const handleInfoApi = async () => {
   try {
@@ -32,7 +35,6 @@ const handleMenuApi = async () => {
   try {
     const res = await MenuApi()
     routeOptions.value = res
-    console.log(res)
   } catch (error) {
     console.log(error)
   }
@@ -71,29 +73,52 @@ const handleRouteChange = () => {
     name: currentRoute.value
   })
 }
-
-// import { MyButton, MyModal } from '../src'  // 直接导入本地源码
-// import { useUserStore } from '../src'
 </script>
 
 <template>
   <div>
-    <h1>Playground - 测试组件</h1>
+    <h3>Playground - 功能测试</h3>
+    <p>权限测试（admin 账号拥有全部权限，请用非 admin 账号测试该功能）</p>
+    <ul>
+      <li>
+        <span>有权限：(期望：正常显示按钮)</span>
+        <el-button type="primary" size="small" v-permissions="['mine:view']">添加</el-button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮禁用 -> UI 组件：使用 UI 框架提供的禁用属性)</span>
+        <el-button type="primary" size="small" :disabled="!hasPermission(['test:del'])">删除</el-button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮禁用 -> 原生元素：添加 disabled 属性和类名)</span>
+        <button size="small" v-permissions.disabled="['test:del']">删除</button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮不可见 -> 添加样式 display:none)</span>
+        <button size="small" v-permissions.display="['test:del']">删除</button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮不可见 -> remove HTMLElement)</span>
+        <button size="small" v-permissions="['test:del']">删除</button>
+      </li>
+    </ul>
     <p>网络请求测试</p>
+    <div>
+      <span>服务器类型：</span>
+      <el-switch v-model="isMock" active-text="Mock 服务器" inactive-text="后端服务器" />
+    </div>
     <el-button-group>
-      <el-button type="primary" size="small" @click="handleMenuApi">GET</el-button>
+      <el-button type="primary" size="small" @click="handleMenuApi">获取完整菜单数据</el-button>
+      <el-button type="primary" size="small" @click="handleInfoApi">获取用户数据</el-button>
       <el-button type="primary" size="small" @click="handleNotFoundApi">404</el-button>
       <el-button type="primary" size="small" @click="handleNoAuth()">暂无权限</el-button>
-      <el-button type="primary" size="small" @click="handleNoAuth(false)">
-        暂无权限(不显示Msg)
-      </el-button>
+      <el-button type="primary" size="small" @click="handleNoAuth(false)">暂无权限(不显示 Message)</el-button>
     </el-button-group>
-    <el-input v-model="loginParams.account" size="small" style="width: 150px">
+    <el-input v-model="loginParams.account" size="small" style="width: 200px">
       <template #append>
-        <el-button size="small" @click="handleLogin">登录</el-button>
+        <el-button size="small" @click="handleLogin">验证登录接口</el-button>
       </template>
     </el-input>
-    <p>路由测试</p>
+    <p>完整路由测试（先点击按钮，获取完整菜单数据）</p>
     <el-cascader
       v-model="currentRoute"
       :options="routeOptions"
@@ -111,8 +136,17 @@ const handleRouteChange = () => {
     </el-cascader>
     <p>Element 组件测试</p>
     <el-date-picker-panel v-model="datePicker" />
-    <!-- <MyButton type="primary">测试按钮</MyButton>
-    <MyModal v-model="show">内容</MyModal> -->
   </div>
   <router-view></router-view>
 </template>
+
+<style scoped lang="scss">
+h3 {
+  color: var(--jnrs-color-primary);
+}
+p {
+  margin: 24px 0 8px;
+  color: var(--jnrs-background-primary);
+  background: var(--jnrs-font-primary);
+}
+</style>