create-jnrs-template-vue 1.1.4 → 1.1.5

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

@@ -17,8 +17,8 @@ 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']
     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']
@@ -28,7 +28,6 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']

package/jnrs-template-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jnrs-template-vue",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "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/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/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

@@ -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/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 { 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,10 +50,13 @@ 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>
@@ -58,7 +72,9 @@ const handleLogout = async () => {
           <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 class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo.role">
+              [{{ roleLabel }}]
+            </span>
             <el-icon class="userMenu_icon"><arrow-down /></el-icon>
           </span>
         </template>
@@ -66,7 +82,9 @@ const handleLogout = async () => {
           <img class="userMenu_dropdown_avatar" :src="avatar" alt="avatar" />
           <b>
             {{ userInfo.name }}
-            <span class="userMenu_roleName" v-if="userInfo.role">[{{ userInfo.role }}]</span>
+            <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo.role">
+              [{{ roleLabel }}]
+            </span>
           </b>
           <div class="loginDateTime">
             <span>登录时间</span>
@@ -92,6 +110,7 @@ const handleLogout = async () => {
       </el-popover>
     </div>
   </div>
+  <GlobalSetting ref="globalSettingRef" />
 </template>
 
 <style lang="scss" scoped>
@@ -107,7 +126,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 +161,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;

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

@@ -35,7 +35,7 @@ import RouterTabs from './RouterTabs.vue'
   height: 100%;
 
   .el-main {
-    padding: 10px;
+    padding: 16px;
   }
 }
 </style>

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

@@ -0,0 +1,9 @@
+export default {
+  main: {
+    title: 'Management System'
+  },
+  login: {
+    title: 'Login'
+  },
+  layout: {}
+}

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

@@ -0,0 +1,16 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from './zhCn'
+import en from './en'
+
+const i18n = createI18n({
+  legacy: false, // 启用 Composition API 模式
+  globalInjection: true, // 允许在模板中使用 $t
+  locale: 'zhCn',
+  fallbackLocale: 'en',
+  messages: {
+    zhCn: zhCN,
+    en: en
+  }
+})
+
+export default i18n

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

@@ -0,0 +1,9 @@
+export default {
+  main: {
+    title: '信息化管理系统模板'
+  },
+  login: {
+    title: '登录'
+  },
+  layout: {}
+}

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

@@ -1,5 +1,7 @@
 import 'element-plus/dist/index.css'
-import './assets/styles/main.scss'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import '@jnrs/shared/styles/theme.scss'
+import '@/assets/styles/main.scss'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -7,6 +9,9 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 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)
 
@@ -21,4 +26,5 @@ pinia.use(piniaPluginPersistedstate)
 
 app.use(pinia)
 app.use(router)
+app.use(locales)
 app.mount('#app')

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

@@ -1 +1,2 @@
+export type * from '@jnrs/shared'
 export type * from '@jnrs/vue-core'

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

@@ -0,0 +1,58 @@
+import {
+  getOneDictList as _getOneDictList,
+  getDictLabel as _getDictLabel,
+  getDictValue as _getDictValue,
+  getDictColor as _getDictColor
+} from '@jnrs/shared'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+
+/**
+ * 根据字典名称获取字典数据
+ * @param name 字典名称
+ * @returns 某字典名称所对应的字典列表数据
+ */
+export const getOneDictList = (name: string) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getOneDictList(name, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典值获取字典标签
+ * @param name 字典名称
+ * @param value 字典值
+ * @returns 某字典名称所对应的字典标签
+ */
+export const getDictLabel = (name: string, value: string | number) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictLabel(name, value, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典标签获取字典值
+ * @param name 字典名称
+ * @param label 字典标签
+ * @returns 某字典名称所对应的字典值
+ */
+export const getDictValue = (name: string, label: string) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictValue(name, label, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典值获取字典颜色
+ * @param name 字典名称
+ * @param value 字典值
+ * @returns 某字典名称所对应的字典颜色
+ */
+export const getDictColor = (name: string, value: string | number) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictColor(name, value, dict)
+  }
+}

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

@@ -13,6 +13,7 @@ const loginParams = ref({
 
 const routeOptions = ref<MenuItem[]>([])
 const currentRoute = ref('')
+const datePicker = ref(new Date())
 
 onMounted(() => {
   handleInfoApi()
@@ -76,7 +77,7 @@ const handleRouteChange = () => {
 </script>
 
 <template>
-  <div style="background-color: #fff">
+  <div>
     <h1>Playground - 测试组件</h1>
     <p>网络请求测试</p>
     <el-button-group>
@@ -108,6 +109,8 @@ const handleRouteChange = () => {
         <span>{{ data.meta.title }}</span>
       </template>
     </el-cascader>
+    <p>Element 组件测试</p>
+    <el-date-picker-panel v-model="datePicker" />
     <!-- <MyButton type="primary">测试按钮</MyButton>
     <MyModal v-model="show">内容</MyModal> -->
   </div>

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

@@ -5,6 +5,7 @@ import { LoginApi } from '@/api/base/index'
 import { useAuthStore } from '@/stores'
 import { handleRouter, useRoute } from '@jnrs/vue-core/router'
 import { isWeakPwd } from '@jnrs/shared/validator'
+import { formatDateTime, formatWeekday } from '@jnrs/shared'
 
 const route = useRoute()
 const loading = ref(false)
@@ -34,6 +35,7 @@ const submitForm = () => {
     try {
       const res = await LoginApi(ruleForm.value)
       const { token, dict, ...userInfo } = res
+      userInfo.loginDateTime = formatDateTime() + ' ' + formatWeekday()
       const { asyncSetAuth } = useAuthStore()
       await asyncSetAuth({
         token: token,
@@ -102,14 +104,6 @@ const submitForm = () => {
 </template>
 
 <style scoped lang="scss">
-@use 'sass:math';
-
-$design-width: 1920; // 设计稿宽度
-
-@function px2vw($px) {
-  @return math.div($px, $design-width) * 100vw;
-}
-
 .main {
   position: relative;
   width: 100%;
@@ -147,8 +141,8 @@ $design-width: 1920; // 设计稿宽度
     width: 50%;
     height: 100%;
     box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
-    background: url('@/assets/img/common/card_bg.png') no-repeat;
-    background-size: 100% 100%;
+    // background: url('@/assets/img/common/card_bg.png') no-repeat;
+    // background-size: 100% 100%;
     text-align: center;
     font-size: 22px;
 

package/jnrs-template-vue/src/views/system/mine/securitySettings.vue

@@ -3,9 +3,8 @@ import { reactive, ref } from 'vue'
 import { LoginApi, PasswordChangeApi } from '@/api/base'
 import { useAuthStore } from '@/stores'
 import { handleRouter } from '@jnrs/vue-core/router'
-import { isWeakPwd } from '@/utils/validator'
-import type { FormInstance } from 'element-plus'
-import type { RuleItem } from 'async-validator'
+import { isWeakPwd } from '@jnrs/shared/validator'
+import type { FormInstance, FormItemRule } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { LogoutApi } from '@/api/base/index'
 
@@ -21,25 +20,25 @@ const rules = reactive({
   originPassword: [{ required: true, message: '请输入', trigger: 'change' }],
   password: [
     { required: true, message: '请输入', trigger: 'change' },
-    { min: 6, max: 36, message: '密码长度为 6 - 36 个字符', trigger: 'change' },
     {
-      validator: (rule: RuleItem, value: string | undefined, callback: (error?: Error) => void) =>
-        isWeakPwd(rule, value, callback)
+      validator: isWeakPwd,
+      trigger: 'change'
     }
-  ] as RuleItem[],
+  ],
   repassword: [
     { required: true, message: '请输入', trigger: 'change' },
     {
-      validator: (rule: RuleItem, value: string | undefined, callback: (error?: Error) => void) => {
-        if (value != '' && value !== ruleForm.value.password) {
-          callback(new Error('两次密码不一致!'))
+      validator: (rule: FormItemRule, value: string, callback: (error?: string) => void) => {
+        if (value && value !== ruleForm.value.password) {
+          callback('两次密码不一致!')
         } else {
           callback()
         }
       },
-      required: false
+      required: false,
+      trigger: 'change'
     }
-  ] as RuleItem[]
+  ]
 })
 
 const submitForm = async (formEl: FormInstance | undefined) => {

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

@@ -20,4 +20,9 @@ const goBack = () => {
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@use 'sass:math';
+@function px2vw($px) {
+  @return math.div($px, 1920) * 100vw;
+}
+</style>

package/jnrs-template-vue/vite.config.ts

@@ -6,7 +6,7 @@ import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import compression from 'vite-plugin-compression'
 import { viteMockServe } from 'vite-plugin-mock'
-// import vueDevTools from 'vite-plugin-vue-devtools'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 const path = (url: string) => fileURLToPath(new URL(url, import.meta.url))
 const config = loadEnv('development', './')
@@ -15,11 +15,12 @@ const isMock = config.VITE_USE_MOCK === 'true'
 export default defineConfig({
   plugins: [
     vue(),
-    // vueDevTools(),
+    vueDevTools(),
     AutoImport({
       resolvers: [ElementPlusResolver()]
     }),
     Components({
+      dirs: [], // 禁用本地组件自动导入
       resolvers: [ElementPlusResolver()]
     }),
     compression({
@@ -49,7 +50,7 @@ export default defineConfig({
       '/api': {
         target: 'http://' + config.VITE_BASE_URL,
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+        rewrite: (path: string) => path.replace(/^\/api/, '')
       },
       '/ws': {
         target: 'ws://' + config.VITE_BASE_URL,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jnrs-template-vue",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "巨能前端工程化开发，Vue 项目模板脚手架",
   "keywords": [
     "vue",