gfjz-ruijun/AntiScamAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增AI反诈助理页面和软件设置页面

Browse Source
This commit is contained in:
高峰君主 2025-02-28 20:24:20 +08:00
parent 3f684d99dc
commit 72743e2809
8 changed files with 417 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "针对 localhost 启动 Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

108
web/ai-assistant.css Normal file
View File

@ -0,0 +1,108 @@
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5; /* 浅灰色背景 */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 容器样式 */
.chat-container {
background-color: #ffffff; /* 白色背景 */
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* 标题栏样式 */
.header {
background-color: #000000; /* 蓝色标题栏 */
color: #ffffff;
text-align: center;
padding: 15px;
font-size: 20px;
font-weight: bold;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
/* 对话内容区域样式 */
.chat-box {
flex: 1;
padding: 15px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
}
/* 用户消息样式 */
.user-message {
text-align: right;
margin-bottom: 10px;
}
.user-message .message {
display: inline-block;
background-color: #cad4ff; /* 绿色背景 */
color: #000;
padding: 10px 15px;
border-radius: 15px;
max-width: 70%;
}
/* AI消息样式 */
.ai-message {
text-align: left;
margin-bottom: 10px;
}
.ai-message .message {
display: inline-block;
background-color: #ececec; /* 灰色背景 */
color: #000;
padding: 10px 15px;
border-radius: 15px;
max-width: 70%;
}
/* 输入区域样式 */
.input-area {
display: flex;
padding: 10px;
background-color: #f9f9f9;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.input-area input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 25px;
font-size: 16px;
outline: none;
}
.input-area button {
background-color: #000000; /* 蓝色按钮 */
color: #ffffff;
border: none;
padding: 10px 15px;
margin-left: 10px;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.input-area button:hover {
background-color: #0d47a1; /* 深蓝色按钮 */
}

30
web/ai-assistant.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AntiScamAI - 反诈助理</title>
<link rel="stylesheet" href="ai-assistant.css">
<script src="ai-assistant.js"></script>
</head>
<body>
<div class="chat-container">
<!-- 标题栏 -->
<div class="header">AntiScamAI - 反诈助理</div>
<!-- 对话内容区域 -->
<div class="chat-box" id="chat-box">
<!-- 示例对话 -->
<div class="ai-message">
<div class="message">您好！我是AI反诈助理，请问有什么可以帮您的吗？</div>
</div>
</div>
<!-- 输入区域 -->
<div class="input-area">
<input type="text" id="user-input" placeholder="请输入您的问题..." />
<button onclick="sendMessage()">发送</button>
</div>
</div>
</body>
</html>

69
web/ai-assistant.js Normal file
View File

@ -0,0 +1,69 @@
// 初始化 WebSocket 连接
const socket = new WebSocket('ws://your-websocket-server-url'); // 替换为实际的 WebSocket URL
// 监听 WebSocket 打开事件
socket.addEventListener('open', () => {
console.log('WebSocket 连接已建立');
});
// 监听 WebSocket 消息事件
socket.addEventListener('message', (event) => {
const chatBox = document.getElementById('chat-box');
// 解析后端返回的消息
const aiMessage = event.data;
// 添加 AI 消息到对话框
const aiMessageDiv = document.createElement('div');
aiMessageDiv.className = 'ai-message';
aiMessageDiv.innerHTML = `<div class="message">${aiMessage}</div>`;
chatBox.appendChild(aiMessageDiv);
// 滚动到底部
chatBox.scrollTop = chatBox.scrollHeight;
});
// 监听 WebSocket 错误事件
socket.addEventListener('error', (error) => {
console.error('WebSocket 错误:', error);
});
// 监听 WebSocket 关闭事件
socket.addEventListener('close', () => {
console.log('WebSocket 连接已关闭');
});
// 发送消息功能
function sendMessage() {
const userInput = document.getElementById('user-input');
const chatBox = document.getElementById('chat-box');
// 获取用户输入内容
const message = userInput.value.trim();
if (!message) return;
// 添加用户消息到对话框
const userMessageDiv = document.createElement('div');
userMessageDiv.className = 'user-message';
userMessageDiv.innerHTML = `<div class="message">${message}</div>`;
chatBox.appendChild(userMessageDiv);
// 清空输入框
userInput.value = '';
// 滚动到底部
chatBox.scrollTop = chatBox.scrollHeight;
// 通过 WebSocket 发送消息到后端
socket.send(message);
}
// 绑定发送按钮点击事件
document.getElementById('send-btn').addEventListener('click', sendMessage);
// 按下回车键发送消息
document.getElementById('user-input').addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
sendMessage();
}
});

