Komari部署与美化完整指南

一、系统环境要求

• 操作系统：Debian 12
• 用户权限：root 或具备 sudo 权限的用户

二、Komari 安装步骤

1. 下载安装脚本

curl -fsSL https://raw.githubusercontent.com/komari-monitor/komari/main/install-komari.sh -o install-komari.sh

2. 添加执行权限

chmod +x install-komari.sh

3. 执行安装脚本

sudo ./install-komari.sh

安装过程中将自动完成依赖安装与系统配置，无需人工干预。

三、查找 Komari 安装目录

安装完成后，可通过以下命令定位 Komari 的实际安装路径：

sudo find / -type d -name "komari" 2>/dev/null

默认情况下，Komari 通常安装在：

/opt/komari

四、修改管理员密码

1. 进入 Komari 目录

cd /opt/komari

2. 执行密码修改命令

./komari chpasswd -p 你的新密码

示例：

./komari chpasswd -p Ab890725

3. 重启服务生效

sudo reboot

五、验证安装状态

服务器重启后，可通过浏览器访问 Komari 控制面板：

• 访问地址：http://你的服务器IP:3000（以安装输出为准）
• 默认用户名：admin
• 密码：你刚刚设置的新密码

注意事项：

• 确保防火墙已放行 Komari 使用的端口
• 建议首次登录后立即完成安全配置
• 可定期检查 Komari 日志以确认运行状态

六、Komari 前端美化与功能增强

以下内容为 Komari 探针自定义代码，可用于 隐藏默认元素、固定顶部服务器名称、增加流量进度条、优化价格与流量展示逻辑。

1. 自定义 Head 脚本

将以下代码插入 Komari 页面 Head 区域：

