product-inventory-management.git

gaoluyang

昨天 0574578a03915dc58792e86e4abc75e00f15748f

天津-君歌化工
1.原型图

已添加3个文件

	doc/出厂检验原型.html	486 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	doc/原材料检验原型.html	456 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	doc/过程检验原型.html	491 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 doc/³ö³§¼ìÑéÔÐÍ.html

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,486 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>åºåæ£éª - ååå¾</title>
<style>
  :root {
    --primary: #409eff;
    --success: #67c23a;
    --danger: #f56c6c;
    --warning: #e6a23c;
    --text: #303133;
    --text-regular: #606266;
    --text-secondary: #909399;
    --placeholder: #a8abb2;
    --border: #dcdfe6;
    --border-light: #ebeef5;
    --bg: #f5f7fa;
    --fill: #fafafa;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 24px 32px 60px;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
  h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
  .sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; }

  /* ---------- tabs ---------- */
  .tabs { display: flex; gap: 8px; margin-bottom: 18px; }
  .tab {
    padding: 7px 18px; border: 1px solid var(--border); background: #fff;
    border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-regular);
    transition: all .15s;
  }
  .tab:hover { color: var(--primary); border-color: #c6e2ff; }
  .tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .view { display: none; }
  .view.active { display: block; }

  /* ---------- card / panel ---------- */
  .panel {
    background: #fff; border-radius: 4px; padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.06);
  }

  /* ---------- form controls (mock) ---------- */
  .label { display: block; color: var(--text-regular); margin-bottom: 6px; font-size: 14px; }
  .label .req { color: var(--danger); margin-right: 3px; }
  .ctrl {
    height: 32px; line-height: 30px; border: 1px solid var(--border);
    border-radius: 4px; padding: 0 11px; background: #fff; color: var(--text);
    position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .ctrl.ph { color: var(--placeholder); }
  .ctrl.sel { padding-right: 28px; }
  .ctrl.sel::after {
    content: ""; position: absolute; right: 11px; top: 50%; margin-top: -2px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--placeholder);
  }
  .ctrl.date { padding-right: 30px; }
  .ctrl .cal { position: absolute; right: 9px; top: 7px; }
  .ctrl.disabled { background: var(--fill); color: var(--text-secondary); }
  .ctrl.tree::before {
    content: ""; position: absolute; left: 9px; top: 50%; margin-top: -2px;
    border-left: 4px solid var(--placeholder); border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .ctrl.tree { padding-left: 22px; }

  /* search bar */
  .search-form {
    display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end;
  }
  .search-form .field { min-width: 210px; }
  .search-form .field.narrow { min-width: 240px; }
  .btn {
    height: 32px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--border);
    background: #fff; color: var(--text-regular); cursor: pointer; font-size: 14px;
  }
  .btn:hover { color: var(--primary); border-color: #c6e2ff; background: #ecf5ff; }
  .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
  .btn.primary:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; }
  .btn.danger { color: var(--danger); border-color: #fbc4c4; background: #fef0f0; }
  .btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

  .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

  /* ---------- table ---------- */
  table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
  th {
    background: var(--fill); color: var(--text-regular); font-weight: 600;
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
  }
  td {
    padding: 11px 12px; border-bottom: 1px solid var(--border-light);
    color: var(--text); white-space: nowrap;
  }
  tbody tr:hover td { background: #f5f7fa; }
  .cb {
    width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 2px;
    display: inline-block; vertical-align: middle; background: #fff;
  }
  .cb.checked { background: var(--primary); border-color: var(--primary); position: relative; }
  .cb.checked::after {
    content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px;
    border: 1px solid #fff; border-left: 0; border-top: 0; transform: rotate(45deg);
  }
  .link { color: var(--primary); cursor: pointer; }
  .link.disabled { color: #c0c4cc; cursor: not-allowed; }
  .ops { display: flex; gap: 12px; }

  .tag {
    display: inline-block; padding: 1px 9px; border-radius: 4px; font-size: 12px;
    line-height: 18px; border: 1px solid transparent;
  }
  .tag.success { color: var(--success); background: #f0f9eb; border-color: #e1f3d8; }
  .tag.danger  { color: var(--danger);  background: #fef0f0; border-color: #fde2e2; }
  .tag.info    { color: var(--text-secondary); background: #f4f4f5; border-color: #e9e9eb; }

  .pager {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    margin-top: 16px; color: var(--text-regular); font-size: 13px;
  }
  .pager .pg {
    min-width: 28px; height: 28px; line-height: 26px; text-align: center;
    border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 0 6px;
  }
  .pager .pg.active { background: var(--primary); border-color: var(--primary); color: #fff; }

  /* ---------- dialog mock ---------- */
  .dialog-wrap { display: flex; justify-content: center; padding: 10px 0; }
  .dialog {
    width: 78%; min-width: 900px; background: #fff; border-radius: 6px;
    box-shadow: 0 12px 32px 4px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.08);
    overflow: hidden;
  }
  .dialog-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light);
  }
  .dialog-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
  .dialog-head .x { color: var(--text-secondary); cursor: pointer; font-size: 18px; line-height: 1; }
  .dialog-body { padding: 22px 24px; }
  .dialog-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border-light);
  }

  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
  .hint { color: var(--text-secondary); font-size: 12px; margin-top: 5px; }
  .hint.co-link { color: var(--primary); }

  .note {
    margin-top: 22px; padding: 12px 16px; border-radius: 4px;
    background: #fdf6ec; border: 1px solid #faecd8; color: #b88230; font-size: 13px;
  }
  .note b { color: #a06b1f; }
  .note ul { margin: 6px 0 0; padding-left: 20px; }
  .note li { margin-bottom: 4px; }

  /* ---------- field mapping table ---------- */
  .map th, .map td { font-size: 13px; }
  .map .old { color: var(--text-secondary); text-decoration: line-through; }
  .map .new { color: var(--success); font-weight: 600; }
  .legend { display: flex; gap: 20px; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
  .legend i { font-style: normal; }
</style>
</head>
<body>

<h1>åºåæ£éª â ååå¾</h1>
<div class="sub">åæ®µå¨ééæç Â· åç§° / å¾å· æ²¿ç¨åèéé»è¾ï¼å¶ä½åæ®µæå·¥å¡«å</div>

<div class="tabs">
  <button class="tab active" data-view="v-list">â  åè¡¨é¡µ</button>
  <button class="tab" data-view="v-dialog">â¡ æ°å¢ / ç¼è¾å¼¹çª</button>
  <button class="tab" data-view="v-map">â¢ åæ®µå¯¹ç§</button>
</div>

<!-- ================= åè¡¨é¡µ ================= -->
<div class="view active" id="v-list">
  <div class="panel">
    <div class="search-form">
      <div class="field">
        <label class="label">åç§°</label>
        <div class="ctrl ph">è¯·è¾å¥åç§°æç´¢</div>
      </div>
      <div class="field narrow">
        <label class="label">æ£éªæ¥æ</label>
        <div class="ctrl ph date">
          èµ·æ¢æ¥æ
          <span class="cal">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
              <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
            </svg>
          </span>
        </div>
      </div>
      <div class="field" style="min-width:auto">
        <button class="btn primary">æç´¢</button>
      </div>
    </div>

    <div class="actions">
      <button class="btn primary">æ°å¢</button>
      <button class="btn">å¯¼åº</button>
      <button class="btn danger">å é¤</button>
    </div>

    <table>
      <thead>
        <tr>
          <th style="width:40px"><span class="cb"></span></th>
          <th>æ£éªæ¥æ</th>
          <th>åç§°</th>
          <th>å¾å·</th>
          <th>æè´¨</th>
          <th>æ°é</th>
          <th>æ½æ£æ°</th>
          <th>å¤å®</th>
          <th>æäº¤ç¶æ</th>
          <th style="width:290px">æä½</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="cb checked"></span></td>
          <td>2026-09-16</td>
          <td>çé</td>
          <td>TL-2024-001</td>
          <td>304</td>
          <td>100</td>
          <td>10</td>
          <td><span class="tag success">åæ ¼</span></td>
          <td>æªæäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
        <tr>
          <td><span class="cb"></span></td>
          <td>2026-09-15</td>
          <td>é¸é</td>
          <td>TL-2024-002</td>
          <td>316L</td>
          <td>200</td>
          <td>20</td>
          <td><span class="tag success">åæ ¼</span></td>
          <td>å·²æäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
        <tr>
          <td><span class="cb"></span></td>
          <td>2026-09-14</td>
          <td>æ¢åé</td>
          <td>TL-2024-003</td>
          <td>ç¢³é¢</td>
          <td>50</td>
          <td>5</td>
          <td><span class="tag danger">ä¸åæ ¼</span></td>
          <td>æªæäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="pager">
      <span>å± 3 æ¡</span>
      <span class="pg">åä¸é¡µ</span>
      <span class="pg active">1</span>
      <span class="pg">åä¸é¡µ</span>
    </div>
  </div>
</div>

<!-- ================= å¼¹çª ================= -->
<div class="view" id="v-dialog">
  <div class="panel">
    <div class="legend">
      <span><i>å®½ 70%</i></span>
      <span><i>æ ç¾å¨é¡¶é¨ï¼label-position="top"ï¼</i></span>
      <span><i>ä¸¤åå¸å±</i></span>
      <span><i>å¸¦ * ä¸ºå¿å¡«</i></span>
    </div>
    <div class="dialog-wrap">
      <div class="dialog">
        <div class="dialog-head">
          <h3>æ°å¢åºåæ£éª</h3>
          <span class="x">â</span>
        </div>
        <div class="dialog-body">
          <div class="grid">

            <div class="field">
              <label class="label"><span class="req">*</span>åç§°ï¼</label>
              <div class="ctrl sel ph tree">è¯·éæ©</div>
              <div class="hint co-link">æ å½¢éæ© Â· ä¸åãäº§ååç§°ãé»è¾ä¸è´</div>
            </div>

            <div class="field">
              <label class="label"><span class="req">*</span>å¾å·ï¼</label>
              <div class="ctrl sel ph">è¯·éæ©</div>
              <div class="hint co-link">éãåç§°ãèå¨å·æ°ï¼ä¸åãè§æ ¼åå·ãé»è¾ä¸è´</div>
            </div>

            <div class="field">
              <label class="label">æè´¨ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">éªæ¶ä¾æ®ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">æ°éï¼</label>
              <div class="ctrl ph">0.00</div>
            </div>

            <div class="field">
              <label class="label">æ½æ£æ°ï¼</label>
              <div class="ctrl ph">0.00</div>
            </div>

            <div class="field">
              <label class="label">å¾çº¸å³é®é¨ä½å°ºå¯¸ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">å®æµå³é®é¨ä½å°ºå¯¸ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">æ£éªæ¥æï¼</label>
              <div class="ctrl ph date">
                è¯·éæ©æ¥æ
                <span class="cal">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
                    <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
                  </svg>
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">å¥åºç¼å·ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">æå±è®¾å¤åç§°ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">é¡¹ç®åç§°ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">å¤å®ï¼</label>
              <div class="ctrl sel ph">è¯·éæ©</div>
              <div class="hint">åæ ¼ / ä¸åæ ¼</div>
            </div>

            <div class="field"></div>

          </div>

          <div class="note">
            <b>å·²å é¤çæ§åæ®µï¼</b>ææ éæ©ãåä½ãåæ ¼æ°éãä¸åæ ¼æ°éãæ£æµåä½ãæ£æµç»æãæ£éªåï¼
            ä»¥åä¸æ¹æ´åãææ åæ°è¡¨æ ¼ï¼ææ  / åä½ / æ åå¼ / åæ§å¼ / æ£éªå¼ï¼ãã
            åãäº§ååç§°ãæ¹åä¸ºãåç§°ãï¼åãè§æ ¼åå·ãæ¹åä¸ºãå¾å·ãï¼åãæ£æµæ¥æãæ¹åä¸ºãæ£éªæ¥æãã
          </div>
        </div>
        <div class="dialog-foot">
          <button class="btn primary">ç¡®è®¤</button>
          <button class="btn">åæ¶</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ================= åæ®µå¯¹ç§ ================= -->
<div class="view" id="v-map">
  <div class="panel">
    <table class="map">
      <thead>
        <tr>
          <th style="width:60px">åºå·</th>
          <th>æ°åæ®µ</th>
          <th style="width:110px">æ§ä»¶</th>
          <th style="width:110px">å¿å¡«</th>
          <th>å¤æ³¨</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td><td class="new">åç§°</td><td>æ å½¢éæ©</td><td>æ¯</td><td>åãäº§ååç§°ãï¼éæ©é»è¾ä¸å</td></tr>
        <tr><td>2</td><td class="new">å¾å·</td><td>ä¸æéæ©</td><td>æ¯</td><td>åãè§æ ¼åå·ãï¼éæ©é»è¾ä¸åï¼éåç§°èå¨</td></tr>
        <tr><td>3</td><td class="new">æè´¨</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>4</td><td class="new">éªæ¶ä¾æ®</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>5</td><td class="new">æ°é</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>6</td><td class="new">æ½æ£æ°</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>7</td><td class="new">å¾çº¸å³é®é¨ä½å°ºå¯¸</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>8</td><td class="new">å®æµå³é®é¨ä½å°ºå¯¸</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>9</td><td class="new">æ£éªæ¥æ</td><td>æ¥æéæ©</td><td>å¦</td><td>æå¡«ï¼åãæ£æµæ¥æãæ¹åï¼</td></tr>
        <tr><td>10</td><td class="new">å¥åºç¼å·</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>11</td><td class="new">æå±è®¾å¤åç§°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>12</td><td class="new">é¡¹ç®åç§°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>13</td><td class="new">å¤å®</td><td>ä¸æéæ©</td><td>å¦</td><td>åæ ¼ / ä¸åæ ¼ï¼å¾ç¡®è®¤</td></tr>
        <tr><td colspan="5" style="background:#fafafa;height:8px;padding:0;border:0"></td></tr>
        <tr><td>â</td><td class="old">ææ éæ©</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">åä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">ä¸åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£æµåä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£æµç»æ</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£éªå</td><td>â</td><td>â</td><td>å é¤ï¼ãåéæ£éªåãæä½ä¸å¹¶å»æ</td></tr>
        <tr><td>â</td><td class="old">ææ åæ°è¡¨æ ¼</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">éå®åå· / çäº§å·¥åå·</td><td>â</td><td>â</td><td>å é¤ï¼åè¡¨åä¸æç´¢æ¡ä»¶ä¸å¹¶å»æ</td></tr>
      </tbody>
    </table>

    <div class="note">
      <b>å·²æææ°è¦æ±è°æ´ï¼</b>
      <ul>
        <li>ãå¤å®ãä¸ºä¸æéæ©æ¡ï¼åæ ¼ / ä¸åæ ¼ï¼ã</li>
        <li>åææéå¤æå¨é¨å»æï¼ä¸éå·²æäº¤ãä¸éæ£éªåï¼ãç¼è¾ / æ¥ç / éä»¶ / æäº¤ / ä¸è½½ãåå¯ç¨ï¼ãåéæ£éªåãæä½å é¤ã</li>
        <li>å é¤çåæ®µï¼åè¡¨åä¸æç´¢æ¡ä»¶éä¹é½å»æï¼æç´¢æ¡ä»¶åªå©ãåç§° + æ£éªæ¥æãã</li>
      </ul>
      <b>å¾ç¡®è®¤ï¼</b>
      <ul>
        <li>ãå¾çº¸å³é®é¨ä½å°ºå¯¸ããå®æµå³é®é¨ä½å°ºå¯¸ãååè¾é¿ãåå®¹å¯è½ä¸æ¢ä¸è¡ï¼æ¯å¦éè¦æ¹ææ´è¡å®½åº¦æææ¬åï¼ååæåè¡è¾å¥ç»å¶ã</li>
      </ul>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.tab').forEach(function (btn) {
    btn.addEventListener('click', function () {
      document.querySelectorAll('.tab').forEach(function (b) { b.classList.remove('active'); });
      document.querySelectorAll('.view').forEach(function (v) { v.classList.remove('active'); });
      btn.classList.add('active');
      document.getElementById(btn.dataset.view).classList.add('active');
    });
  });
</script>
</body>
</html>

 doc/Ô²ÄÁÏ¼ìÑéÔÐÍ.html

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,456 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>åæææ£éª - ååå¾</title>
<style>
  :root {
    --primary: #409eff;
    --success: #67c23a;
    --danger: #f56c6c;
    --warning: #e6a23c;
    --text: #303133;
    --text-regular: #606266;
    --text-secondary: #909399;
    --placeholder: #a8abb2;
    --border: #dcdfe6;
    --border-light: #ebeef5;
    --bg: #f5f7fa;
    --fill: #fafafa;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 24px 32px 60px;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
  h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
  .sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; }

  /* ---------- tabs ---------- */
  .tabs { display: flex; gap: 8px; margin-bottom: 18px; }
  .tab {
    padding: 7px 18px; border: 1px solid var(--border); background: #fff;
    border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-regular);
    transition: all .15s;
  }
  .tab:hover { color: var(--primary); border-color: #c6e2ff; }
  .tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .view { display: none; }
  .view.active { display: block; }

  /* ---------- card / panel ---------- */
  .panel {
    background: #fff; border-radius: 4px; padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.06);
  }

  /* ---------- form controls (mock) ---------- */
  .label { display: block; color: var(--text-regular); margin-bottom: 6px; font-size: 14px; }
  .label .req { color: var(--danger); margin-right: 3px; }
  .ctrl {
    height: 32px; line-height: 30px; border: 1px solid var(--border);
    border-radius: 4px; padding: 0 11px; background: #fff; color: var(--text);
    position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .ctrl.ph { color: var(--placeholder); }
  .ctrl.sel { padding-right: 28px; }
  .ctrl.sel::after {
    content: ""; position: absolute; right: 11px; top: 50%; margin-top: -2px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--placeholder);
  }
  .ctrl.date { padding-right: 30px; }
  .ctrl .cal { position: absolute; right: 9px; top: 7px; }
  .ctrl.disabled { background: var(--fill); color: var(--text-secondary); }
  .ctrl.tree::before {
    content: ""; position: absolute; left: 9px; top: 50%; margin-top: -2px;
    border-left: 4px solid var(--placeholder); border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .ctrl.tree { padding-left: 22px; }

  /* search bar */
  .search-form {
    display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end;
  }
  .search-form .field { min-width: 210px; }
  .search-form .field.narrow { min-width: 240px; }
  .btn {
    height: 32px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--border);
    background: #fff; color: var(--text-regular); cursor: pointer; font-size: 14px;
  }
  .btn:hover { color: var(--primary); border-color: #c6e2ff; background: #ecf5ff; }
  .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
  .btn.primary:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; }
  .btn.danger { color: var(--danger); border-color: #fbc4c4; background: #fef0f0; }
  .btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

  .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

  /* ---------- table ---------- */
  table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
  th {
    background: var(--fill); color: var(--text-regular); font-weight: 600;
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
  }
  td {
    padding: 11px 12px; border-bottom: 1px solid var(--border-light);
    color: var(--text); white-space: nowrap;
  }
  tbody tr:hover td { background: #f5f7fa; }
  .cb {
    width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 2px;
    display: inline-block; vertical-align: middle; background: #fff;
  }
  .cb.checked { background: var(--primary); border-color: var(--primary); position: relative; }
  .cb.checked::after {
    content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px;
    border: 1px solid #fff; border-left: 0; border-top: 0; transform: rotate(45deg);
  }
  .link { color: var(--primary); cursor: pointer; }
  .link.disabled { color: #c0c4cc; cursor: not-allowed; }
  .ops { display: flex; gap: 12px; }

  .tag {
    display: inline-block; padding: 1px 9px; border-radius: 4px; font-size: 12px;
    line-height: 18px; border: 1px solid transparent;
  }
  .tag.success { color: var(--success); background: #f0f9eb; border-color: #e1f3d8; }
  .tag.danger  { color: var(--danger);  background: #fef0f0; border-color: #fde2e2; }
  .tag.info    { color: var(--text-secondary); background: #f4f4f5; border-color: #e9e9eb; }

  .pager {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    margin-top: 16px; color: var(--text-regular); font-size: 13px;
  }
  .pager .pg {
    min-width: 28px; height: 28px; line-height: 26px; text-align: center;
    border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 0 6px;
  }
  .pager .pg.active { background: var(--primary); border-color: var(--primary); color: #fff; }

  /* ---------- dialog mock ---------- */
  .dialog-wrap { display: flex; justify-content: center; padding: 10px 0; }
  .dialog {
    width: 78%; min-width: 900px; background: #fff; border-radius: 6px;
    box-shadow: 0 12px 32px 4px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.08);
    overflow: hidden;
  }
  .dialog-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light);
  }
  .dialog-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
  .dialog-head .x { color: var(--text-secondary); cursor: pointer; font-size: 18px; line-height: 1; }
  .dialog-body { padding: 22px 24px; }
  .dialog-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border-light);
  }

  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
  .hint { color: var(--text-secondary); font-size: 12px; margin-top: 5px; }
  .hint.co-link { color: var(--primary); }

  .note {
    margin-top: 22px; padding: 12px 16px; border-radius: 4px;
    background: #fdf6ec; border: 1px solid #faecd8; color: #b88230; font-size: 13px;
  }
  .note b { color: #a06b1f; }
  .note ul { margin: 6px 0 0; padding-left: 20px; }
  .note li { margin-bottom: 4px; }

  /* ---------- field mapping table ---------- */
  .map th, .map td { font-size: 13px; }
  .map .old { color: var(--text-secondary); text-decoration: line-through; }
  .map .new { color: var(--success); font-weight: 600; }
  .legend { display: flex; gap: 20px; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
  .legend i { font-style: normal; }
</style>
</head>
<body>

<h1>åæææ£éª â ååå¾</h1>
<div class="sub">åæ®µå¨ééæç Â· ç©æåç§°æ²¿ç¨åãäº§ååç§°ãèéé»è¾ï¼å¶ä½åæ®µæå·¥å¡«å</div>

<div class="tabs">
  <button class="tab active" data-view="v-list">â  åè¡¨é¡µ</button>
  <button class="tab" data-view="v-dialog">â¡ æ°å¢ / ç¼è¾å¼¹çª</button>
  <button class="tab" data-view="v-map">â¢ åæ®µå¯¹ç§</button>
</div>

<!-- ================= åè¡¨é¡µ ================= -->
<div class="view active" id="v-list">
  <div class="panel">
    <div class="search-form">
      <div class="field">
        <label class="label">ç©æåç§°</label>
        <div class="ctrl ph">è¯·è¾å¥ç©æåç§°æç´¢</div>
      </div>
      <div class="field narrow">
        <label class="label">æ£éªæ¥æ</label>
        <div class="ctrl ph date">
          èµ·æ¢æ¥æ
          <span class="cal">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
              <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
            </svg>
          </span>
        </div>
      </div>
      <div class="field" style="min-width:auto">
        <button class="btn primary">æç´¢</button>
      </div>
    </div>

    <div class="actions">
      <button class="btn primary">æ°å¢</button>
      <button class="btn">å¯¼åº</button>
      <button class="btn danger">å é¤</button>
    </div>

    <table>
      <thead>
        <tr>
          <th style="width:40px"><span class="cb"></span></th>
          <th>æ£éªæ¥æ</th>
          <th>é¡¹ç®</th>
          <th>ç©æåç§°</th>
          <th>æ£éªä¾æ®</th>
          <th>æ°é</th>
          <th>æ½æ£æ°é</th>
          <th>å¤å®</th>
          <th>æäº¤ç¶æ</th>
          <th style="width:260px">æä½</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="cb checked"></span></td>
          <td>2026-09-16</td>
          <td>ä¸ç³åäºæ</td>
          <td>ä¸éé¢æ¿æ</td>
          <td>GB/T 3280</td>
          <td>100</td>
          <td>10</td>
          <td><span class="tag success">åæ ¼</span></td>
          <td>æªæäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
        <tr>
          <td><span class="cb"></span></td>
          <td>2026-09-15</td>
          <td>ä¸ç³åäºæ</td>
          <td>æ ç¼é¢ç®¡</td>
          <td>GB/T 8163</td>
          <td>200</td>
          <td>20</td>
          <td><span class="tag danger">ä¸åæ ¼</span></td>
          <td>å·²æäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
        <tr>
          <td><span class="cb"></span></td>
          <td>2026-09-14</td>
          <td>æåç¼å</td>
          <td>ç¢³é¢æ³å°</td>
          <td>GB/T 9119</td>
          <td>50</td>
          <td>5</td>
          <td><span class="tag success">åæ ¼</span></td>
          <td>æªæäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="pager">
      <span>å± 3 æ¡</span>
      <span class="pg">åä¸é¡µ</span>
      <span class="pg active">1</span>
      <span class="pg">åä¸é¡µ</span>
    </div>
  </div>
</div>

<!-- ================= å¼¹çª ================= -->
<div class="view" id="v-dialog">
  <div class="panel">
    <div class="legend">
      <span><i>å®½ 70%</i></span>
      <span><i>æ ç¾å¨é¡¶é¨ï¼label-position="top"ï¼</i></span>
      <span><i>ä¸¤åå¸å±</i></span>
      <span><i>å¸¦ * ä¸ºå¿å¡«</i></span>
    </div>
    <div class="dialog-wrap">
      <div class="dialog">
        <div class="dialog-head">
          <h3>æ°å¢åæææ£éª</h3>
          <span class="x">â</span>
        </div>
        <div class="dialog-body">
          <div class="grid">

            <div class="field">
              <label class="label">é¡¹ç®ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label"><span class="req">*</span>ç©æåç§°ï¼</label>
              <div class="ctrl sel ph tree">è¯·éæ©</div>
              <div class="hint co-link">æ å½¢éæ© Â· ä¸åãäº§ååç§°ãé»è¾ä¸è´</div>
            </div>

            <div class="field">
              <label class="label">æ£éªä¾æ®ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">æ°éï¼</label>
              <div class="ctrl ph">0.00</div>
            </div>

            <div class="field">
              <label class="label">æ½æ£æ°éï¼</label>
              <div class="ctrl ph">0.00</div>
            </div>

            <div class="field">
              <label class="label">æ£éªæ¥æï¼</label>
              <div class="ctrl ph date">
                è¯·éæ©æ¥æ
                <span class="cal">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
                    <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
                  </svg>
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">å¼å¸¸å¤æ³¨ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">å¤å®ï¼</label>
              <div class="ctrl sel ph">è¯·éæ©</div>
              <div class="hint">åæ ¼ / ä¸åæ ¼</div>
            </div>

          </div>

          <div class="note">
            <b>å·²å é¤çæ§åæ®µï¼</b>ä¾åºåãè§æ ¼åå·ãææ éæ©ãåä½ãåæ ¼æ°éãä¸åæ ¼æ°éãæ£æµåä½ãæ£æµç»æãæ£éªåï¼
            ä»¥åä¸æ¹æ´åãææ åæ°è¡¨æ ¼ï¼ææ  / åä½ / æ åå¼ / åæ§å¼ / æ£éªå¼ï¼ãã
            åãäº§ååç§°ãæ¹åä¸ºãç©æåç§°ãï¼åãæ£æµæ¥æãæ¹åä¸ºãæ£éªæ¥æãã
          </div>
        </div>
        <div class="dialog-foot">
          <button class="btn primary">ç¡®è®¤</button>
          <button class="btn">åæ¶</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ================= åæ®µå¯¹ç§ ================= -->
<div class="view" id="v-map">
  <div class="panel">
    <table class="map">
      <thead>
        <tr>
          <th style="width:60px">åºå·</th>
          <th>æ°åæ®µ</th>
          <th style="width:110px">æ§ä»¶</th>
          <th style="width:110px">å¿å¡«</th>
          <th>å¤æ³¨</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td><td class="new">é¡¹ç®</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>2</td><td class="new">ç©æåç§°</td><td>æ å½¢éæ©</td><td>æ¯</td><td>åãäº§ååç§°ãï¼éæ©é»è¾ä¸å</td></tr>
        <tr><td>3</td><td class="new">æ£éªä¾æ®</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>4</td><td class="new">æ°é</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>5</td><td class="new">æ½æ£æ°é</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>6</td><td class="new">æ£éªæ¥æ</td><td>æ¥æéæ©</td><td>å¦</td><td>æå¡«ï¼åãæ£æµæ¥æãæ¹åï¼</td></tr>
        <tr><td>7</td><td class="new">å¼å¸¸å¤æ³¨</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>8</td><td class="new">å¤å®</td><td>ä¸æéæ©</td><td>å¦</td><td>åæ ¼ / ä¸åæ ¼</td></tr>
        <tr><td colspan="5" style="background:#fafafa;height:8px;padding:0;border:0"></td></tr>
        <tr><td>â</td><td class="old">ä¾åºå</td><td>â</td><td>â</td><td>å é¤ï¼æç´¢æ¡ä»¶ä¸å¹¶å»æ</td></tr>
        <tr><td>â</td><td class="old">è§æ ¼åå·</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">ææ éæ©</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">åä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">ä¸åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£æµåä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£æµç»æ</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£éªå</td><td>â</td><td>â</td><td>å é¤ï¼ãåéæ£éªåãæä½ä¸å¹¶å»æ</td></tr>
        <tr><td>â</td><td class="old">ææ åæ°è¡¨æ ¼</td><td>â</td><td>â</td><td>å é¤</td></tr>
      </tbody>
    </table>

    <div class="note">
      <b>å·²æææ°è¦æ±è°æ´ï¼</b>
      <ul>
        <li>ãå¤å®ãä¸ºä¸æéæ©æ¡ï¼åæ ¼ / ä¸åæ ¼ï¼ã</li>
        <li>åææéå¤æä¸ç½®ç°é»è¾å¨é¨å»æï¼ä¸éå·²æäº¤ãä¸éæ£éªåï¼æ°éä¹ä¸ååéè´å°è´¦èå¨ç½®ç°ï¼ãç¼è¾ / æ¥ç / éä»¶ / æäº¤ / ä¸è½½ãåå¯ç¨ï¼ãåéæ£éªåãæä½å é¤ã</li>
        <li>å é¤çåæ®µï¼åè¡¨åä¸æç´¢æ¡ä»¶éä¹é½å»æï¼æç´¢æ¡ä»¶åªå©ãç©æåç§° + æ£éªæ¥æãã</li>
        <li>åè¡¨åï¼æ£éªæ¥æãé¡¹ç®ãç©æåç§°ãæ£éªä¾æ®ãæ°éãæ½æ£æ°éãå¤å®ãæäº¤ç¶æãæä½ããå¼å¸¸å¤æ³¨ãæ¯é¿ææ¬ï¼ä¸æ¾è¿åè¡¨åï¼åªå¨å¼¹çªéå¡«ã</li>
      </ul>
      <b>å¾ç¡®è®¤ï¼</b>
      <ul>
        <li>ãç©æåç§°ãæ¯å¦å°±æ¯åãäº§ååç§°ãé£å¥æ å½¢éæ©ï¼ååææ¤ç»å¶ï¼åä¸¤æ¬¡éæä¹æ¯è¿ä¸ªå¯¹åºå³ç³»ï¼ã</li>
        <li>ãå¼å¸¸å¤æ³¨ãåå®¹å¯è½ä¸æ¢ä¸è¡ï¼æ¯å¦éè¦æ¹ææ´è¡å®½åº¦æææ¬åï¼</li>
      </ul>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.tab').forEach(function (btn) {
    btn.addEventListener('click', function () {
      document.querySelectorAll('.tab').forEach(function (b) { b.classList.remove('active'); });
      document.querySelectorAll('.view').forEach(function (v) { v.classList.remove('active'); });
      btn.classList.add('active');
      document.getElementById(btn.dataset.view).classList.add('active');
    });
  });
</script>
</body>
</html>

 doc/¹ý³Ì¼ìÑéÔÐÍ.html

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,491 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>è¿ç¨æ£éª - ååå¾</title>
<style>
  :root {
    --primary: #409eff;
    --success: #67c23a;
    --danger: #f56c6c;
    --warning: #e6a23c;
    --text: #303133;
    --text-regular: #606266;
    --text-secondary: #909399;
    --placeholder: #a8abb2;
    --border: #dcdfe6;
    --border-light: #ebeef5;
    --bg: #f5f7fa;
    --fill: #fafafa;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 24px 32px 60px;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
  h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
  .sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; }

  /* ---------- tabs ---------- */
  .tabs { display: flex; gap: 8px; margin-bottom: 18px; }
  .tab {
    padding: 7px 18px; border: 1px solid var(--border); background: #fff;
    border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-regular);
    transition: all .15s;
  }
  .tab:hover { color: var(--primary); border-color: #c6e2ff; }
  .tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .view { display: none; }
  .view.active { display: block; }

  /* ---------- card / panel ---------- */
  .panel {
    background: #fff; border-radius: 4px; padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.06);
  }

  /* ---------- form controls (mock) ---------- */
  .label { display: block; color: var(--text-regular); margin-bottom: 6px; font-size: 14px; }
  .label .req { color: var(--danger); margin-right: 3px; }
  .ctrl {
    height: 32px; line-height: 30px; border: 1px solid var(--border);
    border-radius: 4px; padding: 0 11px; background: #fff; color: var(--text);
    position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .ctrl.ph { color: var(--placeholder); }
  .ctrl.sel { padding-right: 28px; }
  .ctrl.sel::after {
    content: ""; position: absolute; right: 11px; top: 50%; margin-top: -2px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--placeholder);
  }
  .ctrl.date { padding-right: 30px; }
  .ctrl .cal { position: absolute; right: 9px; top: 7px; }
  .ctrl.disabled { background: var(--fill); color: var(--text-secondary); }
  .ctrl.tree::before {
    content: ""; position: absolute; left: 9px; top: 50%; margin-top: -2px;
    border-left: 4px solid var(--placeholder); border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .ctrl.tree { padding-left: 22px; }

  /* search bar */
  .search-form {
    display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end;
  }
  .search-form .field { min-width: 210px; }
  .search-form .field.narrow { min-width: 240px; }
  .btn {
    height: 32px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--border);
    background: #fff; color: var(--text-regular); cursor: pointer; font-size: 14px;
  }
  .btn:hover { color: var(--primary); border-color: #c6e2ff; background: #ecf5ff; }
  .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
  .btn.primary:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; }
  .btn.danger { color: var(--danger); border-color: #fbc4c4; background: #fef0f0; }
  .btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

  .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

  /* ---------- table ---------- */
  table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
  th {
    background: var(--fill); color: var(--text-regular); font-weight: 600;
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
  }
  td {
    padding: 11px 12px; border-bottom: 1px solid var(--border-light);
    color: var(--text); white-space: nowrap;
  }
  tbody tr:hover td { background: #f5f7fa; }
  .cb {
    width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 2px;
    display: inline-block; vertical-align: middle; background: #fff;
  }
  .cb.checked { background: var(--primary); border-color: var(--primary); position: relative; }
  .cb.checked::after {
    content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px;
    border: 1px solid #fff; border-left: 0; border-top: 0; transform: rotate(45deg);
  }
  .link { color: var(--primary); cursor: pointer; }
  .link.disabled { color: #c0c4cc; cursor: not-allowed; }
  .ops { display: flex; gap: 12px; }

  .tag {
    display: inline-block; padding: 1px 9px; border-radius: 4px; font-size: 12px;
    line-height: 18px; border: 1px solid transparent;
  }
  .tag.success { color: var(--success); background: #f0f9eb; border-color: #e1f3d8; }
  .tag.danger  { color: var(--danger);  background: #fef0f0; border-color: #fde2e2; }
  .tag.info    { color: var(--text-secondary); background: #f4f4f5; border-color: #e9e9eb; }

  .pager {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    margin-top: 16px; color: var(--text-regular); font-size: 13px;
  }
  .pager .pg {
    min-width: 28px; height: 28px; line-height: 26px; text-align: center;
    border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 0 6px;
  }
  .pager .pg.active { background: var(--primary); border-color: var(--primary); color: #fff; }

  /* ---------- dialog mock ---------- */
  .dialog-wrap { display: flex; justify-content: center; padding: 10px 0; }
  .dialog {
    width: 78%; min-width: 900px; background: #fff; border-radius: 6px;
    box-shadow: 0 12px 32px 4px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.08);
    overflow: hidden;
  }
  .dialog-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light);
  }
  .dialog-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
  .dialog-head .x { color: var(--text-secondary); cursor: pointer; font-size: 18px; line-height: 1; }
  .dialog-body { padding: 22px 24px; }
  .dialog-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border-light);
  }

  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
  .hint { color: var(--text-secondary); font-size: 12px; margin-top: 5px; }
  .hint.co-link { color: var(--primary); }

  .note {
    margin-top: 22px; padding: 12px 16px; border-radius: 4px;
    background: #fdf6ec; border: 1px solid #faecd8; color: #b88230; font-size: 13px;
  }
  .note b { color: #a06b1f; }
  .note ul { margin: 6px 0 0; padding-left: 20px; }
  .note li { margin-bottom: 4px; }

  /* ---------- field mapping table ---------- */
  .map th, .map td { font-size: 13px; }
  .map .old { color: var(--text-secondary); text-decoration: line-through; }
  .map .new { color: var(--success); font-weight: 600; }
  .legend { display: flex; gap: 20px; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
  .legend i { font-style: normal; }
</style>
</head>
<body>

<h1>è¿ç¨æ£éª â ååå¾</h1>
<div class="sub">åæ®µå¨ééæç Â· åç§° / è§æ ¼åå· æ²¿ç¨åèéé»è¾ï¼å¶ä½åæ®µæå·¥å¡«å</div>

<div class="tabs">
  <button class="tab active" data-view="v-list">â  åè¡¨é¡µ</button>
  <button class="tab" data-view="v-dialog">â¡ æ°å¢ / ç¼è¾å¼¹çª</button>
  <button class="tab" data-view="v-map">â¢ åæ®µå¯¹ç§</button>
</div>

<!-- ================= åè¡¨é¡µ ================= -->
<div class="view active" id="v-list">
  <div class="panel">
    <div class="search-form">
      <div class="field">
        <label class="label">åç§°</label>
        <div class="ctrl ph">è¯·è¾å¥åç§°æç´¢</div>
      </div>
      <div class="field narrow">
        <label class="label">æ£éªæ¥æ</label>
        <div class="ctrl ph date">
          èµ·æ¢æ¥æ
          <span class="cal">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
              <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
            </svg>
          </span>
        </div>
      </div>
      <div class="field" style="min-width:auto">
        <button class="btn primary">æç´¢</button>
      </div>
    </div>

    <div class="actions">
      <button class="btn primary">æ°å¢</button>
      <button class="btn">å¯¼åº</button>
      <button class="btn danger">å é¤</button>
    </div>

    <table>
      <thead>
        <tr>
          <th style="width:40px"><span class="cb"></span></th>
          <th>æ£éªæ¥æ</th>
          <th>åç§°</th>
          <th>è§æ ¼åå·</th>
          <th>æè´¨</th>
          <th>æ°é</th>
          <th>æ½æ£æ°</th>
          <th>å¤å®</th>
          <th>æäº¤ç¶æ</th>
          <th style="width:290px">æä½</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="cb checked"></span></td>
          <td>2026-09-16</td>
          <td>éä½</td>
          <td>DN50 PN16</td>
          <td>304</td>
          <td>100</td>
          <td>10</td>
          <td><span class="tag success">åæ ¼</span></td>
          <td>æªæäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
        <tr>
          <td><span class="cb"></span></td>
          <td>2026-09-15</td>
          <td>éç</td>
          <td>DN80 PN25</td>
          <td>316L</td>
          <td>200</td>
          <td>20</td>
          <td><span class="tag success">åæ ¼</span></td>
          <td>å·²æäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
        <tr>
          <td><span class="cb"></span></td>
          <td>2026-09-14</td>
          <td>éæ</td>
          <td>DN100 PN16</td>
          <td>ç¢³é¢</td>
          <td>50</td>
          <td>5</td>
          <td><span class="tag danger">ä¸åæ ¼</span></td>
          <td>æªæäº¤</td>
          <td>
            <div class="ops">
              <span class="link">ç¼è¾</span>
              <span class="link">æ¥ç</span>
              <span class="link">éä»¶</span>
              <span class="link">æäº¤</span>
              <span class="link">ä¸è½½</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="pager">
      <span>å± 3 æ¡</span>
      <span class="pg">åä¸é¡µ</span>
      <span class="pg active">1</span>
      <span class="pg">åä¸é¡µ</span>
    </div>
  </div>
</div>

<!-- ================= å¼¹çª ================= -->
<div class="view" id="v-dialog">
  <div class="panel">
    <div class="legend">
      <span><i>å®½ 70%</i></span>
      <span><i>æ ç¾å¨é¡¶é¨ï¼label-position="top"ï¼</i></span>
      <span><i>ä¸¤åå¸å±</i></span>
      <span><i>å¸¦ * ä¸ºå¿å¡«</i></span>
    </div>
    <div class="dialog-wrap">
      <div class="dialog">
        <div class="dialog-head">
          <h3>æ°å¢è¿ç¨æ£éª</h3>
          <span class="x">â</span>
        </div>
        <div class="dialog-body">
          <div class="grid">

            <div class="field">
              <label class="label"><span class="req">*</span>åç§°ï¼</label>
              <div class="ctrl sel ph tree">è¯·éæ©</div>
              <div class="hint co-link">æ å½¢éæ© Â· ä¸åãäº§ååç§°ãé»è¾ä¸è´</div>
            </div>

            <div class="field">
              <label class="label"><span class="req">*</span>è§æ ¼åå·ï¼</label>
              <div class="ctrl sel ph">è¯·éæ©</div>
              <div class="hint co-link">éãåç§°ãèå¨å·æ°ï¼é»è¾ä¸å</div>
            </div>

            <div class="field">
              <label class="label">æè´¨ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">éªæ¶ä¾æ®ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">æ°éï¼</label>
              <div class="ctrl ph">0.00</div>
            </div>

            <div class="field">
              <label class="label">æ½æ£æ°ï¼</label>
              <div class="ctrl ph">0.00</div>
            </div>

            <div class="field">
              <label class="label">ä¸»è¦ææ¯åæ°ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">å®éææ¯åæ°ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">è¯´æä¹¦ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">æ£éªæ¥æï¼</label>
              <div class="ctrl ph date">
                è¯·éæ©æ¥æ
                <span class="cal">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
                    <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
                  </svg>
                </span>
              </div>
            </div>

            <div class="field">
              <label class="label">å¥åºç¼å·ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">æå±è®¾å¤åç§°ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">é¡¹ç®åç§°ï¼</label>
              <div class="ctrl ph">è¯·è¾å¥</div>
            </div>

            <div class="field">
              <label class="label">å¤å®ï¼</label>
              <div class="ctrl sel ph">è¯·éæ©</div>
              <div class="hint">åæ ¼ / ä¸åæ ¼</div>
            </div>

          </div>

          <div class="note">
            <b>å·²å é¤çæ§åæ®µï¼</b>å·¥åºãææ éæ©ãåä½ãåæ ¼æ°éãä¸åæ ¼æ°éãæ£æµåä½ãæ£æµç»æãæ£éªåï¼
            ä»¥åä¸æ¹æ´åãææ åæ°è¡¨æ ¼ï¼ææ  / åä½ / æ åå¼ / åæ§å¼ / æ£éªå¼ï¼ãã
            åãäº§ååç§°ãæ¹åä¸ºãåç§°ãï¼åãæ£æµæ¥æãæ¹åä¸ºãæ£éªæ¥æãã
          </div>
        </div>
        <div class="dialog-foot">
          <button class="btn primary">ç¡®è®¤</button>
          <button class="btn">åæ¶</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ================= åæ®µå¯¹ç§ ================= -->
<div class="view" id="v-map">
  <div class="panel">
    <table class="map">
      <thead>
        <tr>
          <th style="width:60px">åºå·</th>
          <th>æ°åæ®µ</th>
          <th style="width:110px">æ§ä»¶</th>
          <th style="width:110px">å¿å¡«</th>
          <th>å¤æ³¨</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td><td class="new">åç§°</td><td>æ å½¢éæ©</td><td>æ¯</td><td>åãäº§ååç§°ãï¼éæ©é»è¾ä¸å</td></tr>
        <tr><td>2</td><td class="new">è§æ ¼åå·</td><td>ä¸æéæ©</td><td>æ¯</td><td>éæ©é»è¾ä¸åï¼éåç§°èå¨</td></tr>
        <tr><td>3</td><td class="new">æè´¨</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>4</td><td class="new">éªæ¶ä¾æ®</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>5</td><td class="new">æ°é</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>6</td><td class="new">æ½æ£æ°</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>7</td><td class="new">ä¸»è¦ææ¯åæ°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>8</td><td class="new">å®éææ¯åæ°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>9</td><td class="new">è¯´æä¹¦</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>10</td><td class="new">æ£éªæ¥æ</td><td>æ¥æéæ©</td><td>å¦</td><td>æå¡«ï¼åãæ£æµæ¥æãæ¹åï¼</td></tr>
        <tr><td>11</td><td class="new">å¥åºç¼å·</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>12</td><td class="new">æå±è®¾å¤åç§°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>13</td><td class="new">é¡¹ç®åç§°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
        <tr><td>14</td><td class="new">å¤å®</td><td>ä¸æéæ©</td><td>å¦</td><td>åæ ¼ / ä¸åæ ¼ï¼å¾ç¡®è®¤</td></tr>
        <tr><td colspan="5" style="background:#fafafa;height:8px;padding:0;border:0"></td></tr>
        <tr><td>â</td><td class="old">å·¥åº</td><td>â</td><td>â</td><td>ææ°åæ®µæ¸åå·²ç§»é¤ï¼å¾ç¡®è®¤</td></tr>
        <tr><td>â</td><td class="old">ææ éæ©</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">åä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">ä¸åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£æµåä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£æµç»æ</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">æ£éªå</td><td>â</td><td>â</td><td>å é¤ï¼ãåéæ£éªåãæä½ä¸å¹¶å»æ</td></tr>
        <tr><td>â</td><td class="old">ææ åæ°è¡¨æ ¼</td><td>â</td><td>â</td><td>å é¤</td></tr>
        <tr><td>â</td><td class="old">çäº§å·¥åå·</td><td>â</td><td>â</td><td>å é¤ï¼åè¡¨åä¸æç´¢æ¡ä»¶ä¸å¹¶å»æ</td></tr>
      </tbody>
    </table>

    <div class="note">
      <b>å·²æææ°è¦æ±è°æ´ï¼</b>
      <ul>
        <li>ãå¤å®ãä¸ºä¸æéæ©æ¡ï¼åæ ¼ / ä¸åæ ¼ï¼ã</li>
        <li>åææéå¤æå¨é¨å»æï¼ä¸éå·²æäº¤ãä¸éæ£éªåï¼ãç¼è¾ / æ¥ç / éä»¶ / æäº¤ / ä¸è½½ãåå¯ç¨ï¼ãåéæ£éªåãæä½å é¤ã</li>
        <li>å é¤çåæ®µï¼åè¡¨åä¸æç´¢æ¡ä»¶éä¹é½å»æï¼æç´¢æ¡ä»¶åªå©ãåç§° + æ£éªæ¥æãã</li>
      </ul>
      <b>å¾ç¡®è®¤ï¼</b>
      <ul>
        <li><b>ãå·¥åºãæ¯å¦ä¿çï¼</b>è¿ç¨æ£éªé å·¥åºå®ä½æ£éªç¯èï¼ä¸åæ¥ãææ éæ©ãçå¯éé¡¹å°±æ¯æ äº§å + å·¥åº æ¥åºæ¥çãæ°æ¸åéæ²¡æå®ï¼ååæç§»é¤ç»å¶ã</li>
      </ul>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.tab').forEach(function (btn) {
    btn.addEventListener('click', function () {
      document.querySelectorAll('.tab').forEach(function (b) { b.classList.remove('active'); });
      document.querySelectorAll('.view').forEach(function (v) { v.classList.remove('active'); });
      btn.classList.add('active');
      document.getElementById(btn.dataset.view).classList.add('active');
    });
  });
</script>
</body>
</html>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,486 @@
			<!DOCTYPE html>
			<html lang="zh-CN">
			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title>åºåæ£éª - ååå¾</title>
			<style>
			:root {
			--primary: #409eff;
			--success: #67c23a;
			--danger: #f56c6c;
			--warning: #e6a23c;
			--text: #303133;
			--text-regular: #606266;
			--text-secondary: #909399;
			--placeholder: #a8abb2;
			--border: #dcdfe6;
			--border-light: #ebeef5;
			--bg: #f5f7fa;
			--fill: #fafafa;
			}
			* { box-sizing: border-box; }
			body {
			margin: 0;
			padding: 24px 32px 60px;
			background: var(--bg);
			color: var(--text);
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
			"Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
			font-size: 14px;
			line-height: 1.5;
			}
			h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
			.sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; }

			/* ---------- tabs ---------- */
			.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
			.tab {
			padding: 7px 18px; border: 1px solid var(--border); background: #fff;
			border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-regular);
			transition: all .15s;
			}
			.tab:hover { color: var(--primary); border-color: #c6e2ff; }
			.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
			.view { display: none; }
			.view.active { display: block; }

			/* ---------- card / panel ---------- */
			.panel {
			background: #fff; border-radius: 4px; padding: 20px;
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.06);
			}

			/* ---------- form controls (mock) ---------- */
			.label { display: block; color: var(--text-regular); margin-bottom: 6px; font-size: 14px; }
			.label .req { color: var(--danger); margin-right: 3px; }
			.ctrl {
			height: 32px; line-height: 30px; border: 1px solid var(--border);
			border-radius: 4px; padding: 0 11px; background: #fff; color: var(--text);
			position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
			}
			.ctrl.ph { color: var(--placeholder); }
			.ctrl.sel { padding-right: 28px; }
			.ctrl.sel::after {
			content: ""; position: absolute; right: 11px; top: 50%; margin-top: -2px;
			border-left: 4px solid transparent; border-right: 4px solid transparent;
			border-top: 5px solid var(--placeholder);
			}
			.ctrl.date { padding-right: 30px; }
			.ctrl .cal { position: absolute; right: 9px; top: 7px; }
			.ctrl.disabled { background: var(--fill); color: var(--text-secondary); }
			.ctrl.tree::before {
			content: ""; position: absolute; left: 9px; top: 50%; margin-top: -2px;
			border-left: 4px solid var(--placeholder); border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			}
			.ctrl.tree { padding-left: 22px; }

			/* search bar */
			.search-form {
			display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end;
			}
			.search-form .field { min-width: 210px; }
			.search-form .field.narrow { min-width: 240px; }
			.btn {
			height: 32px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--border);
			background: #fff; color: var(--text-regular); cursor: pointer; font-size: 14px;
			}
			.btn:hover { color: var(--primary); border-color: #c6e2ff; background: #ecf5ff; }
			.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
			.btn.primary:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; }
			.btn.danger { color: var(--danger); border-color: #fbc4c4; background: #fef0f0; }
			.btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

			.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

			/* ---------- table ---------- */
			table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
			th {
			background: var(--fill); color: var(--text-regular); font-weight: 600;
			text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-light);
			white-space: nowrap;
			}
			td {
			padding: 11px 12px; border-bottom: 1px solid var(--border-light);
			color: var(--text); white-space: nowrap;
			}
			tbody tr:hover td { background: #f5f7fa; }
			.cb {
			width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 2px;
			display: inline-block; vertical-align: middle; background: #fff;
			}
			.cb.checked { background: var(--primary); border-color: var(--primary); position: relative; }
			.cb.checked::after {
			content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px;
			border: 1px solid #fff; border-left: 0; border-top: 0; transform: rotate(45deg);
			}
			.link { color: var(--primary); cursor: pointer; }
			.link.disabled { color: #c0c4cc; cursor: not-allowed; }
			.ops { display: flex; gap: 12px; }

			.tag {
			display: inline-block; padding: 1px 9px; border-radius: 4px; font-size: 12px;
			line-height: 18px; border: 1px solid transparent;
			}
			.tag.success { color: var(--success); background: #f0f9eb; border-color: #e1f3d8; }
			.tag.danger { color: var(--danger); background: #fef0f0; border-color: #fde2e2; }
			.tag.info { color: var(--text-secondary); background: #f4f4f5; border-color: #e9e9eb; }

			.pager {
			display: flex; justify-content: flex-end; align-items: center; gap: 10px;
			margin-top: 16px; color: var(--text-regular); font-size: 13px;
			}
			.pager .pg {
			min-width: 28px; height: 28px; line-height: 26px; text-align: center;
			border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 0 6px;
			}
			.pager .pg.active { background: var(--primary); border-color: var(--primary); color: #fff; }

			/* ---------- dialog mock ---------- */
			.dialog-wrap { display: flex; justify-content: center; padding: 10px 0; }
			.dialog {
			width: 78%; min-width: 900px; background: #fff; border-radius: 6px;
			box-shadow: 0 12px 32px 4px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.08);
			overflow: hidden;
			}
			.dialog-head {
			display: flex; justify-content: space-between; align-items: center;
			padding: 16px 20px; border-bottom: 1px solid var(--border-light);
			}
			.dialog-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
			.dialog-head .x { color: var(--text-secondary); cursor: pointer; font-size: 18px; line-height: 1; }
			.dialog-body { padding: 22px 24px; }
			.dialog-foot {
			display: flex; justify-content: flex-end; gap: 10px;
			padding: 14px 20px; border-top: 1px solid var(--border-light);
			}

			.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
			.hint { color: var(--text-secondary); font-size: 12px; margin-top: 5px; }
			.hint.co-link { color: var(--primary); }

			.note {
			margin-top: 22px; padding: 12px 16px; border-radius: 4px;
			background: #fdf6ec; border: 1px solid #faecd8; color: #b88230; font-size: 13px;
			}
			.note b { color: #a06b1f; }
			.note ul { margin: 6px 0 0; padding-left: 20px; }
			.note li { margin-bottom: 4px; }

			/* ---------- field mapping table ---------- */
			.map th, .map td { font-size: 13px; }
			.map .old { color: var(--text-secondary); text-decoration: line-through; }
			.map .new { color: var(--success); font-weight: 600; }
			.legend { display: flex; gap: 20px; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
			.legend i { font-style: normal; }
			</style>
			</head>
			<body>

			<h1>åºåæ£éª â ååå¾</h1>
			<div class="sub">åæ®µå¨ééæç Â· åç§° / å¾å· æ²¿ç¨åèéé»è¾ï¼å¶ä½åæ®µæå·¥å¡«å</div>

			<div class="tabs">
			<button class="tab active" data-view="v-list">â åè¡¨é¡µ</button>
			<button class="tab" data-view="v-dialog">â¡ æ°å¢ / ç¼è¾å¼¹çª</button>
			<button class="tab" data-view="v-map">â¢ åæ®µå¯¹ç§</button>
			</div>

			<!-- ================= åè¡¨é¡µ ================= -->
			<div class="view active" id="v-list">
			<div class="panel">
			<div class="search-form">
			<div class="field">
			<label class="label">åç§°</label>
			<div class="ctrl ph">è¯·è¾å¥åç§°æç´¢</div>
			</div>
			<div class="field narrow">
			<label class="label">æ£éªæ¥æ</label>
			<div class="ctrl ph date">
			èµ·æ¢æ¥æ
			<span class="cal">
			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
			<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
			</svg>
			</span>
			</div>
			</div>
			<div class="field" style="min-width:auto">
			<button class="btn primary">æç´¢</button>
			</div>
			</div>

			<div class="actions">
			<button class="btn primary">æ°å¢</button>
			<button class="btn">å¯¼åº</button>
			<button class="btn danger">å é¤</button>
			</div>

			<table>
			<thead>
			<tr>
			<th style="width:40px"><span class="cb"></span></th>
			<th>æ£éªæ¥æ</th>
			<th>åç§°</th>
			<th>å¾å·</th>
			<th>æè´¨</th>
			<th>æ°é</th>
			<th>æ½æ£æ°</th>
			<th>å¤å®</th>
			<th>æäº¤ç¶æ</th>
			<th style="width:290px">æä½</th>
			</tr>
			</thead>
			<tbody>
			<tr>
			<td><span class="cb checked"></span></td>
			<td>2026-09-16</td>
			<td>çé</td>
			<td>TL-2024-001</td>
			<td>304</td>
			<td>100</td>
			<td>10</td>
			<td><span class="tag success">åæ ¼</span></td>
			<td>æªæäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			<tr>
			<td><span class="cb"></span></td>
			<td>2026-09-15</td>
			<td>é¸é</td>
			<td>TL-2024-002</td>
			<td>316L</td>
			<td>200</td>
			<td>20</td>
			<td><span class="tag success">åæ ¼</span></td>
			<td>å·²æäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			<tr>
			<td><span class="cb"></span></td>
			<td>2026-09-14</td>
			<td>æ¢åé</td>
			<td>TL-2024-003</td>
			<td>ç¢³é¢</td>
			<td>50</td>
			<td>5</td>
			<td><span class="tag danger">ä¸åæ ¼</span></td>
			<td>æªæäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			</tbody>
			</table>

			<div class="pager">
			<span>å± 3 æ¡</span>
			<span class="pg">åä¸é¡µ</span>
			<span class="pg active">1</span>
			<span class="pg">åä¸é¡µ</span>
			</div>
			</div>
			</div>

			<!-- ================= å¼¹çª ================= -->
			<div class="view" id="v-dialog">
			<div class="panel">
			<div class="legend">
			<span><i>å®½ 70%</i></span>
			<span><i>æ ç¾å¨é¡¶é¨ï¼label-position="top"ï¼</i></span>
			<span><i>ä¸¤åå¸å±</i></span>
			<span><i>å¸¦ * ä¸ºå¿å¡«</i></span>
			</div>
			<div class="dialog-wrap">
			<div class="dialog">
			<div class="dialog-head">
			<h3>æ°å¢åºåæ£éª</h3>
			<span class="x">â</span>
			</div>
			<div class="dialog-body">
			<div class="grid">

			<div class="field">
			<label class="label"><span class="req">*</span>åç§°ï¼</label>
			<div class="ctrl sel ph tree">è¯·éæ©</div>
			<div class="hint co-link">æ å½¢éæ© Â· ä¸åãäº§ååç§°ãé»è¾ä¸è´</div>
			</div>

			<div class="field">
			<label class="label"><span class="req">*</span>å¾å·ï¼</label>
			<div class="ctrl sel ph">è¯·éæ©</div>
			<div class="hint co-link">éãåç§°ãèå¨å·æ°ï¼ä¸åãè§æ ¼åå·ãé»è¾ä¸è´</div>
			</div>

			<div class="field">
			<label class="label">æè´¨ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">éªæ¶ä¾æ®ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">æ°éï¼</label>
			<div class="ctrl ph">0.00</div>
			</div>

			<div class="field">
			<label class="label">æ½æ£æ°ï¼</label>
			<div class="ctrl ph">0.00</div>
			</div>

			<div class="field">
			<label class="label">å¾çº¸å³é®é¨ä½å°ºå¯¸ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">å®æµå³é®é¨ä½å°ºå¯¸ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">æ£éªæ¥æï¼</label>
			<div class="ctrl ph date">
			è¯·éæ©æ¥æ
			<span class="cal">
			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
			<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
			</svg>
			</span>
			</div>
			</div>

			<div class="field">
			<label class="label">å¥åºç¼å·ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">æå±è®¾å¤åç§°ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">é¡¹ç®åç§°ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">å¤å®ï¼</label>
			<div class="ctrl sel ph">è¯·éæ©</div>
			<div class="hint">åæ ¼ / ä¸åæ ¼</div>
			</div>

			<div class="field"></div>

			</div>

			<div class="note">
			<b>å·²å é¤çæ§åæ®µï¼</b>ææ éæ©ãåä½ãåæ ¼æ°éãä¸åæ ¼æ°éãæ£æµåä½ãæ£æµç»æãæ£éªåï¼
			ä»¥åä¸æ¹æ´åãææ åæ°è¡¨æ ¼ï¼ææ / åä½ / æ åå¼ / åæ§å¼ / æ£éªå¼ï¼ãã
			åãäº§ååç§°ãæ¹åä¸ºãåç§°ãï¼åãè§æ ¼åå·ãæ¹åä¸ºãå¾å·ãï¼åãæ£æµæ¥æãæ¹åä¸ºãæ£éªæ¥æãã
			</div>
			</div>
			<div class="dialog-foot">
			<button class="btn primary">ç¡®è®¤</button>
			<button class="btn">åæ¶</button>
			</div>
			</div>
			</div>
			</div>
			</div>

			<!-- ================= åæ®µå¯¹ç§ ================= -->
			<div class="view" id="v-map">
			<div class="panel">
			<table class="map">
			<thead>
			<tr>
			<th style="width:60px">åºå·</th>
			<th>æ°åæ®µ</th>
			<th style="width:110px">æ§ä»¶</th>
			<th style="width:110px">å¿å¡«</th>
			<th>å¤æ³¨</th>
			</tr>
			</thead>
			<tbody>
			<tr><td>1</td><td class="new">åç§°</td><td>æ å½¢éæ©</td><td>æ¯</td><td>åãäº§ååç§°ãï¼éæ©é»è¾ä¸å</td></tr>
			<tr><td>2</td><td class="new">å¾å·</td><td>ä¸æéæ©</td><td>æ¯</td><td>åãè§æ ¼åå·ãï¼éæ©é»è¾ä¸åï¼éåç§°èå¨</td></tr>
			<tr><td>3</td><td class="new">æè´¨</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>4</td><td class="new">éªæ¶ä¾æ®</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>5</td><td class="new">æ°é</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>6</td><td class="new">æ½æ£æ°</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>7</td><td class="new">å¾çº¸å³é®é¨ä½å°ºå¯¸</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>8</td><td class="new">å®æµå³é®é¨ä½å°ºå¯¸</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>9</td><td class="new">æ£éªæ¥æ</td><td>æ¥æéæ©</td><td>å¦</td><td>æå¡«ï¼åãæ£æµæ¥æãæ¹åï¼</td></tr>
			<tr><td>10</td><td class="new">å¥åºç¼å·</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>11</td><td class="new">æå±è®¾å¤åç§°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>12</td><td class="new">é¡¹ç®åç§°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>13</td><td class="new">å¤å®</td><td>ä¸æéæ©</td><td>å¦</td><td>åæ ¼ / ä¸åæ ¼ï¼å¾ç¡®è®¤</td></tr>
			<tr><td colspan="5" style="background:#fafafa;height:8px;padding:0;border:0"></td></tr>
			<tr><td>â</td><td class="old">ææ éæ©</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">åä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">ä¸åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£æµåä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£æµç»æ</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£éªå</td><td>â</td><td>â</td><td>å é¤ï¼ãåéæ£éªåãæä½ä¸å¹¶å»æ</td></tr>
			<tr><td>â</td><td class="old">ææ åæ°è¡¨æ ¼</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">éå®åå· / çäº§å·¥åå·</td><td>â</td><td>â</td><td>å é¤ï¼åè¡¨åä¸æç´¢æ¡ä»¶ä¸å¹¶å»æ</td></tr>
			</tbody>
			</table>

			<div class="note">
			<b>å·²æææ°è¦æ±è°æ´ï¼</b>
			<ul>
			<li>ãå¤å®ãä¸ºä¸æéæ©æ¡ï¼åæ ¼ / ä¸åæ ¼ï¼ã</li>
			<li>åææéå¤æå¨é¨å»æï¼ä¸éå·²æäº¤ãä¸éæ£éªåï¼ãç¼è¾ / æ¥ç / éä»¶ / æäº¤ / ä¸è½½ãåå¯ç¨ï¼ãåéæ£éªåãæä½å é¤ã</li>
			<li>å é¤çåæ®µï¼åè¡¨åä¸æç´¢æ¡ä»¶éä¹é½å»æï¼æç´¢æ¡ä»¶åªå©ãåç§° + æ£éªæ¥æãã</li>
			</ul>
			<b>å¾ç¡®è®¤ï¼</b>
			<ul>
			<li>ãå¾çº¸å³é®é¨ä½å°ºå¯¸ããå®æµå³é®é¨ä½å°ºå¯¸ãååè¾é¿ãåå®¹å¯è½ä¸æ¢ä¸è¡ï¼æ¯å¦éè¦æ¹ææ´è¡å®½åº¦æææ¬åï¼ååæåè¡è¾å¥ç»å¶ã</li>
			</ul>
			</div>
			</div>
			</div>

			<script>
			document.querySelectorAll('.tab').forEach(function (btn) {
			btn.addEventListener('click', function () {
			document.querySelectorAll('.tab').forEach(function (b) { b.classList.remove('active'); });
			document.querySelectorAll('.view').forEach(function (v) { v.classList.remove('active'); });
			btn.classList.add('active');
			document.getElementById(btn.dataset.view).classList.add('active');
			});
			});
			</script>
			</body>
			</html>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,456 @@
			<!DOCTYPE html>
			<html lang="zh-CN">
			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title>åæææ£éª - ååå¾</title>
			<style>
			:root {
			--primary: #409eff;
			--success: #67c23a;
			--danger: #f56c6c;
			--warning: #e6a23c;
			--text: #303133;
			--text-regular: #606266;
			--text-secondary: #909399;
			--placeholder: #a8abb2;
			--border: #dcdfe6;
			--border-light: #ebeef5;
			--bg: #f5f7fa;
			--fill: #fafafa;
			}
			* { box-sizing: border-box; }
			body {
			margin: 0;
			padding: 24px 32px 60px;
			background: var(--bg);
			color: var(--text);
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
			"Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
			font-size: 14px;
			line-height: 1.5;
			}
			h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
			.sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; }

			/* ---------- tabs ---------- */
			.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
			.tab {
			padding: 7px 18px; border: 1px solid var(--border); background: #fff;
			border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-regular);
			transition: all .15s;
			}
			.tab:hover { color: var(--primary); border-color: #c6e2ff; }
			.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
			.view { display: none; }
			.view.active { display: block; }

			/* ---------- card / panel ---------- */
			.panel {
			background: #fff; border-radius: 4px; padding: 20px;
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.06);
			}

			/* ---------- form controls (mock) ---------- */
			.label { display: block; color: var(--text-regular); margin-bottom: 6px; font-size: 14px; }
			.label .req { color: var(--danger); margin-right: 3px; }
			.ctrl {
			height: 32px; line-height: 30px; border: 1px solid var(--border);
			border-radius: 4px; padding: 0 11px; background: #fff; color: var(--text);
			position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
			}
			.ctrl.ph { color: var(--placeholder); }
			.ctrl.sel { padding-right: 28px; }
			.ctrl.sel::after {
			content: ""; position: absolute; right: 11px; top: 50%; margin-top: -2px;
			border-left: 4px solid transparent; border-right: 4px solid transparent;
			border-top: 5px solid var(--placeholder);
			}
			.ctrl.date { padding-right: 30px; }
			.ctrl .cal { position: absolute; right: 9px; top: 7px; }
			.ctrl.disabled { background: var(--fill); color: var(--text-secondary); }
			.ctrl.tree::before {
			content: ""; position: absolute; left: 9px; top: 50%; margin-top: -2px;
			border-left: 4px solid var(--placeholder); border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			}
			.ctrl.tree { padding-left: 22px; }

			/* search bar */
			.search-form {
			display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end;
			}
			.search-form .field { min-width: 210px; }
			.search-form .field.narrow { min-width: 240px; }
			.btn {
			height: 32px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--border);
			background: #fff; color: var(--text-regular); cursor: pointer; font-size: 14px;
			}
			.btn:hover { color: var(--primary); border-color: #c6e2ff; background: #ecf5ff; }
			.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
			.btn.primary:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; }
			.btn.danger { color: var(--danger); border-color: #fbc4c4; background: #fef0f0; }
			.btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

			.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

			/* ---------- table ---------- */
			table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
			th {
			background: var(--fill); color: var(--text-regular); font-weight: 600;
			text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-light);
			white-space: nowrap;
			}
			td {
			padding: 11px 12px; border-bottom: 1px solid var(--border-light);
			color: var(--text); white-space: nowrap;
			}
			tbody tr:hover td { background: #f5f7fa; }
			.cb {
			width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 2px;
			display: inline-block; vertical-align: middle; background: #fff;
			}
			.cb.checked { background: var(--primary); border-color: var(--primary); position: relative; }
			.cb.checked::after {
			content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px;
			border: 1px solid #fff; border-left: 0; border-top: 0; transform: rotate(45deg);
			}
			.link { color: var(--primary); cursor: pointer; }
			.link.disabled { color: #c0c4cc; cursor: not-allowed; }
			.ops { display: flex; gap: 12px; }

			.tag {
			display: inline-block; padding: 1px 9px; border-radius: 4px; font-size: 12px;
			line-height: 18px; border: 1px solid transparent;
			}
			.tag.success { color: var(--success); background: #f0f9eb; border-color: #e1f3d8; }
			.tag.danger { color: var(--danger); background: #fef0f0; border-color: #fde2e2; }
			.tag.info { color: var(--text-secondary); background: #f4f4f5; border-color: #e9e9eb; }

			.pager {
			display: flex; justify-content: flex-end; align-items: center; gap: 10px;
			margin-top: 16px; color: var(--text-regular); font-size: 13px;
			}
			.pager .pg {
			min-width: 28px; height: 28px; line-height: 26px; text-align: center;
			border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 0 6px;
			}
			.pager .pg.active { background: var(--primary); border-color: var(--primary); color: #fff; }

			/* ---------- dialog mock ---------- */
			.dialog-wrap { display: flex; justify-content: center; padding: 10px 0; }
			.dialog {
			width: 78%; min-width: 900px; background: #fff; border-radius: 6px;
			box-shadow: 0 12px 32px 4px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.08);
			overflow: hidden;
			}
			.dialog-head {
			display: flex; justify-content: space-between; align-items: center;
			padding: 16px 20px; border-bottom: 1px solid var(--border-light);
			}
			.dialog-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
			.dialog-head .x { color: var(--text-secondary); cursor: pointer; font-size: 18px; line-height: 1; }
			.dialog-body { padding: 22px 24px; }
			.dialog-foot {
			display: flex; justify-content: flex-end; gap: 10px;
			padding: 14px 20px; border-top: 1px solid var(--border-light);
			}

			.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
			.hint { color: var(--text-secondary); font-size: 12px; margin-top: 5px; }
			.hint.co-link { color: var(--primary); }

			.note {
			margin-top: 22px; padding: 12px 16px; border-radius: 4px;
			background: #fdf6ec; border: 1px solid #faecd8; color: #b88230; font-size: 13px;
			}
			.note b { color: #a06b1f; }
			.note ul { margin: 6px 0 0; padding-left: 20px; }
			.note li { margin-bottom: 4px; }

			/* ---------- field mapping table ---------- */
			.map th, .map td { font-size: 13px; }
			.map .old { color: var(--text-secondary); text-decoration: line-through; }
			.map .new { color: var(--success); font-weight: 600; }
			.legend { display: flex; gap: 20px; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
			.legend i { font-style: normal; }
			</style>
			</head>
			<body>

			<h1>åæææ£éª â ååå¾</h1>
			<div class="sub">åæ®µå¨ééæç Â· ç©æåç§°æ²¿ç¨åãäº§ååç§°ãèéé»è¾ï¼å¶ä½åæ®µæå·¥å¡«å</div>

			<div class="tabs">
			<button class="tab active" data-view="v-list">â åè¡¨é¡µ</button>
			<button class="tab" data-view="v-dialog">â¡ æ°å¢ / ç¼è¾å¼¹çª</button>
			<button class="tab" data-view="v-map">â¢ åæ®µå¯¹ç§</button>
			</div>

			<!-- ================= åè¡¨é¡µ ================= -->
			<div class="view active" id="v-list">
			<div class="panel">
			<div class="search-form">
			<div class="field">
			<label class="label">ç©æåç§°</label>
			<div class="ctrl ph">è¯·è¾å¥ç©æåç§°æç´¢</div>
			</div>
			<div class="field narrow">
			<label class="label">æ£éªæ¥æ</label>
			<div class="ctrl ph date">
			èµ·æ¢æ¥æ
			<span class="cal">
			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
			<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
			</svg>
			</span>
			</div>
			</div>
			<div class="field" style="min-width:auto">
			<button class="btn primary">æç´¢</button>
			</div>
			</div>

			<div class="actions">
			<button class="btn primary">æ°å¢</button>
			<button class="btn">å¯¼åº</button>
			<button class="btn danger">å é¤</button>
			</div>

			<table>
			<thead>
			<tr>
			<th style="width:40px"><span class="cb"></span></th>
			<th>æ£éªæ¥æ</th>
			<th>é¡¹ç®</th>
			<th>ç©æåç§°</th>
			<th>æ£éªä¾æ®</th>
			<th>æ°é</th>
			<th>æ½æ£æ°é</th>
			<th>å¤å®</th>
			<th>æäº¤ç¶æ</th>
			<th style="width:260px">æä½</th>
			</tr>
			</thead>
			<tbody>
			<tr>
			<td><span class="cb checked"></span></td>
			<td>2026-09-16</td>
			<td>ä¸ç³åäºæ</td>
			<td>ä¸éé¢æ¿æ</td>
			<td>GB/T 3280</td>
			<td>100</td>
			<td>10</td>
			<td><span class="tag success">åæ ¼</span></td>
			<td>æªæäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			<tr>
			<td><span class="cb"></span></td>
			<td>2026-09-15</td>
			<td>ä¸ç³åäºæ</td>
			<td>æ ç¼é¢ç®¡</td>
			<td>GB/T 8163</td>
			<td>200</td>
			<td>20</td>
			<td><span class="tag danger">ä¸åæ ¼</span></td>
			<td>å·²æäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			<tr>
			<td><span class="cb"></span></td>
			<td>2026-09-14</td>
			<td>æåç¼å</td>
			<td>ç¢³é¢æ³å°</td>
			<td>GB/T 9119</td>
			<td>50</td>
			<td>5</td>
			<td><span class="tag success">åæ ¼</span></td>
			<td>æªæäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			</tbody>
			</table>

			<div class="pager">
			<span>å± 3 æ¡</span>
			<span class="pg">åä¸é¡µ</span>
			<span class="pg active">1</span>
			<span class="pg">åä¸é¡µ</span>
			</div>
			</div>
			</div>

			<!-- ================= å¼¹çª ================= -->
			<div class="view" id="v-dialog">
			<div class="panel">
			<div class="legend">
			<span><i>å®½ 70%</i></span>
			<span><i>æ ç¾å¨é¡¶é¨ï¼label-position="top"ï¼</i></span>
			<span><i>ä¸¤åå¸å±</i></span>
			<span><i>å¸¦ * ä¸ºå¿å¡«</i></span>
			</div>
			<div class="dialog-wrap">
			<div class="dialog">
			<div class="dialog-head">
			<h3>æ°å¢åæææ£éª</h3>
			<span class="x">â</span>
			</div>
			<div class="dialog-body">
			<div class="grid">

			<div class="field">
			<label class="label">é¡¹ç®ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label"><span class="req">*</span>ç©æåç§°ï¼</label>
			<div class="ctrl sel ph tree">è¯·éæ©</div>
			<div class="hint co-link">æ å½¢éæ© Â· ä¸åãäº§ååç§°ãé»è¾ä¸è´</div>
			</div>

			<div class="field">
			<label class="label">æ£éªä¾æ®ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">æ°éï¼</label>
			<div class="ctrl ph">0.00</div>
			</div>

			<div class="field">
			<label class="label">æ½æ£æ°éï¼</label>
			<div class="ctrl ph">0.00</div>
			</div>

			<div class="field">
			<label class="label">æ£éªæ¥æï¼</label>
			<div class="ctrl ph date">
			è¯·éæ©æ¥æ
			<span class="cal">
			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
			<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
			</svg>
			</span>
			</div>
			</div>

			<div class="field">
			<label class="label">å¼å¸¸å¤æ³¨ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">å¤å®ï¼</label>
			<div class="ctrl sel ph">è¯·éæ©</div>
			<div class="hint">åæ ¼ / ä¸åæ ¼</div>
			</div>

			</div>

			<div class="note">
			<b>å·²å é¤çæ§åæ®µï¼</b>ä¾åºåãè§æ ¼åå·ãææ éæ©ãåä½ãåæ ¼æ°éãä¸åæ ¼æ°éãæ£æµåä½ãæ£æµç»æãæ£éªåï¼
			ä»¥åä¸æ¹æ´åãææ åæ°è¡¨æ ¼ï¼ææ / åä½ / æ åå¼ / åæ§å¼ / æ£éªå¼ï¼ãã
			åãäº§ååç§°ãæ¹åä¸ºãç©æåç§°ãï¼åãæ£æµæ¥æãæ¹åä¸ºãæ£éªæ¥æãã
			</div>
			</div>
			<div class="dialog-foot">
			<button class="btn primary">ç¡®è®¤</button>
			<button class="btn">åæ¶</button>
			</div>
			</div>
			</div>
			</div>
			</div>

			<!-- ================= åæ®µå¯¹ç§ ================= -->
			<div class="view" id="v-map">
			<div class="panel">
			<table class="map">
			<thead>
			<tr>
			<th style="width:60px">åºå·</th>
			<th>æ°åæ®µ</th>
			<th style="width:110px">æ§ä»¶</th>
			<th style="width:110px">å¿å¡«</th>
			<th>å¤æ³¨</th>
			</tr>
			</thead>
			<tbody>
			<tr><td>1</td><td class="new">é¡¹ç®</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>2</td><td class="new">ç©æåç§°</td><td>æ å½¢éæ©</td><td>æ¯</td><td>åãäº§ååç§°ãï¼éæ©é»è¾ä¸å</td></tr>
			<tr><td>3</td><td class="new">æ£éªä¾æ®</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>4</td><td class="new">æ°é</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>5</td><td class="new">æ½æ£æ°é</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>6</td><td class="new">æ£éªæ¥æ</td><td>æ¥æéæ©</td><td>å¦</td><td>æå¡«ï¼åãæ£æµæ¥æãæ¹åï¼</td></tr>
			<tr><td>7</td><td class="new">å¼å¸¸å¤æ³¨</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>8</td><td class="new">å¤å®</td><td>ä¸æéæ©</td><td>å¦</td><td>åæ ¼ / ä¸åæ ¼</td></tr>
			<tr><td colspan="5" style="background:#fafafa;height:8px;padding:0;border:0"></td></tr>
			<tr><td>â</td><td class="old">ä¾åºå</td><td>â</td><td>â</td><td>å é¤ï¼æç´¢æ¡ä»¶ä¸å¹¶å»æ</td></tr>
			<tr><td>â</td><td class="old">è§æ ¼åå·</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">ææ éæ©</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">åä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">ä¸åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£æµåä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£æµç»æ</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£éªå</td><td>â</td><td>â</td><td>å é¤ï¼ãåéæ£éªåãæä½ä¸å¹¶å»æ</td></tr>
			<tr><td>â</td><td class="old">ææ åæ°è¡¨æ ¼</td><td>â</td><td>â</td><td>å é¤</td></tr>
			</tbody>
			</table>

			<div class="note">
			<b>å·²æææ°è¦æ±è°æ´ï¼</b>
			<ul>
			<li>ãå¤å®ãä¸ºä¸æéæ©æ¡ï¼åæ ¼ / ä¸åæ ¼ï¼ã</li>
			<li>åææéå¤æä¸ç½®ç°é»è¾å¨é¨å»æï¼ä¸éå·²æäº¤ãä¸éæ£éªåï¼æ°éä¹ä¸ååéè´å°è´¦èå¨ç½®ç°ï¼ãç¼è¾ / æ¥ç / éä»¶ / æäº¤ / ä¸è½½ãåå¯ç¨ï¼ãåéæ£éªåãæä½å é¤ã</li>
			<li>å é¤çåæ®µï¼åè¡¨åä¸æç´¢æ¡ä»¶éä¹é½å»æï¼æç´¢æ¡ä»¶åªå©ãç©æåç§° + æ£éªæ¥æãã</li>
			<li>åè¡¨åï¼æ£éªæ¥æãé¡¹ç®ãç©æåç§°ãæ£éªä¾æ®ãæ°éãæ½æ£æ°éãå¤å®ãæäº¤ç¶æãæä½ããå¼å¸¸å¤æ³¨ãæ¯é¿ææ¬ï¼ä¸æ¾è¿åè¡¨åï¼åªå¨å¼¹çªéå¡«ã</li>
			</ul>
			<b>å¾ç¡®è®¤ï¼</b>
			<ul>
			<li>ãç©æåç§°ãæ¯å¦å°±æ¯åãäº§ååç§°ãé£å¥æ å½¢éæ©ï¼ååææ¤ç»å¶ï¼åä¸¤æ¬¡éæä¹æ¯è¿ä¸ªå¯¹åºå³ç³»ï¼ã</li>
			<li>ãå¼å¸¸å¤æ³¨ãåå®¹å¯è½ä¸æ¢ä¸è¡ï¼æ¯å¦éè¦æ¹ææ´è¡å®½åº¦æææ¬åï¼</li>
			</ul>
			</div>
			</div>
			</div>

			<script>
			document.querySelectorAll('.tab').forEach(function (btn) {
			btn.addEventListener('click', function () {
			document.querySelectorAll('.tab').forEach(function (b) { b.classList.remove('active'); });
			document.querySelectorAll('.view').forEach(function (v) { v.classList.remove('active'); });
			btn.classList.add('active');
			document.getElementById(btn.dataset.view).classList.add('active');
			});
			});
			</script>
			</body>
			</html>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,491 @@
			<!DOCTYPE html>
			<html lang="zh-CN">
			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title>è¿ç¨æ£éª - ååå¾</title>
			<style>
			:root {
			--primary: #409eff;
			--success: #67c23a;
			--danger: #f56c6c;
			--warning: #e6a23c;
			--text: #303133;
			--text-regular: #606266;
			--text-secondary: #909399;
			--placeholder: #a8abb2;
			--border: #dcdfe6;
			--border-light: #ebeef5;
			--bg: #f5f7fa;
			--fill: #fafafa;
			}
			* { box-sizing: border-box; }
			body {
			margin: 0;
			padding: 24px 32px 60px;
			background: var(--bg);
			color: var(--text);
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
			"Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
			font-size: 14px;
			line-height: 1.5;
			}
			h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
			.sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; }

			/* ---------- tabs ---------- */
			.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
			.tab {
			padding: 7px 18px; border: 1px solid var(--border); background: #fff;
			border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-regular);
			transition: all .15s;
			}
			.tab:hover { color: var(--primary); border-color: #c6e2ff; }
			.tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
			.view { display: none; }
			.view.active { display: block; }

			/* ---------- card / panel ---------- */
			.panel {
			background: #fff; border-radius: 4px; padding: 20px;
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.06);
			}

			/* ---------- form controls (mock) ---------- */
			.label { display: block; color: var(--text-regular); margin-bottom: 6px; font-size: 14px; }
			.label .req { color: var(--danger); margin-right: 3px; }
			.ctrl {
			height: 32px; line-height: 30px; border: 1px solid var(--border);
			border-radius: 4px; padding: 0 11px; background: #fff; color: var(--text);
			position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
			}
			.ctrl.ph { color: var(--placeholder); }
			.ctrl.sel { padding-right: 28px; }
			.ctrl.sel::after {
			content: ""; position: absolute; right: 11px; top: 50%; margin-top: -2px;
			border-left: 4px solid transparent; border-right: 4px solid transparent;
			border-top: 5px solid var(--placeholder);
			}
			.ctrl.date { padding-right: 30px; }
			.ctrl .cal { position: absolute; right: 9px; top: 7px; }
			.ctrl.disabled { background: var(--fill); color: var(--text-secondary); }
			.ctrl.tree::before {
			content: ""; position: absolute; left: 9px; top: 50%; margin-top: -2px;
			border-left: 4px solid var(--placeholder); border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			}
			.ctrl.tree { padding-left: 22px; }

			/* search bar */
			.search-form {
			display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end;
			}
			.search-form .field { min-width: 210px; }
			.search-form .field.narrow { min-width: 240px; }
			.btn {
			height: 32px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--border);
			background: #fff; color: var(--text-regular); cursor: pointer; font-size: 14px;
			}
			.btn:hover { color: var(--primary); border-color: #c6e2ff; background: #ecf5ff; }
			.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
			.btn.primary:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; }
			.btn.danger { color: var(--danger); border-color: #fbc4c4; background: #fef0f0; }
			.btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

			.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

			/* ---------- table ---------- */
			table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
			th {
			background: var(--fill); color: var(--text-regular); font-weight: 600;
			text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-light);
			white-space: nowrap;
			}
			td {
			padding: 11px 12px; border-bottom: 1px solid var(--border-light);
			color: var(--text); white-space: nowrap;
			}
			tbody tr:hover td { background: #f5f7fa; }
			.cb {
			width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 2px;
			display: inline-block; vertical-align: middle; background: #fff;
			}
			.cb.checked { background: var(--primary); border-color: var(--primary); position: relative; }
			.cb.checked::after {
			content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px;
			border: 1px solid #fff; border-left: 0; border-top: 0; transform: rotate(45deg);
			}
			.link { color: var(--primary); cursor: pointer; }
			.link.disabled { color: #c0c4cc; cursor: not-allowed; }
			.ops { display: flex; gap: 12px; }

			.tag {
			display: inline-block; padding: 1px 9px; border-radius: 4px; font-size: 12px;
			line-height: 18px; border: 1px solid transparent;
			}
			.tag.success { color: var(--success); background: #f0f9eb; border-color: #e1f3d8; }
			.tag.danger { color: var(--danger); background: #fef0f0; border-color: #fde2e2; }
			.tag.info { color: var(--text-secondary); background: #f4f4f5; border-color: #e9e9eb; }

			.pager {
			display: flex; justify-content: flex-end; align-items: center; gap: 10px;
			margin-top: 16px; color: var(--text-regular); font-size: 13px;
			}
			.pager .pg {
			min-width: 28px; height: 28px; line-height: 26px; text-align: center;
			border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 0 6px;
			}
			.pager .pg.active { background: var(--primary); border-color: var(--primary); color: #fff; }

			/* ---------- dialog mock ---------- */
			.dialog-wrap { display: flex; justify-content: center; padding: 10px 0; }
			.dialog {
			width: 78%; min-width: 900px; background: #fff; border-radius: 6px;
			box-shadow: 0 12px 32px 4px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.08);
			overflow: hidden;
			}
			.dialog-head {
			display: flex; justify-content: space-between; align-items: center;
			padding: 16px 20px; border-bottom: 1px solid var(--border-light);
			}
			.dialog-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
			.dialog-head .x { color: var(--text-secondary); cursor: pointer; font-size: 18px; line-height: 1; }
			.dialog-body { padding: 22px 24px; }
			.dialog-foot {
			display: flex; justify-content: flex-end; gap: 10px;
			padding: 14px 20px; border-top: 1px solid var(--border-light);
			}

			.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
			.hint { color: var(--text-secondary); font-size: 12px; margin-top: 5px; }
			.hint.co-link { color: var(--primary); }

			.note {
			margin-top: 22px; padding: 12px 16px; border-radius: 4px;
			background: #fdf6ec; border: 1px solid #faecd8; color: #b88230; font-size: 13px;
			}
			.note b { color: #a06b1f; }
			.note ul { margin: 6px 0 0; padding-left: 20px; }
			.note li { margin-bottom: 4px; }

			/* ---------- field mapping table ---------- */
			.map th, .map td { font-size: 13px; }
			.map .old { color: var(--text-secondary); text-decoration: line-through; }
			.map .new { color: var(--success); font-weight: 600; }
			.legend { display: flex; gap: 20px; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
			.legend i { font-style: normal; }
			</style>
			</head>
			<body>

			<h1>è¿ç¨æ£éª â ååå¾</h1>
			<div class="sub">åæ®µå¨ééæç Â· åç§° / è§æ ¼åå· æ²¿ç¨åèéé»è¾ï¼å¶ä½åæ®µæå·¥å¡«å</div>

			<div class="tabs">
			<button class="tab active" data-view="v-list">â åè¡¨é¡µ</button>
			<button class="tab" data-view="v-dialog">â¡ æ°å¢ / ç¼è¾å¼¹çª</button>
			<button class="tab" data-view="v-map">â¢ åæ®µå¯¹ç§</button>
			</div>

			<!-- ================= åè¡¨é¡µ ================= -->
			<div class="view active" id="v-list">
			<div class="panel">
			<div class="search-form">
			<div class="field">
			<label class="label">åç§°</label>
			<div class="ctrl ph">è¯·è¾å¥åç§°æç´¢</div>
			</div>
			<div class="field narrow">
			<label class="label">æ£éªæ¥æ</label>
			<div class="ctrl ph date">
			èµ·æ¢æ¥æ
			<span class="cal">
			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
			<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
			</svg>
			</span>
			</div>
			</div>
			<div class="field" style="min-width:auto">
			<button class="btn primary">æç´¢</button>
			</div>
			</div>

			<div class="actions">
			<button class="btn primary">æ°å¢</button>
			<button class="btn">å¯¼åº</button>
			<button class="btn danger">å é¤</button>
			</div>

			<table>
			<thead>
			<tr>
			<th style="width:40px"><span class="cb"></span></th>
			<th>æ£éªæ¥æ</th>
			<th>åç§°</th>
			<th>è§æ ¼åå·</th>
			<th>æè´¨</th>
			<th>æ°é</th>
			<th>æ½æ£æ°</th>
			<th>å¤å®</th>
			<th>æäº¤ç¶æ</th>
			<th style="width:290px">æä½</th>
			</tr>
			</thead>
			<tbody>
			<tr>
			<td><span class="cb checked"></span></td>
			<td>2026-09-16</td>
			<td>éä½</td>
			<td>DN50 PN16</td>
			<td>304</td>
			<td>100</td>
			<td>10</td>
			<td><span class="tag success">åæ ¼</span></td>
			<td>æªæäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			<tr>
			<td><span class="cb"></span></td>
			<td>2026-09-15</td>
			<td>éç</td>
			<td>DN80 PN25</td>
			<td>316L</td>
			<td>200</td>
			<td>20</td>
			<td><span class="tag success">åæ ¼</span></td>
			<td>å·²æäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			<tr>
			<td><span class="cb"></span></td>
			<td>2026-09-14</td>
			<td>éæ</td>
			<td>DN100 PN16</td>
			<td>ç¢³é¢</td>
			<td>50</td>
			<td>5</td>
			<td><span class="tag danger">ä¸åæ ¼</span></td>
			<td>æªæäº¤</td>
			<td>
			<div class="ops">
			<span class="link">ç¼è¾</span>
			<span class="link">æ¥ç</span>
			<span class="link">éä»¶</span>
			<span class="link">æäº¤</span>
			<span class="link">ä¸è½½</span>
			</div>
			</td>
			</tr>
			</tbody>
			</table>

			<div class="pager">
			<span>å± 3 æ¡</span>
			<span class="pg">åä¸é¡µ</span>
			<span class="pg active">1</span>
			<span class="pg">åä¸é¡µ</span>
			</div>
			</div>
			</div>

			<!-- ================= å¼¹çª ================= -->
			<div class="view" id="v-dialog">
			<div class="panel">
			<div class="legend">
			<span><i>å®½ 70%</i></span>
			<span><i>æ ç¾å¨é¡¶é¨ï¼label-position="top"ï¼</i></span>
			<span><i>ä¸¤åå¸å±</i></span>
			<span><i>å¸¦ * ä¸ºå¿å¡«</i></span>
			</div>
			<div class="dialog-wrap">
			<div class="dialog">
			<div class="dialog-head">
			<h3>æ°å¢è¿ç¨æ£éª</h3>
			<span class="x">â</span>
			</div>
			<div class="dialog-body">
			<div class="grid">

			<div class="field">
			<label class="label"><span class="req">*</span>åç§°ï¼</label>
			<div class="ctrl sel ph tree">è¯·éæ©</div>
			<div class="hint co-link">æ å½¢éæ© Â· ä¸åãäº§ååç§°ãé»è¾ä¸è´</div>
			</div>

			<div class="field">
			<label class="label"><span class="req">*</span>è§æ ¼åå·ï¼</label>
			<div class="ctrl sel ph">è¯·éæ©</div>
			<div class="hint co-link">éãåç§°ãèå¨å·æ°ï¼é»è¾ä¸å</div>
			</div>

			<div class="field">
			<label class="label">æè´¨ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">éªæ¶ä¾æ®ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">æ°éï¼</label>
			<div class="ctrl ph">0.00</div>
			</div>

			<div class="field">
			<label class="label">æ½æ£æ°ï¼</label>
			<div class="ctrl ph">0.00</div>
			</div>

			<div class="field">
			<label class="label">ä¸»è¦ææ¯åæ°ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">å®éææ¯åæ°ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">è¯´æä¹¦ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">æ£éªæ¥æï¼</label>
			<div class="ctrl ph date">
			è¯·éæ©æ¥æ
			<span class="cal">
			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a8abb2" stroke-width="2">
			<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
			</svg>
			</span>
			</div>
			</div>

			<div class="field">
			<label class="label">å¥åºç¼å·ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">æå±è®¾å¤åç§°ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">é¡¹ç®åç§°ï¼</label>
			<div class="ctrl ph">è¯·è¾å¥</div>
			</div>

			<div class="field">
			<label class="label">å¤å®ï¼</label>
			<div class="ctrl sel ph">è¯·éæ©</div>
			<div class="hint">åæ ¼ / ä¸åæ ¼</div>
			</div>

			</div>

			<div class="note">
			<b>å·²å é¤çæ§åæ®µï¼</b>å·¥åºãææ éæ©ãåä½ãåæ ¼æ°éãä¸åæ ¼æ°éãæ£æµåä½ãæ£æµç»æãæ£éªåï¼
			ä»¥åä¸æ¹æ´åãææ åæ°è¡¨æ ¼ï¼ææ / åä½ / æ åå¼ / åæ§å¼ / æ£éªå¼ï¼ãã
			åãäº§ååç§°ãæ¹åä¸ºãåç§°ãï¼åãæ£æµæ¥æãæ¹åä¸ºãæ£éªæ¥æãã
			</div>
			</div>
			<div class="dialog-foot">
			<button class="btn primary">ç¡®è®¤</button>
			<button class="btn">åæ¶</button>
			</div>
			</div>
			</div>
			</div>
			</div>

			<!-- ================= åæ®µå¯¹ç§ ================= -->
			<div class="view" id="v-map">
			<div class="panel">
			<table class="map">
			<thead>
			<tr>
			<th style="width:60px">åºå·</th>
			<th>æ°åæ®µ</th>
			<th style="width:110px">æ§ä»¶</th>
			<th style="width:110px">å¿å¡«</th>
			<th>å¤æ³¨</th>
			</tr>
			</thead>
			<tbody>
			<tr><td>1</td><td class="new">åç§°</td><td>æ å½¢éæ©</td><td>æ¯</td><td>åãäº§ååç§°ãï¼éæ©é»è¾ä¸å</td></tr>
			<tr><td>2</td><td class="new">è§æ ¼åå·</td><td>ä¸æéæ©</td><td>æ¯</td><td>éæ©é»è¾ä¸åï¼éåç§°èå¨</td></tr>
			<tr><td>3</td><td class="new">æè´¨</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>4</td><td class="new">éªæ¶ä¾æ®</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>5</td><td class="new">æ°é</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>6</td><td class="new">æ½æ£æ°</td><td>æ°åè¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>7</td><td class="new">ä¸»è¦ææ¯åæ°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>8</td><td class="new">å®éææ¯åæ°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>9</td><td class="new">è¯´æä¹¦</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>10</td><td class="new">æ£éªæ¥æ</td><td>æ¥æéæ©</td><td>å¦</td><td>æå¡«ï¼åãæ£æµæ¥æãæ¹åï¼</td></tr>
			<tr><td>11</td><td class="new">å¥åºç¼å·</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>12</td><td class="new">æå±è®¾å¤åç§°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>13</td><td class="new">é¡¹ç®åç§°</td><td>ææ¬è¾å¥</td><td>å¦</td><td>æå¡«</td></tr>
			<tr><td>14</td><td class="new">å¤å®</td><td>ä¸æéæ©</td><td>å¦</td><td>åæ ¼ / ä¸åæ ¼ï¼å¾ç¡®è®¤</td></tr>
			<tr><td colspan="5" style="background:#fafafa;height:8px;padding:0;border:0"></td></tr>
			<tr><td>â</td><td class="old">å·¥åº</td><td>â</td><td>â</td><td>ææ°åæ®µæ¸åå·²ç§»é¤ï¼å¾ç¡®è®¤</td></tr>
			<tr><td>â</td><td class="old">ææ éæ©</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">åä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">ä¸åæ ¼æ°é</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£æµåä½</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£æµç»æ</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">æ£éªå</td><td>â</td><td>â</td><td>å é¤ï¼ãåéæ£éªåãæä½ä¸å¹¶å»æ</td></tr>
			<tr><td>â</td><td class="old">ææ åæ°è¡¨æ ¼</td><td>â</td><td>â</td><td>å é¤</td></tr>
			<tr><td>â</td><td class="old">çäº§å·¥åå·</td><td>â</td><td>â</td><td>å é¤ï¼åè¡¨åä¸æç´¢æ¡ä»¶ä¸å¹¶å»æ</td></tr>
			</tbody>
			</table>

			<div class="note">
			<b>å·²æææ°è¦æ±è°æ´ï¼</b>
			<ul>
			<li>ãå¤å®ãä¸ºä¸æéæ©æ¡ï¼åæ ¼ / ä¸åæ ¼ï¼ã</li>
			<li>åææéå¤æå¨é¨å»æï¼ä¸éå·²æäº¤ãä¸éæ£éªåï¼ãç¼è¾ / æ¥ç / éä»¶ / æäº¤ / ä¸è½½ãåå¯ç¨ï¼ãåéæ£éªåãæä½å é¤ã</li>
			<li>å é¤çåæ®µï¼åè¡¨åä¸æç´¢æ¡ä»¶éä¹é½å»æï¼æç´¢æ¡ä»¶åªå©ãåç§° + æ£éªæ¥æãã</li>
			</ul>
			<b>å¾ç¡®è®¤ï¼</b>
			<ul>
			<li><b>ãå·¥åºãæ¯å¦ä¿çï¼</b>è¿ç¨æ£éªé å·¥åºå®ä½æ£éªç¯èï¼ä¸åæ¥ãææ éæ©ãçå¯éé¡¹å°±æ¯æ äº§å + å·¥åº æ¥åºæ¥çãæ°æ¸åéæ²¡æå®ï¼ååæç§»é¤ç»å¶ã</li>
			</ul>
			</div>
			</div>
			</div>

			<script>
			document.querySelectorAll('.tab').forEach(function (btn) {
			btn.addEventListener('click', function () {
			document.querySelectorAll('.tab').forEach(function (b) { b.classList.remove('active'); });
			document.querySelectorAll('.view').forEach(function (v) { v.classList.remove('active'); });
			btn.classList.add('active');
			document.getElementById(btn.dataset.view).classList.add('active');
			});
			});
			</script>
			</body>
			</html>