打包优化

tsconfig.json

 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true
+  }
 }

views/token/Collection.vue

+<template>
+  <div
+    class="custom-home-collection-box narrow-scrollbar"
+    :style="{
+      height: CollectHeight,
+      maxHeight: CollectHeight,
+    }"
+    id="collectionBox"
+  >
+    <div class="custom-collection-header">
+      <span class="title">
+        <template v-if="LatestStatus()">
+          {{ $t("collection.r24hCollect") }}
+        </template>
+        <template v-else>
+          {{ $t("collection.editor") }}
+        </template>
+      </span>
+      <span class="edit-icon" @click="toEdit">
+        <template v-if="LatestStatus()">
+          <EditSvg></EditSvg>
+        </template>
+        <template v-else>
+          <span class="Finish-text">{{ $t("home.Finish") }}</span>
+        </template>
+      </span>
+    </div>
+    <div class="custom-collection-table">
+      <table>
+        <thead>
+          <tr>
+            <template v-if="!LatestStatus()">
+              <th></th>
+            </template>
+            <th class="token-th">{{ $t("collection.token") }}</th>
+            <th>
+              <template v-if="LatestStatus()">
+                <div>
+                  <div>{{ $t("collection.newHolder") }}/</div>
+                  {{ $t("collection.Numbertrades") }}
+                </div>
+              </template>
+              <template v-else>
+                <div>{{ $t("collection.top") }}</div>
+              </template>
+            </th>
+            <th>
+              <template v-if="LatestStatus()">
+                <div class="r24h-th-sort">
+                  {{ $t("collection.r24h") }}
+                  <CustomTableSort
+                    :options="sortOptions.r24h"
+                    field="old24h"
+                    @SubmitSort="submitSort"
+                  ></CustomTableSort>
+                </div>
+              </template>
+              <template v-else>
+                {{ $t("collection.sort") }}
+              </template>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <TransitionGroup name="flip-list">
+            <template v-for="(item, index) in StartList.list" :key="item.tb">
+              <tr
+                class="collect-tr"
+                :class="{
+                  'tr-pointer': LatestStatus(),
+                  'tr-none': !LatestStatus(),
+                }"
+                @click="toKline(item.tb)"
+              >
+                <template v-if="!LatestStatus()">
+                  <td class="edit-td">
+                    <t-checkbox v-model="item.select"></t-checkbox>
+                  </td>
+                </template>
+                <td>
+                  <div class="col-token-td">
+                    <div class="token-icon">
+                      <DefaultTokenSvg></DefaultTokenSvg>
+                    </div>
+                    <div>
+                      <div class="token">{{ item.symbol }}</div>
+                      <div class="pair">{{ item.pair }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="col-holder-tx-td">
+                  <template v-if="LatestStatus()">
+                    <div>
+                      <div>+{{ item.holders }}</div>
+                      <div>+{{ item.txnums }}</div>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <span class="sticky-top-icon" @click="onStickyTop(index)">
+                      <StickyTopSvg></StickyTopSvg>
+                    </span>
+                  </template>
+                </td>
+                <td>
+                  <template v-if="LatestStatus()">
+                    <div>
+                      <div class="price">{{ item.up }}</div>
+                      <div
+                        class="r24h"
+                        :class="{
+                          down: item.r24h[0] == '-',
+                          up: item.r24h[0] != '-',
+                        }"
+                      >
+                        {{ item.r24h }}
+                      </div>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div
+                      class="drag-icon custom-collection-drag"
+                      @mousedown="MouseStart(index)"
+                    >
+                      <DragSvg></DragSvg>
+                    </div>
+                  </template>
+                </td>
+              </tr>
+            </template>
+          </TransitionGroup>
+        </tbody>
+      </table>
+    </div>
+    <template v-if="!LatestStatus()">
+      <div class="collection-footer">
+        <div class="check-all">
+          <t-checkbox v-model="checkAll" @change="onCheckAll">
+            {{ $t("collection.selectall") }}
+          </t-checkbox>
+        </div>
+        <div class="delete-collection" @click="DeleteSelected">
+          <DeleteSvg></DeleteSvg>
+          <span class="delete-text">{{ $t("collection.delete") }}</span>
+        </div>
+      </div>
+    </template>
+    <div v-show="loading">
+      <Animation :background="loading_background"></Animation>
+    </div>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { useI18n } from "vue-i18n";
+import EditSvg from "/public/images/svg/collection/edit.svg";
+import DefaultTokenSvg from "/public/images/svg/collection/filter-default-icon.svg";
+import StickyTopSvg from "/public/images/svg/collection/StickyTop.svg";
+import DragSvg from "/public/images/svg/collection/Drag.svg";
+import DeleteSvg from "/public/images/svg/collection/delete.svg";
+import { myCollect } from "@/utils/api";
+import Animation from "@/components/Animation.vue";
+import { loading_background } from "@/constants/global";
+import {
+  TableSort,
+  TableSortAsc,
+  ArrayItemSticky,
+  ArraySpecifiedPosition,
+} from "@/utils/tool";
+import CustomTableSort from "./tableSort.vue";
+import { filterChainObj } from "@/constants/UnifiedManagementChain";
+import { deleteCollection, changeCollection } from "@/utils/cache";
+const { t } = useI18n();
+const router = useRouter();
+const chain = useChain();
+const ChainObj = ref<any>({});
+// 收藏模块的高度
+const CollectHeight = ref("");
+// 收藏表格是否更新
+const CollectionCl = CollectionChange();
+const loading = ref(false);
+// 是否选择全部
+const checkAll = ref(false);
+// 鼠标拖动事件需要的参数
+const MouseParameter = reactive({
+  index: 0,
+  // tr的高度
+  trHeight: 0,
+  // 鼠标按下的y轴
+  StartY: 0,
+});
+/**
+ * 当前状态-default----edit
+ */
+const currentType = ref("default");
+const sortOptions = reactive({
+  r24h: {
+    field: "r24h",
+    type: "all",
+    status: false,
+  },
+});
+const StartList = reactive<{
+  list: any[];
+  filterlist: any[];
+}>({
+  list: [],
+  filterlist: [],
+});
+const getChainObj = () => {
+  let obj = filterChainObj("value", chain.value);
+  if (obj) {
+    ChainObj.value = obj;
+  }
+};
+getChainObj();
+const LatestStatus = () => {
+  return currentType.value == "default";
+};
+// 需要计算剩余高度
+const getCurrentHtmlHeight = () => {
+  let collectBox = document.getElementById("collectionBox");
+  if (collectBox) {
+    let client = collectBox.getBoundingClientRect();
+    // 获取文档高度
+    let domHeight = document.documentElement.clientHeight;
+    CollectHeight.value = domHeight - client.top + "px";
+  }
+};
+const toEdit = () => {
+  if (LatestStatus()) {
+    currentType.value = "edit";
+  } else {
+    currentType.value = "default";
+  }
+};
+// 鼠标按下
+const MouseStart = (index: number, e: any) => {
+  MouseParameter.index = index;
+  // 开始位置
+  MouseParameter.StartY = e.clientY;
+  // 重新获取tr的高度collect-tr
+  let trDom = document.querySelector(".collect-tr");
+  if (trDom) {
+    MouseParameter.trHeight = trDom.clientHeight;
+  }
+  // 移动中先不写事件，有需求再加
+  document.onmousemove = function (move: any) {
+    // console.log(move);
+  };
+  document.onmouseup = function (up: any) {
+    document.onmousemove = document.onmouseup = null;
+    let endY = up.clientY;
+    // 拖动的距离
+    let distance = MouseParameter.StartY - endY;
+    // 拖动的距离-取绝对值
+    let abs = Math.abs(distance);
+    // 拖动了几个元素的距离--或者说将要移动到的位置--取整
+    let newIndex = Math.round(abs / MouseParameter.trHeight);
+    if (distance == 0) {
+      return;
+    }
+    if (distance > 0) {
+      // 向上拖动
+      if (MouseParameter.index - newIndex <= 0) {
+        // 拖到第一个
+        StartList.list = ArrayItemSticky(
+          toRaw(StartList.list),
+          MouseParameter.index
+        );
+      } else {
+        // 拖动到其他位置
+        StartList.list = ArraySpecifiedPosition(
+          StartList.list,
+          MouseParameter.index,
+          MouseParameter.index - newIndex
+        );
+      }
+    } else {
+      // 向下拖动
+      if (MouseParameter.index + newIndex >= StartList.list.length - 1) {
+        // 拖到最后一个
+        StartList.list = ArraySpecifiedPosition(
+          StartList.list,
+          MouseParameter.index,
+          StartList.list.length - 1
+        );
+      } else {
+        // 拖动到其他位置
+        StartList.list = ArraySpecifiedPosition(
+          StartList.list,
+          MouseParameter.index,
+          MouseParameter.index + newIndex
+        );
+      }
+    }
+  };
+};
+// 获取数据
+const getList = async () => {
+  try {
+    loading.value = true;
+    let tmp: any = await myCollect();
+    if (tmp) {
+      StartList.list = JSON.parse(JSON.stringify(tmp));
+      StartList.filterlist = JSON.parse(JSON.stringify(tmp));
+    }
+    loading.value = false;
+  } catch (e) {
+    console.log(e);
+    loading.value = false;
+  }
+};
+// 置顶操作
+const onStickyTop = (index: number) => {
+  // list顺序
+  StartList.list = ArrayItemSticky(toRaw(StartList.list), index);
+  // localStorage顺序
+  changeCollection(toRaw(StartList.list));
+};
+const submitSort = ({ sort, field }: any) => {
+  if (sort === "asc") {
+    // 升序
+    StartList.list = TableSortAsc(StartList.list, field);
+  } else if (sort === "desc") {
+    // 降序
+    StartList.list = TableSort(StartList.list, field);
+  } else {
+    // 还原
+    StartList.list = JSON.parse(JSON.stringify(StartList.filterlist));
+  }
+};
+watch(
+  () => CollectionCl.value,
+  (v) => {
+    getList();
+  }
+);
+// 删除选中
+const DeleteSelected = () => {
+  let list = StartList.list.filter((item: any) => item.select == true);
+  if (list.length) {
+    deleteCollection(list);
+  }
+  // 最新的数据
+  StartList.list = StartList.list.filter(
+    (item: any, index: number) => item.select === false
+  );
+};
+// 跳转k线
+const toKline = (tb: string) => {
+  if (!LatestStatus()) {
+    return;
+  }
+  let newtb = tb[0] == "d" ? tb.slice(1, tb.length) : tb;
+  let res = router.resolve({
+    path: `${chain.value}/${newtb}`,
+  });
+  window.open(res.href);
+};
+
+// 选择全部
+const onCheckAll = (value: boolean) => {
+  StartList.list.forEach((item: any) => {
+    item.select = value;
+  });
+};
+onMounted(() => {
+  getCurrentHtmlHeight();
+  // 请求接口
+  getList();
+});
+</script>
+
+<style lang="less">
+@import "@/style/variables.less";
+.custom-home-collection-box {
+  background-color: var(--td--right-back-color-2);
+  border: var(--new-border-2);
+  border-radius: 0 0 @border-radius @border-radius;
+  position: relative;
+  overflow-y: auto;
+  user-select: none;
+  .custom-collection-header {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: var(--td--right-back-color-2);
+    .title {
+      font-size: 15px;
+      font-family: "Medium";
+    }
+    .edit-icon {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      .Finish-text {
+        font-weight: 400;
+        font-size: 12px;
+        font-family: "Regular";
+        color: #287eff;
+      }
+    }
+  }
+  .custom-collection-table {
+    padding: 0 12px;
+    table {
+      width: 100%;
+      border-spacing: 0;
+      thead {
+        tr {
+          background: var(--new-background-6);
+          border-radius: 10px;
+          th {
+            color: #8e8a8a;
+            font-weight: 500;
+            font-size: 12px;
+            font-family: "Medium";
+            .r24h-th-sort {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+          .token-th {
+            text-align: left;
+            padding-left: 12px;
+          }
+          & > :first-child {
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+          }
+          & > :last-child {
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+          }
+        }
+      }
+    }
+    tbody {
+      .flip-list-move {
+        transition: transform 0.8s;
+      }
+      /* 效果过程 */
+      .flip-list-enter-active,
+      .flip-list-leave-active {
+        transition: all 0.3s linear;
+      }
+      /* 进场的瞬间与离场的效果添加 */
+      .flip-list-enter,
+      .flip-list-leave-to {
+        opacity: 0;
+        transform: translateX(200px);
+      }
+      tr {
+        transition: background 0.3s;
+        &:hover {
+          background: rgba(240, 240, 240, 0.2);
+          transition: background 0.3s;
+        }
+        td {
+          text-align: center;
+          border-bottom: 1px solid var(--new-border-7);
+          .col-token-td {
+            display: flex;
+            align-items: center;
+            max-width: 90px;
+            .token {
+              font-weight: 600;
+              font-size: 12px;
+              text-align: left;
+              font-family: "Medium";
+            }
+            .pair {
+              font-weight: 400;
+              font-size: 12px;
+              color: #7c858e;
+              text-align: left;
+              transform: scale(0.8);
+              transform-origin: 0 0;
+              font-family: "Regular";
+            }
+            .token-icon {
+              display: flex;
+              align-items: center;
+              padding-right: 4px;
+            }
+          }
+          .price,
+          .r24h {
+            font-weight: 600;
+            font-size: 14px;
+            font-family: "Medium";
+          }
+          .up {
+            color: #5ab055;
+          }
+          .down {
+            color: rgb(248, 82, 96);
+          }
+          .drag-icon {
+            height: 100%;
+            cursor: pointer;
+          }
+        }
+        .edit-td {
+          .t-checkbox {
+            .t-checkbox__input {
+              border-radius: 50%;
+            }
+          }
+          .t-is-checked {
+            .t-checkbox__input {
+              background-color: var(--td--main-btn-color-1);
+              border: 1px solid var(--td--main-btn-color-1);
+            }
+          }
+        }
+        .col-holder-tx-td {
+          font-weight: 600;
+          font-size: 12px;
+          font-family: "Medium";
+          .sticky-top-icon {
+            cursor: pointer;
+          }
+        }
+      }
+      .tr-pointer {
+        cursor: pointer;
+      }
+      .tr-none {
+        cursor: auto;
+      }
+    }
+  }
+  .collection-footer {
+    position: sticky;
+    bottom: 0;
+    height: 47px;
+    border-top: 1px solid #d7dce4;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12px;
+    .check-all {
+      .t-checkbox {
+        .t-checkbox__input {
+          border-radius: 50%;
+        }
+        .t-checkbox__label {
+          font-weight: 400;
+          font-size: 12px;
+          color: #4d4d4d;
+          font-family: "Regular";
+        }
+      }
+      .t-is-checked {
+        .t-checkbox__input {
+          background-color: var(--td--main-btn-color-1);
+          border: 1px solid var(--td--main-btn-color-1);
+        }
+      }
+    }
+    .delete-collection {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      .delete-text {
+        padding-left: 6px;
+        font-family: "Medium";
+      }
+    }
+  }
+}
+</style>

views/token/RightDetail.vue

@@ -107,24 +107,24 @@
     </template>
   </div>
 </template>
-<script setup lang="tsx">
-import request from '@/utils/request';
-import { parsePercent, parseCoinAmount } from '@/utils/tool';
-import TimeTab from './TimeTab.vue';
-import SecurityCheck from './SecurityCheck.vue';
-import TokenInfo from './TokenInfo.vue';
-import TokenPool from './TokenPool.vue';
-import TokenSocialList from './TokenSocialList.vue';
-import * as Cache from '@/utils/cache';
-import { MessagePlugin } from 'tdesign-vue-next';
-import DetailsEcharts from '../analysis/detailsEcharts.vue';
-import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg';
-import Favo from '/public/images/svg/rightDetail/favo.svg';
-import CollectionSvg from '/public/images/svg/rightDetail/colection.svg';
-import { useI18n } from 'vue-i18n';
-import RightDetailHeader from './rightDetailHeader.vue';
-import SubmitSocialInfo from './SubmitSocialInfo';
-import Collection from './collection';
+<script lang="tsx" setup>
+import request from "@/utils/request";
+import { parsePercent, parseCoinAmount } from "@/utils/tool";
+import TimeTab from "./TimeTab.vue";
+import SecurityCheck from "./SecurityCheck.vue";
+import TokenInfo from "./TokenInfo.vue";
+import TokenPool from "./TokenPool.vue";
+import TokenSocialList from "./TokenSocialList.vue";
+import * as Cache from "@/utils/cache";
+import { MessagePlugin } from "tdesign-vue-next";
+import DetailsEcharts from "../analysis/detailsEcharts.vue";
+import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
+import Favo from "/public/images/svg/rightDetail/favo.svg";
+import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
+import { useI18n } from "vue-i18n";
+import RightDetailHeader from "./rightDetailHeader.vue";
+import SubmitSocialInfo from "./SubmitSocialInfo.vue";
+import Collection from "./Collection.vue";
 const router = useRouter();
 const { t, locale } = useI18n();
 // 通知表格收藏图表取消收藏
@@ -133,16 +133,16 @@ const CollectionDe = CollectionDelete();
 // const initEchart = computed(() => store.getters['echart/gethasInit']);
 const headerBtns = computed(() => [
   {
-    label: t('securityCheck.details'),
-    value: 'details',
+    label: t("securityCheck.details"),
+    value: "details",
   },
   {
-    label: t('filter.Collection'),
-    value: 'collection',
+    label: t("filter.Collection"),
+    value: "collection",
   },
   {
-    label: t('securityCheck.analysis'),
-    value: 'echart',
+    label: t("securityCheck.analysis"),
+    value: "echart",
   },
 ]);
 const props = defineProps({
@@ -154,52 +154,52 @@ const props = defineProps({
   mt: String,
   up: Number,
 });
-const emit = defineEmits(['update:setPool', 'SettwitterRul']);
-const r24h = ref('');
-const numR24h = ref('');
+const emit = defineEmits(["update:setPool", "SettwitterRul"]);
+const r24h = ref("");
+const numR24h = ref("");
 // 收藏列表是否首次加载
 const CollectionOnload = ref(false);
 // 判断当前路由，隐藏右侧详情box中的折线图模块
 const currentRouter = router.currentRoute.value.name;
-const currentTab = ref('info');
+const currentTab = ref("info");
 const isInCollection = ref(false);
 // 默认选择detail按钮
-const defaBtn = ref('details');
+const defaBtn = ref("details");
 const ifDetails = ref(false);
 const WatchEcharts = useWatchEcharts();
 // 传给详情折线图的tbname
-const tb = ref('');
+const tb = ref("");
 // 点击pool才加载
 const isPool = ref(false);
-const PoolAddress = ref('');
+const PoolAddress = ref("");
 // 当前链
 const chain = useChain();
 const tokenInfo: any = ref({
-  avatar: '',
-  token: '',
+  avatar: "",
+  token: "",
   pool: [],
 });
 const getPriceRange = () => {
   const { up, r24h: proR24h } = props;
-  if ((proR24h + '')[0] == '-') {
+  if ((proR24h + "")[0] == "-") {
     // -，跌
-    let newR24h = parseFloat((proR24h + '').replace('-', ''));
+    let newR24h = parseFloat((proR24h + "").replace("-", ""));
     // 原价
     let oldPrice = props.up / (1 - newR24h);
     numR24h.value = oldPrice - props.up;
-    numR24h.value = '-' + parseCoinAmount(numR24h.value);
+    numR24h.value = "-" + parseCoinAmount(numR24h.value);
   } else if (proR24h == 0) {
-    numR24h.value = '+0';
+    numR24h.value = "+0";
   } else {
     // +,涨
     // 原价
     let oldPrice = props.up / (proR24h + 1);
     numR24h.value = props.up - oldPrice;
-    numR24h.value = '+' + parseCoinAmount(numR24h.value);
+    numR24h.value = "+" + parseCoinAmount(numR24h.value);
   }
-  r24h.value = parsePercent(proR24h + '');
-  if (r24h.value[0] !== '-') {
-    r24h.value = '+' + r24h.value;
+  r24h.value = parsePercent(proR24h + "");
+  if (r24h.value[0] !== "-") {
+    r24h.value = "+" + r24h.value;
   }
 };
 watch(
@@ -213,13 +213,13 @@ watch(
 watch(
   () => props.r24h,
   (v) => {
-    if (typeof v !== 'undefined') {
+    if (typeof v !== "undefined") {
       getPriceRange();
     }
   }
 );
 const btnLoad = (value: string) => {
-  if (currentRouter == 'tokenAnalysis' && value == 'echart') {
+  if (currentRouter == "tokenAnalysis" && value == "echart") {
     return false;
   }
   return true;
@@ -235,7 +235,7 @@ watch(
 );
 // 流动池tab改变
 const changeTab = (value) => {
-  if (value === 'pool') {
+  if (value === "pool") {
     isPool.value = true;
   }
 };
@@ -249,31 +249,31 @@ const getTokenInfo = async () => {
       },
     });
 
-    result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1);
-    result.tokenSub = '';
+    result.marketCap = parseFloat(result.supply * result.up + "").toFixed(1);
+    result.tokenSub = "";
     if (result.token) {
       result.tokenSub =
         result.token.substr(0, 6) +
-        '...' +
+        "..." +
         result.token.substr(result.token.length - 4, 4);
     }
     // tbname-掩码
-    result.tbnameSub = '';
-    result.n_tb = '';
+    result.tbnameSub = "";
+    result.n_tb = "";
     if (props.tb) {
       // 先将d去掉
       result.n_tb =
-        props.tb[0] == 'd' ? props.tb.slice(1, props.tb.length) : props.tb;
+        props.tb[0] == "d" ? props.tb.slice(1, props.tb.length) : props.tb;
       result.tbnameSub =
         result.n_tb.substr(0, 6) +
-        '...' +
+        "..." +
         result.n_tb.substr(result.n_tb.length - 4, 4);
     }
     isInCollection.value = Cache.hasSet(props.tb);
     Object.assign(tokenInfo.value, result);
     // 如果有推特链接，提交给twitter组件解析
-    if ('chat' in result) {
-      emit('SettwitterRul', result.chat.twitter);
+    if ("chat" in result) {
+      emit("SettwitterRul", result.chat.twitter);
     }
   } catch (e) {
     console.log(e);
@@ -283,7 +283,7 @@ const getTokenInfo = async () => {
 watch(
   () => locale.value,
   (v) => {
-    if (defaBtn.value == 'echart') {
+    if (defaBtn.value == "echart") {
       WatchEcharts.value += 1;
     }
   }
@@ -291,16 +291,16 @@ watch(
 // 点击查看token详情信息
 // v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求
 const gotoDetail = (value) => {
-  if (value == 'collection' && !CollectionOnload.value) {
+  if (value == "collection" && !CollectionOnload.value) {
     CollectionOnload.value = true;
   }
   // 先判断是否有token,没有则禁止打开折线图模块
-  if (!props.tb && value === 'echart') {
+  if (!props.tb && value === "echart") {
     MessagePlugin.closeAll();
-    MessagePlugin.warning(t('MessagePlugin.plToken'));
+    MessagePlugin.warning(t("MessagePlugin.plToken"));
     return;
   }
-  if (value === 'echart') {
+  if (value === "echart") {
     tb.value = props.tb;
     ifDetails.value = true;
   }
@@ -315,14 +315,14 @@ const monitor = computed((value) => {
 // 接收右侧详情流动池address
 const changePool = (PoolValue) => {
   PoolAddress.value = PoolValue;
-  emit('update:setPool', PoolValue);
+  emit("update:setPool", PoolValue);
 };
 watch(
   () => props.token,
   (v) => {
     if (v) {
       //如果折线图为隐藏状态，需注销折线图模块
-      if (defaBtn.value != 'echart') {
+      if (defaBtn.value != "echart") {
         ifDetails.value = false;
       }
       tb.value = props.tb;
@@ -332,8 +332,8 @@ watch(
 );
 </script>
 <style lang="less">
-@import '@/style/flex.less';
-@import '@/style/variables.less';
+@import "@/style/flex.less";
+@import "@/style/variables.less";
 .right-detail-wrapper {
   height: calc(100vh - 70px);
   flex: 1;
@@ -361,7 +361,7 @@ watch(
       font-size: 14px;
       margin: 0;
       padding: 0;
-      font-family: 'Regular';
+      font-family: "Regular";
       .details-icon-cl {
         width: 30px;
         fill: var(--td-search-btn-back-1);
@@ -437,7 +437,7 @@ watch(
           border-bottom-left-radius: @border-radius;
           border-bottom-right-radius: @border-radius;
           .t-tabs__nav-item-text-wrapper {
-            font-family: 'Medium';
+            font-family: "Medium";
           }
           .t-tabs__header {
             background-color: var(--td--right-back-color-2);

views/token/SubmitSocialInfo.vue

+<template>
+  <div>
+    <div class="custom-submit-social-box" @click="OpenDialog">
+      <SubmitSvg></SubmitSvg>
+      <span class="span1">更新社区信息</span>
+    </div>
+    <t-dialog
+      :footer="false"
+      v-model:visible="visible"
+      placement="center"
+      attach="body"
+      @closeBtn="closeBtn"
+    >
+      <div class="custom-set-message-popup-box">
+        <div class="message-popup-title">
+          {{ $t("home.updatemessageTitle") }}
+        </div>
+        <div class="message-popup-body">
+          <p>{{ $t("home.message1") }}</p>
+          <p>{{ $t("home.message2") }}</p>
+          <p>{{ $t("home.message3") }}</p>
+          <p>{{ $t("home.message4") }}</p>
+          <p>{{ $t("home.message5") }}</p>
+        </div>
+        <div class="message-popup-footer">
+          <t-button class="clear-btn" @click="closeDialog">
+            {{ $t("user.Cancel") }}
+          </t-button>
+          <t-button class="submit-btn" @click="submit">
+            {{ $t("home.toSubmit") }}
+          </t-button>
+        </div>
+      </div>
+    </t-dialog>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { useI18n } from "vue-i18n";
+import SubmitSvg from "/public/images/svg/rightDetail/submit.svg";
+import ConnectCloseSvg from "/public/images/svg/rightDetail/connectClose.svg";
+import { submitInfoLink } from "@/constants/global";
+const visible = ref(false);
+const { t } = useI18n();
+const OpenDialog = () => {
+  visible.value = true;
+};
+const closeDialog = () => {
+  visible.value = false;
+};
+const submit = () => {
+  //
+  window.open(submitInfoLink);
+};
+const closeBtn = () => {
+  return <ConnectCloseSvg></ConnectCloseSvg>;
+};
+</script>
+
+<style lang="less">
+.custom-submit-social-box {
+  height: 38px;
+  border-bottom: var(--new-border-2);
+  border-left: 1px solid var(--new-border-8);
+  border-right: 1px solid var(--new-border-8);
+  box-sizing: border-box;
+  background-color: var(--td--right-back-color-2);
+  font-size: 14px;
+  color: var(--new-color-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: "Medium";
+  .span1 {
+    padding-left: 4px;
+  }
+}
+.custom-set-message-popup-box {
+  background: var(--custom-body-back-color);
+  border-radius: 10px;
+  box-sizing: border-box;
+  color: var(--td-Search-info-color-1);
+  .message-popup-title {
+    font-size: 18px;
+  }
+  .message-popup-body {
+    color: var(--td-Search-info-color-1);
+    margin-top: 10px;
+    p {
+      padding-top: 16px;
+      margin: 0;
+    }
+  }
+  .message-popup-footer {
+    text-align: right;
+    .clear-btn {
+      background: #9a9a9a;
+      margin-right: 12px;
+    }
+    .submit-btn {
+      background: #287eff;
+    }
+    .t-button {
+      height: 32px;
+      color: white;
+      border-radius: 5px;
+      border: none;
+    }
+  }
+}
+</style>

views/token/collection/index.tsx

@@ -4,30 +4,26 @@ import {
   ref,
   reactive,
   TransitionGroup,
-} from 'vue';
-import { useI18n } from 'vue-i18n';
-import EditSvg from '/public/images/svg/collection/edit.svg';
-import './index.less';
-import DefaultTokenSvg from '/public/images/svg/collection/filter-default-icon.svg';
-import StickyTopSvg from '/public/images/svg/collection/StickyTop.svg';
-import DragSvg from '/public/images/svg/collection/Drag.svg';
-import DeleteSvg from '/public/images/svg/collection/delete.svg';
-import { myCollect } from '@/utils/api';
-import Animation from '@/components/Animation.vue';
-import { loading_background } from '@/constants/global';
+} from "vue";
+import { useI18n } from "vue-i18n";
+import EditSvg from "/public/images/svg/collection/edit.svg";
+import "./index.less";
+import DefaultTokenSvg from "/public/images/svg/collection/filter-default-icon.svg";
+import StickyTopSvg from "/public/images/svg/collection/StickyTop.svg";
+import DragSvg from "/public/images/svg/collection/Drag.svg";
+import DeleteSvg from "/public/images/svg/collection/delete.svg";
+import { myCollect } from "@/utils/api";
+import Animation from "@/components/Animation.vue";
+import { loading_background } from "@/constants/global";
 import {
   TableSort,
   TableSortAsc,
   ArrayItemSticky,
   ArraySpecifiedPosition,
-} from '@/utils/tool';
-import CustomTableSort from '../tableSort.vue';
-import { filterChainObj } from '@/constants/UnifiedManagementChain';
-import {
-  deleteCollection,
-  changeCollection,
-  getCollectionList,
-} from '@/utils/cache';
+} from "@/utils/tool";
+import CustomTableSort from "../tableSort.vue";
+import { filterChainObj } from "@/constants/UnifiedManagementChain";
+import { deleteCollection, changeCollection } from "@/utils/cache";
 export default defineComponent({
   setup(props) {
     const { t } = useI18n();
@@ -35,7 +31,7 @@ export default defineComponent({
     const chain = useChain();
     const ChainObj = ref<any>({});
     // 收藏模块的高度
-    const CollectHeight = ref('');
+    const CollectHeight = ref("");
     // 收藏表格是否更新
     const CollectionCl = CollectionChange();
     const loading = ref(false);
@@ -52,11 +48,11 @@ export default defineComponent({
     /**
      * 当前状态-default----edit
      */
-    const currentType = ref('default');
+    const currentType = ref("default");
     const sortOptions = reactive({
       r24h: {
-        field: 'r24h',
-        type: 'all',
+        field: "r24h",
+        type: "all",
         status: false,
       },
     });
@@ -65,30 +61,30 @@ export default defineComponent({
       filterlist: [],
     });
     const getChainObj = () => {
-      let obj = filterChainObj('value', chain.value);
+      let obj = filterChainObj("value", chain.value);
       if (obj) {
         ChainObj.value = obj;
       }
     };
     getChainObj();
     const LatestStatus = () => {
-      return currentType.value == 'default';
+      return currentType.value == "default";
     };
     // 需要计算剩余高度
     const getCurrentHtmlHeight = () => {
-      let collectBox = document.getElementById('collectionBox');
+      let collectBox = document.getElementById("collectionBox");
       if (collectBox) {
         let client = collectBox.getBoundingClientRect();
         // 获取文档高度
         let domHeight = document.documentElement.clientHeight;
-        CollectHeight.value = domHeight - client.top + 'px';
+        CollectHeight.value = domHeight - client.top + "px";
       }
     };
     const toEdit = () => {
       if (LatestStatus()) {
-        currentType.value = 'edit';
+        currentType.value = "edit";
       } else {
-        currentType.value = 'default';
+        currentType.value = "default";
       }
     };
     // 鼠标按下
@@ -97,7 +93,7 @@ export default defineComponent({
       // 开始位置
       MouseParameter.StartY = e.clientY;
       // 重新获取tr的高度collect-tr
-      let trDom = document.querySelector('.collect-tr');
+      let trDom = document.querySelector(".collect-tr");
       if (trDom) {
         MouseParameter.trHeight = trDom.clientHeight;
       }
@@ -176,10 +172,10 @@ export default defineComponent({
       changeCollection(toRaw(StartList.list));
     };
     const submitSort = ({ sort, field }: any) => {
-      if (sort === 'asc') {
+      if (sort === "asc") {
         // 升序
         StartList.list = TableSortAsc(StartList.list, field);
-      } else if (sort === 'desc') {
+      } else if (sort === "desc") {
         // 降序
         StartList.list = TableSort(StartList.list, field);
       } else {
@@ -209,7 +205,7 @@ export default defineComponent({
       if (!LatestStatus()) {
         return;
       }
-      let newtb = tb[0] == 'd' ? tb.slice(1, tb.length) : tb;
+      let newtb = tb[0] == "d" ? tb.slice(1, tb.length) : tb;
       let res = router.resolve({
         path: `${chain.value}/${newtb}`,
       });
@@ -240,14 +236,14 @@ export default defineComponent({
           <span></span>
           <span class="title">
             {LatestStatus()
-              ? t('collection.r24hCollect')
-              : t('collection.editor')}
+              ? t("collection.r24hCollect")
+              : t("collection.editor")}
           </span>
           <span class="edit-icon" onClick={toEdit}>
             {LatestStatus() ? (
               <EditSvg></EditSvg>
             ) : (
-              <span class="Finish-text">{t('home.Finish')}</span>
+              <span class="Finish-text">{t("home.Finish")}</span>
             )}
           </span>
         </div>
@@ -255,30 +251,30 @@ export default defineComponent({
           <table>
             <thead>
               <tr>
-                {LatestStatus() ? '' : <th></th>}
-                <th class="token-th">{t('collection.token')}</th>
+                {LatestStatus() ? "" : <th></th>}
+                <th class="token-th">{t("collection.token")}</th>
                 <th>
                   {LatestStatus() ? (
                     <div>
-                      <div>{t('collection.newHolder')}/</div>
-                      {t('collection.Numbertrades')}
+                      <div>{t("collection.newHolder")}/</div>
+                      {t("collection.Numbertrades")}
                     </div>
                   ) : (
-                    <div>{t('collection.top')}</div>
+                    <div>{t("collection.top")}</div>
                   )}
                 </th>
                 <th>
                   {LatestStatus() ? (
                     <div class="r24h-th-sort">
-                      {t('collection.r24h')}
+                      {t("collection.r24h")}
                       <CustomTableSort
-                        options={sortOptions['r24h']}
+                        options={sortOptions["r24h"]}
                         field="old24h"
                         onSubmitSort={submitSort}
                       ></CustomTableSort>
                     </div>
                   ) : (
-                    t('collection.sort')
+                    t("collection.sort")
                   )}
                 </th>
               </tr>
@@ -289,13 +285,13 @@ export default defineComponent({
                   <tr
                     key={item.tb}
                     class={[
-                      'collect-tr',
-                      LatestStatus() ? 'tr-pointer' : 'tr-none',
+                      "collect-tr",
+                      LatestStatus() ? "tr-pointer" : "tr-none",
                     ]}
                     onClick={toKline.bind(this, item.tb)}
                   >
                     {LatestStatus() ? (
-                      ''
+                      ""
                     ) : (
                       <td class="edit-td">
                         <t-checkbox v-model={item.select}></t-checkbox>
@@ -333,8 +329,8 @@ export default defineComponent({
                           <div class="price">{item.up}</div>
                           <div
                             class={[
-                              'r24h',
-                              item.r24h[0] == '-' ? 'down' : 'up',
+                              "r24h",
+                              item.r24h[0] == "-" ? "down" : "up",
                             ]}
                           >
                             {item.r24h}
@@ -359,16 +355,16 @@ export default defineComponent({
           <div class="collection-footer">
             <div class="check-all">
               <t-checkbox v-model={checkAll.value} onChange={onCheckAll}>
-                {t('collection.selectall')}
+                {t("collection.selectall")}
               </t-checkbox>
             </div>
             <div class="delete-collection" onClick={DeleteSelected}>
               <DeleteSvg></DeleteSvg>
-              <span class="delete-text">{t('collection.delete')}</span>
+              <span class="delete-text">{t("collection.delete")}</span>
             </div>
           </div>
         ) : (
-          ''
+          ""
         )}
         <div v-show={loading.value}>
           <Animation background={loading_background}></Animation>