GM 页：顶部合并为一行，赞助页改关于页（三张二维码），标签支持 hash 直达

- #hd 与 #tabs 合并成 #topbar，标签在左、连接状态在右，内容区多出 22px
- 赞助页改为关于页：介绍卡片 + 赞助我们/团队公众号组合面板，三张二维码同一行
- 二维码占位修复（img 在脚本前已 404，补 complete/naturalWidth 兜底）
- 标签支持 #home/#char/#item/#about 直达
- 内容区底部 62→71，修正被日志栏遮住 9px 的问题

gmweb/app.js

@@ -66,6 +66,7 @@
     for (var j = 0; j < panes.length; j++) {
       panes[j].className = 'pane' + (panes[j].id === 'pane-' + name ? ' on' : '');
     }
+    try { if (location.hash !== '#' + name) location.hash = '#' + name; } catch (e) { }
   }
 
   function bindTabs() {
@@ -73,6 +74,13 @@
     for (var i = 0; i < tabs.length; i++) {
       tabs[i].onclick = function () { switchTab(this.getAttribute('data-tab')); };
     }
+    // 支持用 #item / #char / #about / #home 直接打开某一页
+    var h = (location.hash || '').replace('#', '');
+    if (h && document.getElementById('pane-' + h)) switchTab(h);
+    window.onhashchange = function () {
+      var n = (location.hash || '').replace('#', '');
+      if (n && document.getElementById('pane-' + n)) switchTab(n);
+    };
   }
 
   /* ---------------------------------------------------------------- 状态页 */
@@ -419,16 +427,20 @@
   function bindQr(id) {
     var img = $(id);
     if (!img) { return; }
-    img.onerror = function () {
-      var box = this.parentNode;
+    function showMiss() {
+      var box = img.parentNode;
       if (box) { box.className = 'qr-box miss'; }
-      this.style.display = 'none';
-    };
-    img.onload = function () {
-      var box = this.parentNode;
+      img.style.display = 'none';
+    }
+    function showImg() {
+      var box = img.parentNode;
       if (box) { box.className = 'qr-box'; }
-      this.style.display = '';
-    };
+      img.style.display = '';
+    }
+    img.onerror = showMiss;
+    img.onload = showImg;
+    /* 图片是 HTML 里带的 src，可能在脚本执行前就已经 404 了，onerror 来不及触发 */
+    if (img.complete && img.naturalWidth === 0) { showMiss(); }
   }
 
   /* ---------------------------------------------------------------- 启动 */
@@ -501,6 +513,7 @@
     fillTypeOptions();
     bindQr('qr-alipay');
     bindQr('qr-wechat');
+    bindQr('qr-gzh');
 
     renderPicked();
     forceIME();

gmweb/index.html

@@ -4,18 +4,17 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta charset="utf-8">
 <title>GM 控制台</title>
-<link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="/style.css?v=20261105B">
 </head>
 <body>
-<div id="hd">
-  <div id="hd-s"><span id="dot" class="dot off"></span><span id="stat">连接中…</span></div>
-</div>
-
+<div id="topbar">
   <div id="tabs">
     <a class="tab on" data-tab="home" href="javascript:void(0)">状态</a>
     <a class="tab" data-tab="char" href="javascript:void(0)">角色</a>
     <a class="tab" data-tab="item" href="javascript:void(0)">发物品</a>
-  <a class="tab" data-tab="donate" href="javascript:void(0)">赞助</a>
+    <a class="tab" data-tab="about" href="javascript:void(0)">关于</a>
+  </div>
+  <div id="hd-s"><span id="dot" class="dot off"></span><span id="stat">连接中…</span></div>
 </div>
 
 <div id="body">
@@ -130,10 +129,19 @@
     <div class="hint">强化 0-31、增幅等级 0-31、锻造 0-8。增幅填了就直接覆盖强化（红字装不能同时白字强化），非装备行忽略这些值。</div>
   </div>
 
