初始化仓库

2025-07-01 21:02:39 +08:00
parent ed0ca8d330
commit c33ae29649
46 changed files with 17385 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,5 @@
+# .env.development
+
+VUE_APP_API_URL="123123123"
+
+# VUE_APP_FEATURE_FLAG=true
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,5 @@
+# .env.production
+
+VUE_APP_API_URL="434534534"
+
+# VUE_APP_FEATURE_FLAG=true
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "tk-page",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^1.8.4",
+    "core-js": "^3.8.3",
+    "echarts": "^5.6.0",
+    "element-plus": "^2.9.7",
+    "pinia": "^3.0.1",
+    "qwebchannel": "^6.2.0",
+    "vue": "^3.2.13",
+    "vue-i18n": "^11.1.7",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "less": "^4.2.2",
+    "less-loader": "^12.2.0",
+    "postcss-preset-env": "^10.1.5",
+    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-px-viewport": "^0.0.4",
+    "postcss-viewport-units": "^0.1.6"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+    plugins: {
+        'postcss-px-to-viewport': {
+            viewportWidth: 1600, // 视窗的宽度，对应设计稿宽度
+            viewportHeight: 900, // 视窗的高度，对应设计稿高度
+            unitPrecision: 3, // 指定 px 转换为视窗单位值的小数位数
+            viewportUnit: 'vw', // 指定需要转换成的视窗单位，vw 或者 vh
+            selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类
+            minPixelValue: 1, // 小于或等于 1 px 不转换为视窗单位
+            mediaQuery: false // 允许在媒体查询中转换 px
+        }
+    }
+};
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>
+    <%= webpackConfig.name %>
+  </title>
+  <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it
+        to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    /* width: 1600px;
+    height: 900px; */
+  }
+</style>
+
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+const { locale } = useI18n()
+locale.value = localStorage.getItem('lang') || 'zh'
+const debounce = (fn, delay) => {
+  let timer
+  return (...args) => {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}
+const _ResizeObserver = window.ResizeObserver
+window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
+  constructor(callback) {
+    callback = debounce(callback, 200)
+    super(callback)
+  }
+}
+</script>
+
+<!-- <style lang="less">
+/*每个页面公共css */
+
+@import "@/static/css/app.less";
+</style> -->
--- a/src/api/account.js
+++ b/src/api/account.js
@@ -0,0 +1,72 @@
+import { getAxios, postAxios, downFile } from '@/utils/axios.js'
+
+
+
+export function getIdByName(name) {
+    return getAxios({ url: `/api/tenant/get-id-by-name?name=${name}` })
+}
+
+export function login(data) {
+    return postAxios({ url: '/api/user/doLogin', data })
+}
+//获取国家
+export function getCountryinfo(data) {
+    return postAxios({ url: '/api/common/country_info', data })
+}
+
+//查询tk账号查询次数
+export function tkaccountuseinfo(accountName) {
+    return getAxios({ url: `/api/common/accountCount?accountName=${accountName}` })
+}
+
+export function tkhostdata(data) {
+    return postAxios({ url: '/api/save_data/hosts_info', data })
+}
+
+
+
+
+
+
+export function apiGetCart() {
+    return getAxios({ url: '/cgi-bin/cart/latest' })
+}
+// export function login(data) {
+//     return postAxios({ url: 'api/account/login', data })
+// }
+export function cheekalive(data) {
+    return postAxios({ url: 'api/account/cheekalive', data })
+}
+
+export function dicts(data) {
+    return postAxios({ url: 'api/param/dicts', data })
+}
+export function tkhostdetail(data) {
+    return postAxios({ url: 'api/tkinfo/tkhostdetail', data })
+}
+//导出表格
+export function exporthosts(data) {
+    return postAxios({ url: 'api/export/hostsinfo', data })
+}
+export function downList(url, data) {
+    return downFile(url, data)
+}
+
+//查询员工
+export function getStaffList(data) {
+    return postAxios({ url: 'api/account/list', data })
+}
+//分配主播
+export function managerhosts(data) {
+    return postAxios({ url: 'api/account/managerhosts', data })
+}
+//编辑主播
+export function upholdinfo(data) {
+    return postAxios({ url: 'api/tkinfo/upholdinfo', data })
+}
+
+//查看名字
+export function accountName(str) {
+    return postAxios({ url: 'api/account/accountName?accounts=' + str })
+}
+
--- a/src/assets/filter.png
+++ b/src/assets/filter.png
--- a/src/assets/list.png
+++ b/src/assets/list.png
--- a/src/assets/listAction.png
+++ b/src/assets/listAction.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo1.png
+++ b/src/assets/logo1.png
--- a/src/assets/logoBg.png
+++ b/src/assets/logoBg.png
--- a/src/assets/logoBg1.png
+++ b/src/assets/logoBg1.png
--- a/src/assets/logotext.png
+++ b/src/assets/logotext.png
--- a/src/assets/logotext1.png
+++ b/src/assets/logotext1.png
--- a/src/assets/navAction.png
+++ b/src/assets/navAction.png
--- a/src/assets/password.png
+++ b/src/assets/password.png
--- a/src/assets/username.png
+++ b/src/assets/username.png
--- a/src/assets/work.png
+++ b/src/assets/work.png
--- a/src/assets/workAction.png
+++ b/src/assets/workAction.png
--- a/src/assets/worklogo.png
+++ b/src/assets/worklogo.png
--- a/src/components/EChartsComponent.vue
+++ b/src/components/EChartsComponent.vue
@@ -0,0 +1,160 @@
+<template>
+    <div ref="chart" style="width: 500px; height: 300px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
+
+export default {
+    name: 'EChartsComponent',
+    props: {
+        title: {
+            type: String,
+            required: true
+        },
+        id: {
+            type: String,
+            required: true
+        },
+        dataType: {
+            type: String,
+            required: true
+        },
+        time: {
+            type: String,
+            required: true
+        }
+
+    },
+    data() {
+        return {
+            seriesData: [],
+            num: 0,
+            inputTime: '',
+        }
+    },
+    mounted() {
+
+        this.inputTime = this.time
+        this.getTkhostdetail();
+        console.log(this.time)
+
+        console.log(this.getPrevious7Days(this.inputTime))
+
+    },
+    methods: {
+        initChart() {
+            if (!this.$refs.chart) {
+                console.error('DOM element not found');
+                return;
+            }
+            const myChart = echarts.init(this.$refs.chart);
+            const option = {
+                title: {
+                    text: this.title
+                },
+                tooltip: {},
+                legend: {
+                    data: [this.title]
+                },
+                xAxis: {
+                    data: [this.getPrevious7Days(this.inputTime)[0].slice(4), this.getPrevious7Days(this.inputTime)[1].slice(4), this.getPrevious7Days(this.inputTime)[2].slice(4), this.getPrevious7Days(this.inputTime)[3].slice(4), this.getPrevious7Days(this.inputTime)[4].slice(4), this.getPrevious7Days(this.inputTime)[5].slice(4), this.getPrevious7Days(this.inputTime)[6].slice(4)]
+                },
+                yAxis: {},
+                series: [
+                    {
+                        name: this.title,
+                        type: 'line',
+                        data: [this.seriesData[0], this.seriesData[1], this.seriesData[2], this.seriesData[3], this.seriesData[4], this.seriesData[5], this.seriesData[6]],
+                        smooth: true
+
+                    }
+                ]
+            };
+            myChart.setOption(option);
+            console.log(this.dataTime)
+
+        },
+        getTkhostdetail() {
+            tkhostdetail({
+                hostId: this.id,
+                dataType: this.dataType,
+                searchTimeStart: this.getPrevious7Days(this.inputTime)[0],
+                searchTimeEnd: this.getPrevious7Days(this.inputTime)[6]
+            }).then(res => {
+                // console.log("返回数据", res[0][this.getPrevious7Days(this.inputTime)[2]])
+                //echarts 数据初始化
+                this.seriesData = [
+                    res[0][this.getPrevious7Days(this.inputTime)[0]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[0]][this.dataType]),
+                    res[0][this.getPrevious7Days(this.inputTime)[1]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[1]][this.dataType]),
+                    res[0][this.getPrevious7Days(this.inputTime)[2]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[2]][this.dataType]),
+                    res[0][this.getPrevious7Days(this.inputTime)[3]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[3]][this.dataType]),
+                    res[0][this.getPrevious7Days(this.inputTime)[4]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[4]][this.dataType]),
+                    res[0][this.getPrevious7Days(this.inputTime)[5]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[5]][this.dataType]),
+                    res[0][this.getPrevious7Days(this.inputTime)[6]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[6]][this.dataType]),
+                ]
+
+                this.initChart();
+                this.num++
+                console.log("返回数据", this.seriesData)
+                console.log("返回数据", this.num)
+
+
+            })
+        },
+        // getCurrentDate() {
+        //     const dates = [];
+        //     const today = new Date();
+
+        //     for (let i = 6; i >= 0; i--) {
+        //         const date = new Date(today);
+        //         date.setDate(today.getDate() - i);
+
+        //         const year = date.getFullYear();
+        //         const month = String(date.getMonth() + 1).padStart(2, '0');
+        //         const day = String(date.getDate()).padStart(2, '0');
+
+        //         dates.push(`${year}${month}${day}`);
+        //     }
+
+        //     return dates;
+        // },
+        getPrevious7Days(dateStr) {
+            // 验证输入格式是否正确
+            if (!/^\d{8}$/.test(dateStr)) {
+                console.error('输入的格式不是YYYYMMDD.');
+                return [];
+            }
+
+            // 解析输入的日期字符串
+            const year = parseInt(dateStr.substring(0, 4));
+            const month = parseInt(dateStr.substring(4, 6)) - 1; // 月份从 0 开始
+            const day = parseInt(dateStr.substring(6, 8));
+
+            // 创建日期对象
+            const date = new Date(year, month, day);
+
+            // 存储结果的数组
+            const result = [];
+
+            // 计算前 7 天的日期
+            for (let i = 0; i <= 6; i++) {
+                const currentDate = new Date(date);
+                currentDate.setDate(date.getDate() - i); // 减去 i 天
+
+                // 格式化为 YYYYMMDD
+                const formattedDate = `${currentDate.getFullYear()}${(currentDate.getMonth() + 1).toString().padStart(2, '0')}${currentDate.getDate().toString().padStart(2, '0')}`;
+                result.push(formattedDate);
+            }
+
+            // 按时间顺序排序（从最早到最晚）
+            result.sort((a, b) => a.localeCompare(b));
+
+            return result;
+        }
+
+
+    }
+};
+</script>
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="sidebar">
+    <div class="logo">
+      <!-- <img style="margin-right: 10px;" src="@/assets/logo.png"> -->
+      <img src="@/assets/logotext.png">
+    </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>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } 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>
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -0,0 +1,16 @@
+import { createI18n } from 'vue-i18n'
+import en from '@/locales/en'
+import zh from '@/locales/zh'
+
+const messages = {
+    en,
+    zh
+}
+
+const i18n = createI18n({
+    locale: 'zh', // 默认语言
+    fallbackLocale: 'en',
+    messages
+})
+
+export default i18n
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -0,0 +1,78 @@
+export default {
+    login: {
+        title: 'Account login',
+        version: 'VERSION',
+        login: 'Login',
+        tenantName: 'Tenant Name',
+        account: 'account',
+        password: 'password',
+        Language: 'Language',
+        network: 'NetWork',
+    },
+    menu: {
+        workbenches: 'Work Benches',
+        hostList: 'Streamer List',
+        logout: 'Logout',
+    },
+    workbenches: {
+        openTK: 'OpenTK',
+        totalnumber: 'Total Number',
+        createHost: 'Create Streamer',
+        query: 'Can query',
+        invite: 'Can invited',
+        runTime: 'Run Time',
+        guildAccount: 'Guild account',
+        guildPass: 'Guild password',
+        guildAccountPlace: 'Please enter your login account',
+        guildPassPlace: 'Please enter your login password',
+        queriedNum: 'Today queried times',
+        loginBackend: 'Login backend',
+        workbenches: 'Work Benches',
+    },
+    workbenchesSetup: {
+        workbenches: 'Work Benches',
+        network: 'Current Network',
+        setCoinsNum: 'Set Coins Number',
+        setFansNum: 'Set Fans Number',
+        setQuery: 'Set Query Frequency',
+        minCoinsNum: 'Min Coins Number',
+        maxCoinsNum: 'Max Coins Number',
+        minFansNum: 'Min Fans Number',
+        maxFansNum: 'Max Fans Number',
+        hour: 'times/hour',
+        hour24: 'times/24hour',
+        start: 'Start Obtaining Data',
+        stop: 'Stop',
+    },
+    hostList: {
+        placeCountry: 'Select country',
+        placeSeletTime: 'Select query time',
+        placeHostId: 'Please enter the anchor ID',
+        selectAll: 'All',
+        query: 'Query',
+        export: 'Export Excel data',
+        hostId: 'Streamer ID',
+        grade: 'Grade',
+        country: 'Country',
+        creationTime: 'Creation Time',
+        anchorcoins: 'Anchor Coins',
+        yesterdayGoldCoins: 'Yesterday Gold Coins',
+        fansNum: 'Number Fans',
+        followersNum: 'Number Followers',
+        onlineFans: 'Online Fans',
+        anchorType: 'Anchor Type',
+        min: 'min',
+        max: 'max',
+        placeMin: 'Please enter the minimum value',
+        placeMax: 'Please enter the maximum value',
+        sort: 'sort',
+        sortType: 'sort Type',
+        ascending: 'ascending',
+        descending: 'descending',
+        reset: 'reset',
+        sure: 'sure',
+        invitationType: 'invitationType',
+        invitationType1: 'Regular',
+        invitationType2: 'Golden',
+    }
+}
--- a/src/locales/zh.js
+++ b/src/locales/zh.js
@@ -0,0 +1,77 @@
+export default {
+    login: {
+        title: '账号登陆',
+        version: '版本号',
+        login: '登录',
+        tenantName: '租户名称',
+        account: '账户',
+        password: '密码',
+        Language: '语言设置',
+        network: '网络设置',
+    },
+    menu: {
+        workbenches: '工作台',
+        hostList: '主播列表',
+        logout: '退出登录',
+    },
+    workbenches: {
+        openTK: '开启TK',
+        totalnumber: '总数量',
+        createHost: '新建主播',
+        query: '查询',
+        invite: '邀请',
+        runTime: '运行时间',
+        guildAccount: '公会账号',
+        guildPass: '公会密码',
+        guildAccountPlace: '请输入登录账号',
+        guildPassPlace: '请输入登录密码',
+        queriedNum: '今日已查询次数',
+        loginBackend: '登录后台',
+    },
+    workbenchesSetup: {
+        workbenches: '工作台',
+        network: '当前网络',
+        setCoinsNum: '设置金币数量',
+        setFansNum: '设置粉丝数量',
+        setQuery: '后台查询频率',
+        minCoinsNum: '最小金币数量',
+        maxCoinsNum: '最大金币数量',
+        minFansNum: '最小粉丝数量',
+        maxFansNum: '最大粉丝数量',
+        hour: '次/小时',
+        hour24: '次/24小时',
+        start: '开始获取数据',
+        stop: '停止',
+    },
+    hostList: {
+        placeCountry: '选择国家',
+        placeSeletTime: '选择查询时间',
+        placeHostId: '请输入主播id',
+        selectAll: '全部',
+        query: '查询',
+        export: '导出Excel数据',
+        hostId: '主播id',
+        grade: '等级',
+        country: '国家',
+        creationTime: '创建时间',
+        anchorcoins: '主播金币',
+        yesterdayGoldCoins: '昨日金币',
+        fansNum: '粉丝数',
+        followersNum: '关注数',
+        onlineFans: '在线粉丝',
+        anchorType: '主播类型',
+        min: '最小值',
+        max: '最大值',
+        placeMin: '请输入最小值',
+        placeMax: '请输入最大值',
+        sort: '排序',
+        sortType: '排序方式',
+        ascending: '升序',
+        descending: '降序',
+        reset: '重置',
+        sure: '确定',
+        invitationType: '邀请类型',
+        invitationType1: '普票',
+        invitationType2: '金票',
+    }
+}
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,24 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import { createPinia } from 'pinia';
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 引入中文语言包
+import i18n from './i18n'
+
+// createApp(App).use(store).use(router).mount('#app')
+
+
+const app = createApp(App);
+// app.use(ElementPlus, {
+//     locale: zhCn, // 配置中文
+// });
+app.use(i18n) // 注册 i18n
+app.use(ElementPlus)      // 注册 ElementPlus
+app.use(createPinia()); // 注册 Pinia
+app.use(store); // 注册 store
+app.use(router); // 注册 router
+app.mount('#app');
+
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,34 @@
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+
+  {
+    path: '/nav',
+    name: 'nav',
+    // redirect: '/nav/hostsList', // 默认跳转
+    component: () => import(/* webpackChunkName: "hostsList" */ '../views/nav.vue'),
+    children: [
+      {
+        path: 'hostsList',
+        name: 'hostsList',
+        component: () => import(/* webpackChunkName: "hostsList" */ '../views/hosts/hostsList.vue')
+      },
+      {
+        path: 'workBenches',
+        name: 'workBenches',
+        component: () => import(/* webpackChunkName: "hostsList" */ '../views/hosts/workbenches.vue')
+      },]
+  }
+]
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router
--- a/src/static/css/app.less
+++ b/src/static/css/app.less
@@ -0,0 +1,4 @@
+@bg-color: #022b4e; // 主色
+@bg-color-light: #022b4eaf; // 浅主色
+@bg-color-light-light: #022b4e1c; // 浅浅主色
+@btn-bg-color: #045dac; // 黄色按钮主色
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,14 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/stores/notice.js
+++ b/src/stores/notice.js
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const noticeStore = defineStore('noticeNum', {
+	state: () => {
+		return { data: { num: 0 } };
+	},
+	actions: {
+		increment() {
+			this.data.num++;
+		},
+	},
+});
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -0,0 +1,187 @@
+/**
+ * axios请求封装
+ * https://rudon.blog.csdn.net/
+ */
+import axios from 'axios'
+import { getToken, getUser } from '@/utils/storage'
+import router from '@/router'
+
+import { ElMessage } from 'element-plus';
+import { usePythonBridge, } from '@/utils/pythonBridge'
+
+const { stopScript } = usePythonBridge();
+
+
+// 请求地址前缀
+let baseURL = ''
+if (process.env.NODE_ENV === 'development') {
+    // 生产环境
+    // baseURL = "https://api.tkpage.yolozs.com"
+    baseURL = "http://192.168.1.174:8101"
+    // baseURL = "http://47.79.98.113:8101"
+} else {
+    // 测试环境
+    // baseURL = "http://120.26.251.180:8085/"
+    // 开发环境
+    baseURL = "http://47.79.98.113:8101"
+    // baseURL = "http://api.tkpage.vvtiktok.cn"
+}
+
+// 请求拦截器
+axios.interceptors.request.use((config) => {
+    console.log("config", config)
+    const url = sliceUrl(config.url)
+    console.log("url", url)
+    if (!(config.url == 'doLogin' || config.url == 'get-id-by-name')) {
+        config.headers['vvtoken'] = getToken();
+    }
+
+    // 请求超时时间 - 毫秒
+    config.timeout = 60000
+    config.baseURL = baseURL
+    // 自定义Content-type
+    config.headers['Content-type'] = 'application/json'
+    return config;
+}, (error) => {
+    return Promise.reject(error)
+})
+
+// 响应拦截器
+axios.interceptors.response.use((response) => {
+    console.log("response", response.data)
+    if (response.data.code == 0) {
+        console.log("response", response.data.data)
+        return response.data.data
+    } else if (response.data.code == 40400) {
+        stopScript();
+        router.push('/')
+        ElMessage.error(response.data.code + '' + response.data.message);
+    } else {
+        ElMessage.error(response.data.code + '' + response.data.message);
+    }
+
+}, (error) => {
+    // 可添加请求失败后的处理逻辑
+    return Promise.reject(error)
+})
+
+
+
+// axios的get请求
+export function getAxios({ url, params }) {
+    // 使用axios发送GET请求
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+            params
+            // 请求成功，将返回的数据传递给resolve函数
+        }).then(res => {
+            resolve(res)
+            // 请求失败，将错误信息传递给reject函数
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
+
+// axios的post请求
+export function postAxios({ url, data }) {
+    return new Promise((resolve, reject) => {
+        axios.post(
+            url,
+            data,
+            {
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                }
+            }
+        ).then(res => {
+            resolve(res)
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
+export const downFile = async (urlstr, data) => {
+
+    // 发送请求，获取文件流
+    const response = await axios.post(urlstr, data, { responseType: 'blob' });
+
+    // 获取文件名（如果后端设置了 Content-Disposition）
+    const contentDisposition = response.headers['content-disposition'];
+    let fileName = 'default-file-name'; // 默认文件名
+    console.log(contentDisposition)
+    console.log(response)
+    if (contentDisposition) {
+        // 从响应头中提取文件名
+        const fileNameMatch = contentDisposition.match(/filename="(.+)"/);
+        if (fileNameMatch && fileNameMatch.length > 1) {
+            fileName = fileNameMatch[1];
+        }
+    }
+
+    // 创建一个临时的下载链接
+    const blob = new Blob([response.data], { type: response.headers['content-type'] });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName; // 设置下载的文件名
+    a.click();
+
+    // 释放 URL 对象
+    window.URL.revokeObjectURL(url);
+
+
+}
+//请求前验证
+// function cheekalive() {
+//     axios.post('api/account/cheekalive', {
+//         userId: getUser().userId,
+//         currcode: getToken(),
+//     },
+//         {
+//             headers: {
+//                 'Content-Type': 'application/x-www-form-urlencoded'
+//             }
+//         }
+//     ).then(res => {
+//         console.log(res.data)
+//         if (res.data) {
+
+//         } else {
+//             stopScript();
+//             alert("账号在其他地方登录！")
+//             window.location.href = '/';
+//         }
+
+
+//     })
+// }
+//节流函数
+function throttle(func, limit) {
+    let inThrottle;
+    return function () {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            func.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    }
+}
+
+function sliceUrl(url) {
+    const lastSlash = url.lastIndexOf('/');
+    const questionMark = url.indexOf('?');
+    if (questionMark == -1) {
+        const result = url.slice(lastSlash + 1, url.length);
+        return result;
+    } else {
+        const result = url.slice(lastSlash + 1, questionMark);
+        return result;
+    }
+
+}
+
+
+export default axios
--- a/src/utils/countryUtil.js
+++ b/src/utils/countryUtil.js
@@ -0,0 +1,261 @@
+// country-utils.js
+export const CountryCode = {
+    AD: "安道尔",
+    AE: "阿拉伯联合酋长国",
+    AF: "阿富汗",
+    AG: "安提瓜和巴布达",
+    AI: "安圭拉",
+    AL: "阿尔巴尼亚",
+    AM: "亚美尼亚",
+    AO: "安哥拉",
+    AQ: "南极洲",
+    AR: "阿根廷",
+    AS: "美属萨摩亚",
+    AT: "奥地利",
+    AU: "澳大利亚",
+    AU1: "澳大利亚",
+    AW: "阿鲁巴",
+    AX: "奥兰群岛",
+    AZ: "阿塞拜疆",
+    BA: "波斯尼亚和黑塞哥维那",
+    BB: "巴巴多斯",
+    BD: "孟加拉国",
+    BE: "比利时",
+    BF: "布基纳法索",
+    BG: "保加利亚",
+    BH: "巴林",
+    BI: "布隆迪",
+    BJ: "贝宁",
+    BL: "圣巴泰勒米",
+    BM: "百慕大群岛",
+    BN: "文莱达鲁萨兰国",
+    BO: "玻利维亚",
+    BQ: "博奈尔、圣尤斯特歇斯和萨巴",
+    BR: "巴西",
+    BS: "巴哈马",
+    BT: "不丹",
+    BV: "布韦岛",
+    BW: "博茨瓦纳",
+    BY: "白俄罗斯",
+    BZ: "伯利兹",
+    CA: "加拿大",
+    CA1: "加拿大",
+    CC: "科科斯（基林）群岛",
+    CD: "刚果民主共和国",
+    CF: "中非共和国",
+    CG: "刚果共和国",
+    CH: "瑞士",
+    CI: "科特迪瓦",
+    CK: "库克群岛",
+    CL: "智利",
+    CM: "喀麦隆",
+    CN: "中国",
+    CO: "哥伦比亚",
+    CR: "哥斯达黎加",
+    CU: "古巴",
+    CV: "佛得角",
+    CW: "库拉索",
+    CX: "圣诞岛",
+    CY: "塞浦路斯",
+    CZ: "捷克共和国",
+    DE: "德国",
+    DG: "迪戈加西亚岛",
+    DJ: "吉布提",
+    DK: "丹麦",
+    DM: "多米尼克",
+    DO: "多米尼加共和国",
+    DZ: "阿尔及利亚",
+    EC: "厄瓜多尔",
+    EE: "爱沙尼亚",
+    EG: "埃及",
+    EH: "西撒哈拉",
+    ER: "厄立特里亚",
+    ES: "西班牙",
+    ET: "埃塞俄比亚",
+    FI: "芬兰",
+    FJ: "斐济",
+    FK: "福克兰群岛",
+    FM: "密克罗尼西亚",
+    FO: "法罗群岛",
+    FR: "法国",
+    GA: "加蓬",
+    GB: "英国",
+    GD: "格林纳达",
+    GE: "格鲁吉亚",
+    GF: "法属圭亚那",
+    GG: "根西岛",
+    GH: "加纳",
+    GI: "直布罗陀",
+    GL: "格陵兰",
+    GM: "冈比亚",
+    GN: "几内亚",
+    GP: "瓜德罗普",
+    GQ: "赤道几内亚",
+    GR: "希腊",
+    GS: "南乔治亚和南桑德威奇群岛",
+    GT: "危地马拉",
+    GU: "关岛",
+    GW: "几内亚比绍",
+    GY: "圭亚那",
+    HK: "中国香港特别行政区",
+    HM: "赫德岛和麦克唐纳群岛",
+    HN: "洪都拉斯",
+    HR: "克罗地亚",
+    HT: "海地",
+    HU: "匈牙利",
+    ID: "印度尼西亚",
+    IE: "爱尔兰",
+    IL: "以色列",
+    IM: "马恩岛",
+    IN: "印度",
+    IO: "英属印度洋领地",
+    IQ: "伊拉克",
+    IR: "伊朗",
+    IS: "冰岛",
+    IT: "意大利",
+    JE: "泽西岛",
+    JM: "牙买加",
+    JO: "约旦",
+    JP: "日本",
+    JP1: "日本",
+    KE: "肯尼亚",
+    KG: "吉尔吉斯斯坦",
+    KH: "柬埔寨",
+    KI: "基里巴斯",
+    KM: "科摩罗",
+    KN: "圣基茨和尼维斯",
+    KP: "朝鲜",
+    KR: "韩国",
+    KR1: "韩国",
+    KR1_UXWAUDIT: "韩国",
+    KW: "科威特",
+    KY: "开曼群岛",
+    KZ: "哈萨克斯坦",
+    LA: "老挝",
+    LB: "黎巴嫩",
+    LC: "圣卢西亚",
+    LI: "列支敦士登",
+    LK: "斯里兰卡",
+    LR: "利比里亚",
+    LS: "莱索托",
+    LT: "立陶宛",
+    LU: "卢森堡",
+    LV: "拉脱维亚",
+    LY: "利比亚",
+    MA: "摩洛哥",
+    MC: "摩纳哥",
+    MD: "摩尔多瓦",
+    ME: "黑山",
+    MF: "圣马丁",
+    MG: "马达加斯加",
+    MH: "马绍尔群岛",
+    MK: "北马其顿",
+    ML: "马里",
+    MM: "缅甸",
+    MN: "蒙古",
+    MO: "中国澳门特别行政区",
+    MP: "北马里亚纳群岛",
+    MQ: "马提尼克",
+    MR: "毛里塔尼亚",
+    MS: "蒙特塞拉特",
+    MT: "马耳他",
+    MU: "毛里求斯",
+    MV: "马尔代夫",
+    MW: "马拉维",
+    MX: "墨西哥",
+    MY: "马来西亚",
+    MZ: "莫桑比克",
+    NA: "纳米比亚",
+    NC: "新喀里多尼亚",
+    NE: "尼日尔",
+    NF: "诺福克岛",
+    NG: "尼日利亚",
+    NI: "尼加拉瓜",
+    NL: "荷兰",
+    NO: "挪威",
+    NP: "尼泊尔",
+    NR: "瑙鲁",
+    NU: "纽埃",
+    NZ: "新西兰",
+    OM: "阿曼",
+    PA: "巴拿马",
+    PE: "秘鲁",
+    PF: "法属玻利尼西亚",
+    PG: "巴布亚新几内亚",
+    PH: "菲律宾",
+    PK: "巴基斯坦",
+    PL: "波兰",
+    PM: "圣皮埃尔和密克隆群岛",
+    PN: "皮特凯恩群岛",
+    PR: "波多黎各",
+    PS: "巴勒斯坦",
+    PT: "葡萄牙",
+    PW: "帕劳",
+    PY: "巴拉圭",
+    QA: "卡塔尔",
+    RE: "留尼汪",
+    RO: "罗马尼亚",
+    RS: "塞尔维亚",
+    RU: "俄罗斯",
+    RW: "卢旺达",
+    SA: "沙特阿拉伯",
+    SB: "索罗门群岛",
+    SC: "塞舌尔",
+    SD: "苏丹",
+    SE: "瑞典",
+    SG: "新加坡",
+    SI: "斯洛文尼亚",
+    SJ: "斯瓦尔巴和扬马延",
+    SK: "斯洛伐克",
+    SL: "塞拉利昂",
+    SM: "圣马利诺",
+    SN: "塞内加尔",
+    SO: "索马里",
+    SR: "苏里南",
+    SS: "南苏丹",
+    ST: "圣多美和普林西比",
+    SV: "萨尔瓦多",
+    SX: "荷属圣马丁",
+    SY: "叙利亚",
+    SZ: "斯威士兰",
+    TC: "特克斯和凯科斯群岛",
+    TD: "乍得",
+    TF: "法属南部领地",
+    TG: "多哥",
+    TH: "泰国",
+    TJ: "塔吉克斯坦",
+    TK: "托克劳群岛",
+    TL: "东帝汶",
+    TM: "土库曼斯坦",
+    TN: "突尼斯",
+    TO: "汤加",
+    TR: "土耳其",
+    TT: "特立尼达和多巴哥",
+    TV: "图瓦卢",
+    TW: "台湾",
+    TZ: "坦桑尼亚",
+    UA: "乌克兰",
+    UG: "乌干达",
+    UM: "美国本土外小岛屿",
+    US: "美国",
+    UY: "乌拉圭",
+    UZ: "乌兹别克斯坦",
+    VA: "梵蒂冈",
+    VC: "圣文森特",
+    VE: "委内瑞拉",
+    VG: "英属维尔京群岛",
+    VI: "美属维尔京群岛",
+    VN: "越南",
+    VN1: "越南",
+    VU: "瓦努阿图",
+    WS: "萨摩亚",
+    YE: "也门",
+    YT: "马约特岛",
+    ZA: "南非",
+    ZM: "赞比亚",
+    ZW: "津巴布韦"
+};
+
+export function getCountryName(code) {
+    return CountryCode[code] || null;
+}
--- a/src/utils/pythonBridge.js
+++ b/src/utils/pythonBridge.js
@@ -0,0 +1,134 @@
+// pythonBridge.js
+import { ref, onMounted } from 'vue';
+const bridge = ref(null);
+// 初始化 QWebChannel
+const initBridge = () => {
+  if (/localhost/.test(window.location.href)) return
+  new QWebChannel(qt.webChannelTransport, (channel) => {
+    bridge.value = channel.objects.bridge;
+  });
+};
+export function usePythonBridge() {
+
+
+
+
+  // 调用 Python 方法
+  const fetchDataConfig = (data) => {
+    return new Promise((resolve, reject) => {
+      if (bridge.value) {
+        bridge.value.fetchDataConfig(data, function (result) {
+          resolve(result);
+        });
+      }
+
+
+    });
+  };
+
+  // 查询获取主播的数据
+  const fetchDataCount = () => {
+    return new Promise((resolve, reject) => {
+      if (bridge.value) {
+        bridge.value.fetchDataCount(function (result) {
+          resolve(result);
+        });
+      }
+    });
+  };
+
+  // 打开tk后台
+  const loginTikTok = () => {
+    if (bridge.value) {
+      bridge.value.loginTikTok(function (result) {
+
+      });
+    }
+
+  };
+
+  // 登录tk后台
+  const loginBackStage = (data) => {
+    if (bridge.value) {
+      if (data.index == 0) {
+        bridge.value.loginBackStage(JSON.stringify(data));
+      } else if (data.index == 1) {
+        bridge.value.loginBackStageCopy(JSON.stringify(data));
+      }
+
+    }
+  };
+
+  //跳转到主播页面
+  const givePyAnchorId = (id) => {
+
+    if (bridge.value) {
+      bridge.value.givePyAnchorId(id, function (result) {
+
+      });
+    }
+  };
+
+  //查询登录状态
+  const backStageloginStatus = () => {
+    return new Promise((resolve, reject) => {
+      if (bridge.value) {
+        bridge.value.backStageloginStatus(function (result) {
+          resolve(result);
+        });
+      }
+    });
+
+  };
+  //查询登录状态
+  const backStageloginStatusCopy = () => {
+    return new Promise((resolve, reject) => {
+      if (bridge.value) {
+        bridge.value.backStageloginStatusCopy(function (result) {
+          resolve(result);
+        });
+      }
+    });
+
+  };
+
+  //导出表格
+  const exportToExcel = (data) => {
+    if (bridge.value) {
+      bridge.value.exportToExcel(JSON.stringify(data));
+    }
+
+  };
+  const stopScript = () => {
+    if (bridge.value) {
+      bridge.value.stopScript();
+    }
+
+  };
+
+  //获取版本号
+  const getVersion = () => {
+    return new Promise((resolve, reject) => {
+      if (bridge.value) {
+        bridge.value.currentVersion(function (result) {
+          resolve(result);
+        });
+      }
+    });
+  };
+  // 在组件挂载时初始化桥接
+  onMounted(initBridge);
+
+  return {
+    fetchDataConfig,
+    fetchDataCount,
+    loginBackStage,
+    loginTikTok,
+    givePyAnchorId,
+    backStageloginStatus,
+    backStageloginStatusCopy,
+    exportToExcel,
+    stopScript,
+    getVersion
+  };
+}
--- a/src/utils/storage.js
+++ b/src/utils/storage.js
@@ -0,0 +1,54 @@
+export function setToken(token) {
+	localStorage.setItem('token', token);
+}
+
+export function getToken() {
+	return localStorage.getItem('token');
+}
+
+export function removeToken() {
+	localStorage.removeItem('token');
+}
+
+export function setUser(user) {
+
+	localStorage.setItem('user', JSON.stringify(user));
+}
+
+export function getUser() {
+	return JSON.parse(localStorage.getItem('user'));
+}
+
+export function setNumData(numData) {
+	localStorage.setItem('num', JSON.stringify(numData));
+}
+export function getNumData() {
+	return JSON.parse(localStorage.getItem('num'));
+}
+
+// 导出一个函数，用于设置用户密码
+export function setUserPass(userdata) {
+	localStorage.setItem('userPass', JSON.stringify(userdata));
+}
+// 导出一个函数，用于获取用户密码
+export function getUserPass() {
+	return JSON.parse(localStorage.getItem('userPass'));
+}
+
+// 用于设置tk账户密码
+export function setTkUser(userdata) {
+	localStorage.setItem('tkuser', JSON.stringify(userdata));
+}
+// 用于获取tk账户密码
+export function getTkUser() {
+	return JSON.parse(localStorage.getItem('tkuser'));
+}
+
+// 用于列表筛选条件
+export function setSerch(data) {
+	localStorage.setItem('Serch', JSON.stringify(data));
+}
+// 用于获取列表筛选条件
+export function getSerch() {
+	return JSON.parse(localStorage.getItem('Serch'));
+}
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -0,0 +1,366 @@
+<template>
+	<div class="main">
+		<div class="container">
+			<div class="right">
+				<img src="../assets/logoBg.png" class="background-video" alt="">
+				<!-- 设置 -->
+				<div class="center-align">
+					<div></div>
+					<div class="setup">
+						<div class="setup-item center-justify">
+							<div></div>
+							<el-dropdown>
+								<span class="el-dropdown-link">
+									<span style="font-size:20px; color: #fff;">
+										{{ $t('login.network') }}
+									</span>
+								</span>
+
+							</el-dropdown>
+						</div>
+						<div class="setup-item center-justify">
+							<div></div>
+							<el-dropdown>
+								<span class="el-dropdown-link">
+									<span style="font-size:20px; color: #fff;">
+										{{ $t('login.Language') }}
+									</span>
+									<!-- <el-icon class="el-icon--right">
+											<arrow-down />
+										</el-icon> -->
+								</span>
+								<template #dropdown>
+									<el-dropdown-menu>
+										<el-dropdown-item @click="switchLanguage('zh')">
+											中文
+										</el-dropdown-item>
+										<el-dropdown-item @click="switchLanguage('en')">
+											English
+										</el-dropdown-item>
+									</el-dropdown-menu>
+								</template>
+							</el-dropdown>
+							<!-- <el-radio-group v-model="localeData" size="large">
+								<el-radio-button @click="switchLanguage('zh')" label="中文" />
+								<el-radio-button @click="switchLanguage('en')" label="English" />
+							</el-radio-group> -->
+
+						</div>
+					</div>
+				</div>
+				<div class="center-line" style="margin-top: 40px;">
+					<!-- logo -->
+					<div class="logo">
+						<div class="center-justify" style="height: 80px; width: 300px;">
+							<!-- <img style="margin-right: 20px;height: 100%;" src="@/assets/logo.png"> -->
+							<img style="height: 100%;" src="@/assets/logotext.png">
+						</div>
+					</div>
+
+					<!-- From -->
+					<div class="from">
+						<div class="from-title center-justify">
+							<div>{{ $t('login.title') }}</div>
+						</div>
+
+						<div class="from-input">
+							<el-form label-position="left" label-width="100px" :model="formData">
+								<div class="from-input-item1">
+									<img src="@/assets/username.png" alt="">
+									<el-input style="height: 25px;" v-model="formData.tenantName"
+										:placeholder="$t('login.tenantName')" clearable @keyup.enter="onSubmit" />
+								</div>
+								<div class="from-input-item1">
+									<img src="@/assets/username.png" alt="">
+									<el-input style="height: 25px;" v-model="formData.userId"
+										:placeholder="$t('login.account')" clearable @keyup.enter="onSubmit" />
+								</div>
+								<div class="from-input-item1">
+									<img src="@/assets/password.png" alt="">
+									<el-input style="height: 25px; " v-model="formData.password" type="password"
+										:placeholder="$t('login.password')" show-password @keyup.enter="onSubmit" />
+								</div>
+
+								<div class="from-input-item">
+									<el-button class="loginButton" color="#8f7ee7" type="primary" @click="onSubmit">{{
+										$t('login.login') }}</el-button>
+
+								</div>
+							</el-form>
+						</div>
+					</div>
+				</div>
+				<div class="version center-justify ">{{ $t('login.version') }}：{{ version }}</div>
+
+			</div>
+
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { login, getIdByName } from '@/api/account';
+import { getToken, setToken, setUser, setUserPass, getUserPass } from '@/utils/storage';
+import { ElLoading } from 'element-plus';
+import { usePythonBridge } from '@/utils/pythonBridge'
+import { useI18n } from 'vue-i18n'
+
+
+const { locale } = useI18n()
+let localeData = ref(locale.value == 'zh' ? '中文' : 'English')
+function switchLanguage(lang) {
+	console.log(localeData.value)
+	locale.value = lang
+	localStorage.setItem('lang', lang)
+}
+
+const { getVersion, stopScript } = usePythonBridge();
+let version = ref('0.0.0');
+onMounted(() => {
+
+	stopScript();
+	setTimeout(() => {
+		getVersion().then((res) => {
+			version.value = res;
+		})
+	}, 500);
+
+
+})
+
+
+const router = useRouter();
+
+const formData = ref({
+	tenantName: getUserPass() == null ? '' : getUserPass().tenantName,
+	userId: getUserPass() == null ? '' : getUserPass().userId,
+	password: getUserPass() == null ? '' : getUserPass().password,
+});
+
+
+
+const onSubmit = () => {
+	const loading = ElLoading.service({
+		lock: true,
+		text: 'Loading',
+		background: 'rgba(0, 0, 0, 0.7)',
+	});
+	setUserPass(formData.value);
+	getIdByName(formData.value.tenantName).then((tenantId) => {
+		console.log(tenantId)
+		login({
+			tenantId: Number(tenantId),
+			username: formData.value.userId,
+			password: formData.value.password,
+		}).then((res) => {
+			loading.close();
+			console.log(res)
+			setToken(res.tokenValue);
+			setUser(res);
+			router.push('/nav');
+		}).catch((err) => {
+			loading.close();
+		});
+	})
+
+
+};
+</script>
+
+<style lang="less">
+.main {
+	width: 1600px;
+	height: 900px;
+	overflow: hidden;
+	box-sizing: border-box;
+
+	/* 页面无法选中 */
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	.container {
+		display: flex;
+		box-sizing: border-box;
+		width: 1600px;
+		height: 900px;
+
+		.right {
+			box-sizing: border-box;
+			position: relative;
+			width: 1600px;
+			height: 900px;
+			padding: 20px 40px 20px 50px;
+			border-left: 3px solid #23516e;
+			position: relative;
+			/* 添加 position: relative */
+			overflow: hidden;
+			/* 防止内容溢出 */
+
+			.version {
+				color: #fff;
+				position: absolute;
+				font-size: 20px;
+				bottom: 20px;
+				left: calc(50% - 50px);
+				// box-sizing: border-box;
+				// width: 1600px;
+
+			}
+
+
+			.background-video {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				z-index: -1;
+				/* 确保视频在内容之下 */
+			}
+
+			.setup {
+				display: flex;
+				color: #fff;
+
+				.setup-item {
+					padding: 10px 6px;
+					display: flex;
+
+					&>div:nth-child(1) {
+						width: 20px;
+						height: 20px;
+						border-radius: 50%;
+						background-color: rgb(255, 255, 255);
+						margin-right: 5px;
+					}
+				}
+			}
+
+			.logo {
+				padding: 20px 0;
+			}
+
+			.from {
+				width: 420px;
+				// height: 320px; 
+				color: @bg-color;
+				background-color: #ffffff44;
+				border-radius: 20px;
+				border: 1px solid #fff;
+				padding: 32px;
+				box-sizing: border-box;
+
+				.from-title {
+					font-family: Source Han Sans SC;
+					font-weight: 500;
+					font-size: 24px;
+					color: @bg-color;
+					line-height: 37px;
+
+
+					div {
+						font-size: 20px;
+						font-weight: 600;
+						// border-bottom: 4px solid #1db97d;
+					}
+				}
+
+				.from-input {
+					width: 100%;
+					padding: 15px 0;
+
+					.from-input-item {
+						display: flex;
+						padding: 8px 0;
+
+						.from-input-item-title {
+							color: @bg-color;
+							font-size: 18px;
+							font-weight: 500;
+							width: 80px;
+							height: 50px;
+						}
+
+						.loginButton {
+							width: 359px;
+							height: 50px;
+							background: #FFFFFF;
+							border-radius: 24px;
+							border: 1px solid #FFFFFF;
+
+
+							font-family: Source Han Sans SC;
+							font-weight: 500;
+							font-size: 18px;
+							color: @bg-color;
+							line-height: 37px;
+						}
+					}
+
+					.from-input-item1 {
+						display: flex;
+						width: 359px;
+						height: 50px;
+						background: @bg-color-light-light;
+						border-radius: 24px;
+						border: 1px solid #FFFFFF;
+						padding: 12px 25px 13px 25px;
+						box-sizing: border-box;
+						margin-bottom: 16px;
+					}
+				}
+			}
+		}
+	}
+}
+
+.center-line {
+	display: flex;
+	flex-direction: column;
+	align-items: 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;
+}
+
+.el-input__wrapper {
+	--el-input-focus-border-color: rgba(255, 255, 0, 0);
+	--el-menu-hover-bg-color: rgba(255, 255, 0, 0);
+
+}
+</style>
+
+<style scoped lang="less">
+::v-deep(.el-input__wrapper) {
+	background-color: rgba(255, 0, 0, 0);
+	box-shadow: none;
+
+}
+
+::v-deep(.el-input__inner) {
+	color: #fff;
+
+}
+
+::v-deep(.el-input__inner::placeholder) {
+	color: @bg-color;
+}
+</style>
--- a/src/views/hosts/hostsList.vue
+++ b/src/views/hosts/hostsList.vue
@@ -0,0 +1,595 @@
+<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>
+
+      <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 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" />
+      </div>
+    </div>
+
+
+    <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">
+            {{ field.label }}
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div><label>{{ $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>
+          <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-col :span="4">
+          <!-- <label>选择筛选条件</label> -->
+          <div style="height: 100%;padding-top: 10px;" class="center-justify">
+            {{ $t('hostList.sort') }}
+          </div>
+
+        </el-col>
+        <el-col :span="10">
+          <div><label>{{ $t('hostList.sortType') }}</label></div>
+
+
+          <el-select v-model="sortData.sortType" filterable placeholder="请选择" style="width: 240px">
+            <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>
+
+          <el-select v-model="sortData.sortForm" filterable placeholder="请选择" style="width: 240px">
+            <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" />
+          </el-select>
+        </el-col>
+      </el-row>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="reset">
+            {{ $t('hostList.reset') }}
+          </el-button>
+          <!-- <el-button @click="filterdialogVisible = false">取消</el-button> -->
+          <el-button type="primary" @click="handelClick">
+            {{ $t('hostList.sure') }}
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+
+
+  </div>
+</template>
+
+<script setup>
+// import { getToken, setToken, removeToken } from '@/utils/storage'
+import { tkhostdata, dicts, tkhostdetail, downList, getStaffList, managerhosts, upholdinfo, getCountryinfo, accountName } from '@/api/account';
+import { usePythonBridge, } from '@/utils/pythonBridge'
+import { getUser, setSerch, getSerch } 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'
+
+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 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 sortNameOptions = ref([
+  { label: t('hostList.creationTime'), type: 'createTime' },
+  { label: t('hostList.anchorcoins'), type: 'hostsCoins' },
+  { label: t('hostList.fansNum'), type: 'fans' },
+  { 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 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();//获取主播列表
+})
+
+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`)
+  getlist();
+
+}
+//分页页数
+function handleCurrentChange(val) {
+  console.log(`current page: ${val}`)
+  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,//排序类型
+    "current": page.value,
+    "pageSize": pageSize.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
+        country: item.country,
+        createTime: item.createTime,
+        fans: item.fans,
+        fllowernum: item.fllowernum,
+        hostsCoins: item.hostsCoins,
+        hostsKind: item.hostsKind,
+        onlineFans: item.onlineFans,
+        yesterdayCoins: item.yesterdayCoins,
+        // 保留原有字段（如 belongBy、useable 等）
+        belongBy: item.belongBy,
+        useable: item.useable,
+        invitationType: item.invitationType,
+      }));
+    }
+
+
+  })
+
+}
+function handelClick() {
+  filterdialogVisible.value = false
+}
+function reset() {
+  searchForm.value.fansMin = null
+  searchForm.value.fansMax = null
+  searchForm.value.onlineFansMin = null
+  searchForm.value.onlineFansMax = null
+  searchForm.value.hostsCoinsMin = null
+  searchForm.value.hostsCoinsMax = null
+  searchForm.value.fllowernumMin = null
+  searchForm.value.fllowernumMax = null
+}
+function handleClose(done) {
+  console.log('关闭')
+  // searchForm.value = {
+  //   dataType: '',
+  //   dataStart: '',
+  //   dataEnd: '',
+  // }
+  done()
+}
+
+
+//修改主播维护状态
+// 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;
+
+  /* 页面无法选中 */
+  // -webkit-user-select: none;
+  // -moz-user-select: none;
+  // -ms-user-select: none;
+  // user-select: none;
+
+  .hostTable {
+    width: 100%;
+    padding: 40px 0;
+
+    .hostIdText {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .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">
+::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;
+  height: 48px;
+}
+
+::v-deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: @bg-color;
+}
+</style>
--- a/src/views/hosts/workbenches.vue
+++ b/src/views/hosts/workbenches.vue
@@ -0,0 +1,765 @@
+<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 style="margin-right: 120px;">{{ $t('workbenchesSetup.workbenches') }}:{{
+                            locale == 'zh' ? countryData : countryDataEN }}
+                            <!-- <el-button class="reset-button" @click="reset">重置数据</el-button> -->
+                        </div>
+                    </div>
+                </template>
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <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="8">
+                        <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="8">
+                        <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-row>
+                <div style="margin-top: 20px; text-align: center">
+
+                    <el-button class="submit-button" :disabled="submitting" 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>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { usePythonBridge, } from '@/utils/pythonBridge'
+import { setNumData, getNumData, getUser, setTkUser, getTkUser } from '@/utils/storage'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getCountryName } from '@/utils/countryUtil'
+import { tkaccountuseinfo } from '@/api/account'
+import { useI18n } from 'vue-i18n'
+const { locale } = useI18n()
+//导入python交互方法
+const { fetchDataConfig, fetchDataCount, loginBackStage, loginTikTok, backStageloginStatus, backStageloginStatusCopy } = usePythonBridge();
+
+
+//ip国家
+let countryData = ref('');
+//英文国家
+let countryDataEN = ref('');
+
+//获取主播数量的定时器
+let getHostTimer = ref(null);
+//获取查询次数定时器
+let getNumTimer = ref(null);
+//获取的主播信息
+let hostData = ref({
+    totalCount: 0,
+    validAnchorsCount: 0,
+    canInvitationCount: 0,
+    checkedDataCount: 0,
+});
+//是否开启tk
+// let isTk = ref(true);
+
+//账号是否登陆中
+let isLogin = ref([false, false]);
+//设置状态轮询定时器
+let statusTimer = ref(null);
+let statusTimerCopy = ref(null);
+
+//设置次数最大值
+let maxCount = ref([
+    {
+        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
+    },
+]);
+
+//python需要的数据
+let pyData = ref({
+    gold: { min: 0, max: 0 },
+    fans: { min: 0, max: 0 },
+    frequency: { hour: 0, day: 0 },
+    isStart: true,
+    country: countryData.value,
+    test: '123',
+    test1: { test: 123, test12: 123 },
+    tenantId: getUser().tenantId,
+    userId: getUser().userId,
+});
+
+//按钮提交状态
+let submitting = ref(true);
+
+
+onMounted(() => {
+    //从缓存获取数据
+    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)
+
+    getIpInfo()
+
+
+})
+
+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);
+    } catch (error) {
+        console.error('请求出错:', error);
+        ElMessageBox.prompt('请输入将要获取国家的中文名', '获取国家失败', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            showClose: false,
+            closeOnClickModal: false,
+            showCancelButton: false,
+        })
+            .then(({ value }) => {
+                countryData.value = value
+            })
+        // .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;
+    // }
+
+
+    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;
+    }
+    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,
+                country: countryData.value,
+                tenantId: getUser().tenantId,
+                userId: getUser().userId,
+            })).then((res) => {
+                //开始计时器
+                startTimer();
+                //开启查询次数
+                getHostTimer.value = setInterval(() => {
+                    fetchDataCount().then((res) => {
+                        hostData.value = JSON.parse(res);
+                    })
+                }, 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(() => {
+
+        })
+
+
+
+};
+
+//停止
+const unsubmit = () => {
+    fetchDataConfig(JSON.stringify({
+        gold: pyData.value.gold,
+        fans: pyData.value.fans,
+        frequency: pyData.value.frequency,
+        isStart: false,
+        country: countryData.value,
+        tenantId: getUser().tenantId,
+        userId: getUser().userId,
+    })).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('停止失败')
+    })
+};
+
+//重置
+const reset = () => {
+    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)
+    }
+
+
+}
+
+const openTK = () => {
+    // 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
+
+        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
+
+        if (data.code == 1) {
+            clearInterval(statusTimer);
+            statusTimer = null;
+            submitting.value = false
+            isLogin.value[0] = false;
+        }
+    })
+}
+
+
+function tkaccountuse(id, index) {
+    let num = 0;
+    tkaccountuseinfo(id).then((res) => {
+        if (res) {
+            num = res
+            tkData.value[index].num = num
+            console.log('账号使用次数', tkData.value[index].num)
+        }
+    }).catch((err) => {
+        console.log('账号使用次数', err)
+    })
+
+}
+
+const isRunning = ref(false);
+const totalSeconds = ref(0);
+//定时器
+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);
+};
+
+//结束运行 暂停
+const pauseTimer = () => {
+    isRunning.value = false;
+    clearInterval(timerCrawl);
+};
+//清空时间
+const resetTimer = () => {
+    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;
+
+    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;
+    }
+
+    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;
+}
+
+function handleInputDay(value) {
+    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;
+        }
+    } 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;
+}
+</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;
+
+    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;
+
+    .el-input {
+        margin: 22px 0;
+    }
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: bold;
+    color: #606266;
+}
+
+.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;
+}
+</style>
--- a/src/views/nav.vue
+++ b/src/views/nav.vue
@@ -0,0 +1,89 @@
+<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>
+  </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)
+
+function activeIndexFn(data) {
+  activeIndexA.value = data
+  console.log(data)
+}
+
+
+</script>
+
+<style lang="less">
+body,
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+.app-container {
+  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;
+  align-items: center;
+}
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,27 @@
+const { defineConfig } = require('@vue/cli-service');
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  css: {
+    loaderOptions: {
+      postcss: {
+        postcssOptions: {
+          plugins: [
+            require('postcss-px-to-viewport')({
+              viewportWidth: 1600, // 视窗的宽度，对应设计稿宽度
+              viewportHeight: 900, // 视窗的高度，对应设计稿高度
+              unitPrecision: 3, // 指定 px 转换为视窗单位值的小数位数
+              viewportUnit: 'vw', // 指定需要转换成的视窗单位，vw 或者 vh
+              selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类
+              minPixelValue: 1, // 小于或等于 1 px 不转换为视窗单位
+              mediaQuery: false // 允许在媒体查询中转换 px
+            })
+          ]
+        }
+      },
+      less: {
+        additionalData: `@import "@/static/css/app.less";` // 注入全局变量文件
+      }
+    }
+  }
+});