bonus
/
js_image_annotation_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
BianLzhaoMin 2025-11-26 17:50:10 +08:00
parent 88c29b9dae
commit 3a2f0a0417
3 changed files with 425 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/imageCaptioning/image-captioning-library/index.vue
View File

@ -307,7 +307,7 @@ export default {
border-radius: 10px; border-radius: 10px;
align-content: flex-start; align-content: flex-start;
justify-items: center; justify-items: center;
height: 47%; height: 62%;
} }
.card-image { .card-image {

4
src/views/imageCaptioning/image-evaluate-library/index.vue
View File

@ -78,7 +78,7 @@
</div> </div>
<div class="person-info"> <div class="person-info">
<span class="name">备注:{{ item.remark }}</span> <span class="name">{{ item.remark }}</span>
</div> </div>
<!-- <div class="tags"> <!-- <div class="tags">
<div class="tag-row"> <div class="tag-row">
@ -283,7 +283,7 @@ export default {
border-radius: 10px; border-radius: 10px;
align-content: flex-start; align-content: flex-start;
justify-items: center; justify-items: center;
height: 43%; height: 56%;
} }
.card-image { .card-image {

183
src/views/login.vue
View File

@ -1,8 +1,13 @@
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">欢迎登录</h3> <h3 class="title">欢迎登录</h3>
<h3 class="title">{{title}}</h3> <h3 class="title">{{ title }}</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
@ -10,7 +15,11 @@
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="账号"
> >
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
@ -19,9 +28,14 @@
type="password" type="password"
auto-complete="off" auto-complete="off"
placeholder="密码" placeholder="密码"
show-password
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled"> <el-form-item prop="code" v-if="captchaEnabled">
@ -32,27 +46,41 @@
placeholder="验证码" placeholder="验证码"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <img
:src="codeUrl"
@click="getCode"
class="login-code-img"
/>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> <el-checkbox
<el-form-item style="width:100%;"> v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<el-form-item style="width: 100%">
<el-button <el-button
:loading="loading" :loading="loading"
size="medium" size="medium"
type="primary" type="primary"
style="width:100%;" style="width: 100%"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
<div style="float: right;" v-if="register"> <div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link> <router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -64,48 +92,62 @@
</template> </template>
<script> <script>
import { getCodeImg } from "@/api/login" import { getCodeImg } from '@/api/login'
import Cookies from "js-cookie" import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from '@/utils/jsencrypt'
import { getSystemConfigApi } from '@/utils/systemConfig' import { getSystemConfigApi } from '@/utils/systemConfig'
export default { export default {
name: "Login", name: 'Login',
data() { data() {
return { return {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
codeUrl: "", codeUrl: '',
loginForm: { loginForm: {
username: "", username: '',
password: "", password: '',
rememberMe: false, rememberMe: false,
code: "", code: '',
uuid: "" uuid: '',
}, },
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: "blur", message: "请输入您的账号" } {
required: true,
trigger: 'blur',
message: '请输入您的账号',
},
], ],
password: [ password: [
{ required: true, trigger: "blur", message: "请输入您的密码" } {
required: true,
trigger: 'blur',
message: '请输入您的密码',
},
],
code: [
{
required: true,
trigger: 'change',
message: '请输入验证码',
},
], ],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
}, },
loading: false, loading: false,
// 验证码开关 // 验证码开关
captchaEnabled: true, captchaEnabled: true,
// 注册开关 // 注册开关
register: false, register: false,
redirect: undefined redirect: undefined,
} }
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
this.redirect = route.query && route.query.redirect this.redirect = route.query && route.query.redirect
}, },
immediate: true immediate: true,
} },
}, },
created() { created() {
this.getSystemConfig() this.getSystemConfig()
@ -113,44 +155,63 @@ export default {
this.getCookie() this.getCookie()
}, },
methods: { methods: {
async getSystemConfig(){ async getSystemConfig() {
await getSystemConfigApi(); await getSystemConfigApi()
}, },
async getCode() { async getCode() {
await getCodeImg().then(res => { await getCodeImg().then((res) => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid this.loginForm.uuid = res.uuid
} }
}) })
}, },
getCookie() { getCookie() {
const username = Cookies.get("username") const username = Cookies.get('username')
const password = Cookies.get("password") const password = Cookies.get('password')
const rememberMe = Cookies.get('rememberMe') const rememberMe = Cookies.get('rememberMe')
this.loginForm = { this.loginForm = {
username: username === undefined ? this.loginForm.username : username, username:
password: password === undefined ? this.loginForm.password : decrypt(password), username === undefined ? this.loginForm.username : username,
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) password:
password === undefined
? this.loginForm.password
: decrypt(password),
rememberMe:
rememberMe === undefined ? false : Boolean(rememberMe),
} }
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading = true this.loading = true
if (this.loginForm.rememberMe) { if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 }) Cookies.set('username', this.loginForm.username, {
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }) expires: 30,
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }) })
Cookies.set(
'password',
encrypt(this.loginForm.password),
{ expires: 30 },
)
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30,
})
} else { } else {
Cookies.remove("username") Cookies.remove('username')
Cookies.remove("password") Cookies.remove('password')
Cookies.remove('rememberMe') Cookies.remove('rememberMe')
} }
this.$store.dispatch("Login", this.loginForm).then(() => { this.$store
this.$router.push({ path: this.redirect || "/" }).catch(()=>{}) .dispatch('Login', this.loginForm)
}).catch(() => { .then(() => {
this.$router
.push({ path: this.redirect || '/' })
.catch(() => {})
})
.catch(() => {
this.loading = false this.loading = false
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.getCode() this.getCode()
@ -158,8 +219,8 @@ export default {
}) })
} }
}) })
} },
} },
} }
</script> </script>
@ -170,7 +231,7 @@ export default {
align-items: center; align-items: center;
height: 100%; height: 100%;
background: #fff; background: #fff;
background-image: url("../assets/images/login-background.jpg"); background-image: url('../assets/images/login-background.jpg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left center; background-position: left center;
background-size: contain; background-size: contain;
@ -192,9 +253,9 @@ export default {
margin: 0px auto 20px auto; margin: 0px auto 20px auto;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
color: #060F2E; color: #060f2e;
font-size: 28px; font-size: 28px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@ -218,7 +279,7 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
height: 4px; height: 4px;
background: linear-gradient(90deg, #006E6B 0%, #008B8B 100%); background: linear-gradient(90deg, #006e6b 0%, #008b8b 100%);
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
} }
@ -237,13 +298,13 @@ export default {
background: #ffffff; background: #ffffff;
&:focus { &:focus {
border-color: #006E6B; border-color: #006e6b;
box-shadow: 0 0 0 3px rgba(0, 110, 107, 0.1); box-shadow: 0 0 0 3px rgba(0, 110, 107, 0.1);
background: #ffffff; background: #ffffff;
} }
&:hover { &:hover {
border-color: #008B8B; border-color: #008b8b;
} }
} }
@ -281,8 +342,8 @@ export default {
} }
.el-checkbox__input.is-checked .el-checkbox__inner { .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #006E6B; background-color: #006e6b;
border-color: #006E6B; border-color: #006e6b;
} }
} }
@ -291,7 +352,7 @@ export default {
border-radius: 8px; border-radius: 8px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
background: linear-gradient(135deg, #006E6B 0%, #008B8B 100%); background: linear-gradient(135deg, #006e6b 0%, #008b8b 100%);
border: none; border: none;
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease;
will-change: transform; will-change: transform;
@ -308,13 +369,13 @@ export default {
} }
.link-type { .link-type {
color: #006E6B; color: #006e6b;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
transition: color 0.3s ease; transition: color 0.3s ease;
&:hover { &:hover {
color: #008B8B; color: #008b8b;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -347,7 +408,7 @@ export default {
flex-shrink: 0; flex-shrink: 0;
&:hover { &:hover {
border-color: #006E6B; border-color: #006e6b;
transform: scale(1.02); transform: scale(1.02);
} }
@ -368,7 +429,9 @@ export default {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica,
Arial, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
letter-spacing: 0.5px; letter-spacing: 0.5px;