create-jnrs-template-vue 1.1.3 → 1.1.4

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

@@ -10,8 +10,8 @@ const { avatar } = useAvatar()
 const { userInfo, asyncClearAuth } = useAuthStore()
 
 const systemStore = useSystemStore()
-const { menuCollapse, documentFullscreen } = storeToRefs(systemStore)
-const { toggleCollapse, toggleFullScreen } = systemStore
+const { documentFullscreen } = storeToRefs(systemStore)
+const { toggleFullScreen } = systemStore
 
 const handleLogout = async () => {
   try {
@@ -29,39 +29,41 @@ const handleLogout = async () => {
 
 <template>
   <div class="topHeader">
-    <div class="header_left">
+    <div class="left">
       <el-icon
-        class="headerBtn"
-        :class="{ sideBtn_active: menuCollapse }"
-        @click="toggleCollapse()"
+        class="btn"
+        title="可视化看板"
+        @click="
+          handleRouter({
+            name: 'Visual'
+          })
+        "
       >
-        <Fold />
+        <component :is="'Platform'" />
       </el-icon>
-      <el-icon class="headerBtn fullBtn" @click="toggleFullScreen()">
+    </div>
+    <div class="right">
+      <el-icon class="btn" title="全屏切换" @click="toggleFullScreen()">
         <component :is="!documentFullscreen ? 'FullScreen' : 'Rank'" />
       </el-icon>
-    </div>
-    <div class="header_right">
       <!-- 头像和用户名 -->
       <el-popover
         placement="bottom"
         trigger="click"
         :teleported="false"
-        :width="300"
+        :width="260"
         :hide-after="0"
       >
         <template #reference>
           <span class="userMenu_reference">
-            <img :src="avatar" alt="" />
-            <span style="margin: 0 10px">
-              <span>{{ userInfo.name }}</span>
-              <span class="userMenu_roleName" v-if="userInfo.role">[{{ userInfo.role }}]</span>
-            </span>
-            <el-icon><arrow-down /></el-icon>
+            <img class="userMenu_avatar" :src="avatar" alt="avatar" />
+            <span>{{ userInfo.name }}</span>
+            <span class="userMenu_roleName" v-if="userInfo.role">[{{ userInfo.role }}]</span>
+            <el-icon class="userMenu_icon"><arrow-down /></el-icon>
           </span>
         </template>
         <div class="userMenu_dropdown">
-          <img :src="avatar" alt="" />
+          <img class="userMenu_dropdown_avatar" :src="avatar" alt="avatar" />
           <b>
             {{ userInfo.name }}
             <span class="userMenu_roleName" v-if="userInfo.role">[{{ userInfo.role }}]</span>
@@ -93,116 +95,90 @@ const handleLogout = async () => {
 </template>
 
 <style lang="scss" scoped>
+$topHoverSize: 35px;
+
 .topHeader {
+  position: relative;
+  z-index: 15;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #fff;
-  padding-left: 0;
-  z-index: 10;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  :deep(.el-radio-button__inner:hover) {
-    color: #d15f2c;
-  }
-  :deep(.is-active .el-radio-button__inner:hover) {
-    color: #fff;
-  }
-  .headerBtn {
+  background: var(--jnrs-card-primary);
+  padding: 0 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  .btn {
+    position: relative;
     margin: 0 8px;
-    font-size: 24px;
+    font-size: 22px;
     transition: all 0.25s ease 0s;
     cursor: pointer;
     &:hover {
-      color: #d15f2c;
+      color: var(--jnrs-color-primary);
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: $topHoverSize;
+        height: $topHoverSize;
+        background: var(--jnrs-color-primary);
+        opacity: 0.1;
+        border-radius: 50%;
+      }
     }
   }
-  .fullBtn {
-    font-size: 20px;
-  }
-  .sideBtn_active {
-    transform: rotate(-180deg);
-  }
-  .header_left {
-    display: flex;
-    align-items: center;
-  }
-  .header_right {
+
+  .left,
+  .right {
     display: flex;
     align-items: center;
-    .header_right_item {
-      display: flex;
-      align-items: center;
-    }
-    .modeLable {
-      padding-right: 8px;
-      margin-left: 30px;
-      color: #d15f2c;
-      font-size: 14px;
-    }
-  }
-  .hoverBtn {
-    position: relative;
-    top: 1px;
-    font-size: 24px;
-    margin-left: 30px;
-    cursor: pointer;
-    &:hover {
-      color: #d15f2c;
-    }
   }
+
   .userMenu_reference {
     display: flex;
     align-items: center;
-    margin-left: 30px;
-    font-size: 16px;
-    color: #424242;
+    margin-left: 16px;
     cursor: pointer;
     &:hover {
-      color: #d15f2c;
+      color: var(--jnrs-color-primary);
     }
-    img {
-      width: 35px;
-      height: 35px;
+    .userMenu_avatar {
+      width: $topHoverSize;
+      height: $topHoverSize;
       border-radius: 50%;
-      border: 1px solid #ccc;
-      overflow: hidden;
-      object-fit: cover;
-      object-position: center center;
-      flex-grow: 0;
-      flex-shrink: 0;
+      margin-right: 4px;
+    }
+    .userMenu_icon {
+      margin-left: 4px;
+      color: var(--jnrs-font-primary-06);
     }
   }
   .userMenu_dropdown {
-    padding: 10px;
     text-align: center;
     img {
       width: 80px;
       height: 80px;
-      border: 1px solid #ccc;
       border-radius: 50%;
-      overflow: hidden;
-      object-fit: cover;
-      object-position: center center;
     }
     b {
       display: block;
-      width: 100%;
       font-size: 16px;
-      color: #000;
-      margin-bottom: 5px;
+      color: var(--jnrs-font-primary);
     }
     .loginDateTime {
-      color: #999;
+      color: var(--jnrs-font-primary-06);
     }
     .userMenu_dropdown_btn {
-      margin-top: 20px;
+      margin-top: 8px;
     }
   }
   .userMenu_roleName {
     display: inline;
-    color: #d15f2c;
+    color: var(--jnrs-color-primary);
   }
 }
 </style>

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

@@ -5,10 +5,10 @@ import RouterTabs from './RouterTabs.vue'
 </script>
 
 <template>
-  <el-container class="layout-container">
+  <el-container class="layout_container">
     <SideMenu />
     <el-container>
-      <el-header class="layout-header">
+      <el-header class="layout_header">
         <TopHeader />
       </el-header>
       <RouterTabs />
@@ -24,14 +24,18 @@ import RouterTabs from './RouterTabs.vue'
 </template>
 
 <style lang="scss" scoped>
-.layout-container {
+.layout_header {
   width: 100%;
-  height: 100%;
-  background: #f2f2f2;
+  height: var(--jnrs-head-height);
+  padding: 0;
 }
 
-.layout-header {
-  height: 50px;
-  padding: 0;
+.layout_container {
+  width: 100%;
+  height: 100%;
+
+  .el-main {
+    padding: 10px;
+  }
 }
 </style>

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

@@ -1,5 +1,5 @@
 import 'element-plus/dist/index.css'
-import './assets/styles/main.css'
+import './assets/styles/main.scss'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -10,7 +10,7 @@ import { router } from './router'
 
 const app = createApp(App)
 
-// element-plus 相关
+// element-plus 自动引入所有图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }

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

@@ -10,25 +10,25 @@ export const LAYOUT_NAME = 'Layout'
 export const GLOBAL_COMPONENT = import('@/layout/BlankLayout.vue')
 
 export const routes = [
-  // {
-  //   path: '/login',
-  //   component: () => import('@/layout/BlankLayout.vue'),
-  //   meta: { title: '登录' },
-  //   children: [
-  //     {
-  //       path: '',
-  //       name: 'Login',
-  //       meta: { title: '登录', noAuth: true },
-  //       component: () => import('@/views/login/index.vue')
-  //     }
-  //   ]
-  // },
   {
-    name: 'Login',
     path: '/login',
-    component: () => import('@/views/login/index.vue'),
-    meta: { title: '登录', noAuth: true, global: true }
+    component: () => import('@/layout/BlankLayout.vue'),
+    meta: { title: '登录' },
+    children: [
+      {
+        path: '',
+        name: 'Login',
+        meta: { title: '登录', noAuth: true },
+        component: () => import('@/views/login/index.vue')
+      }
+    ]
   },
+  // {
+  //   name: 'Login',
+  //   path: '/login',
+  //   component: () => import('@/views/login/index.vue'),
+  //   meta: { title: '登录', noAuth: true, global: true }
+  // },
   {
     name: LAYOUT_NAME,
     path: '/',

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

@@ -1,61 +1,251 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
+import { ref } from 'vue'
 import { LoginApi } from '@/api/base/index'
 import { useAuthStore } from '@/stores'
 import { handleRouter, useRoute } from '@jnrs/vue-core/router'
+import { isWeakPwd } from '@jnrs/shared/validator'
 
 const route = useRoute()
+const loading = ref(false)
 
+// 表单 ref
+const ruleFormRef = ref<FormInstance>()
 // 表单数据
-const form = reactive({
+const ruleForm = ref({
   account: '',
   password: ''
 })
-
 // 校验规则
-const rules = reactive<FormRules>({
+const rules = ref<FormRules>({
   account: [{ required: true, message: '请输入用户名', trigger: 'change' }],
-  password: [{ required: true, message: '请输入密码', trigger: 'change' }]
+  password: [
+    { required: true, message: '请输入密码', trigger: 'change' },
+    { validator: isWeakPwd, trigger: 'change' }
+  ]
 })
 
-// 表单 ref
-const formRef = ref<FormInstance>()
-
 // 提交函数
-const loading = ref(false)
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  try {
+const submitForm = () => {
+  if (!ruleFormRef.value) return
+  ruleFormRef.value.validate(async (valid) => {
+    if (!valid) return
     loading.value = true
-    await formEl.validate()
-
-    const res = await LoginApi(form)
-    const { token, dict, ...userInfo } = res
-
-    const { asyncSetAuth } = useAuthStore()
-    await asyncSetAuth({
-      token: token,
-      dict: dict,
-      userInfo: userInfo
-    })
-
-    handleRouter({ path: route.query.redirect?.toString() || '/' }, 'replace')
-  } catch {
-  } finally {
-    loading.value = false
-  }
+    try {
+      const res = await LoginApi(ruleForm.value)
+      const { token, dict, ...userInfo } = res
+      const { asyncSetAuth } = useAuthStore()
+      await asyncSetAuth({
+        token: token,
+        dict: dict,
+        userInfo: userInfo
+      })
+      handleRouter({ path: route.query.redirect?.toString() || '/' }, 'replace')
+    } catch {
+    } finally {
+      loading.value = false
+    }
+  })
 }
 </script>
 
 <template>
-  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
-    <el-form-item label="用户名" prop="account">
-      <el-input v-model="form.account" />
-    </el-form-item>
-    <el-form-item label="密码" prop="password">
-      <el-input v-model="form.password" type="password" />
-    </el-form-item>
-  </el-form>
-  <el-button type="primary" :loading="loading" @click="submitForm(formRef)">提交</el-button>
+  <div class="main">
+    <div class="card">
+      <div class="card_left">
+        <div class="card_left_mid">
+          <img class="logo" src="@/assets/images/common/jnrs-white.svg" alt="JNRS" />
+          <h5 class="title">信息化管理系统模板</h5>
+        </div>
+      </div>
+      <div class="card_right">
+        <div class="card_right_mid">
+          <h1 class="title">登录</h1>
+          <el-form
+            class="form"
+            ref="ruleFormRef"
+            :model="ruleForm"
+            :rules="rules"
+            size="large"
+            @keyup.enter="submitForm()"
+          >
+            <el-form-item prop="account">
+              <el-input
+                v-model="ruleForm.account"
+                placeholder="请输入账号"
+                prefix-icon="User"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                v-model="ruleForm.password"
+                type="password"
+                autocomplete="off"
+                placeholder="请输入密码"
+                prefix-icon="Lock"
+                show-password
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="btn" type="primary" :loading="loading" @click="submitForm()">
+                登 录
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <div class="greeting">欢迎使用</div>
+        </div>
+        <div class="card_right_copyright">Powered by JNRS TECH 2026</div>
+      </div>
+    </div>
+  </div>
 </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%;
+  height: 100%;
+  background: radial-gradient(circle at center, #232a4c, #000);
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(transparent 50%, rgba(255, 255, 255, 0.05) 50%);
+    background-size: 10px 10px;
+  }
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 1000px;
+  height: 500px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  background: radial-gradient(circle at center, #232a4c, #000);
+  overflow: hidden;
+
+  .card_left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    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%;
+    text-align: center;
+    font-size: 22px;
+
+    .card_left_mid {
+      width: 50%;
+
+      .logo {
+        width: 100%;
+        margin-bottom: 20px;
+        filter: opacity(0.5);
+      }
+
+      .title {
+        font-size: 24px;
+        font-weight: normal;
+        font-family: AlimamaShuHeiTi-Bold;
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+
+  .card_right {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.7);
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+    }
+
+    .card_right_mid {
+      width: 50%;
+
+      .title {
+        text-align: center;
+        color: var(--jnrs-color-primary);
+      }
+
+      .form {
+        margin-top: 50px;
+      }
+
+      .btn {
+        width: 100%;
+        background: var(--jnrs-color-primary);
+        border: none;
+        transition: all 0.25s ease;
+
+        &:hover {
+          background: var(--jnrs-color-primary-light);
+        }
+      }
+
+      .greeting {
+        position: relative;
+        color: var(--jnrs-color-primary-06);
+        font-size: 14px;
+        text-align: center;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: 50%;
+          width: 35%;
+          height: 1px;
+          background: var(--jnrs-color-primary-06);
+          transform: translateY(-50%);
+          filter: opacity(0.25);
+        }
+
+        &::after {
+          left: 0;
+          top: 50%;
+        }
+      }
+    }
+
+    .card_right_copyright {
+      position: absolute;
+      bottom: 5px;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+</style>

package/jnrs-template-vue/tsconfig.json

@@ -19,6 +19,11 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*", "vite.config.ts"],
+  "include": [
+    "src/**/*",
+    "vite.config.ts",
+    "../../../packages/shared/src/validate.ts",
+    "../../../packages/shared/src/validator.ts"
+  ],
   "exclude": ["node_modules", "dist"]
 }

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

@@ -1,5 +1,4 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
@@ -7,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', './')
@@ -16,7 +15,7 @@ const isMock = config.VITE_USE_MOCK === 'true'
 export default defineConfig({
   plugins: [
     vue(),
-    vueDevTools(),
+    // vueDevTools(),
     AutoImport({
       resolvers: [ElementPlusResolver()]
     }),

package/jnrs-template-vue/viteMockServe/index.ts

@@ -6,6 +6,11 @@ const res_success = {
   msg: '操作成功'
 }
 
+const res_fail = {
+  code: 1,
+  msg: '操作失败'
+}
+
 export default [
   // 获取菜单
   {

package/package.json

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