1

7c51f718 · lei · 95be55e0 · 7c51f718 · 7c51f718 · 7c51f718
Commit 7c51f718 authored Mar 25, 2023 by lei
8 changed files
--- a/.output.zip
+++ b/.output.zip
--- a/composables/useTable.ts
+++ b/composables/useTable.ts
-/*
- * @Author: lei 2897821407@qq.com
- * @Date: 2023-02-20 19:44:53
- * @LastEditors: lei 2897821407@qq.com
- * @LastEditTime: 2023-02-22 18:10:45
- * @FilePath: \dexfilter-web-nuxt3\composables\useTable.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 import {
  DefaultChain,
  filterChainObj,

--- a/composables/useToken.ts
+++ b/composables/useToken.ts
@@ -21,6 +21,14 @@ let filter: filterfield = {
  page: 1,
  page_size: 100,
 };
+export interface RightInfoType {
+  token: string;
+  tb: string;
+  tbname: string;
+  r24h: string;
+  up: string | null;
+  swap: string;
+}
 // 获取当前交易token
 export const useCurToken = () => {
  return useState(tokenName, () => "bar");
@@ -47,13 +55,17 @@ export const useChangeTable = () => {
 // 当前右侧的token和tb等数据
 export const useCurrentRightInfo = () => {
-  return useState("RightInfo", () => ({
+  return useState(
+    "RightInfo",
+    () =>
+      ({
        token: "",
        tb: "",
        r24h: "",
        up: null,
        swap: "",
-  }));
+      } as RightInfoType)
+  );
 };
 // 当前主题

--- a/utils/router/RouterChange.ts
+++ b/utils/router/RouterChange.ts
+interface JumpParams {
+  path: string;
+  tb: string;
+}
+/**
+ * 跳转k线
+ * @param params
+ * @param type
+ */
+export const JumpKLine = (params: JumpParams, type: "open" | "jump") => {
+  const router = useRouter();
+  if (type == "open") {
+    // 打开新的页面
+    const url = router.resolve({
+      path: `/${params.path}/${params.tb}`,
+    });
+    window.open(url.href);
+  }
+};
--- a/views/token/CustomTokenList.vue
+++ b/views/token/CustomTokenList.vue
@@ -42,7 +42,7 @@
                <th class="custom-before-line">
                  <div class="thead-sort-box">
                    <template v-if="item.title == 'Pool'">
-                      {{ $t('TableList.pool') + HeadTokenType }}
+                      {{ $t("TableList.pool") + HeadTokenType }}
                    </template>
                    <template v-else>
                      {{ item.title }}
@@ -77,7 +77,7 @@
              <th class="custom-before-line" ref="tableTrOne">
                <div class="thead-sort-box">
                  <template v-if="item.title == 'Pool'">
-                    {{ $t('TableList.pool') + HeadTokenType }}
+                    {{ $t("TableList.pool") + HeadTokenType }}
                  </template>
                  <template v-else>
                    {{ item.title }}
@@ -169,7 +169,7 @@
          <template v-if="!resultData.list.length">
            <tr>
              <td colspan="12">
-                <div class="custom-no-list">{{ $t('filter.noList') }}</div>
+                <div class="custom-no-list">{{ $t("filter.noList") }}</div>
              </td>
            </tr>
          </template>
@@ -189,23 +189,22 @@
 </template>
 <script lang="ts" setup>
