From 72743e2809aeb98774c2fccfe39f91b7a6a87c68 Mon Sep 17 00:00:00 2001 From: gfjz-ruijun <994923161@qq.com> Date: Fri, 28 Feb 2025 20:24:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EAI=E5=8F=8D=E8=AF=88=E5=8A=A9?= =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E5=92=8C=E8=BD=AF=E4=BB=B6=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/launch.json | 15 ++++++ web/ai-assistant.css | 108 ++++++++++++++++++++++++++++++++++++++++++ web/ai-assistant.html | 30 ++++++++++++ web/ai-assistant.js | 69 +++++++++++++++++++++++++++ web/index.html | 6 +-- web/settings.css | 99 ++++++++++++++++++++++++++++++++++++++ web/settings.html | 42 ++++++++++++++++ web/settings.js | 51 ++++++++++++++++++++ 8 files changed, 417 insertions(+), 3 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 web/ai-assistant.css create mode 100644 web/ai-assistant.html create mode 100644 web/ai-assistant.js create mode 100644 web/settings.css create mode 100644 web/settings.html create mode 100644 web/settings.js diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..39a8bad --- /dev/null +++ b/.vscode/launch.json @@ -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}" + } + ] +} \ No newline at end of file diff --git a/web/ai-assistant.css b/web/ai-assistant.css new file mode 100644 index 0000000..0f8f2c4 --- /dev/null +++ b/web/ai-assistant.css @@ -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; /* 深蓝色按钮 */ + } \ No newline at end of file diff --git a/web/ai-assistant.html b/web/ai-assistant.html new file mode 100644 index 0000000..7fec89b --- /dev/null +++ b/web/ai-assistant.html @@ -0,0 +1,30 @@ + + + + + + AntiScamAI - 反诈助理 + + + + +
+ +
AntiScamAI - 反诈助理
+ + +
+ +
+
您好！我是AI反诈助理，请问有什么可以帮您的吗？
+
+
+ + +
+ + +
+
+ + \ No newline at end of file diff --git a/web/ai-assistant.js b/web/ai-assistant.js new file mode 100644 index 0000000..583ef56 --- /dev/null +++ b/web/ai-assistant.js @@ -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 = `
${aiMessage}
`; + 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 = `
${message}
`; + 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(); + } + }); \ No newline at end of file diff --git a/web/index.html b/web/index.html index 66b5aef..2c72e17 100644 --- a/web/index.html +++ b/web/index.html @@ -3,12 +3,12 @@ - AntiScamAI + AntiScamAI - 首页
-

AntiScamAI

+

AntiScamAI - 首页

@@ -35,6 +35,6 @@
- + \ No newline at end of file diff --git a/web/settings.css b/web/settings.css new file mode 100644 index 0000000..36d5b52 --- /dev/null +++ b/web/settings.css @@ -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); +} \ No newline at end of file diff --git a/web/settings.html b/web/settings.html new file mode 100644 index 0000000..976bb37 --- /dev/null +++ b/web/settings.html @@ -0,0 +1,42 @@ + + + + + + AntiScamAI - 设置 + + + + +
+

AntiScamAI - 设置

+ + +
+ 系统消息提醒 + +
+ + +
+ 语音提示 + +
+ + +
+ AI反诈助理显示模式 +
+ + +
+
+
+ + \ No newline at end of file diff --git a/web/settings.js b/web/settings.js new file mode 100644 index 0000000..013e127 --- /dev/null +++ b/web/settings.js @@ -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); + } +}); \ No newline at end of file