hunter-mate 0.1.7 → 0.1.11

package/dist/assets/extension/sidepanel/index.html

@@ -1,400 +1,13 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
-  <meta charset="UTF-8">
-  <title>HunterMate</title>
-  <style>
-    * { box-sizing: border-box; }
-    html, body { height: 100%; margin: 0; }
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      font-size: 13px;
-      background: #f9fafb;
-      color: #111827;
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
-    /* Header */
-    .hm-header {
-      padding: 10px 12px;
-      border-bottom: 1px solid #e5e7eb;
-      background: #fff;
-      position: sticky;
-      top: 0;
-      z-index: 10;
-    }
-    .hm-header-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 6px;
-    }
-    .hm-title {
-      font-size: 15px;
-      font-weight: 700;
-      margin: 0;
-    }
-    .hm-badge {
-      font-size: 10px;
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-weight: 500;
-    }
-    .hm-recording-indicator {
-      margin-top: 4px;
-      font-size: 11px;
-      color: #dc2626;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .hm-recording-dot {
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: #ef4444;
-      animation: hm-pulse 1.5s ease-in-out infinite;
-    }
-    @keyframes hm-pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.3; }
-    }
-
-    /* Current tab URL */
-    .hm-current-url {
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 12px;
-      color: #111827;
-      line-height: 1.4;
-    }
-
-    /* Jump input */
-    .hm-jump-row {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      margin-top: 6px;
-    }
-    .hm-jump-input {
-      flex: 1;
-      min-width: 0;
-      padding: 4px 8px;
-      border: 1px solid #d1d5db;
-      border-radius: 4px;
-      font-size: 12px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    }
-    .hm-jump-input:focus {
-      border-color: #60a5fa;
-      outline: none;
-    }
-    .hm-jump-btn {
-      padding: 4px 10px;
-      background: #2563eb;
-      color: #fff;
-      border-radius: 4px;
-      font-size: 12px;
-      flex-shrink: 0;
-      cursor: pointer;
-    }
-    .hm-jump-btn:hover {
-      background: #1d4ed8;
-    }
-    .hm-jump-msg {
-      margin-top: 4px;
-      font-size: 11px;
-      line-height: 1.3;
-    }
-    .hm-jump-success { color: #16a34a; }
-    .hm-jump-error   { color: #dc2626; }
-
-    /* Status dots */
-    .hm-footer-left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-    }
-    .hm-status-dots {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-    .hm-status-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      display: inline-block;
-    }
-    .hm-status-dot-online  { background: #22c55e; }
-    .hm-status-dot-offline { background: #ef4444; }
-    .hm-status-dot-pending { background: #9ca3af; }
-
-    /* Group tag variant */
-    .hm-tag-group:hover {
-      background: #faf5ff;
-      border-color: #d8b4fe;
-      color: #9333ea;
-    }
-    .hm-tag-group.hm-tag-copied {
-      background: #f3e8fd !important;
-      border-color: #d8b4fe !important;
-      color: #7e22ce !important;
-    }
-
-    .hm-body {
-      flex: 1;
-      overflow-y: auto;
-      padding: 8px 12px;
-    }
-    .hm-body::-webkit-scrollbar { width: 6px; }
-    .hm-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
-
-    .hm-section-title {
-      font-size: 12px;
-      font-weight: 600;
-      color: #4b5563;
-      margin: 10px 0 6px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .hm-section-title .hm-refresh {
-      font-size: 11px;
-      color: #2563eb;
-      cursor: pointer;
-      background: none;
-      border: none;
-      padding: 0;
-    }
-
-    .card { border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px; margin: 8px 0; background: #fff; }
-    .card h3 { margin: 0 0 8px; font-size: 13px; }
-    .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-right: 6px; }
-    .b-talent { background: #dbeafe; color: #1e40af; }
-    .b-job { background: #fef3c7; color: #92400e; }
-    .b-company { background: #d1fae5; color: #065f46; }
-    .b-list { background: #f3e8fd; color: #6b21a8; }
-    .b-unknown { background: #f3f4f6; color: #4b5563; }
-    .b-abort { background: #fee2e2; color: #991b1b; }
-    .actions { display: flex; gap: 6px; margin-top: 8px; }
-    button { padding: 6px 10px; cursor: pointer; border: none; border-radius: 4px; font-size: 12px; }
-    #parseBtn { background: #2563eb; color: white; flex: 1; }
-    #copyBtn { background: #16a34a; color: white; flex: 1; }
-    #copyBtn:disabled, #parseBtn:disabled { background: #d1d5db; color: #6b7280; cursor: not-allowed; }
-    .kv { display: flex; gap: 6px; margin: 3px 0; }
-    .kv .k { color: #6b7280; min-width: 64px; }
-    .kv .v { word-break: break-all; }
-    .entity-item { padding: 6px 4px; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
-    .entity-item:last-child { border-bottom: none; }
-    .entity-item .name { font-weight: 600; }
-    .entity-item .sub { color: #6b7280; font-size: 11px; }
-    .tabs { display: flex; gap: 4px; margin-bottom: 6px; }
-    .tabs button { background: #f3f4f6; color: #374151; }
-    .tabs button.active { background: #2563eb; color: white; }
-    .site-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
-    .site-item .dom { font-weight: 600; word-break: break-all; }
-    .site-item .ev { color: #6b7280; font-size: 11px; }
-    .site-item button { padding: 3px 8px; font-size: 11px; }
-    .enable-btn { background: #16a34a; color: white; }
-    .ignore-btn { background: #d1d5db; color: #374151; }
-    .empty { color: #6b7280; padding: 6px 0; font-size: 12px; text-align: center; }
-    .info { font-size: 11px; color: #6b7280; margin-top: 6px; }
-    .err { color: #dc2626; }
-    details summary { cursor: pointer; color: #374151; font-weight: 600; font-size: 12px; }
-
-    /* Footer */
-    .hm-footer {
-      padding: 8px 12px;
-      border-top: 1px solid #e5e7eb;
-      background: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-    }
-    .hm-footer-version {
-      font-size: 10px;
-      color: #6b7280;
-      min-width: 0;
-    }
-    .hm-footer-tags {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex-shrink: 0;
-    }
-    .hm-tag {
-      font-size: 10px;
-      padding: 2px 6px;
-      border-radius: 4px;
-      border: 1px solid #e5e7eb;
-      background: #f9fafb;
-      color: #4b5563;
-      cursor: pointer;
-      transition: all 0.15s;
-      font-family: monospace;
-    }
-    .hm-tag:hover {
-      background: #eff6ff;
-      border-color: #93c5fd;
-      color: #2563eb;
-    }
-    .hm-tag-copied {
-      background: #dbeafe !important;
-      border-color: #93c5fd !important;
-      color: #1d4ed8 !important;
-    }
-
-    /* Parse status */
-    .parse-status {
-      font-size: 11px;
-      margin-top: 6px;
-      padding: 4px 8px;
-      border-radius: 4px;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .parse-status.detecting { background: #f3f4f6; color: #4b5563; }
-    .parse-status.parsing { background: #dbeafe; color: #1e40af; }
-    .parse-status.new { background: #d1fae5; color: #065f46; }
-    .parse-status.stored { background: #fef3c7; color: #92400e; }
-    .parse-status.failed { background: #fee2e2; color: #991b1b; }
-    .parse-status .spinner {
-      width: 10px;
-      height: 10px;
-      border: 2px solid currentColor;
-      border-right-color: transparent;
-      border-radius: 50%;
-      animation: hm-spin 1s linear infinite;
-    }
-    @keyframes hm-spin { to { transform: rotate(360deg); } }
-
-    /* Tags */
-    .tag-row { margin-top: 8px; }
-    .tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
-    .tag-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
-      font-size: 10px;
-      padding: 2px 6px;
-      border-radius: 10px;
-      background: #eff6ff;
-      color: #1d4ed8;
-      border: 1px solid #bfdbfe;
-    }
-    .tag-chip button {
-      background: transparent;
-      border: none;
-      color: #1d4ed8;
-      cursor: pointer;
-      font-size: 11px;
-      line-height: 1;
-      padding: 0 2px;
-    }
-    .tag-input-row { display: flex; gap: 4px; }
-    .tag-input {
-      flex: 1;
-      min-width: 0;
-      padding: 4px 8px;
-      border: 1px solid #d1d5db;
-      border-radius: 4px;
-      font-size: 11px;
-    }
-    .tag-input:focus { border-color: #60a5fa; outline: none; }
-    .tag-add-btn {
-      padding: 4px 8px;
-      background: #2563eb;
-      color: #fff;
-      border-radius: 4px;
-      font-size: 11px;
-      cursor: pointer;
-    }
-    .entity-item .tag-list { margin-top: 3px; margin-bottom: 0; }
-  </style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HunterMate 猎伴</title>
+  <link rel="stylesheet" href="./index.css" />
 </head>
 <body>
-  <header class="hm-header">
-    <div class="hm-header-row">
-      <div id="currentUrl" class="hm-current-url" title="">加载中…</div>
-    </div>
-    <div class="hm-jump-row">
-      <input
-        id="jumpInput"
-        class="hm-jump-input"
-        type="text"
-        placeholder="tab <ID> / group <ID> / 数字,回车跳转"
-      />
-      <button id="jumpBtn" class="hm-jump-btn">跳转</button>
-    </div>
-    <div id="jumpMsg" class="hm-jump-msg hm-jump-success" style="display:none"></div>
-    <div id="jumpError" class="hm-jump-msg hm-jump-error" style="display:none"></div>
-    <div id="recordingIndicator" class="hm-recording-indicator" style="display:none">
-      <span class="hm-recording-dot"></span>
-      <span id="recordingText">采集中</span>
-    </div>
-  </header>
-
-  <main class="hm-body">
-    <div class="card" id="pageCard">
-      <h3>当前页面 <span id="clsBadge" class="badge b-unknown">未识别</span></h3>
-      <div id="clsDetail" class="empty">等待页面分类…</div>
-      <div id="parseStatus" class="parse-status detecting" style="display:none"></div>
-      <div id="entityTags" class="tag-row" style="display:none">
-        <div class="tag-list" id="entityTagList"></div>
-        <div class="tag-input-row">
-          <input id="tagInput" class="tag-input" type="text" placeholder="输入标签,回车添加" />
-          <button id="tagAddBtn" class="tag-add-btn">添加</button>
-        </div>
-      </div>
-      <div class="actions">
-        <button id="parseBtn" disabled>解析入库</button>
-        <button id="copyBtn" disabled>复制给 Agent</button>
-      </div>
-      <div id="parseResult" class="info"></div>
-    </div>
-
-    <div class="card" id="sitesCard" style="display:none">
-      <h3>发现新招聘站点 <span id="sitesCount" class="badge b-list">0</span></h3>
-      <div id="sitesList"></div>
-    </div>
-
-    <div class="card">
-      <div class="hm-section-title">
-        <span>最近入库</span>
-      </div>
-      <div class="tabs">
-        <button data-type="talent" class="active">人才</button>
-        <button data-type="job">职位</button>
-        <button data-type="company">公司</button>
-      </div>
-      <div id="entityList"><div class="empty">加载中…</div></div>
-    </div>
-  </main>
-
-  <footer class="hm-footer">
-    <div class="hm-footer-left">
-      <div class="hm-status-dots" id="statusDots">
-        <span id="dotExt" class="hm-status-dot hm-status-dot-pending" title="扩展状态检测中"></span>
-        <span id="dotServer" class="hm-status-dot hm-status-dot-pending" title="服务状态检测中"></span>
-        <span id="dotWs" class="hm-status-dot hm-status-dot-pending" title="WS 状态检测中"></span>
-      </div>
-      <div id="footerVersion" class="hm-footer-version">v0.0.0</div>
-    </div>
-    <div class="hm-footer-tags">
-      <button id="tabTag" class="hm-tag" style="display:none">tab --</button>
-      <button id="groupTag" class="hm-tag hm-tag-group" style="display:none">group --</button>
-    </div>
-  </footer>
-
-  <script type="module" src="index.js"></script>
+  <div id="root"></div>
+  <script src="./index.js"></script>
 </body>
-</html>
+</html>