diff --git a/index.html b/index.html index e965bd6..41e558e 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@ })(); - + diff --git a/static/css/memos.css b/static/css/memos.css index 7acc5de..3c01017 100644 --- a/static/css/memos.css +++ b/static/css/memos.css @@ -92,5 +92,7 @@ object-fit: cover; border-radius: 4px; cursor: pointer; + transition: transform 0.3s ease, box-shadow 0.3s ease; } + /* --- 新增的闲言碎语样式 END --- */ \ No newline at end of file diff --git a/static/img/game/jiangchengchuangyeji/1.png b/static/img/game/jiangchengchuangyeji/1.png new file mode 100644 index 0000000..6d68e46 Binary files /dev/null and b/static/img/game/jiangchengchuangyeji/1.png differ diff --git a/static/img/game/jiangchengchuangyeji/2.png b/static/img/game/jiangchengchuangyeji/2.png new file mode 100644 index 0000000..fafc75f Binary files /dev/null and b/static/img/game/jiangchengchuangyeji/2.png differ diff --git a/static/img/game/longzuhuanxiang/longzuhuanxiang1.jpg b/static/img/game/longzuhuanxiang/longzuhuanxiang1.jpg new file mode 100644 index 0000000..41a6650 Binary files /dev/null and b/static/img/game/longzuhuanxiang/longzuhuanxiang1.jpg differ diff --git a/static/img/game/wangzherongyao/wangzherongyao1.jpg b/static/img/game/wangzherongyao/wangzherongyao1.jpg new file mode 100644 index 0000000..306da14 Binary files /dev/null and b/static/img/game/wangzherongyao/wangzherongyao1.jpg differ diff --git a/static/img/game/wangzherongyao/wangzherongyao2.jpg b/static/img/game/wangzherongyao/wangzherongyao2.jpg new file mode 100644 index 0000000..3e6031e Binary files /dev/null and b/static/img/game/wangzherongyao/wangzherongyao2.jpg differ diff --git a/static/js/game_my.js b/static/js/game_my.js index 2501046..d22638d 100644 --- a/static/js/game_my.js +++ b/static/js/game_my.js @@ -135,6 +135,26 @@ const gameDetailData = { "./static/img/game/guigubahuang/3.jpg", ], }, + 3: { + id: "", + rank: "", + detailDesc_zh: "游戏玩法大杂烩，好玩，爱玩！", + detailDesc_en: "Fun! Love playing! The game is very nice!", + images: [ + "./static/img/game/jiangchengchuangyeji/1.png", + "./static/img/game/jiangchengchuangyeji/2.png", + ], + }, + 5: { + id: "游戏id：一口氰化物", + rank: "历史最高段位：星耀", + detailDesc_zh: "有你们，才是真正的荣耀", + detailDesc_en: "", + images: [ + "./static/img/game/wangzherongyao/wangzherongyao1.jpg", + "./static/img/game/wangzherongyao/wangzherongyao2.jpg", + ], + }, 6: { id: "", rank: "历史最高段位：传奇车神", @@ -145,6 +165,15 @@ const gameDetailData = { "./static/img/game/qqspead/qqspead2.jpg", ], }, + 7: { + id: "游戏id：chisty", + rank: "", + detailDesc_zh: "不好玩，但是满足了我的剧情幻想。", + detailDesc_en: "", + images: [ + "./static/img/game/longzuhuanxiang/longzuhuanxiang1.jpg", + ], + }, }; let currentlyOpenTooltip = null; diff --git a/static/js/language/zh.js b/static/js/language/zh.js index aaf6a19..0f53fa5 100644 --- a/static/js/language/zh.js +++ b/static/js/language/zh.js @@ -54,7 +54,7 @@ const translationsZH = { loading_memos: "正在加载闲言碎语...", loading_website:"正在加载网站...", // 底部 - footer_text: "我虽然是个废物,但我仍然选择用自己喜欢的方式度过自己的余生", + footer_text: "我虽然是个废物，但我仍然选择用自己喜欢的方式度过自己的余生", visitor_count_label: "本站访客数 :", visit_count_label: "本站总访问量 :", }; diff --git a/static/js/map-footprint.js b/static/js/map-footprint.js index 546118c..ac13336 100644 --- a/static/js/map-footprint.js +++ b/static/js/map-footprint.js @@ -193,7 +193,7 @@ const MapFootprintModule = (() => { // 如果还需要显示其他描述信息（例如可以从 params.data 中获取），可以在此处添加 const description = params.data.desc || "博主也不知道说啥了。。。"; if (description) { - tooltipHtml += `描述:${description}
`; + tooltipHtml += `描述: ${description}
`; } // 获取图片列表 const imageList = params.data.imgList; // 直接从数据对象获取 imgList @@ -201,14 +201,14 @@ const MapFootprintModule = (() => { // 检查是否有图片列表且不为空 if (Array.isArray(imageList) && imageList.length > 0) { // 添加标题 - tooltipHtml += "照片:
"; + tooltipHtml += "照片:
"; // 遍历图片列表，生成 HTML 图像标签 imageList.forEach((imgSrc) => { tooltipHtml += `${name} 图片`; }); } else { // 如果没有图片或 imgList 不存在/为空，则显示提示 - tooltipHtml += "照片:看来博主不是很爱拍照~"; + tooltipHtml += "照片: 看来博主不是很爱拍照~"; } return tooltipHtml; // 返回构建好的 HTML 字符串 @@ -253,11 +253,11 @@ const MapFootprintModule = (() => { // 为了实现高亮，我们只需要列出访问过的城市即可，未访问的城市会使用默认颜色 const provinceMapData = filteredVisitedPlaces.map((city) => ({ name: city.name, - desc:city.desc || "", - imgList:city.imgList || [], + desc: city.desc || "", + imgList: city.imgList || [], value: 1, // 值为 1 表示访问过，用于 visualMap 区分 })); - // console.log(provinceMapData) + // --- 配置 visualMap --- visualMapConfig = { show: false, // 通常不显示 visualMap 组件条 @@ -270,7 +270,6 @@ const MapFootprintModule = (() => { }; // --- 创建省份地图系列 (用于高亮城市) --- - // 关键修改：将 map 系列的 clickHandler 禁用，让 geo 组件处理点击 const provinceMapSeries = { // name: "访问过的城市", type: "map", @@ -278,7 +277,7 @@ const MapFootprintModule = (() => { roam: roamSetting, zoom: zoomLevel, center: centerCoord, - silent: true, // 设置为 true，使 map 系列不响应鼠标事件，避免干扰 geo 的点击返回 + silent: false, // 设置为 false，允许响应鼠标事件以显示 tooltip label: { show: true, // 可以选择是否显示城市名称标签 color: "#000", // 标签颜色 @@ -305,6 +304,43 @@ const MapFootprintModule = (() => { borderColor: "#333", borderWidth: 0.5, }, + // 添加 tooltip 配置到 series 级别 + tooltip: { + trigger: 'item', + formatter: function(params) { + // 检查是否有数据 + if (!params.data) { + return params.name || "未知城市"; + } + + const cityName = params.data.name || params.name || "未知城市"; + let tooltipHtml = `
${cityName}
`; + + // 如果这个城市在 visitedPlaces 中有记录 + const placeData = visitedPlaces.find(p => p.name === cityName && p.province === provinceCode); + if (placeData) { + // 显示描述 + const description = placeData.desc || "暂无描述"; + tooltipHtml += `
${description}
`; + + // 显示图片 + if (placeData.imgList && placeData.imgList.length > 0) { + tooltipHtml += `
`; + placeData.imgList.forEach((imgSrc) => { + tooltipHtml += ` + ${cityName} + `; + }); + tooltipHtml += `
`; + } + } + + return tooltipHtml; + } + } }; // 将省份地图系列和 geo 组件添加到配置中 @@ -332,7 +368,14 @@ const MapFootprintModule = (() => { }, }, tooltip: { - + trigger: 'item', + backgroundColor: 'rgba(255, 255, 255, 0.95)', + borderColor: '#ddd', + borderWidth: 1, + textStyle: { + color: '#333' + }, + extraCssText: 'box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 6px;' }, // geo 组件配置 geo: diff --git a/static/js/memos.js b/static/js/memos.js index b5a907b..d0d56e3 100644 --- a/static/js/memos.js +++ b/static/js/memos.js @@ -192,8 +192,72 @@ // 为加载更多按钮绑定事件 (使用全局函数) window.loadMemos = loadMemos; - - // 当“闲言碎语”标签被点击时加载数据 + + // 图片点击放大功能 + function initImageZoom() { + // 使用事件委托，监听整个容器 + memosContainer.addEventListener('click', function (e) { + // 检查是否点击到了图片 + if (e.target.classList.contains('memo-attachment-image')) { + const fullUrl = e.target.getAttribute('data-full-url'); + if (fullUrl) { + showImageModal(fullUrl); + } + } + }); + } + + // 显示图片放大模态框 + function showImageModal(imageUrl) { + // 创建模态框 + const modal = document.createElement('div'); + modal.id = 'image-zoom-modal'; + modal.style.cssText = ` + display: flex; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + z-index: 10000; + justify-content: center; + align-items: center; + cursor: zoom-out; + `; + + const img = document.createElement('img'); + img.src = imageUrl; + img.style.cssText = ` + max-width: 90%; + max-height: 90%; + object-fit: contain; + border-radius: 5px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + `; + + modal.appendChild(img); + document.body.appendChild(modal); + + // 点击关闭 + modal.addEventListener('click', function () { + modal.remove(); + }); + + // ESC 键关闭 + function handleEsc(e) { + if (e.key === 'Escape') { + modal.remove(); + document.removeEventListener('keydown', handleEsc); + } + } + document.addEventListener('keydown', handleEsc); + } + + // 初始化图片放大功能 + initImageZoom(); + + // 当"闲言碎语"标签被点击时加载数据 memosTab.addEventListener("click", function () { // 只有在内容是空的或者首次加载时才调用 if (memoData.length === 0) {