create-jnrs-template-vue 1.1.5 → 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/.prettierrc.json

@@ -1,7 +1,7 @@
 {
   "semi": false,
   "singleQuote": true,
-  "printWidth": 100,
+  "printWidth": 120,
   "tabWidth": 2,
   "useTabs": false,
   "trailingComma": "none",

package/jnrs-template-vue/auto-imports.d.ts

@@ -6,5 +6,6 @@
 // biome-ignore lint: disable
 export {}
 declare global {
+  const ElMessage: typeof import('element-plus/es').ElMessage
   const ElMessageBox: typeof import('element-plus/es').ElMessageBox
 }

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

@@ -17,21 +17,35 @@ 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']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     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']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElUpload: typeof import('element-plus/es')['ElUpload']
+    ElWatermark: typeof import('element-plus/es')['ElWatermark']
   }
   export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']

package/jnrs-template-vue/package.json

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

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

@@ -35,8 +35,8 @@
           "name": "SystemMine",
           "meta": {
             "title": "个人中心",
-            "icon": "User",
-            "todoCount": 99
+            "todoCount": 99,
+            "permissions": ["mine:view", "mine:edit"]
           },
           "component": "/system/mine/index"
         },
@@ -45,19 +45,38 @@
           "name": "SystemUser",
           "meta": {
             "title": "用户管理",
-            "icon": "User",
-            "todoCount": 0
+            "todoCount": 0,
+            "permissions": ["user:view", "user:edit"]
           },
-          "component": "/system/user/index"
+          "component": "/system/user/index",
+          "redirect": "/crud"
         },
         {
           "path": "/system/role",
           "name": "SystemRole",
           "meta": {
-            "title": "(redirect test)"
+            "title": "角色管理",
+            "permissions": ["role:view", "role:edit"]
           },
-          "component": "/system/role/index",
-          "redirect": "/crud"
+          "component": "/system/role/index"
+        },
+        {
+          "path": "/system/dict",
+          "name": "SystemDict",
+          "meta": {
+            "title": "字典管理",
+            "permissions": ["dict:view", "dict:edit"]
+          },
+          "component": "/system/dict/index"
+        },
+        {
+          "path": "/system/menu",
+          "name": "SystemMenu",
+          "meta": {
+            "title": "菜单管理",
+            "permissions": ["menu:view", "menu:edit"]
+          },
+          "component": "/system/menu/index"
         }
       ]
     }

package/jnrs-template-vue/src/App.vue

