create-jnrs-template-vue 1.1.4 → 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,22 +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']
-    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']
-    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.4",
+  "version": "1.1.6",
   "description": "JNRS 信息化管理系统模板",
   "author": "Talia-Tan",
   "private": true,
@@ -22,32 +22,33 @@
     "@jnrs/core": "*",
     "@jnrs/shared": "*",
     "@jnrs/vue-core": "*",
-    "element-plus": "^2.11.4",
-    "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.5.0",
-    "vue": "^3.5.22"
+    "element-plus": "^2.11.9",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "vue": "^3.5.25",
+    "vue-i18n": "^9.14.5"
   },
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^22.18.6",
-    "@typescript-eslint/parser": "^8.46.2",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^22.19.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "@vitejs/plugin-vue": "^6.0.2",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/tsconfig": "^0.8.1",
-    "eslint": "^9.33.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-vue": "~10.4.0",
-    "jiti": "^2.5.1",
+    "jiti": "^2.6.1",
     "npm-run-all2": "^8.0.4",
     "prettier": "3.6.2",
     "sass": "^1.94.2",
-    "typescript": "~5.9.0",
-    "unplugin-auto-import": "^20.2.0",
-    "unplugin-vue-components": "^29.1.0",
-    "vite": "^7.1.7",
+    "typescript": "~5.9.3",
+    "unplugin-auto-import": "^20.3.0",
+    "unplugin-vue-components": "^29.2.0",
+    "vite": "^7.2.2",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^3.0.2",
-    "vite-plugin-vue-devtools": "^8.0.2",
-    "vue-tsc": "^3.1.0"
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vue-tsc": "^3.1.5"
   }
 }

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

@@ -1,14 +1,45 @@
 <script setup lang="ts">
