THKI \u00d7 SRT \u552e\u540e\u95ee\u9898\u7ba1\u7406\u4e2d\u5fc3<\/title>\n <style>\n :root{\n --bg:#f4f7fb;\n --panel:#ffffff;\n --panel-2:#f8fbff;\n --text:#1f2937;\n --muted:#6b7280;\n --line:#e5edf5;\n --accent:#0f8bff;\n --accent-2:#0a6fd1;\n --nav:#1e2c3b;\n --nav-2:#102131;\n --success:#13b26b;\n --warn:#f59e0b;\n --danger:#ef4444;\n --info:#3b82f6;\n --purple:#7c3aed;\n --shadow:0 10px 30px rgba(15,23,42,.08);\n --radius:18px;\n }\n\n *{box-sizing:border-box}\n html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:\"Noto Sans JP\",\"Segoe UI\",\"PingFang SC\",\"Microsoft YaHei\",sans-serif}\n a{text-decoration:none;color:inherit}\n button,input,select,textarea{font:inherit}\n\n .app{\n min-height:100vh;\n display:grid;\n grid-template-columns:260px 1fr;\n }\n\n .sidebar{\n background:linear-gradient(180deg,var(--nav),var(--nav-2));\n color:#eaf2ff;\n padding:20px 18px;\n display:flex;\n flex-direction:column;\n gap:18px;\n box-shadow:8px 0 30px rgba(2,6,23,.12);\n position:sticky;\n top:0;\n height:100vh;\n }\n\n .brand{\n display:flex;\n align-items:center;\n gap:12px;\n padding:10px 8px 20px;\n border-bottom:1px solid rgba(255,255,255,.08);\n }\n\n .brand-mark{\n width:42px;height:42px;border-radius:12px;\n background:linear-gradient(135deg,#14b8ff,#2563eb);\n display:grid;place-items:center;color:#fff;font-weight:800;\n box-shadow:0 10px 20px rgba(37,99,235,.35);\n }\n\n .brand-title{font-size:20px;font-weight:800;line-height:1.2}\n .brand-sub{font-size:12px;color:#9bb2ca;margin-top:4px}\n\n .nav-group{display:flex;flex-direction:column;gap:8px}\n .nav-title{padding:8px 10px;color:#8ba1b8;font-size:12px;text-transform:uppercase;letter-spacing:.08em}\n .nav-item{\n display:flex;align-items:center;gap:12px;\n padding:14px 14px;border-radius:14px;color:#d9e7f6;\n transition:.2s ease;\n border:1px solid transparent;\n }\n .nav-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}\n .nav-item.active{\n background:linear-gradient(90deg,rgba(15,139,255,.22),rgba(15,139,255,.08));\n border-color:rgba(15,139,255,.35);\n color:#fff;\n }\n .nav-icon{width:22px;text-align:center;opacity:.95}\n\n .main{\n padding:22px;\n display:flex;\n flex-direction:column;\n gap:18px;\n min-width:0;\n }\n\n .topbar{\n background:rgba(255,255,255,.7);\n backdrop-filter:blur(14px);\n border:1px solid rgba(255,255,255,.65);\n border-radius:22px;\n padding:16px 20px;\n display:flex;\n justify-content:space-between;\n align-items:center;\n box-shadow:var(--shadow);\n gap:16px;\n flex-wrap:wrap;\n }\n\n .page-head h1{margin:0;font-size:28px;line-height:1.2}\n .page-head p{margin:6px 0 0;color:var(--muted);font-size:14px}\n\n .top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n .btn{\n border:none;cursor:pointer;border-radius:14px;padding:12px 16px;\n font-weight:700;transition:.2s ease;display:inline-flex;align-items:center;gap:8px;\n }\n .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 12px 24px rgba(15,139,255,.22)}\n .btn-primary:hover{transform:translateY(-1px)}\n .btn-ghost{background:#fff;color:var(--text);border:1px solid var(--line)}\n .btn-danger{background:#fff2f2;color:#b91c1c;border:1px solid #fecaca}\n\n .toolbar{\n display:grid;\n grid-template-columns:1.4fr repeat(4,minmax(150px,1fr));\n gap:12px;\n }\n .tool-card{\n background:var(--panel);border-radius:18px;padding:14px 16px;border:1px solid var(--line);\n box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;\n }\n .tool-card input,.tool-card select{\n border:none;outline:none;width:100%;background:transparent;color:var(--text)\n }\n\n .stats{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:14px;\n }\n .stat{\n background:linear-gradient(180deg,#fff,#fafdff);\n border:1px solid var(--line);\n border-radius:20px;padding:18px 18px 16px;box-shadow:var(--shadow);\n position:relative;overflow:hidden;\n }\n .stat::after{\n content:\"\";position:absolute;right:-20px;top:-20px;width:88px;height:88px;border-radius:50%;background:rgba(15,139,255,.07)\n }\n .stat-label{font-size:13px;color:var(--muted)}\n .stat-value{font-size:32px;font-weight:800;margin-top:8px}\n .stat-note{font-size:12px;color:var(--muted);margin-top:6px}\n\n .content-grid{\n display:grid;\n grid-template-columns:1fr 320px;\n gap:18px;\n min-width:0;\n }\n\n .panel{\n background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);min-width:0;\n }\n\n .panel-head{\n padding:18px 18px 10px;\n display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;\n }\n .panel-title{font-size:18px;font-weight:800}\n .panel-sub{font-size:13px;color:var(--muted);margin-top:4px}\n\n .table-wrap{padding:0 12px 12px;overflow:auto}\n table{width:100%;border-collapse:separate;border-spacing:0 10px;min-width:1200px}\n thead th{\n text-align:left;font-size:12px;color:#6b7280;padding:0 12px 8px;font-weight:800;white-space:nowrap;\n }\n tbody tr{background:#fbfdff}\n tbody td{\n padding:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fbfdff;vertical-align:middle\n }\n tbody td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}\n tbody td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}\n tbody tr:hover td{background:#f5faff}\n\n .cell-editable{min-width:120px}\n .cell-editable input,\n .cell-editable textarea,\n .cell-editable select{\n width:100%;border:1px solid transparent;background:transparent;border-radius:10px;padding:8px 10px;outline:none;transition:.18s ease;color:var(--text)\n }\n .cell-editable textarea{resize:vertical;min-height:40px}\n .cell-editable input:focus,\n .cell-editable textarea:focus,\n .cell-editable select:focus{\n background:#fff;border-color:#bfdbfe;box-shadow:0 0 0 4px rgba(59,130,246,.12)\n }\n\n .badge{\n display:inline-flex;align-items:center;justify-content:center;\n min-width:76px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;border:1px solid transparent\n }\n .status-open{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}\n .status-progress{background:#fff7ed;color:#d97706;border-color:#fed7aa}\n .status-done{background:#ecfdf5;color:#059669;border-color:#bbf7d0}\n .level-critical{background:#fef2f2;color:#dc2626}\n .level-high{background:#fff7ed;color:#ea580c}\n .level-medium{background:#f5f3ff;color:#7c3aed}\n .level-low{background:#f0fdf4;color:#16a34a}\n .owner-pill{display:inline-flex;align-items:center;gap:8px}\n .avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c7d2fe,#93c5fd);font-size:12px;font-weight:800;color:#1e3a8a}\n\n .side-panels{display:flex;flex-direction:column;gap:18px}\n .chart-card,.log-card{padding:16px 16px 18px}\n .chart-box{margin-top:10px}\n .mini-bars{display:flex;align-items:end;gap:12px;height:180px;padding:14px 2px 0}\n .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}\n .bar{\n width:100%;max-width:46px;border-radius:14px 14px 8px 8px;\n background:linear-gradient(180deg,#66b8ff,#0f8bff);box-shadow:0 10px 20px rgba(15,139,255,.18);\n min-height:10px;transition:height .25s ease;\n }\n .bar-label{font-size:12px;color:var(--muted)}\n .bar-value{font-size:12px;font-weight:700;color:#1f2937}\n\n .pie-legend{display:grid;gap:10px;margin-top:14px}\n .legend-item{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text)}\n .legend-left{display:flex;align-items:center;gap:10px}\n .dot{width:10px;height:10px;border-radius:50%}\n\n .log-list{display:grid;gap:10px;margin-top:10px;max-height:320px;overflow:auto}\n .log-item{padding:12px;border-radius:14px;background:#f8fbff;border:1px solid var(--line)}\n .log-item .time{font-size:12px;color:var(--muted);margin-bottom:4px}\n .log-item .text{font-size:13px;line-height:1.6;color:var(--text)}\n\n .footer-note{font-size:12px;color:var(--muted);padding:0 4px}\n\n .empty{\n padding:26px 16px;text-align:center;color:var(--muted);font-size:14px\n }\n\n .mono{font-variant-numeric:tabular-nums}\n\n @media (max-width: 1440px){\n .stats{grid-template-columns:repeat(2,1fr)}\n .content-grid{grid-template-columns:1fr}\n }\n @media (max-width: 1080px){\n .app{grid-template-columns:1fr}\n .sidebar{position:relative;height:auto}\n .toolbar{grid-template-columns:1fr 1fr}\n }\n @media (max-width: 720px){\n .main{padding:14px}\n .stats,.toolbar{grid-template-columns:1fr}\n .topbar{padding:14px}\n .page-head h1{font-size:22px}\n }\n\n @media (prefers-reduced-motion: reduce){\n *,*::before,*::after{transition:none !important;scroll-behavior:auto !important}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"app\">\n <aside class=\"sidebar\">\n <div class=\"brand\">\n <div class=\"brand-mark\">SR<\/div>\n <div>\n <div class=\"brand-title\">THKI \u00d7 SRT<\/div>\n <div class=\"brand-sub\">\u552e\u540e\u95ee\u9898\u534f\u540c\u7ba1\u7406<\/div>\n <\/div>\n <\/div>\n\n <div class=\"nav-group\">\n <div class=\"nav-title\">Navigation<\/div>\n <a class=\"nav-item active\" href=\"#\">\n <span class=\"nav-icon\">\ud83d\udccb<\/span>\n <span>\u95ee\u9898\u7ba1\u7406\u4e2d\u5fc3<\/span>\n <\/a>\n <a class=\"nav-item\" href=\"#dashboard\">\n <span class=\"nav-icon\">\ud83d\udcca<\/span>\n <span>\u6570\u636e\u6982\u89c8<\/span>\n <\/a>\n <a class=\"nav-item\" href=\"#logs\">\n <span class=\"nav-icon\">\ud83d\udd52<\/span>\n <span>\u66f4\u65b0\u8bb0\u5f55<\/span>\n <\/a>\n <a class=\"nav-item\" href=\"#\">\n <span class=\"nav-icon\">\u2699\ufe0f<\/span>\n <span>\u89c6\u56fe\u7ba1\u7406<\/span>\n <\/a>\n <\/div>\n\n <div class=\"nav-group\" style=\"margin-top:auto\">\n <div class=\"nav-title\">\u8bf4\u660e<\/div>\n <div style=\"padding:0 10px;color:#9bb2ca;font-size:13px;line-height:1.75\">\n \u8be5\u9875\u9762\u4e3a\u524d\u7aef\u53ef\u89c6\u5316\u793a\u4f8b\u3002<br>\n \u884c\u5185\u7f16\u8f91\u3001\u7b5b\u9009\u3001\u7edf\u8ba1\u8054\u52a8\u5747\u53ef\u7acb\u5373\u751f\u6548\u3002<br>\n \u5f53\u524d\u7248\u672c\u9ed8\u8ba4\u4fdd\u5b58\u5230\u6d4f\u89c8\u5668 localStorage\u3002\n <\/div>\n <\/div>\n <\/aside>\n\n <main class=\"main\">\n <section class=\"topbar\">\n <div class=\"page-head\">\n <h1>\u552e\u540e\u95ee\u9898\u7ba1\u7406\u4e2d\u5fc3<\/h1>\n <p>\u9762\u5411 THKI \u4e0e SRT \u7684\u534f\u540c\u552e\u540e\u95ee\u9898\u53f0\u8d26\uff0c\u652f\u6301\u884c\u5185\u7f16\u8f91\u3001\u72b6\u6001\u53ef\u89c6\u5316\u3001\u7b5b\u9009\u8054\u52a8\u4e0e\u672c\u5730\u6301\u4e45\u5316\u3002<\/p>\n <\/div>\n <div class=\"top-actions\">\n <button class=\"btn btn-ghost\" id=\"seedBtn\">\u91cd\u7f6e\u793a\u4f8b\u6570\u636e<\/button>\n <button class=\"btn btn-ghost\" id=\"exportBtn\">\u5bfc\u51fa JSON<\/button>\n <button class=\"btn btn-primary\" id=\"addRowBtn\">\uff0b \u65b0\u589e\u95ee\u9898<\/button>\n <\/div>\n <\/section>\n\n <section class=\"toolbar\" id=\"dashboard\">\n <div class=\"tool-card\">\n <span>\ud83d\udd0d<\/span>\n <input id=\"searchInput\" type=\"text\" placeholder=\"\u641c\u7d22\u6807\u9898 \/ \u9879\u76ee \/ \u8d23\u4efb\u4eba \/ \u95ee\u9898 ID\" \/>\n <\/div>\n <div class=\"tool-card\">\n <span>\u72b6\u6001<\/span>\n <select id=\"statusFilter\">\n <option value=\"\">\u5168\u90e8<\/option>\n <option value=\"\u95ee\u9898\u786e\u8ba4\u4e2d\">\u95ee\u9898\u786e\u8ba4\u4e2d<\/option>\n <option value=\"\u5206\u6790\u4e0e\u89e3\u51b3\">\u5206\u6790\u4e0e\u89e3\u51b3<\/option>\n <option value=\"\u6d4b\u8bd5\u9a8c\u8bc1\">\u6d4b\u8bd5\u9a8c\u8bc1<\/option>\n <option value=\"\u5df2\u5173\u95ed\">\u5df2\u5173\u95ed<\/option>\n <\/select>\n <\/div>\n <div class=\"tool-card\">\n <span>\u7b49\u7ea7<\/span>\n <select id=\"levelFilter\">\n <option value=\"\">\u5168\u90e8<\/option>\n <option value=\"\u81f4\u547d\">\u81f4\u547d<\/option>\n <option value=\"\u4e25\u91cd\">\u4e25\u91cd<\/option>\n <option value=\"\u4e00\u822c\">\u4e00\u822c<\/option>\n <option value=\"\u8f7b\u5fae\">\u8f7b\u5fae<\/option>\n <\/select>\n <\/div>\n <div class=\"tool-card\">\n <span>\u8d1f\u8d23\u4eba<\/span>\n <input id=\"ownerFilter\" type=\"text\" placeholder=\"\u8f93\u5165\u8d1f\u8d23\u4eba\" \/>\n <\/div>\n <div class=\"tool-card\">\n <span>\u9879\u76ee<\/span>\n <input id=\"projectFilter\" type=\"text\" placeholder=\"\u8f93\u5165\u9879\u76ee\u540d\" \/>\n <\/div>\n <\/section>\n\n <section class=\"stats\">\n <div class=\"stat\">\n <div class=\"stat-label\">\u95ee\u9898\u603b\u6570<\/div>\n <div class=\"stat-value mono\" id=\"statTotal\">0<\/div>\n <div class=\"stat-note\">\u5f53\u524d\u7b5b\u9009\u7ed3\u679c<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-label\">\u672a\u5173\u95ed\u95ee\u9898<\/div>\n <div class=\"stat-value mono\" id=\"statOpen\">0<\/div>\n <div class=\"stat-note\">\u95ee\u9898\u786e\u8ba4\u4e2d \/ \u5206\u6790\u4e0e\u89e3\u51b3 \/ \u6d4b\u8bd5\u9a8c\u8bc1<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-label\">\u4e25\u91cd\u53ca\u4ee5\u4e0a<\/div>\n <div class=\"stat-value mono\" id=\"statHigh\">0<\/div>\n <div class=\"stat-note\">\u81f4\u547d + \u4e25\u91cd<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-label\">\u5df2\u5173\u95ed\u7387<\/div>\n <div class=\"stat-value mono\" id=\"statCloseRate\">0%<\/div>\n <div class=\"stat-note\">\u57fa\u4e8e\u5f53\u524d\u7b5b\u9009\u7ed3\u679c\u52a8\u6001\u8ba1\u7b97<\/div>\n <\/div>\n <\/section>\n\n <section class=\"content-grid\">\n <div class=\"panel\">\n <div class=\"panel-head\">\n <div>\n <div class=\"panel-title\">\u95ee\u9898\u53f0\u8d26<\/div>\n <div class=\"panel-sub\">\u53cc\u51fb\u6216\u76f4\u63a5\u70b9\u51fb\u5355\u5143\u683c\u5373\u53ef\u7f16\u8f91\u3002\u4fee\u6539\u540e\u7edf\u8ba1\u4e0e\u53f3\u4fa7\u53ef\u89c6\u5316\u7acb\u5373\u8054\u52a8\u3002<\/div>\n <\/div>\n <\/div>\n\n <div class=\"table-wrap\">\n <table>\n <thead>\n <tr>\n <th style=\"width:90px\">ID<\/th>\n <th style=\"min-width:260px\">\u6807\u9898<\/th>\n <th style=\"width:130px\">\u72b6\u6001<\/th>\n <th style=\"width:110px\">\u7b49\u7ea7<\/th>\n <th style=\"width:140px\">\u9879\u76ee<\/th>\n <th style=\"width:120px\">\u521b\u5efa\u8005<\/th>\n <th style=\"width:120px\">\u8d1f\u8d23\u4eba<\/th>\n <th style=\"width:140px\">\u6700\u540e\u66f4\u65b0<\/th>\n <th style=\"min-width:220px\">\u5904\u7406\u5907\u6ce8<\/th>\n <th style=\"width:90px\">\u64cd\u4f5c<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"issueTableBody\"><\/tbody>\n <\/table>\n <div class=\"empty\" id=\"emptyState\" style=\"display:none\">\u5f53\u524d\u7b5b\u9009\u6761\u4ef6\u4e0b\u6ca1\u6709\u6570\u636e\u3002<\/div>\n <\/div>\n <\/div>\n\n <div class=\"side-panels\">\n <section class=\"panel chart-card\">\n <div class=\"panel-title\">\u72b6\u6001\u5206\u5e03<\/div>\n <div class=\"panel-sub\">\u6309\u5f53\u524d\u7b5b\u9009\u7ed3\u679c\u7edf\u8ba1<\/div>\n <div class=\"chart-box\">\n <div class=\"mini-bars\" id=\"statusBars\"><\/div>\n <div class=\"pie-legend\" id=\"statusLegend\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"panel log-card\" id=\"logs\">\n <div class=\"panel-title\">\u5b9e\u65f6\u66f4\u65b0\u8bb0\u5f55<\/div>\n <div class=\"panel-sub\">\u6240\u6709\u65b0\u589e\u3001\u4fee\u6539\u3001\u5220\u9664\u4f1a\u8bb0\u5f55\u5230\u4e0b\u65b9<\/div>\n <div class=\"log-list\" id=\"logList\"><\/div>\n <div class=\"footer-note\" style=\"margin-top:10px\">\n \u6ce8: \u8fd9\u662f\u524d\u7aef\u5b9e\u65f6\u66f4\u65b0\uff0c\u4e0d\u662f\u591a\u4eba\u5b9e\u65f6\u534f\u540c\u3002\u8981\u505a\u591a\u4eba\u540c\u6b65\uff0c\u5fc5\u987b\u63a5\u540e\u7aef\u6570\u636e\u5e93\u4e0e WebSocket\/\u98de\u4e66\u591a\u7ef4\u8868\u683c API\u3002\n <\/div>\n <\/section>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n\n <script>\n const STORAGE_KEY = 'thki_srt_issue_center_v1';\n const LOG_KEY = 'thki_srt_issue_logs_v1';\n\n const initialData = [\n {\n id: 'THKI-250301',\n title: 'AdvanTest 2nd \u9879\u76ee : 300E \u5bf9\u63a5\u8f8a\u7b52\u7ad9\u65f6\u4f4d\u7f6e\u504f\u5dee\u8d85\u51fa\u9608\u503c',\n status: '\u95ee\u9898\u786e\u8ba4\u4e2d',\n level: '\u4e25\u91cd',\n project: 'AdvanTest',\n creator: 'THKI \u6c38\u77f3',\n owner: 'SRT \u9648',\n updatedAt: '2026-03-28 09:10',\n note: '\u5ba2\u6237\u73b0\u573a\u590d\u73b0 2 \u6b21\uff0c\u9700\u8981\u786e\u8ba4\u5730\u56fe\u7279\u5f81\u70b9\u4e0e\u5bf9\u63a5\u4fa7\u8fb9\u8ddd\u3002'\n },\n {\n id: 'THKI-250302',\n title: 'SUMCO \u9879\u76ee : \u7535\u68af\u524d\u7b49\u5f85\u533a\u62e5\u5835\u5bfc\u81f4\u4e24\u53f0 AMR \u4e92\u9501',\n status: '\u5206\u6790\u4e0e\u89e3\u51b3',\n level: '\u4e25\u91cd',\n project: 'SUMCO',\n creator: 'THKI \u4f50\u85e4',\n owner: 'SRT \u5434',\n updatedAt: '2026-03-28 10:25',\n note: '\u5efa\u8bae\u65b0\u589e\u533a\u57df\u4e92\u65a5\u89c4\u5219\uff0c\u5e76\u91cd\u65b0\u5b9a\u4e49\u7535\u68af\u53e3 waiting logic\u3002'\n },\n {\n id: 'THKI-250303',\n title: 'Panasonic \u6848\u4ef6 : \u7ad9\u70b9\u524d\u65b9\u8bc6\u522b\u6296\u52a8\uff0c\u5bfc\u81f4\u63a5\u9a73\u540e\u9000\u91cd\u8bd5',\n status: '\u6d4b\u8bd5\u9a8c\u8bc1',\n level: '\u4e00\u822c',\n project: 'Panasonic',\n creator: 'THKI \u85e4\u6751',\n owner: 'SRT \u9648',\n updatedAt: '2026-03-28 11:40',\n note: '\u5df2\u5bfc\u5165 odometry-only \u533a\u57df\uff0c\u7b49\u5f85\u73b0\u573a\u957f\u65f6\u95f4\u9a8c\u8bc1\u3002'\n },\n {\n id: 'THKI-250304',\n title: 'FUJI \u5c55\u793a\u7ebf : \u5149\u901a\u4fe1\u4fe1\u53f7\u7a97\u53e3\u91cd\u53e0\uff0c\u5bfc\u81f4\u4efb\u52a1\u63d0\u524d\u6302\u8d77',\n status: '\u5206\u6790\u4e0e\u89e3\u51b3',\n level: '\u81f4\u547d',\n project: 'FUJI',\n creator: 'THKI \u4e2d\u6751',\n owner: 'SRT \u5434',\n updatedAt: '2026-03-28 12:05',\n note: '\u9700\u8981\u660e\u786e left\/right at-position \u6e05\u96f6\u903b\u8f91\uff0c\u6392\u67e5 EAC \u534f\u8bae\u8282\u62cd\u3002'\n },\n {\n id: 'THKI-250305',\n title: 'ROHM Apollo : 600EL \u5de5\u4f5c\u533a\u57df\u907f\u8ba9\u529f\u80fd\u7248\u672c\u4e0d\u6ee1\u8db3',\n status: '\u5df2\u5173\u95ed',\n level: '\u8f7b\u5fae',\n project: 'ROHM Apollo',\n creator: 'THKI \u5c71\u672c',\n owner: 'SRT \u8bb8',\n updatedAt: '2026-03-27 18:20',\n note: '\u5df2\u786e\u8ba4\u7248\u672c\u6761\u4ef6\u5e76\u5b8c\u6210\u8bf4\u660e\uff0c\u5ba2\u6237\u63a5\u53d7\u540e\u7eed\u5347\u7ea7\u8ba1\u5212\u3002'\n }\n ];\n\n const dom = {\n tableBody: document.getElementById('issueTableBody'),\n emptyState: document.getElementById('emptyState'),\n statusBars: document.getElementById('statusBars'),\n statusLegend: document.getElementById('statusLegend'),\n logList: document.getElementById('logList'),\n searchInput: document.getElementById('searchInput'),\n statusFilter: document.getElementById('statusFilter'),\n levelFilter: document.getElementById('levelFilter'),\n ownerFilter: document.getElementById('ownerFilter'),\n projectFilter: document.getElementById('projectFilter'),\n statTotal: document.getElementById('statTotal'),\n statOpen: document.getElementById('statOpen'),\n statHigh: document.getElementById('statHigh'),\n statCloseRate: document.getElementById('statCloseRate'),\n addRowBtn: document.getElementById('addRowBtn'),\n seedBtn: document.getElementById('seedBtn'),\n exportBtn: document.getElementById('exportBtn')\n };\n\n let issues = loadData();\n let logs = loadLogs();\n\n function loadData(){\n const saved = localStorage.getItem(STORAGE_KEY);\n if(!saved) return structuredClone(initialData);\n try { return JSON.parse(saved); } catch { return structuredClone(initialData); }\n }\n\n function loadLogs(){\n const saved = localStorage.getItem(LOG_KEY);\n if(!saved) return [];\n try { return JSON.parse(saved); } catch { return []; }\n }\n\n function saveData(){\n localStorage.setItem(STORAGE_KEY, JSON.stringify(issues));\n }\n\n function saveLogs(){\n localStorage.setItem(LOG_KEY, JSON.stringify(logs.slice(0,50)));\n }\n\n function nowStr(){\n const d = new Date();\n const pad = n => String(n).padStart(2,'0');\n return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;\n }\n\n function logAction(text){\n logs.unshift({ time: nowStr(), text });\n logs = logs.slice(0, 50);\n saveLogs();\n renderLogs();\n }\n\n function getFilteredIssues(){\n const q = dom.searchInput.value.trim().toLowerCase();\n const status = dom.statusFilter.value.trim();\n const level = dom.levelFilter.value.trim();\n const owner = dom.ownerFilter.value.trim().toLowerCase();\n const project = dom.projectFilter.value.trim().toLowerCase();\n\n return issues.filter(item => {\n const hay = [item.id,item.title,item.project,item.creator,item.owner,item.note].join(' ').toLowerCase();\n const matchQ = !q || hay.includes(q);\n const matchStatus = !status || item.status === status;\n const matchLevel = !level || item.level === level;\n const matchOwner = !owner || item.owner.toLowerCase().includes(owner);\n const matchProject = !project || item.project.toLowerCase().includes(project);\n return matchQ && matchStatus && matchLevel && matchOwner && matchProject;\n });\n }\n\n function levelClass(level){\n return level === '\u81f4\u547d' ? 'level-critical' :\n level === '\u4e25\u91cd' ? 'level-high' :\n level === '\u4e00\u822c' ? 'level-medium' : 'level-low';\n }\n\n function statusClass(status){\n return status === '\u95ee\u9898\u786e\u8ba4\u4e2d' ? 'status-open' :\n status === '\u5206\u6790\u4e0e\u89e3\u51b3' ? 'status-progress' :\n status === '\u6d4b\u8bd5\u9a8c\u8bc1' ? 'status-progress' : 'status-done';\n }\n\n function ownerAvatar(name=''){\n const txt = name.replace(\/\\s+\/g,'').slice(-1) || '\u4eba';\n return `<span class=\"avatar\">${txt}<\/span>`;\n }\n\n function renderTable(){\n const list = getFilteredIssues();\n dom.tableBody.innerHTML = '';\n dom.emptyState.style.display = list.length ? 'none' : 'block';\n\n list.forEach((item, index) => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td class=\"mono\">${escapeHtml(item.id)}<\/td>\n <td class=\"cell-editable\">\n <textarea data-id=\"${item.id}\" data-field=\"title\">${escapeHtml(item.title)}<\/textarea>\n <\/td>\n <td class=\"cell-editable\">\n <select data-id=\"${item.id}\" data-field=\"status\">\n ${['\u95ee\u9898\u786e\u8ba4\u4e2d','\u5206\u6790\u4e0e\u89e3\u51b3','\u6d4b\u8bd5\u9a8c\u8bc1','\u5df2\u5173\u95ed'].map(v => `<option value=\"${v}\" ${item.status===v?'selected':''}>${v}<\/option>`).join('')}\n <\/select>\n <div style=\"margin-top:8px\"><span class=\"badge ${statusClass(item.status)}\">${item.status}<\/span><\/div>\n <\/td>\n <td class=\"cell-editable\">\n <select data-id=\"${item.id}\" data-field=\"level\">\n ${['\u81f4\u547d','\u4e25\u91cd','\u4e00\u822c','\u8f7b\u5fae'].map(v => `<option value=\"${v}\" ${item.level===v?'selected':''}>${v}<\/option>`).join('')}\n <\/select>\n <div style=\"margin-top:8px\"><span class=\"badge ${levelClass(item.level)}\">${item.level}<\/span><\/div>\n <\/td>\n <td class=\"cell-editable\"><input data-id=\"${item.id}\" data-field=\"project\" value=\"${escapeAttr(item.project)}\"><\/td>\n <td class=\"cell-editable\"><input data-id=\"${item.id}\" data-field=\"creator\" value=\"${escapeAttr(item.creator)}\"><\/td>\n <td class=\"cell-editable\">\n <input data-id=\"${item.id}\" data-field=\"owner\" value=\"${escapeAttr(item.owner)}\">\n <div style=\"margin-top:8px\" class=\"owner-pill\">${ownerAvatar(item.owner)}<span>${escapeHtml(item.owner)}<\/span><\/div>\n <\/td>\n <td class=\"mono\">${escapeHtml(item.updatedAt)}<\/td>\n <td class=\"cell-editable\"><textarea data-id=\"${item.id}\" data-field=\"note\">${escapeHtml(item.note)}<\/textarea><\/td>\n <td>\n <button class=\"btn btn-danger\" style=\"padding:10px 12px\" data-delete=\"${item.id}\">\u5220\u9664<\/button>\n <\/td>\n `;\n dom.tableBody.appendChild(tr);\n });\n\n bindTableEvents();\n renderStats();\n renderCharts();\n }\n\n function bindTableEvents(){\n dom.tableBody.querySelectorAll('input[data-id], textarea[data-id], select[data-id]').forEach(el => {\n el.addEventListener('change', handleFieldChange);\n if(el.tagName === 'INPUT' || el.tagName === 'TEXTAREA'){\n el.addEventListener('blur', handleFieldChange);\n }\n });\n\n dom.tableBody.querySelectorAll('[data-delete]').forEach(btn => {\n btn.addEventListener('click', () => deleteRow(btn.dataset.delete));\n });\n }\n\n function handleFieldChange(e){\n const el = e.target;\n const id = el.dataset.id;\n const field = el.dataset.field;\n const row = issues.find(x => x.id === id);\n if(!row) return;\n const oldValue = row[field];\n const newValue = el.value.trim();\n if(oldValue === newValue) return;\n row[field] = newValue;\n row.updatedAt = nowStr();\n saveData();\n logAction(`\u95ee\u9898 ${id} \u7684 ${field} \u5df2\u66f4\u65b0 : ${oldValue || '-'} \u2192 ${newValue || '-'}`);\n renderTable();\n }\n\n function deleteRow(id){\n const row = issues.find(x => x.id === id);\n issues = issues.filter(x => x.id !== id);\n saveData();\n logAction(`\u95ee\u9898 ${id} \u5df2\u5220\u9664${row ? ' : ' + row.title : ''}`);\n renderTable();\n }\n\n function addRow(){\n const next = issues.length + 1;\n const pad = String(next).padStart(2,'0');\n const id = `THKI-${String(new Date().getFullYear()).slice(2)}${pad}NEW`;\n const row = {\n id,\n title: '\u65b0\u95ee\u9898 : \u8bf7\u586b\u5199\u6807\u9898',\n status: '\u95ee\u9898\u786e\u8ba4\u4e2d',\n level: '\u4e00\u822c',\n project: '\u65b0\u9879\u76ee',\n creator: 'THKI',\n owner: 'SRT',\n updatedAt: nowStr(),\n note: '\u8bf7\u586b\u5199\u5904\u7406\u5907\u6ce8'\n };\n issues.unshift(row);\n saveData();\n logAction(`\u65b0\u589e\u95ee\u9898 ${id}`);\n renderTable();\n }\n\n function renderStats(){\n const list = getFilteredIssues();\n const total = list.length;\n const openCount = list.filter(x => x.status !== '\u5df2\u5173\u95ed').length;\n const highCount = list.filter(x => x.level === '\u81f4\u547d' || x.level === '\u4e25\u91cd').length;\n const doneCount = list.filter(x => x.status === '\u5df2\u5173\u95ed').length;\n const closeRate = total ? Math.round(doneCount \/ total * 100) : 0;\n\n dom.statTotal.textContent = total;\n dom.statOpen.textContent = openCount;\n dom.statHigh.textContent = highCount;\n dom.statCloseRate.textContent = `${closeRate}%`;\n }\n\n function renderCharts(){\n const list = getFilteredIssues();\n const counts = {\n '\u95ee\u9898\u786e\u8ba4\u4e2d': 0,\n '\u5206\u6790\u4e0e\u89e3\u51b3': 0,\n '\u6d4b\u8bd5\u9a8c\u8bc1': 0,\n '\u5df2\u5173\u95ed': 0\n };\n list.forEach(x => { if(counts[x.status] !== undefined) counts[x.status]++; });\n\n const max = Math.max(...Object.values(counts), 1);\n const colors = {\n '\u95ee\u9898\u786e\u8ba4\u4e2d':'#3b82f6',\n '\u5206\u6790\u4e0e\u89e3\u51b3':'#f59e0b',\n '\u6d4b\u8bd5\u9a8c\u8bc1':'#8b5cf6',\n '\u5df2\u5173\u95ed':'#10b981'\n };\n\n dom.statusBars.innerHTML = Object.entries(counts).map(([k,v]) => {\n const h = Math.max(14, Math.round(v \/ max * 150));\n return `\n <div class=\"bar-col\">\n <div class=\"bar-value mono\">${v}<\/div>\n <div class=\"bar\" style=\"height:${h}px;background:linear-gradient(180deg, ${hexToRgba(colors[k], .65)}, ${colors[k]});\"><\/div>\n <div class=\"bar-label\">${k}<\/div>\n <\/div>\n `;\n }).join('');\n\n const total = Object.values(counts).reduce((a,b)=>a+b,0) || 1;\n dom.statusLegend.innerHTML = Object.entries(counts).map(([k,v]) => `\n <div class=\"legend-item\">\n <div class=\"legend-left\"><span class=\"dot\" style=\"background:${colors[k]}\"><\/span><span>${k}<\/span><\/div>\n <strong class=\"mono\">${v} \/ ${Math.round(v\/total*100)}%<\/strong>\n <\/div>\n `).join('');\n }\n\n function renderLogs(){\n if(!logs.length){\n dom.logList.innerHTML = '<div class=\"log-item\"><div class=\"text\">\u6682\u65e0\u64cd\u4f5c\u8bb0\u5f55<\/div><\/div>';\n return;\n }\n dom.logList.innerHTML = logs.map(item => `\n <div class=\"log-item\">\n <div class=\"time mono\">${escapeHtml(item.time)}<\/div>\n <div class=\"text\">${escapeHtml(item.text)}<\/div>\n <\/div>\n `).join('');\n }\n\n function resetSeed(){\n issues = structuredClone(initialData);\n logs = [];\n saveData();\n saveLogs();\n logAction('\u5df2\u91cd\u7f6e\u4e3a\u793a\u4f8b\u6570\u636e');\n renderTable();\n }\n\n function exportJson(){\n const blob = new Blob([JSON.stringify(issues, null, 2)], {type:'application\/json'});\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'thki-srt-issues.json';\n a.click();\n URL.revokeObjectURL(url);\n logAction('\u5df2\u5bfc\u51fa\u5f53\u524d\u95ee\u9898\u6570\u636e JSON');\n }\n\n function escapeHtml(str=''){\n return String(str)\n .replace(\/&\/g,'&')\n .replace(\/<\/g,'<')\n .replace(\/>\/g,'>')\n .replace(\/\"\/g,'"')\n .replace(\/'\/g,''');\n }\n\n function escapeAttr(str=''){\n return escapeHtml(str);\n }\n\n function hexToRgba(hex, alpha){\n const h = hex.replace('#','');\n const bigint = parseInt(h.length === 3 ? h.split('').map(x=>x+x).join('') : h, 16);\n const r = (bigint >> 16) & 255;\n const g = (bigint >> 8) & 255;\n const b = bigint & 255;\n return `rgba(${r},${g},${b},${alpha})`;\n }\n\n [dom.searchInput, dom.statusFilter, dom.levelFilter, dom.ownerFilter, dom.projectFilter].forEach(el => {\n el.addEventListener('input', renderTable);\n el.addEventListener('change', renderTable);\n });\n\n dom.addRowBtn.addEventListener('click', addRow);\n dom.seedBtn.addEventListener('click', resetSeed);\n dom.exportBtn.addEventListener('click', exportJson);\n\n renderTable();\n renderLogs();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>THKI \u00d7 SRT \u552e\u540e\u95ee\u9898\u7ba1\u7406\u4e2d\u5fc3 SR THKI \u00d7 SRT \u552e\u540e\u95ee\u9898\u534f\u540c\u7ba1\u7406 Navigation \ud83d\udccb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-865","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/pages\/865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sr-trade.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=865"}],"version-history":[{"count":2,"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/pages\/865\/revisions"}],"predecessor-version":[{"id":869,"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/pages\/865\/revisions\/869"}],"wp:attachment":[{"href":"https:\/\/sr-trade.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":865,"date":"2026-03-28T14:26:17","date_gmt":"2026-03-28T05:26:17","guid":{"rendered":"https:\/\/sr-trade.jp\/?page_id=865"},"modified":"2026-03-28T14:35:50","modified_gmt":"2026-03-28T05:35:50","slug":"ones","status":"publish","type":"page","link":"https:\/\/sr-trade.jp\/?page_id=865","title":{"rendered":"Ones"},"content":{"rendered":"\n\n\n\n \n \n THKI \u00d7 SRT \u552e\u540e\u95ee\u9898\u7ba1\u7406\u4e2d\u5fc3<\/title>\n <style>\n :root{\n --bg:#f4f7fb;\n --panel:#ffffff;\n --panel-2:#f8fbff;\n --text:#1f2937;\n --muted:#6b7280;\n --line:#e5edf5;\n --accent:#0f8bff;\n --accent-2:#0a6fd1;\n --nav:#1e2c3b;\n --nav-2:#102131;\n --success:#13b26b;\n --warn:#f59e0b;\n --danger:#ef4444;\n --info:#3b82f6;\n --purple:#7c3aed;\n --shadow:0 10px 30px rgba(15,23,42,.08);\n --radius:18px;\n }\n\n *{box-sizing:border-box}\n html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:\"Noto Sans JP\",\"Segoe UI\",\"PingFang SC\",\"Microsoft YaHei\",sans-serif}\n a{text-decoration:none;color:inherit}\n button,input,select,textarea{font:inherit}\n\n .app{\n min-height:100vh;\n display:grid;\n grid-template-columns:260px 1fr;\n }\n\n .sidebar{\n background:linear-gradient(180deg,var(--nav),var(--nav-2));\n color:#eaf2ff;\n padding:20px 18px;\n display:flex;\n flex-direction:column;\n gap:18px;\n box-shadow:8px 0 30px rgba(2,6,23,.12);\n position:sticky;\n top:0;\n height:100vh;\n }\n\n .brand{\n display:flex;\n align-items:center;\n gap:12px;\n padding:10px 8px 20px;\n border-bottom:1px solid rgba(255,255,255,.08);\n }\n\n .brand-mark{\n width:42px;height:42px;border-radius:12px;\n background:linear-gradient(135deg,#14b8ff,#2563eb);\n display:grid;place-items:center;color:#fff;font-weight:800;\n box-shadow:0 10px 20px rgba(37,99,235,.35);\n }\n\n .brand-title{font-size:20px;font-weight:800;line-height:1.2}\n .brand-sub{font-size:12px;color:#9bb2ca;margin-top:4px}\n\n .nav-group{display:flex;flex-direction:column;gap:8px}\n .nav-title{padding:8px 10px;color:#8ba1b8;font-size:12px;text-transform:uppercase;letter-spacing:.08em}\n .nav-item{\n display:flex;align-items:center;gap:12px;\n padding:14px 14px;border-radius:14px;color:#d9e7f6;\n transition:.2s ease;\n border:1px solid transparent;\n }\n .nav-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}\n .nav-item.active{\n background:linear-gradient(90deg,rgba(15,139,255,.22),rgba(15,139,255,.08));\n border-color:rgba(15,139,255,.35);\n color:#fff;\n }\n .nav-icon{width:22px;text-align:center;opacity:.95}\n\n .main{\n padding:22px;\n display:flex;\n flex-direction:column;\n gap:18px;\n min-width:0;\n }\n\n .topbar{\n background:rgba(255,255,255,.7);\n backdrop-filter:blur(14px);\n border:1px solid rgba(255,255,255,.65);\n border-radius:22px;\n padding:16px 20px;\n display:flex;\n justify-content:space-between;\n align-items:center;\n box-shadow:var(--shadow);\n gap:16px;\n flex-wrap:wrap;\n }\n\n .page-head h1{margin:0;font-size:28px;line-height:1.2}\n .page-head p{margin:6px 0 0;color:var(--muted);font-size:14px}\n\n .top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\n .btn{\n border:none;cursor:pointer;border-radius:14px;padding:12px 16px;\n font-weight:700;transition:.2s ease;display:inline-flex;align-items:center;gap:8px;\n }\n .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 12px 24px rgba(15,139,255,.22)}\n .btn-primary:hover{transform:translateY(-1px)}\n .btn-ghost{background:#fff;color:var(--text);border:1px solid var(--line)}\n .btn-danger{background:#fff2f2;color:#b91c1c;border:1px solid #fecaca}\n\n .toolbar{\n display:grid;\n grid-template-columns:1.4fr repeat(4,minmax(150px,1fr));\n gap:12px;\n }\n .tool-card{\n background:var(--panel);border-radius:18px;padding:14px 16px;border:1px solid var(--line);\n box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;\n }\n .tool-card input,.tool-card select{\n border:none;outline:none;width:100%;background:transparent;color:var(--text)\n }\n\n .stats{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:14px;\n }\n .stat{\n background:linear-gradient(180deg,#fff,#fafdff);\n border:1px solid var(--line);\n border-radius:20px;padding:18px 18px 16px;box-shadow:var(--shadow);\n position:relative;overflow:hidden;\n }\n .stat::after{\n content:\"\";position:absolute;right:-20px;top:-20px;width:88px;height:88px;border-radius:50%;background:rgba(15,139,255,.07)\n }\n .stat-label{font-size:13px;color:var(--muted)}\n .stat-value{font-size:32px;font-weight:800;margin-top:8px}\n .stat-note{font-size:12px;color:var(--muted);margin-top:6px}\n\n .content-grid{\n display:grid;\n grid-template-columns:1fr 320px;\n gap:18px;\n min-width:0;\n }\n\n .panel{\n background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);min-width:0;\n }\n\n .panel-head{\n padding:18px 18px 10px;\n display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;\n }\n .panel-title{font-size:18px;font-weight:800}\n .panel-sub{font-size:13px;color:var(--muted);margin-top:4px}\n\n .table-wrap{padding:0 12px 12px;overflow:auto}\n table{width:100%;border-collapse:separate;border-spacing:0 10px;min-width:1200px}\n thead th{\n text-align:left;font-size:12px;color:#6b7280;padding:0 12px 8px;font-weight:800;white-space:nowrap;\n }\n tbody tr{background:#fbfdff}\n tbody td{\n padding:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fbfdff;vertical-align:middle\n }\n tbody td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}\n tbody td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}\n tbody tr:hover td{background:#f5faff}\n\n .cell-editable{min-width:120px}\n .cell-editable input,\n .cell-editable textarea,\n .cell-editable select{\n width:100%;border:1px solid transparent;background:transparent;border-radius:10px;padding:8px 10px;outline:none;transition:.18s ease;color:var(--text)\n }\n .cell-editable textarea{resize:vertical;min-height:40px}\n .cell-editable input:focus,\n .cell-editable textarea:focus,\n .cell-editable select:focus{\n background:#fff;border-color:#bfdbfe;box-shadow:0 0 0 4px rgba(59,130,246,.12)\n }\n\n .badge{\n display:inline-flex;align-items:center;justify-content:center;\n min-width:76px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;border:1px solid transparent\n }\n .status-open{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}\n .status-progress{background:#fff7ed;color:#d97706;border-color:#fed7aa}\n .status-done{background:#ecfdf5;color:#059669;border-color:#bbf7d0}\n .level-critical{background:#fef2f2;color:#dc2626}\n .level-high{background:#fff7ed;color:#ea580c}\n .level-medium{background:#f5f3ff;color:#7c3aed}\n .level-low{background:#f0fdf4;color:#16a34a}\n .owner-pill{display:inline-flex;align-items:center;gap:8px}\n .avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c7d2fe,#93c5fd);font-size:12px;font-weight:800;color:#1e3a8a}\n\n .side-panels{display:flex;flex-direction:column;gap:18px}\n .chart-card,.log-card{padding:16px 16px 18px}\n .chart-box{margin-top:10px}\n .mini-bars{display:flex;align-items:end;gap:12px;height:180px;padding:14px 2px 0}\n .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}\n .bar{\n width:100%;max-width:46px;border-radius:14px 14px 8px 8px;\n background:linear-gradient(180deg,#66b8ff,#0f8bff);box-shadow:0 10px 20px rgba(15,139,255,.18);\n min-height:10px;transition:height .25s ease;\n }\n .bar-label{font-size:12px;color:var(--muted)}\n .bar-value{font-size:12px;font-weight:700;color:#1f2937}\n\n .pie-legend{display:grid;gap:10px;margin-top:14px}\n .legend-item{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text)}\n .legend-left{display:flex;align-items:center;gap:10px}\n .dot{width:10px;height:10px;border-radius:50%}\n\n .log-list{display:grid;gap:10px;margin-top:10px;max-height:320px;overflow:auto}\n .log-item{padding:12px;border-radius:14px;background:#f8fbff;border:1px solid var(--line)}\n .log-item .time{font-size:12px;color:var(--muted);margin-bottom:4px}\n .log-item .text{font-size:13px;line-height:1.6;color:var(--text)}\n\n .footer-note{font-size:12px;color:var(--muted);padding:0 4px}\n\n .empty{\n padding:26px 16px;text-align:center;color:var(--muted);font-size:14px\n }\n\n .mono{font-variant-numeric:tabular-nums}\n\n @media (max-width: 1440px){\n .stats{grid-template-columns:repeat(2,1fr)}\n .content-grid{grid-template-columns:1fr}\n }\n @media (max-width: 1080px){\n .app{grid-template-columns:1fr}\n .sidebar{position:relative;height:auto}\n .toolbar{grid-template-columns:1fr 1fr}\n }\n @media (max-width: 720px){\n .main{padding:14px}\n .stats,.toolbar{grid-template-columns:1fr}\n .topbar{padding:14px}\n .page-head h1{font-size:22px}\n }\n\n @media (prefers-reduced-motion: reduce){\n *,*::before,*::after{transition:none !important;scroll-behavior:auto !important}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"app\">\n <aside class=\"sidebar\">\n <div class=\"brand\">\n <div class=\"brand-mark\">SR<\/div>\n <div>\n <div class=\"brand-title\">THKI \u00d7 SRT<\/div>\n <div class=\"brand-sub\">\u552e\u540e\u95ee\u9898\u534f\u540c\u7ba1\u7406<\/div>\n <\/div>\n <\/div>\n\n <div class=\"nav-group\">\n <div class=\"nav-title\">Navigation<\/div>\n <a class=\"nav-item active\" href=\"#\">\n <span class=\"nav-icon\">\ud83d\udccb<\/span>\n <span>\u95ee\u9898\u7ba1\u7406\u4e2d\u5fc3<\/span>\n <\/a>\n <a class=\"nav-item\" href=\"#dashboard\">\n <span class=\"nav-icon\">\ud83d\udcca<\/span>\n <span>\u6570\u636e\u6982\u89c8<\/span>\n <\/a>\n <a class=\"nav-item\" href=\"#logs\">\n <span class=\"nav-icon\">\ud83d\udd52<\/span>\n <span>\u66f4\u65b0\u8bb0\u5f55<\/span>\n <\/a>\n <a class=\"nav-item\" href=\"#\">\n <span class=\"nav-icon\">\u2699\ufe0f<\/span>\n <span>\u89c6\u56fe\u7ba1\u7406<\/span>\n <\/a>\n <\/div>\n\n <div class=\"nav-group\" style=\"margin-top:auto\">\n <div class=\"nav-title\">\u8bf4\u660e<\/div>\n <div style=\"padding:0 10px;color:#9bb2ca;font-size:13px;line-height:1.75\">\n \u8be5\u9875\u9762\u4e3a\u524d\u7aef\u53ef\u89c6\u5316\u793a\u4f8b\u3002<br>\n \u884c\u5185\u7f16\u8f91\u3001\u7b5b\u9009\u3001\u7edf\u8ba1\u8054\u52a8\u5747\u53ef\u7acb\u5373\u751f\u6548\u3002<br>\n \u5f53\u524d\u7248\u672c\u9ed8\u8ba4\u4fdd\u5b58\u5230\u6d4f\u89c8\u5668 localStorage\u3002\n <\/div>\n <\/div>\n <\/aside>\n\n <main class=\"main\">\n <section class=\"topbar\">\n <div class=\"page-head\">\n <h1>\u552e\u540e\u95ee\u9898\u7ba1\u7406\u4e2d\u5fc3<\/h1>\n <p>\u9762\u5411 THKI \u4e0e SRT \u7684\u534f\u540c\u552e\u540e\u95ee\u9898\u53f0\u8d26\uff0c\u652f\u6301\u884c\u5185\u7f16\u8f91\u3001\u72b6\u6001\u53ef\u89c6\u5316\u3001\u7b5b\u9009\u8054\u52a8\u4e0e\u672c\u5730\u6301\u4e45\u5316\u3002<\/p>\n <\/div>\n <div class=\"top-actions\">\n <button class=\"btn btn-ghost\" id=\"seedBtn\">\u91cd\u7f6e\u793a\u4f8b\u6570\u636e<\/button>\n <button class=\"btn btn-ghost\" id=\"exportBtn\">\u5bfc\u51fa JSON<\/button>\n <button class=\"btn btn-primary\" id=\"addRowBtn\">\uff0b \u65b0\u589e\u95ee\u9898<\/button>\n <\/div>\n <\/section>\n\n <section class=\"toolbar\" id=\"dashboard\">\n <div class=\"tool-card\">\n <span>\ud83d\udd0d<\/span>\n <input id=\"searchInput\" type=\"text\" placeholder=\"\u641c\u7d22\u6807\u9898 \/ \u9879\u76ee \/ \u8d23\u4efb\u4eba \/ \u95ee\u9898 ID\" \/>\n <\/div>\n <div class=\"tool-card\">\n <span>\u72b6\u6001<\/span>\n <select id=\"statusFilter\">\n <option value=\"\">\u5168\u90e8<\/option>\n <option value=\"\u95ee\u9898\u786e\u8ba4\u4e2d\">\u95ee\u9898\u786e\u8ba4\u4e2d<\/option>\n <option value=\"\u5206\u6790\u4e0e\u89e3\u51b3\">\u5206\u6790\u4e0e\u89e3\u51b3<\/option>\n <option value=\"\u6d4b\u8bd5\u9a8c\u8bc1\">\u6d4b\u8bd5\u9a8c\u8bc1<\/option>\n <option value=\"\u5df2\u5173\u95ed\">\u5df2\u5173\u95ed<\/option>\n <\/select>\n <\/div>\n <div class=\"tool-card\">\n <span>\u7b49\u7ea7<\/span>\n <select id=\"levelFilter\">\n <option value=\"\">\u5168\u90e8<\/option>\n <option value=\"\u81f4\u547d\">\u81f4\u547d<\/option>\n <option value=\"\u4e25\u91cd\">\u4e25\u91cd<\/option>\n <option value=\"\u4e00\u822c\">\u4e00\u822c<\/option>\n <option value=\"\u8f7b\u5fae\">\u8f7b\u5fae<\/option>\n <\/select>\n <\/div>\n <div class=\"tool-card\">\n <span>\u8d1f\u8d23\u4eba<\/span>\n <input id=\"ownerFilter\" type=\"text\" placeholder=\"\u8f93\u5165\u8d1f\u8d23\u4eba\" \/>\n <\/div>\n <div class=\"tool-card\">\n <span>\u9879\u76ee<\/span>\n <input id=\"projectFilter\" type=\"text\" placeholder=\"\u8f93\u5165\u9879\u76ee\u540d\" \/>\n <\/div>\n <\/section>\n\n <section class=\"stats\">\n <div class=\"stat\">\n <div class=\"stat-label\">\u95ee\u9898\u603b\u6570<\/div>\n <div class=\"stat-value mono\" id=\"statTotal\">0<\/div>\n <div class=\"stat-note\">\u5f53\u524d\u7b5b\u9009\u7ed3\u679c<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-label\">\u672a\u5173\u95ed\u95ee\u9898<\/div>\n <div class=\"stat-value mono\" id=\"statOpen\">0<\/div>\n <div class=\"stat-note\">\u95ee\u9898\u786e\u8ba4\u4e2d \/ \u5206\u6790\u4e0e\u89e3\u51b3 \/ \u6d4b\u8bd5\u9a8c\u8bc1<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-label\">\u4e25\u91cd\u53ca\u4ee5\u4e0a<\/div>\n <div class=\"stat-value mono\" id=\"statHigh\">0<\/div>\n <div class=\"stat-note\">\u81f4\u547d + \u4e25\u91cd<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-label\">\u5df2\u5173\u95ed\u7387<\/div>\n <div class=\"stat-value mono\" id=\"statCloseRate\">0%<\/div>\n <div class=\"stat-note\">\u57fa\u4e8e\u5f53\u524d\u7b5b\u9009\u7ed3\u679c\u52a8\u6001\u8ba1\u7b97<\/div>\n <\/div>\n <\/section>\n\n <section class=\"content-grid\">\n <div class=\"panel\">\n <div class=\"panel-head\">\n <div>\n <div class=\"panel-title\">\u95ee\u9898\u53f0\u8d26<\/div>\n <div class=\"panel-sub\">\u53cc\u51fb\u6216\u76f4\u63a5\u70b9\u51fb\u5355\u5143\u683c\u5373\u53ef\u7f16\u8f91\u3002\u4fee\u6539\u540e\u7edf\u8ba1\u4e0e\u53f3\u4fa7\u53ef\u89c6\u5316\u7acb\u5373\u8054\u52a8\u3002<\/div>\n <\/div>\n <\/div>\n\n <div class=\"table-wrap\">\n <table>\n <thead>\n <tr>\n <th style=\"width:90px\">ID<\/th>\n <th style=\"min-width:260px\">\u6807\u9898<\/th>\n <th style=\"width:130px\">\u72b6\u6001<\/th>\n <th style=\"width:110px\">\u7b49\u7ea7<\/th>\n <th style=\"width:140px\">\u9879\u76ee<\/th>\n <th style=\"width:120px\">\u521b\u5efa\u8005<\/th>\n <th style=\"width:120px\">\u8d1f\u8d23\u4eba<\/th>\n <th style=\"width:140px\">\u6700\u540e\u66f4\u65b0<\/th>\n <th style=\"min-width:220px\">\u5904\u7406\u5907\u6ce8<\/th>\n <th style=\"width:90px\">\u64cd\u4f5c<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"issueTableBody\"><\/tbody>\n <\/table>\n <div class=\"empty\" id=\"emptyState\" style=\"display:none\">\u5f53\u524d\u7b5b\u9009\u6761\u4ef6\u4e0b\u6ca1\u6709\u6570\u636e\u3002<\/div>\n <\/div>\n <\/div>\n\n <div class=\"side-panels\">\n <section class=\"panel chart-card\">\n <div class=\"panel-title\">\u72b6\u6001\u5206\u5e03<\/div>\n <div class=\"panel-sub\">\u6309\u5f53\u524d\u7b5b\u9009\u7ed3\u679c\u7edf\u8ba1<\/div>\n <div class=\"chart-box\">\n <div class=\"mini-bars\" id=\"statusBars\"><\/div>\n <div class=\"pie-legend\" id=\"statusLegend\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"panel log-card\" id=\"logs\">\n <div class=\"panel-title\">\u5b9e\u65f6\u66f4\u65b0\u8bb0\u5f55<\/div>\n <div class=\"panel-sub\">\u6240\u6709\u65b0\u589e\u3001\u4fee\u6539\u3001\u5220\u9664\u4f1a\u8bb0\u5f55\u5230\u4e0b\u65b9<\/div>\n <div class=\"log-list\" id=\"logList\"><\/div>\n <div class=\"footer-note\" style=\"margin-top:10px\">\n \u6ce8: \u8fd9\u662f\u524d\u7aef\u5b9e\u65f6\u66f4\u65b0\uff0c\u4e0d\u662f\u591a\u4eba\u5b9e\u65f6\u534f\u540c\u3002\u8981\u505a\u591a\u4eba\u540c\u6b65\uff0c\u5fc5\u987b\u63a5\u540e\u7aef\u6570\u636e\u5e93\u4e0e WebSocket\/\u98de\u4e66\u591a\u7ef4\u8868\u683c API\u3002\n <\/div>\n <\/section>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n\n <script>\n const STORAGE_KEY = 'thki_srt_issue_center_v1';\n const LOG_KEY = 'thki_srt_issue_logs_v1';\n\n const initialData = [\n {\n id: 'THKI-250301',\n title: 'AdvanTest 2nd \u9879\u76ee : 300E \u5bf9\u63a5\u8f8a\u7b52\u7ad9\u65f6\u4f4d\u7f6e\u504f\u5dee\u8d85\u51fa\u9608\u503c',\n status: '\u95ee\u9898\u786e\u8ba4\u4e2d',\n level: '\u4e25\u91cd',\n project: 'AdvanTest',\n creator: 'THKI \u6c38\u77f3',\n owner: 'SRT \u9648',\n updatedAt: '2026-03-28 09:10',\n note: '\u5ba2\u6237\u73b0\u573a\u590d\u73b0 2 \u6b21\uff0c\u9700\u8981\u786e\u8ba4\u5730\u56fe\u7279\u5f81\u70b9\u4e0e\u5bf9\u63a5\u4fa7\u8fb9\u8ddd\u3002'\n },\n {\n id: 'THKI-250302',\n title: 'SUMCO \u9879\u76ee : \u7535\u68af\u524d\u7b49\u5f85\u533a\u62e5\u5835\u5bfc\u81f4\u4e24\u53f0 AMR \u4e92\u9501',\n status: '\u5206\u6790\u4e0e\u89e3\u51b3',\n level: '\u4e25\u91cd',\n project: 'SUMCO',\n creator: 'THKI \u4f50\u85e4',\n owner: 'SRT \u5434',\n updatedAt: '2026-03-28 10:25',\n note: '\u5efa\u8bae\u65b0\u589e\u533a\u57df\u4e92\u65a5\u89c4\u5219\uff0c\u5e76\u91cd\u65b0\u5b9a\u4e49\u7535\u68af\u53e3 waiting logic\u3002'\n },\n {\n id: 'THKI-250303',\n title: 'Panasonic \u6848\u4ef6 : \u7ad9\u70b9\u524d\u65b9\u8bc6\u522b\u6296\u52a8\uff0c\u5bfc\u81f4\u63a5\u9a73\u540e\u9000\u91cd\u8bd5',\n status: '\u6d4b\u8bd5\u9a8c\u8bc1',\n level: '\u4e00\u822c',\n project: 'Panasonic',\n creator: 'THKI \u85e4\u6751',\n owner: 'SRT \u9648',\n updatedAt: '2026-03-28 11:40',\n note: '\u5df2\u5bfc\u5165 odometry-only \u533a\u57df\uff0c\u7b49\u5f85\u73b0\u573a\u957f\u65f6\u95f4\u9a8c\u8bc1\u3002'\n },\n {\n id: 'THKI-250304',\n title: 'FUJI \u5c55\u793a\u7ebf : \u5149\u901a\u4fe1\u4fe1\u53f7\u7a97\u53e3\u91cd\u53e0\uff0c\u5bfc\u81f4\u4efb\u52a1\u63d0\u524d\u6302\u8d77',\n status: '\u5206\u6790\u4e0e\u89e3\u51b3',\n level: '\u81f4\u547d',\n project: 'FUJI',\n creator: 'THKI \u4e2d\u6751',\n owner: 'SRT \u5434',\n updatedAt: '2026-03-28 12:05',\n note: '\u9700\u8981\u660e\u786e left\/right at-position \u6e05\u96f6\u903b\u8f91\uff0c\u6392\u67e5 EAC \u534f\u8bae\u8282\u62cd\u3002'\n },\n {\n id: 'THKI-250305',\n title: 'ROHM Apollo : 600EL \u5de5\u4f5c\u533a\u57df\u907f\u8ba9\u529f\u80fd\u7248\u672c\u4e0d\u6ee1\u8db3',\n status: '\u5df2\u5173\u95ed',\n level: '\u8f7b\u5fae',\n project: 'ROHM Apollo',\n creator: 'THKI \u5c71\u672c',\n owner: 'SRT \u8bb8',\n updatedAt: '2026-03-27 18:20',\n note: '\u5df2\u786e\u8ba4\u7248\u672c\u6761\u4ef6\u5e76\u5b8c\u6210\u8bf4\u660e\uff0c\u5ba2\u6237\u63a5\u53d7\u540e\u7eed\u5347\u7ea7\u8ba1\u5212\u3002'\n }\n ];\n\n const dom = {\n tableBody: document.getElementById('issueTableBody'),\n emptyState: document.getElementById('emptyState'),\n statusBars: document.getElementById('statusBars'),\n statusLegend: document.getElementById('statusLegend'),\n logList: document.getElementById('logList'),\n searchInput: document.getElementById('searchInput'),\n statusFilter: document.getElementById('statusFilter'),\n levelFilter: document.getElementById('levelFilter'),\n ownerFilter: document.getElementById('ownerFilter'),\n projectFilter: document.getElementById('projectFilter'),\n statTotal: document.getElementById('statTotal'),\n statOpen: document.getElementById('statOpen'),\n statHigh: document.getElementById('statHigh'),\n statCloseRate: document.getElementById('statCloseRate'),\n addRowBtn: document.getElementById('addRowBtn'),\n seedBtn: document.getElementById('seedBtn'),\n exportBtn: document.getElementById('exportBtn')\n };\n\n let issues = loadData();\n let logs = loadLogs();\n\n function loadData(){\n const saved = localStorage.getItem(STORAGE_KEY);\n if(!saved) return structuredClone(initialData);\n try { return JSON.parse(saved); } catch { return structuredClone(initialData); }\n }\n\n function loadLogs(){\n const saved = localStorage.getItem(LOG_KEY);\n if(!saved) return [];\n try { return JSON.parse(saved); } catch { return []; }\n }\n\n function saveData(){\n localStorage.setItem(STORAGE_KEY, JSON.stringify(issues));\n }\n\n function saveLogs(){\n localStorage.setItem(LOG_KEY, JSON.stringify(logs.slice(0,50)));\n }\n\n function nowStr(){\n const d = new Date();\n const pad = n => String(n).padStart(2,'0');\n return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;\n }\n\n function logAction(text){\n logs.unshift({ time: nowStr(), text });\n logs = logs.slice(0, 50);\n saveLogs();\n renderLogs();\n }\n\n function getFilteredIssues(){\n const q = dom.searchInput.value.trim().toLowerCase();\n const status = dom.statusFilter.value.trim();\n const level = dom.levelFilter.value.trim();\n const owner = dom.ownerFilter.value.trim().toLowerCase();\n const project = dom.projectFilter.value.trim().toLowerCase();\n\n return issues.filter(item => {\n const hay = [item.id,item.title,item.project,item.creator,item.owner,item.note].join(' ').toLowerCase();\n const matchQ = !q || hay.includes(q);\n const matchStatus = !status || item.status === status;\n const matchLevel = !level || item.level === level;\n const matchOwner = !owner || item.owner.toLowerCase().includes(owner);\n const matchProject = !project || item.project.toLowerCase().includes(project);\n return matchQ && matchStatus && matchLevel && matchOwner && matchProject;\n });\n }\n\n function levelClass(level){\n return level === '\u81f4\u547d' ? 'level-critical' :\n level === '\u4e25\u91cd' ? 'level-high' :\n level === '\u4e00\u822c' ? 'level-medium' : 'level-low';\n }\n\n function statusClass(status){\n return status === '\u95ee\u9898\u786e\u8ba4\u4e2d' ? 'status-open' :\n status === '\u5206\u6790\u4e0e\u89e3\u51b3' ? 'status-progress' :\n status === '\u6d4b\u8bd5\u9a8c\u8bc1' ? 'status-progress' : 'status-done';\n }\n\n function ownerAvatar(name=''){\n const txt = name.replace(\/\\s+\/g,'').slice(-1) || '\u4eba';\n return `<span class=\"avatar\">${txt}<\/span>`;\n }\n\n function renderTable(){\n const list = getFilteredIssues();\n dom.tableBody.innerHTML = '';\n dom.emptyState.style.display = list.length ? 'none' : 'block';\n\n list.forEach((item, index) => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td class=\"mono\">${escapeHtml(item.id)}<\/td>\n <td class=\"cell-editable\">\n <textarea data-id=\"${item.id}\" data-field=\"title\">${escapeHtml(item.title)}<\/textarea>\n <\/td>\n <td class=\"cell-editable\">\n <select data-id=\"${item.id}\" data-field=\"status\">\n ${['\u95ee\u9898\u786e\u8ba4\u4e2d','\u5206\u6790\u4e0e\u89e3\u51b3','\u6d4b\u8bd5\u9a8c\u8bc1','\u5df2\u5173\u95ed'].map(v => `<option value=\"${v}\" ${item.status===v?'selected':''}>${v}<\/option>`).join('')}\n <\/select>\n <div style=\"margin-top:8px\"><span class=\"badge ${statusClass(item.status)}\">${item.status}<\/span><\/div>\n <\/td>\n <td class=\"cell-editable\">\n <select data-id=\"${item.id}\" data-field=\"level\">\n ${['\u81f4\u547d','\u4e25\u91cd','\u4e00\u822c','\u8f7b\u5fae'].map(v => `<option value=\"${v}\" ${item.level===v?'selected':''}>${v}<\/option>`).join('')}\n <\/select>\n <div style=\"margin-top:8px\"><span class=\"badge ${levelClass(item.level)}\">${item.level}<\/span><\/div>\n <\/td>\n <td class=\"cell-editable\"><input data-id=\"${item.id}\" data-field=\"project\" value=\"${escapeAttr(item.project)}\"><\/td>\n <td class=\"cell-editable\"><input data-id=\"${item.id}\" data-field=\"creator\" value=\"${escapeAttr(item.creator)}\"><\/td>\n <td class=\"cell-editable\">\n <input data-id=\"${item.id}\" data-field=\"owner\" value=\"${escapeAttr(item.owner)}\">\n <div style=\"margin-top:8px\" class=\"owner-pill\">${ownerAvatar(item.owner)}<span>${escapeHtml(item.owner)}<\/span><\/div>\n <\/td>\n <td class=\"mono\">${escapeHtml(item.updatedAt)}<\/td>\n <td class=\"cell-editable\"><textarea data-id=\"${item.id}\" data-field=\"note\">${escapeHtml(item.note)}<\/textarea><\/td>\n <td>\n <button class=\"btn btn-danger\" style=\"padding:10px 12px\" data-delete=\"${item.id}\">\u5220\u9664<\/button>\n <\/td>\n `;\n dom.tableBody.appendChild(tr);\n });\n\n bindTableEvents();\n renderStats();\n renderCharts();\n }\n\n function bindTableEvents(){\n dom.tableBody.querySelectorAll('input[data-id], textarea[data-id], select[data-id]').forEach(el => {\n el.addEventListener('change', handleFieldChange);\n if(el.tagName === 'INPUT' || el.tagName === 'TEXTAREA'){\n el.addEventListener('blur', handleFieldChange);\n }\n });\n\n dom.tableBody.querySelectorAll('[data-delete]').forEach(btn => {\n btn.addEventListener('click', () => deleteRow(btn.dataset.delete));\n });\n }\n\n function handleFieldChange(e){\n const el = e.target;\n const id = el.dataset.id;\n const field = el.dataset.field;\n const row = issues.find(x => x.id === id);\n if(!row) return;\n const oldValue = row[field];\n const newValue = el.value.trim();\n if(oldValue === newValue) return;\n row[field] = newValue;\n row.updatedAt = nowStr();\n saveData();\n logAction(`\u95ee\u9898 ${id} \u7684 ${field} \u5df2\u66f4\u65b0 : ${oldValue || '-'} \u2192 ${newValue || '-'}`);\n renderTable();\n }\n\n function deleteRow(id){\n const row = issues.find(x => x.id === id);\n issues = issues.filter(x => x.id !== id);\n saveData();\n logAction(`\u95ee\u9898 ${id} \u5df2\u5220\u9664${row ? ' : ' + row.title : ''}`);\n renderTable();\n }\n\n function addRow(){\n const next = issues.length + 1;\n const pad = String(next).padStart(2,'0');\n const id = `THKI-${String(new Date().getFullYear()).slice(2)}${pad}NEW`;\n const row = {\n id,\n title: '\u65b0\u95ee\u9898 : \u8bf7\u586b\u5199\u6807\u9898',\n status: '\u95ee\u9898\u786e\u8ba4\u4e2d',\n level: '\u4e00\u822c',\n project: '\u65b0\u9879\u76ee',\n creator: 'THKI',\n owner: 'SRT',\n updatedAt: nowStr(),\n note: '\u8bf7\u586b\u5199\u5904\u7406\u5907\u6ce8'\n };\n issues.unshift(row);\n saveData();\n logAction(`\u65b0\u589e\u95ee\u9898 ${id}`);\n renderTable();\n }\n\n function renderStats(){\n const list = getFilteredIssues();\n const total = list.length;\n const openCount = list.filter(x => x.status !== '\u5df2\u5173\u95ed').length;\n const highCount = list.filter(x => x.level === '\u81f4\u547d' || x.level === '\u4e25\u91cd').length;\n const doneCount = list.filter(x => x.status === '\u5df2\u5173\u95ed').length;\n const closeRate = total ? Math.round(doneCount \/ total * 100) : 0;\n\n dom.statTotal.textContent = total;\n dom.statOpen.textContent = openCount;\n dom.statHigh.textContent = highCount;\n dom.statCloseRate.textContent = `${closeRate}%`;\n }\n\n function renderCharts(){\n const list = getFilteredIssues();\n const counts = {\n '\u95ee\u9898\u786e\u8ba4\u4e2d': 0,\n '\u5206\u6790\u4e0e\u89e3\u51b3': 0,\n '\u6d4b\u8bd5\u9a8c\u8bc1': 0,\n '\u5df2\u5173\u95ed': 0\n };\n list.forEach(x => { if(counts[x.status] !== undefined) counts[x.status]++; });\n\n const max = Math.max(...Object.values(counts), 1);\n const colors = {\n '\u95ee\u9898\u786e\u8ba4\u4e2d':'#3b82f6',\n '\u5206\u6790\u4e0e\u89e3\u51b3':'#f59e0b',\n '\u6d4b\u8bd5\u9a8c\u8bc1':'#8b5cf6',\n '\u5df2\u5173\u95ed':'#10b981'\n };\n\n dom.statusBars.innerHTML = Object.entries(counts).map(([k,v]) => {\n const h = Math.max(14, Math.round(v \/ max * 150));\n return `\n <div class=\"bar-col\">\n <div class=\"bar-value mono\">${v}<\/div>\n <div class=\"bar\" style=\"height:${h}px;background:linear-gradient(180deg, ${hexToRgba(colors[k], .65)}, ${colors[k]});\"><\/div>\n <div class=\"bar-label\">${k}<\/div>\n <\/div>\n `;\n }).join('');\n\n const total = Object.values(counts).reduce((a,b)=>a+b,0) || 1;\n dom.statusLegend.innerHTML = Object.entries(counts).map(([k,v]) => `\n <div class=\"legend-item\">\n <div class=\"legend-left\"><span class=\"dot\" style=\"background:${colors[k]}\"><\/span><span>${k}<\/span><\/div>\n <strong class=\"mono\">${v} \/ ${Math.round(v\/total*100)}%<\/strong>\n <\/div>\n `).join('');\n }\n\n function renderLogs(){\n if(!logs.length){\n dom.logList.innerHTML = '<div class=\"log-item\"><div class=\"text\">\u6682\u65e0\u64cd\u4f5c\u8bb0\u5f55<\/div><\/div>';\n return;\n }\n dom.logList.innerHTML = logs.map(item => `\n <div class=\"log-item\">\n <div class=\"time mono\">${escapeHtml(item.time)}<\/div>\n <div class=\"text\">${escapeHtml(item.text)}<\/div>\n <\/div>\n `).join('');\n }\n\n function resetSeed(){\n issues = structuredClone(initialData);\n logs = [];\n saveData();\n saveLogs();\n logAction('\u5df2\u91cd\u7f6e\u4e3a\u793a\u4f8b\u6570\u636e');\n renderTable();\n }\n\n function exportJson(){\n const blob = new Blob([JSON.stringify(issues, null, 2)], {type:'application\/json'});\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'thki-srt-issues.json';\n a.click();\n URL.revokeObjectURL(url);\n logAction('\u5df2\u5bfc\u51fa\u5f53\u524d\u95ee\u9898\u6570\u636e JSON');\n }\n\n function escapeHtml(str=''){\n return String(str)\n .replace(\/&\/g,'&')\n .replace(\/<\/g,'<')\n .replace(\/>\/g,'>')\n .replace(\/\"\/g,'"')\n .replace(\/'\/g,''');\n }\n\n function escapeAttr(str=''){\n return escapeHtml(str);\n }\n\n function hexToRgba(hex, alpha){\n const h = hex.replace('#','');\n const bigint = parseInt(h.length === 3 ? h.split('').map(x=>x+x).join('') : h, 16);\n const r = (bigint >> 16) & 255;\n const g = (bigint >> 8) & 255;\n const b = bigint & 255;\n return `rgba(${r},${g},${b},${alpha})`;\n }\n\n [dom.searchInput, dom.statusFilter, dom.levelFilter, dom.ownerFilter, dom.projectFilter].forEach(el => {\n el.addEventListener('input', renderTable);\n el.addEventListener('change', renderTable);\n });\n\n dom.addRowBtn.addEventListener('click', addRow);\n dom.seedBtn.addEventListener('click', resetSeed);\n dom.exportBtn.addEventListener('click', exportJson);\n\n renderTable();\n renderLogs();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>THKI \u00d7 SRT \u552e\u540e\u95ee\u9898\u7ba1\u7406\u4e2d\u5fc3 SR THKI \u00d7 SRT \u552e\u540e\u95ee\u9898\u534f\u540c\u7ba1\u7406 Navigation \ud83d\udccb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-865","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/pages\/865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sr-trade.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=865"}],"version-history":[{"count":2,"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/pages\/865\/revisions"}],"predecessor-version":[{"id":869,"href":"https:\/\/sr-trade.jp\/index.php?rest_route=\/wp\/v2\/pages\/865\/revisions\/869"}],"wp:attachment":[{"href":"https:\/\/sr-trade.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}