fix: migrate auth pages to vue and bump android app to 1.0.17
This commit is contained in:
parent
c88b3e9363
commit
67db1ea831
@ -1,5 +1,10 @@
|
|||||||
# App 更新说明
|
# App 更新说明
|
||||||
|
|
||||||
|
# 1.0.17
|
||||||
|
- 登录/注册页改为 Vue 实现，统一前端技术栈
|
||||||
|
- 登录/注册页接入主题变量体系，自动跟随已保存主题（Claude / 浅色 / 深色）
|
||||||
|
- 移除登录/注册页独立主题切换控件，主题入口统一由主界面个人空间管理
|
||||||
|
|
||||||
# 1.0.16
|
# 1.0.16
|
||||||
- 工作区顶部品牌图标改为内联 SVG 渲染（不再依赖静态路径加载）
|
- 工作区顶部品牌图标改为内联 SVG 渲染（不再依赖静态路径加载）
|
||||||
- 修复深色/浅色主题下 logo 颜色适配问题，跟随主题文本色显示
|
- 修复深色/浅色主题下 logo 颜色适配问题，跟随主题文本色显示
|
||||||
|
|||||||
@ -16,8 +16,8 @@ android {
|
|||||||
applicationId = "com.cyjai.agent"
|
applicationId = "com.cyjai.agent"
|
||||||
minSdk = 24
|
minSdk = 24
|
||||||
targetSdk = 35
|
targetSdk = 35
|
||||||
versionCode = 18
|
versionCode = 19
|
||||||
versionName = "1.0.16"
|
versionName = "1.0.17"
|
||||||
|
|
||||||
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
|
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,207 +1,26 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>登录 - AI Agent</title>
|
<title>登录 - AI Agent</title>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
||||||
background: #f8f2ec;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
.login-card {
|
|
||||||
width: 360px;
|
|
||||||
padding: 32px 28px;
|
|
||||||
background: #fffefc;
|
|
||||||
border-radius: 18px;
|
|
||||||
box-shadow: 0 16px 45px rgba(118, 103, 84, 0.18);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: #4b392c;
|
|
||||||
}
|
|
||||||
.form-group {
|
|
||||||
text-align: left;
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #6c5a4a;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"],
|
|
||||||
input[type="email"] {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 48px;
|
|
||||||
padding: 12px 14px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid rgba(118, 103, 84, 0.3);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
input[type="text"]:focus,
|
|
||||||
input[type="password"]:focus,
|
|
||||||
input[type="email"]:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #d8894c;
|
|
||||||
box-shadow: 0 0 0 3px rgba(216, 137, 76, 0.2);
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
margin-top: 22px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: #d8894c;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
button:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.ghost-btn {
|
|
||||||
margin-top: 12px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 11px;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid #d8894c;
|
|
||||||
background: #fffefc;
|
|
||||||
color: #d8894c;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.ghost-btn:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.error {
|
|
||||||
margin-top: 14px;
|
|
||||||
color: #c0392b;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
min-height: 1em;
|
|
||||||
}
|
|
||||||
.link {
|
|
||||||
margin-top: 18px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #6c5a4a;
|
|
||||||
}
|
|
||||||
.link a {
|
|
||||||
color: #d8894c;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="login-card">
|
|
||||||
<h1>AI Agent 登录</h1>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">邮箱</label>
|
|
||||||
<input type="email" id="email" autocomplete="email" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="password">密码</label>
|
|
||||||
<input type="password" id="password" autocomplete="current-password" />
|
|
||||||
</div>
|
|
||||||
<button id="login-btn">登录</button>
|
|
||||||
<button id="host-btn" class="ghost-btn" title="仅当服务器配置为宿主机模式且未启用安全保护时可用" style="display:none">宿主机模式（免登录）</button>
|
|
||||||
<div class="error" id="error"></div>
|
|
||||||
<div class="link">
|
|
||||||
还没有账号？<a href="/register">点击注册</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="/static/security.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
const btn = document.getElementById('login-btn');
|
(function () {
|
||||||
const errorEl = document.getElementById('error');
|
try {
|
||||||
|
var key = window.localStorage.getItem('agents_ui_theme');
|
||||||
if (window.ensureCsrfToken) {
|
var theme = key === 'light' || key === 'dark' || key === 'claude' ? key : 'claude';
|
||||||
window.ensureCsrfToken().catch((err) => {
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
console.warn('获取 CSRF token 失败:', err);
|
document.body && document.body.setAttribute('data-theme', theme);
|
||||||
});
|
} catch (_e) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'claude');
|
||||||
}
|
}
|
||||||
|
})();
|
||||||
btn.addEventListener('click', async () => {
|
|
||||||
const email = document.getElementById('email').value.trim();
|
|
||||||
const password = document.getElementById('password').value;
|
|
||||||
if (!email || !password) {
|
|
||||||
errorEl.textContent = '请输入邮箱和密码';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
btn.disabled = true;
|
|
||||||
errorEl.textContent = '';
|
|
||||||
try {
|
|
||||||
const resp = await fetch('/login', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ email, password })
|
|
||||||
});
|
|
||||||
if (resp.status === 503) {
|
|
||||||
window.location.href = '/resource_busy';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = await resp.json();
|
|
||||||
if (data.success) {
|
|
||||||
window.location.href = '/';
|
|
||||||
} else {
|
|
||||||
errorEl.textContent = data.error || '登录失败';
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
errorEl.textContent = '网络错误，请重试';
|
|
||||||
} finally {
|
|
||||||
btn.disabled = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
btn.click();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const hostBtn = document.getElementById('host-btn');
|
|
||||||
// 按钮可见性由后端配置决定
|
|
||||||
fetch('/api/host-mode-enabled')
|
|
||||||
.then(resp => resp.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data && data.success && data.enabled) {
|
|
||||||
hostBtn.style.display = 'block';
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
|
|
||||||
hostBtn.addEventListener('click', async () => {
|
|
||||||
hostBtn.disabled = true;
|
|
||||||
errorEl.textContent = '';
|
|
||||||
try {
|
|
||||||
const resp = await fetch('/host-login', { method: 'POST' });
|
|
||||||
if (resp.status === 503) {
|
|
||||||
window.location.href = '/resource_busy';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = await resp.json();
|
|
||||||
if (data.success) {
|
|
||||||
window.location.href = '/';
|
|
||||||
} else {
|
|
||||||
errorEl.textContent = data.error || '宿主机模式不可用';
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
errorEl.textContent = '网络错误，请重试';
|
|
||||||
} finally {
|
|
||||||
hostBtn.disabled = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
<link rel="stylesheet" href="/static/dist/assets/auth.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="auth-app"></div>
|
||||||
|
<script src="/static/security.js"></script>
|
||||||
|
<script type="module" src="/static/dist/assets/login.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,156 +1,26 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>注册 - AI Agent</title>
|
<title>注册 - AI Agent</title>
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
||||||
background: #f5f0eb;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
.register-card {
|
|
||||||
width: 380px;
|
|
||||||
padding: 32px 30px;
|
|
||||||
background: #fffefc;
|
|
||||||
border-radius: 18px;
|
|
||||||
box-shadow: 0 16px 45px rgba(118, 103, 84, 0.18);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: #4b392c;
|
|
||||||
}
|
|
||||||
.form-group {
|
|
||||||
text-align: left;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #6c5a4a;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(118, 103, 84, 0.3);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
margin-top: 22px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: #d8894c;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
button:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.error {
|
|
||||||
margin-top: 14px;
|
|
||||||
color: #c0392b;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
min-height: 1em;
|
|
||||||
}
|
|
||||||
.link {
|
|
||||||
margin-top: 18px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #6c5a4a;
|
|
||||||
}
|
|
||||||
.link a {
|
|
||||||
color: #d8894c;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="register-card">
|
|
||||||
<h1>创建账号</h1>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username">用户名</label>
|
|
||||||
<input type="text" id="username" placeholder="仅限小写字母/数字/下划线" autocomplete="username" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">邮箱</label>
|
|
||||||
<input type="email" id="email" autocomplete="email" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="password">密码</label>
|
|
||||||
<input type="password" id="password" autocomplete="new-password" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="invite">邀请码</label>
|
|
||||||
<input type="text" id="invite" placeholder="必填" autocomplete="off" />
|
|
||||||
</div>
|
|
||||||
<button id="register-btn">注册</button>
|
|
||||||
<div class="error" id="error"></div>
|
|
||||||
<div class="link">
|
|
||||||
已有账号？<a href="/login">返回登录</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="/static/security.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
const btn = document.getElementById('register-btn');
|
(function () {
|
||||||
const errorEl = document.getElementById('error');
|
try {
|
||||||
|
var key = window.localStorage.getItem('agents_ui_theme');
|
||||||
if (window.ensureCsrfToken) {
|
var theme = key === 'light' || key === 'dark' || key === 'claude' ? key : 'claude';
|
||||||
window.ensureCsrfToken().catch((err) => {
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
console.warn('获取 CSRF token 失败:', err);
|
document.body && document.body.setAttribute('data-theme', theme);
|
||||||
});
|
} catch (_e) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'claude');
|
||||||
}
|
}
|
||||||
|
})();
|
||||||
async function register() {
|
|
||||||
const username = document.getElementById('username').value.trim();
|
|
||||||
const email = document.getElementById('email').value.trim();
|
|
||||||
const password = document.getElementById('password').value;
|
|
||||||
const invite = document.getElementById('invite').value.trim();
|
|
||||||
|
|
||||||
if (!username || !email || !password || !invite) {
|
|
||||||
errorEl.textContent = '请完整填写所有字段';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.disabled = true;
|
|
||||||
errorEl.textContent = '';
|
|
||||||
try {
|
|
||||||
const resp = await fetch('/register', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ username, email, password, invite_code: invite })
|
|
||||||
});
|
|
||||||
const data = await resp.json();
|
|
||||||
if (data.success) {
|
|
||||||
window.location.href = '/login';
|
|
||||||
} else {
|
|
||||||
errorEl.textContent = data.error || '注册失败';
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
errorEl.textContent = '网络错误，请稍后再试';
|
|
||||||
} finally {
|
|
||||||
btn.disabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.addEventListener('click', register);
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
register();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
<link rel="stylesheet" href="/static/dist/assets/auth.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="auth-app"></div>
|
||||||
|
<script src="/static/security.js"></script>
|
||||||
|
<script type="module" src="/static/dist/assets/register.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
143
static/src/auth/LoginApp.vue
Normal file
143
static/src/auth/LoginApp.vue
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<template>
|
||||||
|
<main class="auth-page">
|
||||||
|
<section class="auth-card">
|
||||||
|
<h1 class="auth-title">AI Agent 登录</h1>
|
||||||
|
<p class="auth-subtitle">使用账号继续访问工作台</p>
|
||||||
|
|
||||||
|
<div class="auth-form-group">
|
||||||
|
<label class="auth-label" for="email">邮箱</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
v-model.trim="email"
|
||||||
|
type="email"
|
||||||
|
class="auth-input"
|
||||||
|
autocomplete="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="auth-form-group">
|
||||||
|
<label class="auth-label" for="password">密码</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
v-model="password"
|
||||||
|
type="password"
|
||||||
|
class="auth-input"
|
||||||
|
autocomplete="current-password"
|
||||||
|
@keydown.enter="login"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="auth-button" :disabled="submitting" @click="login">登录</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-if="hostModeEnabled"
|
||||||
|
class="auth-secondary-button"
|
||||||
|
:disabled="hostSubmitting"
|
||||||
|
@click="hostLogin"
|
||||||
|
>
|
||||||
|
宿主机模式（免登录）
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="auth-error">{{ error }}</div>
|
||||||
|
<div class="auth-link">还没有账号？<a href="/register">点击注册</a></div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { applyTheme, loadTheme } from './theme';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
ensureCsrfToken?: () => Promise<unknown>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const email = ref('');
|
||||||
|
const password = ref('');
|
||||||
|
const error = ref('');
|
||||||
|
const submitting = ref(false);
|
||||||
|
const hostSubmitting = ref(false);
|
||||||
|
const hostModeEnabled = ref(false);
|
||||||
|
|
||||||
|
const login = async () => {
|
||||||
|
if (!email.value || !password.value) {
|
||||||
|
error.value = '请输入邮箱和密码';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
submitting.value = true;
|
||||||
|
error.value = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resp = await fetch('/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ email: email.value, password: password.value })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (resp.status === 503) {
|
||||||
|
window.location.href = '/resource_busy';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await resp.json();
|
||||||
|
if (data.success) {
|
||||||
|
window.location.href = '/';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
error.value = data.error || '登录失败';
|
||||||
|
} catch (_err) {
|
||||||
|
error.value = '网络错误，请重试';
|
||||||
|
} finally {
|
||||||
|
submitting.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const hostLogin = async () => {
|
||||||
|
hostSubmitting.value = true;
|
||||||
|
error.value = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resp = await fetch('/host-login', { method: 'POST' });
|
||||||
|
if (resp.status === 503) {
|
||||||
|
window.location.href = '/resource_busy';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await resp.json();
|
||||||
|
if (data.success) {
|
||||||
|
window.location.href = '/';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
error.value = data.error || '宿主机模式不可用';
|
||||||
|
} catch (_err) {
|
||||||
|
error.value = '网络错误，请重试';
|
||||||
|
} finally {
|
||||||
|
hostSubmitting.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
applyTheme(loadTheme());
|
||||||
|
|
||||||
|
if (window.ensureCsrfToken) {
|
||||||
|
try {
|
||||||
|
await window.ensureCsrfToken();
|
||||||
|
} catch (_err) {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resp = await fetch('/api/host-mode-enabled');
|
||||||
|
const data = await resp.json();
|
||||||
|
hostModeEnabled.value = !!(data && data.success && data.enabled);
|
||||||
|
} catch (_err) {
|
||||||
|
hostModeEnabled.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
125
static/src/auth/RegisterApp.vue
Normal file
125
static/src/auth/RegisterApp.vue
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<main class="auth-page">
|
||||||
|
<section class="auth-card">
|
||||||
|
<h1 class="auth-title">创建账号</h1>
|
||||||
|
<p class="auth-subtitle">完成注册后即可登录使用</p>
|
||||||
|
|
||||||
|
<div class="auth-form-group">
|
||||||
|
<label class="auth-label" for="username">用户名</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
v-model.trim="username"
|
||||||
|
type="text"
|
||||||
|
class="auth-input"
|
||||||
|
placeholder="仅限小写字母/数字/下划线"
|
||||||
|
autocomplete="username"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="auth-form-group">
|
||||||
|
<label class="auth-label" for="email">邮箱</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
v-model.trim="email"
|
||||||
|
type="email"
|
||||||
|
class="auth-input"
|
||||||
|
autocomplete="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="auth-form-group">
|
||||||
|
<label class="auth-label" for="password">密码</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
v-model="password"
|
||||||
|
type="password"
|
||||||
|
class="auth-input"
|
||||||
|
autocomplete="new-password"
|
||||||
|
@keydown.enter="register"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="auth-form-group">
|
||||||
|
<label class="auth-label" for="invite">邀请码</label>
|
||||||
|
<input
|
||||||
|
id="invite"
|
||||||
|
v-model.trim="inviteCode"
|
||||||
|
type="text"
|
||||||
|
class="auth-input"
|
||||||
|
placeholder="必填"
|
||||||
|
autocomplete="off"
|
||||||
|
@keydown.enter="register"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="auth-button" :disabled="submitting" @click="register">注册</button>
|
||||||
|
<div class="auth-error">{{ error }}</div>
|
||||||
|
<div class="auth-link">已有账号？<a href="/login">返回登录</a></div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { applyTheme, loadTheme } from './theme';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
ensureCsrfToken?: () => Promise<unknown>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const username = ref('');
|
||||||
|
const email = ref('');
|
||||||
|
const password = ref('');
|
||||||
|
const inviteCode = ref('');
|
||||||
|
const error = ref('');
|
||||||
|
const submitting = ref(false);
|
||||||
|
|
||||||
|
const register = async () => {
|
||||||
|
if (!username.value || !email.value || !password.value || !inviteCode.value) {
|
||||||
|
error.value = '请完整填写所有字段';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
submitting.value = true;
|
||||||
|
error.value = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resp = await fetch('/register', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: username.value,
|
||||||
|
email: email.value,
|
||||||
|
password: password.value,
|
||||||
|
invite_code: inviteCode.value
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const data = await resp.json();
|
||||||
|
|
||||||
|
if (data.success) {
|
||||||
|
window.location.href = '/login';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
error.value = data.error || '注册失败';
|
||||||
|
} catch (_err) {
|
||||||
|
error.value = '网络错误，请稍后再试';
|
||||||
|
} finally {
|
||||||
|
submitting.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
applyTheme(loadTheme());
|
||||||
|
|
||||||
|
if (window.ensureCsrfToken) {
|
||||||
|
try {
|
||||||
|
await window.ensureCsrfToken();
|
||||||
|
} catch (_err) {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
133
static/src/auth/auth.scss
Normal file
133
static/src/auth/auth.scss
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
@use '../styles/base/tokens';
|
||||||
|
|
||||||
|
:root,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family:
|
||||||
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
||||||
|
background: var(--claude-bg);
|
||||||
|
color: var(--claude-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
width: min(100%, 390px);
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: var(--theme-surface-soft);
|
||||||
|
border: 1px solid var(--theme-control-border, var(--claude-border));
|
||||||
|
box-shadow: var(--theme-shadow-mid, var(--claude-shadow));
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-subtitle {
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--claude-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-form-group {
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
color: var(--claude-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-input {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 46px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--theme-control-border, var(--claude-border));
|
||||||
|
background: var(--theme-surface-strong);
|
||||||
|
color: var(--claude-text);
|
||||||
|
padding: 11px 12px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition:
|
||||||
|
border-color 0.2s ease,
|
||||||
|
box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--claude-accent-strong);
|
||||||
|
box-shadow: 0 0 0 3px var(--claude-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-button {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 18px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
min-height: 44px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background: linear-gradient(135deg, var(--claude-accent), var(--claude-accent-strong));
|
||||||
|
color: #fff;
|
||||||
|
transition:
|
||||||
|
transform 0.15s ease,
|
||||||
|
filter 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-button:hover:not(:disabled) {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
filter: brightness(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-button:disabled,
|
||||||
|
.auth-secondary-button:disabled {
|
||||||
|
opacity: 0.65;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-secondary-button {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
min-height: 42px;
|
||||||
|
border: 1px solid var(--claude-accent-strong);
|
||||||
|
background: var(--theme-surface-strong);
|
||||||
|
color: var(--claude-accent-strong);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-error {
|
||||||
|
min-height: 1.2em;
|
||||||
|
margin-top: 12px;
|
||||||
|
color: #e85b57;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-link {
|
||||||
|
margin-top: 16px;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
color: var(--claude-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-link a {
|
||||||
|
color: var(--claude-accent-strong);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
5
static/src/auth/loginMain.ts
Normal file
5
static/src/auth/loginMain.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import LoginApp from './LoginApp.vue';
|
||||||
|
import './auth.scss';
|
||||||
|
|
||||||
|
createApp(LoginApp).mount('#auth-app');
|
||||||
5
static/src/auth/registerMain.ts
Normal file
5
static/src/auth/registerMain.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import RegisterApp from './RegisterApp.vue';
|
||||||
|
import './auth.scss';
|
||||||
|
|
||||||
|
createApp(RegisterApp).mount('#auth-app');
|
||||||
25
static/src/auth/theme.ts
Normal file
25
static/src/auth/theme.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
export type ThemeKey = 'claude' | 'light' | 'dark';
|
||||||
|
|
||||||
|
const THEME_STORAGE_KEY = 'agents_ui_theme';
|
||||||
|
|
||||||
|
export const isThemeKey = (value: unknown): value is ThemeKey =>
|
||||||
|
value === 'claude' || value === 'light' || value === 'dark';
|
||||||
|
|
||||||
|
export const loadTheme = (): ThemeKey => {
|
||||||
|
if (typeof window === 'undefined') return 'claude';
|
||||||
|
const saved = window.localStorage.getItem(THEME_STORAGE_KEY);
|
||||||
|
return isThemeKey(saved) ? saved : 'claude';
|
||||||
|
};
|
||||||
|
|
||||||
|
export const applyTheme = (theme: ThemeKey) => {
|
||||||
|
const root = document.documentElement;
|
||||||
|
root.setAttribute('data-theme', theme);
|
||||||
|
document.body.setAttribute('data-theme', theme);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const setTheme = (theme: ThemeKey) => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
window.localStorage.setItem(THEME_STORAGE_KEY, theme);
|
||||||
|
}
|
||||||
|
applyTheme(theme);
|
||||||
|
};
|
||||||
@ -4,10 +4,18 @@ import vue from '@vitejs/plugin-vue';
|
|||||||
|
|
||||||
const entry = fileURLToPath(new URL('./static/src/main.ts', import.meta.url));
|
const entry = fileURLToPath(new URL('./static/src/main.ts', import.meta.url));
|
||||||
const adminEntry = fileURLToPath(new URL('./static/src/admin/main.ts', import.meta.url));
|
const adminEntry = fileURLToPath(new URL('./static/src/admin/main.ts', import.meta.url));
|
||||||
const adminPolicyEntry = fileURLToPath(new URL('./static/src/admin/policyMain.ts', import.meta.url));
|
const adminPolicyEntry = fileURLToPath(
|
||||||
const adminCustomToolsEntry = fileURLToPath(new URL('./static/src/admin/customToolsMain.ts', import.meta.url));
|
new URL('./static/src/admin/policyMain.ts', import.meta.url)
|
||||||
const adminCustomToolsGuideEntry = fileURLToPath(new URL('./static/src/admin/customToolsGuideMain.ts', import.meta.url));
|
);
|
||||||
|
const adminCustomToolsEntry = fileURLToPath(
|
||||||
|
new URL('./static/src/admin/customToolsMain.ts', import.meta.url)
|
||||||
|
);
|
||||||
|
const adminCustomToolsGuideEntry = fileURLToPath(
|
||||||
|
new URL('./static/src/admin/customToolsGuideMain.ts', import.meta.url)
|
||||||
|
);
|
||||||
const adminApiEntry = fileURLToPath(new URL('./static/src/admin/apiMain.ts', import.meta.url));
|
const adminApiEntry = fileURLToPath(new URL('./static/src/admin/apiMain.ts', import.meta.url));
|
||||||
|
const loginEntry = fileURLToPath(new URL('./static/src/auth/loginMain.ts', import.meta.url));
|
||||||
|
const registerEntry = fileURLToPath(new URL('./static/src/auth/registerMain.ts', import.meta.url));
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
@ -21,7 +29,9 @@ export default defineConfig({
|
|||||||
adminPolicy: adminPolicyEntry,
|
adminPolicy: adminPolicyEntry,
|
||||||
adminCustomTools: adminCustomToolsEntry,
|
adminCustomTools: adminCustomToolsEntry,
|
||||||
adminCustomToolsGuide: adminCustomToolsGuideEntry,
|
adminCustomToolsGuide: adminCustomToolsGuideEntry,
|
||||||
adminApi: adminApiEntry
|
adminApi: adminApiEntry,
|
||||||
|
login: loginEntry,
|
||||||
|
register: registerEntry
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
entryFileNames: 'assets/[name].js',
|
entryFileNames: 'assets/[name].js',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user