create-jnrs-template-vue 1.1.3 → 1.1.5

package/README.md

@@ -7,12 +7,12 @@
 TypeScript、Vue3 生态
 
 ## 🧩 安装使用说明
-「jnrs-app-vue」 是你的新项目名称
+新项目默认名称为 jnrs-template-vue
 ```shell
 ✅ 正确用法
-pnpm create jnrs-template-vue@latest jnrs-app-vue
+pnpm create jnrs-template-vue@latest
 
-cd jnrs-app-vue
+cd jnrs-template-vue
 pnpm i
 pnpm dev
 pnpm build
@@ -21,9 +21,9 @@ pnpm build
 pnpm add create-jnrs-template-vue
 ```
 
-#### 项目结构
+## 📂 模板项目主要结构
 ```Text
-jnrs-app-vue/
+jnrs-template-vue/
 ├── dist/                 # 打包构建产物
 ├── node_modules/         # 项目依赖
 ├── viteMockServe/        # Mock 服务配置（用于开发环境模拟 API）

package/bin/create.mjs

@@ -70,7 +70,7 @@ async function main() {
       type: 'text',
       name: 'name',
       message: '项目名称:',
-      initial: 'jnrs-app-vue',
+      initial: 'jnrs-template-vue',
       validate: (input) => {
         if (!input) return '请输入项目名称！'
         if (existsSync(input)) return '目录已存在！'

package/jnrs-template-vue/README.md

@@ -1,7 +1,7 @@
-# create-jnrs-template-vue
+# jnrs-template-vue
 
 ## ✨ 介绍
-巨能前端工程化开发，Vue 项目模板脚手架
+巨能前端工程化开发，Vue 项目信息化管理系统模板
 
 ## 💻 技术栈
 TypeScript、Vue3 生态

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

@@ -18,6 +18,7 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePickerPanel: typeof import('element-plus/es')['ElDatePickerPanel']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']

package/jnrs-template-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jnrs-template-vue",
-  "version": "1.1.3",
-  "description": "JNRS 新项目模板",
+  "version": "1.1.5",
+  "description": "JNRS 信息化管理系统模板",
   "author": "Talia-Tan",
   "private": true,
   "type": "module",
@@ -18,37 +18,37 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@jnrs/shared": "*",
+    "@element-plus/icons-vue": "^2.3.2",
     "@jnrs/core": "*",
+    "@jnrs/shared": "*",
     "@jnrs/vue-core": "*",
-    "@element-plus/icons-vue": "^2.3.2",
-    "async-validator": "^4.2.5",
-    "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-embedded": "^1.93.2",
-    "typescript": "~5.9.0",
-    "unplugin-auto-import": "^20.2.0",
-    "unplugin-vue-components": "^29.1.0",
-    "vite": "^7.1.7",
+    "sass": "^1.94.2",
+    "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-vue-devtools": "^8.0.2",
-    "vue-tsc": "^3.1.0",
-    "vite-plugin-mock": "^3.0.2"
+    "vite-plugin-mock": "^3.0.2",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vue-tsc": "^3.1.5"
   }
 }

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

@@ -18,14 +18,16 @@
       "name": "Crud",
       "meta": {
         "title": "测试页面",
-        "icon": "Platform"
+        "icon": "StarFilled",
+        "todoCount": 8
       },
       "component": "/crud/index"
     },
     {
       "meta": {
         "title": "系统管理",
-        "icon": "Tools"
+        "icon": "Tools",
+        "todoCount": 99
       },
       "children": [
         {
@@ -33,7 +35,8 @@
           "name": "SystemMine",
           "meta": {
             "title": "个人中心",
-            "icon": "User"
+            "icon": "User",
+            "todoCount": 99
           },
           "component": "/system/mine/index"
         },
@@ -42,7 +45,8 @@
           "name": "SystemUser",
           "meta": {
             "title": "用户管理",
-            "icon": "User"
+            "icon": "User",
+            "todoCount": 0
           },
           "component": "/system/user/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'
+import { changeLocales as changeLocalesForCore } from '@jnrs/core'
+
+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/assets/images/common/jnrs-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.55 50.85"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M-336.3,445.05c6.8,0,13.6-.05,20.41,0,.05,14.45-.12,28.89-.14,43.33.3,3.93-3.34,7.48-7.21,7.43-4.35,0-8.71,0-13.06,0Q-336.33,470.45-336.3,445.05Z" transform="translate(381.53 -445.04)"/><path class="a" d="M-306.42,447.84a6.54,6.54,0,0,1,5.5-2.79h12.49a1.57,1.57,0,0,1,1.11.31c5.76,3.57,11.54,7.1,17.3,10.67q0,11.28,0,22.58c-5.92-3.59-11.83-7.22-17.76-10.8v28.08c-6.79,0-13.59,0-20.38,0q0-20.82,0-41.63A10.53,10.53,0,0,1-306.42,447.84Z" transform="translate(381.53 -445.04)"/><path class="a" d="M-267.56,452.43a7.3,7.3,0,0,1,7.09-7.38h13.39c.06,16.92,0,33.85,0,50.78-6.83,0-13.66,0-20.49,0C-267.61,481.37-267.54,466.9-267.56,452.43Z" transform="translate(381.53 -445.04)"/><path class="a" d="M-236.93,445.06q26.9,0,53.78,0a7.23,7.23,0,0,1,7,5.58c.11,1.55,0,3.1,0,4.64-20.28,0-40.56,0-60.84-.06Q-236.91,450.14-236.93,445.06Z" transform="translate(381.53 -445.04)"/><path class="a" d="M-165.71,450a7.14,7.14,0,0,1,6.63-4.95h42.25a11.66,11.66,0,0,1,8.19,3.34,13.71,13.71,0,0,1,3.65,6.86h-40.62c0,3.36,0,6.72,0,10.09q16.77,0,33.54,0a7.29,7.29,0,0,1,7,6.09c.09,1.33,0,2.67,0,4-18.42.05-36.84,0-55.26,0A7,7,0,0,1-166,469.7c0-5.16,0-10.33,0-15.49A13.83,13.83,0,0,1-165.71,450Z" transform="translate(381.53 -445.04)"/><path class="a" d="M-196.48,457.73c6.79-.05,13.59,0,20.39,0,0,3.89,0,7.78,0,11.66a7.07,7.07,0,0,1-7.05,6.1c-11.19,0-22.37,0-33.55,0q0,10.2,0,20.38c-6.79,0-13.58,0-20.38,0,0-10.05,0-20.11,0-30.16q20.26,0,40.52,0C-196.36,463.05-196.48,460.38-196.48,457.73Z" transform="translate(381.53 -445.04)"/><path class="a" d="M-381.49,472.19c6.78,0,13.56,0,20.34,0,0,4.48,0,9,0,13.42,7.43.14,14.88.06,22.31,0,.11,3.39,0,6.78,0,10.17q-17.79,0-35.58,0a7.23,7.23,0,0,1-7.16-7.13C-381.48,483.2-381.55,477.7-381.49,472.19Z" transform="translate(381.53 -445.04)"/><path class="a" d="M-202.37,477.73h19.88c.72,2.63,1.29,5.31,2.06,7.93,18.36-.07,36.72,0,55.08-.06,0-2.56,0-5.13,0-7.69,6.78,0,13.56,0,20.34,0,0,3.6,0,7.2,0,10.8a7.08,7.08,0,0,1-6.79,7.14h-52.05c-11.43,0-22.86-.07-34.28,0Q-200.28,486.8-202.37,477.73Z" transform="translate(381.53 -445.04)"/></svg>

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

@@ -0,0 +1,24 @@
+/* font */
+@font-face {
+  font-family: 'Alibaba-PuHuiTi-Regular';
+  src: url('@/assets/fonts/AlibabaPuHuiTi-Regular.woff2');
+}
+
+@font-face {
+  font-family: 'AlimamaShuHeiTi-Bold';
+  src: url('@/assets/fonts/AlimamaShuHeiTi-Bold.woff2');
+}
+
+/*
+ * 阿里巴巴普惠体 - 正黑体
+ */
+.Alibaba-PuHuiTi-Regular {
+  font-family: 'Alibaba-PuHuiTi-Regular';
+}
+
+/*
+ * 阿里妈妈字体 - 数黑体
+ */
+.AlimamaShuHeiTi-Bold {
+  font-family: 'AlimamaShuHeiTi-Bold';
+}

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

@@ -0,0 +1,38 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+  font-family: Alibaba-PuHuiTi-Regular;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* 所有自动填充 input */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+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;
+}
+
+/*
+ * 禁止拖拽图片
+ * 禁止长按弹出菜单
+ */
+img {
+  -ms-user-drag: none;
+  -moz-user-drag: none;
+  -webkit-user-drag: none;
+  -webkit-touch-callout: none;
+  overflow: hidden;
+  object-fit: cover;
+  object-position: center center;
+}

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

@@ -0,0 +1,27 @@
+@use './init.scss';
+@use './fonts.scss';
+@use './root.scss';
+
+body {
+  width: 100vw;
+  height: 100vh;
+  color: var(--jnrs-font-primary);
+  background: var(--jnrs-background-primary);
+}
+
+#app {
+  min-width: 1280px;
+  height: 100%;
+}
+
+/*
+ * 禁止用户选中页面元素
+ */
+.no-select {
+  -khtml-user-drag: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

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

@@ -0,0 +1,12 @@
+:root {
+  // Layout 头部高度
+  --jnrs-head-height: 50px;
+  --jnrs-routerTabs-height: 30px;
+
+  // // element-ui 样式
+  // --el-menu-base-level-padding: 8px !important;
+}
+
+.el-button--primary {
+  --el-button-bg-color: var(--jnrs-color-primary);
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="blank-layout">
+  <div class="blank-layout no-select">
     <router-view />
   </div>
 </template>
@@ -10,5 +10,6 @@
   width: 100vw;
   height: 100vh;
   background: #000;
+  overflow: hidden;
 }
 </style>

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

@@ -122,26 +122,31 @@ const handleTabClick = (tab: TabsPaneContext) => {
 
 <style lang="scss" scoped>
 .routerTabs {
+  position: relative;
+  z-index: 5;
   :deep(.el-tabs__header) {
     margin-bottom: 0;
-    height: 32px;
+    height: var(--jnrs-routerTabs-height);
   }
   :deep(.el-tabs__item) {
-    color: #888;
+    color: var(--jnrs-font-primary-06);
     font-size: 12px;
-    height: 32px;
+    height: var(--jnrs-routerTabs-height);
   }
   :deep(.el-tabs__item.is-active) {
-    color: #d15f2c;
-    border-bottom-color: #f2f2f2;
+    color: var(--jnrs-color-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: #d15f2c;
-    background: #fff;
+    color: var(--jnrs-color-primary);
   }
   :deep(.el-tabs__nav-next) {
-    color: #d15f2c;
-    background: #fff;
+    color: var(--jnrs-color-primary);
   }
 }
 </style>

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

@@ -3,9 +3,12 @@ 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
 const { menus } = useMenuStore()
 
 const route = useRoute()
@@ -13,7 +16,18 @@ const route = useRoute()
 
 <template>
   <el-aside class="sideMenu">
-    <div class="logo">后台管理系统</div>
+    <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>
+    </div>
+    <el-icon
+      class="collapseBtn"
+      :class="{ collapseBtn_active: menuCollapse }"
+      title="菜单折叠"
+      @click="toggleCollapse()"
+    >
+      <Fold />
+    </el-icon>
     <el-menu
       class="leftSide_menu"
       popper-class="layoutPage_leftSide_menu_popper"
@@ -28,17 +42,77 @@ const route = useRoute()
 </template>
 
 <style lang="scss" scoped>
+$mainFontColor: rgba(255, 255, 255, 0.8);
+
 .sideMenu {
-  max-width: 200px;
+  position: relative;
+  z-index: 20;
+  width: auto;
   height: 100%;
+  padding: 0 8px;
+  background: oklch(0.24 0 0);
+  // background: var(--jnrs-card-primary);
+  box-shadow: 1px 0 1px var(--jnrs-font-primary-03);
   overflow-x: hidden;
-  padding: 0 10px;
-  background: rgba(20, 22, 26, 1);
-  box-shadow: 5px 0 8px rgba(20, 22, 26, 0.3);
-  color: rgba(255, 255, 255, 1);
+  color: $mainFontColor;
 
   .logo {
-    height: 50px;
+    position: relative;
+    height: calc(var(--jnrs-head-height) + var(--jnrs-routerTabs-height));
+    border-bottom: 1px solid rgb(248 248 248 / 15%);
+
+    .logo_text {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      color: rgba(255, 255, 255, 1);
+      font-weight: normal;
+      font-family: AlimamaShuHeiTi-Bold;
+      white-space: nowrap;
+      transform: translate(-50%, -50%);
+      transition: all 0.3s ease;
+      filter: opacity(1);
+    }
+
+    .logo_img {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: 80%;
+      transform: translate(-50%, 50%);
+      transition: all 0.3s ease;
+    }
+  }
+
+  .logo_collapse {
+    .logo_text {
+      transform: translate(-50%, -50%) scale(0);
+      opacity: 0;
+    }
+    .logo_img {
+      width: 100%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .collapseBtn {
+    position: absolute;
+    bottom: 10px;
+    font-size: 24px;
+    color: $mainFontColor;
+    padding: 4px;
+    border-radius: 50%;
+    background-color: #424242;
+    transition: all 0.25s ease;
+    cursor: pointer;
+    &:hover {
+      color: var(--jnrs-color-primary);
+    }
+  }
+
+  .collapseBtn_active {
+    transform: rotate(-180deg);
   }
 
   :deep(.el-sub-menu__title) {
@@ -52,7 +126,7 @@ const route = useRoute()
 
     .el-sub-menu.is-active {
       border-radius: 10px;
-      background: #d15f2c;
+      background: var(--jnrs-color-primary);
     }
 
     :deep(.el-menu-item span) {
@@ -63,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) {
@@ -77,22 +151,17 @@ const route = useRoute()
 
       &:hover {
         background: none !important;
-        span {
-          color: #f2f2f2 !important;
-        }
+        color: var(--jnrs-color-primary);
       }
     }
 
     :deep(.el-menu-item.is-active) {
-      background: #d15f2c !important;
-
-      span {
-        color: #f2f2f2 !important;
-      }
+      background: var(--jnrs-color-primary) !important;
+      color: $mainFontColor !important;
     }
 
     .el-menu-item.is-active {
-      background: #d15f2c;
+      background: var(--jnrs-color-primary);
       color: #fff !important;
 
       span {
@@ -104,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: 86px !important;
+  left: 74px !important;
   border-radius: 15px;
   padding: 0 10px;
   .el-menu {
@@ -117,9 +188,9 @@ const route = useRoute()
   .el-menu-item {
     border-radius: 10px;
     background-color: none;
-    color: #f2f2f2;
+    color: $mainFontColor;
     &:hover {
-      color: none;
+      color: var(--jnrs-color-primary);
       background: none;
     }
     span {
@@ -130,11 +201,8 @@ const route = useRoute()
   }
   .el-menu-item.is-active {
     border-radius: 10px;
-    background: #d15f2c;
-    color: #f2f2f2;
-  }
-  .layoutPage_leftSide_menu_popper {
-    left: 215px !important;
+    background: var(--jnrs-color-primary);
+    color: $mainFontColor;
   }
 }
 </style>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useSystemStore } from '@/stores'
 import type { MenuItem } from '@/types'
+
 defineProps<{
   listItem: MenuItem
 }>()
@@ -14,7 +15,7 @@ const { menuCollapse } = useSystemStore()
     <el-icon v-if="listItem.meta.icon">
       <component :is="listItem.meta.icon" />
     </el-icon>
-    <el-badge :show-zero="false" :value="listItem.todoCount" :offset="[7, 17]" color="#f00">
+    <el-badge :show-zero="false" :value="listItem.meta.todoCount" :offset="[7, 17]" color="#EC5545">
       <span>{{ listItem.meta.title }}</span>
     </el-badge>
   </el-menu-item>
@@ -22,11 +23,10 @@ const { menuCollapse } = useSystemStore()
     <!-- 一级目录 -->
     <template #title>
       <el-badge
-        v-if="listItem.todoCount"
         :show-zero="false"
-        :is-dot="listItem.todoCount > 0"
+        :is-dot="listItem.meta.todoCount && listItem.meta.todoCount > 0"
         :offset="[menuCollapse ? -5 : -10, 20]"
-        color="#f00"
+        color="#EC5545"
       >
         <el-icon v-if="listItem.meta.icon"><component :is="listItem.meta.icon" /></el-icon>
       </el-badge>