OptimusX
/
OneAuth
mirror of https://github.com/veypi/OneAuth.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity

update login

Browse Source
v3
veypi 3 weeks ago
parent 271131a5e1
commit 4e48cd187d
4 changed files with 72 additions and 108 deletions
Show Stats Download Patch File Download Diff File

22
ui/assets/others.css
Unescape Escape View File

@ -1,55 +1,35 @@
/* 用于定义第三库的样式变量 */ /* 用于定义vyes-ui库的样式变量 */
body { body {
--v-color-primary: var(--color-primary); --v-color-primary: var(--color-primary);
--v-color-primary-hover: var(--color-primary-hover); --v-color-primary-hover: var(--color-primary-hover);
--v-color-primary-active: var(--color-primary-active); --v-color-primary-active: var(--color-primary-active);
--v-color-primary-text: var(--color-primary-text); --v-color-primary-text: var(--color-primary-text);
--v-color-secondary: var(--color-secondary); --v-color-secondary: var(--color-secondary);
--v-color-secondary-hover: var(--color-secondary-hover); --v-color-secondary-hover: var(--color-secondary-hover);
--v-color-secondary-active: var(--color-secondary-active); --v-color-secondary-active: var(--color-secondary-active);
--v-color-secondary-text: var(--color-secondary-text); --v-color-secondary-text: var(--color-secondary-text);
/* Feedback */ /* Feedback */
--v-color-info: var(--color-info); --v-color-info: var(--color-info);
--v-color-success: var(--color-success); --v-color-success: var(--color-success);
--v-color-warning: var(--color-warning); --v-color-warning: var(--color-warning);
--v-color-danger: var(--color-danger); --v-color-danger: var(--color-danger);
--v-color-danger-hover: var(--color-danger-hover); --v-color-danger-hover: var(--color-danger-hover);
/* Backgrounds */ /* Backgrounds */
--v-bg-color: var(--bg-color); --v-bg-color: var(--bg-color);
--v-bg-color-secondary: var(--bg-color-secondary); --v-bg-color-secondary: var(--bg-color-secondary);
--v-bg-color-tertiary: var(--bg-color-tertiary); --v-bg-color-tertiary: var(--bg-color-tertiary);
/* Text */ /* Text */
--v-text-color: var(--text-color); --v-text-color: var(--text-color);
--v-text-color-secondary: var(--text-color-secondary); --v-text-color-secondary: var(--text-color-secondary);
--v-text-color-tertiary: var(--text-color-tertiary); --v-text-color-tertiary: var(--text-color-tertiary);
--v-text-color-disabled: var(--text-color-disabled); --v-text-color-disabled: var(--text-color-disabled);
--v-text-color-inverse: var(--text-color-inverse); --v-text-color-inverse: var(--text-color-inverse);
/* Borders */ /* Borders */
--v-border-color: var(--border-color); --v-border-color: var(--border-color);
--v-border-color-hover: var(--border-color-hover); --v-border-color-hover: var(--border-color-hover);
} }
/* 自定义可视化流程图的暗黑主题变量 */
body {
--vf-bg-color: var(--bg-color-secondary) !important;
--vf-grid-color: var(--border-color) !important;
--vf-node-bg: var(--bg-color-secondary) !important;
--vf-node-border: var(--border-color) !important;
--vf-node-header-bg: var(--bg-color-tertiary) !important;
--vf-text-color: var(--text-color) !important;
--vf-port-color: var(--color-primary) !important;
--vf-port-hover: var(--color-primary-hover) !important;
--vf-edge-color: #888888 !important;
--vf-edge-selected: var(--color-primary) !important;
--vf-shadow-color: rgba(0, 0, 0, 0.1) !important;
}
/* 图标交互效果 */ /* 图标交互效果 */
i.fa-solid { i.fa-solid {

2
ui/page/404.html
Unescape Escape View File

@ -102,7 +102,7 @@ body {
<div class="container"> <div class="container">
<h1 class="error-code">404</h1> <h1 class="error-code">404</h1>
<div class="message">Oops! You seem to be lost in space.</div> <div class="message">Oops! You seem to be lost in space.</div>
<v-btn :click="goHome" size="lg" variant="primary" style="font-size: 1.2rem; padding: 0.8rem 3rem; border-radius: 50px;">Go Home</v-btn> <v-btn :click="goHome" size="lg" variant="primary" round style="font-size: 1.2rem; padding: 0.8rem 3rem;">Go Home</v-btn>
</div> </div>
</body> </body>
<script setup> <script setup>

117
ui/page/login.html
Unescape Escape View File

@ -55,13 +55,20 @@
} }
@keyframes float { @keyframes float {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(30px, 20px); } 0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(30px, 20px);
}
} }
/* 主容器 */ /* 主容器 */
.container { .container {
background-color: var(--bg-color); background-color: var(--color-primary-text);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
position: relative; position: relative;
@ -77,7 +84,7 @@
top: 0; top: 0;
height: 100%; height: 100%;
transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;
background: var(--bg-color); background: var(--color-primary-text);
} }
.sign-in-container { .sign-in-container {
@ -105,8 +112,18 @@
} }
@keyframes show { @keyframes show {
0%, 49.99% { opacity: 0; z-index: 1; }
50%, 100% { opacity: 1; z-index: 5; } 0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%,
100% {
opacity: 1;
z-index: 5;
}
} }
.form-container-inner { .form-container-inner {
@ -184,7 +201,7 @@
.tab-item.active { .tab-item.active {
color: var(--color-primary); color: var(--color-primary);
background: var(--bg-color); background: var(--color-primary-text);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
font-weight: 600; font-weight: 600;
} }
@ -198,10 +215,6 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.input-wrapper {
width: 100%;
}
.phone-row { .phone-row {
display: flex; display: flex;
gap: 10px; gap: 10px;
@ -259,7 +272,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: 0 0; background-position: 0 0;
color: #fff; color: var(--color-primary-text);
position: relative; position: relative;
left: -100%; left: -100%;
height: 100%; height: 100%;
@ -288,7 +301,7 @@
} }
.overlay-panel h1 { .overlay-panel h1 {
color: #fff; color: var(--color-primary-text);
} }
.overlay-panel p { .overlay-panel p {
@ -296,7 +309,7 @@
font-weight: 300; font-weight: 300;
line-height: 24px; line-height: 24px;
margin: 20px 0 30px; margin: 20px 0 30px;
color: rgba(255, 255, 255, 0.9); color: color-mix(in srgb, var(--color-primary-text), transparent 10%);
} }
.overlay-left { .overlay-left {
@ -316,24 +329,9 @@
transform: translateX(20%); transform: translateX(20%);
} }
/* 按钮覆盖样式 */ /* 按钮覆盖样式 - REMOVED to avoid conflict with internal styles */
.btn-ghost {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.btn-ghost:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
/* v-btn 通用样式微调 */
v-btn {
font-weight: 600;
letter-spacing: 0.5px;
}
/* v-btn 通用样式微调 - REMOVED to avoid conflict with internal styles */
</style> </style>
</head> </head>
@ -361,37 +359,28 @@
<div class="subtitle" style="margin: 0 0 15px; font-size: 12px;">或使用手机/邮箱注册</div> <div class="subtitle" style="margin: 0 0 15px; font-size: 12px;">或使用手机/邮箱注册</div>
<div class="input-group"> <div class="input-group">
<div class="input-wrapper"> <v-input v:value="signUpForm.username" placeholder="用户名"></v-input>
<v-input v:value="signUpForm.username" placeholder="用户名" prefix-icon="fa fa-user"></v-input>
</div>
<!-- 手机号输入框带区域选择 --> <!-- 手机号输入框带区域选择 -->
<div v-if='$G.cfg.sms' class="phone-row"> <div v-if='$G.cfg.sms' class="phone-row">
<div style="width: 110px;"> <v-input type="select" v:value="signUpForm.region" :opts="{options: regions}"></v-input>
<v-input type="select" v:value="signUpForm.region" :opts="{options: regions}" :clearable="false"></v-input> <v-input v:value="signUpForm.phone" placeholder="手机号"></v-input>
</div>
<div style="flex: 1;">
<v-input v:value="signUpForm.phone" placeholder="手机号" prefix-icon="fa fa-mobile"></v-input>
</div>
</div> </div>
<div v-if='$G.cfg.sms' class="verify-row"> <div v-if='$G.cfg.sms' class="verify-row">
<div style="flex: 1;"> <v-input v:value="signUpForm.verifyCode" placeholder="验证码"></v-input>
<v-input v:value="signUpForm.verifyCode" placeholder="验证码" prefix-icon="fa fa-shield"></v-input> <v-btn variant="outline" :disabled="smsCountdown > 0 || smsLoading" :click="() => sendVerifyCode('signup')"
</div> style="min-width: 100px;">
<v-btn variant="outline" :disabled="smsCountdown > 0 || smsLoading" :click="() => sendVerifyCode('signup')" style="min-width: 100px;">
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }} {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
</v-btn> </v-btn>
</div> </div>
<div class="input-wrapper"> <v-input type="password" v:value="signUpForm.password" placeholder="密码"></v-input>
<v-input type="password" v:value="signUpForm.password" placeholder="密码" prefix-icon="fa fa-lock"></v-input>
</div>
</div> </div>
<div class="error-message">{{ signUpError }}</div> <div class="error-message">{{ signUpError }}</div>
<v-btn round block size="large" :loading="signUpLoading" :click="handleSignUp">立即注册</v-btn> <v-btn round block size="lg" :loading="signUpLoading" :click="handleSignUp">立即注册</v-btn>
</div> </div>
</div> </div>
@ -421,30 +410,21 @@
<!-- 用户名登录 --> <!-- 用户名登录 -->
<div v-if="loginType === 'username'" class="input-group"> <div v-if="loginType === 'username'" class="input-group">
<div class="input-wrapper"> <v-input v:value="signInForm.username" placeholder="用户名"></v-input>
<v-input v:value="signInForm.username" placeholder="用户名" prefix-icon="fa fa-user"></v-input> <v-input type="password" v:value="signInForm.password" placeholder="密码"></v-input>
</div>
<div class="input-wrapper">
<v-input type="password" v:value="signInForm.password" placeholder="密码" prefix-icon="fa fa-lock"></v-input>
</div>
</div> </div>
<!-- 手机号登录 --> <!-- 手机号登录 -->
<div v-if="loginType === 'phone'" class="input-group"> <div v-if="loginType === 'phone'" class="input-group">
<div class="phone-row"> <div class="phone-row">
<div style="width: 110px;"> <v-input type="select" v:value="signInForm.region" :opts="{options: regions}"></v-input>
<v-input type="select" v:value="signInForm.region" :opts="{options: regions}" :clearable="false"></v-input> <v-input v:value="signInForm.phone" placeholder="手机号"></v-input>
</div>
<div style="flex: 1;">
<v-input v:value="signInForm.phone" placeholder="手机号" prefix-icon="fa fa-mobile"></v-input>
</div>
</div> </div>
<div class="verify-row"> <div class="verify-row">
<div style="flex: 1;"> <v-input v:value="signInForm.verifyCode" placeholder="验证码"></v-input>
<v-input v:value="signInForm.verifyCode" placeholder="验证码" prefix-icon="fa fa-shield"></v-input> <v-btn variant="outline" :disabled="smsCountdown > 0 || smsLoading" :click="() => sendVerifyCode('signin')"
</div> style="min-width: 100px;">
<v-btn variant="outline" :disabled="smsCountdown > 0 || smsLoading" :click="() => sendVerifyCode('signin')" style="min-width: 100px;">
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }} {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
</v-btn> </v-btn>
</div> </div>
@ -453,7 +433,7 @@
<a href="#" class="forgot-password">忘记密码？</a> <a href="#" class="forgot-password">忘记密码？</a>
<div class="error-message">{{ signInError }}</div> <div class="error-message">{{ signInError }}</div>
<v-btn round block size="large" :loading="signInLoading" :click="handleSignIn">登 录</v-btn> <v-btn round block size="lg" :loading="signInLoading" :click="handleSignIn">登 录</v-btn>
</div> </div>
</div> </div>
@ -463,12 +443,14 @@
<div class="overlay-panel overlay-left"> <div class="overlay-panel overlay-left">
<h1>已有账户？</h1> <h1>已有账户？</h1>
<p>请使用您的个人信息登录，保持连接。</p> <p>请使用您的个人信息登录，保持连接。</p>
<v-btn variant="outline" round class="btn-ghost" :click="switchToSignIn" size="large" style="width: 120px;">去登录</v-btn> <v-btn variant="outline" round class="btn-ghost" :click="switchToSignIn" size="lg"
style="width: 120px;">去登录</v-btn>
</div> </div>
<div class="overlay-panel overlay-right"> <div class="overlay-panel overlay-right">
<h1>新朋友？</h1> <h1>新朋友？</h1>
<p>输入您的个人信息，开始您的旅程。</p> <p>输入您的个人信息，开始您的旅程。</p>
<v-btn variant="outline" round class="btn-ghost" :click="switchToSignUp" size="large" style="width: 120px;">去注册</v-btn> <v-btn variant="outline" round class="btn-ghost" :click="switchToSignUp" size="lg"
style="width: 120px;">去注册</v-btn>
</div> </div>
</div> </div>
</div> </div>
@ -679,4 +661,5 @@
}; };
</script> </script>
</body> </body>
</html> </html>

1
ui/root.html
Unescape Escape View File

@ -6,6 +6,7 @@
<title>oa</title> <title>oa</title>
<script type="module" key='vyes' src="/assets/vyes.min.js"></script> <script type="module" key='vyes' src="/assets/vyes.min.js"></script>
<link rel="stylesheet" href="/assets/common.css"> <link rel="stylesheet" href="/assets/common.css">
<link rel="stylesheet" href="/v/common.css">
<link href="/assets/libs/animate/animate.min.css" rel="stylesheet"> <link href="/assets/libs/animate/animate.min.css" rel="stylesheet">
<link href="/assets/libs/font-awesome/css/all.min.css" rel="stylesheet"> <link href="/assets/libs/font-awesome/css/all.min.css" rel="stylesheet">
</head> </head>

Write Preview
Loading…
Cancel
Save