tt-help-cli-ycl 1.3.65 → 1.3.73

package/src/watch/public/app.js

@@ -33,7 +33,7 @@ async function fetchStats() {
   }
 }
 
-async function fetchUsers() {
+async function fetchUsers(showLoad) {
   try {
     const params = new URLSearchParams();
     if (currentFilter === "target") {
@@ -46,11 +46,13 @@ async function fetchUsers() {
     const search = document.getElementById("searchInput").value.trim();
     if (search) params.set("search", search);
     if (currentLocation) params.set("location", currentLocation);
-    params.set("limit", "200");
+    params.set("limit", "100");
+    if (showLoad) showLoading("加载中...");
     const res = await fetch("/api/users?" + params.toString());
     const data = await res.json();
     currentUsers = data.users || [];
     renderTable(currentUsers);
+    if (showLoad) hideLoading();
   } catch (e) {}
 }
 
@@ -309,7 +311,7 @@ function renderTable(users) {
   for (const u of users) newUserMap[u.uniqueId] = u;
 
   el.innerHTML = users
-    .map((u) => {
+    .map((u, idx) => {
       const wasStatus = prevUserMap[u.uniqueId]?.status;
       const nowStatus = u.status;
       const changed =
@@ -345,6 +347,11 @@ function renderTable(users) {
       const fans = u.followerCount != null ? formatNum(u.followerCount) : "-";
       const videos = u.videoCount != null ? u.videoCount : "-";
       const loc = u.locationCreated || "-";
+      const confirmedLoc = u.confirmedLocation
+        ? u.confirmedLocation === u.locationCreated
+          ? `<span style="color:#22c55e">${u.confirmedLocation} ✓</span>`
+          : `<span style="color:#ef4444">${u.confirmedLocation} ✗</span>`
+        : "-";
       const latestVideo = u.latestVideoTime
         ? formatTime(u.latestVideoTime * 1000)
         : "-";
@@ -377,6 +384,7 @@ function renderTable(users) {
           ? `<span class="tag error" style="font-size:10px">${u.statusCode}</span>`
           : "";
       return `<tr${rowClass}>
+      <td style="text-align:right;color:#555;padding-right:8px;font-size:12px">${idx + 1}</td>
       <td class="user-id" data-label="用户名">@${u.uniqueId}</td>
       <td data-label="昵称">${nick}</td>
       <td data-label="粉丝">${fans}</td>
@@ -428,7 +436,7 @@ function setFilter(f) {
     targetLocSel.style.display = "none";
     currentTargetLocation = "";
   }
-  fetchUsers();
+  fetchUsers(true);
 }
 
 function renderLocationFilter() {
@@ -448,15 +456,20 @@ function renderLocationFilter() {
 }
 
 function onLocationChange() {
-  const sel = document.getElementById("locationFilter");
-  currentLocation = sel.value;
-  fetchUsers();
-}
-
-function onTargetLocationChange() {
-  const sel = document.getElementById("targetLocationFilter");
-  currentTargetLocation = sel.value;
-  fetchUsers();
+  const locationSel = document.getElementById("locationFilter");
+  currentLocation = locationSel.value;
+  fetchUsers(true);
+  const targetSel = document.getElementById("targetLocationFilter");
+  currentTargetLocation = targetSel.value;
+  // 判断当前在哪个页面
+  if (document.getElementById("targetPage").classList.contains("active")) {
+    if (currentTargetSummary) {
+      renderTargetCountryGrid(currentTargetSummary.countries || []);
+      loadTargetUsersPage();
+    }
+  } else {
+    fetchUsers();
+  }
 }
 
 let searchTimer = null;
@@ -520,6 +533,97 @@ function closeAddModal() {
   if (overlay) overlay.remove();
 }
 
+// ========== 国家修改模态框 ==========
+
+const TARGET_LOCATIONS = [
+  "AT",
+  "BE",
+  "CZ",
+  "DE",
+  "ES",
+  "FR",
+  "GR",
+  "HU",
+  "IE",
+  "IT",
+  "NL",
+  "PL",
+  "PT",
+];
+
+function openLocationModal(uniqueId, currentLocation) {
+  let overlay = document.getElementById("locationModalOverlay");
+  if (overlay) return;
+  overlay = document.createElement("div");
+  overlay.id = "locationModalOverlay";
+  overlay.className = "modal-overlay";
+  const options = TARGET_LOCATIONS.map(
+    (loc) =>
+      `<button class="loc-option ${loc === currentLocation ? "active" : ""}" onclick="selectLocation('${uniqueId}','${loc}')">${loc}</button>`,
+  ).join("");
+  overlay.innerHTML = `
+    <div class="modal" style="max-width:420px">
+      <h3>修改用户国家</h3>
+      <div class="hint">用户: @${uniqueId}，当前国家: ${currentLocation}</div>
+      <div class="loc-grid">${options}</div>
+      <div class="btn-row" style="margin-top:16px">
+        <button class="btn-cancel" onclick="closeLocationModal()">取消</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) closeLocationModal();
+  });
+}
+
+function closeLocationModal() {
+  const overlay = document.getElementById("locationModalOverlay");
+  if (overlay) overlay.remove();
+}
+
+async function selectLocation(uniqueId, location) {
+  closeLocationModal();
+  showLoading("正在更新...");
+  try {
+    const res = await fetch(`/api/user-location/${uniqueId}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ location }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      showToast(data.error, true);
+      return;
+    }
+    showToast(`@${uniqueId} 国家已更新为 ${location}`);
+
+    // 只更新当前行 DOM
+    const tr = document.querySelector(`tr[data-user="${uniqueId}"]`);
+    if (tr) {
+      const locCell = tr.querySelector(".location-cell");
+      if (locCell) {
+        const editIcon = ' <span style="font-size:10px;opacity:0.5">✏️</span>';
+        locCell.className = "location-cell modified";
+        locCell.innerHTML = `${location}${editIcon}`;
+        locCell.title = `点击修改国家（已修改: ${formatTime(Date.now())})`;
+        locCell.onclick = () => openLocationModal(uniqueId, location);
+      }
+    }
+
+    // 在内存用户列表中也更新
+    const userInMem = currentTargetUsers.find((u) => u.uniqueId === uniqueId);
+    if (userInMem) {
+      userInMem.locationCreated = location;
+      userInMem.modifiedAt = Date.now();
+    }
+  } catch (e) {
+    showToast("更新失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
 async function submitAddUsers() {
   const ta = document.getElementById("modalUserInput");
   const raw = ta.value.trim();
@@ -837,6 +941,7 @@ function showTargetPage() {
   document.getElementById("userUpdatePage").classList.remove("active");
   document.getElementById("rawPage").classList.remove("active");
   document.getElementById("targetPage").classList.add("active");
+  showLoading("正在加载目标商家数据...");
   fetchTargetByCountry();
   // 同步统计
   if (currentStats) {
@@ -847,16 +952,21 @@ function showTargetPage() {
   }
 }
 
-let currentTargetData = null;
+let currentTargetSummary = null;
+let currentTargetUsers = [];
+let currentTargetTotal = 0;
+let currentTargetLoading = false;
+let currentTargetAllLoaded = false;
+let currentTargetSeq = 0;
+const TARGET_PAGE_SIZE = 200;
 
 async function fetchTargetByCountry() {
   try {
-    const res = await fetch("/api/target-users-by-country");
+    const res = await fetch("/api/target-users-by-country?summary=1");
     const data = await res.json();
-    currentTargetData = data;
+    currentTargetSummary = data;
     renderTargetCountryGrid(data.countries || []);
-    renderTargetLocationFilter(data.countries || []);
-    renderTargetTable(data.countries || []);
+    renderTargetPageLocationFilter(data.countries || []);
     document.getElementById("targetPageStatTotal").textContent = formatStatNum(
       data.total || 0,
       { full: true },
@@ -864,8 +974,11 @@ async function fetchTargetByCountry() {
     document.getElementById("targetPageStatCountries").textContent = (
       data.countries || []
     ).length;
+    await loadTargetUsersPage(false, true);
   } catch (e) {
     console.error("获取目标商家数据失败:", e);
+  } finally {
+    hideLoading();
   }
 }
 
@@ -876,16 +989,18 @@ function renderTargetCountryGrid(countries) {
       '<span style="color:#666;font-size:12px">暂无目标商家</span>';
     return;
   }
-  const total = countries.reduce((sum, c) => sum + c.count, 0);
+  const total = countries.reduce((sum, c) => sum + (c.count || 0), 0);
   grid.innerHTML = countries
     .map((c) => {
-      const pct = ((c.count / total) * 100).toFixed(1);
+      const cnt = c.count || 0;
+      const pct = total > 0 ? ((cnt / total) * 100).toFixed(1) : "0.0";
       const safeCountry = escapeJsString(c.country);
+      const sel = currentTargetLocation === c.country ? " selected" : "";
       return `
-      <div class="pending-country-item has-target"
+      <div class="pending-country-item has-target${sel}"
            onclick="filterTargetByCountry('${safeCountry}')">
         <div class="country-name">${c.country}</div>
-        <div class="country-count">${c.count}</div>
+        <div class="country-count">${cnt}</div>
         <div class="country-label">${pct}% 目标商家</div>
       </div>
     `;
@@ -893,7 +1008,7 @@ function renderTargetCountryGrid(countries) {
     .join("");
 }
 
-function renderTargetLocationFilter(countries) {
+function renderTargetPageLocationFilter(countries) {
   const sel = document.getElementById("targetLocationFilter");
   if (!sel) return;
   const val = sel.value;
@@ -902,51 +1017,104 @@ function renderTargetLocationFilter(countries) {
     countries
       .map(
         (c) =>
-          `<option value="${c.country}"${val === c.country ? " selected" : ""}>${c.country} (${c.count})</option>`,
+          `<option value="${c.country}"${val === c.country ? " selected" : ""}>${c.country} (${c.count || 0})</option>`,
       )
       .join("");
 }
 
-function renderTargetTable(countries) {
-  const el = document.getElementById("targetTable");
+async function loadTargetUsersPage(append = false, skipLoading = false) {
+  if (currentTargetLoading) return;
+  currentTargetLoading = true;
+
+  const seq = ++currentTargetSeq;
   const search = document.getElementById("targetSearchInput")
-    ? document.getElementById("targetSearchInput").value.trim().toLowerCase()
+    ? document.getElementById("targetSearchInput").value.trim()
     : "";
-  const location = currentTargetLocation;
+  const offset = append ? currentTargetUsers.length : 0;
 
-  let allUsers = [];
-  for (const c of countries) {
-    if (location && c.country !== location) continue;
-    allUsers = allUsers.concat(c.users);
+  // 非追加模式（重置加载）时显示 loading，除非外层已经显示了
+  if (!append && !skipLoading) {
+    showLoading("正在加载数据...");
   }
 
-  if (search) {
-    allUsers = allUsers.filter(
-      (u) =>
-        (u.uniqueId || "").toLowerCase().includes(search) ||
-        (u.nickname || "").toLowerCase().includes(search),
-    );
+  let data = null;
+  let error = null;
+  try {
+    let url = `/api/target-users-by-country?limit=${TARGET_PAGE_SIZE}&offset=${offset}`;
+    if (currentTargetLocation)
+      url += `&country=${encodeURIComponent(currentTargetLocation)}`;
+    if (search) url += `&search=${encodeURIComponent(search)}`;
+
+    const res = await fetch(url);
+    data = await res.json();
+  } catch (e) {
+    error = e;
+    console.error("加载目标用户失败:", e);
+  } finally {
+    // 非追加模式时隐藏 loading，除非外层负责隐藏
+    if (!append && !skipLoading) {
+      hideLoading();
+    }
+    currentTargetLoading = false;
+
+    if (error || !data) return;
+
+    // 防止旧请求覆盖新请求的结果
+    if (seq !== currentTargetSeq && !append) return;
+
+    if (!append) {
+      currentTargetUsers = data.users || [];
+      currentTargetTotal = data.total || 0;
+      currentTargetAllLoaded = currentTargetUsers.length >= currentTargetTotal;
+    } else {
+      currentTargetUsers = currentTargetUsers.concat(data.users || []);
+      currentTargetAllLoaded = currentTargetUsers.length >= currentTargetTotal;
+    }
+
+    // 所有状态更新完成后，再渲染
+    renderTargetTable();
   }
+}
+
+function updateLoadMoreButton() {
+  // 按钮已移除，保留函数名以兼容旧调用
+}
+
+function renderTargetTable() {
+  const el = document.getElementById("targetTable");
+  const moreHint = document.getElementById("targetMoreHint");
 
-  if (!allUsers.length) {
+  if (currentTargetUsers.length === 0) {
     el.innerHTML =
-      '<tr><td colspan="8" style="color:#666;text-align:center;padding:24px">暂无目标商家</td></tr>';
+      '<tr><td colspan="9" style="text-align:center;color:#888;padding:24px">暂无数据</td></tr>';
+    if (moreHint) {
+      moreHint.style.display = "none";
+    }
     return;
   }
 
-  el.innerHTML = allUsers
-    .map((u) => {
+  el.innerHTML = currentTargetUsers
+    .map((u, i) => {
       const nick = (u.nickname || "")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
       const fans = u.followerCount != null ? formatNum(u.followerCount) : "-";
       const videos = u.videoCount != null ? u.videoCount : "-";
-      const location = u.locationCreated || "-";
+      const userLocation = u.locationCreated || "-";
+      const confirmedLocation = u.confirmedLocation
+        ? u.confirmedLocation === u.locationCreated
+          ? `<span style="color:#22c55e">${u.confirmedLocation} ✓</span>`
+          : `<span style="color:#ef4444">${u.confirmedLocation} ✗</span>`
+        : "-";
       const latestVideo = u.latestVideoTime
         ? formatTime(u.latestVideoTime * 1000)
         : "-";
       const refreshTime = u.refreshTime ? formatTime(u.refreshTime) : "-";
-      const sources = (u.sources || []).join(", ");
+
+      const editIcon = ' <span style="font-size:10px;opacity:0.5">✏️</span>';
+      const locationCell = u.modifiedAt
+        ? `<td data-label="国家" class="location-cell modified" onclick="openLocationModal('${u.uniqueId}','${userLocation}')" title="点击修改国家（已修改: ${formatTime(u.modifiedAt)}）">${userLocation}${editIcon}</td>`
+        : `<td data-label="国家" class="location-cell" onclick="openLocationModal('${u.uniqueId}','${userLocation}')" title="点击修改国家">${userLocation}${editIcon}</td>`;
 
       let statusTag = "";
       if (u.status === "done")
@@ -961,35 +1129,48 @@ function renderTargetTable(countries) {
         statusTag = '<span class="tag error">受限</span>';
       else statusTag = u.status || "-";
 
-      return `<tr>
+      return `<tr data-user="${u.uniqueId}">
+      <td style="color:#9ca3af;font-size:12px;text-align:center" data-label="#">${i + 1}</td>
       <td class="user-id" data-label="用户名">@${u.uniqueId}</td>
       <td data-label="昵称">${nick}</td>
       <td data-label="粉丝">${fans}</td>
       <td data-label="视频">${videos}</td>
-      <td data-label="国家">${location}</td>
+      ${locationCell}
+      <td data-label="确认国家" style="font-size:11px">${confirmedLocation}</td>
       <td data-label="最近发布" style="font-size:11px;color:#888">${latestVideo}</td>
       <td data-label="最近刷新" style="font-size:11px;color:#888">${refreshTime}</td>
-      <td data-label="来源">${sources || "-"}</td>
-      <td data-label="状态">${statusTag}</td>
     </tr>`;
     })
     .join("");
+
+  if (moreHint) {
+    moreHint.style.display = "";
+    if (currentTargetAllLoaded) {
+      moreHint.innerHTML = `共 <b>${currentTargetTotal}</b> 条，已全部加载`;
+      moreHint.style.color = "#9ca3af";
+      moreHint.style.cursor = "default";
+    } else if (currentTargetLoading) {
+      moreHint.innerHTML = `已加载 <b>${currentTargetUsers.length}</b> / ${currentTargetTotal} 条，加载中...`;
+      moreHint.style.color = "#9ca3af";
+      moreHint.style.cursor = "wait";
+    } else {
+      moreHint.innerHTML = `已加载 <b>${currentTargetUsers.length}</b> / ${currentTargetTotal} 条，<u style="color:#3b82f6">点击此处加载更多</u> ↓`;
+      moreHint.style.color = "#6b7280";
+      moreHint.style.cursor = "pointer";
+    }
+  }
+  updateLoadMoreButton();
 }
 
 function filterTargetByCountry(country) {
   currentTargetLocation = country;
   const sel = document.getElementById("targetLocationFilter");
   if (sel) sel.value = country;
-  if (currentTargetData) {
-    renderTargetTable(currentTargetData.countries || []);
-  }
-}
-
-function onTargetLocationChange() {
-  const sel = document.getElementById("targetLocationFilter");
-  currentTargetLocation = sel.value;
-  if (currentTargetData) {
-    renderTargetTable(currentTargetData.countries || []);
+  const btn = document.getElementById("targetReprocessBtn");
+  if (btn) btn.style.display = "";
+  if (currentTargetSummary) {
+    renderTargetCountryGrid(currentTargetSummary.countries || []);
+    loadTargetUsersPage();
   }
 }
 
@@ -999,8 +1180,60 @@ function clearTargetFilters() {
   const locationFilter = document.getElementById("targetLocationFilter");
   if (searchInput) searchInput.value = "";
   if (locationFilter) locationFilter.value = "";
-  if (currentTargetData) {
-    renderTargetTable(currentTargetData.countries || []);
+  const btn = document.getElementById("targetReprocessBtn");
+  if (btn) btn.style.display = "none";
+  if (currentTargetSummary) {
+    renderTargetCountryGrid(currentTargetSummary.countries || []);
+    loadTargetUsersPage();
+  }
+}
+
+async function reprocessTargetUsers() {
+  if (!currentTargetLocation) return;
+  const country = currentTargetLocation;
+  const search = document.getElementById("targetSearchInput")
+    ? document.getElementById("targetSearchInput").value.trim()
+    : "";
+
+  // 加载该国家全量用户用于重置
+  showLoading("正在加载用户列表...");
+  try {
+    let url = `/api/target-users-by-country?limit=99999&offset=0&country=${encodeURIComponent(country)}`;
+    if (search) url += `&search=${encodeURIComponent(search)}`;
+    const res = await fetch(url);
+    const data = await res.json();
+    const users = data.users || [];
+
+    if (users.length === 0) {
+      showToast("当前筛选结果为空", true);
+      return;
+    }
+    if (
+      !confirm(
+        `确定要重新处理 ${country} 的 ${users.length} 个目标商家吗？\n这将重置它们的任务状态，使客户端重新采集。`,
+      )
+    ) {
+      hideLoading();
+      return;
+    }
+    showLoading("正在批量重置...");
+    const userIds = users.map((u) => u.uniqueId);
+    const resetRes = await fetch("/api/jobs/batch-reset", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userIds }),
+    });
+    const resetData = await resetRes.json();
+    if (resetData.error) {
+      showToast(resetData.error, true);
+      return;
+    }
+    showToast(`已重置 ${resetData.reset} / ${resetData.total} 个用户`);
+    fetchTargetByCountry();
+  } catch (e) {
+    showToast("批量重置失败: " + e.message, true);
+  } finally {
+    hideLoading();
   }
 }
 
@@ -1009,8 +1242,8 @@ let targetSearchTimer = null;
 document.getElementById("targetSearchInput").addEventListener("input", () => {
   if (targetSearchTimer) clearTimeout(targetSearchTimer);
   targetSearchTimer = setTimeout(() => {
-    if (currentTargetData) {
-      renderTargetTable(currentTargetData.countries || []);
+    if (currentTargetSummary) {
+      loadTargetUsersPage();
     }
   }, 300);
 });
@@ -1039,6 +1272,29 @@ document
     }
   });
 
+document
+  .getElementById("refreshTargetBtn")
+  .addEventListener("click", async () => {
+    showLoading("正在刷新...");
+    try {
+      currentTargetLocation = "";
+      const searchInput = document.getElementById("targetSearchInput");
+      const locationFilter = document.getElementById("targetLocationFilter");
+      if (searchInput) searchInput.value = "";
+      if (locationFilter) locationFilter.value = "";
+      const btn = document.getElementById("targetReprocessBtn");
+      if (btn) btn.style.display = "none";
+      await fetchTargetByCountry();
+      showToast("刷新完成");
+    } catch (e) {
+      showToast("刷新失败: " + e.message, true);
+    } finally {
+      hideLoading();
+    }
+  });
+
+// 加载更多按钮由 HTML 中 onclick="loadTargetUsersPage(true)" 直接触发
+
 async function fetchPendingByCountry() {
   try {
     const res = await fetch("/api/pending-by-country");
@@ -1356,6 +1612,11 @@ function renderRawJobsTable(users) {
       const fans = u.followerCount != null ? formatNum(u.followerCount) : "-";
       const videos = u.videoCount != null ? u.videoCount : "-";
       const loc = u.locationCreated || "-";
+      const confirmedLocRaw = u.confirmedLocation
+        ? u.confirmedLocation === u.locationCreated
+          ? `<span style="color:#22c55e">${u.confirmedLocation} ✓</span>`
+          : `<span style="color:#ef4444">${u.confirmedLocation} ✗</span>`
+        : "-";
       const guessedLoc = u.guessedLocation || "-";
       const sources = (u.sources || []).join(", ");
       const created = u.createdAt ? formatTime(u.createdAt) : "-";
@@ -1366,6 +1627,7 @@ function renderRawJobsTable(users) {
       <td data-label="粉丝">${fans}</td>
       <td data-label="视频">${videos}</td>
       <td data-label="国家">${loc}</td>
+      <td data-label="确认国家" style="font-size:11px">${confirmedLocRaw}</td>
       <td data-label="猜测国家">${guessedLoc}</td>
       <td data-label="来源">${sources || "-"}</td>
       <td data-label="状态">${statusTag}</td>
@@ -1576,6 +1838,7 @@ fetchStats();
 fetchUsers();
 fetchClientErrors();
 initTableSorting();
+
 setInterval(fetchStats, 10000);
 setInterval(fetchUsers, 10000);
 setInterval(fetchClientErrors, 10000);

package/src/watch/public/index.html

@@ -120,6 +120,7 @@
         <table>
           <thead>
             <tr>
+              <th style="width:40px;text-align:right;color:#666">#</th>
               <th>用户名</th>
               <th>昵称</th>
               <th>粉丝</th>
@@ -295,6 +296,9 @@
       <div class="stat-card clickable" id="exportTargetCsvBtn" style="background:rgba(34,197,94,0.12);cursor:pointer">
         <div class="label">导出 CSV</div>
       </div>
+      <div class="stat-card clickable" id="refreshTargetBtn" style="background:rgba(59,130,246,0.12);cursor:pointer">
+        <div class="label">🔄 刷新</div>
+      </div>
     </div>
     <div class="target-page-layout">
       <div class="target-side-card">
@@ -308,29 +312,29 @@
         <h3>目标商家列表</h3>
         <div class="controls">
           <input type="text" id="targetSearchInput" placeholder="搜索目标商家用户名 / 昵称...">
-          <select id="targetLocationFilter" onchange="onTargetLocationChange()"
-            style="padding:6px 10px;border:1px solid #7c3aed;border-radius:6px;background:#2a2a3a;color:#ccc;font-size:12px;cursor:pointer;outline:none;">
-            <option value="">全部国家</option>
-          </select>
           <button onclick="clearTargetFilters()">清空筛选</button>
+          <button id="targetReprocessBtn" onclick="reprocessTargetUsers()" style="display:none">重新处理</button>
         </div>
         <div class="table-scroll">
           <table>
             <thead>
               <tr>
+                <th style="width:48px">#</th>
                 <th>用户名</th>
                 <th>昵称</th>
                 <th>粉丝</th>
                 <th>视频</th>
                 <th>国家</th>
+                <th>确认国家</th>
                 <th>最近发布</th>
                 <th>最近刷新</th>
-                <th>来源</th>
-                <th>状态</th>
               </tr>
             </thead>
             <tbody id="targetTable"></tbody>
           </table>
+          <div id="targetMoreHint" onclick="loadTargetUsersPage(true)"
+            style="text-align:center;padding:10px 8px;font-size:13px;color:#6b7280;cursor:default;user-select:none;transition:color 0.2s">
+          </div>
         </div>
       </div>
     </div>