From d06b380b51976508ed99977cf6c48f7063532247 Mon Sep 17 00:00:00 2001 From: Awen <644405261@qq.com> Date: Sun, 8 Mar 2026 23:17:48 +0800 Subject: [PATCH] =?UTF-8?q?BC-M22-002-AW=20=E7=8E=AF=E8=8A=822=E5=AE=8C?= =?UTF-8?q?=E6=88=90=EF=BC=9A=E5=93=8D=E5=BA=94=E5=BC=8F+localStorage?= =?UTF-8?q?=EF=BC=8C=E4=B8=83=E8=BF=9E=E8=83=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/M22-bulletin/index.html | 134 +++++++++++ modules/M22-bulletin/script.js | 160 +++++++++++++ modules/M22-bulletin/storage.js | 128 ++++++++++ modules/M22-bulletin/style.css | 397 ++++++++++++++++++++++++++++++++ 4 files changed, 819 insertions(+) create mode 100644 modules/M22-bulletin/index.html create mode 100644 modules/M22-bulletin/script.js create mode 100644 modules/M22-bulletin/storage.js create mode 100644 modules/M22-bulletin/style.css diff --git a/modules/M22-bulletin/index.html b/modules/M22-bulletin/index.html new file mode 100644 index 00000000..bc24daed --- /dev/null +++ b/modules/M22-bulletin/index.html @@ -0,0 +1,134 @@ + + + + + + HoloLake公告栏 + + + +
+ +
+

公告栏

+
+ 2条置顶 + +
+
+ + +
+ 全部 + 系统公告 + 开发动态 + 团队消息 +
+ + +
+ +
+
置顶
+
+
+
+ 光湖系统MVP v0.4.0发布公告 + 2小时前 +
+

主域公告栏与频道过渡系统（M22）正式进入环节0开发。新增公告置顶、频道分类、时间线展示功能，信息展示层逐步完善。

+
+ 系统公告 + 发布者：曜冥主控 +
+
+
+ + +
+
置顶
+
+
+
+ SYSLOG提交流程v2上线通知 + 5小时前 +
+

SYSLOG生成方式已更新为「知秋主动提问制」完成任务后由知秋引导填写，无需手动套用模板。即日起生效。

+
+ 开发动态 + 发布者：知秋 +
+
+
+ + +
+
+
+
+ 欢迎Awen加入光湖团队！ + 1天前 +
+

DEV-012 Awen正式加入光湖开发团队，成为第12位协作者。首个模块M09消息通知中心已全通关！

+
+
+ + +
+
+
+
+ M08数据统计面板全通关 + 2天前 +
+

完成M08全部环节，七连胜达成！响应式布局+SVG环形图+CSV导出一次通过，正式前端毕业

+
+ 开发动态 + 发布者：霜砚 +
+
+
+ + +
+
+
+
+ HTTPS配置与飞书Webhook联调完成 + 3天前 +
+

光湖主域已完成HTTPS配置与飞书Webhook全链路联调，Nginx+PM2+Certbot部署完毕，系统脊梁正式贯通。

+
+ 系统公告 + 发布者：页页 +
+
+
+ + +
+
+
+
+ 本周开发者进度总览 + 3天前 +
+

12位开发者中8位活跃，累计完成30+个环节。肥猫五连胜、桔子七连胜、小草莓五连胜、Awen四连胜团队势头强劲！