<script>
(function() {
  // 配置
  var CONFIG = {
    interval: 60000,
    apiUrl: '/api/rpc2',
    trafficTolerance: 0.10
  };

  // 注入样式
  var style = document.createElement('style');
  style.textContent = '.server-footer-name>div:first-child{visibility:hidden!important}.server-footer-theme{display:none!important}';
  document.head.appendChild(style);

  // 全局配置
  window.CustomDesc = "BITJEBE's Node";
  window.ShowNetTransfer = true;
  window.DisableAnimatedMan = true;
  window.FixedTopServerName = true;

  // 工具函数
  var UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
  var UNIT_MAP = { KIB: 1024, MIB: 1048576, GIB: 1073741824, TIB: 1099511627776 };
  var CYCLE_MAP = { 30: '月', 92: '季', 184: '半年', 365: '年', 730: '二年', 1095: '三年', 1825: '五年' };

  function formatBytes(bytes) {
    if (!bytes) return { value: '0', unit: 'B' };
    var i = Math.floor(Math.log(bytes) / Math.log(1024));
    return { value: (bytes / Math.pow(1024, i)).toFixed(2), unit: UNITS[i] };
  }

  function formatTime(s) {
    if (!s) return 'N/A';
    try {
      return new Date(s).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit', second: '2-digit' });
    } catch (e) { return 'N/A'; }
  }

  function getCycleText(c) {
    if (!c || c <= 0) return c === -1 || c === 0 ? '一次性' : '年';
    for (var days in CYCLE_MAP) {
      if (Math.abs(c - days) <= 3) return CYCLE_MAP[days];
    }
    var y = Math.round(c / 365);
    return y >= 1 && y <= 10 ? y + '年' : '年';
  }

  function calcResetDays(expiredAt) {
    if (!expiredAt) return 'N/A';
    try {
      var day = new Date(expiredAt).getDate(), now = new Date();
      var reset = new Date(now.getFullYear(), now.getMonth(), day);
      if (reset <= now) reset.setMonth(reset.getMonth() + 1);
      return Math.ceil((reset - now) / 86400000) + '日';
    } catch (e) { return 'N/A'; }
  }

  function parseTraffic(text) {
    var m = text.match(/([\d.]+)\s*(GiB|MiB|TiB|KiB)/i);
    return m ? parseFloat(m[1]) * (UNIT_MAP[m[2].toUpperCase()] || 1) : null;
  }

  function normName(n) { return n.toUpperCase().replace(/[^A-Z0-9-]/g, ''); }

  function getColor(p) { return 'hsl(' + ((100 - p) * 1.4) + ',70%,50%)'; }

  // 渲染器
  var barCache = new Map();

  function createBar(d) {
    var uf = formatBytes(d.used), tf = formatBytes(d.limit);
    var pc = Math.min(100, d.used / d.limit * 100).toFixed(2);
    var div = document.createElement('div');
    div.className = 'space-y-1.5 traffic-bar';
    div.dataset.uuid = d.uuid;
    div.style.width = '100%';
    div.innerHTML = 
      '<div class="flex items-center justify-between">' +
        '<div class="flex items-baseline gap-1">' +
          '<span class="text-[10px] font-medium text-neutral-800 dark:text-neutral-200 used-val">' + uf.value + '</span>' +
          '<span class="text-[10px] font-medium text-neutral-800 dark:text-neutral-200 used-unit">' + uf.unit + '</span>' +
          '<span class="text-[10px] text-neutral-500 dark:text-neutral-400">/ ' + tf.value + ' ' + tf.unit + '</span>' +
        '</div>' +
        '<div class="text-[10px] font-medium text-neutral-600 dark:text-neutral-300 percent-val">' + pc + '%</div>' +
      '</div>' +
      '<div class="relative h-1.5" style="width:100%">' +
        '<div class="absolute inset-0 bg-neutral-100 dark:bg-neutral-800 rounded-full"></div>' +
        '<div class="absolute inset-0 rounded-full transition-all duration-300 progress-bar" style="width:' + pc + '%;background-color:' + getColor(parseFloat(pc)) + '"></div>' +
      '</div>' +
      '<div class="flex items-center justify-between">' +
        '<div class="text-[10px] text-neutral-500 dark:text-neutral-400 update-time">更新于: ' + formatTime(d.next_update) + '</div>' +
        '<div class="text-[10px] text-neutral-500 dark:text-neutral-400 reset-date">距离流量重置: ' + d.reset_date + '</div>' +
      '</div>';
    return div;
  }

  function updateBar(el, d) {
    var uf = formatBytes(d.used);
    var pc = Math.min(100, d.used / d.limit * 100).toFixed(2);
    el.querySelector('.used-val').textContent = uf.value;
    el.querySelector('.used-unit').textContent = uf.unit;
    el.querySelector('.percent-val').textContent = pc + '%';
    el.querySelector('.update-time').textContent = '更新于: ' + formatTime(d.next_update);
    el.querySelector('.reset-date').textContent = '距离流量重置: ' + d.reset_date;
    var bar = el.querySelector('.progress-bar');
    bar.style.width = pc + '%';
    bar.style.backgroundColor = getColor(parseFloat(pc));
  }

  function fixPrice(container, d) {
    if (!d.price || d.billing_cycle == null) return;
    var text = '价格: ' + (d.currency || '$') + d.price + '/' + getCycleText(d.billing_cycle);
    var ps = container.getElementsByTagName('p');
    for (var i = 0; i < ps.length; i++) {
      if (ps[i].textContent.indexOf('价格:') !== -1) ps[i].textContent = text;
    }
  }

  function getCardTraffic(container) {
    var divs = container.querySelectorAll('.inline-flex');
    var up = null, down = null;
    for (var i = 0; i < divs.length; i++) {
      var t = divs[i].textContent;
      if (t.indexOf('上传') !== -1) up = parseTraffic(t);
      else if (t.indexOf('下载') !== -1) down = parseTraffic(t);
    }
    return up && down ? { up: up, down: down } : null;
  }

  function matchCard(candidates, d) {
    if (candidates.length === 1) return candidates[0];
    var best = null, bestDiff = Infinity;
    for (var i = 0; i < candidates.length; i++) {
      var traffic = getCardTraffic(candidates[i].closest('div'));
      if (!traffic) continue;
      var upDiff = Math.abs(traffic.up - d.net_total_up) / Math.max(d.net_total_up, 1);
      var downDiff = Math.abs(traffic.down - d.net_total_down) / Math.max(d.net_total_down, 1);
      if (upDiff < CONFIG.trafficTolerance && downDiff < CONFIG.trafficTolerance) {
        var avg = (upDiff + downDiff) / 2;
        if (avg < bestDiff) { best = candidates[i]; bestDiff = avg; }
      }
    }
    return best || candidates[0];
  }

  function render(list) {
    var sections = document.querySelectorAll('section.grid.items-center.gap-2');
    var used = new Set();

    for (var i = 0; i < list.length; i++) {
      var d = list[i];
      if (!d.limit || !d.used) continue;

      var norm = normName(d.name);
      var candidates = [];
      for (var j = 0; j < sections.length; j++) {
        if (used.has(sections[j])) continue;
        var nameEl = sections[j].querySelector('p');
        if (nameEl && normName(nameEl.textContent.trim()) === norm) candidates.push(sections[j]);
      }
      if (!candidates.length) continue;

      var target = matchCard(candidates, d);
      used.add(target);

      var container = target.closest('div');
      fixPrice(container, d);

      // 找到上传下载的 section 作为插入点
      var uploadDownloadSec = null;
      var allSections = container.querySelectorAll('section.flex.items-center.w-full.justify-between.gap-1');
      for (var k = 0; k < allSections.length; k++) {
        if (allSections[k].textContent.indexOf('上传:') !== -1 && allSections[k].textContent.indexOf('下载:') !== -1) {
          uploadDownloadSec = allSections[k];
          break;
        }
      }
      
      if (!uploadDownloadSec) continue;

      // 检查是否已存在进度条（防止重复）
      var existingBar = container.querySelector('.traffic-bar[data-uuid="' + d.uuid + '"]');
      
      if (existingBar) {
        // 已存在，只更新数据
        updateBar(existingBar, d);
      } else {
        // 不存在，创建新的
        var bar = createBar(d);
        uploadDownloadSec.parentNode.insertBefore(bar, uploadDownloadSec.nextSibling);
        barCache.set(d.uuid, bar);
      }
    }
  }

  // 数据管理
  var dataCache = null, loading = false;

  function rpc(method, params) {
    return fetch(CONFIG.apiUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ id: Date.now(), method: method, params: params || {}, jsonrpc: '2.0' })
    }).then(function(r) { return r.json(); });
  }

  function calcUsed(up, down, type) {
    if (type === 'max') return Math.max(up, down);
    if (type === 'min') return Math.min(up, down);
    if (type === 'up') return up;
    if (type === 'down') return down;
    return up + down;
  }

  function fetchData(cb) {
    var now = Date.now();
    if (dataCache && now - dataCache.time < CONFIG.interval) { cb(dataCache.data); return; }
    if (loading) return;
    loading = true;

    rpc('common:getNodes').then(function(res) {
      var nodes = Object.values(res.result || res.data || {});
      return Promise.all(nodes.map(function(n) {
        return rpc('common:getNodeRecentStatus', { uuid: n.uuid, limit: 1 }).then(function(sr) {
          var rec = ((sr.result || sr.data || {}).records || [])[0] || {};
          var up = rec.net_total_up || 0, down = rec.net_total_down || 0;
          return {
            name: n.name, uuid: n.uuid,
            limit: n.traffic_limit || 0,
            used: calcUsed(up, down, n.traffic_limit_type || 'sum'),
            next_update: rec.time,
            reset_date: calcResetDays(n.expired_at),
            price: n.price, currency: n.currency, billing_cycle: n.billing_cycle,
            net_total_up: up, net_total_down: down
          };
        }).catch(function() {
          return {
            name: n.name, uuid: n.uuid, limit: n.traffic_limit || 0, used: 0,
            next_update: null, reset_date: calcResetDays(n.expired_at),
            price: n.price, currency: n.currency, billing_cycle: n.billing_cycle,
            net_total_up: 0, net_total_down: 0
          };
        });
      }));
    }).then(function(data) {
      dataCache = { time: now, data: data };
      cb(data);
    }).finally(function() { loading = false; });
  }

  // 观察器 - 优化防止频繁触发
  var observer = null, timer = null, renderPending = false;

  function update() { fetchData(render); }

  function scheduleRender() {
    if (renderPending) return;
    renderPending = true;
    setTimeout(function() {
      renderPending = false;
      update();
    }, 300);
  }

  function init() {
    if (observer) return;
    
    observer = new MutationObserver(scheduleRender);
    observer.observe(document.body, { childList: true, subtree: true });
    
    update();
    timer = setInterval(update, CONFIG.interval);
    
    window.addEventListener('beforeunload', function() {
      if (observer) observer.disconnect();
      if (timer) clearInterval(timer);
      barCache.clear();
    }, { once: true });
  }

  // 启动
  function tryInit() {
    if (document.querySelector('section.grid[class*="grid-cols-"]')) {
      requestAnimationFrame(init);
    } else {
      setTimeout(tryInit, 250);
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', tryInit, { once: true });
  } else {
    tryInit();
  }
})();
</script>

