mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-26 00:53:54 +08:00
update:优化页面样式
This commit is contained in:
hrz
File diff suppressed because one or more lines are too long
+185
-51
@@ -1,53 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>小智提示词配置</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { max-width: 800px; margin: 20px auto; padding: 0 20px; font-family: Arial, sans-serif; }
|
||||
textarea { width: 100%; height: 300px; margin: 20px 0; padding: 10px; }
|
||||
button { padding: 10px 20px; font-size: 16px; }
|
||||
.success { color: green; }
|
||||
.error { color: red; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>小智提示词配置</h1>
|
||||
<textarea id="prompt"></textarea>
|
||||
<div>
|
||||
<button onclick="updatePrompt()">更新提示词</button>
|
||||
<span id="status"></span>
|
||||
</div>
|
||||
<script>
|
||||
// 加载当前prompt
|
||||
fetch('/api/prompt')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('prompt').value = data.prompt;
|
||||
});
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<script src="js/vue3.5.13.js"></script>
|
||||
<link rel="stylesheet" href="css/element-plus2.9.4.css">
|
||||
<script src="js/element-plus2.9.4.js"></script>
|
||||
<script src="js/icons-vue2.3.1.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<title>小智-server</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: linear-gradient(135deg, #1a1f25 0%, #0d1117 100%);
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
function updatePrompt() {
|
||||
const prompt = document.getElementById('prompt').value;
|
||||
fetch('/api/prompt', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({prompt: prompt})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const status = document.getElementById('status');
|
||||
if(data.success) {
|
||||
status.textContent = '更新成功!';
|
||||
status.className = 'success';
|
||||
} else {
|
||||
status.textContent = '更新失败: ' + data.error;
|
||||
status.className = 'error';
|
||||
}
|
||||
setTimeout(() => status.textContent = '', 3000);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
.header {
|
||||
background: rgba(13, 17, 23, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
padding: 1.5rem 2rem;
|
||||
font-size: 1.4rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(45deg, #00c6fb 0%, #005bea 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 2rem;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.role-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.role-id {
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.role-description {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.character-count {
|
||||
text-align: right;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.note {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="animated-bg"></div>
|
||||
<div class="header">
|
||||
<div class="header-logo">AI</div>
|
||||
xiaozhi-esp32-server
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<div class="role-title">配置角色：</div>
|
||||
<div class="role-id">cc:ba:97:11:a6:ac</div>
|
||||
|
||||
<div class="role-description">角色介绍</div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.prompt"
|
||||
:rows="6"
|
||||
resize="vertical"
|
||||
@input="updateCharCount"
|
||||
></el-input>
|
||||
<div class="character-count">{{ charCount }} / 2000</div>
|
||||
|
||||
<div class="button-group">
|
||||
<el-button type="primary" @click="savePrompt">保存配置</el-button>
|
||||
<el-button @click="resetPrompt">重置</el-button>
|
||||
</div>
|
||||
|
||||
<div class="note">注意：保存配置后，需要重启设备，新的配置才会生效。</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
© 2024 小智 AI 控制面板 2.0 粤ICP备2022121736号-2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const {ElMessage} = ElementPlus;
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
prompt: ''
|
||||
},
|
||||
charCount: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadPrompt() {
|
||||
let that = this;
|
||||
that.form.prompt = '';
|
||||
get('/api/prompt', function (data) {
|
||||
if (data.code === -1) {
|
||||
ElMessage({
|
||||
message: data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
} else {
|
||||
that.form.prompt = data.prompt;
|
||||
that.updateCharCount();
|
||||
}
|
||||
})
|
||||
},
|
||||
updateCharCount() {
|
||||
this.charCount = this.form.prompt.length;
|
||||
},
|
||||
savePrompt() {
|
||||
post('/api/prompt', {prompt: this.form.prompt}, (data) => {
|
||||
if (data.code === 0) {
|
||||
ElMessage({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
this.loadPrompt();
|
||||
} else {
|
||||
ElMessage({
|
||||
message: data.msg || '保存失败',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadPrompt();
|
||||
}
|
||||
};
|
||||
const app = Vue.createApp(App);
|
||||
app.use(ElementPlus);
|
||||
app.mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
function post(api, bodyData, fn) {
|
||||
let basePath = 'http://localhost:8001';
|
||||
let token = localStorage.getItem('token');
|
||||
fetch(basePath + api, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': token,
|
||||
},
|
||||
body: bodyData==null ? null : JSON.stringify(bodyData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if(data.code === 401){
|
||||
window.location = 'login.html';
|
||||
return
|
||||
}
|
||||
fn(data);
|
||||
});
|
||||
}
|
||||
|
||||
function get(api, fn) {
|
||||
let basePath = 'http://localhost:8001';
|
||||
let token = localStorage.getItem('token');
|
||||
fetch(basePath + api, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': token,
|
||||
},
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if(data.code === 401){
|
||||
window.location = 'login.html';
|
||||
return
|
||||
}
|
||||
fn(data);
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
+196
-3
@@ -1,13 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>login</title>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<script src="js/vue3.5.13.js"></script>
|
||||
<link rel="stylesheet" href="css/element-plus2.9.4.css">
|
||||
<script src="js/element-plus2.9.4.js"></script>
|
||||
<script src="js/icons-vue2.3.1.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<title>小智-server</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: linear-gradient(135deg, #1a1f25 0%, #0d1117 100%);
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: rgba(13, 17, 23, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
padding: 1.5rem 2rem;
|
||||
font-size: 1.4rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(45deg, #00c6fb 0%, #005bea 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
max-width: 440px;
|
||||
margin: 60px auto;
|
||||
padding: 2.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
margin-bottom: 40px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-input__wrapper) {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-input__inner) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
background: linear-gradient(45deg, #00c6fb 0%, #005bea 100%) !important;
|
||||
border: none !important;
|
||||
height: 44px !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.custom-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 198, 251, 0.3) !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
|
||||
.animated-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: linear-gradient(-45deg, #1a1f25, #0d1117, #162030, #1c1c1c);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 15s ease infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
login
|
||||
<div id="app">
|
||||
<div class="animated-bg"></div>
|
||||
<div class="header">
|
||||
<div class="header-logo">AI</div>
|
||||
xiaozhi-esp32-server
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<h2 class="login-title">安全验证</h2>
|
||||
<div class="login-form">
|
||||
<el-form :model="form" size="large">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
class="custom-input"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入访问密码"
|
||||
show-password>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="custom-button" type="primary" style="width: 100%" @click="handleLogin">
|
||||
验证并进入系统
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
© 2025 xiaozhi-esp32-server
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const {ElMessage} = ElementPlus;
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
password: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleLogin() {
|
||||
let that = this;
|
||||
post('/api/login', that.form, function (data) {
|
||||
if (data.code === -1) {
|
||||
// 弹出错误提示
|
||||
ElMessage({
|
||||
message: '登录失败，请检查您的密码',
|
||||
type: 'error'
|
||||
});
|
||||
localStorage.removeItem('token');
|
||||
} else {
|
||||
// 登录成功时的处理逻辑
|
||||
ElMessage({
|
||||
message: '登录成功',
|
||||
type: 'success'
|
||||
});
|
||||
localStorage.setItem('token', that.form.password); // 设置登录状态为已登录
|
||||
location.href = 'index.html'; // 跳转到主页
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 在页面加载时自动调用 handleLogin 方法
|
||||
let token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
this.form.password = token;
|
||||
this.handleLogin();
|
||||
}
|
||||
}
|
||||
};
|
||||
const app = Vue.createApp(App);
|
||||
app.use(ElementPlus);
|
||||
app.mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user