+
+ 团队消息 + 发布者：曜冥主控 +
+
+
+
+ + +
+ 共6条公告2条置顶 + HoloLake光湖系统 +
+
+ + + + \ No newline at end of file diff --git a/modules/M22-bulletin/script.js b/modules/M22-bulletin/script.js new file mode 100644 index 00000000..a9a8fb8a --- /dev/null +++ b/modules/M22-bulletin/script.js @@ -0,0 +1,160 @@ +// ========== 确保 HoloLake 命名空间存在 ========== +window.HoloLake = window.HoloLake || {}; + +// ========== 页面加载完成后执行 ========== +document.addEventListener('DOMContentLoaded', function() { + console.log('🚀 script.js 初始化'); + + // 恢复所有状态 + restoreState(); + + // 绑定事件 + bindEvents(); + + // 更新布局信息 + updateLayoutInfo(); + + // 监听窗口大小变化 + window.addEventListener('resize', function() { + updateLayoutInfo(); + }); +}); + +// ========== 恢复状态 ========== +function restoreState() { + console.log('🔍 restoreState 开始...'); + + try { + // 1. 恢复订阅状态 + const isSubscribed = HoloLake.UserState.isSubscribed(); + const subscribeBtn = document.querySelector('.subscribe-btn'); + if (subscribeBtn) { + if (isSubscribed) { + subscribeBtn.classList.add('active'); + subscribeBtn.textContent = '已订阅'; + } else { + subscribeBtn.classList.remove('active'); + subscribeBtn.textContent = '订阅'; + } + } + + // 2. 恢复已读公告 + const readList = HoloLake.UserState.getReadBulletins(); + const bulletinCards = document.querySelectorAll('.bulletin-card'); + bulletinCards.forEach((card, index) => { + const bulletinId = `bulletin-${index}`; + if (readList.includes(bulletinId)) { + card.classList.add('read'); + } + }); + + // 3. 恢复选中频道 + const activeChannel = HoloLake.UserState.getActiveChannel(); + const channels = document.querySelectorAll('.channel'); + channels.forEach(channel => { + const channelText = channel.textContent.trim(); + if (channelText === activeChannel || (activeChannel === '全部' && channelText === '全部')) { + channel.classList.add('active'); + } else { + channel.classList.remove('active'); + } + }); + + // 4. 更新最后访问时间 + HoloLake.UserState.updateLastVisit(); + + console.log('✅ 恢复已完成'); + } catch (e) { + console.error('❌ 恢复失败:', e); + } +} + +// ========== 绑定事件 ========== +function bindEvents() { + console.log('🔗 绑定事件...'); + + // 订阅按钮 + const subscribeBtn = document.querySelector('.subscribe-btn'); + if (subscribeBtn) { + subscribeBtn.addEventListener('click', function() { + const newState = HoloLake.UserState.toggleSubscribe(); + if (newState) { + this.classList.add('active'); + this.textContent = '已订阅'; + } else { + this.classList.remove('active'); + this.textContent = '订阅'; + } + console.log('📌 订阅状态:', newState ? '已订阅' : '未订阅'); + }); + } + + // 频道点击 + const channels = document.querySelectorAll('.channel'); + channels.forEach(channel => { + channel.addEventListener('click', function() { + // 更新UI + channels.forEach(c => c.classList.remove('active')); + this.classList.add('active'); + + // 保存状态 + const channelName = this.textContent.trim(); + HoloLake.UserState.setActiveChannel(channelName); + + // 筛选公告（可选功能，这里先做简单筛选） + filterBulletinsByChannel(channelName); + + console.log('📺 切换到频道:', channelName); + }); + }); + + // 公告点击（标记已读） + const bulletinCards = document.querySelectorAll('.bulletin-card'); + bulletinCards.forEach((card, index) => { + card.addEventListener('click', function() { + const bulletinId = `bulletin-${index}`; + + // 标记已读 + if (!this.classList.contains('read')) { + this.classList.add('read'); + HoloLake.UserState.markAsRead(bulletinId); + console.log('📖 已读公告:', bulletinId); + } + }); + }); +} + +// ========== 按频道筛选 ========== +function filterBulletinsByChannel(channelName) { + const cards = document.querySelectorAll('.bulletin-card'); + + if (channelName === '全部') { + cards.forEach(card => { + card.style.display = 'flex'; + }); + return; + } + + cards.forEach(card => { + const tag = card.querySelector('.bulletin-tag'); + if (tag && tag.textContent.trim() === channelName) { + card.style.display = 'flex'; + } else { + card.style.display = 'none'; + } + }); +} + +// ========== 更新布局信息 ========== +function updateLayoutInfo() { + const width = window.innerWidth; + let mode = '桌面'; + + if (width <= 480) { + mode = '手机'; + } else if (width <= 768) { + mode = '平板'; + } + + console.log(`📱 当前布局: ${mode}模式 (${width}px)`); +} \ No newline at end of file diff --git a/modules/M22-bulletin/storage.js b/modules/M22-bulletin/storage.js new file mode 100644 index 00000000..865bd567 --- /dev/null +++ b/modules/M22-bulletin/storage.js @@ -0,0 +1,128 @@ +/** + * HoloLake Bulletin 数据持久化模块 + * storage.js - localStorage 封装 + 用户状态管理 + * 模块 ID: BC-M22-002-AW + */ + +window.HoloLake = window.HoloLake || {}; + +// ========== Storage 工具对象（带前缀） ========== +HoloLake.Storage = { + prefix: 'hololake_bulletin_', + + // 保存数据 + save: function(key, value) { + try { + const serialized = JSON.stringify(value); + localStorage.setItem(this.prefix + key, serialized); + console.log(`[Storage] 已保存: ${key} =`, value); + } catch (e) { + console.error('[Storage] 保存失败:', e); + } + }, + + // 读取数据 + load: function(key, defaultValue = null) { + try { + const serialized = localStorage.getItem(this.prefix + key); + if (serialized === null) { + console.log(`[Storage] 无数据: ${key}，返回默认值`); + return defaultValue; + } + const value = JSON.parse(serialized); + console.log(`[Storage] 已加载: ${key} =`, value); + return value; + } catch (e) { + console.error('[Storage] 读取失败:', e); + return defaultValue; + } + }, + + // 删除指定键 + remove: function(key) { + try { + localStorage.removeItem(this.prefix + key); + console.log(`[Storage] 已删除: ${key}`); + } catch (e) { + console.error('[Storage] 删除失败:', e); + } + }, + + // 清空所有带前缀的数据 + clear: function() { + try { + const keysToRemove = []; + for (let i = 0; i < localStorage.length; i++) { + const key = localStorage.key(i); + if (key.startsWith(this.prefix)) { + keysToRemove.push(key); + } + } + keysToRemove.forEach(key => localStorage.removeItem(key)); + console.log('[Storage] 已清空所有公告栏数据'); + } catch (e) { + console.error('[Storage] 清空失败:', e); + } + } +}; + +// ========== 用户状态管理 ========== +HoloLake.UserState = { + // 已读公告列表 + getReadBulletins: function() { + return HoloLake.Storage.load('read_bulletins', []); + }, + + markAsRead: function(bulletinId) { + const readList = this.getReadBulletins(); + if (!readList.includes(bulletinId)) { + readList.push(bulletinId); + HoloLake.Storage.save('read_bulletins', readList); + } + return readList; + }, + + // 订阅状态 + isSubscribed: function() { + return HoloLake.Storage.load('is_subscribed', false); + }, + + toggleSubscribe: function() { + const current = this.isSubscribed(); + const newState = !current; + HoloLake.Storage.save('is_subscribed', newState); + return newState; + }, + + // 当前频道 + getActiveChannel: function() { + return HoloLake.Storage.load('active_channel', 'all'); + }, + + setActiveChannel: function(channelId) { + HoloLake.Storage.save('active_channel', channelId); + }, + + // 上次访问时间 + getLastVisit: function() { + return HoloLake.Storage.load('last_visit', null); + }, + + updateLastVisit: function() { + const now = new Date().toISOString(); + HoloLake.Storage.save('last_visit', now); + return now; + }, + + // 重置所有状态（测试用） + resetAll: function() { + HoloLake.Storage.remove('read_bulletins'); + HoloLake.Storage.remove('is_subscribed'); + HoloLake.Storage.remove('active_channel'); + HoloLake.Storage.remove('last_visit'); + console.log('[UserState] 已重置所有状态'); + } +}; + +// 初始化时记录访问时间（可选，页面加载时由 script.js 调用） +console.log('✅ storage.js 已加载，HoloLake.Storage 和 HoloLake.UserState 已就绪'); \ No newline at end of file diff --git a/modules/M22-bulletin/style.css b/modules/M22-bulletin/style.css new file mode 100644 index 00000000..cebd5b9e --- /dev/null +++ b/modules/M22-bulletin/style.css @@ -0,0 +1,397 @@ +/* HoloLake公告栏系统深色科技风 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; + background: #0a1628; + color: #e0e6ed; + min-height: 100vh; +} + +.app-container { + max-width: 580px; + margin: 0 auto; + padding: 0 16px; +} + +/* ========== 顶部标题栏 ========== */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24px 0 16px; + border-bottom: 1px solid rgba(255,255,255,0.08); +} + +.header h1 { + font-size: 22px; + font-weight: 700; + color: #e0e6ed; +} + +.header-actions { + display: flex; + align-items: center; + gap: 12px; +} + +.pinned-badge { + background: rgba(255, 183, 77, 0.15); + color: #ffb74d; + font-size: 12px; + padding: 4px 10px; + border-radius: 12px; + font-weight: 600; +} + +.subscribe-btn { + background: rgba(79, 195, 247, 0.1); + color: #4fc3f7; + border: 1px solid rgba(79, 195, 247, 0.2); + padding: 6px 14px; + border-radius: 8px; + font-size: 13px; + cursor: pointer; +} + +.subscribe-btn:hover { + background: rgba(79, 195, 247, 0.2); +} + +/* ========== 频道栏 ========== */ +.channel-bar { + display: flex; + gap: 8px; + padding: 16px 0; + border-bottom: 1px solid rgba(255,255,255,0.06); + overflow-x: auto; +} + +.channel { + padding: 8px 18px; + border-radius: 20px; + border: 1px solid rgba(255,255,255,0.1); + background: transparent; + color: #8899aa; + font-size: 13px; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; +} + +.channel:hover { + border-color: rgba(255, 183, 77, 0.3); + color: #b0bec5; +} + +.channel.active { + background: rgba(255,183,77,0.15); + border-color: #ffb74d; + color: #ffb74d; + font-weight: 600; +} + +/* ========== 公告列表 ========== */ +.bulletin-list { + padding: 16px 0; +} + +.bulletin-card { + position: relative; + display: flex; + gap: 16px; + padding: 16px; + border-radius: 12px; + background: rgba(20, 30, 45, 0.6); + border: 1px solid rgba(255,255,255,0.04); + margin-bottom: 12px; + transition: all 0.2s ease; +} + +.bulletin-card.pinned { + border: 1px solid rgba(255, 183, 77, 0.3); + background: rgba(255, 183, 77, 0.02); +} + +.pin-indicator { + position: absolute; + top: 8px; + right: 12px; + font-size: 11px; + color: #ffb74d; + font-weight: 600; +} + +/* 公告图标 */ +.bulletin-icon { + width: 42px; + height: 42px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + flex-shrink: 0; +} + +.bulletin-icon.system { background: rgba(156,39,176,0.12); } +.bulletin-icon.dev { background: rgba(76,175,80,0.12); } +.bulletin-icon.team { background: rgba(79,195,247,0.12); } + +/* 公告内容 */ +.bulletin-content { + flex: 1; + min-width: 0; +} + +.bulletin-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 6px; +} + +.bulletin-title { + font-size: 15px; + font-weight: 600; + color: #e0e6ed; +} + +.bulletin-time { + font-size: 12px; + color: #556677; + flex-shrink: 0; + margin-left: 12px; +} + +.bulletin-summary { + font-size: 13px; + color: #8899aa; + line-height: 1.6; + margin-bottom: 10px; +} + +/* 公告底部 */ +.bulletin-footer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.bulletin-tag { + display: inline-block; + font-size: 11px; + padding: 2px 8px; + border-radius: 6px; + font-weight: 500; +} + +.tag-system { background: rgba(156,39,176,0.12); color: #ce93d8; } +.tag-dev { background: rgba(76,175,80,0.12); color: #81c784; } +.tag-team { background: rgba(79,195,247,0.12); color: #4fc3f7; } + +.bulletin-author { + font-size: 11px; + color: #556677; +} + +/* ========== 底部状态栏 ========== */ +.footer { + display: flex; + justify-content: space-between; + padding: 20px 0; + border-top: 1px solid rgba(255,255,255,0.06); + font-size: 12px; + color: #556677; +} + +.footer-brand { + color: rgba(255, 183, 77, 0.5); +} + +/* ========================= 环节2：响应式布局 ========================= */ + +/* 平板（宽度 768px 以下） */ +@media (max-width: 768px) { + .app-container { + max-width: 100%; + padding: 0 12px; + } + header h1 { + font-size: 18px; + } + .channel-bar { + gap: 6px; + padding: 12px 0; + } + .channel { + padding: 6px 14px; + font-size: 12px; + } + .bulletin-card { + padding: 12px 10px; + } + .channel-bar { + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + } + .channel-bar::-webkit-scrollbar { + display: none; + } + .bulletin-card { + flex-direction: column; + gap: 8px; + } + .bulletin-icon { + width: 32px; + height: 32px; + font-size: 14px; + } + .bulletin-header { + flex-direction: column; + align-items: flex-start; + gap: 4px; + } + .bulletin-time { + margin-left: 0; + } + .pin-indicator { + top: 6px; + right: 8px; + font-size: 10px; + } + .footer { + flex-direction: column; + gap: 4px; + text-align: center; + } +} + +/* 已读公告样式 */ +.bulletin-card.read { + opacity: 0.6; +} +.bulletin-card.read .bulletin-title { + color: #8899aa; +} + +/* 订阅按钮激活状态 */ +.subscribe-btn.active { + background: rgba(79, 195, 247, 0.25); + border-color: #4fc3f7; + color: #4fc3f7; +} +/* ========== 响应式断点 ========== */ + +/* 已读公告样式 */ +.bulletin-card.read { + opacity: 0.7; +} +.bulletin-card.read h3 { + color: #888; + text-decoration: line-through 1px rgba(0,0,0,0.2); +} + +/* 订阅按钮激活状态 */ +.subscribe-btn.active { + border: 2px solid #0066ff; + background-color: #e6f0ff; + color: #0066ff; + font-weight: bold; +} + +/* 平板设备 ≤ 768px */ +@media (max-width: 768px) { + .container { + width: 100%; + padding: 0 20px; + } + + .bulletin-header h1 { + font-size: 1.8rem; + } + + .bulletin-grid { + gap: 12px; + } + + .bulletin-card { + padding: 12px; + } + + .bulletin-card .icon { + width: 32px; + height: 32px; + } + + .channel-tabs { + gap: 8px; + } + + .channel-tab { + padding: 6px 12px; + font-size: 0.9rem; + } +} + +/* 手机设备 ≤ 480px */ +@media (max-width: 480px) { + .bulletin-header { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + .bulletin-header h1 { + font-size: 1.5rem; + margin-bottom: 5px; + } + + .subscribe-btn { + align-self: flex-start; + } + + .bulletin-card { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .bulletin-card .icon { + width: 40px; + height: 40px; + margin-bottom: 4px; + } + + .channel-tabs { + overflow-x: auto; + white-space: nowrap; + flex-wrap: nowrap; + gap: 10px; + padding-bottom: 8px; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; /* Firefox隐藏滚动条 */ + } + + .channel-tabs::-webkit-scrollbar { + display: none; /* Chrome/Safari隐藏滚动条 */ + } + + .channel-tab { + display: inline-block; + float: none; + white-space: nowrap; + } + + .bulletin-footer { + flex-direction: column; + text-align: center; + gap: 8px; + } +} \ No newline at end of file