完善界面样式与功能
This commit is contained in:
Cx330 committed
1 parent
cff6266d00
commit
f82dfc67c4
22 files changed
+1413
-162
No files matched your search
+248
-48
@@ -1,102 +1,302 @@
|
||||
// Ai模型接口
|
||||
//const API_KEY = 'sk-awyuwanhxstczmftcfcmafqsbfjubjskbquemmccrhxquqen';
|
||||
//const API_URL = 'https://api.siliconflow.cn/v1/chat/completions';
|
||||
const API_KEY = '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'
|
||||
const API_URL = 'https://openrouter.ai/api/v1/chat/completions'
|
||||
let messages = [];
|
||||
// === 版本号控制 ===
|
||||
const APP_VERSION = "v2025-10-16-2"; // 每次修改 API 后改这里
|
||||
|
||||
// 检查版本是否变化
|
||||
const lastVersion = localStorage.getItem("app_version");
|
||||
if (lastVersion !== APP_VERSION) {
|
||||
console.log("检测到新版本，清理旧缓存...");
|
||||
localStorage.clear(); // 清理所有旧数据
|
||||
sessionStorage.clear();
|
||||
caches?.keys?.().then(keys => keys.forEach(k => caches.delete(k)));
|
||||
localStorage.setItem("app_version", APP_VERSION);
|
||||
}
|
||||
|
||||
// === ModelScope DeepSeek-V3.2-Exp 接口 ===
|
||||
// 替换为你的 ModelScope Token
|
||||
const API_KEY = "ms-867f8e56-38be-4b20-b5d2-e43c709c6505";
|
||||
const API_URL = "https://api-inference.modelscope.cn/v1/chat/completions";
|
||||
|
||||
let messages = [
|
||||
{
|
||||
role: "system",
|
||||
content: `你是“张梦南”的数字分身，但表现得像一个真实的人，而不是机器人或客服。
|
||||
|
||||
【核心目标】
|
||||
帮用户把事情做出来（优先能跑、能用、能落地），而不是空讲原理。
|
||||
|
||||
——————————————————
|
||||
|
||||
【人格与语气】
|
||||
- 像真人说话，自然、简洁，不装
|
||||
- 不要主动自我介绍
|
||||
- 避免说明书式表达
|
||||
- 语气可以稍微随意一点，但要靠谱
|
||||
|
||||
——————————————————
|
||||
|
||||
【身份规则（重要）】
|
||||
- 只有当用户明确问“你是谁 / 你叫什么 / 你是做什么的”时：
|
||||
→ 只回答名字：“张梦南”
|
||||
→ 或稍微自然一点：“张梦南，你就当我搞开发的就行”
|
||||
|
||||
- ❌ 不要介绍背景、能力、技术栈
|
||||
- ❌ 不要长句解释
|
||||
|
||||
——————————————————
|
||||
|
||||
【语言风格（重要）】
|
||||
- 默认使用自然普通话
|
||||
- 可以适当加入“轻微天津口语”点缀，例如：
|
||||
- “在呢”
|
||||
- “有嘛事儿”
|
||||
- “我给你整”
|
||||
- ⚠️ 方言只用于轻松对话（如打招呼）
|
||||
- ⚠️ 技术内容必须清晰标准表达
|
||||
- ⚠️ 禁止过度方言或表演感
|
||||
|
||||
——————————————————
|
||||
|
||||
【开场规则（非常重要）】
|
||||
当用户说“你好 / hi / 在吗”：
|
||||
|
||||
用1~2句自然回应，例如：
|
||||
- “你好，我在呢。有啥要弄的直接说。”
|
||||
- “在呢，有嘛事儿直接说，我帮你整。”
|
||||
|
||||
❌ 不要介绍自己
|
||||
|
||||
——————————————————
|
||||
|
||||
【思维方式】
|
||||
- 优先考虑“怎么实现”
|
||||
- 自动拆解问题
|
||||
- 信息不完整时先给可行方案
|
||||
|
||||
——————————————————
|
||||
|
||||
【回答结构（自适应）】
|
||||
|
||||
简单问题：
|
||||
→ 直接给结论 + 做法
|
||||
|
||||
复杂问题：
|
||||
1. 能不能做
|
||||
2. 为什么（简要）
|
||||
3. 实现步骤（重点）
|
||||
4. 代码 / 命令 / 配置
|
||||
|
||||
——————————————————
|
||||
|
||||
【技术倾向（隐藏）】
|
||||
- Python / OpenCV / YOLO
|
||||
- Linux / ARM
|
||||
- 嵌入式 / ROS / 机器人
|
||||
- Docker / OpenWrt / 网络
|
||||
- Web（FastAPI / Vue）
|
||||
|
||||
⚠️ 不主动说
|
||||
|
||||
——————————————————
|
||||
|
||||
【输出要求】
|
||||
- 必须给可执行方案
|
||||
- 技术问题尽量包含：
|
||||
- 命令
|
||||
- 配置
|
||||
- 代码
|
||||
|
||||
- 部署问题 → 从0到能跑
|
||||
- 报错问题 → 分析 + 修复 + 示例
|
||||
|
||||
——————————————————
|
||||
|
||||
【交互风格】
|
||||
像一个靠谱的工程师朋友：
|
||||
- “这个能做”
|
||||
- “我给你一套能跑的”
|
||||
- “这里大概率是环境问题”
|
||||
|
||||
——————————————————
|
||||
|
||||
【禁止行为】
|
||||
- 不要长篇科普
|
||||
- 不要只讲原理不给实现
|
||||
- 不要像客服或产品介绍
|
||||
- 不要反复追问
|
||||
|
||||
——————————————————
|
||||
|
||||
【调试模式】
|
||||
- 分析报错
|
||||
- 指出原因
|
||||
- 给修复命令
|
||||
- 给可运行版本
|
||||
|
||||
——————————————————
|
||||
|
||||
【最终原则】
|
||||
像真人 + 能干活：
|
||||
话不多，但东西能用`
|
||||
}
|
||||
];
|
||||
|
||||
// 逐字输出 Markdown 并渲染
|
||||
async function typeMarkdownEffect(fullText, container) {
|
||||
let currentText = '';
|
||||
let currentText = "";
|
||||
const length = fullText.length;
|
||||
const delay = Math.max(5, 40 - Math.min(length / 1.5, 35)); // 根据长度自动调整速度
|
||||
const delay = Math.max(5, 40 - Math.min(length / 1.5, 35));
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
currentText += fullText[i];
|
||||
const sanitizedHtml = DOMPurify.sanitize(marked.parse(currentText));
|
||||
container.innerHTML = sanitizedHtml;
|
||||
|
||||
// 滚动到底部
|
||||
container.parentElement.scrollTop = container.parentElement.scrollHeight;
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
}
|
||||
}
|
||||
|
||||
// 修改后的 appendMessage：支持逐字输出 + Markdown
|
||||
// 添加消息到界面
|
||||
function appendMessage(content, sender, isMarkdown = false, withTyping = false) {
|
||||
const chatContainer = document.getElementById('chatContainer');
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.classList.add('message', sender);
|
||||
const chatContainer = document.getElementById("chatContainer");
|
||||
const messageDiv = document.createElement("div");
|
||||
messageDiv.classList.add("message", sender);
|
||||
|
||||
chatContainer.appendChild(messageDiv);
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
|
||||
// 处理 AI 打字效果
|
||||
if (isMarkdown && sender === 'bot' && withTyping) {
|
||||
// 先显示“正在输入中...”提示
|
||||
if (isMarkdown && sender === "bot" && withTyping) {
|
||||
messageDiv.innerHTML = `<em class="typing">正在输入中...</em>`;
|
||||
|
||||
// 稍等一下再逐字渲染（比如 50ms）
|
||||
setTimeout(() => {
|
||||
typeMarkdownEffect(content, messageDiv);
|
||||
addCopyButton(messageDiv, content);
|
||||
}, 50);
|
||||
|
||||
} else if (isMarkdown) {
|
||||
const html = DOMPurify.sanitize(marked.parse(content));
|
||||
messageDiv.innerHTML = html;
|
||||
addCopyButton(messageDiv, content);
|
||||
} else {
|
||||
messageDiv.textContent = content;
|
||||
addCopyButton(messageDiv, content);
|
||||
}
|
||||
|
||||
return messageDiv;
|
||||
}
|
||||
|
||||
// 发送消息（主函数）
|
||||
// 添加复制按钮
|
||||
function addCopyButton(messageDiv, content) {
|
||||
const copyButton = document.createElement("button");
|
||||
copyButton.className = "copy-button";
|
||||
copyButton.textContent = "复制";
|
||||
|
||||
copyButton.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(content).then(() => {
|
||||
copyButton.textContent = "已复制";
|
||||
setTimeout(() => {
|
||||
copyButton.textContent = "复制";
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error("复制失败:", err);
|
||||
});
|
||||
});
|
||||
|
||||
messageDiv.appendChild(copyButton);
|
||||
}
|
||||
|
||||
// 发送消息主逻辑（流式版本）
|
||||
async function sendMessage() {
|
||||
const inputElem = document.getElementById('userInput');
|
||||
const inputElem = document.getElementById("userInput");
|
||||
const userMessage = inputElem.value.trim();
|
||||
if (!userMessage) return;
|
||||
|
||||
appendMessage(userMessage, 'user');
|
||||
messages.push({ role: 'user', content: userMessage });
|
||||
inputElem.value = '';
|
||||
appendMessage(userMessage, "user");
|
||||
messages.push({ role: "user", content: userMessage });
|
||||
inputElem.value = "";
|
||||
|
||||
// 👉 提前显示“正在输入中...”并保存 messageDiv 元素引用
|
||||
const chatContainer = document.getElementById('chatContainer');
|
||||
const botMessageDiv = document.createElement('div');
|
||||
botMessageDiv.classList.add('message', 'bot');
|
||||
const chatContainer = document.getElementById("chatContainer");
|
||||
const botMessageDiv = document.createElement("div");
|
||||
botMessageDiv.classList.add("message", "bot");
|
||||
botMessageDiv.innerHTML = `<em class="typing">正在输入中...</em>`;
|
||||
chatContainer.appendChild(botMessageDiv);
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
|
||||
// === ModelScope DeepSeek 请求 ===
|
||||
const payload = {
|
||||
model: 'deepseek/deepseek-chat-v3.1:free',
|
||||
//model: 'tencent/Hunyuan-MT-7B',
|
||||
messages: messages
|
||||
model: "deepseek-ai/DeepSeek-V3.2",
|
||||
messages: messages,
|
||||
stream: true
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + API_KEY
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": "Bearer " + API_KEY
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.choices && data.choices.length > 0) {
|
||||
const botMessage = data.choices[0].message.content;
|
||||
|
||||
// ✅ 拿到内容后替换 messageDiv 的内容，逐字打字渲染
|
||||
typeMarkdownEffect(botMessage, botMessageDiv);
|
||||
messages.push({ role: 'assistant', content: botMessage });
|
||||
} else {
|
||||
botMessageDiv.textContent = '没有收到有效响应，请检查 API 设置。';
|
||||
// === 流式读取 ===
|
||||
if (!response.body) {
|
||||
botMessageDiv.textContent = "服务器未返回有效流。";
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder("utf-8");
|
||||
let buffer = "";
|
||||
let finalText = "";
|
||||
let doneReasoning = false;
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
|
||||
const lines = buffer.split("\n");
|
||||
buffer = lines.pop(); // 保留未完整的最后一行
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line.startsWith("data:")) continue;
|
||||
const dataStr = line.replace(/^data:\s*/, "");
|
||||
if (dataStr === "[DONE]") continue;
|
||||
|
||||
try {
|
||||
const json = JSON.parse(dataStr);
|
||||
const delta = json.choices[0]?.delta || {};
|
||||
|
||||
const reasoning = delta.reasoning_content || "";
|
||||
const content = delta.content || "";
|
||||
|
||||
if (reasoning) {
|
||||
// 推理内容（类似“思考过程”）
|
||||
if (!doneReasoning) {
|
||||
botMessageDiv.innerHTML = `<em>模型正在思考...</em>`;
|
||||
doneReasoning = true;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (content) {
|
||||
finalText += content;
|
||||
const safeHtml = DOMPurify.sanitize(marked.parse(finalText));
|
||||
botMessageDiv.innerHTML = safeHtml;
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("解析流数据出错：", err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 保存最终结果
|
||||
if (finalText.trim() !== "") {
|
||||
messages.push({ role: "assistant", content: finalText });
|
||||
addCopyButton(botMessageDiv, finalText);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('请求错误：', error);
|
||||
botMessageDiv.textContent = '请求出错：' + error.message;
|
||||
console.error("请求错误：", error);
|
||||
botMessageDiv.textContent = "请求出错：" + error.message;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// 每日一言功能
|
||||
class DailyQuote {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.loadQuote();
|
||||
}
|
||||
|
||||
async loadQuote() {
|
||||
try {
|
||||
// 使用一言API获取每日一句
|
||||
const response = await fetch('https://v1.hitokoto.cn/?c=a&c=b&c=c&c=d&c=e&c=f&c=g&c=h');
|
||||
const data = await response.json();
|
||||
|
||||
document.getElementById('quoteContent').textContent = data.hitokoto;
|
||||
document.getElementById('quoteAuthor').textContent = data.from || '未知';
|
||||
} catch (error) {
|
||||
console.error('加载每日一言失败:', error);
|
||||
document.getElementById('quoteContent').textContent = '加载失败';
|
||||
document.getElementById('quoteAuthor').textContent = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化每日一言
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
new DailyQuote();
|
||||
});
|
||||
@@ -31,18 +31,18 @@ function toggleFullscreen() {
|
||||
|
||||
// 更新按钮文本和图标
|
||||
function updateFullscreenButton(isFullscreen) {
|
||||
const buttons = [fullscreenButton, sidebarFullscreenButton];
|
||||
const buttons = [fullscreenButton, sidebarFullscreenButton].filter(Boolean);
|
||||
buttons.forEach(button => {
|
||||
if (isFullscreen) {
|
||||
button.querySelector('span').textContent = '退出';
|
||||
button.querySelector('.icon').innerHTML = '<img src="./icon/off.png" width="30px">'; // 退出全屏图标
|
||||
button.querySelector('.icon').innerHTML = '<img src="./icon/off.png" width="24px">'; // 退出全屏图标
|
||||
} else {
|
||||
button.querySelector('span').textContent = '全屏';
|
||||
button.querySelector('.icon').innerHTML = '<img src="./icon/full.png" width="30px">'; // 全屏图标
|
||||
button.querySelector('.icon').innerHTML = '<img src="./icon/full.png" width="24px">'; // 全屏图标
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定点击事件
|
||||
fullscreenButton.addEventListener('click', toggleFullscreen);
|
||||
sidebarFullscreenButton.addEventListener('click', toggleFullscreen);
|
||||
if (fullscreenButton) fullscreenButton.addEventListener('click', toggleFullscreen);
|
||||
if (sidebarFullscreenButton) sidebarFullscreenButton.addEventListener('click', toggleFullscreen);
|
||||
@@ -0,0 +1,92 @@
|
||||
// 音乐播放器功能
|
||||
class MusicPlayer {
|
||||
constructor() {
|
||||
this.currentSongIndex = 0;
|
||||
this.songs = [];
|
||||
this.isPlaying = false;
|
||||
this.audio = new Audio();
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.bindEvents();
|
||||
this.bindAudioEvents();
|
||||
this.loadSongs();
|
||||
}
|
||||
|
||||
bindAudioEvents() {
|
||||
this.audio.addEventListener('loadeddata', () => {
|
||||
if (this.isPlaying) {
|
||||
this.audio.play();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
document.getElementById('playPauseBtn').addEventListener('click', () => this.togglePlayPause());
|
||||
document.getElementById('prevBtn').addEventListener('click', () => this.playPrevious());
|
||||
document.getElementById('nextBtn').addEventListener('click', () => this.playNext());
|
||||
}
|
||||
|
||||
async loadSongs() {
|
||||
try {
|
||||
// 使用新的音乐API
|
||||
const response = await fetch('https://www.cunyuapi.top/rwyymusic');
|
||||
const data = await response.json();
|
||||
|
||||
this.songs = [data];
|
||||
this.loadSong(0);
|
||||
} catch (error) {
|
||||
console.error('加载歌曲失败:', error);
|
||||
document.getElementById('musicTitle').textContent = '加载失败';
|
||||
}
|
||||
}
|
||||
|
||||
async loadSong(index) {
|
||||
this.currentSongIndex = index;
|
||||
const song = this.songs[index];
|
||||
|
||||
document.getElementById('musicTitle').textContent = song.name;
|
||||
document.getElementById('musicArtist').textContent = song.artists;
|
||||
|
||||
// 设置音频源
|
||||
this.audio.src = song.song_url;
|
||||
}
|
||||
|
||||
togglePlayPause() {
|
||||
if (this.isPlaying) {
|
||||
this.audio.pause();
|
||||
document.getElementById('playPauseBtn').innerHTML = '<img src="icon/play.png" alt="播放" width="18" height="18">';
|
||||
} else {
|
||||
this.audio.play();
|
||||
document.getElementById('playPauseBtn').innerHTML = '<img src="icon/pause.png" alt="暂停" width="18" height="18">';
|
||||
}
|
||||
this.isPlaying = !this.isPlaying;
|
||||
}
|
||||
|
||||
playPrevious() {
|
||||
if (this.currentSongIndex > 0) {
|
||||
this.loadSong(this.currentSongIndex - 1);
|
||||
this.isPlaying = true;
|
||||
document.getElementById('playPauseBtn').innerHTML = '<img src="icon/pause.png" alt="暂停" width="18" height="18">';
|
||||
}
|
||||
}
|
||||
|
||||
playNext() {
|
||||
if (this.currentSongIndex < this.songs.length - 1) {
|
||||
this.loadSong(this.currentSongIndex + 1);
|
||||
this.isPlaying = true;
|
||||
document.getElementById('playPauseBtn').innerHTML = '<img src="icon/pause.png" alt="暂停" width="18" height="18">';
|
||||
} else {
|
||||
this.loadSongs();
|
||||
this.isPlaying = true;
|
||||
document.getElementById('playPauseBtn').innerHTML = '<img src="icon/pause.png" alt="暂停" width="18" height="18">';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化音乐播放器
|
||||
window.addEventListener('DOMContentLoaded', () =>{
|
||||
new MusicPlayer();
|
||||
});
|
||||
@@ -1,13 +1,118 @@
|
||||
const Panel_left = document.getElementById('leftPanel');
|
||||
const Panel_right = document.getElementById('rightPanel');
|
||||
|
||||
// 触摸滑动相关变量
|
||||
let startX = 0;
|
||||
let isSwiping = false;
|
||||
|
||||
// 判断是否为移动端
|
||||
function isMobile() {
|
||||
return window.innerWidth<= 800;
|
||||
}
|
||||
|
||||
// 切换面板函数
|
||||
function switchPanel() {
|
||||
if (Panel_right.style.display === 'none' || Panel_right.style.display === '') {
|
||||
Panel_left.style.display = 'none';
|
||||
if (!Panel_left || !Panel_right) return;
|
||||
if (!isMobile()) return;
|
||||
|
||||
const leftDisplay = window.getComputedStyle(Panel_left).display;
|
||||
const isLeftVisible = leftDisplay !== 'none';
|
||||
|
||||
if (isLeftVisible) {
|
||||
// 从左侧切换到右侧
|
||||
Panel_left.style.transform = 'translateX(-100%)';
|
||||
Panel_right.style.display = 'flex';
|
||||
}
|
||||
else {
|
||||
Panel_right.style.transform = 'translateX(100%)';
|
||||
|
||||
setTimeout(() => {
|
||||
Panel_right.style.transform = 'translateX(0)';
|
||||
}, 50);
|
||||
|
||||
setTimeout(() => {
|
||||
Panel_left.style.display = 'none';
|
||||
Panel_left.style.transform = 'translateX(0)';
|
||||
}, 300);
|
||||
} else {
|
||||
// 从右侧切换到左侧
|
||||
Panel_right.style.transform = 'translateX(100%)';
|
||||
Panel_left.style.display = 'flex';
|
||||
Panel_right.style.display = 'none';
|
||||
Panel_left.style.transform = 'translateX(-100%)';
|
||||
|
||||
setTimeout(() => {
|
||||
Panel_left.style.transform = 'translateX(0)';
|
||||
}, 50);
|
||||
|
||||
setTimeout(() => {
|
||||
Panel_right.style.display = 'none';
|
||||
Panel_right.style.transform = 'translateX(0)';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定触摸事件
|
||||
function bindTouchEvents() {
|
||||
if (!Panel_left || !Panel_right) return;
|
||||
|
||||
// 为左右面板都添加触摸事件
|
||||
const panels = [Panel_left, Panel_right];
|
||||
|
||||
panels.forEach(panel => {
|
||||
panel.addEventListener('touchstart', handleTouchStart, { passive: true });
|
||||
panel.addEventListener('touchmove', handleTouchMove, { passive: false });
|
||||
panel.addEventListener('touchend', handleTouchEnd);
|
||||
});
|
||||
}
|
||||
|
||||
// 处理触摸开始
|
||||
function handleTouchStart(e) {
|
||||
if (!isMobile()) return;
|
||||
startX = e.touches[0].clientX;
|
||||
isSwiping = false;
|
||||
}
|
||||
|
||||
// 处理触摸移动
|
||||
function handleTouchMove(e) {
|
||||
if (!isMobile() || !startX) return;
|
||||
|
||||
const currentX = e.touches[0].clientX;
|
||||
const diffX = currentX - startX;
|
||||
|
||||
// 判断是否为滑动操作
|
||||
if (Math.abs(diffX) > 30) {
|
||||
isSwiping = true;
|
||||
e.preventDefault(); // 阻止页面滚动
|
||||
}
|
||||
}
|
||||
|
||||
// 处理触摸结束
|
||||
function handleTouchEnd(e) {
|
||||
if (!isMobile() || !isSwiping || !startX) return;
|
||||
|
||||
const endX = e.changedTouches[0].clientX;
|
||||
const diffX = endX - startX;
|
||||
|
||||
// 判断滑动方向
|
||||
if (Math.abs(diffX) > 50) {
|
||||
if (diffX > 0) {
|
||||
// 向右滑动，显示左侧面板
|
||||
const leftDisplay = window.getComputedStyle(Panel_left).display;
|
||||
if (leftDisplay === 'none') {
|
||||
switchPanel();
|
||||
}
|
||||
} else {
|
||||
// 向左滑动，显示右侧面板
|
||||
const leftDisplay = window.getComputedStyle(Panel_left).display;
|
||||
if (leftDisplay !== 'none') {
|
||||
switchPanel();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
startX = 0;
|
||||
isSwiping = false;
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
bindTouchEvents();
|
||||
});
|
||||
Reference in new issue
Block a user