diff --git a/hcdbqb-management.html b/hcdbqb-management.html
new file mode 100644
index 0000000..0eb70de
--- /dev/null
+++ b/hcdbqb-management.html
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>可分页表格示例</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        padding: 24px;
+        background: #f7f8fb;
+        color: #222;
+      }
+      .card {
+        background: #fff;
+        padding: 16px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        margin: auto;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 12px;
+      }
+      th,
+      td {
+        padding: 10px 12px;
+        border-bottom: 1px solid #eee;
+        text-align: left;
+        font-size: 14px;
+      }
+      th {
+        background: #fafafa;
+        font-weight: 600;
+      }
+      .controls {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .pagination {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+        margin-left: auto;
+        flex-wrap: wrap;
+      }
+      .btn {
+        padding: 6px 10px;
+        border-radius: 6px;
+        border: 1px solid #ddd;
+        background: #fff;
+        cursor: pointer;
+        user-select: none;
+      }
+      .btn:disabled {
+        opacity: 0.5;
+        cursor: default;
+      }
+      .btn.primary {
+        background: #007bff;
+        color: #fff;
+        border-color: #007bff;
+      }
+      .status-btn {
+        padding: 4px 8px;
+        border-radius: 6px;
+        border: 1px solid #ccc;
+        cursor: pointer;
+      }
+      .status-0 {
+        background: red;
+        color: #fff;
+      }
+      .status-1 {
+        background: #2f9e44;
+        color: #fff;
+        border-color: #2f9e44;
+      }
+      .btn.active {
+        background: #007bff;
+        color: #fff;
+        border-color: #007bff;
+      }
+      select,
+      input[type="number"] {
+        padding: 6px;
+        border-radius: 6px;
+        border: 1px solid #ddd;
+      }
+      .small {
+        font-size: 13px;
+        color: #666;
+      }
+      @media (max-width: 640px) {
+        .controls {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+        .pagination {
+          margin-left: 0;
+        }
+      }
+      #noteModal {
+        display: none;
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+      }
+      #noteModal .dialog {
+        background: #fff;
+        padding: 16px;
+        border-radius: 8px;
+        width: 90%;
+        max-width: 520px;
+        box-sizing: border-box;
+      }
+      #noteModal textarea {
+        width: 100%;
+        min-width: 60%;
+        max-width: 100%;
+        min-height: 150px;
+        box-sizing: border-box;
+        padding: 8px;
+        border-radius: 6px;
+        border: 1px solid #ddd;
+        font-size: 14px;
+      }
+      .toast {
+        position: fixed;
+        top: -20px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: #4caf50;
+        color: #fff;
+        padding: 10px 16px;
+        border-radius: 6px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        font-size: 16px;
+        opacity: 0;
+        transition: all 0.3s ease;
+        z-index: 10000;
+        pointer-events: none;
+      }
+      .toast.show {
+        opacity: 1;
+        top: 20px;
+      }
+      table th,
+      table td {
+        text-align: center; 
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <table aria-describedby="tableDesc">
+        <thead>
+          <tr>
+            <th style="width: 40px">#</th>
+            <th style="width: 100px">姓名</th>
+            <th style="width: 90px">国家/地区代码</th>
+            <th style="width: 120px">电话号码</th>
+            <th style="width: 120px">微信ID</th>
+            <th style="width: 150px">邮箱</th>
+            <th style="width: 160px">添加时间</th>
+            <th style="width: 100px">是否联系</th>
+            <th style="width: 160px">备注</th>
+            <th style="width: 100px">操作</th>
+          </tr>
+        </thead>
+        <tbody id="tableBody"></tbody>
+      </table>
+      <div class="controls" style="margin-bottom: 8px; margin-top: 12px">
+        <div class="small">
+          每页显示
+          <select id="pageSizeSelect">
+            <option value="20" selected>20</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+          条
+        </div>
+
+        <div class="small">共 <span id="totalCount">0</span> 条</div>
+
+        <div class="pagination" id="pagination"></div>
+      </div>
+      <!-- 备注编辑模态 -->
+      <div id="noteModal">
+        <div class="dialog">
+          <h3 style="margin: 0 0 8px">编辑备注</h3>
+          <textarea
+            id="noteTextarea"
+            rows="6"
+            placeholder="输入备注..."
+          ></textarea>
+          <div
+            style="
+              margin-top: 10px;
+              display: flex;
+              justify-content: flex-end;
+              gap: 8px;
+            "
+          >
+            <button class="btn" id="noteCancelBtn">取消</button>
+            <button class="btn primary" id="noteSaveBtn">保存</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="toast" class="toast"></div>
+    <script type="module">
+      import { getMemberListApi,updateMemberStateApi,editMemberNoteApi }from './src/api/member.js'
+      let state = {
+        pageSize: 20,
+        currentPage: 1,
+        total: 0,
+        items:[]
+      };
+
+      // DOM
+      const tableBody = document.getElementById("tableBody");
+      const paginationEl = document.getElementById("pagination");
+      const totalCountEl = document.getElementById("totalCount");
+      const currentPageEl = document.getElementById("currentPage");
+      const showingRangeEl = document.getElementById("showingRange");
+      const pageSizeSelect = document.getElementById("pageSizeSelect");
+      const gotoInput = document.getElementById("gotoInput");
+
+      const noteModal = document.getElementById("noteModal");
+      const noteTextarea = document.getElementById("noteTextarea");
+      const noteCancelBtn = document.getElementById("noteCancelBtn");
+      const noteSaveBtn = document.getElementById("noteSaveBtn");
+
+      const toastEl = document.getElementById("toast");
+      let editingRowId = null;
+      function showToast(msg) {
+        toastEl.textContent = msg;
+        toastEl.classList.add("show");
+        setTimeout(() => toastEl.classList.remove("show"), 1000);
+      }
+      async function fetchPage(page, pageSize) {
+        try {
+          const res = await getMemberListApi({
+                page: page,
+                page_size: pageSize,
+              })
+          if (typeof res.code !== "undefined" && res.code !== 200) {
+            throw new Error(res.msg || "接口返回错误");
+          }
+          console.log(res)
+          const payload = res.data || {};
+          state.items = payload.list;
+          state.total = payload.total;
+        } catch (err) {
+          alert("获取数据失败");
+          state.total = 0;
+        }
+      }
+      // 渲染表格行
+      function renderTable() {
+        const startIndex = (state.currentPage - 1) * state.pageSize;
+        const items = state.items || [];
+
+        tableBody.innerHTML = items
+          .map((item, idx) => {
+             const serial = startIndex + idx + 1;
+            const statusClass = item.isRelated ? "status-1" : "status-0";
+            const statusText = item.isRelated ? "已联系" : "未联系";
+            return `
+        <tr>
+            <td>${serial}</td>
+            <td>${escapeHtml(item.name || "")}</td>
+            <td>${escapeHtml(item.code || "")}</td>
+            <td>${escapeHtml(item.telephone || "")}</td>
+            <td>${escapeHtml(item.wechat || "")}</td>
+            <td>${escapeHtml(item.email || "")}</td>
+            <td>${escapeHtml(item.createdAt || "")}</td>
+            <td>
+              <button class="status-btn ${statusClass}" data-action="toggle" data-id="${
+              item.id
+            }">${statusText}</button>
+            </td>
+            <td>${escapeHtml(item.note || "")}</td>
+             <td>
+              <button class="btn" data-action="editNote" data-id="${
+                item.id
+              }">编辑备注</button>
+            </td>
+        </tr>
+      `;
+          })
+          .join("");
+        totalCountEl.textContent = state.total;
+      }
+
+      tableBody.addEventListener("click", async (e) => {
+        // 切换状态
+        const toggler = e.target.closest('[data-action="toggle"]');
+        if (toggler) {
+          const id = toggler.getAttribute("data-id");
+          await handleToggle(id, toggler);
+          return;
+        }
+        // 编辑备注
+        const editBtn = e.target.closest('[data-action="editNote"]');
+        if (editBtn) {
+          const id = editBtn.getAttribute("data-id");
+          openNoteModal(id);
+          return;
+        }
+      });
+      // ---------- 切换联系状态 ----------
+      async function handleToggle(id, btnEl) {
+        const item = state.items.find((it) => String(it.id) === String(id));
+        if (!item) return;
+        const prev = item.isRelated;
+        const newVal = prev ? 0 : 1;
+        item.isRelated = newVal;
+        btnEl.textContent = newVal ? "已联系" : "未联系";
+        btnEl.classList.toggle("status-1", !!newVal);
+        btnEl.classList.toggle("status-0", !newVal);
+        try {
+          const res = await updateMemberStateApi({ id: item.id, state: newVal })
+          if (typeof res.code !== "undefined" && res.code !== 200) {
+            throw new Error(res.msg || "更新失败");
+          }
+          showToast("状态修改成功");
+        } catch (err) {
+          item.isRelated = prev;
+          btnEl.textContent = prev ? "已联系" : "未联系";
+          btnEl.classList.toggle("status-1", !!prev);
+          btnEl.classList.toggle("status-0", !prev);
+          alert("更新失败");
+        }
+      }
+
+      // ---------- 备注模态相关 ----------
+      function openNoteModal(id) {
+        const item = state.items.find((it) => String(it.id) === String(id));
+        if (!item) return;
+        editingRowId = id;
+        noteTextarea.value = item.note || "";
+        noteModal.style.display = "flex";
+        noteTextarea.focus();
+      }
+      function closeNoteModal() {
+        editingRowId = null;
+        noteTextarea.value = "";
+        noteModal.style.display = "none";
+      }
+
+      noteCancelBtn.addEventListener("click", closeNoteModal);
+
+      noteSaveBtn.addEventListener("click", async () => {
+        if (!editingRowId) return closeNoteModal();
+        const newNote = noteTextarea.value.trim();
+        const item = state.items.find((it) => String(it.id) === String(editingRowId));
+        if (!item) return closeNoteModal();
+
+        try {
+          const res = await editMemberNoteApi({ id: item.id, note: newNote })
+          if (typeof res.code !== "undefined" && res.code !== 200) {
+            throw new Error(res.msg || "保存失败");
+          }
+          const prevNote = item.note;
+          item.note = newNote;
+          renderTable();
+          showToast("备注保存成功");
+        } catch (err) {
+          alert("保存备注失败");
+        } finally {
+          closeNoteModal();
+        }
+      });
+      // 渲染分页控件（页码、上一页、下一页）
+      function renderPagination() {
+        const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize));
+        const current = Math.min(Math.max(1, state.currentPage), totalPages);
+        state.currentPage = current;
+
+        const pages = buildPageList(current, totalPages, 2);
+
+        let html = "";
+        html += `<button class="btn" data-action="prev" ${
+          current === 1 ? "disabled" : ""
+        }>上一页</button>`;
+        pages.forEach((p) => {
+          if (p === "...") {
+            html += `<span class="small" style="padding:6px 8px">...</span>`;
+          } else {
+            html += `<button class="btn ${
+              p === current ? "active" : ""
+            }" data-page="${p}">${p}</button>`;
+          }
+        });
+        html += `<button class="btn" data-action="next" ${
+          current === totalPages ? "disabled" : ""
+        }>下一页</button>`;
+
+        paginationEl.innerHTML = html;
+      }
+
+      function buildPageList(current, total, delta) {
+        const pages = [];
+        const left = Math.max(1, current - delta);
+        const right = Math.min(total, current + delta);
+
+        if (left > 1) {
+          pages.push(1);
+          if (left > 2) pages.push("...");
+        }
+
+        for (let i = left; i <= right; i++) pages.push(i);
+
+        if (right < total) {
+          if (right < total - 1) pages.push("...");
+          pages.push(total);
+        }
+
+        return pages;
+      }
+
+      paginationEl.addEventListener("click", (e) => {
+        const btn = e.target.closest("button");
+        if (!btn) return;
+        const action = btn.getAttribute("data-action");
+        if (action === "prev") {
+          if (state.currentPage > 1) state.currentPage--;
+        } else if (action === "next") {
+          const totalPages = Math.max(
+            1,
+            Math.ceil(state.total / state.pageSize)
+          );
+          if (state.currentPage < totalPages) state.currentPage++;
+        } else {
+          const p = Number(btn.getAttribute("data-page"));
+          if (!isNaN(p)) state.currentPage = p;
+        }
+        update();
+      });
+
+      // 每页条数变更
+      pageSizeSelect.addEventListener("change", () => {
+        const newSize = parseInt(pageSizeSelect.value, 10);
+        state.pageSize = newSize;
+        state.currentPage = 1;
+        update();
+        gotoInput.value = "";
+      });
+
+      async function update() {
+        const p = Math.max(1, state.currentPage);
+        state.currentPage = p;
+        await fetchPage(state.currentPage, state.pageSize);
+        renderTable();
+        renderPagination();
+      }
+
+      // 简单安全的文本转义（防 XSS）
+      function escapeHtml(s) {
+        return String(s)
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#39;");
+      }
+
+      // 首次渲染
+      update();
+    </script>
+  </body>
+</html>
diff --git a/src/api/member.js b/src/api/member.js
index 65e9fd0..fb10dcf 100644
--- a/src/api/member.js
+++ b/src/api/member.js
@@ -10,4 +10,27 @@ export function registerMemberApi(data) {
         method: "post",
         data: data,
     });
+}
+
+export function getMemberListApi(data){
+    return request({
+         url: `${API_BASE_URL}/api/member/getList`,
+        method: "post",
+        data: data,
+    })
+}
+export function updateMemberStateApi(data){
+     return request({
+         url: `${API_BASE_URL}/api/member/updateState`,
+        method: "post",
+        data: data,
+    })
+}
+
+export function editMemberNoteApi(data){
+     return request({
+         url: `${API_BASE_URL}/api/member/editNote`,
+        method: "post",
+        data: data,
+    })
 }
\ No newline at end of file