6
web/index.html
View File

@ -3,12 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AntiScamAI</title>
<title>AntiScamAI - 首页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>AntiScamAI</h1>
<h1>AntiScamAI - 首页</h1>
<!-- 钓鱼网站检测 -->
<div class="section">
@ -35,6 +35,6 @@
</div>
</div>
<script src="scripts.js"></script>
<script src="main.js"></script>
</body>
</html>

99
web/settings.css Normal file
View File

@ -0,0 +1,99 @@
body {
font-family: Arial, sans-serif;
background-color: #d4d7ff;
color: #ffffff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 容器样式 */
.container {
background-color: #697af9;
border-radius: 15px;
padding: 20px;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
/* 标题样式 */
h1 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
color: #ffffff;
}
/* 功能项样式 */
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
/* 按钮样式 */
.btn {
background-color: #0d47a1; /* 深蓝色按钮 */
color: #ffffff;
border: none;
padding: 10px 15px;
border-radius: 25px; /* 圆角按钮 */
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #003380; /* 悬停时更深的蓝色 */
}
/* 开关按钮样式 */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196f3; /* 蓝色开关 */
}
input:checked + .slider:before {
transform: translateX(26px);
}

42
web/settings.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AntiScamAI - 设置</title>
<link rel="stylesheet" href="settings.css">
<script src="settings.js"></script>
</head>
<body>
<div class="container">
<h1>AntiScamAI - 设置</h1>
<!-- 系统消息提醒 -->
<div class="setting-item">
<span>系统消息提醒</span>
<label class="switch">
<input type="checkbox" id="system-notification">
<span class="slider"></span>
</label>
</div>
<!-- 语音提示 -->
<div class="setting-item">
<span>语音提示</span>
<label class="switch">
<input type="checkbox" id="voice-alert">
<span class="slider"></span>
</label>
</div>
<!-- AI反诈助理显示模式 -->
<div class="setting-item">
<span>AI反诈助理显示模式</span>
<div>
<button class="btn" id="always-show">始终显示</button>
<button class="btn" id="smart-show">智能显示</button>
</div>
</div>
</div>
</body>
</html>

51
web/settings.js Normal file
View File

@ -0,0 +1,51 @@
// 创建 WebSocket 连接
const socket = new WebSocket('ws://your-websocket-server-url');
// 监听 WebSocket 连接状态
socket.addEventListener('open', () => {
console.log('WebSocket 连接已建立');
});
socket.addEventListener('error', (error) => {
console.error('WebSocket 错误:', error);
});
socket.addEventListener('close', () => {
console.log('WebSocket 连接已关闭');
});
// 获取按钮元素
const alwaysShowBtn = document.getElementById('always-show');
const smartShowBtn = document.getElementById('smart-show');
// 为 "始终显示" 按钮添加点击事件
alwaysShowBtn.addEventListener('click', () => {
// 向服务器发送消息
const message = { action: 'set-always-show' };
socket.send(JSON.stringify(message));
// 显示提示信息
alert('已设置为始终显示AI反诈助理');
});
// 为 "智能显示" 按钮添加点击事件
smartShowBtn.addEventListener('click', () => {
// 向服务器发送消息
const message = { action: 'set-smart-show' };
socket.send(JSON.stringify(message));
// 显示提示信息
alert('已设置为智能显示AI反诈助理');
});
// 监听服务器返回的消息
socket.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
// 根据服务器返回的消息执行相应操作
if (data.status === 'success') {
console.log('操作成功:', data.message);
} else if (data.status === 'error') {
console.error('操作失败:', data.message);
}
});