2. 自定义 Body 脚本（流量进度条与数据增强）

以下脚本用于动态获取节点流量数据，并在卡片中插入可视化进度条，同时修正价格、流量周期与重置时间展示逻辑。

<script>
(function() {
  // 配置
  var CONFIG = {
    interval: 60000,
    apiUrl: '/api/rpc2',
    trafficTolerance: 0.10
  };

  // 注入样式
  var style = document.createElement('style');
  style.textContent = '.server-footer-name>div:first-child{visibility:hidden!important}.server-footer-theme{display:none!important}';
  document.head.appendChild(style);

  // 全局配置
  window.CustomDesc = "BITJEBE's Node";
  window.ShowNetTransfer = true;
  window.DisableAnimatedMan = true;
  window.FixedTopServerName = true;

  // 工具函数
  var UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
  var UNIT_MAP = { KIB: 1024, MIB: 1048576, GIB: 1073741824, TIB: 1099511627776 };
  var CYCLE_MAP = { 30: '月', 92: '季', 184: '半年', 365: '年', 730: '二年', 1095: '三年', 1825: '五年' };

  function formatBytes(bytes) {
    if (!bytes) return { value: '0', unit: 'B' };
    var i = Math.floor(Math.log(bytes) / Math.log(1024));
    return { value: (bytes / Math.pow(1024, i)).toFixed(2), unit: UNITS[i] };
  }

  function formatTime(s) {
    if (!s) return 'N/A';
    try {
      return new Date(s).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit', second: '2-digit' });
    } catch (e) { return 'N/A'; }
  }

  function getCycleText(c) {
    if (!c || c <= 0) return c === -1 || c === 0 ? '一次性' : '年';
    for (var days in CYCLE_MAP) {
      if (Math.abs(c - days) <= 3) return CYCLE_MAP[days];
    }
    var y = Math.round(c / 365);
    return y >= 1 && y <= 10 ? y + '年' : '年';
  }

  function calcResetDays(expiredAt) {
    if (!expiredAt) return 'N/A';
    try {
      var day = new Date(expiredAt).getDate(), now = new Date();
      var reset = new Date(now.getFullYear(), now.getMonth(), day);
      if (reset <= now) reset.setMonth(reset.getMonth() + 1);
      return Math.ceil((reset - now) / 86400000) + '日';
    } catch (e) { return 'N/A'; }
  }

  function parseTraffic(text) {
    var m = text.match(/([\d.]+)\s*(GiB|MiB|TiB|KiB)/i);
    return m ? parseFloat(m[1]) * (UNIT_MAP[m[2].toUpperCase()] || 1) : null;
  }

  function normName(n) { return n.toUpperCase().replace(/[^A-Z0-9-]/g, ''); }

  function getColor(p) { return 'hsl(' + ((100 - p) * 1.4) + ',70%,50%)'; }

  // 渲染器
  var barCache = new Map();

  function createBar(d) {
    var uf = formatBytes(d.used), tf = formatBytes(d.limit);
    var pc = Math.min(100, d.used / d.limit * 100).toFixed(2);
    var div = document.createElement('div');
    div.className = 'space-y-1.5 traffic-bar';
    div.dataset.uuid = d.uuid;
    div.style.width = '100%';
    div.innerHTML = 
      '<div class="flex items-center justify-between">' +
        '<div class="flex items-baseline gap-1">' +
          '<span class="text-[10px] font-medium text-neutral-800 dark:text-neutral-200 used-val">' + uf.value + '</span>' +
          '<span class="text-[10px] font-medium text-neutral-800 dark:text-neutral-200 used-unit">' + uf.unit + '</span>' +
          '<span class="text-[10px] text-neutral-500 dark:text-neutral-400">/ ' + tf.value + ' ' + tf.unit + '</span>' +
        '</div>' +
        '<div class="text-[10px] font-medium text-neutral-600 dark:text-neutral-300 percent-val">' + pc + '%</div>' +
      '</div>' +
      '<div class="relative h-1.5" style="width:100%">' +
        '<div class="absolute inset-0 bg-neutral-100 dark:bg-neutral-800 rounded-full"></div>' +
        '<div class="absolute inset-0 rounded-full transition-all duration-300 progress-bar" style="width:' + pc + '%;background-color:' + getColor(parseFloat(pc)) + '"></div>' +
      '</div>' +
      '<div class="flex items-center justify-between">' +
        '<div class="text-[10px] text-neutral-500 dark:text-neutral-400 update-time">更新于: ' + formatTime(d.next_update) + '</div>' +
        '<div class="text-[10px] text-neutral-500 dark:text-neutral-400 reset-date">距离流量重置: ' + d.reset_date + '</div>' +
      '</div>';
    return div;
  }

  function updateBar(el, d) {
    var uf = formatBytes(d.used);
    var pc = Math.min(100, d.used / d.limit * 100).toFixed(2);
    el.querySelector('.used-val').textContent = uf.value;
    el.querySelector('.used-unit').textContent = uf.unit;
    el.querySelector('.percent-val').textContent = pc + '%';
    el.querySelector('.update-time').textContent = '更新于: ' + formatTime(d.next_update);
    el.querySelector('.reset-date').textContent = '距离流量重置: ' + d.reset_date;
    var bar = el.querySelector('.progress-bar');
    bar.style.width = pc + '%';
    bar.style.backgroundColor = getColor(parseFloat(pc));
  }

  function fixPrice(container, d) {
    if (!d.price || d.billing_cycle == null) return;
    var text = '价格: ' + (d.currency || '$') + d.price + '/' + getCycleText(d.billing_cycle);
    var ps = container.getElementsByTagName('p');
    for (var i = 0; i < ps.length; i++) {
      if (ps[i].textContent.indexOf('价格:') !== -1) ps[i].textContent = text;
    }
  }

  function getCardTraffic(container) {
    var divs = container.querySelectorAll('.inline-flex');
    var up = null, down = null;
    for (var i = 0; i < divs.length; i++) {
      var t = divs[i].textContent;
      if (t.indexOf('上传') !== -1) up = parseTraffic(t);
      else if (t.indexOf('下载') !== -1) down = parseTraffic(t);
    }
    return up && down ? { up: up, down: down } : null;
  }

  function matchCard(candidates, d) {
    if (candidates.length === 1) return candidates[0];
    var best = null, bestDiff = Infinity;
    for (var i = 0; i < candidates.length; i++) {
      var traffic = getCardTraffic(candidates[i].closest('div'));
      if (!traffic) continue;
      var upDiff = Math.abs(traffic.up - d.net_total_up) / Math.max(d.net_total_up, 1);
      var downDiff = Math.abs(traffic.down - d.net_total_down) / Math.max(d.net_total_down, 1);
      if (upDiff < CONFIG.trafficTolerance && downDiff < CONFIG.trafficTolerance) {
        var avg = (upDiff + downDiff) / 2;
        if (avg < bestDiff) { best = candidates[i]; bestDiff = avg; }
      }
    }
    return best || candidates[0];
  }

  function render(list) {
    var sections = document.querySelectorAll('section.grid.items-center.gap-2');
    var used = new Set();

    for (var i = 0; i < list.length; i++) {
      var d = list[i];
      if (!d.limit || !d.used) continue;

      var norm = normName(d.name);
      var candidates = [];
      for (var j = 0; j < sections.length; j++) {
        if (used.has(sections[j])) continue;
        var nameEl = sections[j].querySelector('p');
        if (nameEl && normName(nameEl.textContent.trim()) === norm) candidates.push(sections[j]);
      }
      if (!candidates.length) continue;

      var target = matchCard(candidates, d);
      used.add(target);

      var container = target.closest('div');
      fixPrice(container, d);

      // 找到上传下载的 section 作为插入点
      var uploadDownloadSec = null;
      var allSections = container.querySelectorAll('section.flex.items-center.w-full.justify-between.gap-1');
      for (var k = 0; k < allSections.length; k++) {
        if (allSections[k].textContent.indexOf('上传:') !== -1 && allSections[k].textContent.indexOf('下载:') !== -1) {
          uploadDownloadSec = allSections[k];
          break;
        }
      }
      
      if (!uploadDownloadSec) continue;

      // 检查是否已存在进度条（防止重复）
      var existingBar = container.querySelector('.traffic-bar[data-uuid="' + d.uuid + '"]');
      
      if (existingBar) {
        // 已存在，只更新数据
        updateBar(existingBar, d);
      } else {
        // 不存在，创建新的
        var bar = createBar(d);
        uploadDownloadSec.parentNode.insertBefore(bar, uploadDownloadSec.nextSibling);
        barCache.set(d.uuid, bar);
      }
    }
  }

  // 数据管理
  var dataCache = null, loading = false;

  function rpc(method, params) {
    return fetch(CONFIG.apiUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ id: Date.now(), method: method, params: params || {}, jsonrpc: '2.0' })
    }).then(function(r) { return r.json(); });
  }

  function calcUsed(up, down, type) {
    if (type === 'max') return Math.max(up, down);
    if (type === 'min') return Math.min(up, down);
    if (type === 'up') return up;
    if (type === 'down') return down;
    return up + down;
  }

  function fetchData(cb) {
    var now = Date.now();
    if (dataCache && now - dataCache.time < CONFIG.interval) { cb(dataCache.data); return; }
    if (loading) return;
    loading = true;

    rpc('common:getNodes').then(function(res) {
      var nodes = Object.values(res.result || res.data || {});
      return Promise.all(nodes.map(function(n) {
        return rpc('common:getNodeRecentStatus', { uuid: n.uuid, limit: 1 }).then(function(sr) {
          var rec = ((sr.result || sr.data || {}).records || [])[0] || {};
          var up = rec.net_total_up || 0, down = rec.net_total_down || 0;
          return {
            name: n.name, uuid: n.uuid,
            limit: n.traffic_limit || 0,
            used: calcUsed(up, down, n.traffic_limit_type || 'sum'),
            next_update: rec.time,
            reset_date: calcResetDays(n.expired_at),
            price: n.price, currency: n.currency, billing_cycle: n.billing_cycle,
            net_total_up: up, net_total_down: down
          };
        }).catch(function() {
          return {
            name: n.name, uuid: n.uuid, limit: n.traffic_limit || 0, used: 0,
            next_update: null, reset_date: calcResetDays(n.expired_at),
            price: n.price, currency: n.currency, billing_cycle: n.billing_cycle,
            net_total_up: 0, net_total_down: 0
          };
        });
      }));
    }).then(function(data) {
      dataCache = { time: now, data: data };
      cb(data);
    }).finally(function() { loading = false; });
  }

  // 观察器 - 优化防止频繁触发
  var observer = null, timer = null, renderPending = false;

  function update() { fetchData(render); }

  function scheduleRender() {
    if (renderPending) return;
    renderPending = true;
    setTimeout(function() {
      renderPending = false;
      update();
    }, 300);
  }

  function init() {
    if (observer) return;
    
    observer = new MutationObserver(scheduleRender);
    observer.observe(document.body, { childList: true, subtree: true });
    
    update();
    timer = setInterval(update, CONFIG.interval);
    
    window.addEventListener('beforeunload', function() {
      if (observer) observer.disconnect();
      if (timer) clearInterval(timer);
      barCache.clear();
    }, { once: true });
  }

  // 启动
  function tryInit() {
    if (document.querySelector('section.grid[class*="grid-cols-"]')) {
      requestAnimationFrame(init);
    } else {
      setTimeout(tryInit, 250);
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', tryInit, { once: true });
  } else {
    tryInit();
  }
})();
</script>