-  <div class="pane" id="pane-donate">
-    <div class="sec">赞助支持</div>
-    <div class="hint">服务器长期免费维护。如果玩得开心，可以扫码赞助一点，金额随意，感谢支持。</div>
-    <div class="qr-wrap">
+  <div class="pane" id="pane-about">
+    <div class="about-inner">
+    <div class="about-card">
+      <div class="about-name">地下城与勇士 · 九零轮回单机</div>
+      <div class="about-line">汉服电脑宅 · 灵宝小竹模拟器</div>
+      <div class="about-line">由灵宝仙尊联合淡竹茹开发，由汉服电脑宅团队开发维护</div>
+      <div class="about-line">本模拟器资源禁止倒卖，请到官方微信公众号或社群下载</div>
+    </div>
+
+    <div class="cols">
+      <div class="box box-l">
+        <div class="box-hd">赞助我们</div>
+        <div class="box-bd">
           <div class="qr-card">
             <div class="qr-title">支付宝</div>
             <div class="qr-box"><img id="qr-alipay" src="/qr/alipay.png" alt="支付宝收款码">
@@ -146,14 +154,31 @@
               <div class="qr-miss">二维码未配置<div class="qr-path">gmweb\qr\wechat.png</div></div>
             </div>
           </div>
+          <div class="box-note">金额随意，感谢支持。扫码后备注游戏名，方便记录。</div>
         </div>
-    <div class="hint">把收款码图片按上面的文件名放进 gmweb\qr\ 目录，刷新这一页就会显示；换成 jpg 也可以，改一下上面的文件名后缀即可。</div>
+      </div>
+
+      <div class="box box-r">
+        <div class="box-hd">团队公众号</div>
+        <div class="box-bd">
+          <div class="qr-card">
+            <div class="qr-title">扫码关注</div>
+            <div class="qr-box"><img id="qr-gzh" src="/qr/gzh.jpg" alt="团队公众号二维码">
+              <div class="qr-miss">二维码未配置<div class="qr-path">gmweb\qr\gzh.jpg</div></div>
+            </div>
+          </div>
+          <div class="box-note">更新公告 · 开服时间</div>
+        </div>
+      </div>
+    </div>
+    </div>
+
   </div>
 
 </div>
 
 <div id="log"></div>
 
-<script src="/app.js"></script>
+<script src="/app.js?v=20261105B"></script>
 </body>
 </html>

gmweb/qr/放收款码到这里.txt

@@ -1,11 +1,11 @@
-把收款码图片放到这个目录，文件名固定为：
+这个目录存放三张二维码图片，文件名与页面一一对应（已配置好，直接覆盖同名文件即可换图）：
 
-    alipay.png   支付宝收款码
-    wechat.png   微信收款码
+    alipay.png   支付宝收款码        （关于页 · 赞助我们 · 左）
+    wechat.png   微信收款码          （关于页 · 赞助我们 · 中）
+    gzh.jpg      团队公众号二维码    （关于页 · 团队公众号 · 右）
 
 说明：
-- 建议正方形图片（页面按 194x194 显示，非正方形会被拉伸）
-- 支持 png / jpg / jpeg / gif / bmp / webp / svg
-- 用 jpg 的话，把 gmweb\index.html 里对应 <img src="/qr/alipay.png"> 的后缀改成 .jpg 即可
-- 换图后刷新控制台页面（标题栏的刷新按钮）就能看到，不用重启服务
-- 图片没放时，赞助页显示「二维码未配置」占位，不影响其他功能
+- 三张图都按正方形显示（页面 132x132 等比缩放），原图 600x600 / 430x430 都正常，非正方形会被拉伸变形
+- 支持 png / jpg / jpeg / gif / bmp / webp；若换成别的后缀，需同步改 gmweb\index.html 里对应 <img src="/qr/xxx"> 的后缀
+- 换图后刷新控制台页面（标题栏刷新按钮或 Ctrl+F5）就能看到，不用重启服务
+- 图片缺失时，关于页会显示「二维码未配置 + 文件路径」的占位，不影响其他功能

gmweb/style.css

@@ -5,25 +5,32 @@ html, body {
   font: 12px/1.5 "Microsoft YaHei", "SimSun", Tahoma, sans-serif;
   overflow: hidden;
 }
-#hd {
-  height: 26px; padding: 0 10px;
-  background: #1d2029; border-bottom: 1px solid #2b3040;
-  line-height: 26px;
+/* 顶部一行：左边页面切换，右边连接状态（绿点 + 文字） */
+#topbar {
+  height: 32px; padding-left: 4px;
+  background: #191c24; border-bottom: 1px solid #2b3040;
+  overflow: hidden;
+}
+#tabs { float: left; }
+#hd-s {
+  float: right; height: 31px; line-height: 31px;
+  padding: 0 12px; color: #8d94a6;
+  border-left: 1px solid #262b36;
 }
