yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

集成tailwindcss 替换新的登陆页面和版权信息组件 (#1499)

Browse Source 
* 集成tailwindcss

* fix: 修改登录，init 页面

* Update package.json

* 升级可升级的第三方库到新版本

* 细节调整

---------

Co-authored-by: bypanghu <bypanghu@163.com>
Co-authored-by: task <121913992@qq.com>
This commit is contained in:
奇淼（piexlmax
2023-08-04 17:03:21 +08:00
committed by GitHub
co-authored by bypanghu task
parent ab29267d64
commit 350f4572ed
24 changed files with 640 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.vue
+3
View File
@@ -18,6 +18,9 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// import zhCn from 'element-plus/lib/locale/lang/zh-cn'
</script>
<style lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;
// 引入初始化样式
#app {
background: #eee;
web/src/assets/login_right_banner.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 702 KiB

web/src/view/init/index.vue
+42 -83
View File
@@ -1,57 +1,58 @@
<template>
<div class="init_page">
<div class="init_page_panel">
<div v-if="hello < 2" id="hello" :class="[hello < 1 ? 'slide-in-fwd-top' : 'slide-out-right']" class="hello">
<div>
<div class="hello_title">GIN-VUE-ADMIN</div>
<p class="in-two a-fadeinT">初始化须知</p>
<p class="init_p">1.您需有用一定的VUE和GOLANG基础</p>
<p class="init_p">2.请您确认是否已经阅读过官方文档</p>
<p class="init_p">3.请您确认是否了解后续的配置流程</p>
<p class="init_p">4.如果您使用mysql数据库，请确认数据库引擎为<span style="color: red">innoDB</span></p>
<p class="init_p">注：开发组不为文档中书写过的内容提供无偿服务</p>
<p class="init_btn">
<el-button type="primary" @click="goDoc">
<div class="rounded-lg flex items-center justify-evenly w-full h-full relative bg-white md:w-screen md:h-screen md:bg-[#194bfb] overflow-hidden">
<div class="rounded-md w-full h-full flex items-center justify-center overflow-hidden">
<div class="oblique h-[130%] w-3/5 bg-white transform -rotate-12 absolute -ml-80" />
<div v-if="!page.showForm" :class="[page.showReadme ?'slide-out-right' :'slide-in-fwd-top' ]">
<div class=" text-lg">
<div class="font-sans text-4xl font-bold text-center mb-4">GIN-VUE-ADMIN</div>
<p class="text-gray-600 mb-2">初始化须知</p>
<p class="text-gray-600 mb-2">1.您需有用一定的VUE和GOLANG基础</p>
<p class="text-gray-600 mb-2">2.请您确认是否已经阅读过<a class="text-blue-600 font-bold" href="https://www.gin-vue-admin.com">官方文档</a></p>
<p class="text-gray-600 mb-2">3.请您确认是否了解后续的配置流程</p>
<p class="text-gray-600 mb-2">4.如果您使用mysql数据库，请确认数据库引擎为<span class="text-red-600 font-bold text-3xl ml-2 ">innoDB</span></p>
<p class="text-gray-600 mb-2">注：开发组不为文档中书写过的内容提供无偿服务</p>
<p class="flex items-center justify-between mt-8">
<el-button type="primary" @click="goDoc" size="large">
阅读文档
</el-button>
<el-button type="primary" @click="showNext">
<el-button type="primary" @click="showNext" size="large">
我已确认
</el-button>
</p>
</div>
</div>
<div
v-if="hello > 0 "
:class="[(hello > 0 && !out)? 'slide-in-left' : '' , out ? 'slide-out-right' : '']"
class="form"
v-if="page.showForm "
:class="[ page.showForm ? 'slide-in-left' : 'slide-out-right' ]"
class="w-96"
>
<el-form ref="formRef" :model="form" label-width="100px">
<el-form ref="formRef" :model="form" label-width="100px" size="large">
<el-form-item label="数据库类型">
<el-select v-model="form.dbType" placeholder="请选择" @change="changeDB">
<el-select v-model="form.dbType" placeholder="请选择" @change="changeDB" class="w-full">
<el-option key="mysql" label="mysql" value="mysql" />
<el-option key="pgsql" label="pgsql" value="pgsql" />
<el-option key="oracle" label="oracle" value="oracle" />
<el-option key="mssql" label="mssql" value="mssql" />
<el-option key="sqlite" label="sqlite" value="sqlite"/>
<el-option key="sqlite" label="sqlite" value="sqlite" />
</el-select>
</el-form-item>
<el-form-item label="host" v-if="form.dbType !== 'sqlite'">
<el-form-item v-if="form.dbType !== 'sqlite'" label="host">
<el-input v-model="form.host" placeholder="请输入数据库链接" />
</el-form-item>
<el-form-item label="port" v-if="form.dbType !== 'sqlite'">
<el-form-item v-if="form.dbType !== 'sqlite'" label="port">
<el-input v-model="form.port" placeholder="请输入数据库端口" />
</el-form-item>
<el-form-item label="userName" v-if="form.dbType !== 'sqlite'">
<el-form-item v-if="form.dbType !== 'sqlite'" label="userName">
<el-input v-model="form.userName" placeholder="请输入数据库用户名" />
</el-form-item>
<el-form-item label="password" v-if="form.dbType !== 'sqlite'">
<el-form-item v-if="form.dbType !== 'sqlite'" label="password">
<el-input v-model="form.password" placeholder="请输入数据库密码（没有则为空）" />
</el-form-item>
<el-form-item label="dbName">
<el-input v-model="form.dbName" placeholder="请输入数据库名称" />
</el-form-item>
<el-form-item label="dbPath" v-if="form.dbType === 'sqlite'">
<el-input v-model="form.dbPath" placeholder="请输入sqlite数据库文件存放路径"></el-input>
<el-form-item v-if="form.dbType === 'sqlite'" label="dbPath">
<el-input v-model="form.dbPath" placeholder="请输入sqlite数据库文件存放路径" />
</el-form-item>
<el-form-item>
<div style="text-align: right">
@@ -61,6 +62,12 @@
</el-form>
</div>
</div>
<div class="hidden md:block w-1/2 h-full float-right bg-[#194bfb]"><img
class="h-full"
src="@/assets/login_right_banner.jpg"
alt="banner"
></div>
</div>
</template>
@@ -79,9 +86,16 @@ import { useRouter } from 'vue-router'
const router = useRouter()
const hello = ref(0)
const page = reactive({
showReadme: false,
showForm: false
})
const showNext = () => {
hello.value = hello.value + 1
page.showReadme = false
setTimeout(() => {
page.showForm = true
}, 20)
}
const goDoc = () => {
@@ -194,61 +208,6 @@ const onSubmit = async() => {
</script>
<style lang="scss" scoped>
.init_page {
margin: 0;
padding: 0;
background-image: url('@/assets/login_background.jpg');
background-size: cover;
width: 100%;
height: 100%;
position: relative;
.init_page_panel {
position: absolute;
top: 3vh;
left: 2vw;
width: 96vw;
height: 94vh;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-evenly;
.hello {
position: absolute;
z-index: 2;
text-align: center;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.hello_title {
font-size: 32px;
line-height: 98px;
}
.in-two {
font-size: 22px;
}
.init_p {
margin-top: 20px;
color: #777777;
}
.init_btn {
margin-top: 20px;
}
}
.form {
position: absolute;
z-index: 3;
margin-top: 60px;
width: 600px;
height: auto;
padding: 20px;
border-radius: 6px;
}
}
}
.slide-in-fwd-top {
-webkit-animation: slide-in-fwd-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
web/src/view/layout/bottomInfo/bottomInfo.vue
+21 -29
View File
@@ -1,16 +1,16 @@
<!-- 此文件禁止修改！如果您没有购买授权，请联系wx:shouzi_1994购买授权，未授权状态只需保留此代码 不影响任何正常使用 -->
<template>
<div class="bottom-info">
<div>
<span>Powered by</span>
<span>
<a href="https://github.com/flipped-aurora/gin-vue-admin">{{ $GIN_VUE_ADMIN.appName }}</a>
</span>
<el-divider direction="vertical" />
<span>Copyright</span>
<span>
<a href="https://github.com/flipped-aurora">flipped-aurora团队</a>
</span>
</div>
<div class="flex gap-4 items-center text-sm text-gray-500 justify-center mb-4">
<span>Powered by</span>
<span>
<a class="text-gray-800 font-bold" href="https://github.com/flipped-aurora/gin-vue-admin">{{ $GIN_VUE_ADMIN.appName }}</a>
</span>
<slot />
<span>Copyright</span>
<span>
<a class="text-gray-800 font-bold" href="https://github.com/flipped-aurora">flipped-aurora团队</a>
</span>
</div>
</template>
@@ -22,20 +22,12 @@ export default {
}
</script>
<style lang="scss">
.bottom-info {
color: #888;
height: 30px;
line-height: 12px;
a {
color: #888;
}
div {
display: flex;
justify-content: center;
span{
margin: 0 3px;
}
}
}
</style>
<script setup>
console.log(
`%c powered by %c flipped-aurorae %c`,
'background:#0081ff; padding: 1px; border-radius: 3px 0 0 3px; color: #fff',
'background:#354855; padding: 1px 5px; border-radius: 0 3px 3px 0; color: #fff; font-weight: bold;',
'background:transparent'
)
</script>
web/src/view/login/index.vue
+80 -93
View File
@@ -1,97 +1,88 @@
<template>
<div id="userLayout">
<div class="login_panel">
<div class="login_panel_form">
<div class="login_panel_form_title">
<img
class="login_panel_form_title_logo"
:src="$GIN_VUE_ADMIN.appLogo"
alt
>
<p class="login_panel_form_title_p">{{ $GIN_VUE_ADMIN.appName }}</p>
</div>
<el-form
ref="loginForm"
:model="loginFormData"
:rules="rules"
:validate-on-rule-change="false"
@keyup.enter="submitForm"
>
<el-form-item prop="username">
<el-input
v-model="loginFormData.username"
size="large"
placeholder="请输入用户名"
suffix-icon="user"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginFormData.password"
show-password
size="large"
type="password"
placeholder="请输入密码"
/>
</el-form-item>
<el-form-item v-if="loginFormData.openCaptcha" prop="captcha">
<div class="vPicBox">
<el-input
v-model="loginFormData.captcha"
placeholder="请输入验证码"
size="large"
style="flex:1;padding-right: 20px;"
/>
<div class="vPic">
<img
v-if="picPath"
:src="picPath"
alt="请输入验证码"
@click="loginVerify()"
>
</div>
<div id="userLayout" class="w-full h-full relative">
<div
class="rounded-lg flex items-center justify-evenly w-full h-full bg-white md:w-screen md:h-screen md:bg-[#194bfb]"
>
<div class="md:w-3/5 w-10/12 h-full flex items-center justify-evenly">
<div class="oblique h-[130%] w-3/5 bg-white transform -rotate-12 absolute -ml-52" />
<!-- 分割斜块 -->
<div class="z-[999] pt-12 pb-10 md:w-96 w-full rounded-lg flex flex-col justify-between box-border">
<div>
<div class="flex items-center justify-center">
<img class="w-24" :src="$GIN_VUE_ADMIN.appLogo" alt>
</div>
</el-form-item>
<el-form-item>
<el-button
type="primary"
style="width: 46%"
size="large"
@click="checkInit"
>前往初始化</el-button>
<el-button
type="primary"
size="large"
style="width: 46%; margin-left: 8%"
@click="submitForm"
>登 录</el-button>
</el-form-item>
</el-form>
</div>
<div class="login_panel_right" />
<div class="login_panel_foot">
<div class="links">
<a href="http://doc.henrongyi.top/" target="_blank">
<img src="@/assets/docs.png" class="link-icon" alt="文档">
</a>
<a href="https://support.qq.com/product/371961" target="_blank">
<img src="@/assets/kefu.png" class="link-icon" alt="客服">
</a>
<a
href="https://github.com/flipped-aurora/gin-vue-admin"
target="_blank"
>
<img src="@/assets/github.png" class="link-icon" alt="github">
</a>
<a href="https://space.bilibili.com/322210472" target="_blank">
<img src="@/assets/video.png" class="link-icon" alt="视频站">
</a>
</div>
<div class="copyright">
<BottomInfo />
<div class="mb-9">
<p class="text-center text-4xl font-bold">{{ $GIN_VUE_ADMIN.appName }}</p>
<p class="text-center text-sm font-normal text-gray-500 mt-2.5">A management platform using Golang and Vue
</p>
</div>
<el-form
ref="loginForm"
:model="loginFormData"
:rules="rules"
:validate-on-rule-change="false"
@keyup.enter="submitForm"
>
<el-form-item prop="username" class="mb-6">
<el-input v-model="loginFormData.username" size="large" placeholder="请输入用户名" suffix-icon="user" />
</el-form-item>
<el-form-item prop="password" class="mb-6">
<el-input
v-model="loginFormData.password"
show-password
size="large"
type="password"
placeholder="请输入密码"
/>
</el-form-item>
<el-form-item v-if="loginFormData.openCaptcha" prop="captcha" class="mb-6">
<div class="flex w-full justify-between">
<el-input v-model="loginFormData.captcha" placeholder="请输入验证码" size="large" class="flex-1 mr-5" />
<div class="w-1/3 h-11 bg-[#c3d4f2] rounded">
<img v-if="picPath" class="w-full h-full" :src="picPath" alt="请输入验证码" @click="loginVerify()">
</div>
</div>
</el-form-item>
<el-form-item class="mb-6">
<el-button class="shadow shadow-blue-600 h-11 w-full" type="primary" size="large" @click="submitForm">登
录</el-button>
</el-form-item>
<el-form-item class="mb-6">
<el-button
class="shadow shadow-blue-600 h-11 w-full"
type="primary"
size="large"
@click="checkInit"
>前往初始化</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
<div class="hidden md:block w-1/2 h-full float-right bg-[#194bfb]"><img
class="h-full"
src="@/assets/login_right_banner.jpg"
alt="banner"
></div>
</div>
<BottomInfo class="left-0 right-0 absolute bottom-3 mx-auto w-full z-20">
<div class="links items-center justify-center gap-2 hidden md:flex">
<a href="http://doc.henrongyi.top/" target="_blank">
<img src="@/assets/docs.png" class="w-8 h-8" alt="文档">
</a>
<a href="https://support.qq.com/product/371961" target="_blank">
<img src="@/assets/kefu.png" class="w-8 h-8" alt="客服">
</a>
<a href="https://github.com/flipped-aurora/gin-vue-admin" target="_blank">
<img src="@/assets/github.png" class="w-8 h-8" alt="github">
</a>
<a href="https://space.bilibili.com/322210472" target="_blank">
<img src="@/assets/video.png" class="w-8 h-8" alt="视频站">
</a>
</div>
</BottomInfo>
</div>
</template>
@@ -203,7 +194,3 @@ const checkInit = async() => {
}
</script>
<style lang="scss" scoped>
@import "@/style/newLogin.scss";
</style>