udxcms 1.0.8 → 1.0.10

package/dist/components/pageComponents/header/header_b.vue

@@ -1,621 +0,0 @@
-<template>
-  <div class="header-wrapper" :class="['theme-' + themeMode]">
-    <div class="header-inner" :class="{ 'header-fixed': headerFixed }">
-      <div class="header-left ivu-scroll">
-        <div class="logo-wrapper" @click="toHome">
-          <img
-            :src="logoUrl"
-            class="logo"
-            v-theme="{ height: commonConfig.logoHeight }"
-          />
-          <!-- 处理不同主题 -->
-          <div class="origin-img">
-            <img
-              :src="logoUrl"
-              class="logo-origin"
-              v-theme="{ height: commonConfig.logoHeight }"
-            />
-          </div>
-        </div>
-        <ul class="menu-wrapper" v-show="showMiddleInfo">
-          <li
-            v-for="(item, index) in navList"
-            :key="index"
-            @click="onClickMenu(item)"
-          >
-                        <span class="menu-text">
-                            {{ item.bar_name }}
-                            <a-icon
-                              v-if="item.child.length"
-                              type="caret-down" class='icon'/>
-                            <menu-tag :content='item.menu_tag' v-if='item.menu_tag' top='-10px'></menu-tag>
-                        </span>
-
-            <!-- sub menu -->
-            <SubMenuMore :menus="item.child" :isBasic='isBasic'></SubMenuMore>
-            <!-- <div class="menu-dropdown" v-if="item.child.length">
-  <div class="submenu-wrapper">
-    <div
-      class="submenu-item"
-      v-for="(subItem, subIndex) in item.child"
-      :key="subIndex"
-      @click="onClickMenu(subItem)"
-    >
-      {{ subItem.bar_name }}
-    </div>
-  </div>
-</div> -->
-          </li>
-        </ul>
-      </div>
-      <ul class="user-wrapper">
-
-
-        <!-- 已登录 - 订单 -->
-        <li v-if="account && !hideWalletBtn" class="my-orders">
-					<span class="menu-text">
-						{{ $t("user_common_portfolio") }}
-					</span>
-          <!-- sub menu -->
-          <BasePopup class="menu-dropdown">
-            <BaseMenu menuType="portfolio"/>
-          </BasePopup>
-          <!-- <div class="menu-dropdown">
-            <div class="submenu-wrapper">
-              <div
-                class="submenu-item"
-                @click="toOrder('orders')"
-              >
-                {{ $t("trade_history_open_orders") }}
-              </div>
-              <div
-                class="submenu-item"
-                @click="toOrder('history')"
-              >
-                {{ $t("trade_history_order_history") }}
-              </div>
-            </div>
-          </div> -->
-        </li>
-        <li v-if='!hideWalletBtn'>
-          <NetworkSelect
-            :networks="walletNetworks"
-            :defaultChainId="chainId"
-            :isShowLabel='!account && !walletAccount'
-            :chainChangeLogin='true'
-            @change="changeChain"
-          />
-        </li>
-        <!-- 已登录 - 钱包 -->
-        <li v-if="(account || isLocked) && !hideWalletBtn">
-          <WalletConnected/>
-        </li>
-        <li v-else-if='!hideWalletBtn'>
-          <a-button
-            class="wallet-connect"
-            type="primary"
-            @click="login"
-          >
-            {{ $t("wallet_common_connect") }}
-          </a-button>
-        </li>
-
-        <!-- 语言/法币 -->
-        <li class="lang-currency" @mouseenter="isShowCurrency = true">
-                    <span class="menu-text">
-                        {{ lang }}/{{ currency.name || "USD" }}
-                    </span>
-          <a-icon type="caret-down"/>
-          <div class="menu-dropdown currency-dropdown">
-            <Currency
-              v-model="isShowCurrency"
-              top="0"
-              left=""
-              right="0"
-              :isClickstatus="false"
-              @setLang="setLang"
-            />
-          </div>
-        </li>
-        <!-- 主题切换 -->
-        <li v-if="themeSwitchVisible" class="theme-icons">
-          <SvgIcon
-            v-if="themeMode === 'dark'"
-            icon-class="day"
-            stroke="none"
-            className="theme-icon"
-            @click="setTheme('light')"
-          />
-          <SvgIcon
-            v-else
-            icon-class="night"
-            stroke="none"
-            className="theme-icon"
-            @click="setTheme('dark')"
-          />
-        </li>
-      </ul>
-    </div>
-
-    <!-- faucet tips -->
-    <a-modal
-      v-model="faucetTips.show"
-      :width="420"
-      :title="faucetTips.title"
-      :footer="null"
-    >
-      <p class="mb">{{ faucetTips.content }}</p>
-      <p>
-        <a-button type="primary" block @click="goThirdUrl">
-          {{ faucetTips.btnText }}
-        </a-button>
-      </p>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import config from "../../../config/index";
-import _ from "lodash";
-import themeMixin from "../../../mixins/themeMixin";
-
-export default {
-  name: "HeaderB",
-  mixins: [themeMixin],
-  props: {
-    navList: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    scrollTop: {
-      type: Number,
-      default: null,
-    },
-    showMiddleInfo: {
-      type: Boolean,
-      default: true,
-    },
-    hideWalletBtn: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      isShowCurrency: false,
-      lang: "",
-      language: localStorage.getItem("language") || config.baseLanguage,
-
-      walletMenuVisible: true,
-      token: localStorage.getItem("TOKEN"),
-
-      // faucet tips
-      faucetTips: {
-        title: this.$t("common_base_gothird_url_tips_title"),
-        show: false,
-        content: this.$t("common_base_gothird_url_tips_content"),
-        url: "",
-        btnText: this.$t("common_base_gothird_url_btn_text"),
-      },
-      headerFixed: false
-    };
-  },
-  computed: {
-
-    commonConfig() {
-      return this.$store.state.theme.common.common_conf;
-    },
-    logoUrl() {
-      return window.site_config[
-      "site_common_logo_image_" + location.hostname
-        ];
-      // return this.$t("site_common_logo_image_"+ location.hostname);
-      // return this.logoSrc + "/en_US/w72.png";
-    },
-    userInfo() {
-      return this.$store.state.user.userInfo || {};
-    },
-    btcWallet() {
-        return this.$store.state.wallet.btcWallet || {}
-    },
-    account() {
-        return this.btcWallet?.btcAccoount || this.$store.getters.account || "";
-    },
-    isLocked() {
-      return this.$store.getters.isLocked;
-    },
-    walletAccount() {
-      return this.walletData && this.walletData.getAddress();
-    },
-    chainId() {
-      return this.$store.state.chainId;
-    },
-    walletNetworks() {
-      return this.$store.getters.walletNetworks;
-    },
-    currency() {
-      return this.$store.state.user.currency;
-    },
-    chainIcon() {
-      const networkDetail = this.$store.getters.filterNetworkItem(
-        this.chainId,
-        "L1"
-      );
-      return networkDetail.networkLogo;
-    },
-
-    userMenus() {
-      return this.$store.state.navigation.user;
-    },
-    walletIcon() {
-      return this.$store.getters.walletIcon || '';
-    },
-    isBasic() {
-      return this.$store.state.siteConfig.tradeMoel == 'Basic';
-    }
-  },
-  watch: {
-    account() {
-      this.checkAccount();
-
-    },
-  },
-  created() {
-    window.addEventListener("scroll", this.scrollFn());
-  },
-  mounted() {
-    // refresh event
-    this.$nextTick(() => {
-      $Vue.$bus.$on("refresh", (events) => {
-        events.map((type) => {
-          switch (type) {
-            case "initActiveUser":
-              this.checkAccount();
-              break;
-            default:
-              break;
-          }
-        });
-      });
-    });
-  },
-  methods: {
-    scrollFn() {
-      return _.throttle(() => {
-        let scrollT = window.scrollY;
-        if (scrollT >= this.scrollTop) {
-          this.headerFixed = true;
-        } else {
-          this.headerFixed = false;
-        }
-      }, 50);
-    },
-    checkAccount() {
-      this.token = localStorage.getItem("TOKEN");
-    },
-    toHome() {
-      this.$router.push({
-        path: "/",
-      });
-    },
-    onClickMenu(item) {
-      console.log("item:", item);
-      // 监听trade/spot
-      if (this.isBasic && item.click_url.includes('/trade?')) {
-        item.click_url = item.click_url.replace('/trade', '/trade/spot/swap');
-        console.log('item.click_url', item.click_url);
-      }
-      if (item.child && item.child.length) return;
-      if (item.click_url.startsWith("http")) {
-        if (item.bar_name !== "Faucet") {
-          window.open(item.click_url, "_blank");
-        } else {
-          // faucet 有提示。
-          this.faucetTips.show = true;
-          this.faucetTips.url = item.click_url;
-        }
-      } else {
-        this.$router.push({
-          path: item.click_url,
-        });
-      }
-    },
-    goThirdUrl(url) {
-      if (url) {
-        window.open(this.faucetTips.url, "_blank");
-      }
-      this.faucetTips.show = false;
-    },
-    toOrder(type) {
-      let tradeMode = this.$store.state.trade.tradeMode || "spot";
-      let tradeChainId = this.$store.state.trade.tradeChainId || "";
-      let query = {
-        type: type,
-        chainId: tradeChainId,
-      };
-      if (!query.chainId) delete query.chainId;
-      this.$router.push({
-        path: `/order/history/${tradeMode}`,
-        query: query,
-      });
-    },
-    async changeChain(chainId) {
-      this.$store.commit("setChainId", chainId);
-    },
-    login() {
-      $Vue.$bus.$emit("linkWalletByConnetBtn");
-    },
-    setLang(lang) {
-      this.lang = lang;
-      this.language = localStorage.getItem("language");
-    },
-    formatAccount(value) {
-      if (!value) return '';
-      return value.slice(0, 4) + "******" + value.slice(-4, value.length);
-    },
-  },
-};
-</script>
-
-<style lang="less">
-// 影响到wallet 需要将逻辑移动到 trade 页面。
-// .theme-light {
-// 	// 浅色风格下logo处理
-// 	.header-wrapper {
-// 		.logo-wrapper {
-// 			.logo {
-// 				filter: invert(1);
-// 			}
-// 			.origin-img {
-// 				display: block;
-// 				width: 36px;
-// 			}
-// 		}
-// 	}
-// }
-
-.header-wrapper {
-  --height: 36px;
-  height: 60px;
-
-  .header-inner {
-    font-size: 14px;
-    background-color: var(--header-bg-color);
-    height: 60px;
-    padding: 0 14px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &.header-fixed {
-      position: fixed;
-      z-index: 1000;
-      left: 0;
-      right: 0;
-
-      transition: transform 0.3s ease;
-      top: -100px;
-      transform: translateY(100px);
-      background-color: transparent;
-      box-shadow: var(--box-shadow-base);
-
-      &::before {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background: var(--header-fixed-bg-color);
-        backdrop-filter: blur(15px);
-      }
-    }
-  }
-
-  .header-left {
-    display: flex;
-    align-items: center;
-  }
-
-  .logo-wrapper {
-    position: relative;
-    overflow: hidden;
-    flex: none;
-
-    .logo {
-      height: var(--height);
-    }
-
-    .origin-img {
-      display: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      overflow: hidden;
-    }
-  }
-
-  li {
-    height: var(--height);
-    line-height: var(--height);
-    cursor: pointer;
-    position: relative;
-
-    .menu-text {
-      display: flex;
-      white-space: nowrap;
-      align-items: center;
-    }
-
-    &:hover {
-      .menu-text {
-        color: var(--link-color);
-      }
-
-      .menu-dropdown {
-        display: block;
-      }
-    }
-
-    .anticon {
-      font-size: 12px;
-      margin-left: 4px;
-    }
-  }
-
-  .menu-wrapper {
-    margin-left: 30px;
-    display: flex;
-    align-items: center;
-    gap: 26px;
-  }
-
-  .menu-dropdown {
-    display: none;
-    position: absolute;
-    top: var(--height);
-    left: 0;
-    min-width: 160px;
-    z-index: 800;
-
-    /deep/ .portfolio {
-      ul {
-        background: var(--popup-bg);
-        border-radius: var(--border-radius-base);
-        box-shadow: var(--box-shadow-base);
-
-        li {
-          margin: 0px;
-          height: 48px;
-          line-height: 48px;
-          font-size: 16px;
-          color: var(--text-color);
-          white-space: nowrap;
-
-          &:hover {
-            color: var(--link-color);
-            background-color: var(--select-item-bg);
-          }
-        }
-      }
-    }
-
-    &.currency-dropdown {
-      right: 0;
-      left: auto;
-    }
-
-    .submenu-wrapper {
-      // margin-top: 10px;
-      background: var(--popup-bg);
-      border-radius: var(--border-radius-base);
-      overflow: hidden;
-      box-shadow: var(--box-shadow-base);
-
-      .submenu-item {
-        height: 48px;
-        line-height: 48px;
-        padding: 0 16px;
-        font-size: 16px;
-        white-space: nowrap;
-
-        &:hover {
-          background-color: var(--select-item-bg);
-          color: var(--link-color);
-        }
-      }
-    }
-  }
-
-  .user-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-left: 20px;
-
-    .my-orders, .my-portfolio {
-      margin-right: 12px;
-    }
-
-    .wallet-connect {
-      height: var(--height);
-      font-size: 14px;
-      // &:hover {
-      // 	color: var(--primary-color);
-      // 	background-color: var(--white);
-      // }
-      &:hover,
-      &:active {
-        color: var(--login-text-color-hover);
-        background-color: var(--login-color-hover);
-        border: 1px solid var(--login-color-hover);
-      }
-    }
-
-    .lang-currency {
-      position: relative;
-      display: flex;
-      align-items: center;
-    }
-
-    .theme-icons {
-      display: flex;
-      align-items: center;
-    }
-
-    .theme-icon {
-      // 24px
-      width: 20px;
-      height: 20px;
-      // padding: 10px;
-    }
-  }
-
-  // wallet-connected
-  .wallet-connected {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--border-color-base);
-    height: var(--height);
-    border-radius: var(--border-radius-base);
-    padding: 8px 12px;
-
-    img {
-      width: 24px;
-      height: 24px;
-    }
-
-    .icon-locked {
-      font-size: 14px;
-    }
-
-    .user-account {
-      margin: 0 6px;
-    }
-
-    &.wallet-locked {
-      color: var(--error-color);
-    }
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .header-wrapper {
-    .menu-wrapper {
-      margin-left: 20px;
-    }
-  }
-}
-
-@media screen and (min-width: 1500px) {
-  .header-wrapper {
-    .menu-wrapper {
-      margin-left: 80px;
-      width: fit-content;
-    }
-  }
-}
-</style>