MC_Report/public/js/pages/ticket-create.js

const TicketCreate = {
  files: [],

  render(container, { type, prefill, backLink }) {
    const user = Auth.user();
    const isReport = type === 'report';
    const isSuggestion = type === 'suggestion';
    const isAppeal = type === 'appeal';
    const typeLabel = isReport ? '举报' : isAppeal ? '申诉' : '建议';
    this.files = [];

    container.innerHTML = `
      <form id="ticket-form" enctype="multipart/form-data">
        <input type="hidden" name="type" value="${type}">

        <div class="card">
          <div class="card-h">æ<><C3A6>交${typeLabel}</div>
          <div class="card-b">
            <div class="form-group">
              <label>${typeLabel}标题 *</label>
              <input name="title" required placeholder="${isReport ? '如：玩家破å<C2B4><C3A5>建筑' : isAppeal ? '如：申请解除å°<C3A5>ç¦<C3A7>' : '如：增加领地ä¿<C3A4>护功能'}">
            </div>

            <div class="grid-2">
              <div class="form-group">
                <label>您的游æˆ<C3A6>å<EFBFBD><C3A5>称 *</label>
                <input name="reporter_game_name" required placeholder="Minecraft ID" value="${U.esc(prefill?.game_name || user?.game_name || '')}" ${prefill?.game_name ? 'readonly' : ''}>
              </div>
              <div class="form-group">
                <label>您的游æˆ<C3A6>UID *</label>
                <input name="reporter_game_uid" required placeholder="游æˆ<C3A6>UID" value="${U.esc(prefill?.game_uid || user?.game_uid || '')}" ${prefill?.game_uid ? 'readonly' : ''}>
              </div>
            </div>

            ${isReport ? `
            <div class="grid-2">
              <div class="form-group"><label>对方游æˆ<C3A6>å<EFBFBD><C3A5>称 (至少一é¡?</label><input name="target_game_name" placeholder="被举报者Minecraft ID"></div>
              <div class="form-group"><label>对方游æˆ<C3A6>UID (至少一é¡?</label><input name="target_game_uid" placeholder="被举报者UID"></div>
            </div>
            <div class="form-group"><label>举报原因 *</label>
              <input name="reason" list="reason-list" required placeholder="选择或自行输入举报原�>
              <datalist id="reason-list">
                <option value="ç ´å<C2B4><C3A5>建筑"><option value="盗窃物å“<C3A5>"><option value="外挂作弊">
                <option value="语言骚扰"><option value="æ<>¶æ„<C3A6>PVP"><option value="利用æ¼<C3A6>æ´ž">
                <option value="其他è¿<C3A8>规"><option value="诈骗"><option value="æ<>¶æ„<C3A6>辱骂">
              </datalist>
            </div>
            <div class="form-group"><label>详细æ<E280A0><C3A6>è¿°</label><textarea name="description" rows="4" placeholder="请详细æ<E280A0><C3A6>述事件ç»<C3A7>è¿?.."></textarea></div>
            <div class="form-group" style="display:flex;align-items:center;gap:8px;margin-top:12px">
              <input type="checkbox" name="is_admin_complaint" value="1" id="cb-admin" style="width:auto">
              <label for="cb-admin" style="margin:0;font-weight:500;text-transform:none;letter-spacing:0;color:var(--d)"><i class="fas fa-exclamation-triangle"></i> 投诉管ç<C2A1>†å‘˜ï¼ˆä»…æœ<C3A6>主å<C2BB>¯è§<C3A8>）</label>
            </div>
            ` : isAppeal ? `
            <div class="form-group"><label>申诉ç<E280B0>†ç”± *</label><input name="reason" required placeholder="如：误å°<C3A5>ã€<C3A3>è¯<C3A8>æ<EFBFBD>®ä¸<C3A4>足被å°<C3A5>ã€<C3A3>è¿<C3A8>规行为已纠正ç­?></div>
            <div class="form-group"><label>详细说明 *</label><textarea name="description" rows="5" placeholder="请详细说明情况，包括被å°<C3A5>时间ã€<C3A3>å<EFBFBD>¯èƒ½åŽŸå› ã€<C3A3>为什么应解å°<C3A5>ç­?.." required></textarea></div>
            ` : `
            <div class="form-group"><label>建议内容 *</label><textarea name="description" rows="5" placeholder="请详细æ<E280A0><C3A6>述您的建è®?.." required></textarea></div>
            `}
          </div>
        </div>

        <div class="card">
          <div class="card-h">上传文件 (图片/视频，æ¯<C3A6>个最å¤?0MB)</div>
          <div class="card-b">
            <div class="file-upload" id="file-drop">
              <i class="fas fa-cloud-upload-alt"></i>
              <p>点击选择文件或拖拽到此处</p>
              <p class="help">支æŒ<C3A6>: JPG/PNG/GIF/WebP/MP4/WebM &nbsp; æ¯<C3A6>个最å¤?0MB</p>
            </div>
            <input type="file" id="file-input" multiple accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/webm" style="display:none">
            <div class="file-list" id="file-list"></div>
          </div>
        </div>

        <div style="display:flex;gap:8px;justify-content:flex-end">
          ${backLink ? `<button type="button" class="btn btn-o" onclick="${backLink}">返回</button>` : ''}
          <button type="submit" class="btn btn-p btn-lg"><i class="fas fa-paper-plane"></i> æ<><C3A6>交</button>
        </div>
      </form>
    `;

    this.bindFileUpload(container);
    this.bindSubmit(container, type);
  },

  bindFileUpload(container) {
    const drop = container.querySelector('#file-drop');
    const input = container.querySelector('#file-input');
    const list = container.querySelector('#file-list');

    drop.onclick = () => input.click();
    input.onchange = () => this.addFiles(input.files, list);
    drop.ondragover = e => { e.preventDefault(); drop.style.borderColor = 'var(--p)'; };
    drop.ondragleave = () => { drop.style.borderColor = 'var(--g300)'; };
    drop.ondrop = e => {
      e.preventDefault();
      drop.style.borderColor = 'var(--g300)';
      this.addFiles(e.dataTransfer.files, list);
    };
  },

  addFiles(fileList, listEl) {
    const allowed = ['image/jpeg','image/png','image/gif','image/webp','video/mp4','video/webm'];
    for (const f of fileList) {
      if (!allowed.includes(f.type)) { alert(`ä¸<EFBFBD>支æŒ<EFBFBD>的文件类型: ${f.name}`); continue; }
      if (f.size > 50 * 1024 * 1024) { alert(`文件过大: ${f.name}`); continue; }
      if (this.files.length >= 5) { alert('最�个文�); break; }
      this.files.push(f);
    }
    this.refreshFileList(listEl);
  },

  refreshFileList(listEl) {
    listEl.innerHTML = this.files.map((f, i) => `
      <div class="file-item">
        <i class="fas fa-${f.type.startsWith('video') ? 'video' : 'image'}"></i>
        ${U.esc(f.name)} (${(f.size / 1024 / 1024).toFixed(2)}MB)
        <button type="button" onclick="TicketCreate.removeFile(${i})"><i class="fas fa-times"></i></button>
      </div>`).join('');
  },

  removeFile(i) { this.files.splice(i, 1); this.refreshFileList(document.getElementById('file-list')); },

  async bindSubmit(container, type) {
    const form = container.querySelector('#ticket-form');
    form.addEventListener('submit', async e => {
      e.preventDefault();
      const fd = new FormData(form);

      if (type === 'report') {
        const tgn = fd.get('target_game_name');
        const tgu = fd.get('target_game_uid');
        if (!tgn && !tgu) { return alert('举报需至少填写对方游æˆ<EFBFBD>å<EFBFBD><EFBFBD>或UID之一'); }
      }

      for (const f of this.files) fd.append('files', f);

      const btn = form.querySelector('[type="submit"]');
      btn.disabled = true;
      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> æ<EFBFBD><EFBFBD>交ä¸?..';
      try {
        const res = await API.req('POST', '/tickets', fd);
        if (res.tracking_token) {
          document.cookie = `tracking_token=${res.tracking_token};path=/;max-age=${365*24*3600};SameSite=Lax`;
        }
        alert('æ<><C3A6>交æˆ<C3A6>功ï¼<C3AF>å·¥å<C2A5>•ç¼–å<E28093>? #' + res.id);
        if (Auth.logged()) App.navigate('tickets');
        else App.navigate('home');
      } catch (ex) {
        alert(ex.message);
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-paper-plane"></i> æ<><C3A6>交';
      }
    });
  }
};