create-jnrs-template-vue 1.1.3 → 1.1.5

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

@@ -1,61 +1,245 @@
 <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'
+import { formatDateTime, formatWeekday } from '@jnrs/shared'
 
 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
+      userInfo.loginDateTime = formatDateTime() + ' ' + formatWeekday()
+      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">
+.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/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/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'
@@ -21,6 +20,7 @@ export default defineConfig({
       resolvers: [ElementPlusResolver()]
     }),
     Components({
+      dirs: [], // 禁用本地组件自动导入
       resolvers: [ElementPlusResolver()]
     }),
     compression({
@@ -50,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/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.5",
   "description": "巨能前端工程化开发，Vue 项目模板脚手架",
   "keywords": [
     "vue",

package/jnrs-template-vue/src/assets/styles/base.css

@@ -1,28 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  width: 100vw;
-  color: #14161a;
-  height: 100vh;
-  background: #f2f2f2;
-  transition:
-    color 1.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-}
-
-#app {
-  min-width: 1280px;
-  height: 100%;
-  font-weight: normal;
-}
-
-a {
-  text-decoration: none;
-}

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

@@ -1 +0,0 @@
-@import './base.css';

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

@@ -1,7 +0,0 @@
-/**
- * @Author : TanRui
- * @WeChat : Tan578853789
- * @File   : storage.ts
- * @Date   : 2025/09/30
- * @Desc.  : 本地存储
- */