打包优化

tsconfig.json

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

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>