Skip to content

D
dexfilter-web-nuxt3
Commit d0ad903e by haojie
Options

1

parent b16cb9c6
Showing with 111 additions and 113 deletions
nuxt.config.ts
import viteCompression from "vite-plugin-compression";
import viteCompression from 'vite-plugin-compression';
// import visualizer from 'rollup-plugin-visualizer';
// 筛选接口地址
let filterApi = "http://156.247.9.93:9501/";
let loginApi = "http://156.247.9.93:8001/";
let filterApi = 'http://156.247.9.93:9501/';
let loginApi = 'http://156.247.9.93:8001/';
export default defineNuxtConfig({
// plugins: [],
modules: ["nuxt-svgo", "@nuxtjs-alt/proxy"],
modules: ['nuxt-svgo', '@nuxtjs-alt/proxy'],
proxy: {
enableProxy: true,
proxies: {
"/score": {
'/score': {
target: filterApi,
changeOrigin: true,
},
"/v1": {
'/v1': {
target: filterApi,
changeOrigin: true,
},
"/search": {
'/search': {
target: filterApi,
changeOrigin: true,
},
"/favorites": {
'/favorites': {
target: filterApi,
changeOrigin: true,
},
//api-ip是另外滴
"/api": {
'/api': {
target: loginApi,
changeOrigin: true,
},
......@@ -40,16 +40,16 @@ export default defineNuxtConfig({
// },
vite: {
plugins: [viteCompression()],
envDir: "~/env",
envDir: '~/env',
build: {
minify: "terser", // 混淆器，terser构建后文件体积更小
minify: 'terser', // 混淆器，terser构建后文件体积更小
// 构建后是否生成 source map 文件
// sourcemap: 'hidden',
cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
terserOptions: {
compress: {
//生产环境时移除console
drop_console: false,
drop_console: true,
// drop_debugger: true,
},
output: {
......@@ -60,8 +60,8 @@ export default defineNuxtConfig({
rollupOptions: {
output: {
manualChunks: {
TdesignVueNext: ["tdesign-vue-next"],
CustomEcharts: ["echarts"],
TdesignVueNext: ['tdesign-vue-next'],
CustomEcharts: ['echarts'],
},
},
},
......@@ -72,11 +72,11 @@ export default defineNuxtConfig({
// vendor-已被弃用
// 第三方插件转es5
transpile:
process.env.NODE_ENV === "production"
? ["tdesign-vue-next", "echarts", "vue-i18n"]
: ["echarts"],
process.env.NODE_ENV === 'production'
? ['tdesign-vue-next', 'echarts', 'vue-i18n']
: ['echarts'],
// cssSourceMap: true,
// analyze: true,
},
css: ["@/style/font-family.css"],
css: ['@/style/font-family.css'],
});
views/token/RightDetail.vue
<template>
<!-- <div class="right-detail-wrapper">
<div class="right-detail-wrapper">
<div class="right-header">
<template v-for="item in headerBtns" :key="item.value">
<t-button
......@@ -105,27 +105,26 @@
></details-echarts>
</div>
</template>
</div> -->
<div></div>
</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";
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';
const router = useRouter();
const { t, locale } = useI18n();
// 通知表格收藏图表取消收藏
......@@ -134,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({
......@@ -155,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(
......@@ -214,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;
......@@ -236,7 +235,7 @@ watch(
);
// 流动池tab改变
const changeTab = (value) => {
if (value === "pool") {
if (value === 'pool') {
isPool.value = true;
}
};
......@@ -250,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);
......@@ -284,7 +283,7 @@ const getTokenInfo = async () => {
watch(
() => locale.value,
(v) => {
if (defaBtn.value == "echart") {
if (defaBtn.value == 'echart') {
WatchEcharts.value += 1;
}
}
......@@ -292,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;
}
......@@ -316,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;
......@@ -333,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;
......@@ -362,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);
......@@ -438,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/rightDetailHeader.vue
......@@ -10,7 +10,7 @@
</div>
<div class="address-info">
<span class="address-info-item">
<span>{{ $t("TableList.token") }}</span>
<span>{{ $t('TableList.token') }}</span>
<span class="address">：{{ tokenInfo.tokenSub }}</span>
<span @click="doCopy(tokenInfo.token)">
<CopySvg></CopySvg>
......@@ -19,7 +19,7 @@
</div>
<div class="address-info margin">
<span class="address-info-item">
<span>{{ $t("TableList.pool") }}</span>
<span>{{ $t('TableList.pool') }}</span>
<span class="address">：{{ tokenInfo.tbnameSub }}</span>
<span @click="doCopy(tokenInfo.n_tb)">
<CopySvg></CopySvg>
......@@ -36,7 +36,6 @@
color: r24hColor(),
}"
>
<Price tokenInfo="{props.tokenInfo}"></Price>
{{ getPrice() }}
</div>
<div
......@@ -67,14 +66,14 @@
</template>
<script lang="ts" setup>
import { defineComponent, computed } from "vue";
import { useI18n } from "vue-i18n";
import CopySvg from "/public/images/svg/rightDetail/copy.svg";
import useCopy from "@/hooks/useCopy";
import * as Cache from "@/utils/cache";
import CollectionSvg2 from "/public/images/svg/rightDetail/colection2.svg";
import CollectionSvg3 from "/public/images/svg/rightDetail/collection-yes.svg";
import { parseCoinAmount } from "@/utils/tool";
import { defineComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import CopySvg from '/public/images/svg/rightDetail/copy.svg';
import useCopy from '@/hooks/useCopy';
import * as Cache from '@/utils/cache';
import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
import { parseCoinAmount } from '@/utils/tool';
const props = defineProps<{
tokenInfo: any;
numR24h: string;
......@@ -83,7 +82,7 @@ const props = defineProps<{
tb: string;
currentPath: string;
}>();
const emit = defineEmits(["update:isInCollection"]);
const emit = defineEmits(['update:isInCollection']);
const { t } = useI18n();
// 收藏表格是否更新
const CollectionCl = CollectionChange();
......@@ -92,19 +91,19 @@ const getPrice = () => {
try {
const { tokenInfo } = props;
if (tokenInfo) {
if ("up" in tokenInfo) {
if ('up' in tokenInfo) {
let up = parseCoinAmount(tokenInfo.up);
if (up.indexOf("{") !== -1) {
if (up.indexOf('{') !== -1) {
up = up.slice(0, up.length - 2);
}
return up;
} else {
return "";
return '';
}
}
} catch (e) {
console.log(e);
return "";
return '';
}
};
const collectData = () => {
......@@ -117,24 +116,24 @@ const collectData = () => {
},
]);
}
emit("update:isInCollection", false);
emit('update:isInCollection', false);
} else {
Cache.setCollection({
hash: tb,
symbol: tokenInfo.symbol,
path: currentPath,
});
emit("update:isInCollection", true);
emit('update:isInCollection', true);
}
// 通知select中的收藏数据更新
CollectionCl.value += 1;
};
const r24hColor = () => {
if (props.r24h) {
if (props.r24h[0] === "-") {
return "#f85260";
if (props.r24h[0] === '-') {
return '#f85260';
} else {
return "#23ab94";
return '#23ab94';
}
}
};
......@@ -142,21 +141,21 @@ const getImg = computed(() => {
const { tokenInfo } = props;
try {
if (Object.keys(tokenInfo).length) {
if ("chat" in tokenInfo) {
if ('chat' in tokenInfo) {
return tokenInfo.chat.img;
} else {
return "/images/img/default-avatar.png";
return '/images/img/default-avatar.png';
}
}
} catch (e) {
console.log(e);
return "/images/img/default-avatar.png";
return '/images/img/default-avatar.png';
}
});
</script>
<style lang="less">
@import "@/style/flex.less";
@import '@/style/flex.less';
.header-token-box {
margin-top: -1px;
box-sizing: border-box;
......@@ -199,7 +198,7 @@ const getImg = computed(() => {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: "bold";
font-family: 'bold';
}
img {
width: 38px;
......@@ -214,7 +213,7 @@ const getImg = computed(() => {
.address-info {
display: flex;
color: var(--new-color-7);
font-family: "Regular";
font-family: 'Regular';
margin-top: 1px;
.address-info-item {
font-size: var(--font-size);
......@@ -247,7 +246,7 @@ const getImg = computed(() => {
font-weight: 700;
font-size: 28px;
min-height: 50px;
font-family: "bold";
font-family: 'bold';
color: var(--td-Search-info-color-1);
}
.r24h-cl {
......@@ -255,7 +254,7 @@ const getImg = computed(() => {
font-weight: normal;
margin-top: -3px;
text-align: right;
font-family: "Medium";
font-family: 'Medium';
}
}
.kline-btn {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment