zfsafe/web/main/templates/task_manager_modal.html

<!-- 指令对话框：Bootstrap Modal -->
<div
  class="modal fade"
  id="instrModal"
  tabindex="-1"
  aria-labelledby="instrModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl"><!-- 宽一些，可根据需求调整 -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="instrModalLabel">测试指令</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <!-- 新增一个提示容器 -->
        <div id="loadingMsg" style="text-align: center; padding: 10px;">请稍后，数据获取中...</div>
        <!-- 页签（已执行、待执行） -->
        <ul class="nav nav-tabs" id="instrTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button
              class="nav-link active"
              id="doneInstrTab"
              data-bs-toggle="tab"
              data-bs-target="#doneInstr"
              type="button"
              role="tab"
              aria-controls="doneInstr"
              aria-selected="true"
            >
              已执行
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link"
              id="todoInstrTab"
              data-bs-toggle="tab"
              data-bs-target="#todoInstr"
              type="button"
              role="tab"
              aria-controls="todoInstr"
              aria-selected="false"
            >
              待执行
            </button>
          </li>
        </ul>
        <div class="tab-content pt-3" id="instrTabContent">
          <!-- 已执行指令表格 -->
          <div
            class="tab-pane fade show active"
            id="doneInstr"
            role="tabpanel"
            aria-labelledby="doneInstrTab"
          >
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th style="width: 50px;">序号</th>
                  <th>执行指令</th>
                  <th>执行时间</th>
                  <th>执行结果</th>
                </tr>
              </thead>
              <tbody id="doneInstrTbody">
                <!-- 动态生成，固定 10 行 -->
              </tbody>
            </table>
            <!-- 分页控件 -->
            <nav>
              <ul class="pagination justify-content-end" id="doneInstrPagination">
                <li class="page-item">
                  <a class="page-link" href="#" id="doneInstrPrev">上一页</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#" id="doneInstrNext">下一页</a>
                </li>
              </ul>
            </nav>
          </div>
          <!-- 待执行指令表格 -->
          <div
            class="tab-pane fade"
            id="todoInstr"
            role="tabpanel"
            aria-labelledby="todoInstrTab"
          >
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th style="width: 50px;">序号</th>
                  <th>待执行指令</th>
                  <th style="width: 80px;">操作</th>
                </tr>
              </thead>
              <tbody id="todoInstrTbody">
                <!-- 动态生成，固定 10 行 -->
              </tbody>
            </table>
            <!-- 分页控件 -->
            <nav>
              <ul class="pagination justify-content-end" id="todoInstrPagination">
                <li class="page-item">
                  <a class="page-link" href="#" id="todoInstrPrev">上一页</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#" id="todoInstrNext">下一页</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <!-- 对话框底部：导出按钮居右 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          关闭
        </button>
        <button type="button" class="btn btn-primary" id="btnExport">
          导出
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 查看MSG对话框：Bootstrap Modal -->
<div class="modal fade" id="msgModal" tabindex="-1" aria-labelledby="msgModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="msgModalLabel">查看MSG</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <!-- Tab 导航 -->
        <ul class="nav nav-tabs" id="msgTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="submittedTab" data-bs-toggle="tab" data-bs-target="#submitted" type="button" role="tab" aria-controls="submitted" aria-selected="true">
              已提交
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="pendingTab" data-bs-toggle="tab" data-bs-target="#pending" type="button" role="tab" aria-controls="pending" aria-selected="false">
              待提交
            </button>
          </li>
        </ul>
        <div class="tab-content pt-3" id="msgTabContent">
          <!-- 已提交 Tab -->
          <div class="tab-pane fade show active" id="submitted" role="tabpanel" aria-labelledby="submittedTab">
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th style="width:50px;">序号</th>
                  <th>角色</th>
                  <th>内容</th>
                </tr>
              </thead>
              <tbody id="submittedTbody">
                <!-- 动态生成 10 行；数据不足时补空行 -->
              </tbody>
            </table>
            <!-- 分页控件 -->
            <nav>
              <ul class="pagination justify-content-end" id="submittedPagination">
                <li class="page-item">
                  <a class="page-link" href="#" id="submittedPrev">上一页</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#" id="submittedNext">下一页</a>
                </li>
              </ul>
            </nav>
            <!-- 导出按钮 -->
            <div class="text-end">
              <button class="btn btn-primary" id="btnExportSubmitted">导出</button>
            </div>
          </div>

          <!-- 待提交 Tab -->
          <div class="tab-pane fade" id="pending" role="tabpanel" aria-labelledby="pendingTab">
            <form id="pendingForm">
              <div class="mb-3">
                <label for="llmtype" class="form-label fw-bold" style="font-size:0.9rem">llmtype:</label>
                <input type="text" class="form-control" id="llmtype" placeholder="请输入 llmtype" disabled>
              </div>
              <div class="mb-3">
                <label for="pendingContent" class="form-label fw-bold" style="font-size:0.9rem">内容:</label>
                <textarea class="form-control" id="pendingContent" rows="5" placeholder="请输入内容"></textarea>
              </div>
              <!-- 你可以在此处增加一个保存按钮，由用户提交待提交的内容修改 -->
              <div class="text-end">
                <button type="button" class="btn btn-primary" id="btnSavePending">保存</button>
                <button type="button" class="btn btn-primary" id="btnNeedInstr">请求指令</button>
<!--                <button type="button" class="btn btn-primary" id="btnRedoInstr">重新执行</button>-->
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <!-- 关闭按钮 -->
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>