create-jnrs-template-vue 1.1.5 → 1.1.6

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,31 @@ declare module 'vue' {
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
+    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']
+    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.6",
   "description": "JNRS 信息化管理系统模板",
   "author": "Talia-Tan",
   "private": true,

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

@@ -27,7 +27,8 @@
       "meta": {
         "title": "系统管理",
         "icon": "Tools",
-        "todoCount": 99
+        "todoCount": 99,
+        "permissions": ["system:view"]
       },
       "children": [
         {
@@ -35,8 +36,8 @@
           "name": "SystemMine",
           "meta": {
             "title": "个人中心",
-            "icon": "User",
-            "todoCount": 99
+            "todoCount": 99,
+            "permissions": ["mine:view", "mine:edit"]
           },
           "component": "/system/mine/index"
         },
@@ -45,19 +46,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/{base → system}/index.ts

@@ -1,6 +1,5 @@
 import { request } from '../request'
-import type { Dict } from '@/types'
-import type { User } from '@/types'
+import type { Dict, DictItem, User } from '@jnrs/shared'
 import type { MenuItem } from '@jnrs/vue-core'
 
 // 登录结果
@@ -16,8 +15,8 @@ interface PasswordChange {
 }
 
 // 菜单
-export const MenuApi = () => {
-  return request<MenuItem[]>({
+export const MenuApi = (): Promise<MenuItem[]> => {
+  return request({
     url: '/system/menu.json', // /public 文件夹下
     mockUrl: '/mock/menu',
     method: 'get'
@@ -48,14 +47,14 @@ export const LogoutApi = () => {
 }
 
 // 获取用户信息
-export const UserInfoApi = () => {
+export const UserInfoApi = (): Promise<User> => {
   return request({
     url: '/api/auth/user-info',
     method: 'get'
   })
 }
 
-//修改密码
+// 修改密码
 export const PasswordChangeApi = (data: PasswordChange) => {
   return request({
     url: '/api/auth/change-password',
@@ -63,3 +62,28 @@ 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
+  })
+}

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/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

@@ -6,14 +6,14 @@ import { ElMessageBox } from 'element-plus'
 import { handleRouter } from '@jnrs/vue-core/router'
 import { useSystemStore, useAuthStore } 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 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)
@@ -61,34 +61,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>
+            {{ userInfo?.name }}
+            <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 +92,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>

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/main.ts

@@ -10,8 +10,6 @@ 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')
 
 const app = createApp(App)
 

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

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

package/jnrs-template-vue/src/types/index.d.ts

@@ -0,0 +1,6 @@
+// declare module '@jnrs/shared' {
+//   interface User {
+//     account: string
+//     loginDateTime: string
+//   }
+// }

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

@@ -38,15 +38,15 @@ const goBack = () => {
   justify-content: center;
   width: 100%;
   height: 100vh;
-  background: #f9fafe;
   overflow: hidden;
+  background: var(--jnrs-background-primary);
   .main_mid {
     text-align: center;
     img {
       width: 300px;
     }
     h3 {
-      color: #2a63a4;
+      color: var(--jnrs-font-primary);
     }
     .main_mid_btn {
       margin-top: 30px;

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

@@ -38,15 +38,15 @@ const goBack = () => {
   justify-content: center;
   width: 100%;
   height: 100vh;
-  background: #f9fafe;
   overflow: hidden;
+  background: var(--jnrs-background-primary);
   .main_mid {
     text-align: center;
     img {
       width: 300px;
     }
     h3 {
-      color: #2a63a4;
+      color: var(--jnrs-font-primary);
     }
     .main_mid_btn {
       margin-top: 30px;

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { MenuApi, LoginApi, UserInfoApi } from '@/api/base'
+import { MenuApi, LoginApi, UserInfoApi } from '@/api/system'
 import { NotFoundApi, NoAuth } from '@/api/mock'
 import { handleRouter } from '@jnrs/vue-core/router'
-import type { MenuItem } from '@/types'
+import type { MenuItem } from '@jnrs/vue-core'
 
 const loginParams = ref({
   account: 'admin',

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
-import { LoginApi } from '@/api/base/index'
+import { LoginApi } from '@/api/system'
 import { useAuthStore } from '@/stores'
 import { handleRouter, useRoute } from '@jnrs/vue-core/router'
 import { isWeakPwd } from '@jnrs/shared/validator'
@@ -9,6 +9,7 @@ import { formatDateTime, formatWeekday } from '@jnrs/shared'
 
 const route = useRoute()
 const loading = ref(false)
+const { setUserInfo, setToken, setDict } = useAuthStore()
 
 // 表单 ref
 const ruleFormRef = ref<FormInstance>()
@@ -34,14 +35,15 @@ const submitForm = () => {
     loading.value = true
     try {
       const res = await LoginApi(ruleForm.value)
-      const { token, dict, ...userInfo } = res
-      userInfo.loginDateTime = formatDateTime() + ' ' + formatWeekday()
-      const { asyncSetAuth } = useAuthStore()
-      await asyncSetAuth({
-        token: token,
-        dict: dict,
-        userInfo: userInfo
+      const { token, dict, ...restParameter } = res
+      const loginDateTime = formatDateTime() + ' ' + formatWeekday()
+      setUserInfo({
+        ...restParameter,
+        account: ruleForm.value.account,
+        loginDateTime
       })
+      setToken(token)
+      setDict(dict)
       handleRouter({ path: route.query.redirect?.toString() || '/' }, 'replace')
     } catch {
     } finally {
@@ -72,12 +74,7 @@ const submitForm = () => {
             @keyup.enter="submitForm()"
           >
             <el-form-item prop="account">
-              <el-input
-                v-model="ruleForm.account"
-                placeholder="请输入账号"
-                prefix-icon="User"
-                clearable
-              />
+              <el-input v-model="ruleForm.account" placeholder="请输入账号" prefix-icon="User" clearable />
             </el-form-item>
             <el-form-item prop="password">
               <el-input
@@ -90,9 +87,7 @@ const submitForm = () => {
               ></el-input>
             </el-form-item>
             <el-form-item>
-              <el-button class="btn" type="primary" :loading="loading" @click="submitForm()">
-                登 录
-              </el-button>
+              <el-button class="btn" type="primary" :loading="loading" @click="submitForm()">登 录</el-button>
             </el-form-item>
           </el-form>
           <div class="greeting">欢迎使用</div>