-import { parsePercent, parseCoinAmount, parseNumberToK } from '@/utils/tool';
+import { parseCoinAmount, parseNumberToK } from "@/utils/tool";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
-import CustPagination from './CustPagination.vue';
+import CustPagination from "./CustPagination.vue";
-import request from '@/utils/request';
+import request from "@/utils/request";
-import { filterChainObj, getSwap } from '@/constants/UnifiedManagementChain';
+import { filterChainObj } from "@/constants/UnifiedManagementChain";
-import JumpOther from './JumpOther.vue';
+import JumpOther from "./JumpOther.vue";
-import KLink from '/public/images/svg/table/k_link.svg';
+import KLink from "/public/images/svg/table/k_link.svg";
-import analysisSvg from '/public/images/svg/table/media.svg';
+import analysisSvg from "/public/images/svg/table/media.svg";
-import { webLogo } from '@/constants/logo';
+import { webLogo } from "@/constants/logo";
-import CustomTableSort from './tableSort.vue';
+import CustomTableSort from "./tableSort.vue";
-import { TableSort, TableSortAsc } from '@/utils/tool';
+import { TableSort, TableSortAsc } from "@/utils/tool";
-import CustomRadio from '../CustomComponent/radio.vue';
+import CustomRadio from "../CustomComponent/radio.vue";
-import BscChain from '/public/images/svg/selectChain/bsc.svg';
+import CustomAvatar from "./avatar.vue";
-import SwapSvg from '/public/images/svg/socialInfoWrapper/bscTransaction.svg';
+import TokenAvatar from "./tokenAvatar.vue";
-import CustomAvatar from './avatar.vue';
+import useSwap from "@/hooks/useSwap";
-import TokenAvatar from './tokenAvatar.vue';
+import { RightInfoType } from "@/composables/useToken";
-import useSwap from '@/hooks/useSwap';
 const { ChainObj, getCurSwap, getCurChainImg } = useSwap();
 const route = useRoute();
 const LoadHead = ref(false);
@@ -223,7 +222,7 @@ const GlbFilter = useCurFilter();
 const CurrentTime = useCurrentTimeChange();
 // 吸顶元素
 const affixedHeadRef = ref<HTMLDivElement | null>(null);
-const affixedTableWidth = ref('');
+const affixedTableWidth = ref("");
 // 当前选中的行数
 const CurLineIndex = ref(0);
 // 表格数据轮询
@@ -240,144 +239,173 @@ const colGroupList = reactive<{
 }>({
  list: [],
 });
+// 当前排序字段和类型
+const CurrentSortField = reactive<{
+  sort: "asc" | "desc" | "";
+  field: string;
+}>({
+  sort: "",
+  field: "",
+});
 // 右侧数据
 const RightInfo = useCurrentRightInfo();
 // 吸顶表头左右跟随滑动
 const affixedHead = reactive({
-  left: '',
+  left: "",
-  top: '',
+  top: "",
-  height: '',
+  height: "",
-  width: '',
+  width: "",
 });
 // 当前排序状态
 const SortOptions = reactive<any>({
  up: {
-    field: 'up',
+    field: "up",
-    type: 'all',
+    type: "all",
    status: false,
  },
  pb: {
-    field: 'pb',
+    field: "pb",
-    type: 'all',
+    type: "all",
    status: false,
  },
  vn: {
-    field: 'vn',
+    field: "vn",
-    type: 'all',
+    type: "all",
    status: false,
  },
  txn: {
-    field: 'txn',
+    field: "txn",
-    type: 'all',
+    type: "all",
    status: false,
  },
  r5m: {
-    field: 'r5m',
+    field: "r5m",
-    type: 'all',
+    type: "all",
    status: false,
  },
  r1h: {
-    field: 'r1h',
+    field: "r1h",
-    type: 'all',
+    type: "all",
    status: false,
  },
  r4h: {
-    field: 'r4h',
+    field: "r4h",
-    type: 'all',
+    type: "all",
    status: false,
  },
  r24h: {
-    field: 'r24h',
+    field: "r24h",
-    type: 'all',
+    type: "all",
    status: false,
  },
 });
-const currentBtn = ref('default');
+const currentBtn = ref("default");
 const btns = computed(() => [
  {
-    label: t('filter.pairs'),
+    label: t("filter.pairs"),
-    value: 'default',
+    value: "default",
  },
  {
-    label: t('filter.updated'),
+    label: t("filter.updated"),
-    value: 'new',
+    value: "new",
  },
  {
-    label: t('filter.gainers'),
+    label: t("filter.gainers"),
-    value: 'max-up',
+    value: "max-up",
  },
  {
-    label: t('filter.losers'),
+    label: t("filter.losers"),
-    value: 'max-down',
+    value: "max-down",
  },
  {
-    label: t('filter.r24hVolume'),
+    label: t("filter.r24hVolume"),
-    value: 'txn',
+    value: "txn",
  },
 ]);
