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 更新说明
|
||||
|
||||
# 1.0.17
|
||||
- 登录/注册页改为 Vue 实现，统一前端技术栈
|
||||
- 登录/注册页接入主题变量体系，自动跟随已保存主题（Claude / 浅色 / 深色）
|
||||
- 移除登录/注册页独立主题切换控件，主题入口统一由主界面个人空间管理
|
||||
|
||||
# 1.0.16
|
||||
- 工作区顶部品牌图标改为内联 SVG 渲染（不再依赖静态路径加载）
|
||||
- 修复深色/浅色主题下 logo 颜色适配问题，跟随主题文本色显示
|
||||
|
||||
@ -16,8 +16,8 @@ android {
|
||||
applicationId = "com.cyjai.agent"
|
||||
minSdk = 24
|
||||
targetSdk = 35
|
||||
versionCode = 18
|
||||
versionName = "1.0.16"
|
||||
versionCode = 19
|
||||
versionName = "1.0.17"
|
||||
|
||||
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
|
||||
}
|
||||
|
||||
@ -1,207 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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>
|
||||
const btn = document.getElementById('login-btn');
|
||||
const errorEl = document.getElementById('error');
|
||||
|
||||
if (window.ensureCsrfToken) {
|
||||
window.ensureCsrfToken().catch((err) => {
|
||||
console.warn('获取 CSRF token 失败:', err);
|
||||
});
|
||||
(function () {
|
||||
try {
|
||||
var key = window.localStorage.getItem('agents_ui_theme');
|
||||
var theme = key === 'light' || key === 'dark' || key === 'claude' ? key : 'claude';
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
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>
|
||||
</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>
|
||||
|
||||
@ -1,156 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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>
|
||||
const btn = document.getElementById('register-btn');
|
||||
const errorEl = document.getElementById('error');
|
||||
|
||||
if (window.ensureCsrfToken) {
|
||||
window.ensureCsrfToken().catch((err) => {
|
||||
console.warn('获取 CSRF token 失败:', err);
|
||||
});
|
||||
(function () {
|
||||
try {
|
||||
var key = window.localStorage.getItem('agents_ui_theme');
|
||||
var theme = key === 'light' || key === 'dark' || key === 'claude' ? key : 'claude';
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
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>
|
||||
</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>
|
||||
|
||||
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 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 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 adminPolicyEntry = fileURLToPath(
|
||||
new URL('./static/src/admin/policyMain.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 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({
|
||||
plugins: [vue()],
|
||||
@ -21,7 +29,9 @@ export default defineConfig({
|
||||
adminPolicy: adminPolicyEntry,
|
||||
adminCustomTools: adminCustomToolsEntry,
|
||||
adminCustomToolsGuide: adminCustomToolsGuideEntry,
|
||||
adminApi: adminApiEntry
|
||||
adminApi: adminApiEntry,
|
||||
login: loginEntry,
|
||||
register: registerEntry
|
||||
},
|
||||
output: {
|
||||
entryFileNames: 'assets/[name].js',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user