七、Komari 通知模板（Telegram）

以下为 Komari 事件通知的 Telegram 模板示例，支持：

• 上线 / 离线通知
• 异常告警
• 到期与续费提醒
• 面板与实例详情按钮跳转

消息发送函数

async function sendMessage(message, title, instanceId = null) {
  const token = "你的token";
  const chatId = "你的id";
  const panelUrl = "你的域名"; 

  if (!token || !chatId) return false;

  const url = `https://api.telegram.org/bot${token}/sendMessage`;
  
  // 构建交互按钮
  let inline_keyboard = [];
  let row1 = [{ text: "📊 进入面板", url: panelUrl }];

  // 这里的路径修正为 /instance/，匹配你提供的格式
  if (instanceId && instanceId !== '未知') {
    row1.push({ 
      text: "🌐 实例详情", 
      url: `${panelUrl}/instance/${instanceId}` 
    });
  }
  
  inline_keyboard.push(row1);

  const resp = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      chat_id: chatId,
      text: `<b>${title}</b>\n\n${message}`,
      parse_mode: 'HTML',
      reply_markup: { inline_keyboard: inline_keyboard }
    }),
  });
  return resp.ok;
}

async function sendEvent(event) {
  try {
    // ⏰ 时间转换函数 (处理 CST)
    const getCSTTime = (timeStr) => {
      if (!timeStr || timeStr.startsWith('0001')) return "1-01-01 08:00:00";
      const date = new Date(timeStr.replace(/\.\d+Z$/, 'Z'));
      const cst = new Date(date.getTime() + 8 * 60 * 60 * 1000);
      const f = (n) => n.toString().padStart(2, '0');
      return `${cst.getUTCFullYear()}-${f(cst.getUTCMonth() + 1)}-${f(cst.getUTCDate())} ${f(cst.getUTCHours())}:${f(cst.getUTCMinutes())}:${f(cst.getUTCSeconds())}`;
    };

    // 📦 流量单位转换函数
    const formatTraffic = (bytes) => {
      if (!bytes || bytes === 0) return '无限制';
      const gb = bytes / (1024 ** 3);
      if (gb >= 1024) return `${(gb / 1024).toFixed(2)} TB`;
      return `${gb.toFixed(2)} GB`;
    };

    // 内存和磁盘格式化函数
    const formatMemory = (bytes) => {
      if (!bytes || bytes === 0) return '0';
      const gb = bytes / (1024 ** 3);
      return gb < 1 ? `${Math.round(gb * 1024)}MB` : `${Math.round(gb)}G`;
    };

    const formatSwapMemory = (bytes) => {
      if (!bytes || bytes === 0) return '0';
      const gb = bytes / (1024 ** 3);
      return gb < 1 ? `${Math.round(gb * 1024)}MB` : `${Math.round(gb)}G`;
    };

    // IP 地址部分隐藏函数
    const hideIP = (ip) => {
      if (!ip) return '未知';
      const parts = ip.split('.');
      if (parts.length === 4) {
        return `${parts[0]}.${parts[1]}.xxx.xxx`;
      }
      // 对于 IPv6 地址，只显示前半部分
      const v6Parts = ip.split(':');
      return v6Parts.slice(0, 3).join(':') + ':xxxx:xxxx:xxxx';
    };

    // 标题映射
    const eventTitles = {
      'Online':  '🟢 服务器上线',
      'Offline': '🔴 服务器离线',
      'Alert':   '⚠️ 异常警报',
      'Renew':   '💰 续费通知',
      'Expire':  '🚨 到期预警',
      'Test':    '🧪 测试通知'
    };

    const title = eventTitles[event.event] || '📌 系统通知';
    
    let clientInfo = '';
    let targetInstanceId = null;

    if (event.clients && event.clients.length > 0) {
      const c = event.clients[0];
      targetInstanceId = c.uuid;
      
      const region = c.region ? ` [${c.region}]` : '';
      const hiddenIPv4 = hideIP(c.ipv4);
      const hiddenIPv6 = hideIP(c.ipv6);
      
      const mem = c.mem_total ? formatMemory(c.mem_total) : '0';
      const swap = c.swap_total ? formatSwapMemory(c.swap_total) : '0';
      const disk = c.disk_total ? formatMemory(c.disk_total) : '0';
      
      clientInfo += `🖥️服务器：${c.name}${region}\n`;
      clientInfo += `📝配置：${c.cpu_cores || '0'}C / ${mem}${swap !== '0' ? `+${swap}` : ''} / ${disk}\n`;
      clientInfo += `🌐IPv4：${hiddenIPv4}\n`;
      clientInfo += `🌐IPv6：${hiddenIPv6}\n`;

      // 流量管家
      const trafficLimit = formatTraffic(c.traffic_limit);
      clientInfo += `📶流量限额：${trafficLimit}${c.traffic_limit_type ? ` (${c.traffic_limit_type})` : ''}\n`;
      
      if (event.event === 'Renew' || event.event === 'Expire') {
         clientInfo += `💰账单：${c.currency || '$'}${c.price || '0'} (${c.billing_cycle || '0'}天/付)\n`;
      }
    } else {
      clientInfo += `🖥️服务器：未知设备\n📝配置：未知\n🌐IPv4：未知\n🌐IPv6：未知\n📶流量限额：未知\n`;
    }

    let message = clientInfo;
    message += `\n🗒️状态：${event.event} (${eventTitles[event.event] || '未知'})\n`;
    message += `⌚️时间：${getCSTTime(event.time)} (CST)`;

    if (event.message && event.message.trim()) {
      message += `\n\n📄详细描述：\n<i>${event.message}</i>`;
    }

    // 发送通知，传入真正的 UUID 以生成正确的按钮链接
    return await sendMessage(message, title, targetInstanceId);
  } catch (error) {
    return await sendMessage(`脚本解析出错: ${error.message}`, '❌ Error');
  }
}

八、总结

本文完整覆盖了 Komari 的：

• Debian 12 环境部署
• 安装与验证流程
• 管理员密码管理
• 前端 UI 与流量展示增强
• Telegram 通知模板

适合作为 Komari 的长期使用文档或二次定制基础。如后续需要：

• 拆分 JS 模块
• 自定义主题样式
• 对接更多通知渠道

可在此结构上持续扩展。