Update public/index.html

public/index.html

@@ -12,6 +12,7 @@
     *{box-sizing:border-box}
     html,body{height:100%;margin:0;overflow:hidden;font-family:Inter,"Noto Sans SC",system-ui}
     body{background:var(--bg);color:var(--text)}
+    input[type="checkbox"], input[type="radio"] { accent-color: #22c55e; } /* 选中绿色 */
 
     .app{height:100%;display:grid;grid-template-columns:320px 1fr;transition:.2s}
     .app.debug-open{grid-template-columns:320px 1fr 360px}
@@ -61,17 +62,23 @@
     .md p{margin:.35em 0}
     .md img{max-width:320px;height:auto;border-radius:10px;border:1px solid #d9e3f3;cursor:zoom-in}
     .md pre{margin:.5em 0}
+    .md a{color:#2563eb}
+
     .admon{border-left:4px solid #3b82f6;background:#eff6ff;border-radius:8px;padding:8px 10px;margin:.5em 0}
     .admon.tip{border-color:#22c55e;background:#f0fdf4}
+    .admon.note{border-color:#3b82f6;background:#eff6ff}
     .admon.warn{border-color:#f59e0b;background:#fffbeb}
     .admon.err{border-color:#ef4444;background:#fef2f2}
     .admon.important{border-color:#8b5cf6;background:#f5f3ff}
+    .admon-title{font-weight:700;margin-bottom:4px}
+
     .code-wrap{border:1px solid #d8e3f5;border-radius:10px;background:var(--code);margin:.45em 0;overflow:hidden}
     .code-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:#ebf2ff;border-bottom:1px solid #d8e4fb;font-size:12px}
     .code-actions button{border:1px solid #c7d8f7;background:#fff;border-radius:7px;padding:3px 7px;cursor:pointer;margin-left:6px}
     .code-body{padding:8px 10px;overflow:auto;max-height:300px}
     .code-collapsed .code-body{display:none}
     .inline-code{background:#eaf0ff;border:1px solid #d2ddff;padding:1px 6px;border-radius:6px;cursor:pointer}
+
     .wx-audio{display:inline-flex;align-items:center;gap:8px;background:#e7f1ff;border:1px solid #b8d2ff;border-radius:999px;padding:7px 12px;cursor:pointer}
     .wx-audio.playing{background:#d7eaff}
 
@@ -91,11 +98,12 @@
 
     .modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:60}
     .modal.show{display:flex}
-    .modal-card{width:min(92vw,700px);max-height:88vh;background:#fff;border-radius:14px;padding:14px;overflow:auto}
+    .modal-card{width:min(92vw,760px);max-height:88vh;background:#fff;border-radius:14px;padding:14px;overflow:auto}
     .field{margin-bottom:10px}
     .field label{display:block;font-size:12px;color:#64748b;margin-bottom:5px}
     .field input,.field select{width:100%;padding:9px 10px;border:1px solid #cbd8ed;border-radius:10px}
     .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
+
     #mediaTop{position:absolute;top:16px;right:24px;display:flex;gap:10px}
     #mediaTop button{border:none;border-radius:10px;padding:9px 11px;cursor:pointer}
     #mediaContent img,#mediaContent video{max-width:90vw;max-height:84vh;border-radius:12px}
@@ -133,10 +141,12 @@
 
       <div class="composer">
         <div id="preview" class="preview"></div>
+
         <div class="mode-row">
           <button id="modeText" class="mode-btn active">文字模式</button>
           <button id="modeVoice" class="mode-btn">说话模式</button>
         </div>
+
         <div id="textMode">
           <div class="input-row">
             <label class="btn">📎<input id="fileInput" type="file" multiple accept="image/*,video/*,audio/*" style="display:none"></label>
@@ -144,6 +154,7 @@
             <button id="sendBtn" class="send">➤</button>
           </div>
         </div>
+
         <div id="voiceMode" style="display:none">
           <button id="holdBtn" class="hold">按住说话，松开发送</button>
         </div>
@@ -159,21 +170,41 @@
     </aside>
   </div>
 
+  <!-- 设置 -->
   <div id="settingsModal" class="modal">
     <div class="modal-card">
-      <h3 style="margin-top:0">设置</h3>
+      <h3 style="margin-top:0">设置（本地缓存 + 运行期配置）</h3>
+
       <div class="field">
-        <label>连接密码（对应 CONNECT_PASSWORD）</label>
+        <label>连接密码（CONNECT_PASSWORD）</label>
         <input id="setPassword" />
       </div>
+
       <div class="field">
-        <label>前端调试日志</label>
-        <select id="setDebug"><option value="true">开启</option><option value="false">关闭</option></select>
+        <label>机器人用户名（botUsername）</label>
+        <input id="setBotUsername" />
       </div>
+
+      <div class="field">
+        <label>SSE拉流间隔（ms）</label>
+        <input id="setStreamInterval" type="number" min="800" step="100" />
+      </div>
+
       <div class="field">
-        <label>允许高级HTML嵌入</label>
-        <select id="setUnsafe"><option value="true">开启</option><option value="false">关闭</option></select>
+        <label>默认消息条数（limit）</label>
+        <input id="setMessageLimit" type="number" min="20" step="10" />
+      </div>
+
+      <div class="field" style="display:flex;align-items:center;gap:8px">
+        <input id="setDebug" type="checkbox" />
+        <label for="setDebug" style="margin:0">前端调试日志</label>
+      </div>
+
+      <div class="field" style="display:flex;align-items:center;gap:8px">
+        <input id="setUnsafe" type="checkbox" />
+        <label for="setUnsafe" style="margin:0">允许高级HTML嵌入（iframe/svg等）</label>
       </div>
+
       <div class="modal-actions">
         <button id="setCancel" class="btn">取消</button>
         <button id="setSave" class="btn" style="background:#3498ff;color:#fff;border:none">保存</button>
@@ -181,6 +212,7 @@
     </div>
   </div>
 
+  <!-- 媒体 -->
   <div id="mediaModal" class="modal">
     <div id="mediaTop">
       <a id="mediaDownload" href="#" download target="_blank"><button>下载</button></a>
@@ -190,58 +222,86 @@
   </div>
 
   <script>
-    // ---------- basic ----------
     const appEl = document.getElementById('app');
     const S = {
-      cfg:{ botUsername:'openman', needPassword:false },
-      settings:{
+      cfg: { runtimeConfig: { botUsername: 'openman', streamInterval: 1500, defaultMessageLimit: 120 } },
+      settings: {
         connectPassword: localStorage.getItem('connectPassword') || '',
         debugLogs: localStorage.getItem('debugLogs') || 'true',
-        allowUnsafe: localStorage.getItem('allowUnsafe') || 'true'
+        allowUnsafe: localStorage.getItem('allowUnsafe') || 'true',
+        botUsername: localStorage.getItem('botUsername') || '',
+        streamInterval: localStorage.getItem('streamInterval') || '',
+        messageLimit: localStorage.getItem('messageLimit') || ''
       },
-      channels:[], current:null, files:[], es:null,
-      msgStore:new Map(), rec:null, recording:false, chunks:[], activeAudio:null
+      channels: [],
+      current: null,
+      files: [],
+      es: null,
+      msgStore: new Map(),
+      rec: null,
+      recording: false,
+      chunks: [],
+      activeAudio: null
     };
+
     const E = {
-      left: leftPanel, right:rightPanel, messages, channelList, channelCount, searchInput,
+      left: leftPanel, right: rightPanel, messages, channelList, channelCount, searchInput,
       headName, headAvatar, input, fileInput, preview, logs,
       modeText, modeVoice, textMode, voiceMode, holdBtn,
       settingsModal, mediaModal, mediaContent, mediaDownload
     };
 
-    function log(type,msg){
-      if(type==='info' && S.settings.debugLogs!=='true') return;
-      const t=new Date().toLocaleTimeString('zh-CN',{hour12:false});
-      const p=type==='error'?'❌':type==='warn'?'⚠️':'📌';
-      const line=`[${t}] ${p} ${msg}`;
-      (type==='error'?console.error:console.log)(line);
+    function log(type, msg){
+      if(type === 'info' && S.settings.debugLogs !== 'true') return;
+      const t = new Date().toLocaleTimeString('zh-CN',{hour12:false});
+      const p = type === 'error' ? '❌' : type === 'warn' ? '⚠️' : '📌';
+      const line = `[${t}] ${p} ${msg}`;
+      (type === 'error' ? console.error : console.log)(line);
       E.logs.textContent += line + '\n';
       E.logs.scrollTop = E.logs.scrollHeight;
     }
 
-    async function apiFetch(url,opt={}){
-      const h = new Headers(opt.headers||{});
-      if(S.settings.connectPassword) h.set('x-connect-password', S.settings.connectPassword);
-      const r = await fetch(url,{...opt,headers:h});
-      if(r.status===401) throw new Error('连接密码错误或未提供');
-      return r;
+    async function apiFetch(url, opt={}){
+      const headers = new Headers(opt.headers || {});
+      if(S.settings.connectPassword) headers.set('x-connect-password', S.settings.connectPassword);
+      const rsp = await fetch(url, { ...opt, headers });
+      if(rsp.status === 401) throw new Error('连接密码错误或未提供');
+      return rsp;
     }
 
-    function ensureStore(cid){
-      if(!S.msgStore.has(cid)) S.msgStore.set(cid,{ids:new Set(),lastId:null});
-      return S.msgStore.get(cid);
-    }
     function escapeHtml(s=''){return String(s).replace(/[&<>"']/g,m=>({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[m]))}
-    function nearBottom(el,th=120){return el.scrollHeight-el.scrollTop-el.clientHeight<th}
+    function ensureStore(cid){ if(!S.msgStore.has(cid)) S.msgStore.set(cid,{ids:new Set(),lastId:null}); return S.msgStore.get(cid); }
+    function nearBottom(el,th=120){ return el.scrollHeight - el.scrollTop - el.clientHeight < th; }
     function extType(url=''){
-      const u=url.toLowerCase();
+      const u = url.toLowerCase();
       if(/\.(png|jpe?g|gif|webp|svg)(\?|#|$)/.test(u)) return 'image';
       if(/\.(mp4|webm|mov|m4v)(\?|#|$)/.test(u)) return 'video';
       if(/\.(mp3|wav|ogg|m4a|aac|flac|webm)(\?|#|$)/.test(u)) return 'audio';
       return 'file';
     }
 
-    // ---------- CDN loader (multi mirror, fail-safe) ----------
+    // 时间格式：yyyy.MM.dd HH:mm
+    function formatTimeFromMessage(m){
+      const candidates = [m.timestamp, m.created_at, m.updated_at];
+      let d = null;
+      for(const c of candidates){
+        if(c == null) continue;
+        if(typeof c === 'number' || /^\d+$/.test(String(c))){
+          let n = Number(c);
+          if(n < 1e11) n = n * 1000; // 秒转毫秒
+          const t = new Date(n);
+          if(!isNaN(t.getTime())) { d = t; break; }
+        }else{
+          const t = new Date(c);
+          if(!isNaN(t.getTime())) { d = t; break; }
+        }
+      }
+      if(!d) d = new Date();
+      const pad = x => String(x).padStart(2,'0');
+      return `${d.getFullYear()}.${pad(d.getMonth()+1)}.${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    }
+
+    // --- CDN 多镜像加载 ---
     function loadScriptAny(urls){
       return new Promise((resolve,reject)=>{
         let i=0;
@@ -258,7 +318,6 @@
     }
 
     async function loadEnhancers(){
-      // 不阻塞主功能
       await Promise.allSettled([
         window.marked ? Promise.resolve() : loadScriptAny([
           'https://cdn.jsdelivr.net/npm/marked/marked.min.js',
@@ -276,28 +335,47 @@
         ])
       ]);
       if(window.mermaid) mermaid.initialize({startOnLoad:false,theme:'default'});
-      log('info','渲染增强库状态: marked=' + !!window.marked + ', purify=' + !!window.DOMPurify + ', mermaid=' + !!window.mermaid);
-    }
+      log('info', `渲染增强加载: marked=${!!window.marked}, purify=${!!window.DOMPurify}, mermaid=${!!window.mermaid}`);
+    }
+
+    // --- Markdown 渲染 ---
+    function preprocessAdmon(md=''){
+      let s = String(md);
+
+      // blockquote版:
+      // > [!IMPORTANT]
+      // > **任务...**
+      s = s.replace(
+        /(^|\n)>\s*\[!(TIP|NOTE|IMPORTANT|WARNING|CAUTION|ERROR)\]\s*\n((?:>\s?.*(?:\n|$))*)/gim,
+        (_, pfx, type, body) => {
+          const t = type.toUpperCase();
+          const cls = t==='TIP'?'tip':t==='NOTE'?'note':(t==='WARNING'||t==='CAUTION')?'warn':t==='IMPORTANT'?'important':'err';
+          const content = body.replace(/^>\s?/gm,'').trim();
+          return `${pfx}<div class="admon ${cls}"><div class="admon-title">${t}</div>\n${content}\n</div>\n`;
+        }
+      );
+
+      // 单行版 [!TIP] text
+      s = s.replace(
+        /^\s*\[!(TIP|NOTE|IMPORTANT|WARNING|CAUTION|ERROR)\]\s*(.*)$/gim,
+        (_, type, rest) => {
+          const t = type.toUpperCase();
+          const cls = t==='TIP'?'tip':t==='NOTE'?'note':(t==='WARNING'||t==='CAUTION')?'warn':t==='IMPORTANT'?'important':'err';
+          return `<div class="admon ${cls}"><div class="admon-title">${t}</div>${rest || ''}</div>`;
+        }
+      );
 
-    // ---------- render ----------
-    function preprocessAdmon(t=''){
-      return String(t).replace(/^\s*\[!(TIP|NOTE|WARNING|CAUTION|IMPORTANT|ERROR)\]\s*(.*)$/gmi,(_,k,b)=>{
-        const K=k.toUpperCase();
-        const cls = K==='TIP'?'tip':K==='NOTE'?'note':(K==='WARNING'||K==='CAUTION')?'warn':K==='IMPORTANT'?'important':'err';
-        return `<div class="admon ${cls}"><b>${K}</b> ${b||''}</div>`;
-      });
+      return s;
     }
 
     function simpleMd(t=''){
-      // 无 marked 时的最小可用渲染
-      let s=escapeHtml(preprocessAdmon(t));
-      s=s.replace(/```(\w+)?\n([\s\S]*?)```/g,(_,lang,code)=>{
-        return `<pre><code class="language-${escapeHtml(lang||'text')}">${escapeHtml(code)}</code></pre>`;
-      });
-      s=s.replace(/`([^`\n]+)`/g,'<code>$1</code>');
-      s=s.replace(/!\[([^\]]*)\]\(([^)]+)\)/g,'<img alt="$1" src="$2">');
-      s=s.replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener">$1</a>');
-      s=s.replace(/\n/g,'<br>');
+      let s = escapeHtml(preprocessAdmon(t));
+      s = s.replace(/```(\w+)?\n([\s\S]*?)```/g, (_,lang,code)=>
+        `<pre><code class="language-${escapeHtml(lang||'text')}">${escapeHtml(code)}</code></pre>`);
+      s = s.replace(/`([^`\n]+)`/g,'<code>$1</code>');
+      s = s.replace(/!\[([^\]]*)\]\(([^)]+)\)/g,'<img alt="$1" src="$2">');
+      s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener">$1</a>');
+      s = s.replace(/\n/g,'<br>');
       return s;
     }
 
@@ -305,7 +383,7 @@
       const src = preprocessAdmon(raw);
       let html = '';
       if(window.marked){
-        marked.setOptions({gfm:true,breaks:true,mangle:false,headerIds:false});
+        marked.setOptions({ gfm:true, breaks:true, mangle:false, headerIds:false });
         html = marked.parse(src);
       }else{
         html = simpleMd(src);
@@ -321,20 +399,18 @@
     }
 
     async function enhance(root){
-      // inline code copy
       root.querySelectorAll('code').forEach(code=>{
-        const inPre=code.parentElement && code.parentElement.tagName==='PRE';
+        const inPre = code.parentElement && code.parentElement.tagName === 'PRE';
         if(!inPre){
           code.classList.add('inline-code');
-          code.onclick=async()=>{await navigator.clipboard.writeText(code.textContent||'');log('info','行内代码已复制')};
+          code.onclick = async()=>{ await navigator.clipboard.writeText(code.textContent||''); log('info','行内代码已复制'); };
         }
       });
 
-      // code block toolbar
       root.querySelectorAll('pre > code').forEach(code=>{
-        const pre=code.parentElement;
-        const lang=(code.className||'').replace('language-','')||'text';
-        const raw=code.textContent||'';
+        const pre = code.parentElement;
+        const lang = (code.className||'').replace('language-','')||'text';
+        const raw = code.textContent||'';
 
         if(lang.toLowerCase()==='mermaid' && window.mermaid){
           const id='mmd_'+Math.random().toString(36).slice(2);
@@ -364,7 +440,7 @@
         wrap.querySelector('.save').onclick=()=>{
           const a=document.createElement('a');
           a.href=URL.createObjectURL(new Blob([raw],{type:'text/plain;charset=utf-8'}));
-          a.download=`code_${Date.now()}.${lang||'txt'}`; a.click();
+          a.download=`code_${Date.now()}.${lang||'txt'}`;a.click();
           setTimeout(()=>URL.revokeObjectURL(a.href),1200);
         };
         wrap.querySelector('.toggle').onclick=(e)=>{
@@ -373,16 +449,19 @@
         };
       });
 
-      // links -> media
       root.querySelectorAll('a[href]').forEach(a=>{
         const href=a.getAttribute('href')||'';
         const t=extType(href);
         if(t==='video'){
-          const v=document.createElement('video'); v.src=href; v.controls=true; v.style.maxWidth='340px'; v.style.borderRadius='10px'; a.replaceWith(v);
+          const v=document.createElement('video');
+          v.src=href; v.controls=true; v.style.maxWidth='340px'; v.style.borderRadius='10px';
+          a.replaceWith(v);
         }else if(t==='audio'){
           const audio=new Audio(href);
-          const wx=document.createElement('span'); wx.className='wx-audio'; wx.innerHTML='🔊 语音';
-          wx.onclick=()=>toggleWxAudio(wx,audio); a.replaceWith(wx);
+          const wx=document.createElement('span');
+          wx.className='wx-audio'; wx.innerHTML='🔊 语音';
+          wx.onclick=()=>toggleWxAudio(wx,audio);
+          a.replaceWith(wx);
         }
       });
 
@@ -391,16 +470,18 @@
 
     function toggleWxAudio(wx,audio){
       if(S.activeAudio && S.activeAudio!==audio) S.activeAudio.pause();
-      if(audio.paused){audio.play();wx.classList.add('playing');S.activeAudio=audio;}
-      else {audio.pause();wx.classList.remove('playing');}
+      if(audio.paused){ audio.play(); wx.classList.add('playing'); S.activeAudio=audio; }
+      else { audio.pause(); wx.classList.remove('playing'); }
       audio.onended=()=>wx.classList.remove('playing');
       audio.onpause=()=>wx.classList.remove('playing');
       audio.onplay=()=>wx.classList.add('playing');
     }
 
     function openMedia(url,type){
-      E.mediaContent.innerHTML = type==='image' ? `<img src="${escapeHtml(url)}">` : `<video src="${escapeHtml(url)}" controls autoplay></video>`;
-      E.mediaDownload.href=url;
+      E.mediaContent.innerHTML = type==='image'
+        ? `<img src="${escapeHtml(url)}">`
+        : `<video src="${escapeHtml(url)}" controls autoplay></video>`;
+      E.mediaDownload.href = url;
       E.mediaModal.classList.add('show');
     }
 
@@ -410,30 +491,29 @@
       if(typeof m?.data?.content==='string') return m.data.content;
       return '';
     }
-    function msgTime(m){
-      const t=m.timestamp||m.created_at||m.updated_at||Date.now();
-      const d=new Date(Number(t));
-      return isNaN(d.getTime())?String(t):d.toLocaleString('zh-CN',{hour12:false});
-    }
+
     function isSelf(m){
-      const n=(m?.user?.name||'').toLowerCase();
-      if(m.role==='user') return true;
-      if(n && n!==S.cfg.botUsername.toLowerCase()) return true;
+      const botName = (S.settings.botUsername || S.cfg?.runtimeConfig?.botUsername || 'openman').toLowerCase();
+      const n = (m?.user?.name || '').toLowerCase();
+      if(m.role === 'user') return true;
+      if(n && n !== botName) return true;
       return false;
     }
 
     async function buildMsg(m){
-      const row=document.createElement('div');
       const self=isSelf(m);
+      const row=document.createElement('div');
       row.className='row'+(self?' self':'');
       row.dataset.id=m.id||'';
+
       const bubble=document.createElement('div');
       bubble.className='bubble '+(self?'self':'other');
 
       const sender=m?.user?.name||(self?'User':'Assistant');
       const html=renderMd(msgText(m));
-      let filesHtml='';
       const files=(m&&typeof m.data==='object'&&Array.isArray(m.data.files))?m.data.files:[];
+      let filesHtml='';
+
       if(files.length){
         filesHtml+='<div style="margin-top:8px;display:flex;flex-wrap:wrap;gap:8px">';
         for(const it of files){
@@ -451,17 +531,16 @@
         ${self?'':`<div class="sender">${escapeHtml(sender)}</div>`}
         <div class="md">${html}</div>
         ${filesHtml}
-        <div class="meta">${msgTime(m)}</div>
+        <div class="meta">${formatTimeFromMessage(m)}</div>
       `;
       row.appendChild(bubble);
-      await enhance(bubble);
 
+      await enhance(bubble);
       bubble.querySelectorAll('.wx-audio[data-audio]').forEach(n=>{
         const a=new Audio(n.getAttribute('data-audio'));
         n.onclick=()=>toggleWxAudio(n,a);
       });
       bubble.querySelectorAll('img').forEach(img=>img.onclick=()=>openMedia(img.src,'image'));
-
       return row;
     }
 
@@ -477,13 +556,12 @@
       if(keep) E.messages.scrollTop=E.messages.scrollHeight;
     }
 
-    // ---------- channels ----------
     async function loadChannels(){
       const r=await apiFetch('/api/channels');
       S.channels=await r.json();
       E.channelCount.textContent=String(S.channels.length||0);
       renderChannels();
-      if(!S.current&&S.channels.length) await switchChannel(S.channels[0].id);
+      if(!S.current && S.channels.length) await switchChannel(S.channels[0].id);
     }
 
     function renderChannels(){
@@ -502,19 +580,22 @@
 
     async function switchChannel(cid){
       const c=S.channels.find(x=>x.id===cid); if(!c) return;
-      S.current=c; renderChannels();
-      E.headName.textContent=c.name; E.headAvatar.textContent=(c.name||'C')[0].toUpperCase();
+      S.current=c;
+      renderChannels();
+      E.headName.textContent=c.name;
+      E.headAvatar.textContent=(c.name||'C')[0].toUpperCase();
+
       E.messages.innerHTML='';
       const st=ensureStore(cid); st.ids.clear(); st.lastId=null;
 
-      const r=await apiFetch(`/api/messages/${cid}?limit=120`);
+      const lim = Number(S.settings.messageLimit || S.cfg?.runtimeConfig?.defaultMessageLimit || 120);
+      const r=await apiFetch(`/api/messages/${cid}?limit=${Math.max(20,lim)}`);
       const arr=(await r.json()||[]).reverse();
       await appendMessages(cid,arr);
       connectStream(cid);
       E.left.classList.remove('show');
     }
 
-    // ---------- stream ----------
     function closeStream(){ if(S.es){S.es.close();S.es=null;} }
     function connectStream(cid){
       closeStream();
@@ -522,18 +603,21 @@
       const q=new URLSearchParams();
       if(st.lastId) q.set('last_id',st.lastId);
       if(S.settings.connectPassword) q.set('p',S.settings.connectPassword);
+      q.set('limit', String(Math.max(20, Number(S.settings.messageLimit || S.cfg?.runtimeConfig?.defaultMessageLimit || 120))));
+      q.set('interval', String(Math.max(800, Number(S.settings.streamInterval || S.cfg?.runtimeConfig?.streamInterval || 1500))));
       S.es=new EventSource(`/api/messages/${cid}/stream?${q.toString()}`);
 
       S.es.addEventListener('messages',async ev=>{
-        try{ const p=JSON.parse(ev.data||'{}'); await appendMessages(cid,p.items||[]);}catch(e){log('warn','SSE解析失败:'+e.message);}
+        try{ const p=JSON.parse(ev.data||'{}'); await appendMessages(cid,p.items||[]);}
+        catch(e){log('warn','SSE解析失败:'+e.message);}
       });
       S.es.onerror=()=>{
         log('warn','SSE断开，3秒重连');
-        closeStream(); setTimeout(()=>{ if(S.current?.id===cid) connectStream(cid); },3000);
+        closeStream();
+        setTimeout(()=>{ if(S.current?.id===cid) connectStream(cid); },3000);
       };
     }
 
-    // ---------- send ----------
     function fileToBase64(file){
       return new Promise((resolve,reject)=>{
         const fr=new FileReader();
@@ -542,11 +626,13 @@
         fr.readAsDataURL(file);
       });
     }
+
     function renderPreview(){
       if(!S.files.length){E.preview.innerHTML='';return;}
       E.preview.innerHTML=S.files.map((f,i)=>`<span class="chip">${f.type.startsWith('image/')?'🖼️':f.type.startsWith('video/')?'🎥':'🎤'} ${escapeHtml(f.name)} <button data-i="${i}" style="border:none;background:transparent;color:#ef4444;cursor:pointer">×</button></span>`).join('');
       E.preview.querySelectorAll('[data-i]').forEach(b=>b.onclick=()=>{S.files.splice(+b.dataset.i,1);renderPreview();});
     }
+
     async function uploadFile(file){
       const b64=await fileToBase64(file);
       const r=await apiFetch('/api/upload',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({
@@ -555,6 +641,7 @@
       const d=await r.json(); if(!d.url) throw new Error('上传失败');
       return d.url;
     }
+
     async function sendNow(){
       if(!S.current) return alert('请先选择频道');
       const text=E.input.value.trim();
@@ -562,7 +649,8 @@
 
       const links=[];
       for(const f of S.files){
-        try{ links.push({url:await uploadFile(f),type:f.type}); }catch(e){log('error','附件上传失败:'+e.message);}
+        try{ links.push({url:await uploadFile(f),type:f.type}); }
+        catch(e){ log('error','附件上传失败:'+e.message); }
       }
 
       let full=text;
@@ -575,12 +663,12 @@
       E.input.value=''; autoGrow(); S.files=[]; renderPreview();
     }
 
-    // ---------- voice ----------
     function pickMime(){
       const c=['audio/webm;codecs=opus','audio/webm','audio/ogg;codecs=opus'];
       for(const m of c){ if(window.MediaRecorder && MediaRecorder.isTypeSupported && MediaRecorder.isTypeSupported(m)) return m; }
       return '';
     }
+
     async function startRecord(){
       if(!S.current||S.recording) return;
       try{
@@ -596,32 +684,68 @@
             const url=await uploadFile(file);
             await apiFetch(`/api/send/${S.current.id}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text:`[语音](${url})`})});
           }catch(e){log('error','语音发送失败:'+e.message);}
-          finally{ stream.getTracks().forEach(t=>t.stop());}
+          finally{ stream.getTracks().forEach(t=>t.stop()); }
         };
         rec.start(); S.recording=true; E.holdBtn.textContent='录音中... 松开发送';
-      }catch(e){log('error','录音失败:'+e.message);}
+      }catch(e){ log('error','录音失败:'+e.message); }
     }
+
     function stopRecord(){
       if(!S.recording) return;
       S.recording=false; E.holdBtn.textContent='按住说话，松开发送';
       try{S.rec&&S.rec.stop();}catch{}
     }
 
-    // ---------- settings ----------
+    async function loadConfig(){
+      try{
+        const r=await fetch('/api/config');
+        S.cfg=await r.json();
+      }catch(e){ log('warn','读取配置失败:'+e.message); }
+    }
+
+    // 设置弹窗
     function openSettings(){
-      setPassword.value=S.settings.connectPassword||'';
-      setDebug.value=S.settings.debugLogs||'true';
-      setUnsafe.value=S.settings.allowUnsafe||'true';
+      setPassword.value = S.settings.connectPassword || '';
+      setBotUsername.value = S.settings.botUsername || S.cfg?.runtimeConfig?.botUsername || 'openman';
+      setStreamInterval.value = S.settings.streamInterval || S.cfg?.runtimeConfig?.streamInterval || 1500;
+      setMessageLimit.value = S.settings.messageLimit || S.cfg?.runtimeConfig?.defaultMessageLimit || 120;
+      setDebug.checked = (S.settings.debugLogs === 'true');
+      setUnsafe.checked = (S.settings.allowUnsafe === 'true');
       E.settingsModal.classList.add('show');
     }
-    function closeSettings(){E.settingsModal.classList.remove('show')}
+    function closeSettings(){ E.settingsModal.classList.remove('show'); }
+
     async function saveSettings(){
-      S.settings.connectPassword=setPassword.value.trim();
-      S.settings.debugLogs=setDebug.value;
-      S.settings.allowUnsafe=setUnsafe.value;
-      localStorage.setItem('connectPassword',S.settings.connectPassword);
-      localStorage.setItem('debugLogs',S.settings.debugLogs);
-      localStorage.setItem('allowUnsafe',S.settings.allowUnsafe);
+      S.settings.connectPassword = setPassword.value.trim();
+      S.settings.botUsername = setBotUsername.value.trim();
+      S.settings.streamInterval = String(Math.max(800, Number(setStreamInterval.value || 1500)));
+      S.settings.messageLimit = String(Math.max(20, Number(setMessageLimit.value || 120)));
+      S.settings.debugLogs = setDebug.checked ? 'true' : 'false';
+      S.settings.allowUnsafe = setUnsafe.checked ? 'true' : 'false';
+
+      localStorage.setItem('connectPassword', S.settings.connectPassword);
+      localStorage.setItem('botUsername', S.settings.botUsername);
+      localStorage.setItem('streamInterval', S.settings.streamInterval);
+      localStorage.setItem('messageLimit', S.settings.messageLimit);
+      localStorage.setItem('debugLogs', S.settings.debugLogs);
+      localStorage.setItem('allowUnsafe', S.settings.allowUnsafe);
+
+      // 同步到后端运行配置（不是改真正.env）
+      try{
+        await apiFetch('/api/runtime-settings',{
+          method:'POST',
+          headers:{'Content-Type':'application/json'},
+          body:JSON.stringify({
+            botUsername: S.settings.botUsername || undefined,
+            streamInterval: Number(S.settings.streamInterval),
+            defaultMessageLimit: Number(S.settings.messageLimit),
+            debugLogs: S.settings.debugLogs === 'true'
+          })
+        });
+      }catch(e){
+        log('warn','后端运行设置更新失败:'+e.message);
+      }
+
       closeSettings();
       if(S.current) await switchChannel(S.current.id); else await loadChannels();
     }
@@ -631,14 +755,6 @@
       E.input.style.height=Math.min(E.input.scrollHeight,240)+'px';
     }
 
-    async function loadConfig(){
-      try{
-        const r=await fetch('/api/config');
-        S.cfg=await r.json();
-      }catch(e){ log('warn','读取配置失败:'+e.message); }
-    }
-
-    // ---------- bind first (保证按钮永远可点) ----------
     function bind(){
       btnOpenLeft.onclick=()=>E.left.classList.add('show');
       btnCloseLeft.onclick=()=>E.left.classList.remove('show');
@@ -651,7 +767,7 @@
       setSave.onclick=saveSettings;
 
       mediaClose.onclick=()=>E.mediaModal.classList.remove('show');
-      E.mediaModal.addEventListener('click',e=>{if(e.target===E.mediaModal)E.mediaModal.classList.remove('show');});
+      E.mediaModal.addEventListener('click',e=>{ if(e.target===E.mediaModal) E.mediaModal.classList.remove('show'); });
 
       E.searchInput.addEventListener('input',renderChannels);
 
@@ -663,7 +779,7 @@
 
       sendBtn.onclick=sendNow;
       E.input.addEventListener('input',autoGrow);
-      E.input.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendNow();}});
+      E.input.addEventListener('keydown',e=>{ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); sendNow(); } });
 
       E.modeText.onclick=()=>{E.modeText.classList.add('active');E.modeVoice.classList.remove('active');E.textMode.style.display='';E.voiceMode.style.display='none';};
       E.modeVoice.onclick=()=>{E.modeVoice.classList.add('active');E.modeText.classList.remove('active');E.textMode.style.display='none';E.voiceMode.style.display='';};
@@ -678,10 +794,10 @@
     }
 
     (async function init(){
-      bind();            // 先绑定，避免“啥也点不了”
+      bind(); // 先绑定，避免“按钮没反应”
       autoGrow();
       await loadConfig();
-      await loadEnhancers(); // 异步加载增强，不阻塞主功能
+      await loadEnhancers(); // 异步增强，CDN失败也不阻塞基本功能
       try{
         await loadChannels();
         log('info','初始化完成');