Merge pull request '面板调整' (#31) from why_ga into main

Reviewed-on: #31

world.html

@@ -245,6 +245,47 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
 .toolbar-toggle{ background:rgba(139,92,246,.2); border-color:rgba(139,92,246,.5); color:#c4b5fd; }
 .toolbar-toggle:hover{ background:linear-gradient(135deg, rgba(139,92,246,.4), rgba(74,175,255,.3)); border-color:rgba(139,92,246,.7); color:#fff; }
 
+/* ===== 任务侧栏（左侧固定面板，独立于通用 modal） ===== */
+.task-side-panel{
+  position: fixed; left: max(14px, env(safe-area-inset-left)); top: calc(58px + env(safe-area-inset-top) + 12px + 100px);
+  width: 320px;
+  /* 高度限制：可用高度(减 topBar58 + bottomBar72 + padding24 + 安全区)再减半，避免盖住聊天框 */
+  max-height: calc((100vh - 58px - 72px - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2);
+  z-index: 250;   /* 高于 #microView(200)，进入微观世界也能看到；低于 #dataPanel(260) 与 #appModal(400) */
+  display:flex; flex-direction: column;
+  background: linear-gradient(180deg, rgba(17,23,42,.96), rgba(10,14,26,.96));
+  border: 1px solid rgba(139,92,246,.35); border-radius: 14px;
+  box-shadow: 0 12px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
+  backdrop-filter: blur(8px);
+  font-size: 13px; color: #cfd5ea;
+}
+.task-side-panel[hidden]{ display:none !important; }
+.tsp-head{
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 14px; border-bottom: 1px solid rgba(139,92,246,.22); flex: 0 0 auto;
+}
+.tsp-title{ font-size: 15px; font-weight: 700; color: #fff; margin: 0; letter-spacing: .5px; }
+.tsp-close{
+  width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14);
+  background: rgba(255,80,80,.12); color: #ffaaaa;
+  font-size: 14px; font-weight: 700; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: background .15s, transform .12s;
+}
+.tsp-close:hover{ background: rgba(255,80,80,.28); color: #fff; transform: scale(1.06); }
+.tsp-close:active{ transform: scale(.94); }
+.tsp-body{ flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 14px; scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.35) rgba(255,255,255,.04); }
+.tsp-body::-webkit-scrollbar{ width: 6px; }
+.tsp-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 4px; }
+.tsp-body::-webkit-scrollbar-thumb{ background: rgba(139,92,246,.35); border-radius: 4px; }
+.tsp-body::-webkit-scrollbar-thumb:hover{ background: rgba(139,92,246,.55); }
+@media (max-width: 768px){
+  .task-side-panel{ width: min(300px, calc(100vw - 28px)); }
+}
+@media (max-width: 420px){
+  .task-side-panel{ left: 8px; right: 8px; width: auto; max-height: 50vh; }
+}
+
 /* 世界等级经验条（位于 bottomBar 内最左侧，加大加清晰） */
 #worldExpBarWrap{
   flex:0 0 auto; width:520px; height:100%;
@@ -1173,7 +1214,7 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
     <div id="clockLabel">清晨 07:30</div>
     <div id="calendarLabel">星元 1年 · 春</div>
   </div>
-  <button class="topBtn" id="talentBtn" hidden title="我的天赋">🌟 天赋</button>
+  <!-- 天赋按钮已迁移至右上汉堡菜单（#sceneToolbar > #talentBtn），保持 id 不变避免影响 JS 引用 -->
   <div class="userArea" id="userArea" hidden>
     <div class="ua-trigger" id="uaTrigger">
       <span class="ua-avatar">●</span>
@@ -1219,6 +1260,10 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
   <button class="top-icon toolbar-toggle" id="btnToolbarToggle" type="button" title="展开/收起菜单">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg>
   </button>
+  <button class="top-icon" id="talentBtn" hidden title="我的天赋">
+    <span style="font-size:24px;line-height:1;">🌟</span>
+    <span class="top-icon-label">天赋</span>
+  </button>
   <button class="top-icon toolbar-core" id="btnTask" type="button" title="任务">
     <img src="assets/icons/task/task.png?v=2" alt="任务">
     <span class="top-icon-label">任务</span>
@@ -1316,6 +1361,15 @@ body { background: #0a0e17; overflow: hidden; font-family: 'Microsoft YaHei', sa
   </div>
 </div>
 
+<!-- 任务面板（左侧侧栏，固定在宏观世界地图左上空位；不受其他面板干扰、需主动关闭） -->
+<aside id="taskSidePanel" class="task-side-panel" hidden>
+  <header class="tsp-head">
+    <h3 class="tsp-title">任务</h3>
+    <button class="tsp-close" id="taskSideClose" type="button" title="关闭任务面板" aria-label="关闭任务面板">✕</button>
+  </header>
+  <div class="tsp-body" id="taskSideBody"></div>
+</aside>
+
 <!-- 世界切换导航（五层：星空 / 天空 / 大地 / 地下 / 地心） -->
 <div id="worldNav">
   <div class="wn-item" data-world="star"><span class="wn-icon">✦</span><span class="wn-text">星空</span></div>
@@ -2830,16 +2884,25 @@ async function openTaskPanel() {
   // 首次进入可能任务数据尚未拉取，先确保就绪；再发射"打开面板"事件（ch1_welcome 由此变可领取）
   if (!taskData) await fetchTasks();
   await emitTaskEvent('panel_opened');
-  const body = `<div id="taskPanelBody">${renderTaskPanel()}</div>
+  const sideBody = document.getElementById('taskSideBody');
+  if (sideBody) {
+    sideBody.innerHTML = `<div id="taskPanelBody">${renderTaskPanel()}</div>
       <div style="text-align:center;color:#66788a;font-size:12px;margin-top:10px;">完成主线任务可获经验与金币，推动世界成长。</div>`;
-  openAppModal('任务', body);
-  // 绑定领取按钮（setTimeout 等待 modal 注入 DOM）
+  }
+  const panel = document.getElementById('taskSidePanel');
+  if (panel) panel.hidden = false;
+  setMenuOpen(false);
+  // 绑定领取按钮（setTimeout 等待 DOM 注入）
   setTimeout(() => {
     document.querySelectorAll('.task-claim-btn').forEach(btn => {
       btn.addEventListener('click', () => claimTask(btn.getAttribute('data-code'), btn));
     });
   }, 30);
 }
+function closeTaskPanel() {
+  const panel = document.getElementById('taskSidePanel');
+  if (panel) panel.hidden = true;
+}
 
 async function claimTask(code, btn) {
   try {
@@ -8435,7 +8498,14 @@ if (typeof fitWorld === 'function') fitWorld();
         document.getElementById('sceneToolbar').classList.toggle('collapsed');
       });
       const btnTask = document.getElementById('btnTask');
-      if (btnTask) btnTask.addEventListener('click', () => { openTaskPanel(); });
+      if (btnTask) btnTask.addEventListener('click', () => {
+        // 任务面板是左侧常驻侧栏：再次点击同一按钮可关闭（toggle）
+        const panel = document.getElementById('taskSidePanel');
+        if (panel && !panel.hidden) { closeTaskPanel(); return; }
+        openTaskPanel();
+      });
+      const taskSideClose = document.getElementById('taskSideClose');
+      if (taskSideClose) taskSideClose.addEventListener('click', () => closeTaskPanel());
       const btnMall = document.getElementById('btnMall');
       if (btnMall) btnMall.addEventListener('click', () => {
         openAppModal('商城', '<div style="text-align:center;padding:24px;color:#8899aa;font-size:13px;">商城系统即将开放<br><br>可购买皮肤、道具、加速器与会员服务。</div>');