@@ -5,8 +5,8 @@ import { ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-CN'
 import en from 'element-plus/es/locale/lang/en'
 import { useI18n } from 'vue-i18n'
-import { changeLocales as changeLocalesForShared } from '@jnrs/shared'
-import { changeLocales as changeLocalesForCore } from '@jnrs/core'
+import { changeLocales as changeLocalesForShared } from '@jnrs/shared/locales'
+import { changeLocales as changeLocalesForCore } from '@jnrs/core/locales'
 
 const { locale } = useI18n()
 const { theme } = useSystemStore()

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/{base → system}/index.ts

@@ -1,35 +1,25 @@
 import { request } from '../request'
-import type { Dict } from '@/types'
-import type { User } from '@/types'
+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 = () => {
-  return request<MenuItem[]>({
+export const MenuApi = (): Promise<MenuItem[]> => {
+  return request({
     url: '/system/menu.json', // /public 文件夹下
     mockUrl: '/mock/menu',
     method: 'get'
   })
 }
 
+// 登录
 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',
@@ -48,14 +38,18 @@ export const LogoutApi = () => {
 }
 
 // 获取用户信息
-export const UserInfoApi = () => {
+export const UserInfoApi = (): Promise<User> => {
   return request({
     url: '/api/auth/user-info',
     method: 'get'
   })
 }
 
-//修改密码
+// 修改密码
+interface PasswordChange {
+  userId: number
+  password: string
+}
 export const PasswordChangeApi = (data: PasswordChange) => {
   return request({
     url: '/api/auth/change-password',
@@ -63,3 +57,37 @@ export const PasswordChangeApi = (data: PasswordChange) => {
     data
   })
 }
+
+// 获取字典列表
+export const DictApi = (): Promise<DictItem[]> => {
+  return request({
+    url: '/api/dict-manager',
+    method: 'get'
+  })
+}
+
+// 获取单个字典
+export const DictDetailApi = (id: string) => {
+  return request({
+    url: `/api/dict-manager/detail/${id}`,
+    method: 'get'
+  })
+}
+
+// 修改单个字典
+export const DictChangeApi = (data: DictItem) => {
+  return request({
+    url: '/api/dict-manager/detail',
+    method: 'post',
+    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/RouterTabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
-import type { MenuItem } from '@/types'
+import type { MenuItem } from '@jnrs/vue-core'
 import { handleRouter, getRoutes, useRoute } from '@jnrs/vue-core/router'
 
 // 初始化时添加当前路由

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/SideMenuItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useSystemStore } from '@/stores'
-import type { MenuItem } from '@/types'
+import type { MenuItem } from '@jnrs/vue-core'
 
 defineProps<{
   listItem: MenuItem

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

@@ -4,16 +4,17 @@ 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/base/index'
+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))
+const roleLabel = computed(() => getDictLabel('role', userInfo?.role || ''))
+const roleColor = computed(() => getDictColor('role', userInfo?.role || ''))
 
 const systemStore = useSystemStore()
 const { documentFullscreen } = storeToRefs(systemStore)
@@ -28,7 +29,8 @@ const handleLogout = async () => {
       type: 'warning'
     })
     await LogoutApi()
-    await asyncClearAuth()
+    await clearAuth()
+    await clearMenu()
     handleRouter({ name: 'Login' }, 'replace')
   } catch {}
 }
@@ -61,34 +63,24 @@ const showGlobalSetting = () => {
         <component :is="!documentFullscreen ? 'FullScreen' : 'Rank'" />
       </el-icon>
       <!-- 头像和用户名 -->
-      <el-popover
-        placement="bottom"
-        trigger="click"
-        :teleported="false"
-        :width="260"
-        :hide-after="0"
-      >
+      <el-popover placement="bottom" trigger="click" :teleported="false" :width="260" :hide-after="0">
         <template #reference>
           <span class="userMenu_reference">
             <img class="userMenu_avatar" :src="avatar" alt="avatar" />
-            <span>{{ userInfo.name }}</span>
-            <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo.role">
-              [{{ roleLabel }}]
-            </span>
+            <span>{{ userInfo?.name }}</span>
+            <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo?.role">[{{ roleLabel }}]</span>
             <el-icon class="userMenu_icon"><arrow-down /></el-icon>
           </span>
         </template>
         <div class="userMenu_dropdown">
           <img class="userMenu_dropdown_avatar" :src="avatar" alt="avatar" />
           <b>
-            {{ userInfo.name }}
-            <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo.role">
-              [{{ roleLabel }}]
-            </span>
+            <span>{{ userInfo?.name }}</span>
+            <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo?.role">[{{ roleLabel }}]</span>
           </b>
-          <div class="loginDateTime">
+          <div class="loginDateTime" v-if="userInfo?.loginDateTime">
             <span>登录时间</span>
-            <p>{{ userInfo.loginDateTime }}</p>
+            <p>{{ userInfo?.loginDateTime }}</p>
           </div>
           <div class="userMenu_dropdown_btn">
             <el-button
@@ -102,9 +94,7 @@ const showGlobalSetting = () => {
             >
               个人中心
             </el-button>
-            <el-button type="danger" icon="SwitchButton" @click="handleLogout()">
-              退出系统
-            </el-button>
+            <el-button type="danger" icon="SwitchButton" @click="handleLogout()">退出系统</el-button>
           </div>
         </div>
       </el-popover>
@@ -164,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);
       }
@@ -200,7 +192,7 @@ $topHoverSize: 35px;
     }
   }
   .userMenu_roleName {
-    display: inline;
+    margin-left: 4px;
     color: var(--jnrs-color-primary);
   }
 }

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

@@ -1,7 +1,31 @@
 <script setup lang="ts">
+import { ref, watch, toRefs } from 'vue'
 import SideMenu from './SideMenu.vue'
 import TopHeader from './TopHeader.vue'
 import RouterTabs from './RouterTabs.vue'
+import { useAuthStore, useSystemStore } from '@/stores'
+
+const watermarkFont = ref({
+  color: 'rgba(0, 0, 0, 0)',
+  fontSize: 12
+})
+
+const { userInfo } = useAuthStore()
+
+const { computedThemeMode } = toRefs(useSystemStore())
+watch(
+  computedThemeMode,
+  (newVal) => {
+    if (newVal === 'dark') {
+      watermarkFont.value.color = 'rgba(255, 255, 255, .06)'
+    } else {
+      watermarkFont.value.color = 'rgba(0, 0, 0, .06)'
+    }
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <template>
@@ -13,11 +37,17 @@ import RouterTabs from './RouterTabs.vue'
       </el-header>
       <RouterTabs />
       <el-main>
-        <router-view v-slot="{ Component }">
-          <keep-alive>
-            <component :is="Component" />
-          </keep-alive>
-        </router-view>
+        <el-watermark
+          :font="watermarkFont"
+          :content="[userInfo?.name, userInfo?.workNo]"
+          style="width: 100%; height: 100%"
+        >
+          <router-view v-slot="{ Component }">
+            <keep-alive>
+              <component :is="Component" />
+            </keep-alive>
+          </router-view>
+        </el-watermark>
       </el-main>
     </el-container>
   </el-container>

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,11 +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 { changeLocales as changeLocalesForShared } from '@jnrs/shared'
-changeLocalesForShared('en')
+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,11 +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/base/index'
+import { MenuApi } from '@/api/system'
+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
@@ -14,21 +38,32 @@ const router = createVueRouter({
   layoutName: LAYOUT_NAME,
   globalComponent: GLOBAL_COMPONENT,
   handleBeforeEach: async (to: RouteLocationNormalizedGeneric) => {
-    // 如果是不需要授权的页面，直接放行
+    // 如果是不需要[身份验证]的页面，直接放行
     if (to.meta.noAuth) return true
 
-    // 页面刷新处理：未授权时，重定向到授权页
+    // 页面刷新处理：未[身份验证]时，重定向到[身份验证]页
     const { hasAuthenticated } = useAuthStore()
     if (!hasAuthenticated) {
       return { name: 'Login', query: { redirect: to.path }, replace: true }
     }
 
-    // 页面刷新处理：菜单未获取时，先获取菜单，再重定向当前路由，即重新开始进入handleBeforeEach
+    // 校验访问权限
+    if (to.meta.permissions && !hasMenuViewPermission(to.meta.permissions)) {
+      return { name: '403' }
+    }
+
+    // 页面刷新处理：菜单未获取时，先获取菜单，再重定向当前路由，即重新开始进入 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