This commit is contained in:
2023-03-17 09:19:50 +08:00
parent 3a3b8aef06
commit b23402fa29
15 changed files with 798 additions and 556 deletions

3
.prettierignore Normal file
View File

@ -0,0 +1,3 @@
dist
node_modules
yarn.lock

0
.prettierrc.yaml Normal file
View File

View File

@ -11,11 +11,11 @@
## 平台简介
* 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
* 配套后端代码仓库地址[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue) 或 [RuoYi-Vue-fast](https://github.com/yangzongzhuan/RuoYi-Vue-fast) 版本。
* 前端技术栈([Vue2](https://cn.vuejs.org) + [Element](https://github.com/ElemeFE/element) + [Vue CLI](https://cli.vuejs.org/zh)),请移步[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue/tree/master/ruoyi-ui)。
* 阿里云折扣场:[点我进入](http://aly.ruoyi.vip),腾讯云秒杀场:[点我进入](http://txy.ruoyi.vip)  
* 阿里云优惠券:[点我领取](https://www.aliyun.com/minisite/goods?userCode=brki8iof&share_source=copy_link),腾讯云优惠券:[点我领取](https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console)  
- 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
- 配套后端代码仓库地址[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue) 或 [RuoYi-Vue-fast](https://github.com/yangzongzhuan/RuoYi-Vue-fast) 版本。
- 前端技术栈([Vue2](https://cn.vuejs.org) + [Element](https://github.com/ElemeFE/element) + [Vue CLI](https://cli.vuejs.org/zh)),请移步[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue/tree/master/ruoyi-ui)。
- 阿里云折扣场:[点我进入](http://aly.ruoyi.vip),腾讯云秒杀场:[点我进入](http://txy.ruoyi.vip)  
- 阿里云优惠券:[点我领取](https://www.aliyun.com/minisite/goods?userCode=brki8iof&share_source=copy_link),腾讯云优惠券:[点我领取](https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console)  
## 前端运行
@ -103,7 +103,6 @@ yarn dev
</tr>
</table>
## 若依前后端分离交流群
QQ 群: [![加入QQ群](https://img.shields.io/badge/已满-937441-blue.svg)](https://jq.qq.com/?_wv=1027&k=5bVB1og) [![加入QQ群](https://img.shields.io/badge/已满-887144332-blue.svg)](https://jq.qq.com/?_wv=1027&k=5eiA4DH) [![加入QQ群](https://img.shields.io/badge/已满-180251782-blue.svg)](https://jq.qq.com/?_wv=1027&k=5AxMKlC) [![加入QQ群](https://img.shields.io/badge/已满-104180207-blue.svg)](https://jq.qq.com/?_wv=1027&k=51G72yr) [![加入QQ群](https://img.shields.io/badge/已满-186866453-blue.svg)](https://jq.qq.com/?_wv=1027&k=VvjN2nvu) [![加入QQ群](https://img.shields.io/badge/已满-201396349-blue.svg)](https://jq.qq.com/?_wv=1027&k=5vYAqA05) [![加入QQ群](https://img.shields.io/badge/已满-101456076-blue.svg)](https://jq.qq.com/?_wv=1027&k=kOIINEb5) [![加入QQ群](https://img.shields.io/badge/已满-101539465-blue.svg)](https://jq.qq.com/?_wv=1027&k=UKtX5jhs) [![加入QQ群](https://img.shields.io/badge/已满-264312783-blue.svg)](https://jq.qq.com/?_wv=1027&k=EI9an8lJ) [![加入QQ群](https://img.shields.io/badge/已满-167385320-blue.svg)](https://jq.qq.com/?_wv=1027&k=SWCtLnMz) [![加入QQ群](https://img.shields.io/badge/已满-104748341-blue.svg)](https://jq.qq.com/?_wv=1027&k=96Dkdq0k) [![加入QQ群](https://img.shields.io/badge/已满-160110482-blue.svg)](https://jq.qq.com/?_wv=1027&k=0fsNiYZt) [![加入QQ群](https://img.shields.io/badge/已满-170801498-blue.svg)](https://jq.qq.com/?_wv=1027&k=7xw4xUG1) [![加入QQ群](https://img.shields.io/badge/108482800-blue.svg)](https://jq.qq.com/?_wv=1027&k=eCx8eyoJ) 点击按钮入群。

File diff suppressed because one or more lines are too long

View File

@ -1,14 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="/favicon.ico" />
<title>若依管理系统</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<!--[if lt IE 11
]><script>
window.location.href = "/html/ie.html";
</script><!
[endif]-->
<style>
html,
body,
@ -44,7 +50,7 @@
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
@ -62,7 +68,7 @@
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
@ -79,7 +85,7 @@
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
@ -87,7 +93,6 @@
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
@ -116,13 +121,12 @@
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
background: #7171c6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
@ -137,21 +141,20 @@
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader {
@ -178,8 +181,8 @@
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-family: "Open Sans";
color: #fff;
font-size: 19px;
width: 100%;
text-align: center;
@ -194,7 +197,7 @@
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
color: #fff;
opacity: 0.5;
}
</style>
@ -211,5 +214,4 @@
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

View File

@ -8,7 +8,8 @@
"dev": "vite",
"build:prod": "vite build",
"build:stage": "vite build --mode staging",
"preview": "vite preview"
"preview": "vite preview",
"fmt": "prettier -w ."
},
"repository": {
"type": "git",
@ -33,6 +34,7 @@
"devDependencies": {
"@vitejs/plugin-vue": "3.1.0",
"@vue/compiler-sfc": "3.2.45",
"prettier": "^2.8.4",
"sass": "1.56.1",
"unplugin-auto-import": "0.11.4",
"vite": "3.2.3",

BIN
src/assets/images/title.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -6,7 +6,7 @@
:rules="loginRules"
class="login-form"
>
<h3 class="title">木鸢物联平台</h3>
<h3 class="title"></h3>
<el-tabs v-model="loginMethod" class="login-method-tabs">
<el-tab-pane label="密码登录" name="password"></el-tab-pane>
<el-tab-pane label="验证码登录" name="captcha"></el-tab-pane>
@ -65,8 +65,8 @@
<el-checkbox
v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
>记住密码
</el-checkbox>
</div>
<div v-if="loginMethod === 'captcha'">
<el-form-item prop="phone">
@ -148,15 +148,15 @@
<div v-if="register" style="text-align: left">
没有账号?
<router-link :to="'/register'" class="link-type"
>立即注册</router-link
>
>立即注册
</router-link>
</div>
</el-col>
<el-col :span="12">
<div style="text-align: right">
<router-link class="link-type" to="/iforgot"
>忘记密码</router-link
>
>忘记密码
</router-link>
</div>
</el-col>
</el-row>
@ -304,9 +304,14 @@ getCookie();
}
.title {
margin: 0px auto 12px auto;
margin: 0 auto 0 auto;
text-align: center;
height: 32px;
color: #707070;
background-image: url("../assets/images/title.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.login-form {

View File

@ -6,7 +6,7 @@
:rules="registerRules"
class="register-form"
>
<h3 class="title">欢迎来到木鸢物联平台</h3>
<h3 class="title">欢迎来到<span></span></h3>
<el-form-item prop="username">
<el-input
v-model="registerForm.username"
@ -79,6 +79,7 @@
oninput="value=value.replace(/[^\d]/g,'')"
placeholder="请输入短信验证码"
size="large"
@keyup.enter="handleRegister"
>
<template #prefix>
<svg-icon class="el-input__icon input-icon" icon-class="email" />
@ -87,7 +88,7 @@
<el-button
:loading="getSMSCodeCountDown > 0"
link
type="info"
type="primary"
@click="getSMSCode"
>
{{
@ -112,8 +113,8 @@
</el-button>
<div style="float: right">
<router-link :to="'/login'" class="link-type"
>使用已有账户登录</router-link
>
>使用已有账户登录
</router-link>
</div>
</el-form-item>
</el-form>
@ -254,9 +255,22 @@ getCode();
}
.title {
margin: 0px auto 12px auto;
margin: 0 auto 12px auto;
text-align: center;
color: #707070;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
span {
display: block;
width: calc(32px / 39 * 157);
height: 100%;
background-image: url("../assets/images/title.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center left;
}
}
.register-form {
@ -282,6 +296,11 @@ getCode();
.sms-code-input {
:deep(.el-input-group__append) {
width: 40%;
.el-button {
display: flex;
align-items: center;
}
}
}
}

View File

@ -1,27 +1,27 @@
import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
import { defineConfig, loadEnv } from "vite";
import path from "path";
import createVitePlugins from "./vite/plugins";
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())
const { VITE_APP_ENV } = env
const env = loadEnv(mode, process.cwd());
const { VITE_APP_ENV } = env;
return {
// 部署生产环境和开发环境下的URL。
// 默认情况下vite 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
base: VITE_APP_ENV === 'production' ? '/' : '/',
plugins: createVitePlugins(env, command === 'build'),
base: VITE_APP_ENV === "production" ? "/" : "/",
plugins: createVitePlugins(env, command === "build"),
resolve: {
// https://cn.vitejs.dev/config/#resolve-alias
alias: {
// 设置路径
'~': path.resolve(__dirname, './'),
"~": path.resolve(__dirname, "./"),
// 设置别名
'@': path.resolve(__dirname, './src')
"@": path.resolve(__dirname, "./src"),
},
// https://cn.vitejs.dev/config/#resolve-extensions
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
},
// vite 相关配置
server: {
@ -30,29 +30,29 @@ export default defineConfig(({ mode, command }) => {
open: true,
proxy: {
// https://cn.vitejs.dev/config/#server-proxy
'/dev-api': {
target: 'http://192.168.1.16:1616',
"/dev-api": {
target: "http://192.168.1.16:1616",
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}
}
rewrite: (p) => p.replace(/^\/dev-api/, ""),
},
},
},
//fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
css: {
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
postcssPlugin: "internal:charset-removal",
AtRule: {
charset: (atRule) => {
if (atRule.name === 'charset') {
if (atRule.name === "charset") {
atRule.remove();
}
}
}
}
]
}
}
}
})
},
},
},
],
},
},
};
});

View File

@ -1,12 +1,8 @@
import autoImport from 'unplugin-auto-import/vite'
import autoImport from "unplugin-auto-import/vite";
export default function createAutoImport() {
return autoImport({
imports: [
'vue',
'vue-router',
'pinia'
],
dts: false
})
imports: ["vue", "vue-router", "pinia"],
dts: false,
});
}

View File

@ -1,28 +1,28 @@
import compression from 'vite-plugin-compression'
import compression from "vite-plugin-compression";
export default function createCompression(env) {
const { VITE_BUILD_COMPRESS } = env
const plugin = []
const { VITE_BUILD_COMPRESS } = env;
const plugin = [];
if (VITE_BUILD_COMPRESS) {
const compressList = VITE_BUILD_COMPRESS.split(',')
if (compressList.includes('gzip')) {
const compressList = VITE_BUILD_COMPRESS.split(",");
if (compressList.includes("gzip")) {
// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
plugin.push(
compression({
ext: '.gz',
deleteOriginFile: false
ext: ".gz",
deleteOriginFile: false,
})
)
);
}
if (compressList.includes('brotli')) {
if (compressList.includes("brotli")) {
plugin.push(
compression({
ext: '.br',
algorithm: 'brotliCompress',
deleteOriginFile: false
ext: ".br",
algorithm: "brotliCompress",
deleteOriginFile: false,
})
)
);
}
}
return plugin
return plugin;
}

View File

@ -1,15 +1,15 @@
import vue from '@vitejs/plugin-vue'
import vue from "@vitejs/plugin-vue";
import createAutoImport from './auto-import'
import createSvgIcon from './svg-icon'
import createCompression from './compression'
import createSetupExtend from './setup-extend'
import createAutoImport from "./auto-import";
import createSvgIcon from "./svg-icon";
import createCompression from "./compression";
import createSetupExtend from "./setup-extend";
export default function createVitePlugins(viteEnv, isBuild = false) {
const vitePlugins = [vue()]
vitePlugins.push(createAutoImport())
vitePlugins.push(createSetupExtend())
vitePlugins.push(createSvgIcon(isBuild))
isBuild && vitePlugins.push(...createCompression(viteEnv))
return vitePlugins
const vitePlugins = [vue()];
vitePlugins.push(createAutoImport());
vitePlugins.push(createSetupExtend());
vitePlugins.push(createSvgIcon(isBuild));
isBuild && vitePlugins.push(...createCompression(viteEnv));
return vitePlugins;
}

View File

@ -1,5 +1,5 @@
import setupExtend from 'vite-plugin-vue-setup-extend'
import setupExtend from "vite-plugin-vue-setup-extend";
export default function createSetupExtend() {
return setupExtend()
return setupExtend();
}

View File

@ -1,10 +1,10 @@
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";
export default function createSvgIcon(isBuild) {
return createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
symbolId: 'icon-[dir]-[name]',
svgoOptions: isBuild
})
iconDirs: [path.resolve(process.cwd(), "src/assets/icons/svg")],
symbolId: "icon-[dir]-[name]",
svgoOptions: isBuild,
});
}