-#hd-s { float: right; color: #8d94a6; }
 .dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; margin-right: 6px; }
 .dot.on { background: #4ec46a; }
 .dot.off { background: #b04a4a; }
 
-#tabs { height: 28px; background: #191c24; border-bottom: 1px solid #2b3040; padding-left: 4px; }
 .tab {
-  float: left; padding: 0 14px; line-height: 28px; color: #98a0b3;
+  display: block; float: left; padding: 0 14px;
+  height: 29px; line-height: 29px;
+  color: #98a0b3;
   text-decoration: none; border-bottom: 2px solid transparent;
 }
 .tab:hover { color: #d8dbe2; }
 .tab.on { color: #e8c979; border-bottom-color: #e8c979; background: #20242e; }
 
-#body { position: absolute; top: 55px; bottom: 62px; left: 0; right: 0; overflow: auto; }
+#body { position: absolute; top: 33px; bottom: 71px; left: 0; right: 0; overflow: auto; }
 .pane { display: none; padding: 10px; }
 .pane.on { display: block; }
 
@@ -111,18 +118,48 @@ select.inp { padding: 3px 2px; }
   background: #e8c979; color: #1a1e27; border-radius: 2px;
 }
 
-/* 赞助页：收款码（IE11 不支持 flex，用 float 排两列） */
-.qr-wrap { overflow: hidden; margin-top: 10px; }
+/* 关于页：整体是一列居中内容（介绍卡片 + 组合面板），宽度固定 534 */
+/* 关于页整块在可视区里垂直居中：绝对定位 + translateY（IE11 支持 transform） */
+#pane-about.on { display: block; position: relative; height: 100%; box-sizing: border-box; }
+#pane-about .about-inner {
+  position: absolute; top: 50%; left: 10px; right: 10px;
+  -ms-transform: translateY(-50%); transform: translateY(-50%);
+}
+.about-card {
+  width: 534px; margin: 0 auto; padding: 10px 12px; box-sizing: border-box;
+  background: #1a1e27; border: 1px solid #2b3040;
+}
+.about-name { color: #e8c979; font-size: 14px; letter-spacing: 1px; }
+.about-line { color: #8d94a6; margin-top: 4px; }
+
+.box { margin-top: 12px; border: 1px solid #2b3040; background: #171b23; }
+/* 两个分组框合成一个整体面板：外框统一，中间一条竖线分隔 */
+.cols {
+  width: 534px; margin: 12px auto 0;
+  border: 1px solid #2b3040; background: #171b23; overflow: hidden;
+}
+.cols .box { margin-top: 0; min-height: 264px; float: left; border: 0; background: transparent; box-sizing: border-box; }
+.cols .box-l { width: 353px; }
+.cols .box-r { width: 179px; border-left: 1px solid #3f4759; background: #14171d; }
+.box-hd {
+  height: 26px; line-height: 26px; padding: 0 10px;
+  background: #1d2230; border-bottom: 1px solid #2b3040;
+  color: #e8c979; letter-spacing: 1px;
+}
+.box-bd { padding: 10px; overflow: hidden; }
+.box-note { clear: both; color: #666e80; font-size: 11px; padding-top: 8px; }
+
 .qr-card {
-  float: left; width: 216px; margin: 0 14px 10px 0;
-  background: #1a1e27; border: 1px solid #2b3040; padding: 10px;
+  float: left; width: 158px; margin: 0 8px 0 0; box-sizing: border-box;
+  background: #1a1e27; border: 1px solid #2b3040; padding: 8px;
 }
 .qr-title { color: #e8c979; letter-spacing: 1px; margin-bottom: 8px; }
 .qr-box {
-  width: 194px; height: 194px; position: relative; overflow: hidden;
-  background: #0f1116; border: 1px dashed #3a4154; text-align: center;
+  width: 140px; height: 140px; position: relative; overflow: hidden; box-sizing: border-box;
+  background: #0f1116; border: 1px dashed #3a4154; padding: 3px; text-align: center;
 }
-.qr-box img { display: block; width: 194px; height: 194px; }
-.qr-miss { display: none; padding-top: 72px; color: #666e80; line-height: 1.8; }
+.qr-box img { display: block; width: 132px; height: 132px; background: #fff; }
+.qr-miss { display: none; padding-top: 44px; color: #666e80; line-height: 1.8; }
 .qr-box.miss .qr-miss { display: block; }
 .qr-path { color: #4c5365; font-size: 11px; margin-top: 2px; }
+