-console.log(
-  '%cPowered by 🅹🅽🆁🆂 TECH',
-  `background: #f2f2c1;
+import { onMounted, watch } from 'vue'
+import { useSystemStore } from '@/stores'
+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/locales'
+import { changeLocales as changeLocalesForCore } from '@jnrs/core/locales'
+
+const { locale } = useI18n()
+const { theme } = useSystemStore()
+watch(
+  () => theme.locale,
+  (newValue) => {
+    locale.value = newValue
+    changeLocalesForShared(newValue)
+    changeLocalesForCore(newValue)
+  },
+  {
+    immediate: true
+  }
+)
+const localeMap = {
+  zhCn: zhCn,
+  en: en
+}
+
+onMounted(() => {
+  console.log(
+    '%cPowered by 🅹🅽🆁🆂 TECH',
+    `background: #f2f2c1;
   color: #d15f2c;
   font-weight: bold;
   padding: 0 8px;
   font-family: 'Helvetica Neue', sans-serif;`
-)
+  )
+})
 </script>
 
 <template>
-  <router-view></router-view>
+  <el-config-provider :locale="localeMap[theme.locale]">
+    <router-view></router-view>
+  </el-config-provider>
 </template>

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/assets/styles/init.scss

@@ -1,8 +1,8 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
   margin: 0;
+  box-sizing: border-box;
   font-family: Alibaba-PuHuiTi-Regular;
 }
 
@@ -14,8 +14,13 @@ a {
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #fff) inset !important;
+input:-webkit-autofill:active,
+input:autofill,
+input:-webkit-autofill-strong-password,
+input:-webkit-autofill-strong-password-viewable,
+input:-webkit-autofill-and-obscured {
+  -webkit-box-shadow: 0 0 0 1000px rgba(255, 0, 0, 0) inset !important;
+  background-color: rgb(255, 0, 0) !important;
 }
 
 /*

package/jnrs-template-vue/src/assets/styles/root.scss

@@ -1,29 +1,12 @@
-/* 默认样式（浅色模式） */
 :root {
-  // 业务相关
-  // --jnrs-color-primary: oklch(0.6 0.19 41); // jnrs 橙
-  --jnrs-color-primary: oklch(0.51 0.21 264); // 蔚蓝
-  --jnrs-color-primary-06: oklch(from var(--jnrs-color-primary) l c h / 0.6);
-  --jnrs-color-primary-light: oklch(from var(--jnrs-color-primary) calc(l + 0.1) c h);
-
-  // 状态相关
-  --jnrs-color-success: oklch(0.8 0.17 147);
-  --jnrs-color-error: oklch(0.65 0.24 33);
-
-  // 框架相关
-  --jnrs-font-primary: oklch(0.3 0.01 264);
-  --jnrs-font-primary-06: oklch(from var(--jnrs-font-primary) l c h / 0.6);
-  --jnrs-card-primary: oklch(1 0 0);
-  --jnrs-background-primary: oklch(0.96 0 0);
+  // Layout 头部高度
   --jnrs-head-height: 50px;
+  --jnrs-routerTabs-height: 30px;
 
-  // element-ui
-  --el-menu-base-level-padding: 8px !important;
+  // // element-ui 样式
+  // --el-menu-base-level-padding: 8px !important;
 }
 
-/* 深色模式 */
-// @media (prefers-color-scheme: dark) {
-//   :root {
-//     --jnrs-background-primary: oklch(0 0 0);
-//   }
-// }
+.el-button--primary {
+  --el-button-bg-color: var(--jnrs-color-primary);
+}

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'
 
 // 初始化时添加当前路由
@@ -126,20 +126,21 @@ const handleTabClick = (tab: TabsPaneContext) => {
   z-index: 5;
   :deep(.el-tabs__header) {
     margin-bottom: 0;
-    height: 32px;
+    height: var(--jnrs-routerTabs-height);
   }
   :deep(.el-tabs__item) {
     color: var(--jnrs-font-primary-06);
     font-size: 12px;
-    height: 32px;
+    height: var(--jnrs-routerTabs-height);
   }
   :deep(.el-tabs__item.is-active) {
     color: var(--jnrs-color-primary);
-    border-bottom-color: var(--jnrs-background-primary);
+    border-bottom-color: var(--jnrs-color-primary);
   }
   :deep(.el-tabs__nav) {
     border-radius: 0;
     border-left: none;
+    border-top: none;
   }
   :deep(.el-tabs__nav-prev) {
     color: var(--jnrs-color-primary);

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

@@ -3,7 +3,9 @@ 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
@@ -15,8 +17,8 @@ const route = useRoute()
 <template>
   <el-aside class="sideMenu">
     <div class="logo" :class="{ logo_collapse: menuCollapse }">
-      <span class="logo_text">信息化管理系统模板</span>
       <img class="logo_img" src="@/assets/images/common/jnrs-white.svg" alt="jnrs" />
+      <span class="logo_text">{{ t('main.title') }}</span>
     </div>
     <el-icon
       class="collapseBtn"
@@ -40,26 +42,30 @@ const route = useRoute()
 </template>
 
 <style lang="scss" scoped>
+$mainFontColor: rgba(255, 255, 255, 0.8);
+
 .sideMenu {
   position: relative;
-  z-index: 10;
+  z-index: 20;
   width: auto;
   height: 100%;
   padding: 0 8px;
-  background: rgba(30, 30, 30, 1);
-  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.3);
+  background: oklch(0.24 0 0);
+  // background: var(--jnrs-card-primary);
+  box-shadow: 1px 0 1px var(--jnrs-font-primary-03);
   overflow-x: hidden;
+  color: $mainFontColor;
 
   .logo {
     position: relative;
-    height: var(--jnrs-head-height);
+    height: calc(var(--jnrs-head-height) + var(--jnrs-routerTabs-height));
+    border-bottom: 1px solid rgb(248 248 248 / 15%);
 
     .logo_text {
       position: absolute;
-      top: 50%;
+      bottom: 0;
       left: 50%;
       color: rgba(255, 255, 255, 1);
-      font-size: 20px;
       font-weight: normal;
       font-family: AlimamaShuHeiTi-Bold;
       white-space: nowrap;
@@ -70,22 +76,23 @@ const route = useRoute()
 
     .logo_img {
       position: absolute;
-      top: 50%;
+      top: 0;
       left: 50%;
-      width: 100%;
-      transform: translate(-50%, -50%);
+      width: 80%;
+      transform: translate(-50%, 50%);
       transition: all 0.3s ease;
-      filter: opacity(0);
     }
   }
 
   .logo_collapse {
     .logo_text {
       transform: translate(-50%, -50%) scale(0);
-      filter: opacity(0);
+      opacity: 0;
     }
     .logo_img {
-      filter: opacity(1);
+      width: 100%;
+      top: 50%;
+      transform: translate(-50%, -50%);
     }
   }
 
@@ -93,7 +100,7 @@ const route = useRoute()
     position: absolute;
     bottom: 10px;
     font-size: 24px;
-    color: #fff;
+    color: $mainFontColor;
     padding: 4px;
     border-radius: 50%;
     background-color: #424242;
@@ -130,8 +137,8 @@ const route = useRoute()
   .leftSide_menu {
     border: none;
     min-width: 180px;
-    --el-menu-text-color: #f2f2f2;
-    --el-menu-active-color: #f2f2f2;
+    --el-menu-text-color: $mainFontColor;
+    --el-menu-active-color: $mainFontColor;
     --el-menu-bg-color: none;
 
     :deep(.el-menu-item) {
@@ -150,7 +157,7 @@ const route = useRoute()
 
     :deep(.el-menu-item.is-active) {
       background: var(--jnrs-color-primary) !important;
-      color: #f2f2f2 !important;
+      color: $mainFontColor !important;
     }
 
     .el-menu-item.is-active {
@@ -166,11 +173,13 @@ const route = useRoute()
 </style>
 
 <style lang="scss">
+$mainFontColor: rgba(255, 255, 255, 0.8);
+
 // 弹出层样式
 .layoutPage_leftSide_menu_popper {
   background: #051524;
   border: none !important;
-  left: 65px !important;
+  left: 74px !important;
   border-radius: 15px;
   padding: 0 10px;
   .el-menu {
@@ -179,7 +188,7 @@ const route = useRoute()
   .el-menu-item {
     border-radius: 10px;
     background-color: none;
-    color: #f2f2f2;
+    color: $mainFontColor;
     &:hover {
       color: var(--jnrs-color-primary);
       background: none;
@@ -193,7 +202,7 @@ const route = useRoute()
   .el-menu-item.is-active {
     border-radius: 10px;
     background: var(--jnrs-color-primary);
-    color: #f2f2f2;
+    color: $mainFontColor;
   }
 }
 </style>

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

@@ -1,17 +1,24 @@
 <script setup lang="ts">
+import { GlobalSetting } from '@jnrs/vue-core/components'
+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 { 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 systemStore = useSystemStore()
 const { documentFullscreen } = storeToRefs(systemStore)
 const { toggleFullScreen } = systemStore
+const globalSettingRef = ref()
 
 const handleLogout = async () => {
   try {
@@ -25,6 +32,10 @@ const handleLogout = async () => {
     handleRouter({ name: 'Login' }, 'replace')
   } catch {}
 }
+
+const showGlobalSetting = () => {
+  globalSettingRef.value.handleShow()
+}
 </script>
 
 <template>
@@ -39,38 +50,35 @@ const handleLogout = async () => {
           })
         "
       >
-        <component :is="'Platform'" />
+        <el-icon><Platform /></el-icon>
       </el-icon>
     </div>
     <div class="right">
+      <el-icon class="btn" title="全屏切换" @click="showGlobalSetting()">
+        <el-icon><Setting /></el-icon>
+      </el-icon>
       <el-icon class="btn" title="全屏切换" @click="toggleFullScreen()">
         <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" v-if="userInfo.role">[{{ userInfo.role }}]</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" v-if="userInfo.role">[{{ userInfo.role }}]</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
@@ -84,14 +92,13 @@ const handleLogout = async () => {
             >
               个人中心
             </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>
     </div>
   </div>
+  <GlobalSetting ref="globalSettingRef" />
 </template>
 
 <style lang="scss" scoped>
@@ -107,7 +114,7 @@ $topHoverSize: 35px;
   justify-content: space-between;
   background: var(--jnrs-card-primary);
   padding: 0 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px var(--jnrs-font-primary-03);
 
   .btn {
     position: relative;
@@ -142,9 +149,13 @@ $topHoverSize: 35px;
     display: flex;
     align-items: center;
     margin-left: 16px;
+    transition: all 0.25s ease;
     cursor: pointer;
     &:hover {
       color: var(--jnrs-color-primary);
+      .userMenu_icon {
+        color: var(--jnrs-color-primary);
+      }
     }
     .userMenu_avatar {
       width: $topHoverSize;