+// 提交信息到右侧
+const SubmitRightInfo = (item: RightInfoType) => {
+  RightInfo.value.token = item.token;
+  RightInfo.value.tb = item.tbname;
+  RightInfo.value.r24h = item.r24h;
+  RightInfo.value.up = item.up;
+  RightInfo.value.swap = item.swap;
+};
 const onFilterChange = (value: string) => {
-  if (value == 'new') {
+  if (value == "new") {
    GlbFilter.value.nt = 1;
-  } else if (value == 'default') {
+  } else if (value == "default") {
    GlbFilter.value.nt = 0;
  }
  // 永远请求第一页
  pageNum.value = 1;
-  if (value == 'txn') {
+  if (value == "txn") {
-    GlbFilter.value.date_orderby = 'txn';
+    GlbFilter.value.date_orderby = "txn";
-    GlbFilter.value.sort = 'desc';
+    GlbFilter.value.sort = "desc";
-  } else if (value == 'max-up') {
+  } else if (value == "max-up") {
    // 最大涨幅
-    GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
+    GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
-    GlbFilter.value.sort = 'desc';
+    GlbFilter.value.sort = "desc";
-  } else if (value == 'max-down') {
+  } else if (value == "max-down") {
    // 最大跌幅
-    GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
+    GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
-    GlbFilter.value.sort = 'asc';
+    GlbFilter.value.sort = "asc";
  }
  getTableList();
 };
 // 获取涨跌幅
 const getUpDown = (value: string) => {
-  if (value && value[0] == '-') {
+  if (value && value[0] == "-") {
    return `${value}%`;
  }
  return `+${value}%`;
 };
 // 获取涨跌幅颜色
 const getUpDownColor = (value: string) => {
-  if (value && value[0] == '-') {
+  if (value && value[0] == "-") {
    // down
-    return '#f23645';
+    return "#f23645";
  }
  // up
-  return '#23ab94';
+  return "#23ab94";
 };
 // 获取表格可视区域宽度
 const getTableWidth = () => {
  if (CustomTable.value) {
    // 获取元素可视区域宽度
    let width = CustomTable.value.clientWidth;
-    affixedHead.width = width + 'px';
+    affixedHead.width = width + "px";
  }
 };
 // 排序事件
 const submitSort = ({ sort, field }: any) => {
+  let options_list = Object.keys(SortOptions);
  // 先将其他th的筛选关闭
-  Object.keys(SortOptions).forEach((item: string) => {
+  options_list.forEach((item: string) => {
    if (item == field) {
      SortOptions[item].type = sort;
      SortOptions[item].status = true;
+      // 更新
+      CurrentSortField.field = field;
+      CurrentSortField.sort = sort;
    } else {
-      SortOptions[item].type = 'all';
+      SortOptions[item].type = "all";
      SortOptions[item].status = false;
    }
  });
+  // 判断SortOptions-type 是否全部为all
+  let index = options_list.findIndex(
+    (item: any) => SortOptions[item].type != "all"
+  );
+  if (index == -1) {
+    //  清空当前排序字段
+    CurrentSortField.field = "";
+    CurrentSortField.sort = "";
+  }
  // 开始排序
-  if (sort === 'asc') {
+  if (sort === "asc") {
    // 升序
    resultData.value.list = TableSortAsc(resultData.value.list, field);
-  } else if (sort === 'desc') {
+  } else if (sort === "desc") {
    // 降序
    resultData.value.list = TableSort(resultData.value.list, field);
  } else {
@@ -386,25 +414,27 @@ const submitSort = ({ sort, field }: any) => {
      JSON.stringify(resultData.value.filterList)
    );
  }
+  // 更新数据
+  SubmitRightInfo(resultData.value.list[CurLineIndex.value]);
 };
 // 获取head的宽度赋给吸顶表头
 const getMinWidth = () => {
  if (CustomHead.value) {
-    affixedTableWidth.value = CustomHead.value.clientWidth + 'px';
+    affixedTableWidth.value = CustomHead.value.clientWidth + "px";
  }
 };
 // 表格数据过滤方法
-const TableFilter = (result: any) => {
+const TableFilter = (result: any, updateRight: boolean = false) => {
-  if ('list' in result && result.list.length) {
+  if ("list" in result && result.list.length) {
    result.list.forEach((item: any, index: number) => {
      item.index = index + 1;
-      item.n_up = '$' + parseCoinAmount(item.up);
+      item.n_up = "$" + parseCoinAmount(item.up);
-      item.n_vn = '$' + parseNumberToK(item.vn);
+      item.n_vn = "$" + parseNumberToK(item.vn);
      item.n_pb = parseNumberToK(item.pb);
-      item.n_r5m = parseFloat(item.r5m * 100 + '').toFixed(2);
+      item.n_r5m = parseFloat(item.r5m * 100 + "").toFixed(2);
-      item.n_r1h = parseFloat(item.r1h * 100 + '').toFixed(2);
+      item.n_r1h = parseFloat(item.r1h * 100 + "").toFixed(2);
-      item.n_r4h = parseFloat(item.r4h * 100 + '').toFixed(2);
+      item.n_r4h = parseFloat(item.r4h * 100 + "").toFixed(2);
-      item.n_r24h = parseFloat(item.r24h * 100 + '').toFixed(2);
+      item.n_r24h = parseFloat(item.r24h * 100 + "").toFixed(2);
      //
      item.n_r5m = getUpDown(item.n_r5m);
      item.n_r1h = getUpDown(item.n_r1h);
@@ -413,9 +443,25 @@ const TableFilter = (result: any) => {
      // console.log(item.swapImg);
      // console.log('swap名称', item.swap);
    });
+    // 先判断是否选择排序按钮,选择了就排序
+    if (CurrentSortField.field && CurrentSortField.sort) {
+      // 排序
+      if (CurrentSortField.sort == "asc") {
+        // 升序
+        result.list = TableSortAsc(result.list, CurrentSortField.field);
+      } else if (CurrentSortField.sort == "desc") {
+        // 降序
+        result.list = TableSort(result.list, CurrentSortField.field);
+      }
+    }
    resultData.value.list = JSON.parse(JSON.stringify(result.list));
    resultData.value.filterList = JSON.parse(JSON.stringify(result.list));
    resultData.value.total = result.dataCount;
+    // 更新右侧数据
+    if (updateRight) {
+      SubmitRightInfo(resultData.value.list[CurLineIndex.value]);
+    }
  } else {
    resultData.value.list = [];
    resultData.value.filterList = [];
@@ -431,7 +477,7 @@ const getParams = () => {
  };
  if (CurrentTime.value) {
    params.date = CurrentTime.value;
-  } else if ('date' in params) {
+  } else if ("date" in params) {
    delete params.date;
  }
  return params;
@@ -440,11 +486,11 @@ const getParams = () => {
 const getBaseUrl = () => {
  if (process.server) {
    if (process.dev) {
-      return 'http://156.247.9.93:9501';
+      return "http://156.247.9.93:9501";
    }
-    return 'https://dexfilter.com';
+    return "https://dexfilter.com";
  } else {
-    return '/v1';
+    return "/v1";
  }
 };
 //创建AbortController对象
@@ -472,17 +518,12 @@ const { data, refresh } = await useFetch(() => `/v1${chain.value}/indexV1`, {
    return response._data;
  },
  onRequestError({ error }) {
-    console.log(error, '请求错误');
+    console.log(error, "请求错误");
  },
  onResponseError(error) {
-    console.log(error, '返回的error');
+    console.log(error, "返回的error");
  },
 });
-const next = () => {
-  loading.value = true;
-  refresh();
-};
 // 获取默认数据
 const getDefaultList = () => {
  if (process.client && data.value) {
@@ -492,18 +533,18 @@ const getDefaultList = () => {
  }
 };
 const CustomgetRoute = () => {
-  if (route.params.chain && typeof route.params.chain == 'string') {
+  if (route.params.chain && typeof route.params.chain == "string") {
-    let Obj = filterChainObj('name', route.params.chain);
+    let Obj = filterChainObj("name", route.params.chain);
    if (Obj) {
      ChainObj.value = Obj;
      chain.value = Obj.value;
      HeadTokenType.value = ChainObj.value.Currency[0];
    }
  } else {
-    ChainObj.value = filterChainObj('value', chain.value);
+    ChainObj.value = filterChainObj("value", chain.value);
  }
-  if (route.params.page && typeof route.params.page == 'string') {
+  if (route.params.page && typeof route.params.page == "string") {
-    if (typeof parseInt(route.params.page) === 'number')
+    if (typeof parseInt(route.params.page) === "number")
      pageNum.value = parseInt(route.params.page);
    GlbFilter.value.page = parseInt(route.params.page);
  }
@@ -516,9 +557,9 @@ useHead({
  link: [webLogo],
  meta: [
    {
-      name: 'description',
+      name: "description",
      content:
-        'DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。',
+        "DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。",
    },
  ],
 });
@@ -530,7 +571,7 @@ const getColGroupWidth = () => {
  colGroupList.list.forEach((it: any) => {
    if (tableTrOne.value) {
      tableTrOne.value.forEach((item: any, index: number) => {
-        colGroupList.list[index] = item.clientWidth + 'px';
+        colGroupList.list[index] = item.clientWidth + "px";
      });
    }
  });
@@ -542,12 +583,12 @@ const getTableList = async () => {
    let result: any = await request.get(`/v1${chain.value}/indexV1`, {
      params: getParams(),
    });
-    if (Object.prototype.toString.call(result) == '[object Array]') {
+    if (Object.prototype.toString.call(result) == "[object Array]") {
      resultData.value.list = [];
      resultData.value.filterList = [];
      resultData.value.total = 0;
    } else {
-      TableFilter(result);
+      TableFilter(result, true);
    }
    loading.value = false;
  } catch (e) {
@@ -566,35 +607,31 @@ watch(
    CurLineIndex.value = 0;
    pageNum.value = 1;
    // 修改title
-    ChainObj.value = filterChainObj('value', chain.value);
+    ChainObj.value = filterChainObj("value", chain.value);
    getTableList();
  }
 );
 // 判断是否需要加$
 const Judgment = () => {
-  if (HeadTokenType.value === 'USDT') {
+  if (HeadTokenType.value === "USDT") {
-    return '$';
+    return "$";
  } else {
-    return '';
+    return "";
  }
 };
 // tbName---流动池折线图传递参数
 const handleRowClick = (item: any, index: number) => {
  CurLineIndex.value = index;
  // 提交到右侧
-  RightInfo.value.token = item.token;
+  SubmitRightInfo(item);
-  RightInfo.value.tb = item.tbname;
-  RightInfo.value.r24h = item.r24h;
-  RightInfo.value.up = item.up;
-  RightInfo.value.swap = item.swap;
 };
 // 监听是否切出页面
 const listenerWindow = (fn: any) => {
-  document.addEventListener('visibilitychange', fn);
+  document.addEventListener("visibilitychange", fn);
 };
 // 取消监听
 const closeListener = (fn: any) => {
-  document.removeEventListener('visibilitychange', fn);
+  document.removeEventListener("visibilitychange", fn);
 };
 // 有数据，开启定时器
 const Intervalfun = () => {
@@ -614,7 +651,7 @@ const closeInterVal = () => {
 const windowOpenFn = (e: any) => {
  // ==visible代表在当前窗口
  let isExist = e.target.visibilityState;
-  if (isExist === 'visible') {
+  if (isExist === "visible") {
    // 先关再开
    closeInterVal();
    Intervalfun();
@@ -631,9 +668,9 @@ const onCurrentChange = (v: number) => {
 };
 const onScrollEvent = () => {
  // 获取滚动元素dom
-  BodyscrollDom.value = document.getElementById('layout-scroll');
+  BodyscrollDom.value = document.getElementById("layout-scroll");
  if (BodyscrollDom.value && CustomHead.value) {
-    affixedHead.top = BodyscrollDom.value.offsetTop + 'px';
+    affixedHead.top = BodyscrollDom.value.offsetTop + "px";
    let Newclient = CustomHead.value.getBoundingClientRect();
    if (Newclient.top <= BodyscrollDom.value.offsetTop) {
      // 显示吸顶表头
@@ -671,7 +708,7 @@ const onTableScroll = () => {
 };
 const setColGroupList = () => {
  columnsChild.value.forEach((item: any) => {
-    colGroupList.list.push('0px');
+    colGroupList.list.push("0px");
  });
 };
 onMounted(() => {
@@ -701,11 +738,7 @@ onMounted(() => {
    Intervalfun();
    // 给右侧提供第一条数据
    if (resultData.value.list.length) {
-      RightInfo.value.token = resultData.value.list[0].token;
+      SubmitRightInfo(resultData.value.list[0]);
-      RightInfo.value.tb = resultData.value.list[0].tbname;
-      RightInfo.value.r24h = resultData.value.list[0].r24h;
-      RightInfo.value.up = resultData.value.list[0].up;
-      RightInfo.value.swap = resultData.value.list[0].swap;
    }
    // 获取th的个数并修改ColGroupList
    setColGroupList();
@@ -729,79 +762,79 @@ onUnmounted(() => {
 const columns = computed(() => {
  return [
    {
-      title: t('TableList.tokenbase'),
+      title: t("TableList.tokenbase"),
      children: [
        {
-          colKey: 'index',
+          colKey: "index",
-          width: 'auto',
+          width: "auto",
-          title: '#',
+          title: "#",
        },
        {
-          colKey: 'tn',
+          colKey: "tn",
-          title: t('TableList.token'),
+          title: t("TableList.token"),
        },
      ],
    },
    {
-      title: t('TableList.basic'),
+      title: t("TableList.basic"),
      children: [
        {
-          colKey: 'up',
+          colKey: "up",
-          title: t('TableList.price'),
+          title: t("TableList.price"),
          sort: true,
        },
        {
-          colKey: 'pb',
+          colKey: "pb",
-          title: 'Pool',
+          title: "Pool",
          sort: true,
        },
        {
-          colKey: 'vn',
+          colKey: "vn",
-          title: t('TableList.volume'),
+          title: t("TableList.volume"),
          sort: true,
        },
        {
-          colKey: 'txn',
+          colKey: "txn",
-          title: t('TableList.txns'),
+          title: t("TableList.txns"),
          sort: true,
        },
      ],
    },
    {
-      title: t('TableList.priceChange'),
+      title: t("TableList.priceChange"),
      children: [
        {
-          colKey: 'r5m',
+          colKey: "r5m",
-          title: t('TableList.time1'),
+          title: t("TableList.time1"),
          sort: true,
        },
        {
-          colKey: 'r1h',
+          colKey: "r1h",
-          title: t('TableList.time2'),
+          title: t("TableList.time2"),
          sort: true,
        },
        {
-          colKey: 'r4h',
+          colKey: "r4h",
-          title: t('TableList.time3'),
+          title: t("TableList.time3"),
          sort: true,
        },
        {
-          colKey: 'r24h',
+          colKey: "r24h",
-          title: t('TableList.time4'),
+          title: t("TableList.time4"),
          sort: true,
        },
      ],
    },
    {
-      title: t('TableList.others'),
+      title: t("TableList.others"),
      children: [
        {
-          colKey: 'operation',
+          colKey: "operation",
-          title: t('TableList.k_line'),
+          title: t("TableList.k_line"),
        },
        {
-          colKey: 'media',
+          colKey: "media",
-          title: t('TableList.mediaData'),
+          title: t("TableList.mediaData"),
        },
      ],
    },
@@ -821,21 +854,21 @@ const columnsChild = computed(() => {
 let arr1 = new Array(100);
 for (let i = 0; i < arr1.length; i++) {
  arr1[i] = {
-    one: '1',
+    one: "1",
-    two: '2',
+    two: "2",
-    three: '3',
+    three: "3",
-    four: '4',
+    four: "4",
-    five: '5',
+    five: "5",
-    sex: '6',
+    sex: "6",
-    seven: '7',
+    seven: "7",
  };
 }
 </script>
 <style lang="less">
-@import '@/style/variables.less';
+@import "@/style/variables.less";
-@import '@/style/line.less';
+@import "@/style/line.less";
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .custom-token-list {
  margin-top: 8px;
  box-sizing: border-box;
@@ -878,7 +911,7 @@ for (let i = 0; i < arr1.length; i++) {
              font-size: 14px;
              color: var(--td--main-btn-color-1);
              white-space: nowrap;
-              font-family: 'bold';
+              font-family: "bold";
              padding: 4px 12px;
            }
            .t-align-center {
@@ -901,7 +934,7 @@ for (let i = 0; i < arr1.length; i++) {
            th {
              font-weight: 500;
              font-size: 14px;
-              font-family: 'Medium';
+              font-family: "Medium";
              border-bottom: 1px solid var(--new-border-4);
              padding: 20px 12px;
              .thead-sort-box {
@@ -943,7 +976,7 @@ for (let i = 0; i < arr1.length; i++) {
            font-size: 14px;
            color: var(--td--main-btn-color-1);
            white-space: nowrap;
-            font-family: 'bold';
+            font-family: "bold";
            padding: 4px 12px;
          }
          .t-align-center {
@@ -966,7 +999,7 @@ for (let i = 0; i < arr1.length; i++) {
          th {
            font-weight: 500;
            font-size: 14px;
-            font-family: 'Medium';
+            font-family: "Medium";
            border-bottom: 1px solid var(--new-border-4);
            padding: 20px 12px;
            .thead-sort-box {
@@ -991,7 +1024,7 @@ for (let i = 0; i < arr1.length; i++) {
            border: none;
            border-bottom: 1px solid var(--new-border-3);
            background: var(--new-background-5);
-            font-family: 'Regular';
+            font-family: "Regular";
            padding: 16px 12px;
            .custom-no-list {
              .dja();
@@ -1022,7 +1055,7 @@ for (let i = 0; i < arr1.length; i++) {
            color: var(--main-theme-color);
            font-weight: 700;
            font-size: 16px;
-            font-family: 'bold';
+            font-family: "bold";
          }
          .symbol {
            color: var(--td-search-btn-back-1);

--- a/views/token/RightDetail.vue
+++ b/views/token/RightDetail.vue
@@ -157,12 +157,12 @@ const headerBtns = computed(() => [
 ]);
 const props = withDefaults(
  defineProps<{
-    token: string;
+    token?: string;
-    scene: string;
+    scene?: string;
-    tb: string;
+    tb?: string;
    currentPath: string;
-    r24h: number;
+    r24h?: number;
-    mt: string;
+    mt?: string;
    up?: number;
  }>(),
  {

--- a/views/token/TimeTab.vue
+++ b/views/token/TimeTab.vue
@@ -42,11 +42,11 @@ import { useI18n } from "vue-i18n";
 import { Button as TButton } from "tdesign-vue-next";
 const { t } = useI18n();
 const props = defineProps<{
-  token: string;
+  token?: string;
  currentPath: string;
-  tb: string;
+  tb?: string;
  PoolAddress: string;
-  mt: string;
+  mt?: string;
 }>();
 // 当前链
 const chain = useChain();

--- a/views/token/TokenPool.vue
+++ b/views/token/TokenPool.vue
@@ -63,15 +63,15 @@ import TableEmpty from "@/components/TableEmpty.vue";
 import request from "@/utils/request";
 import { parseNumberToK, parseCoinAmount } from "@/utils/tool";
 import { WebS } from "@/utils/TokenTrans";
-// import { goDetailK } from '@/utils/router/routerGo';
 import { filterChainObj } from "@/constants/UnifiedManagementChain";
 import { Loading as TLoading } from "tdesign-vue-next";
+import { JumpKLine } from "@/utils/router/RouterChange";
 const route = useRoute();
 const props = defineProps<{
  poolToken: string;
  currentPath: string;
  tb: string;
-  mt: string;
+  mt?: string;
 }>();
 const emit = defineEmits(["update:address"]);
 interface PoolListValue {
@@ -100,7 +100,6 @@ watch(
  }
 );
 const currentPoolValue = ref();
-const currentPoolAddress = ref("");
 onMounted(() => {
  getPoolToken();
 });
@@ -167,7 +166,6 @@ const getPoolToken = async () => {
      isLoading.value = false;
    }
    isLoading.value = false;
-    console.log(poolInfo.value);
  } catch (e) {
    console.log(e);
    isLoading.value = false;
@@ -175,20 +173,16 @@ const getPoolToken = async () => {
 };
 // 切换流动池
 const switchPool = (item: PoolListValue, index: number) => {
-  // currentPoolValue.value = index;
-  // currentPoolAddress.value = item.address;
-  // emit('update:address', currentPoolAddress.value);
  if (currentPoolValue.value === index) {
    return;
  }
  let Obj = filterChainObj("value", chain.value);
-  // 打开新的流动池
+  // 打开新页面
  let params = {
    path: Obj.name,
    tb: item.address,
  };
-  // goDetailK(params);
+  JumpKLine(params, "open");
 };
 </script>
 <style lang="less">