chara_card_v3 · v3.0
蒙斯提斯新闻部职员终端系统v1.05
类别：未分类
开场白
```yaml | 蒙斯提斯中央车站的穹顶高悬，透过满是核洛锥反应完毕留下的尘灰的玻璃，阴霾的天空投下惨淡的光。巨大的核洛锥动力机车在站台旁喷吐着冷凝的水蒸气，金属摩擦的尖啸声与广播里含糊不清的通告交织在一起，构成了这座工业巨兽的呼吸声。 你站在拥挤的人流中，手里紧紧攥着那张来自新闻部的入职通知书。空气中弥漫着机油和锈迹的味道，那是蒙斯提斯特有的气息。 你低下头，按亮了手腕上的个人数据终端。屏幕闪烁了两下，直接跳过了自检程序，进入了熟悉的操作系统界面。 > 身份核验通过... > 欢迎回到蒙斯提斯，见习记者<user>。 > 正在同步城市战术地图与任务数据... | <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> /* --- 基础风格 --- */ body { margin: 0; padding: 10px; background-color: #000; color: #ffb000; font-family: "Courier New", Courier, monospace; font-size: 13px; text-shadow: 0 0 2px #ffb000; overflow-x: hidden; } .crt::before { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 999; background-size: 100% 2px, 3px 100%; pointer-events: none; } /* --- 主界面样式 --- */ .header-bar { text-align: center; margin-bottom: 10px; font-weight: bold; border-bottom: 2px solid #ffb000; padding-bottom: 5px; background: rgba(0, 0, 0, 0.8); position: sticky; top: 0; z-index: 100; } .section { margin-bottom: 10px; border: 1px solid #ffb000; background: rgba(0,0,0,0.4); } .section-header { font-weight: bold; background: rgba(255, 176, 0, 0.2); padding: 4px 8px; cursor: pointer; display: flex; justify-content: space-between; user-select: none; } .section-header::before { content: "[+] "; } .section-header.open::before { content: "[-] "; } .content-box { padding: 8px; display: none; } .content-box.show { display: block; animation: slideDown 0.3s ease-out; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stat-row { display: flex; justify-content: space-between; margin-bottom: 4px; } .label { opacity: 0.8; } .value { font-weight: bold; } .bar-container { width: 100%; height: 6px; border: 1px solid #ffb000; margin-bottom: 6px; background: rgba(0,0,0,0.3); } .bar-fill { height: 100%; background-color: #ffb000; opacity: 0.7; transition: width 0.3s; } .danger { color: #ff3300; text-shadow: 0 0 2px #ff3300; } /* 动画 */ @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .blink { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } .pulse { animation: pulser 2s ease-in-out infinite; } @keyframes pulser { 0% { text-shadow: 0 0 2px #ffb000; } 50% { text-shadow: 0 0 8px #ffb000, 0 0 12px #ff8c00; } 100% { text-shadow: 0 0 2px #ffb000; } } /* 列表 */ ul { list-style: none; padding: 0; margin: 0; } li { margin-bottom: 2px; font-size: 12px; position: relative; padding-left: 10px; line-height: 1.4; } li::before { content: ">"; position: absolute; left: 0; opacity: 0.6; font-size: 10px; top: 2px; } .mission-item { color: #ffdf80; font-weight: bold; } .mission-item::before { content: "!"; color: #ff3300; margin-right: 5px; animation: blinker 1.5s infinite; } .mail-unread { color: #fff; text-shadow: 0 0 5px #fff; font-weight: bold; } /* 地图 */ .map-wrapper { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; } .city-map { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 1px; aspect-ratio: 6/5; width: 100%; } .zone { border: 1px solid #ffb000; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; font-size: 10px; background: rgba(255, 176, 0, 0.05); padding: 1px; line-height: 1; user-select: none; } .zone:hover { background: #ffb000; color: #000; z-index: 10; font-weight: bold; } .zone.active { background: #ffb000; color: #000; font-weight: bold; border: 2px solid #fff; } .zone-core { border: 2px double #ffb000; font-weight: bold; background: rgba(255, 176, 0, 0.15); } .zone-ind { border-style: dashed; } .zone-dang { border-color: #ff3300; color: #ff3300; } .map-info { border: 1px solid #ffb000; padding: 5px; background: rgba(0,0,0,0.6); min-height: 80px; margin-top: 5px; } .npc-tag { display: inline-block; border: 1px solid #ffb000; padding: 1px 3px; margin: 1px; font-size: 10px; background: rgba(0,0,0,0.3); } .npc-status { font-size: 9px; opacity: 0.7; margin-left: 2px; } </style> <script type="module"> // --- 配置区域 --- const mapData = { 'central': { name: "中央行政区", desc: "权力中枢。戒备森严。", locs: ["苍穹塔", "新闻/工业/思想/特异/教育部总部", "中央银行", "一号配给区"] }, 'outer_admin_n': { name: "行政区外围 (北)", desc: "文教区。", locs: ["国立科技大学", "共和国文学院", "中央图书馆", "罗斯科夫宅邸"] }, 'outer_admin_w': { name: "行政区外围 (西)", desc: "文化区。", locs: ["自然科学博物馆", "市立艺术馆", "大剧院"] }, 'outer_admin_s': { name: "行政区外围 (南)", desc: "交通商业区。", locs: ["中央车站", "警察总署", "魏羽商会", "西九街酒吧"] }, 'outer_admin_e': { name: "行政区外围 (东)", desc: "缓冲区。", locs: ["行政机构副楼"] }, 'ind_1': { name: "第一工业区", desc: "重工业。污染严重。", locs: ["三号冶炼厂", "高架维修厂", "莫提斯商会"] }, 'ind_2': { name: "第二工业区", desc: "化工精炼。剧毒。", locs: ["精炼厂", "合成车间"] }, 'ind_3': { name: "第三工业区", desc: "军工禁区。", locs: ["第一军工厂", "第二军工厂", "一号塔楼(V-AX)"] }, 'wind_district': { name: "风侍聚居区", desc: "天狗社区。", locs: ["风神纪念碑", "鸦巢酒馆", "回声训练场"] }, 'garrison': { name: "卫戍驻地", desc: "军事堡垒。", locs: ["指挥堡垒", "训练场", "维修中心"] }, 'res_2': { name: "二号配给区", desc: "技术人员居住。", locs: ["标准化居住塔", "技术俱乐部"] }, 'res_3': { name: "三号配给区", desc: "工人居住。拥挤。", locs: ["第八居住塔", "食品商店", "工人俱乐部", "警察分局"] }, 'res_4': { name: "四号/灰烬区", desc: "底层与废料。", locs: ["废料厂", "焚烧炉", "第一监狱"] }, 'religion': { name: "宗教区", desc: "各大教会。", locs: ["工业神/风神/死神/科技神/丰收神教堂"] }, 'logistics': { name: "仓储物流区", desc: "物资转运。", locs: ["货运站", "食物仓库", "原料堆场"] }, 'airport': { name: "民用飞行平台", desc: "飞艇起降。", locs: ["候船大厅", "停泊塔台"] }, 'wasteland_n': { name: "北部荒原", desc: "旧日裂隙禁区。", locs: ["旧日裂隙", "倒悬城市", "十字科技二所", "壁虎基地"] }, 'wasteland_w': { name: "西部荒原", desc: "开拓前线。", locs: ["七号矿站", "不屈号", "开拓者公墓"] }, 'wasteland_e': { name: "东部荒原", desc: "尘埃海。", locs: ["尘埃海中继塔"] } }; const spoilerGuard = { "AX-011原型": "???", "欧布莉丝": "欧布莉丝(修女)", "苹": "苹(伪装)" }; // --- 核心工具函数 --- function deepExtractList(obj) { if (!obj) return []; if (Array.isArray(obj)) { if (obj.length > 0 && Array.isArray(obj[0])) return deepExtractList(obj[0]); return obj; } return []; } function filterArray(arr) { return (!Array.isArray(arr)) ? [] : arr.filter(item => typeof item === 'string' && !item.startsWith('$')); } function getWidth(val, max = 100) { let v = parseInt(val)||0; if(v<0)v=0; if(v>max)v=max; return (v/max)*100 + '%'; } function isLocInZone(locName, zoneData) { if(!locName||locName==='未知') return false; if(locName.includes(zoneData.name.split(' ')[0])) return true; for(let l of zoneData.locs) if(locName.includes(l.split(' ')[0].split('(')[0])) return true; if(zoneData.name.includes("风侍")&&locName.includes("高塔")) return true; if(zoneData.name.includes("行政")&&locName.includes("总部")) return true; return false; } function isLocationMatch(npcLoc, targetLoc) { if (!npcLoc || npcLoc === '未知' || !targetLoc) return false; const n = npcLoc.trim(); const t = targetLoc.trim(); if (n.includes(t) || t.includes(n)) return true; return false; } // --- UI 更新逻辑 --- function updateMainUI() { const allVars = getAllVariables(); const sys = _.get(allVars, 'stat_data.系统', {}); const pl = _.get(allVars, 'stat_data.weicross', {}); const state = _.get(pl, '状态', {}); // 系统与环境 $('#sys-date').text(_.get(sys, '日期', ['N/A'])[0]); $('#sys-time').text(_.get(sys, '时间', ['N/A'])[0]); $('#sys-weather').text(_.get(sys, '环境.天气', ['N/A'])[0]); const dust = _.get(sys, '环境.粉尘浓度', [0])[0]; $('#sys-dust').text(dust); $('#bar-dust').css('width', getWidth(dust)); // 玩家状态 const plLoc = _.get(state, '位置', ['未知区域'])[0]; $('#sys-loc').text(plLoc); const hp = _.get(state, '体力', [100])[0]; const san = _.get(state, '精神', [100])[0]; const ero = _.get(state, '侵蚀度', [0])[0]; $('#pl-hp').text(hp); $('#bar-hp').css('width', getWidth(hp)); $('#pl-san').text(san); $('#bar-san').css('width', getWidth(san)); $('#pl-ero').text(ero); $('#bar-ero').css('width', getWidth(ero)); if(parseInt(ero)>80) $('#pl-ero-box').addClass('danger'); else $('#pl-ero-box').removeClass('danger'); // 资源 $('#res-money').text(_.get(pl, '资源.共和国环', [0])[0]); $('#res-ticket').text(_.get(pl, '资源.配给券', [0])[0]); // 列表数据 const missions = filterArray(deepExtractList(_.get(pl, '当前任务'))); $('#mission-list').html(missions.length ? missions.map(i=>`<li class="mission-item pulse">${i}</li>`).join('') : '<li style="opacity:0.5">[暂无指令]</li>'); const mails = filterArray(deepExtractList(_.get(pl, '邮件'))); $('#mail-list').html(mails.length ? mails.map(i=>`<li class="${i.includes('(未读)')?'mail-unread':''}">${i}</li>`).join('') : '<li style="opacity:0.5">[收件箱为空]</li>'); const bag = filterArray(deepExtractList(_.get(pl, '背包'))); $('#bag-list').html(bag.length ? bag.map(i=>`<li>${i}</li>`).join('') : '<li>[空]</li>'); const intel = filterArray(deepExtractList(_.get(pl, '情报'))); $('#intel-list').html(intel.length ? intel.map(i=>`<li>${i}</li>`).join('') : '<li>[无]</li>'); // 周边人物 const npcsObj = _.get(allVars, 'stat_data.NPC', {}); let nearbyNpcs = []; Object.entries(npcsObj).forEach(([name, props]) => { if(name.startsWith('$')) return; const npcLoc = _.get(props, '位置', ['未知'])[0]; const npcState = _.get(props, '状态', ['正常'])[0]; if(isLocationMatch(npcLoc, plLoc)) { let dName = spoilerGuard[name] || name; nearbyNpcs.push({name: dName, state: npcState}); } }); $('#npc-nearby-list').html(nearbyNpcs.length ? nearbyNpcs.map(n=>`<span class="npc-tag">${n.name}<span class="npc-status">[${n.state}]</span></span>`).join('') : '<div style="opacity:0.5;font-size:11px;">附近无重要人物</div>'); // 地图详情刷新 const activeZone = document.querySelector('.zone.active'); if(activeZone) renderMapInfo(activeZone.getAttribute('data-key'), allVars); } window.selectZone = function(key) { document.querySelectorAll('.zone').forEach(z=>z.classList.remove('active')); event.currentTarget.classList.add('active'); event.currentTarget.setAttribute('data-key', key); renderMapInfo(key); } function renderMapInfo(key, allVars) { if(!allVars) allVars = getAllVariables(); const data = mapData[key]; if(!data) return; const npcsObj = _.get(allVars, 'stat_data.NPC', {}); let activeNpcs = []; Object.entries(npcsObj).forEach(([name, props]) => { if(name.startsWith('$')) return; const loc = _.get(props, '位置', ['未知'])[0]; const state = _.get(props, '状态', ['正常'])[0]; if(isLocInZone(loc, data)) { let dName = spoilerGuard[name] || name; activeNpcs.push({name: dName, state: state}); } }); const npcHtml = activeNpcs.length ? activeNpcs.map(n=>`<span class="npc-tag">${n.name}<span class="npc-status">[${n.state}]</span></span>`).join('') : '<span style="opacity:0.5;font-size:10px;">无活跃信号</span>'; $('#map-detail-content').html(`<div style="font-weight:bold;color:#fff;font-size:12px;border-bottom:1px solid #ffb000;padding-bottom:3px;">${data.name}</div><div style="font-size:10px;margin:3px 0;font-style:italic;">${data.desc}</div><div style="margin-bottom:5px;"><div style="background:rgba(255,176,0,0.2);font-size:10px;font-weight:bold;">地点</div><ul>${data.locs.map(l=>`<li>${l}</li>`).join('')}</ul></div><div><div style="background:rgba(255,176,0,0.2);font-size:10px;font-weight:bold;">活跃人物</div><div style="margin-top:2px;">${npcHtml}</div></div>`); } async function init() { await waitGlobalInitialized('Mvu'); updateMainUI(); eventOn(Mvu.events.VARIABLE_UPDATE_ENDED, () => { updateMainUI(); }); // 折叠逻辑 $(document).off('click', '.section-header').on('click', '.section-header', function() { $(this).toggleClass('open'); $(this).next('.content-box').toggleClass('show'); }); } $(errorCatched(init)); </script> </head> <body class="crt"> <div id="main-terminal"> <div class="header-bar">>>> 蒂亚科恩 OS v6.3 <span class="blink">_</span></div> <div class="section"><div class="section-header open">系统监控 (SYSTEM)</div><div class="content-box show"> <div class="grid-2"><div class="stat-row"><span class="label">日期:</span><span class="value" id="sys-date">--</span></div><div class="stat-row"><span class="label">时间:</span><span class="value" id="sys-time">--</span></div></div> <div class="stat-row"><span class="label">位置:</span><span class="value" id="sys-loc" style="color:#fff;">--</span></div> <div class="stat-row"><span class="label">粉尘:</span><span class="value" id="sys-dust">--</span></div><div class="bar-container"><div class="bar-fill" id="bar-dust" style="width:0%"></div></div> </div></div> <div class="section"><div class="section-header open">任务与通讯 (MISSION)</div><div class="content-box show"> <div style="margin-bottom:5px;"><div class="label" style="color:#ffdf80;border-bottom:1px dotted #ffdf80;">[当前指令]</div><ul id="mission-list"><li>读取中...</li></ul></div> <div><div class="label" style="color:#fff;border-bottom:1px dotted #fff;">[终端邮件]</div><ul id="mail-list"><li>读取中...</li></ul></div> </div></div> <div class="section"><div class="section-header open">个人状态 (STATUS)</div><div class="content-box show"> <div class="stat-row"><span class="label">体力:</span><span class="value" id="pl-hp">--</span></div><div class="bar-container"><div class="bar-fill" id="bar-hp"></div></div> <div class="stat-row"><span class="label">精神:</span><span class="value" id="pl-san">--</span></div><div class="bar-container"><div class="bar-fill" id="bar-san"></div></div> <div class="stat-row" id="pl-ero-box"><span class="label">侵蚀:</span><span class="value" id="pl-ero">--</span></div><div class="bar-container"><div class="bar-fill" id="bar-ero"></div></div> </div></div> <div class="section"><div class="section-header open">周边与地图 (MAP)</div><div class="content-box show"> <div id="npc-nearby-list" style="margin-bottom:10px;"></div> <div class="map-wrapper"> <div class="city-map"> <div class="zone zone-dang" onclick="selectZone('wasteland_n')">北荒</div><div class="zone zone-dang" onclick="selectZone('wasteland_n')">北荒</div><div class="zone zone-dang" onclick="selectZone('wasteland_n')">北荒</div><div class="zone zone-dang" onclick="selectZone('wasteland_n')">北荒</div><div class="zone zone-ind" onclick="selectZone('ind_2')">二工</div><div class="zone zone-ind" onclick="selectZone('ind_2')">二工</div> <div class="zone" onclick="selectZone('garrison')">卫戍</div><div class="zone" onclick="selectZone('wind_district')">高塔</div><div class="zone" onclick="selectZone('outer_admin_n')">文教</div><div class="zone" onclick="selectZone('res_2')">二配</div><div class="zone zone-ind" onclick="selectZone('ind_2')">二工</div><div class="zone zone-ind" onclick="selectZone('ind_2')">二工</div> <div class="zone zone-ind" onclick="selectZone('ind_3')">三工</div><div class="zone" onclick="selectZone('outer_admin_w')">文化</div><div class="zone zone-core" onclick="selectZone('central')">核心</div><div class="zone zone-core" onclick="selectZone('central')">核心</div><div class="zone" onclick="selectZone('outer_admin_e')">缓冲</div><div class="zone zone-dang" onclick="selectZone('wasteland_e')">东荒</div> <div class="zone zone-ind" onclick="selectZone('ind_3')">三工</div><div class="zone" onclick="selectZone('outer_admin_w')">文化</div><div class="zone zone-core" onclick="selectZone('central')">核心</div><div class="zone zone-core" onclick="selectZone('central')">核心</div><div class="zone" onclick="selectZone('outer_admin_e')">缓冲</div><div class="zone zone-dang" onclick="selectZone('wasteland_e')">东荒</div> <div class="zone zone-dang" onclick="selectZone('wasteland_w')">西荒</div><div class="zone" onclick="selectZone('religion')">宗教</div><div class="zone" onclick="selectZone('outer_admin_s')">行南</div><div class="zone" onclick="selectZone('res_3')">三配</div><div class="zone zone-ind" onclick="selectZone('ind_1')">一工</div><div class="zone zone-dang" onclick="selectZone('res_4')">四配</div> <div class="zone zone-dang" onclick="selectZone('wasteland_w')">西荒</div><div class="zone" onclick="selectZone('airport')">空港</div><div class="zone" onclick="selectZone('logistics')">仓储</div><div class="zone" onclick="selectZone('logistics')">仓储</div><div class="zone zone-ind" onclick="selectZone('ind_1')">一工</div><div class="zone zone-dang" onclick="selectZone('res_4')">灰烬</div> </div> <div id="map-detail-content" class="map-info"><div style="text-align:center;margin-top:20px;opacity:0.5;">> 点击区块查看详情 <</div></div> </div> </div></div> <div class="section"><div class="section-header">资产与情报 (ASSETS)</div><div class="content-box hidden-content"> <div class="grid-2"><div class="stat-row"><span class="label">环:</span><span class="value" id="res-money">--</span></div><div class="stat-row"><span class="label">券:</span><span class="value" id="res-ticket">--</span></div></div> <div style="border-top:1px dashed #ffb000;margin:5px 0;"></div> <div style="margin-bottom:5px;"><div class="label">[背包]</div><ul id="bag-list"></ul></div> <div><div class="label">[情报]</div><ul id="intel-list"></ul></div> </div></div> </div> </body> </html> ``` <StatusPlaceHolderImpl/>
