From 32f9c48c91a796c69dc326921d1618ac47e9bcfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=A1=E5=A4=8D=E4=B9=A0?= <2353956224@qq.com>
Date: Fri, 16 Jan 2026 19:00:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E7=89=88ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html               |   61 ++
 src/components/Sidebar.vue      |  169 +---
 src/views/hometest.html         |  347 --------
 src/views/hosts/hostsList.vue   |  945 +++++++--------------
 src/views/hosts/workbenches.vue | 1391 ++++++++++++++-----------------
 src/views/hosttest.html         |  440 ++++++++++
 src/views/nav.vue               |   87 +-
 7 files changed, 1485 insertions(+), 1955 deletions(-)
 delete mode 100644 src/views/hometest.html
 create mode 100644 src/views/hosttest.html

diff --git a/public/index.html b/public/index.html
index 0d4cbae..a29eec0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,67 @@
   <title>
     <%= webpackConfig.name %>
   </title>
+
+  <!-- Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap"
+    rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />
+
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
+  <script>
+    tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {
+          colors: {
+            primary: "#0066FF", // Cyber Blue
+            secondary: "#6366F1", // Electric Indigo
+            "background-light": "#F8FAFC",
+            "background-dark": "#0F172A",
+          },
+          fontFamily: {
+            display: ["Inter", "sans-serif"],
+          },
+          borderRadius: {
+            DEFAULT: "12px",
+            'xl': '20px',
+          },
+          boxShadow: {
+            'premium': '0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -2px rgba(0, 0, 0, 0.02)',
+            'glass': 'inset 0 0 0 1px rgba(255, 255, 255, 0.4)',
+          }
+        },
+      },
+    };
+  </script>
+
+  <!-- Global Styles -->
+  <style>
+    body {
+      font-family: 'Inter', sans-serif;
+    }
+
+    .glass-card {
+      background: rgba(255, 255, 255, 0.7);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .sidebar-active {
+      background: linear-gradient(90deg, #F0F7FF 0%, #FFFFFF 100%);
+      border-right: 3px solid #0066FF;
+      box-shadow: 4px 0 15px -5px rgba(0, 102, 255, 0.15);
+    }
+
+    .subtle-grid {
+      background-image: radial-gradient(#E2E8F0 0.5px, transparent 0.5px);
+      background-size: 24px 24px;
+    }
+
+    /* QT WebChannel */
+  </style>
   <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
 </head>
 
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 619d02b..09e570f 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,148 +1,63 @@
 <template>
-  <div class="sidebar">
-    <div class="logo">
-      <!-- <img style="margin-right: 10px;" src="@/assets/logo.png"> -->
-      <img src="@/assets/logotext.png">
+<aside class="w-64 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 flex flex-col z-20 h-full">
+    <div class="p-8 flex items-center gap-3">
+      <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
+        <span class="text-white font-bold text-xl">TK
+        </span>
+      </div>
+      <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">Yolo <span class="text-primary">助手</span>
+      </h1>
     </div>
-    <ul>
-      <li @click="updateActiveIndex(1)">
-        <div>
-          <img v-show="activeIndex == 1" src="@/assets/navAction.png" autoplay loop muted class="background-img">
-          <div style="display: flex;">
-            <img v-show="activeIndex == 1" src="@/assets/workAction.png" style="margin-right: 10px;">
-            <img v-show="activeIndex == 2" src="@/assets/workAction.png" style="margin-right: 10px;">
-            <div :style="activeIndex == 1 ? 'color: #000' : 'color: #fff'" class="center-justify">{{
-              $t('menu.workbenches')
-            }}</div>
-
-          </div>
-        </div>
-      </li>
-      <li @click="updateActiveIndex(2)">
-        <div>
-          <img v-show="activeIndex == 2" src="@/assets/navAction.png" autoplay loop muted class="background-img">
-
-          <div style="display: flex;">
-            <img v-show="activeIndex == 2" src="@/assets/listAction.png" style="margin-right: 10px;">
-            <img v-show="activeIndex == 1" src="@/assets/listAction.png" style="margin-right: 10px;">
-            <div :style="activeIndex == 2 ? 'color: #000' : 'color: #fff'" class="center-justify">{{
-              $t('menu.hostList')
-            }}</div>
-
-          </div>
-        </div>
-      </li>
-    </ul>
-
-    <a @click="$router.push('/')" href="javascript:void(0);"
-      style="position: absolute; bottom: 30px; color: aliceblue; font-size: 20px; font-weight: 500;">
-      {{
-        $t('menu.logout')
-      }}
-    </a>
-
-
-
-  </div>
+    
+    <nav class="flex-1 px-4 space-y-2">
+      <a 
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-medium cursor-pointer transition-colors"
+        :class="activeIndex == 1 ? 'sidebar-active text-primary' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800'"
+        @click="updateActiveIndex(1)"
+      >
+        <span class="material-icons-round">grid_view</span>
+        {{ $t('menu.workbenches') }}
+      </a>
+      
+      <a 
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-medium cursor-pointer transition-colors"
+        :class="activeIndex == 2 ? 'sidebar-active text-primary' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800'"
+        @click="updateActiveIndex(2)"
+      >
+        <span class="material-icons-round">person_search</span>
+        {{ $t('menu.hostList') }}
+      </a>
+    </nav>
+    
+    <div class="p-6 border-t border-slate-100 dark:border-slate-800">
+      <button 
+        class="flex items-center gap-3 text-slate-500 hover:text-red-500 transition-colors w-full px-4 py-2"
+        @click="$router.push('/')"
+      >
+        <span class="material-icons-round text-lg">logout</span>
+        <span class="font-medium">{{ $t('menu.logout') }}</span>
+      </button>
+    </div>
+  </aside>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref } from 'vue';
 import { getUser } from '@/utils/storage'
 import { defineEmits } from 'vue';
 
-
-
 const userInfo = ref(getUser())
 
 let activeIndex = ref(1);
 
 const emit = defineEmits(['activeIndex']);
 
-
 const updateActiveIndex = (index) => {
   activeIndex.value = index;
   emit('activeIndex', index);
 };
 </script>
 
-<style scoped lang="less">
-.sidebar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 900px;
-  width: 280px;
-  background-color: @bg-color;
-  padding: 20px;
-  box-sizing: border-box;
-
-  .logo {
-    border-bottom: 1px solid #fff;
-    padding-top: 20px;
-
-    img:nth-of-type(1) {
-      height: 66px;
-    }
-
-    img:nth-of-type(2) {
-      height: 29px;
-    }
-  }
-}
-
-.sidebar ul {
-  list-style: none;
-  padding: 0;
-
-}
-
-.sidebar li {
-  margin-top: 50px;
-  padding-top: 30px;
-  padding-left: 30px;
-  margin-bottom: 50px;
-  height: 64px;
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-}
-
-.sidebar a {
-  text-decoration: none;
-  color: #000000;
-  display: block;
-  padding: 8px;
-  border-radius: 4px;
-
-  font-family: Source Han Sans SC;
-  font-weight: 400;
-  font-size: 22px;
-
-}
-
-/* .sidebar a:hover {
-  background-color: #e0e0e0;
-} */
-
-
-.background-img {
-  position: absolute;
-  top: 0;
-  left: 13px;
-  width: 247px;
-  height: 126px;
-  object-fit: cover;
-  z-index: -1;
-  /* 确保视频在内容之下 */
-}
-
-.center-justify {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
+<style scoped>
+/* Scoped styles are minimal now as we use Tailwind */
 </style>
\ No newline at end of file
diff --git a/src/views/hometest.html b/src/views/hometest.html
deleted file mode 100644
index 3f31175..0000000
--- a/src/views/hometest.html
+++ /dev/null
@@ -1,347 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="utf-8" />
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <title>Yolo Assistant - Elite Workstation</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap"
-        rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />
-    <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
-    <script>
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                extend: {
-                    colors: {
-                        primary: "#0066FF", // Cyber Blue
-                        secondary: "#6366F1", // Electric Indigo
-                        "background-light": "#F8FAFC",
-                        "background-dark": "#0F172A",
-                    },
-                    fontFamily: {
-                        display: ["Inter", "sans-serif"],
-                    },
-                    borderRadius: {
-                        DEFAULT: "12px",
-                        'xl': '20px',
-                    },
-                    boxShadow: {
-                        'premium': '0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 10px -2px rgba(0, 0, 0, 0.02)',
-                        'glass': 'inset 0 0 0 1px rgba(255, 255, 255, 0.4)',
-                    }
-                },
-            },
-        };
-    </script>
-    <style>
-        body {
-            font-family: 'Inter', sans-serif;
-        }
-
-        .glass-card {
-            background: rgba(255, 255, 255, 0.7);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-        }
-
-        .sidebar-active {
-            background: linear-gradient(90deg, #F0F7FF 0%, #FFFFFF 100%);
-            border-right: 3px solid #0066FF;
-            box-shadow: 4px 0 15px -5px rgba(0, 102, 255, 0.15);
-        }
-
-        .subtle-grid {
-            background-image: radial-gradient(#E2E8F0 0.5px, transparent 0.5px);
-            background-size: 24px 24px;
-        }
-    </style>
-</head>
-
-<body class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 subtle-grid min-h-screen">
-    <div class="flex h-screen overflow-hidden">
-        <aside
-            class="w-64 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 flex flex-col z-20">
-            <div class="p-8 flex items-center gap-3">
-                <div
-                    class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
-                    <span class="text-white font-bold text-xl">y</span>
-                </div>
-                <h1 class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">Yolo <span
-                        class="text-primary">助手</span></h1>
-            </div>
-            <nav class="flex-1 px-4 space-y-2">
-                <a class="sidebar-active flex items-center gap-3 px-4 py-3 rounded-lg text-primary font-medium"
-                    href="#">
-                    <span class="material-icons-round">grid_view</span>
-                    工作台
-                </a>
-                <a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
-                    href="#">
-                    <span class="material-icons-round">person_search</span>
-                    主播列表
-                </a>
-            </nav>
-            <div class="p-6 border-t border-slate-100 dark:border-slate-800">
-                <button
-                    class="flex items-center gap-3 text-slate-500 hover:text-red-500 transition-colors w-full px-4 py-2">
-                    <span class="material-icons-round text-lg">logout</span>
-                    <span class="font-medium">退出登录</span>
-                </button>
-            </div>
-        </aside>
-        <main class="flex-1 overflow-y-auto p-8 relative">
-            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
-                <div
-                    class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-sm font-medium text-slate-500">总数量</span>
-                        <span class="material-icons-round text-primary/40">analytics</span>
-                    </div>
-                    <div class="text-3xl font-bold text-slate-900 dark:text-white">0</div>
-                </div>
-                <div
-                    class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-sm font-medium text-slate-500">新建主播</span>
-                        <span class="material-icons-round text-secondary/40">person_add</span>
-                    </div>
-                    <div class="text-3xl font-bold text-slate-900 dark:text-white">0</div>
-                </div>
-                <div
-                    class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-sm font-medium text-slate-500">查询 / 邀请</span>
-                        <span class="material-icons-round text-slate-400">compare_arrows</span>
-                    </div>
-                    <div class="text-3xl font-bold text-slate-900 dark:text-white">0 <span
-                            class="text-slate-300 text-lg mx-2">/</span> 0</div>
-                </div>
-                <div
-                    class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800 flex flex-col justify-center">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <span
-                                class="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-1">运行时间</span>
-                            <div class="text-2xl font-mono font-bold text-primary">00:00:00</div>
-                        </div>
-                        <button
-                            class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow-lg shadow-primary/25">
-                            开启TK
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-                <div class="glass-card p-6 rounded-xl shadow-premium">
-                    <div class="flex justify-between items-center mb-6">
-                        <div class="flex items-center gap-2">
-                            <span class="w-2 h-2 rounded-full bg-red-500"></span>
-                            <h3 class="font-bold text-slate-800 dark:text-white">公会账号 A</h3>
-                        </div>
-                        <span class="text-xs text-slate-500">今日查询: 0</span>
-                    </div>
-                    <div class="space-y-4">
-                        <div class="grid grid-cols-2 gap-4">
-                            <div>
-                                <label class="text-xs font-semibold text-slate-500 mb-1 block">账号</label>
-                                <input
-                                    class="w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all"
-                                    type="text" value="11111" />
-                            </div>
-                            <div>
-                                <label class="text-xs font-semibold text-slate-500 mb-1 block">密码</label>
-                                <div class="relative">
-                                    <input
-                                        class="w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all"
-                                        type="password" value="******" />
-                                    <span
-                                        class="material-icons-round absolute right-3 top-2 text-slate-400 text-sm cursor-pointer">visibility_off</span>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="w-full bg-slate-900 dark:bg-slate-700 hover:bg-black text-white py-2.5 rounded-lg font-medium transition-all">登录后台</button>
-                    </div>
-                </div>
-                <div class="glass-card p-6 rounded-xl shadow-premium">
-                    <div class="flex justify-between items-center mb-6">
-                        <div class="flex items-center gap-2">
-                            <span class="w-2 h-2 rounded-full bg-red-500"></span>
-                            <h3 class="font-bold text-slate-800 dark:text-white">公会账号 B</h3>
-                        </div>
-                        <span class="text-xs text-slate-500">今日查询: 0</span>
-                    </div>
-                    <div class="space-y-4">
-                        <div class="grid grid-cols-2 gap-4">
-                            <div>
-                                <label class="text-xs font-semibold text-slate-500 mb-1 block">账号</label>
-                                <input
-                                    class="w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all"
-                                    type="text" value="22222" />
-                            </div>
-                            <div>
-                                <label class="text-xs font-semibold text-slate-500 mb-1 block">密码</label>
-                                <input
-                                    class="w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all"
-                                    placeholder="请输入登录密码" type="password" />
-                            </div>
-                        </div>
-                        <button
-                            class="w-full bg-slate-900 dark:bg-slate-700 hover:bg-black text-white py-2.5 rounded-lg font-medium transition-all">登录后台</button>
-                    </div>
-                </div>
-            </div>
-            <div
-                class="bg-white dark:bg-slate-900 rounded-2xl shadow-premium border border-slate-100 dark:border-slate-800 overflow-hidden">
-                <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
-                    <div class="flex items-center gap-3">
-                        <div class="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center">
-                            <span
-                                class="material-icons-round text-slate-600 dark:text-slate-400 text-lg">settings</span>
-                        </div>
-                        <h2 class="font-bold text-slate-800 dark:text-white">任务工作台配置</h2>
-                    </div>
-                    <div class="flex items-center gap-4 text-sm">
-                        <div class="text-slate-500">当前网络: <span class="text-primary font-bold">日本</span></div>
-                        <div class="flex items-center gap-2">
-                            <span class="text-slate-500">指定国家:</span>
-                            <select
-                                class="bg-slate-50 dark:bg-slate-800 border-none rounded-lg text-xs font-medium focus:ring-0">
-                                <option>全部</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <div class="p-8">
-                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 mb-10">
-                        <div>
-                            <h4 class="text-sm font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
-                                <span class="w-1 h-4 bg-primary rounded-full"></span>
-                                设置金币数量
-                            </h4>
-                            <div class="space-y-3">
-                                <div
-                                    class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
-                                    <span
-                                        class="bg-slate-50 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-28 flex items-center border-r border-slate-200 dark:border-slate-700">最小金币</span>
-                                    <input
-                                        class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0"
-                                        type="number" value="0" />
-                                </div>
-                                <div
-                                    class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
-                                    <span
-                                        class="bg-slate-50 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-28 flex items-center border-r border-slate-200 dark:border-slate-700">最大金币</span>
-                                    <input
-                                        class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0"
-                                        type="number" value="0" />
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <h4 class="text-sm font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
-                                <span class="w-1 h-4 bg-secondary rounded-full"></span>
-                                设置粉丝数量
-                            </h4>
-                            <div class="space-y-3">
-                                <div
-                                    class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
-                                    <span
-                                        class="bg-slate-50 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-28 flex items-center border-r border-slate-200 dark:border-slate-700">最小粉丝</span>
-                                    <input
-                                        class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0"
-                                        type="number" value="0" />
-                                </div>
-                                <div
-                                    class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
-                                    <span
-                                        class="bg-slate-50 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-28 flex items-center border-r border-slate-200 dark:border-slate-700">最大粉丝</span>
-                                    <input
-                                        class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0"
-                                        type="number" value="0" />
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <h4 class="text-sm font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
-                                <span class="w-1 h-4 bg-emerald-500 rounded-full"></span>
-                                后台查询频率
-                            </h4>
-                            <div class="space-y-3">
-                                <div
-                                    class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
-                                    <input
-                                        class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0"
-                                        type="number" value="0" />
-                                    <span
-                                        class="bg-slate-100 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-24 flex items-center justify-center border-l border-slate-200 dark:border-slate-700">次/小时</span>
-                                </div>
-                                <div
-                                    class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
-                                    <input
-                                        class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0"
-                                        type="number" value="0" />
-                                    <span
-                                        class="bg-slate-100 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-24 flex items-center justify-center border-l border-slate-200 dark:border-slate-700">次/24小时</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        class="flex flex-col lg:flex-row items-center justify-between gap-8 pt-8 border-t border-slate-100 dark:border-slate-800">
-                        <div class="flex items-center gap-6">
-                            <label class="flex items-center gap-2 cursor-pointer group">
-                                <input class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary/20"
-                                    type="checkbox" />
-                                <span
-                                    class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤游戏主播</span>
-                            </label>
-                            <label class="flex items-center gap-2 cursor-pointer group">
-                                <input class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary/20"
-                                    type="checkbox" />
-                                <span
-                                    class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤带货主播</span>
-                            </label>
-                            <label class="flex items-center gap-2 cursor-pointer group">
-                                <input class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary/20"
-                                    type="checkbox" />
-                                <span
-                                    class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">排行榜模式</span>
-                            </label>
-                        </div>
-                        <div class="flex items-center gap-3">
-                            <span class="text-xs font-bold text-slate-500 uppercase tracking-widest">期望邀请上限:</span>
-                            <div class="flex p-1 bg-slate-100 dark:bg-slate-800 rounded-lg">
-                                <button
-                                    class="px-4 py-1.5 text-xs font-semibold rounded-md bg-white dark:bg-slate-700 text-primary shadow-sm">设置爬取数量</button>
-                                <button
-                                    class="px-4 py-1.5 text-xs font-semibold rounded-md text-slate-500 hover:text-slate-700">不限爬取数量</button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-12 text-center">
-                        <button
-                            class="bg-slate-900 dark:bg-primary hover:scale-[1.02] active:scale-[0.98] text-white px-12 py-4 rounded-xl font-bold text-lg shadow-xl shadow-slate-900/10 dark:shadow-primary/20 transition-all flex items-center gap-3 mx-auto">
-                            <span class="material-icons-round">bolt</span>
-                            开始获取数据
-                        </button>
-                        <p class="mt-4 text-xs font-medium text-emerald-600 dark:text-emerald-400">
-                            到期时间: 2036-08-01 00:00:00
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none">
-            </div>
-            <div
-                class="absolute -bottom-24 -left-24 w-64 h-64 bg-secondary/5 rounded-full blur-3xl pointer-events-none">
-            </div>
-        </main>
-    </div>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/views/hosts/hostsList.vue b/src/views/hosts/hostsList.vue
index 31485d4..242f836 100644
--- a/src/views/hosts/hostsList.vue
+++ b/src/views/hosts/hostsList.vue
@@ -1,142 +1,242 @@
 <template>
-  <div class="hostList">
-    <div>
-      <div style="display: flex;">
-        <el-select v-model="searchForm.country" filterable :placeholder="$t('hostList.placeCountry')" size="large"
-          style="width: 160px">
-          <el-option :label="$t('hostList.selectAll')" :value="''" />
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
-        <div></div>
-        <el-date-picker v-model="searchForm.createTime" type="date" value-format="YYYY-MM-DD"
-          :placeholder="$t('hostList.placeSeletTime')" size="large" style="margin-left: 50px;width: 160px;" />
-
-        <el-input v-model="searchForm.hostsId" :placeholder="$t('hostList.placeHostId')" size="large"
-          style="width: 160px; margin-left: 50px;" clearable />
-
-        <el-button class="serch-button" style="margin-left: 50px;" type="primary" @click="serch">{{
-          $t('hostList.query') }}</el-button>
-        <!-- <el-button class="put-button" :disabled="tableData.length == 0" type="primary" @click="exportList">{{
-          $t('hostList.export') }}</el-button> -->
-        <!-- <el-button class="put-button" type="primary" @click="dialogFormVisible = true">分配给指定员工</el-button> -->
-        <el-button @click="filterdialogVisible = true" style="width: 50px;" class="put-button" type="primary"><img
-            style="height: 30px;" src="@/assets/filter.png"></el-button>
+  <div class="bg-white dark:bg-slate-50 rounded-3xl shadow-2xl flex flex-col overflow-hidden h-full">
+    <!-- Header -->
+    <header class="px-8 py-6 border-b border-slate-100 dark:border-slate-200/60 bg-white/50 backdrop-blur-md">
+      <div class="flex flex-wrap items-center gap-4">
+        <div class="relative flex-1 min-w-[200px]">
+          <select 
+            v-model="searchForm.country" 
+            class="w-full bg-slate-50 border-none rounded-xl py-3 pl-4 pr-10 text-sm text-slate-600 appearance-none focus:ring-2 focus:ring-primary/20 shadow-soft-inner outline-none"
+          >
+            <option value="">{{ $t('hostList.selectAll') }}</option>
+            <option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</option>
+          </select>
+          <span class="material-icons-round absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
+        </div>
+        
+        <div class="relative flex-1 min-w-[200px]">
+          <span class="material-icons-round absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">calendar_today</span>
+          <input 
+            v-model="searchForm.createTime"
+            type="date"
+            class="w-full bg-slate-50 border-none rounded-xl py-3 pl-10 pr-4 text-sm text-slate-600 focus:ring-2 focus:ring-primary/20 shadow-soft-inner outline-none" 
+          />
+        </div>
+        
+        <div class="relative flex-[1.5] min-w-[240px]">
+          <input 
+            v-model="searchForm.hostsId"
+            class="w-full bg-slate-50 border-none rounded-xl py-3 px-4 text-sm text-slate-600 focus:ring-2 focus:ring-primary/20 shadow-soft-inner outline-none" 
+            :placeholder="$t('hostList.placeHostId')" 
+          />
+        </div>
+        
+        <div class="flex items-center gap-2 ml-auto">
+          <button 
+            @click="serch"
+            class="bg-primary hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-medium text-sm transition-all shadow-lg shadow-primary/20 flex items-center gap-2"
+          >
+            <span class="material-icons-round text-sm">search</span>
+            {{ $t('hostList.query') }}
+          </button>
+          <button 
+            @click="filterdialogVisible = true"
+            class="bg-slate-100 hover:bg-slate-200 text-slate-600 p-3 rounded-xl transition-all"
+          >
+            <span class="material-icons-round">tune</span>
+          </button>
+        </div>
       </div>
+    </header>
 
-      <div class="hostTable center-justify">
-        <el-table ref="multipleTableRef" :data="tableData" stripe v-loading="loading" height="500"
-          @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="35" />
-
-          <el-table-column fixed prop="hostId" :label="$t('hostList.hostId')" width="160">
-            <template #default="scope">
-              <div class="hostIdText" @click="openHTML(scope.row.hostId)"> {{
-                scope.row.hostId }}</div>
-            </template>
-          </el-table-column>
-
-
-          <el-table-column prop="hostlevel" :label="$t('hostList.grade')" width="80">
-            <template #default="scope">
-              {{ scope.row.hostlevel }}
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="invitationType" :label="$t('hostList.invitationType')" width="80">
-            <template #default="scope">
-
-              <el-tag :type="scope.row.invitationType == 1 ? 'success' : 'warning'">
-                {{ scope.row.invitationType == 1 ? $t('hostList.invitationType1') : $t('hostList.invitationType2') }}
-              </el-tag>
-            </template>
-          </el-table-column>
-
-          <el-table-column :label="$t('hostList.liveSessions')" width="120">
-            <template #default="scope">
-              <el-button class="live-btn" size="small" @click="getliveHost(scope.row.hostId)">
-                {{ $t('hostList.viewSessions') }}
-              </el-button>
-            </template>
-          </el-table-column>
-
-          <el-table-column :label="$t('hostList.liveRevenue')" width="120">
-            <template #default="scope">
-              <el-button class="live-btn" size="small" @click="getRevenueStats(scope.row.hostId)">
-                {{ $t('hostList.viewRevenue') }}
-              </el-button>
-            </template>
-          </el-table-column>
-
-          <el-table-column v-for="label in labelList" :key="label.paramCode" :prop="label.paramCode"
-            :label="label.paramCodeMeaning" width="120">
-            <template v-if="label.paramCode != 'createDt'" #default="scope">
-
-            </template>
-          </el-table-column>
-
-
-          <!-- <el-table-column label="操作">
-            <template #default="scope">
-              <div style="display: flex; align-items: center">
-                <el-button type="primary" @click="getTkhostdetail(scope.row.hostId)">查看</el-button>
-              </div>
-            </template>
-          </el-table-column> -->
-        </el-table>
-
-      </div>
-      <!-- 分页 -->
-      <div class="center-justify" style="margin-top: 30px;">
-        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" background
-          layout="sizes, prev, pager, next" :total="total" :page-sizes="[10, 20, 50, 100]"
-          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    <!-- Table -->
+    <div class="flex-1 overflow-auto p-8 relative">
+      <div v-if="loading" class="absolute inset-0 bg-white/50 z-10 flex items-center justify-center">
+         <span class="material-icons-round animate-spin text-primary text-4xl">sync</span>
       </div>
+      <table class="w-full text-left border-separate border-spacing-0">
+        <thead>
+          <tr class="text-slate-400 text-xs font-semibold uppercase tracking-wider sticky top-0 bg-white z-0">
+             <!-- Selection Header -->
+             <th class="pb-4 pl-4 font-normal bg-white">
+               <!-- Select All Logic not full implemented yet, just visual for design match -->
+               <input type="checkbox" class="rounded border-slate-300 text-primary focus:ring-primary/20" />
+             </th>
+             <th class="pb-4 font-semibold bg-white">{{ $t('hostList.hostId') }}</th>
+             <th class="pb-4 font-semibold bg-white">{{ $t('hostList.grade') }}</th>
+             <th class="pb-4 font-semibold bg-white">{{ $t('hostList.invitationType') }}</th>
+             <th class="pb-4 font-semibold bg-white">{{ $t('hostList.liveSessions') }} / {{ $t('hostList.liveRevenue') }}</th>
+             <th class="pb-4 font-semibold bg-white">{{ $t('hostList.country') }}</th>
+             <th class="pb-4 font-semibold bg-white">{{ $t('hostList.creationTime') }}</th>
+             <th class="pb-4 font-semibold bg-white">{{ $t('hostList.anchorcoins') }}</th>
+             <th class="pb-4 font-semibold text-right pr-4 bg-white">操作</th>
+          </tr>
+        </thead>
+        <tbody class="text-sm text-slate-600">
+           <tr v-if="tableData.length === 0" class="text-center">
+             <td colspan="9" class="py-10 text-slate-400">暂无数据</td>
+           </tr>
+           <tr v-for="row in tableData" :key="row.hostId" class="group hover:bg-slate-50/80 transition-colors">
+             <!-- Checkbox -->
+             <td class="py-5 pl-4 border-b border-slate-50 group-last:border-none">
+                <input 
+                  type="checkbox" 
+                  class="rounded border-slate-300 text-primary focus:ring-primary/20"
+                  :value="row.hostId"
+                  v-model="selectHostList"
+                />
+             </td>
+             
+             <!-- Host ID -->
+             <td class="py-5 border-b border-slate-50 group-last:border-none">
+               <span 
+                 @click="openHTML(row.hostId)"
+                 class="font-medium text-slate-900 border-b border-transparent group-hover:border-primary/30 transition-all cursor-pointer hover:text-primary"
+               >
+                 {{ row.hostId }}
+               </span>
+             </td>
+             
+             <!-- Level -->
+             <td class="py-5 border-b border-slate-50 group-last:border-none">
+               {{ row.hostlevel }}
+             </td>
+             
+             <!-- Invitation Type -->
+             <td class="py-5 border-b border-slate-50 group-last:border-none">
+               <span 
+                 class="px-3 py-1 text-[10px] font-bold uppercase rounded-full"
+                 :class="row.invitationType == 1 ? 'bg-green-50 text-green-600' : 'bg-amber-50 text-amber-600'"
+               >
+                 {{ row.invitationType == 1 ? $t('hostList.invitationType1') : $t('hostList.invitationType2') }}
+               </span>
+             </td>
+             
+             <!-- Data Buttons -->
+             <td class="py-5 border-b border-slate-50 group-last:border-none">
+                <div class="flex gap-2">
+                  <button 
+                    @click="getliveHost(row.hostId)"
+                    class="px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white rounded-lg text-xs font-medium transition-all"
+                  >
+                    {{ $t('hostList.viewSessions') }}
+                  </button>
+                  <button 
+                    @click="getRevenueStats(row.hostId)"
+                    class="px-3 py-1.5 bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white rounded-lg text-xs font-medium transition-all"
+                  >
+                    {{ $t('hostList.viewRevenue') }}
+                  </button>
+                </div>
+             </td>
+             
+             <!-- Country -->
+             <td class="py-5 border-b border-slate-50 group-last:border-none">
+               {{ row.country }}
+             </td>
+             
+             <!-- Time -->
+             <td class="py-5 border-b border-slate-50 group-last:border-none">
+               <div class="flex flex-col">
+                 <span>{{ formatTimeOnlyDate(row.createTime) }}</span>
+                 <span class="text-[10px] text-slate-400">{{ formatTimeOnlyTime(row.createTime) }}</span>
+               </div>
+             </td>
+             
+             <!-- Coins -->
+             <td class="py-5 border-b border-slate-50 group-last:border-none font-semibold text-slate-900">
+               {{ row.hostsCoins }}
+             </td>
+             
+             <!-- Actions -->
+             <td class="py-5 border-b border-slate-50 group-last:border-none text-right pr-4">
+                <button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
+                  <span class="material-icons-round text-lg">more_horiz</span>
+                </button>
+             </td>
+           </tr>
+        </tbody>
+      </table>
     </div>
+    
+    <!-- Footer / Pagination -->
+    <footer class="px-8 py-6 border-t border-slate-100 dark:border-slate-200/60 bg-white/50 backdrop-blur-md flex flex-wrap items-center justify-between gap-4">
+      <div class="flex items-center gap-4">
+        <div class="relative">
+          <select 
+            v-model="pageSize"
+            @change="handleSizeChange"
+            class="bg-slate-50 border-none rounded-lg py-2 pl-4 pr-10 text-sm text-slate-600 appearance-none focus:ring-2 focus:ring-primary/20 shadow-soft-inner outline-none"
+          >
+            <option :value="10">10/page</option>
+            <option :value="20">20/page</option>
+            <option :value="50">50/page</option>
+            <option :value="100">100/page</option>
+          </select>
+          <span class="material-icons-round absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 text-sm pointer-events-none">expand_more</span>
+        </div>
+        <span class="text-xs text-slate-400 font-medium">总条数: <span class="text-primary">{{ total }}</span></span>
+      </div>
+      
+      <div class="flex items-center gap-1">
+        <button 
+          @click="changePage(page - 1)"
+          :disabled="page <= 1"
+          class="p-2 text-slate-400 hover:bg-slate-100 rounded-lg transition-colors disabled:opacity-50"
+        >
+          <span class="material-icons-round text-lg">chevron_left</span>
+        </button>
+        
+        <!-- Simplified Pagination Logic -->
+        <button class="w-8 h-8 rounded-lg bg-slate-900 text-white text-xs font-bold transition-all shadow-md">{{ page }}</button>
+        
+        <button 
+          @click="changePage(page + 1)"
+          :disabled="page * pageSize >= total"
+          class="p-2 text-slate-400 hover:bg-slate-100 rounded-lg transition-colors disabled:opacity-50"
+        >
+          <span class="material-icons-round text-lg">chevron_right</span>
+        </button>
+      </div>
+    </footer>
 
-
+    <!-- Filter Dialog (Preserved Element Plus) -->
     <el-dialog v-model="filterdialogVisible" width="800px" :before-close="handleClose">
       <el-row v-for="(field, index) in fields" :key="index" :gutter="20" style="margin-bottom: 10px">
         <el-col :span="4">
-          <div style="height: 100%; padding-top: 10px" class="center-justify">
+          <div style="height: 100%; padding-top: 10px" class="flex items-center justify-center">
             {{ field.label }}
           </div>
         </el-col>
         <el-col :span="10">
-          <div><label>{{ $t('hostList.min') }}</label></div>
+          <div><label class="text-sm text-slate-500 mb-1 block">{{ $t('hostList.min') }}</label></div>
           <el-input type="number" :oninput="'if(value.length>9)value=value.slice(0,9)'"
             v-model.number="searchForm[field.minModel]" :placeholder="$t('hostList.placeMin')" />
         </el-col>
         <el-col :span="10">
-          <div><label>{{ $t('hostList.max') }}</label></div>
+          <div><label class="text-sm text-slate-500 mb-1 block">{{ $t('hostList.max') }}</label></div>
           <el-input type="number" :oninput="'if(value.length>9)value=value.slice(0,9)'"
             v-model.number="searchForm[field.maxModel]" :placeholder="$t('hostList.placeMax')" />
         </el-col>
       </el-row>
 
-
-      <el-row :gutter="20">
+      <el-row :gutter="20" class="mt-4">
         <el-col :span="4">
-          <!-- <label>选择筛选条件</label> -->
-          <div style="height: 100%;padding-top: 10px;" class="center-justify">
+          <div style="height: 100%;padding-top: 10px;" class="flex items-center justify-center">
             {{ $t('hostList.sort') }}
           </div>
-
         </el-col>
         <el-col :span="10">
-          <div><label>{{ $t('hostList.sortType') }}</label></div>
-
-
+          <div><label class="text-sm text-slate-500 mb-1 block">{{ $t('hostList.sortType') }}</label></div>
           <el-select v-model="sortData.sortType" filterable :placeholder="$t('hostList.selectPlaceholder')"
-            style="width: 240px">
+            class="w-full">
             <el-option v-for="item in sortNameOptions" :key="item.type" :label="item.label" :value="item.type" />
           </el-select>
         </el-col>
         <el-col :span="10">
-          <div><label>{{ $t('hostList.ascending') }}/{{ $t('hostList.descending') }}</label></div>
-
+          <div><label class="text-sm text-slate-500 mb-1 block">{{ $t('hostList.ascending') }}/{{ $t('hostList.descending') }}</label></div>
           <el-select v-model="sortData.sortForm" filterable :placeholder="$t('hostList.selectPlaceholder')"
-            style="width: 240px">
+            class="w-full">
             <el-option
               v-for="item in [{ label: $t('hostList.ascending'), value: 'asc' }, { label: $t('hostList.descending'), value: 'desc' }]"
               :key="item.value" :label="item.label" :value="item.value" />
@@ -146,19 +246,18 @@
 
       <template #footer>
         <span class="dialog-footer">
-          <el-button type="primary" @click="reset">
+          <el-button @click="reset">
             {{ $t('hostList.reset') }}
           </el-button>
-          <!-- <el-button @click="filterdialogVisible = false">取消</el-button> -->
-          <el-button type="primary" @click="handelClick">
+          <el-button type="primary" @click="handelClick" class="bg-primary">
             {{ $t('hostList.sure') }}
           </el-button>
         </span>
       </template>
     </el-dialog>
 
-    <LiveRecordDialog v-model:modelValue="liveDetailDialogVisible" :rows="liveDetailRecords"
-      @select="handleLiveSelect" />
+    <!-- Dialogs -->
+    <LiveRecordDialog v-model:modelValue="liveDetailDialogVisible" :rows="liveDetailRecords" @select="handleLiveSelect" />
 
     <el-dialog v-model="revenueDialogVisible" :title="$t('hostList.liveRevenue')" width="80vw" top="6vh"
       :close-on-click-modal="false" destroy-on-close>
@@ -196,73 +295,53 @@
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <!-- <el-table-column prop="updatedAt" label="updatedAt" /> -->
         <el-table-column prop="createdAt" :label="$t('hostList.revenueTime')">
           <template #default="scope">
             {{ formatTimestamp(scope.row.createdAt) }}
           </template>
         </el-table-column>
       </el-table>
-
       <template #footer>
         <el-button @click="revenueDialogVisible = false">{{ $t('hostList.close') }}</el-button>
       </template>
     </el-dialog>
 
-
-
   </div>
 </template>
 
 <script setup>
-// import { getToken, setToken, removeToken } from '@/utils/storage'
-import { tkhostdata, dicts, tkhostdetail, downList, getStaffList, managerhosts, upholdinfo, getCountryinfo, accountName, liveHostDetail, revenueStats } from '@/api/account';
-import { usePythonBridge, } from '@/utils/pythonBridge'
-import { getUser, setSerch, getSerch } from '@/utils/storage'
+import { tkhostdata, getCountryinfo, liveHostDetail, revenueStats } from '@/api/account';
+import { usePythonBridge } from '@/utils/pythonBridge'
+import { getUser } from '@/utils/storage'
 import { ref, reactive, onMounted } from 'vue';
-// import EChartsComponent from '@/components/EChartsComponent.vue';
-// import { ElMessage, ElMessageBox } from 'element-plus'
-// import { color } from 'echarts';
 import { useI18n } from 'vue-i18n'
 import LiveRecordDialog from '@/components/LiveRecordDialog.vue'
 
-
 const { t } = useI18n()
 const loading = ref(false)
-//py方法
 const { givePyAnchorId, exportToExcel } = usePythonBridge();
 
-let num = ref(0)
-//账号信息 
 const userInfo = ref(getUser())
-//主播列表DOM
-const multipleTableRef = ref(null)
 
-let labelList = ref([
-  { paramCode: 'country', paramCodeMeaning: t('hostList.country') },
-  { paramCode: 'createTime', paramCodeMeaning: t('hostList.creationTime') },
-  { paramCode: 'hostsCoins', paramCodeMeaning: t('hostList.anchorcoins') },
-  { paramCode: 'yesterdayCoins', paramCodeMeaning: t('hostList.yesterdayGoldCoins') },
-  { paramCode: 'fans', paramCodeMeaning: t('hostList.fansNum') },
-  { paramCode: 'fllowernum', paramCodeMeaning: t('hostList.followersNum') },
-  { paramCode: 'onlineFans', paramCodeMeaning: t('hostList.onlineFans') },
-  { paramCode: 'hostsKind', paramCodeMeaning: t('hostList.anchorType') },
-  // { paramCode: 'invitationType', paramCodeMeaning: t('hostList.invitationType') },
-
-]);
 const tableData = ref([])
-//主播列表传参
-const searchForm = ref({})
+const searchForm = ref({
+  country: '',
+  createTime: '',
+  hostsId: '',
+  fansMin: null, fansMax: null,
+  onlineFansMin: null, onlineFansMax: null,
+  hostsCoinsMin: null, hostsCoinsMax: null,
+  fllowernumMin: null, fllowernumMax: null
+})
+
 const fields = [
   { label: t('hostList.fansNum'), minModel: 'fansMin', maxModel: 'fansMax' },
   { label: t('hostList.onlineFans'), minModel: 'onlineFansMin', maxModel: 'onlineFansMax' },
   { label: t('hostList.anchorcoins'), minModel: 'hostsCoinsMin', maxModel: 'hostsCoinsMax' },
   { label: t('hostList.followersNum'), minModel: 'fllowernumMin', maxModel: 'fllowernumMax' },
 ]
-//排序
-let sortData = ref({ sortForm: 'desc', sortType: "createTime" })
 
-//排序类型
+let sortData = ref({ sortForm: 'desc', sortType: "createTime" })
 let sortNameOptions = ref([
   { label: t('hostList.creationTime'), type: 'createTime' },
   { label: t('hostList.anchorcoins'), type: 'hostsCoins' },
@@ -270,129 +349,60 @@ let sortNameOptions = ref([
   { label: t('hostList.yesterdayGoldCoins'), type: 'yesterdayCoins' },
   { label: t('hostList.onlineFans'), type: 'onlineFans' },
   { label: t('hostList.followersNum'), type: 'fllowernum' },
-
 ])
-//员工选择列表
-let staffOptions = ref([])
-//筛选条件选择列表
 
-//选择的员工
-let staffValue = ref('')
-//选择的主播列表
 let selectHostList = ref([])
-//分配弹窗是否弹出
-let dialogFormVisible = ref(false)
-//分配情况弹窗是否弹出
-let hostNameVisible = ref(false)
-
-//备注弹窗是否弹出
-let commentVisible = ref(false)
-//筛选弹窗是否弹出
 let filterdialogVisible = ref(false)
-//分配的员工
-let staffId = ref({})
-//备注信息
-let commentInfo = ref('')
-//备注信息主播
-let commentHost = ref('')
 let liveDetailDialogVisible = ref(false)
 let liveDetailRecords = ref([])
-let liveDetailLoading = ref(false)
 let revenueDialogVisible = ref(false)
 let revenueRecords = ref([])
 let revenueLoading = ref(false)
-//分页
+
 let pageSize = ref(10)
 let page = ref(1)
 let total = ref(0)
-//是否渲染
-const isPopoverVisible = reactive({})
-
-
 let options = ref([])
 
-let version = ref('0.0.0');
-
 onMounted(() => {
-
-
-
-  getCountry(); //获取国家
-
-  // getSerchStorage();//获取搜索条件
-
-  getlist();//获取主播列表
+  getCountry();
+  getlist();
 })
 
 function serch() {
   page.value = 1
-  console.log(t('hostList.yesterdayGoldCoins'))
   getlist();
 }
 
-function exportList() {
-  if (searchForm.value.dataType == 'InvitationType') {
-    searchForm.value.dataEnd = searchForm.value.dataStart
-  }
-  exportToExcel({})
-
-
-  // //浏览器导出方法
-  // downList('export/hostsinfo',
-  //   {
-  //     searchTime: searchForm.value.time,
-  //     region: searchForm.value.country,
-  //     pageSize: pageSize.value,
-  //     page: page.value,
-  //     userId: userInfo.value.userId,
-  //   }
-  // );
-
-}
-//分页每页条数
-function handleSizeChange(val) {
-  console.log(`${val} items per page`)
+function handleSizeChange() {
+  page.value = 1
   getlist();
-
 }
-//分页页数
-function handleCurrentChange(val) {
-  console.log(`current page: ${val}`)
-  getlist();
 
+function changePage(newPage) {
+  if (newPage < 1 || (newPage - 1) * pageSize.value >= total.value) return
+  page.value = newPage
+  getlist()
 }
-//选择行
-function handleSelectionChange(data) {
-  console.log(data)
-  selectHostList.value = []
-  data.forEach(item => {
-    selectHostList.value.push(item.hostId)
-  })
-  // multipleTableRef.value = data
-  // console.log(multipleTableRef.value)
 
-}
-//获取主播列表
+
 const getlist = () => {
-
-
   loading.value = true
-  console.log(searchForm.value)
   tkhostdata({
     tenantId: Number(userInfo.value.tenantId),
-    sort: sortData.value.sortForm,//正序倒序
-    sortName: sortData.value.sortType,//排序类型
+    sort: sortData.value.sortForm,
+    sortName: sortData.value.sortType,
     "current": page.value,
     "pageSize": pageSize.value,
-    ...searchForm.value,//筛选条件
+    ...searchForm.value,
   }).then(res => {
     loading.value = false
     if (res) {
       console.log('主播列表', res)
       total.value = Number(res.total)
       tableData.value = res.records.map(item => ({
-        hostId: item.hostsId, // 注意：原字段是 hostId，你的数据是 hostsId，需手动映射
-        hostlevel: item.hostsLevel, // 原字段 hostlevel 对应你的数据 hostsLevel
+        hostId: item.hostsId,
+        hostlevel: item.hostsLevel,
         country: item.country,
         createTime: item.createTime,
         fans: item.fans,
@@ -401,20 +411,21 @@ const getlist = () => {
         hostsKind: item.hostsKind,
         onlineFans: item.onlineFans,
         yesterdayCoins: item.yesterdayCoins,
-        // 保留原有字段（如 belongBy、useable 等）
         belongBy: item.belongBy,
         useable: item.useable,
         invitationType: item.invitationType,
       }));
     }
-
-
+  }).catch(() => {
+    loading.value = false
   })
-
 }
+
 function handelClick() {
   filterdialogVisible.value = false
+  getlist()
 }
+
 function reset() {
   searchForm.value.fansMin = null
   searchForm.value.fansMax = null
@@ -425,37 +436,23 @@ function reset() {
   searchForm.value.fllowernumMin = null
   searchForm.value.fllowernumMax = null
 }
+
 function handleClose(done) {
-  console.log('关闭')
-  // searchForm.value = {
-  //   dataType: '',
-  //   dataStart: '',
-  //   dataEnd: '',
-  // }
   done()
 }
 
-
 function getliveHost(hostId) {
-  liveDetailLoading.value = true
-  liveHostDetail(
-    {
+  liveHostDetail({
       "hostsId": hostId,
       "tenantId": userInfo.value.tenantId
-    }
-  ).then(res => {
+    }).then(res => {
     const detailList = Array.isArray(res) ? res : (res?.records || [])
     liveDetailRecords.value = detailList
     liveDetailDialogVisible.value = true
-  }).catch(err => {
-    console.log('liveHostDetail error', err)
-  }).finally(() => {
-    liveDetailLoading.value = false
   })
 }
 
 function handleLiveSelect(row) {
-  console.log('selected live row', row)
   liveDetailDialogVisible.value = false
 }
 
@@ -465,87 +462,69 @@ function getRevenueStats(hostId) {
     const detailList = Array.isArray(res) ? res : (res?.records || [])
     revenueRecords.value = detailList
     revenueDialogVisible.value = true
-  }).catch(err => {
-    console.log('revenueStats error', err)
   }).finally(() => {
     revenueLoading.value = false
   })
 }
 
+function openHTML(id) {
+  givePyAnchorId(id)
+}
+
+function getCountry() {
+  getCountryinfo({}).then(res => {
+    res.forEach(item => {
+      if (item.countryGroupName) {
+        options.value.push({ value: item.countryGroupName, label: item.countryGroupName })
+      }
+    })
+  })
+}
+
+function formatTimeOnlyDate(val) {
+   if(!val) return ''
+   return val.split(' ')[0] || val
+}
+
+function formatTimeOnlyTime(val) {
+   if(!val) return ''
+   return val.split(' ')[1] || ''
+}
+
+// History parsing helpers (preserved from original)
 function parseHistoryItems(history) {
   if (!history) return []
   let arr = history
   if (typeof history === 'string') {
-    try {
-      arr = JSON.parse(history)
-    } catch {
-      return []
-    }
+    try { arr = JSON.parse(history) } catch { return [] }
   }
   if (!Array.isArray(arr)) return []
-  return arr
-    .map((item, index) => {
-      if (typeof item === 'number') {
-        return { date: `Day ${index + 1}`, value: item }
-      }
-      if (item && typeof item === 'object') {
-        return {
-          date: item.date ? String(item.date) : '',
-          value: Number(item.value ?? 0),
-        }
-      }
+  return arr.map((item, index) => {
+      if (typeof item === 'number') return { date: `Day ${index + 1}`, value: item }
+      if (item && typeof item === 'object') return { date: item.date ? String(item.date) : '', value: Number(item.value ?? 0) }
       return null
-    })
-    .filter(Boolean)
+  }).filter(Boolean)
 }
-
-function hasHistory(history) {
-  return parseHistoryItems(history).length > 0
-}
-
+function hasHistory(history) { return parseHistoryItems(history).length > 0 }
 function getHistoryStats(history) {
   const items = parseHistoryItems(history)
-  if (items.length === 0) {
-    return { min: 0, max: 0, start: '', end: '' }
-  }
+  if (items.length === 0) return { min: 0, max: 0, start: '', end: '' }
   const values = items.map(item => item.value)
-  return {
-    min: Math.min(...values),
-    max: Math.max(...values),
-    start: items[0].date || '',
-    end: items[items.length - 1].date || '',
-  }
+  return { min: Math.min(...values), max: Math.max(...values), start: items[0].date || '', end: items[items.length - 1].date || '' }
 }
-
-function getHistoryMin(history) {
-  return getHistoryStats(history).min
-}
-
-function getHistoryMax(history) {
-  return getHistoryStats(history).max
-}
-
-function getHistoryStartDate(history) {
-  return getHistoryStats(history).start
-}
-
-function getHistoryEndDate(history) {
-  return getHistoryStats(history).end
-}
-
+function getHistoryMin(history) { return getHistoryStats(history).min }
+function getHistoryMax(history) { return getHistoryStats(history).max }
+function getHistoryStartDate(history) { return getHistoryStats(history).start }
+function getHistoryEndDate(history) { return getHistoryStats(history).end }
 function formatRevenueValue(value) {
   const num = Number(value)
   if (!Number.isFinite(num)) return ''
-  const fixed = num.toFixed(3)
-  return fixed.replace(/\.0+$/, '').replace(/(\.\d*?)0+$/, '$1')
+  return num.toFixed(3).replace(/\.0+$/, '').replace(/(\.\d*?)0+$/, '$1')
 }
-
 function buildHistoryTitle(history) {
   const items = parseHistoryItems(history)
-  if (items.length === 0) return '-'
-  return items.map(item => `${item.date}: ${formatRevenueValue(item.value)}`).join('\n')
+  return items.length ? items.map(item => `${item.date}: ${formatRevenueValue(item.value)}`).join('\n') : '-'
 }
-
 function buildSparklinePoints(history) {
   const items = parseHistoryItems(history)
   if (items.length === 0) return ''
@@ -553,9 +532,7 @@ function buildSparklinePoints(history) {
   const min = Math.min(...values)
   const max = Math.max(...values)
   const range = max - min || 1
-  const width = 180
-  const height = 48
-  const padding = 2
+  const width = 180, height = 48, padding = 2
   const step = items.length > 1 ? (width - padding * 2) / (items.length - 1) : 0
   return items.map((item, index) => {
     const x = padding + index * step
@@ -564,346 +541,34 @@ function buildSparklinePoints(history) {
   }).join(' ')
 }
 function formatTimestamp(value) {
-  if (value === null || value === undefined || value === '') {
-    return ''
-  }
-  if (value instanceof Date) {
-    return formatDate(value)
-  }
-  if (typeof value === 'number') {
-    const ms = value < 1e12 ? value * 1000 : value
-    return formatDate(new Date(ms))
-  }
-  if (typeof value === 'string') {
-    const trimmed = value.trim()
-    if (/^\d+$/.test(trimmed)) {
-      const num = Number(trimmed)
-      const ms = num < 1e12 ? num * 1000 : num
-      return formatDate(new Date(ms))
-    }
-    const parsed = Date.parse(trimmed)
-    if (!Number.isNaN(parsed)) {
-      return formatDate(new Date(parsed))
-    }
-    return trimmed
-  }
-  return String(value)
+  if (!value) return ''
+  const date = new Date(value)
+  return date.toLocaleString()
 }
-
-function formatDate(date) {
-  const y = date.getFullYear()
-  const m = String(date.getMonth() + 1).padStart(2, '0')
-  const d = String(date.getDate()).padStart(2, '0')
-  const hh = String(date.getHours()).padStart(2, '0')
-  const mm = String(date.getMinutes()).padStart(2, '0')
-  const ss = String(date.getSeconds()).padStart(2, '0')
-  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
-}
-//修改主播维护状态
-// function handleSelectChange(event, data) {
-
-//   upholdinfo({
-//     "hostId": data.hostId,
-//     "userId": userInfo.value.userId,
-//     "tenantId": userInfo.value.tenantId,
-//     // "comment": "我已经尽力维护，但是失败了",
-//     "useable": event.target.value
-//   }).then(res => {
-//     console.log(res)
-//   })
-// }
-
-//更改主播维护备注
-
-// function uphostcomment() {
-//   upholdinfo({
-//     "hostId": commentHost.value,
-//     "userId": userInfo.value.userId,
-//     "tenantId": userInfo.value.tenantId,
-//     "comment": commentInfo.value,
-//   }).then(res => {
-//     console.log(res)
-//     serch()
-//     commentVisible.value = false
-//   })
-// }
-
-function filterTag(value, row) {
-  console.log(row.useable, value)
-  return row.useable === value;
-}
-
-
-//获取国家
-function getCountry() {
-  getCountryinfo({}).then(res => {
-    // console.log(res)
-    res.forEach(item => {
-      if (item.countryGroupName) {
-        options.value.push({ value: item.countryGroupName, label: item.countryGroupName })
-
-      }
-    })
-    // console.log(options.value)
-  }).catch(err => {
-    console.log('getCountry', err)
-  })
-}
-
-//获取下级员工
-// const getStaff = () => {
-//   getStaffList({
-//     userId: userInfo.value.userId,
-//     activeYn: userInfo.value.activeYn,
-//     tenantId: userInfo.value.tenantId,
-//   }).then(res => {
-//     console.log(res)
-//     res.forEach(item => {
-//       staffOptions.value.push({
-//         value: item.userId,
-//         label: item.userName
-//       })
-//     })
-//   })
-// }
-
-
-// //分配主播给员工
-// function allocation() {
-//   managerhosts({
-//     "manaId": userInfo.value.userId,
-//     "userId": staffValue.value,
-//     "tenantId": userInfo.value.tenantId,
-//     "hostIds": selectHostList.value
-//   }).then(res => {
-//     if (res) {
-//       dialogFormVisible.value = false
-
-//     }
-//   })
-// }
-
-
-//获取主播信息
-// const getTkhostdetail = (id) => {
-//   tkhostdetail({
-//     hostId: id,
-//     // page: 1,
-//     searchTimeStart: '20250401',
-//     searchTimeEnd: '20250403'
-//   }).then(res => {
-
-//     console.log(labelList.value)
-
-//   })
-
-// }
-
-
-function openPopover(hostId, paramCode) {
-
-  isPopoverVisible[`${hostId}-${paramCode}`] = true;
-
-
-}
-
-function closePopover(hostId, paramCode) {
-
-  // isPopoverVisible[`${hostId}-${paramCode}`] = false;
-}
-
-
-function openHTML(id) {
-  givePyAnchorId(id)
-
-  // upholdinfo({
-  //   "hostId": id,
-  //   "userId": userInfo.value.userId,
-  //   "tenantId": userInfo.value.tenantId,
-  //   // "comment": "我已经尽力维护，但是失败了",
-  //   "useable": "Y"
-  // }).then(res => {
-
-  // getlist();
-  // })
-
-}
-
-// function openAccountName(idStr) {
-//   if (idStr) {
-//     hostNameVisible.value = true
-//     accountName(idStr).then(res => {
-//       staffId.value = JSON.stringify(res).replace(/[{}"]/g, '') // 移除所有 {} 和 "
-//         .split(',')            // 按逗号分割成数组
-
-//       console.log(res)
-//     })
-//   }
-// }
 </script>
-
-<style lang="less">
-.hostList {
-  box-sizing: border-box;
-  // height: 100vh;
-  padding: 40px;
-  background: linear-gradient(135deg, #f7fbff 0%, #f2f9f8 100%);
-  border-radius: 16px;
-
-  /* 页面无法选中 */
-  // -webkit-user-select: none;
-  // -moz-user-select: none;
-  // -ms-user-select: none;
-  // user-select: none;
-
-  .hostTable {
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    padding: 16px;
-    background: #ffffff;
-    border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
-    box-sizing: border-box;
-
-    .hostIdText {
-      text-decoration: underline;
-      cursor: pointer;
-    }
-
-    .live-btn {
-      background: linear-gradient(90deg, #45a1ff, #5ad9ff);
-      border: none;
-      color: #fff;
-    }
-
-    .live-btn:hover {
-      filter: brightness(1.05);
-    }
-
-    :deep(.el-table) {
-      width: 100% !important;
-      table-layout: fixed;
-    }
-
-    :deep(.el-table__header-wrapper),
-    :deep(.el-table__body-wrapper) {
-      overflow-x: auto;
-    }
-  }
-
-  .serch-button {
-    width: 80px;
-    height: 47px;
-    background: @btn-bg-color;
-    border-radius: 10px;
-    border: none;
-  }
-
-  .put-button {
-    width: 132px;
-    height: 47px;
-    background: @btn-bg-color;
-    border-radius: 10px;
-    border: none;
-
-  }
-}
-
-.el-dialog {
-
-  --el-dialog-font-line-height: 50px;
-  --el-dialog-width: 600px;
-  --el-dialog-border-radius: 8px;
-
-  // border: 10px solid @bg-color-light;
-}
-
-.center-line {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  // justify-content: center;
-}
-
-.center-justify {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.center-align {
-  display: flex;
-  justify-content: space-between;
-
-}
-
-.center-flex {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
-
-<style scoped lang="less">
-.history-sparkline {
-  width: 180px;
-  height: 48px;
-}
-
+<style scoped>
+/* Only keep essential overrides that Tailwind can't easily handle, like svg styling */
 .history-sparkline-wrap {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  width: 180px;
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  padding: 4px;
+  width: 190px;
 }
-
-.history-sparkline-top {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: #1f5fa8;
-}
-
+.history-sparkline-top,
 .history-sparkline-bottom {
   display: flex;
   justify-content: space-between;
-  font-size: 12px;
-  color: #7a8aa0;
-  gap: 8px;
+  font-size: 10px;
+  color: #64748b;
+  margin-bottom: 2px;
 }
-
-.history-sparkline-min-top {
-  color: #4a5b73;
-  font-weight: 600;
-}
-
-.history-sparkline-dates {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-}
-
-.history-sparkline-date {
-  font-size: 12px;
-  color: #7a8aa0;
-}
-
-::v-deep(.el-input__wrapper) {
-  background-color: #F2FAF9;
-  border: 1px solid @bg-color;
-  height: 44px;
-}
-
-::v-deep(.el-select__wrapper) {
-  background-color: #F2FAF9;
-  border: 1px solid @bg-color;
+.history-sparkline {
+  background-color: #fff;
+  border-radius: 2px;
   height: 48px;
-}
-
-::v-deep(.el-pagination.is-background .el-pager li.is-active) {
-  background-color: @bg-color;
+  width: 100%;
 }
 </style>
diff --git a/src/views/hosts/workbenches.vue b/src/views/hosts/workbenches.vue
index 3b29da8..d69297c 100644
--- a/src/views/hosts/workbenches.vue
+++ b/src/views/hosts/workbenches.vue
@@ -1,176 +1,261 @@
 <template>
-    <div class="center-line workbenches">
-        <div class="center-align" style="width: 100%; margin: 0 20px;">
-            <div class="box-card-num1 center-line">
-                <div>{{ $t('workbenches.totalnumber') }}: <span>{{ hostData.totalCount }}</span></div>
-                <div>{{ $t('workbenches.createHost') }}: <span>{{ hostData.validAnchorsCount }}</span></div>
-                <div> {{ $t('workbenches.query') }}: <span>{{ hostData.checkedDataCount }}</span></div>
-                <div>{{ $t('workbenches.invite') }}: <span>{{ hostData.canInvitationCount }}</span></div>
-                <div>{{ $t('workbenches.runTime') }}: <span>{{ formattedTime }}</span></div>
-            </div>
-            <div class="center-line" style="padding-top: 15vh;">
-                <el-button class="open-login" type="primary" @click="openTK">{{ $t('workbenches.openTK') }}</el-button>
-                <!-- <el-button class="open-login" type="primary" @click="startTimer">计时开始</el-button> -->
-            </div>
-
-            <div>
-
-                <el-card class="box-card-num" v-for="(item, index) in 2" :key="index">
-                    <div class="center-justify">
-                        <div class="from-input-item">
-                            <div class="from-input-item-title center-justify">
-                                {{ $t('workbenches.guildAccount') }}：
-                            </div>
-                            <el-input :disabled="!(tkData[index].code == 0 && !isLogin[index])"
-                                v-model="tkData[index].account" :placeholder="$t('workbenches.guildAccountPlace')"
-                                clearable />
-                        </div>
-
-                        <div class="from-input-item">
-                            <div class="from-input-item-title center-justify">
-                                {{ $t('workbenches.guildPass') }}：
-                            </div>
-                            <el-input :disabled="!(tkData[index].code == 0 && !isLogin[index])"
-                                v-model="tkData[index].password" type="password"
-                                :placeholder="$t('workbenches.guildPassPlace')" show-password />
-                        </div>
-
-                        <el-button class="open-login" style="margin-left: 60px;"
-                            :disabled="!(tkData[index].code == 0 && !isLogin[index])" type="primary"
-                            @click="loginTK(index)">{{ $t('workbenches.loginBackend') }}</el-button>
-                        <div v-if="tkData[index].code == 0" class="loginState"></div>
-                        <div v-if="tkData[index].code == 1" class="loginState" style="background-color: green;"></div>
-
-                    </div>
-                    <div class="todayCount"> {{ $t('workbenches.queriedNum') }}：{{ tkData[index].num }}</div>
-                </el-card>
-
-            </div>
-        </div>
-
-        <div class="container ">
-
-            <el-card class="box-card">
-                <template #header>
-                    <div class="card-header">
-                        <span class="center-justify"><img src="@/assets/worklogo.png">
-                            {{ $t('workbenchesSetup.workbenches') }} </span>
-                        <div class="card-header-right">
-
-                            <span>
-                                {{ $t('workbenchesSetup.network') }}:{{ locale == 'zh' ? countryData : countryDataEN }}
-                            </span>
-
-                            <img style="height: 20px;" v-if="isWifi" src="@/assets/wifi.png">
-
-                            <span class="inline-country">
-                                <span style="color: black;">指定国家</span>
-                                <el-select v-model="country_info" class="country-select" placeholder="全部" size="small">
-                                    <el-option :label="'全部'" :value="'地区全部'" />
-                                    <el-option v-for="(item, index) in country_Lst" :key="index" :label="item"
-                                        :value="item" />
-                                </el-select>
-                            </span>
-
-                        </div>
-
-                    </div>
-                </template>
-                <el-row :gutter="24">
-                    <el-col :span="6">
-                        <div class="input-group">
-                            <label>{{ $t('workbenchesSetup.setCoinsNum') }}</label>
-                            <el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
-                                :placeholder="$t('workbenchesSetup.minCoinsNum')" style="width: 100%"
-                                :disabled="!pyData.isStart">
-                                <template #prepend>{{ $t('workbenchesSetup.minCoinsNum') }}</template>
-                            </el-input>
-                            <el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
-                                :placeholder="$t('workbenchesSetup.maxCoinsNum')" style="width: 100%; margin-top: 10px"
-                                :disabled="!pyData.isStart">
-                                <template #prepend>{{ $t('workbenchesSetup.maxCoinsNum') }}</template>
-                            </el-input>
-                        </div>
-                    </el-col>
-                    <el-col :span="6">
-                        <div class="input-group">
-                            <label>{{ $t('workbenchesSetup.setFansNum') }}</label>
-                            <el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
-                                :placeholder="$t('workbenchesSetup.minFansNum')" style="width: 100%"
-                                :disabled="!pyData.isStart">
-                                <template #prepend>{{ $t('workbenchesSetup.minFansNum') }}</template>
-                            </el-input>
-                            <el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
-                                :placeholder="$t('workbenchesSetup.maxFansNum')" style="width: 100%; margin-top: 10px"
-                                :disabled="!pyData.isStart">
-                                <template #prepend>{{ $t('workbenchesSetup.maxFansNum') }}</template>
-                            </el-input>
-                        </div>
-                    </el-col>
-                    <el-col :span="6">
-                        <div class="input-group">
-                            <label>{{ $t('workbenchesSetup.setQuery') }}</label>
-                            <!-- <el-input type='number' v-model="pyData.frequency.hour" @input="handleInputHour" -->
-                            <el-input type='number' v-model="pyData.frequency.hour"
-                                :placeholder="$t('workbenchesSetup.hour')" style="width: 100%"
-                                :disabled="!pyData.isStart">
-                                <template #append>{{ $t('workbenchesSetup.hour') }}</template>
-                            </el-input>
-                            <!-- <el-input type='number' v-model="pyData.frequency.day" @input="handleInputDay" -->
-                            <el-input type='number' v-model="pyData.frequency.day"
-                                :placeholder="$t('workbenchesSetup.hour24')" style="width: 100%; margin-top: 10px"
-                                :disabled="!pyData.isStart">
-                                <template #append>{{ $t('workbenchesSetup.hour24') }}</template>
-                            </el-input>
-                        </div>
-                    </el-col>
-                    <el-col :span="6">
-                        <div class="input-group">
-                            <label>{{ $t('workbenchesSetup.setNum') }}</label>
-                            <label style="color: #00000070; font-size: 15px;">({{ $t('workbenchesSetup.prompt')
-                            }})</label>
-                            <el-button type="primary" @click="isLimit = true" :disabled="!pyData.isStart">{{
-                                $t('workbenchesSetup.setHostNum')
-                                }}</el-button>
-                            <el-button type="info" @click="isLimit = false" :disabled="!pyData.isStart">{{
-                                $t('workbenchesSetup.unlimitedQuantity')
-                                }}</el-button>
-                            <!-- <el-input type='number' v-model="pyData.frequency.hour" @input="handleInputHour" -->
-                            <div v-if="isLimit" class="center-justify">
-                                <el-input type='number' v-model="hostNum" :placeholder="$t('workbenchesSetup.num')"
-                                    style="width: 100% ;" :disabled="!pyData.isStart">
-                                    <template #append>{{ $t('workbenchesSetup.num') }}</template>
-                                </el-input>
-                            </div>
-
-                        </div>
-                    </el-col>
-                </el-row>
-                <div class="center-line" style="margin-top: 0px; text-align: center">
-                    <div class="center-justify">
-                        <el-checkbox @click="console.log(pyData)" :disabled="!pyData.isStart"
-                            v-model="pyData.filterGame" label="过滤游戏主播" border />
-                        <el-checkbox @click="console.log(pyData)" :disabled="!pyData.isStart"
-                            v-model="pyData.filterSelling" label="过滤带货主播" border />
-                        <el-checkbox @click="console.log(pyData)" :disabled="!pyData.isStart"
-                            v-model="pyData.rankingList" label="排行榜" border />
-                    </div>
-                    <el-button class="submit-button" :disabled="false" v-show="pyData.isStart" type="primary"
-                        @click="submit">{{
-                            $t('workbenchesSetup.start') }}</el-button>
-                    <el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">{{
-                        $t('workbenchesSetup.stop') }}</el-button>
-
-                </div>
-
-            </el-card>
-        </div>
-        <div style="color: green;">
-            到期时间: {{ timestampToTime(expiredTime) }}
-        </div>
-
+  <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-4">
+    <!-- Stat Cards -->
+    <div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-sm font-medium text-slate-500">{{ $t('workbenches.totalnumber') }}</span>
+        <span class="material-icons-round text-primary/40">analytics</span>
+      </div>
+      <div class="text-3xl font-bold text-slate-900 dark:text-white">{{ hostData.totalCount }}</div>
     </div>
+    <div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-sm font-medium text-slate-500">{{ $t('workbenches.createHost') }}</span>
+        <span class="material-icons-round text-secondary/40">person_add</span>
+      </div>
+      <div class="text-3xl font-bold text-slate-900 dark:text-white">{{ hostData.validAnchorsCount }}</div>
+    </div>
+    <div class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-sm font-medium text-slate-500">{{ $t('workbenches.query') }} / {{ $t('workbenches.invite')
+        }}</span>
+        <span class="material-icons-round text-slate-400">compare_arrows</span>
+      </div>
+      <div class="text-3xl font-bold text-slate-900 dark:text-white">{{ hostData.checkedDataCount }} <span
+          class="text-slate-300 text-lg mx-2">/</span> {{ hostData.canInvitationCount }}</div>
+    </div>
+    <div
+      class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-premium border border-slate-100 dark:border-slate-800 flex flex-col justify-center">
+      <div class="flex items-center justify-between">
+        <div>
+          <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-1">{{
+            $t('workbenches.runTime') }}</span>
+          <div class="text-2xl font-mono font-bold text-primary">{{ formattedTime }}</div>
+        </div>
+        <button @click="openTK"
+          class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow-lg shadow-primary/25">
+          {{ $t('workbenches.openTK') }}
+        </button>
+      </div>
+    </div>
+  </div>
 
+  <!-- Guild Accounts -->
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+    <div v-for="(item, index) in 2" :key="index" class="glass-card p-5 rounded-xl shadow-premium">
+      <div class="flex justify-between items-center mb-6">
+        <div class="flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full" :class="tkData[index].code == 1 ? 'bg-emerald-500' : 'bg-red-500'"></span>
+          <h3 class="font-bold text-slate-800 dark:text-white">{{ $t('workbenches.guildAccount') }} {{ index === 0 ? 'A'
+            : 'B' }}</h3>
+        </div>
+        <span class="text-xs text-slate-500">{{ $t('workbenches.queriedNum') }}: {{ tkData[index].num }}</span>
+      </div>
+      <div class="space-y-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="text-xs font-semibold text-slate-500 mb-1 block">{{ $t('workbenches.guildAccount') }}</label>
+            <input
+              class="w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all disabled:opacity-50"
+              type="text" v-model="tkData[index].account" :placeholder="$t('workbenches.guildAccountPlace')"
+              :disabled="!(tkData[index].code == 0 && !isLogin[index])" />
+          </div>
+          <div>
+            <label class="text-xs font-semibold text-slate-500 mb-1 block">{{ $t('workbenches.guildPass') }}</label>
+            <div class="relative">
+              <input
+                class="w-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all disabled:opacity-50"
+                type="password" v-model="tkData[index].password" :placeholder="$t('workbenches.guildPassPlace')"
+                :disabled="!(tkData[index].code == 0 && !isLogin[index])" />
+            </div>
+          </div>
+        </div>
+        <button @click="loginTK(index)" :disabled="!(tkData[index].code == 0 && !isLogin[index])"
+          class="w-full bg-slate-900 dark:bg-slate-700 hover:bg-black text-white py-2.5 rounded-lg font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+          {{ $t('workbenches.loginBackend') }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Configuration Panel -->
+  <div
+    class="bg-white dark:bg-slate-900 rounded-2xl shadow-premium border border-slate-100 dark:border-slate-800 overflow-hidden">
+    <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center">
+          <span class="material-icons-round text-slate-600 dark:text-slate-400 text-lg">settings</span>
+        </div>
+        <h2 class="font-bold text-slate-800 dark:text-white">{{ $t('workbenchesSetup.workbenches') }}</h2>
+      </div>
+      <div class="flex items-center gap-4 text-sm">
+        <div class="text-slate-500">{{ $t('workbenchesSetup.network') }}: <span class="text-primary font-bold">{{ locale
+          == 'zh' ? countryData : countryDataEN }}</span></div>
+        <div class="flex items-center gap-2">
+          <span class="text-slate-500">指定国家:</span>
+          <select v-model="country_info"
+            class="bg-slate-50 dark:bg-slate-800 border-none rounded-lg text-xs font-medium focus:ring-0">
+            <option value="全部">全部</option>
+            <option v-for="(item, index) in country_Lst" :key="index" :value="item">{{ item }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="p-6">
+      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
+        <!-- Coins -->
+        <div>
+          <h4 class="text-sm font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
+            <span class="w-1 h-4 bg-primary rounded-full"></span>
+            {{ $t('workbenchesSetup.setCoinsNum') }}
+          </h4>
+          <div class="space-y-3">
+            <div class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
+              <span
+                class="bg-slate-50 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-28 flex items-center border-r border-slate-200 dark:border-slate-700">{{
+                  $t('workbenchesSetup.minCoinsNum') }}</span>
+              <input
+                class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0 disabled:bg-slate-100"
+                type="number" v-model="pyData.gold.min" :disabled="!pyData.isStart" />
+            </div>
+            <div class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
+              <span
+                class="bg-slate-50 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-28 flex items-center border-r border-slate-200 dark:border-slate-700">{{
+                  $t('workbenchesSetup.maxCoinsNum') }}</span>
+              <input
+                class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0 disabled:bg-slate-100"
+                type="number" v-model="pyData.gold.max" :disabled="!pyData.isStart" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Fans -->
+        <div>
+          <h4 class="text-sm font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
+            <span class="w-1 h-4 bg-secondary rounded-full"></span>
+            {{ $t('workbenchesSetup.setFansNum') }}
+          </h4>
+          <div class="space-y-3">
+            <div class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
+              <span
+                class="bg-slate-50 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-28 flex items-center border-r border-slate-200 dark:border-slate-700">{{
+                  $t('workbenchesSetup.minFansNum') }}</span>
+              <input
+                class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0 disabled:bg-slate-100"
+                type="number" v-model="pyData.fans.min" :disabled="!pyData.isStart" />
+            </div>
+            <div class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
+              <span
+                class="bg-slate-50 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-28 flex items-center border-r border-slate-200 dark:border-slate-700">{{
+                  $t('workbenchesSetup.maxFansNum') }}</span>
+              <input
+                class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0 disabled:bg-slate-100"
+                type="number" v-model="pyData.fans.max" :disabled="!pyData.isStart" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Frequency -->
+        <div>
+          <h4 class="text-sm font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
+            <span class="w-1 h-4 bg-emerald-500 rounded-full"></span>
+            {{ $t('workbenchesSetup.setQuery') }}
+          </h4>
+          <div class="space-y-3">
+            <div class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
+              <input
+                class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0 disabled:bg-slate-100"
+                type="number" v-model="pyData.frequency.hour" :disabled="!pyData.isStart" />
+              <span
+                class="bg-slate-100 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-24 flex items-center justify-center border-l border-slate-200 dark:border-slate-700">{{
+                  $t('workbenchesSetup.hour') }}</span>
+            </div>
+            <div class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
+              <input
+                class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0 disabled:bg-slate-100"
+                type="number" v-model="pyData.frequency.day" :disabled="!pyData.isStart" />
+              <span
+                class="bg-slate-100 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-24 flex items-center justify-center border-l border-slate-200 dark:border-slate-700">{{
+                  $t('workbenchesSetup.hour24') }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Quantity Limit -->
+        <div>
+          <h4 class="text-sm font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
+            <span class="w-1 h-4 bg-orange-400 rounded-full"></span>
+            {{ $t('workbenchesSetup.setNum') }}
+            <span class="text-[10px] text-slate-400 font-normal ml-1">({{ $t('workbenchesSetup.prompt') }})</span>
+          </h4>
+          <div class="space-y-3">
+            <div class="flex gap-2">
+              <button @click="isLimit = true" :disabled="!pyData.isStart"
+                class="flex-1 px-3 py-2 text-xs font-semibold rounded-md border transition-colors"
+                :class="isLimit ? 'bg-primary text-white border-primary' : 'bg-white text-slate-600 border-slate-200 hover:border-primary/50'">
+                {{ $t('workbenchesSetup.setHostNum') }}
+              </button>
+              <button @click="isLimit = false" :disabled="!pyData.isStart"
+                class="flex-1 px-3 py-2 text-xs font-semibold rounded-md border transition-colors"
+                :class="!isLimit ? 'bg-slate-500 text-white border-slate-500' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-400'">
+                {{ $t('workbenchesSetup.unlimitedQuantity') }}
+              </button>
+            </div>
+            <div v-if="isLimit"
+              class="flex shadow-sm rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
+              <input
+                class="flex-1 px-4 py-2 text-sm bg-white dark:bg-slate-900 border-none outline-none focus:ring-0 disabled:bg-slate-100"
+                type="number" v-model="hostNum" :disabled="!pyData.isStart" />
+              <span
+                class="bg-slate-100 dark:bg-slate-800 px-3 py-2 text-xs font-medium text-slate-500 w-16 flex items-center justify-center border-l border-slate-200 dark:border-slate-700">{{
+                  $t('workbenchesSetup.num') }}</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <div
+        class="flex flex-col lg:flex-row items-center justify-between gap-6 pt-4 border-t border-slate-100 dark:border-slate-800">
+        <div class="flex items-center gap-6">
+          <label class="flex items-center gap-2 cursor-pointer group">
+            <input class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary/20" type="checkbox"
+              v-model="pyData.filterGame" :disabled="!pyData.isStart" />
+            <span
+              class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤游戏主播</span>
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer group">
+            <input class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary/20" type="checkbox"
+              v-model="pyData.filterSelling" :disabled="!pyData.isStart" />
+            <span
+              class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤带货主播</span>
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer group">
+            <input class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary/20" type="checkbox"
+              v-model="pyData.rankingList" :disabled="!pyData.isStart" />
+            <span
+              class="text-sm text-slate-600 dark:text-slate-400 group-hover:text-primary transition-colors">过滤排行榜单</span>
+          </label>
+        </div>
+      </div>
+
+      <div class="mt-6 text-center">
+        <button v-if="pyData.isStart" @click="submit"
+          class="bg-slate-900 dark:bg-primary hover:scale-[1.02] active:scale-[0.98] text-white px-10 py-3 rounded-xl font-bold text-lg shadow-xl shadow-slate-900/10 dark:shadow-primary/20 transition-all flex items-center gap-2 mx-auto">
+          <span class="material-icons-round">bolt</span>
+          {{ $t('workbenchesSetup.start') }}
+        </button>
+        <button v-else @click="unsubmit"
+          class="bg-red-500 hover:bg-red-600 hover:scale-[1.02] active:scale-[0.98] text-white px-12 py-4 rounded-xl font-bold text-lg shadow-xl shadow-red-500/20 transition-all flex items-center gap-3 mx-auto">
+          <span class="material-icons-round">stop</span>
+          {{ $t('workbenchesSetup.stop') }}
+        </button>
+        <p class="mt-4 text-xs font-medium text-emerald-600 dark:text-emerald-400">
+          到期时间: {{ timestampToTime(expiredTime) }}
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -198,10 +283,10 @@ let getHostTimer = ref(null);
 let getNumTimer = ref(null);
 //获取的主播信息
 let hostData = ref({
-    totalCount: 0,
-    validAnchorsCount: 0,
-    canInvitationCount: 0,
-    checkedDataCount: 0,
+  totalCount: 0,
+  validAnchorsCount: 0,
+  canInvitationCount: 0,
+  checkedDataCount: 0,
 });
 //是否开启tk
 // let isTk = ref(true);
@@ -214,46 +299,46 @@ let statusTimerCopy = ref(null);
 
 //设置次数最大值
 let maxCount = ref([
-    {
-        hourMax: 50,
-        dayMax: 300,
-    },
-    {
-        hourMax: 100,
-        dayMax: 600,
-    },
+  {
+    hourMax: 50,
+    dayMax: 300,
+  },
+  {
+    hourMax: 100,
+    dayMax: 600,
+  },
 ]);
 
 //tk账号信息
 let tkData = ref([
-    {
-        account: '',
-        password: '',
-        index: 1,
-        code: 0,
-        num: 0
-    },
-    {
-        account: '',
-        password: '',
-        index: 2,
-        code: 0,
-        num: 0
-    },
+  {
+    account: '',
+    password: '',
+    index: 1,
+    code: 0,
+    num: 0
+  },
+  {
+    account: '',
+    password: '',
+    index: 2,
+    code: 0,
+    num: 0
+  },
 ]);
 
 //python需要的数据
 let pyData = ref({
-    gold: { min: 0, max: 0 },
-    fans: { min: 0, max: 0 },
-    frequency: { hour: 0, day: 0 },
-    isStart: true,
-    country: countryData.value,
-    filterSelling: false,
-    filterGame: false,
-    rankingList: false,
-    tenantId: getUser().tenantId,
-    userId: getUser().userId,
+  gold: { min: 0, max: 0 },
+  fans: { min: 0, max: 0 },
+  frequency: { hour: 0, day: 0 },
+  isStart: true,
+  country: countryData.value,
+  filterSelling: false,
+  filterGame: false,
+  rankingList: false,
+  tenantId: getUser().tenantId,
+  userId: getUser().userId,
 });
 
 //是否限制查询数量
@@ -266,31 +351,31 @@ let submitting = ref(true);
 let expiredTime = ref(null);
 
 onMounted(async () => {
-    //从缓存获取数据
-    if (getNumData()) {
-        pyData.value = getNumData();
-    }
-    if (getTkUser()) {
-        tkData.value = getTkUser();
-        tkData.value[0].code = 0;
-        tkData.value[1].code = 0;
-    }
+  //从缓存获取数据
+  if (getNumData()) {
+    pyData.value = getNumData();
+  }
+  if (getTkUser()) {
+    tkData.value = getTkUser();
+    tkData.value[0].code = 0;
+    tkData.value[1].code = 0;
+  }
 
-    tkaccountuse(tkData.value[0].account, 0)
-    tkaccountuse(tkData.value[1].account, 1)
+  tkaccountuse(tkData.value[0].account, 0)
+  tkaccountuse(tkData.value[1].account, 1)
 
-    getIpInfo()
-    setTimeout(() => {
-        getExpiredTime(getUser().tenantId).then((res) => {
-            console.log('time:', res);
-            expiredTime.value = res.expiredTime
-        })
-    }, 1000);
+  getIpInfo()
+  setTimeout(() => {
+    getExpiredTime(getUser().tenantId).then((res) => {
+      console.log('time:', res);
+      expiredTime.value = res.expiredTime
+    })
+  }, 1000);
 
-    checkVPN()
-    setInterval(async () => {
-        await checkVPN()
-    }, 1000 * 20)
+  checkVPN()
+  setInterval(async () => {
+    await checkVPN()
+  }, 1000 * 20)
 
 
 
@@ -298,15 +383,33 @@ onMounted(async () => {
 })
 
 const getIpInfo = async () => {
-    try {
-        const response = await fetch('https://ipapi.co/json/');
-        if (!response.ok) {
-            throw new Error('请求失败');
-        }
-        const data = await response.json();
-        console.log('IP信息:', data.country);
-        countryDataEN.value = data.country_name
-        countryData.value = getCountryName(data.country);
+  try {
+    const response = await fetch('https://ipapi.co/json/');
+    if (!response.ok) {
+      throw new Error('请求失败');
+    }
+    const data = await response.json();
+    console.log('IP信息:', data.country);
+    countryDataEN.value = data.country_name
+    countryData.value = getCountryName(data.country);
+
+    const url = `https://datasave.api.yolozs.com/api/save_data/country_info?countryName=${countryData.value}`;
+
+    const res = await fetch(url);
+
+    const countryres = await res.json();
+    country_Lst.value = countryres.data
+  } catch (error) {
+    console.error('请求出错:', error);
+    ElMessageBox.prompt('请输入将要获取国家的中文名', '获取国家失败', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      showClose: false,
+      closeOnClickModal: false,
+      showCancelButton: false,
+    })
+      .then(async ({ value }) => {
+        countryData.value = value
 
         const url = `https://datasave.api.yolozs.com/api/save_data/country_info?countryName=${countryData.value}`;
 
@@ -314,130 +417,112 @@ const getIpInfo = async () => {
 
         const countryres = await res.json();
         country_Lst.value = countryres.data
-    } catch (error) {
-        console.error('请求出错:', error);
-        ElMessageBox.prompt('请输入将要获取国家的中文名', '获取国家失败', {
-            confirmButtonText: '确认',
-            cancelButtonText: '取消',
-            showClose: false,
-            closeOnClickModal: false,
-            showCancelButton: false,
-        })
-            .then(async ({ value }) => {
-                countryData.value = value
-
-                const url = `https://datasave.api.yolozs.com/api/save_data/country_info?countryName=${countryData.value}`;
-
-                const res = await fetch(url);
-
-                const countryres = await res.json();
-                country_Lst.value = countryres.data
-            })
-        // .catch(() => {
-        //     ElMessage({
-        //         type: 'info',
-        //         message: 'Input canceled',
-        //     })
-        // })
-    }
+      })
+    // .catch(() => {
+    //     ElMessage({
+    //         type: 'info',
+    //         message: 'Input canceled',
+    //     })
+    // })
+  }
 };
 
 //提交数据到py
 const submit = () => {
-    pyData.value.country = countryData.value;
-    console.log('提交的区间值：', pyData.value);
-    // if (tkData.value[0].account == '' && tkData.value[1].account == '') {
-    //     ElMessage.error('请输入账号密码');
-    //     return;
-    // }
-    // if (tkData.value[0].password == '' && tkData.value[1].password == '') {
-    //     ElMessage.error('请输入账号密码');
-    //     return;
-    // }
+  pyData.value.country = countryData.value;
+  console.log('提交的区间值：', pyData.value);
+  // if (tkData.value[0].account == '' && tkData.value[1].account == '') {
+  //     ElMessage.error('请输入账号密码');
+  //     return;
+  // }
+  // if (tkData.value[0].password == '' && tkData.value[1].password == '') {
+  //     ElMessage.error('请输入账号密码');
+  //     return;
+  // }
 
 
-    if (((Number(pyData.value.gold.min) > Number(pyData.value.gold.max)) || (Number(pyData.value.fans.min) > Number(pyData.value.fans.max)))) {
-        ElMessage.error('请输入正确的区间值');
-        return;
+  if (((Number(pyData.value.gold.min) > Number(pyData.value.gold.max)) || (Number(pyData.value.fans.min) > Number(pyData.value.fans.max)))) {
+    ElMessage.error('请输入正确的区间值');
+    return;
+  }
+  if ((Number(pyData.value.gold.max) <= 0 || Number(pyData.value.fans.max <= 0)) || pyData.value.gold.max == '' || pyData.value.fans.max == '') {
+    ElMessage.error('请输入正确的区间值');
+    return;
+  }
+  if (Number(pyData.value.frequency.hour) <= 0 || Number(pyData.value.frequency.day) <= 0 || pyData.value.frequency.hour == '' || pyData.value.frequency.day == '') {
+    ElMessage.error('请输入正确的频率区间值');
+    return;
+  }
+  //是否限制爬取数量
+  if (isLimit.value) {
+    if (hostNum.value <= 0) {
+      ElMessage.error('请输入正确的可邀请数量');
+      return;
     }
-    if ((Number(pyData.value.gold.max) <= 0 || Number(pyData.value.fans.max <= 0)) || pyData.value.gold.max == '' || pyData.value.fans.max == '') {
-        ElMessage.error('请输入正确的区间值');
-        return;
-    }
-    if (Number(pyData.value.frequency.hour) <= 0 || Number(pyData.value.frequency.day) <= 0 || pyData.value.frequency.hour == '' || pyData.value.frequency.day == '') {
-        ElMessage.error('请输入正确的频率区间值');
-        return;
-    }
-    //是否限制爬取数量
-    if (isLimit.value) {
-        if (hostNum.value <= 0) {
-            ElMessage.error('请输入正确的可邀请数量');
-            return;
-        }
+  }
+
+
+  ElMessageBox.confirm(
+    '确认开始爬取数据?',
+    '开始',
+    {
+      confirmButtonText: '开始',
+      cancelButtonText: '取消',
+      type: 'success',
     }
+  )
+    .then(() => {
+      // console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);
+      //开始按钮的状态  改为禁用
+      submitting.value = true;
+      setNumData(pyData.value);
+      console.error('提交的区间值：', JSON.stringify(pyData.value));
+
+      fetchDataConfig(JSON.stringify({
+        gold: pyData.value.gold,
+        fans: pyData.value.fans,
+        frequency: pyData.value.frequency,
+        isStart: true,
+        filterSelling: pyData.value.filterSelling,
+        filterGame: pyData.value.filterGame,
+        rankingList: !pyData.value.rankingList,
+        country: countryData.value,
+        tenantId: getUser().tenantId,
+        userId: getUser().id,
+        crawl_single_nation: country_info.value == '全部' ? '' : country_info.value
+      })).then((res) => {
+        //开始计时器
+        startTimer();
+        //开启查询次数
+        getHostTimer.value = setInterval(() => {
+          fetchDataCount().then((res) => {
+            hostData.value = JSON.parse(res);
+            if (isLimit.value) {
+              if (hostData.value.canInvitationCount >= hostNum.value) {
+                unsubmit();
+                alert('爬取完毕')
+              }
+            }
+
+          })
+        }, 1000);
+        getNumTimer.value = setInterval(() => {
+          tkaccountuse(tkData.value[0].account, 0)
+          tkaccountuse(tkData.value[1].account, 1)
+        }, 5000);
 
 
-    ElMessageBox.confirm(
-        '确认开始爬取数据?',
-        '开始',
-        {
-            confirmButtonText: '开始',
-            cancelButtonText: '取消',
-            type: 'success',
-        }
-    )
-        .then(() => {
-            // console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);
-            //开始按钮的状态  改为禁用
-            submitting.value = true;
-            setNumData(pyData.value);
-            console.error('提交的区间值：', JSON.stringify(pyData.value));
+      }).finally(() => {
+        setTimeout(() => {
+          pyData.value.isStart = false;
+          submitting.value = false;
+        }, 2000)
 
-            fetchDataConfig(JSON.stringify({
-                gold: pyData.value.gold,
-                fans: pyData.value.fans,
-                frequency: pyData.value.frequency,
-                isStart: true,
-                filterSelling: pyData.value.filterSelling,
-                filterGame: pyData.value.filterGame,
-                rankingList: pyData.value.rankingList,
-                country: countryData.value,
-                tenantId: getUser().tenantId,
-                userId: getUser().id,
-                crawl_single_nation: country_info.value == '全部' ? '' : country_info.value
-            })).then((res) => {
-                //开始计时器
-                startTimer();
-                //开启查询次数
-                getHostTimer.value = setInterval(() => {
-                    fetchDataCount().then((res) => {
-                        hostData.value = JSON.parse(res);
-                        if (isLimit.value) {
-                            if (hostData.value.canInvitationCount >= hostNum.value) {
-                                unsubmit();
-                                alert('爬取完毕')
-                            }
-                        }
+      })
+    })
+    .catch(() => {
 
-                    })
-                }, 1000);
-                getNumTimer.value = setInterval(() => {
-                    tkaccountuse(tkData.value[0].account, 0)
-                    tkaccountuse(tkData.value[1].account, 1)
-                }, 5000);
-
-
-            }).finally(() => {
-                setTimeout(() => {
-                    pyData.value.isStart = false;
-                    submitting.value = false;
-                }, 2000)
-
-            })
-        })
-        .catch(() => {
-
-        })
+    })
 
 
 
@@ -445,114 +530,114 @@ const submit = () => {
 
 //停止
 const unsubmit = () => {
-    fetchDataConfig(JSON.stringify({
-        gold: pyData.value.gold,
-        fans: pyData.value.fans,
-        frequency: pyData.value.frequency,
-        isStart: false,
-        filterSelling: pyData.value.filterSelling,
-        filterGame: pyData.value.filterGame,
-        rankingList: pyData.value.rankingList,
-        country: countryData.value,
-        tenantId: getUser().tenantId,
-        userId: getUser().id,
-        crawl_single_nation: country_info.value == '全部' ? '' : country_info.value
+  fetchDataConfig(JSON.stringify({
+    gold: pyData.value.gold,
+    fans: pyData.value.fans,
+    frequency: pyData.value.frequency,
+    isStart: false,
+    filterSelling: pyData.value.filterSelling,
+    filterGame: pyData.value.filterGame,
+    rankingList: !pyData.value.rankingList,
+    country: countryData.value,
+    tenantId: getUser().tenantId,
+    userId: getUser().id,
+    crawl_single_nation: country_info.value == '全部' ? '' : country_info.value
 
-    })).then((res) => {
-        pauseTimer();
-        pyData.value.isStart = true;
-        clearInterval(getHostTimer.value);
-        getHostTimer.value = null;
-        clearInterval(getNumTimer.value);
-        getNumTimer.value = null;
+  })).then((res) => {
+    pauseTimer();
+    pyData.value.isStart = true;
+    clearInterval(getHostTimer.value);
+    getHostTimer.value = null;
+    clearInterval(getNumTimer.value);
+    getNumTimer.value = null;
 
-        // ElMessage.sussec('已停止')
-    }).catch((err) => {
-        // ElMessage.error('停止失败')
-    })
+    // ElMessage.sussec('已停止')
+  }).catch((err) => {
+    // ElMessage.error('停止失败')
+  })
 };
 
 //重置
 const reset = () => {
-    pyData.value.gold = { min: 0, max: 0 };
-    pyData.value.fans = { min: 0, max: 0 };
-    pyData.value.frequency = { hour: 0, day: 0 };
+  pyData.value.gold = { min: 0, max: 0 };
+  pyData.value.fans = { min: 0, max: 0 };
+  pyData.value.frequency = { hour: 0, day: 0 };
 };
 
 
 const loginTK = (index) => {
-    setTkUser(tkData.value)
-    loginBackStage({
-        account: tkData.value[index].account,
-        password: tkData.value[index].password,
-        index: index
-    })
-    if (index == 0) {
-        isLogin.value[1] = true;
-        statusTimer = setInterval(() => {
-            getloginStatus();
-        }, 2000)
-    } else if (index == 1) {
-        isLogin.value[0] = true;
-        statusTimerCopy = setInterval(() => {
-            getloginStatusCopy();
-        }, 2000)
-    }
+  setTkUser(tkData.value)
+  loginBackStage({
+    account: tkData.value[index].account,
+    password: tkData.value[index].password,
+    index: index
+  })
+  if (index == 0) {
+    isLogin.value[1] = true;
+    statusTimer = setInterval(() => {
+      getloginStatus();
+    }, 2000)
+  } else if (index == 1) {
+    isLogin.value[0] = true;
+    statusTimerCopy = setInterval(() => {
+      getloginStatusCopy();
+    }, 2000)
+  }
 
 
 }
 
 const openTK = () => {
-    // isTk.value = true;
-    // console.log(isTk.value)
-    loginTikTok();
+  // isTk.value = true;
+  // console.log(isTk.value)
+  loginTikTok();
 
 }
 
 function getloginStatus() {
-    backStageloginStatus().then((res) => {
-        const data = JSON.parse(res);
-        tkData.value[data.index].code = data.code
+  backStageloginStatus().then((res) => {
+    const data = JSON.parse(res);
+    tkData.value[data.index].code = data.code
 
-        if (data.code == 1) {
-            clearInterval(statusTimer);
-            statusTimer = null;
-            submitting.value = false
-            isLogin.value[1] = false;
-        }
-    })
+    if (data.code == 1) {
+      clearInterval(statusTimer);
+      statusTimer = null;
+      submitting.value = false
+      isLogin.value[1] = false;
+    }
+  })
 }
 function getloginStatusCopy() {
-    backStageloginStatusCopy().then((res) => {
-        const data = JSON.parse(res);
-        tkData.value[data.index].code = data.code
+  backStageloginStatusCopy().then((res) => {
+    const data = JSON.parse(res);
+    tkData.value[data.index].code = data.code
 
-        if (data.code == 1) {
-            clearInterval(statusTimer);
-            statusTimer = null;
-            submitting.value = false
-            isLogin.value[0] = false;
-        }
-    })
+    if (data.code == 1) {
+      clearInterval(statusTimer);
+      statusTimer = null;
+      submitting.value = false
+      isLogin.value[0] = false;
+    }
+  })
 }
 
 
 function tkaccountuse(id, index) {
-    let num = 0;
-    console.log(id, index, "查询次数")
-    if (!id || id == '') {
-        return
-    }
-    tkaccountuseinfo(id).then((res) => {
-        console.log("查询返回", res)
-        num = res
-        tkData.value[index].num = num
-        setTkUser(tkData.value)
-        console.log('账号使用次数', tkData.value[index].num)
-        // ElMessage.error('账号使用次数', tkData.value[index].num);
-    }).catch((err) => {
-        console.log('账号使用次数', err)
-    })
+  let num = 0;
+  console.log(id, index, "查询次数")
+  if (!id || id == '') {
+    return
+  }
+  tkaccountuseinfo(id).then((res) => {
+    console.log("查询返回", res)
+    num = res
+    tkData.value[index].num = num
+    setTkUser(tkData.value)
+    console.log('账号使用次数', tkData.value[index].num)
+    // ElMessage.error('账号使用次数', tkData.value[index].num);
+  }).catch((err) => {
+    console.log('账号使用次数', err)
+  })
 
 }
 
@@ -564,389 +649,141 @@ let timerCrawl = null;
 const startTimedata = ref(null);
 //清空时间   并开始运行
 const startTimer = () => {
-    resetTimer();
-    if (isRunning.value) return;
-    isRunning.value = true;
-    startTimedata.value = Date.now();
-    timerCrawl = setInterval(() => {
-        totalSeconds.value = Math.floor((Date.now() - startTimedata.value) / 1000);
-    }, 1000);
+  resetTimer();
+  if (isRunning.value) return;
+  isRunning.value = true;
+  startTimedata.value = Date.now();
+  timerCrawl = setInterval(() => {
+    totalSeconds.value = Math.floor((Date.now() - startTimedata.value) / 1000);
+  }, 1000);
 };
 
 //结束运行 暂停
 const pauseTimer = () => {
-    isRunning.value = false;
-    clearInterval(timerCrawl);
+  isRunning.value = false;
+  clearInterval(timerCrawl);
 };
 //清空时间
 const resetTimer = () => {
-    isRunning.value = false;
-    clearInterval(timerCrawl);
-    totalSeconds.value = 0;
+  isRunning.value = false;
+  clearInterval(timerCrawl);
+  totalSeconds.value = 0;
 };
 // 格式化时间为 HH:MM:SS
 const formattedTime = computed(() => {
-    const hours = Math.floor(totalSeconds.value / 3600);
-    const minutes = Math.floor((totalSeconds.value % 3600) / 60);
-    const seconds = totalSeconds.value % 60;
+  const hours = Math.floor(totalSeconds.value / 3600);
+  const minutes = Math.floor((totalSeconds.value % 3600) / 60);
+  const seconds = totalSeconds.value % 60;
 
-    return [
-        hours.toString().padStart(2, '0'),
-        minutes.toString().padStart(2, '0'),
-        seconds.toString().padStart(2, '0')
-    ].join(':');
+  return [
+    hours.toString().padStart(2, '0'),
+    minutes.toString().padStart(2, '0'),
+    seconds.toString().padStart(2, '0')
+  ].join(':');
 });
 
 
 function handleInputHour(value) {
-    console.log(value)
-    // 替换非数字字符为空字符串
-    let num = value.replace(/[^\d]/g, '');
-    // 如果值小于等于0，则设置为0
-    if (Number(num) <= 0) {
-        num = 0;
+  console.log(value)
+  // 替换非数字字符为空字符串
+  let num = value.replace(/[^\d]/g, '');
+  // 如果值小于等于0，则设置为0
+  if (Number(num) <= 0) {
+    num = 0;
+  }
+
+  if ((tkData.value[0].code == 1) && (tkData.value[1].code == 1)) {
+    if (Number(num) > maxCount.value[1].hourMax) {
+      num = maxCount.value[1].hourMax;
+    }
+  } else if ((tkData.value[0].code == 1) || (tkData.value[1].code == 1)) {
+    // 如果值大于最大值，则设置为最大值
+    if (Number(num) > maxCount.value[0].hourMax) {
+      num = maxCount.value[0].hourMax;
     }
 
-    if ((tkData.value[0].code == 1) && (tkData.value[1].code == 1)) {
-        if (Number(num) > maxCount.value[1].hourMax) {
-            num = maxCount.value[1].hourMax;
-        }
-    } else if ((tkData.value[0].code == 1) || (tkData.value[1].code == 1)) {
-        // 如果值大于最大值，则设置为最大值
-        if (Number(num) > maxCount.value[0].hourMax) {
-            num = maxCount.value[0].hourMax;
-        }
-
-    } else {
-        ElMessage.error('请先登录tk后台');
-        num = 0;
-    }
-    // 更新模型
-    pyData.value.frequency.hour = num;
+  } else {
+    ElMessage.error('请先登录tk后台');
+    num = 0;
+  }
+  // 更新模型
+  pyData.value.frequency.hour = num;
 }
 
 function handleInputDay(value) {
-    console.log(value)
-    // 替换非数字字符为空字符串
-    let num = value.replace(/[^\d]/g, '');
-    // 如果值小于等于0，则设置为0
-    if (Number(num) <= 0) {
-        num = 0;
+  console.log(value)
+  // 替换非数字字符为空字符串
+  let num = value.replace(/[^\d]/g, '');
+  // 如果值小于等于0，则设置为0
+  if (Number(num) <= 0) {
+    num = 0;
+  }
+
+  if ((tkData.value[0].code == 1) && (tkData.value[1].code == 1)) {
+    if (Number(num) > maxCount.value[1].dayMax) {
+      num = maxCount.value[1].dayMax;
     }
-
-    if ((tkData.value[0].code == 1) && (tkData.value[1].code == 1)) {
-        if (Number(num) > maxCount.value[1].dayMax) {
-            num = maxCount.value[1].dayMax;
-        }
-    } else if ((tkData.value[0].code == 1) || (tkData.value[1].code == 1)) {
-        // 如果值大于最大值，则设置为最大值
-        if (Number(num) > maxCount.value[0].dayMax) {
-            num = maxCount.value[0].dayMax;
-        }
-    } else {
-        ElMessage.error('请先登录tk后台');
-        num = 0;
+  } else if ((tkData.value[0].code == 1) || (tkData.value[1].code == 1)) {
+    // 如果值大于最大值，则设置为最大值
+    if (Number(num) > maxCount.value[0].dayMax) {
+      num = maxCount.value[0].dayMax;
     }
+  } else {
+    ElMessage.error('请先登录tk后台');
+    num = 0;
+  }
 
 
-    // 更新模型
-    pyData.value.frequency.day = num;
+  // 更新模型
+  pyData.value.frequency.day = num;
 }
 
 function timestampToTime(timestamp_ms) {
-    const date = new Date(timestamp_ms);
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    const seconds = date.getSeconds().toString().padStart(2, '0');
-    const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
+  const date = new Date(timestamp_ms);
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
 
-    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
 
 let isWifi = ref(false);
 const checkVPN = async () => {
-    try {
-        // 设置超时 5 秒钟
-        const timeout = new Promise((_, reject) =>
-            setTimeout(() => reject(new Error('请求超时')), 10000)  // 10秒超时
-        );
+  try {
+    // 设置超时 5 秒钟
+    const timeout = new Promise((_, reject) =>
+      setTimeout(() => reject(new Error('请求超时')), 10000)  // 10秒超时
+    );
 
-        // 使用 Promise.race 来进行超时控制
-        const response = await Promise.race([
-            fetch('https://www.google.com', { method: 'HEAD', mode: 'no-cors' }),
-            timeout
-        ]);
+    // 使用 Promise.race 来进行超时控制
+    const response = await Promise.race([
+      fetch('https://www.google.com', { method: 'HEAD', mode: 'no-cors' }),
+      timeout
+    ]);
 
-        // 判断 fetch 请求是否成功
-        if (response && response.type === 'opaque') {
-            // ElMessage.success('VPN连接正常！');
-            isWifi.value = false;
-        } else {
-            ElMessage.error('VPN连接失败，无法访问网络。');
-            isWifi.value = true;
-        }
-    } catch (error) {
-        // 捕获超时错误或其他错误
-        ElMessage.error('VPN连接失败，无法访问网络。');
-        isWifi.value = true;
+    // 判断 fetch 请求是否成功
+    if (response && response.type === 'opaque') {
+      // ElMessage.success('VPN连接正常！');
+      isWifi.value = false;
+    } else {
+      ElMessage.error('VPN连接失败，无法访问网络。');
+      isWifi.value = true;
     }
+  } catch (error) {
+    // 捕获超时错误或其他错误
+    ElMessage.error('VPN连接失败，无法访问网络。');
+    isWifi.value = true;
+  }
 };
 </script>
 
-<style scoped lang="less">
-.container {
-    margin: 0 auto;
-}
-
-.workbenches {
-    padding: 45px 29px 22px 27px;
-
-    /* 页面无法选中 */
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-
-
-}
-
-.box-card {
-    // width: 1240px;
-    height: 436px;
-    background: #FFFFFF;
-    box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
-    border-radius: 24px;
-}
-
-.box-card-num1 {
-
-    width: 197px;
-    height: 321px;
-    background: #FFFFFF;
-    box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
-    border-radius: 24px;
-    // padding-top: 60px; 
-    box-sizing: border-box;
-
-    div {
-        height: 20%;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-
-        color: #8D8E8E;
-
-        span {
-            color: #000;
-            padding-left: 10px;
-        }
-    }
-}
-
-.box-card-num {
-    width: 897px;
-    height: 145px;
-    background: #FFFFFF;
-    box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
-    border-radius: 24px;
-    margin-bottom: 30px;
-
-    padding-top: 18px;
-    box-sizing: border-box;
-
-    .todayCount {
-        padding: 15px 21px;
-        font-size: 14px;
-    }
-}
-
-.from-input-item {
-    display: flex;
-
-    .from-input-item-title {
-        color: #000000;
-        font-size: 14px;
-        font-weight: 500;
-        width: 100px;
-        height: 50px;
-    }
-
-    .loginButton {
-        width: 100%;
-        height: 40px;
-        color: #ffffff;
-        font-size: 16px;
-
-    }
-}
-
-
-.loginState {
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    background-color: #b90000;
-    margin-left: 15px;
-}
-
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .card-header-right {
-        margin-right: 70px;
-        display: inline-flex;
-        align-items: center;
-        gap: 12px;
-        /* 各个块之间的间距 */
-        white-space: nowrap;
-
-
-
-        /* 整个右侧区域不换行 */
-        span {
-            color: #0013b9;
-        }
-    }
-
-    .inline-country {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        /* “指定国家” 和 select 的间距 */
-    }
-
-    .country-select {
-        min-width: 120px;
-        /* 防止 select 太窄，文字被挤没 */
-    }
-
-    span {
-        font-family: Source Han Sans SC;
-        font-weight: 400;
-        font-size: 20px;
-        color: #2D2727;
-        line-height: 37px;
-
-        img {
-            margin-right: 16px;
-        }
-    }
-}
-
-.input-group {
-    margin-bottom: 20px;
-    height: 100%;
-
-    .el-input {
-        margin: 22px 0;
-    }
-}
-
-
-
-.open-login {
-    width: 100px;
-    height: 47px;
-    background: @btn-bg-color;
-    border-radius: 10px;
-    border: none;
-}
-
-.reset-button {
-    width: 132px;
-    height: 47px;
-    background: @btn-bg-color;
-    border-radius: 10px;
-
-    font-family: Source Han Sans SC;
-    font-weight: 400;
-    font-size: 18px;
-    color: #FFFFFF;
-
-    margin-left: 50px;
-}
-
-.submit-button {
-    width: 160px;
-    height: 47px;
-    background: @bg-color;
-    border-radius: 10px;
-}
-
-.center-line {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    // justify-content: center;
-}
-
-.center-justify {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
-
-.center-align {
-    display: flex;
-    justify-content: space-between;
-
-}
-
-.center-flex {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-</style>
-
-
-<style scoped lang="less">
-::v-deep(.el-input-group__prepend) {
-    background: @bg-color-light;
-    border-radius: 10px 0px 0px 10px;
-    border: 1px solid #B7CEC5;
-    font-family: Source Han Sans SC;
-    font-weight: 400;
-    font-size: 18px;
-    color: #FFFFFF;
-    line-height: 37px;
-}
-
-::v-deep(.el-input-group__append) {
-    background: @bg-color-light;
-    border-radius: 0px 10px 10px 0px;
-    border: 1px solid #B7CEC5;
-    font-family: Source Han Sans SC;
-    font-weight: 400;
-    font-size: 18px;
-    color: #FFFFFF;
-    line-height: 37px;
-}
-
-::v-deep(.el-input__wrapper) {
-    width: 218px;
-    height: 44px;
-}
-
-.el-input {
-    width: 200px;
-    height: 48px;
-    background: #FFFFFF;
-    border-radius: 10px;
-    border: 1px solid #B7CEC5;
-}
-
-.el-checkbox {
-    display: flex;
-    justify-content: center;
-    /* 水平居中 */
-    align-items: center;
-    /* 垂直居中 */
-    /* 示例高度，根据需要调整 */
-}
+<style scoped>
+/* 
+  Most styles are replaced by Tailwind utility classes.
+  We can keep specific overrides or custom animations here if needed.
+*/
 </style>
\ No newline at end of file
diff --git a/src/views/hosttest.html b/src/views/hosttest.html
new file mode 100644
index 0000000..1f77f38
--- /dev/null
+++ b/src/views/hosttest.html
@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>Yolo Assistant - Modern Light-Tech Dashboard</title>
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap"
+        rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        primary: "#0052CC",
+                        "background-light": "#F4F7FA",
+                        "background-dark": "#0B1120",
+                        "tech-blue": "#E3F2FD",
+                        "tech-green": "#E8F5E9",
+                        "tech-orange": "#FFF3E0",
+                    },
+                    fontFamily: {
+                        display: ["Inter", "system-ui", "sans-serif"],
+                    },
+                    borderRadius: {
+                        DEFAULT: "12px",
+                        'xl': '20px',
+                    },
+                    boxShadow: {
+                        'soft-inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)',
+                        'premium': '0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04)',
+                    }
+                },
+            },
+        };
+    </script>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+
+        .glass-card {
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.4);
+        }
+
+        .sidebar-active {
+            background: white;
+            color: #0052CC !important;
+            border-radius: 40px 0 0 40px;
+            position: relative;
+        }
+
+        .sidebar-active::after {
+            content: '';
+            position: absolute;
+            right: -20px;
+            top: 0;
+            bottom: 0;
+            width: 20px;
+            background: white;
+        }
+
+        .sidebar-active::before {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: -40px;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            box-shadow: 20px 20px 0 0 white;
+            z-index: 1;
+        }
+
+        .sidebar-active-footer::before {
+            content: '';
+            position: absolute;
+            right: 0;
+            bottom: -40px;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            box-shadow: 20px -20px 0 0 white;
+            z-index: 1;
+        }
+
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #CBD5E1;
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #94A3B8;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-900 font-display text-slate-900 antialiased overflow-hidden">
+    <div class="flex h-screen">
+        <aside class="w-64 flex flex-col pt-8 pb-10 bg-slate-900 shrink-0">
+            <div class="px-8 mb-12">
+                <div class="flex items-center gap-2">
+                    <span class="text-3xl font-bold tracking-tighter text-white">yolo</span>
+                    <span
+                        class="px-2 py-0.5 text-xs font-semibold tracking-wider text-slate-900 bg-white rounded uppercase">助手</span>
+                </div>
+            </div>
+            <nav class="flex-1 space-y-2 pl-4">
+                <a class="flex items-center gap-4 px-6 py-4 text-slate-400 hover:text-slate-200 transition-all duration-200 group"
+                    href="#">
+                    <span class="material-icons-round text-2xl">grid_view</span>
+                    <span class="font-medium">工作台</span>
+                </a>
+                <div class="relative">
+                    <a class="sidebar-active flex items-center gap-4 px-6 py-4 text-primary transition-all duration-200"
+                        href="#">
+                        <span class="material-icons-round text-2xl">person_search</span>
+                        <span class="font-medium">主播列表</span>
+                    </a>
+                    <div class="sidebar-active-footer"></div>
+                </div>
+            </nav>
+            <div class="px-8 mt-auto">
+                <button
+                    class="flex items-center gap-3 text-slate-400 hover:text-red-400 transition-colors duration-200 group">
+                    <span class="material-icons-round text-xl group-hover:rotate-12 transition-transform">logout</span>
+                    <span class="font-medium">退出登录</span>
+                </button>
+            </div>
+        </aside>
+        <main class="flex-1 bg-white dark:bg-slate-50 m-2 rounded-3xl shadow-2xl flex flex-col overflow-hidden">
+            <header class="px-8 py-6 border-b border-slate-100 dark:border-slate-200/60 bg-white/50 backdrop-blur-md">
+                <div class="flex flex-wrap items-center gap-4">
+                    <div class="relative flex-1 min-w-[200px]">
+                        <select
+                            class="w-full bg-slate-50 border-none rounded-xl py-3 pl-4 pr-10 text-sm text-slate-600 appearance-none focus:ring-2 focus:ring-primary/20 shadow-soft-inner">
+                            <option>选择国家</option>
+                            <option>哈萨克斯坦</option>
+                            <option>土库曼斯坦</option>
+                            <option>摩尔多瓦</option>
+                        </select>
+                        <span
+                            class="material-icons-round absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
+                    </div>
+                    <div class="relative flex-1 min-w-[200px]">
+                        <span
+                            class="material-icons-round absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">calendar_today</span>
+                        <input
+                            class="w-full bg-slate-50 border-none rounded-xl py-3 pl-10 pr-4 text-sm text-slate-600 focus:ring-2 focus:ring-primary/20 shadow-soft-inner"
+                            placeholder="选择查询时间" type="text" />
+                    </div>
+                    <div class="relative flex-[1.5] min-w-[240px]">
+                        <input
+                            class="w-full bg-slate-50 border-none rounded-xl py-3 px-4 text-sm text-slate-600 focus:ring-2 focus:ring-primary/20 shadow-soft-inner"
+                            placeholder="请输入主播id" type="text" />
+                    </div>
+                    <div class="flex items-center gap-2 ml-auto">
+                        <button
+                            class="bg-primary hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-medium text-sm transition-all shadow-lg shadow-primary/20 flex items-center gap-2">
+                            <span class="material-icons-round text-sm">search</span>
+                            查询
+                        </button>
+                        <button class="bg-slate-100 hover:bg-slate-200 text-slate-600 p-3 rounded-xl transition-all">
+                            <span class="material-icons-round">tune</span>
+                        </button>
+                    </div>
+                </div>
+            </header>
+            <div class="flex-1 overflow-auto p-8">
+                <table class="w-full text-left border-separate border-spacing-0">
+                    <thead>
+                        <tr class="text-slate-400 text-xs font-semibold uppercase tracking-wider">
+                            <th class="pb-4 pl-4 font-normal"><input
+                                    class="rounded border-slate-300 text-primary focus:ring-primary/20"
+                                    type="checkbox" /></th>
+                            <th class="pb-4 font-semibold">主播ID</th>
+                            <th class="pb-4 font-semibold">等级</th>
+                            <th class="pb-4 font-semibold">邀请类型</th>
+                            <th class="pb-4 font-semibold">数据查看</th>
+                            <th class="pb-4 font-semibold">国家</th>
+                            <th class="pb-4 font-semibold">创建时间</th>
+                            <th class="pb-4 font-semibold">主播金币</th>
+                            <th class="pb-4 font-semibold text-right pr-4">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody class="text-sm text-slate-600">
+                        <tr class="group hover:bg-slate-50/80 transition-colors">
+                            <td class="py-5 pl-4 border-b border-slate-50 group-last:border-none">
+                                <input class="rounded border-slate-300 text-primary focus:ring-primary/20"
+                                    type="checkbox" />
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="font-medium text-slate-900 border-b border-transparent group-hover:border-primary/30 transition-all cursor-pointer">kisimisi1990</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">D5</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="px-3 py-1 bg-green-50 text-green-600 text-[10px] font-bold uppercase rounded-full">普票</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex gap-2">
+                                    <button
+                                        class="px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看场次</button>
+                                    <button
+                                        class="px-3 py-1.5 bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看收益</button>
+                                </div>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">哈萨克斯坦</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex flex-col">
+                                    <span>2026-01-13</span>
+                                    <span class="text-[10px] text-slate-400">20:23:52</span>
+                                </div>
+                            </td>
+                            <td
+                                class="py-5 border-b border-slate-50 group-last:border-none font-semibold text-slate-900">
+                                1260</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none text-right pr-4">
+                                <button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
+                                    <span class="material-icons-round text-lg">more_horiz</span>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr class="group hover:bg-slate-50/80 transition-colors">
+                            <td class="py-5 pl-4 border-b border-slate-50 group-last:border-none">
+                                <input class="rounded border-slate-300 text-primary focus:ring-primary/20"
+                                    type="checkbox" />
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="font-medium text-slate-900 border-b border-transparent group-hover:border-primary/30 transition-all cursor-pointer">maga44458</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">D5</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="px-3 py-1 bg-green-50 text-green-600 text-[10px] font-bold uppercase rounded-full">普票</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex gap-2">
+                                    <button
+                                        class="px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看场次</button>
+                                    <button
+                                        class="px-3 py-1.5 bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看收益</button>
+                                </div>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">土库曼斯坦</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex flex-col">
+                                    <span>2026-01-13</span>
+                                    <span class="text-[10px] text-slate-400">20:23:52</span>
+                                </div>
+                            </td>
+                            <td
+                                class="py-5 border-b border-slate-50 group-last:border-none font-semibold text-slate-900">
+                                3006</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none text-right pr-4">
+                                <button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
+                                    <span class="material-icons-round text-lg">more_horiz</span>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr class="group hover:bg-slate-50/80 transition-colors">
+                            <td class="py-5 pl-4 border-b border-slate-50 group-last:border-none">
+                                <input class="rounded border-slate-300 text-primary focus:ring-primary/20"
+                                    type="checkbox" />
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="font-medium text-slate-900 border-b border-transparent group-hover:border-primary/30 transition-all cursor-pointer">erke_700</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">B5</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="px-3 py-1 bg-amber-50 text-amber-600 text-[10px] font-bold uppercase rounded-full">金票</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex gap-2">
+                                    <button
+                                        class="px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看场次</button>
+                                    <button
+                                        class="px-3 py-1.5 bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看收益</button>
+                                </div>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">哈萨克斯坦</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex flex-col">
+                                    <span>2026-01-13</span>
+                                    <span class="text-[10px] text-slate-400">20:23:49</span>
+                                </div>
+                            </td>
+                            <td
+                                class="py-5 border-b border-slate-50 group-last:border-none font-semibold text-slate-900">
+                                5572</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none text-right pr-4">
+                                <button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
+                                    <span class="material-icons-round text-lg">more_horiz</span>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr class="group hover:bg-slate-50/80 transition-colors">
+                            <td class="py-5 pl-4 border-b border-slate-50 group-last:border-none">
+                                <input class="rounded border-slate-300 text-primary focus:ring-primary/20"
+                                    type="checkbox" />
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="font-medium text-slate-900 border-b border-transparent group-hover:border-primary/30 transition-all cursor-pointer">luckystar1458</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">D1</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="px-3 py-1 bg-green-50 text-green-600 text-[10px] font-bold uppercase rounded-full">普票</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex gap-2">
+                                    <button
+                                        class="px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看场次</button>
+                                    <button
+                                        class="px-3 py-1.5 bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看收益</button>
+                                </div>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">摩尔多瓦</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex flex-col">
+                                    <span>2026-01-13</span>
+                                    <span class="text-[10px] text-slate-400">20:23:50</span>
+                                </div>
+                            </td>
+                            <td
+                                class="py-5 border-b border-slate-50 group-last:border-none font-semibold text-slate-900">
+                                15107</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none text-right pr-4">
+                                <button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
+                                    <span class="material-icons-round text-lg">more_horiz</span>
+                                </button>
+                            </td>
+                        </tr>
+                        <tr class="group hover:bg-slate-50/80 transition-colors">
+                            <td class="py-5 pl-4 border-b border-slate-50 group-last:border-none">
+                                <input class="rounded border-slate-300 text-primary focus:ring-primary/20"
+                                    type="checkbox" />
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="font-medium text-slate-900 border-b border-transparent group-hover:border-primary/30 transition-all cursor-pointer">boss.667b1</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">C5</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <span
+                                    class="px-3 py-1 bg-amber-50 text-amber-600 text-[10px] font-bold uppercase rounded-full">金票</span>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex gap-2">
+                                    <button
+                                        class="px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看场次</button>
+                                    <button
+                                        class="px-3 py-1.5 bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white rounded-lg text-xs font-medium transition-all">查看收益</button>
+                                </div>
+                            </td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">哈萨克斯坦</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none">
+                                <div class="flex flex-col">
+                                    <span>2026-01-13</span>
+                                    <span class="text-[10px] text-slate-400">20:23:49</span>
+                                </div>
+                            </td>
+                            <td
+                                class="py-5 border-b border-slate-50 group-last:border-none font-semibold text-slate-900">
+                                4815</td>
+                            <td class="py-5 border-b border-slate-50 group-last:border-none text-right pr-4">
+                                <button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
+                                    <span class="material-icons-round text-lg">more_horiz</span>
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <footer
+                class="px-8 py-6 border-t border-slate-100 dark:border-slate-200/60 bg-white/50 backdrop-blur-md flex flex-wrap items-center justify-between gap-4">
+                <div class="flex items-center gap-4">
+                    <div class="relative">
+                        <select
+                            class="bg-slate-50 border-none rounded-lg py-2 pl-4 pr-10 text-sm text-slate-600 appearance-none focus:ring-2 focus:ring-primary/20 shadow-soft-inner">
+                            <option>10/page</option>
+                            <option>20/page</option>
+                            <option>50/page</option>
+                        </select>
+                        <span
+                            class="material-icons-round absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 text-sm pointer-events-none">expand_more</span>
+                    </div>
+                    <span class="text-xs text-slate-400 font-medium">到期时间: <span class="text-green-600">2036-08-01
+                            00:00:00</span></span>
+                </div>
+                <div class="flex items-center gap-1">
+                    <button class="p-2 text-slate-400 hover:bg-slate-100 rounded-lg transition-colors">
+                        <span class="material-icons-round text-lg">chevron_left</span>
+                    </button>
+                    <button
+                        class="w-8 h-8 rounded-lg bg-slate-900 text-white text-xs font-bold transition-all shadow-md">1</button>
+                    <button
+                        class="w-8 h-8 rounded-lg hover:bg-slate-100 text-slate-600 text-xs font-semibold transition-all">2</button>
+                    <button
+                        class="w-8 h-8 rounded-lg hover:bg-slate-100 text-slate-600 text-xs font-semibold transition-all">3</button>
+                    <button
+                        class="w-8 h-8 rounded-lg hover:bg-slate-100 text-slate-600 text-xs font-semibold transition-all">4</button>
+                    <button
+                        class="w-8 h-8 rounded-lg hover:bg-slate-100 text-slate-600 text-xs font-semibold transition-all">5</button>
+                    <button
+                        class="w-8 h-8 rounded-lg hover:bg-slate-100 text-slate-600 text-xs font-semibold transition-all">6</button>
+                    <span class="px-2 text-slate-400 text-xs font-bold">...</span>
+                    <button
+                        class="w-8 h-8 rounded-lg hover:bg-slate-100 text-slate-600 text-xs font-semibold transition-all">46</button>
+                    <button class="p-2 text-slate-400 hover:bg-slate-100 rounded-lg transition-colors">
+                        <span class="material-icons-round text-lg">chevron_right</span>
+                    </button>
+                </div>
+            </footer>
+        </main>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/views/nav.vue b/src/views/nav.vue
index feaf27b..028d95b 100644
--- a/src/views/nav.vue
+++ b/src/views/nav.vue
@@ -1,89 +1,48 @@
 <template>
-  <div class="app-container">
-    <Sidebar class="noneText" @activeIndex="activeIndexFn" />
-    <div class="content ">
-      <div v-show="activeIndexA == 1">
-        <workbenches />
-      </div>
-      <div v-show="activeIndexA == 2">
-        <hostsList />
-      </div>
-      <div style="position: absolute; bottom: 0; right: 0;">{{ version }}</div>
-
-
+  <div class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 subtle-grid shadow-2xl overflow-hidden mx-auto" style="width: 1600px; height: 900px;">
+    <div class="flex h-full overflow-hidden">
+      <Sidebar class="flex-none h-full" @activeIndex="activeIndexFn" />
+      <main class="flex-1 overflow-y-auto p-4 relative flex flex-col h-full bg-[#f3f5f9]">
+        <div v-show="activeIndexA == 1" class="h-full">
+          <workbenches />
+        </div>
+        <div v-show="activeIndexA == 2" class="h-full">
+          <hostsList />
+        </div>
+        <!-- Decorative blobs -->
+        <!-- <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div> -->
+        <!-- <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-secondary/5 rounded-full blur-3xl pointer-events-none"></div> -->
+        
+        <!-- <div class="absolute bottom-2 right-4 text-xs text-slate-400">{{ version }}</div> -->
+      </main>
     </div>
   </div>
 </template>
 
 <script setup>
 import Sidebar from '../components/Sidebar.vue';
-import { RouterLink, RouterView } from 'vue-router'
 import hostsList from '@/views/hosts/hostsList.vue'
 import workbenches from '@/views/hosts/workbenches.vue'
 import { ref } from 'vue'
-import { getUser } from '@/utils/storage'
-// import { usePythonBridge } from '@/utils/pythonBridge'
-
-
-
-
-
 
 let activeIndexA = ref(1)
+const version = ref('v0.1.0')
 
 function activeIndexFn(data) {
   activeIndexA.value = data
   console.log(data)
 }
-
-
 </script>
 
-<style lang="less">
-body,
-html {
+<style>
+/* Global resets if needed, but Tailwind handles most */
+body {
   margin: 0;
   padding: 0;
-  height: 100%;
-}
-
-.app-container {
+  background-color: #f3f5f9; /* Match background */
   display: flex;
-  width: 1600px;
-  height: 900px;
-  background-color: @bg-color;
-  position: relative;
-
-
-}
-
-.noneText {
-  /* 页面无法选中 */
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.sidebar {
-  width: 200px;
-  background-color: @bg-color;
-  padding: 20px;
-  /* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
-}
-
-.content {
-  margin-left: 280px;
-  width: 1304px;
-  height: 868px;
-  background: #FFFFFF;
-  border-radius: 36px;
-  margin-top: 16px;
-}
-
-.center-justify {
-  display: flex;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
+  min-height: 100vh;
 }
 </style>
\ No newline at end of file