wallet_app/src/views/me/walletManagement/index.vue

<template>
    <div class="container">
        <div class="tab-box">
            <div class="tab-box-text" 
                :class="tabIndex == i?'active-border':''" 
                v-for="(item,i) in tabList" :key="i" @click="tabIndex = i"
            >
                <van-image class="tab-box-icon" round :src="item.img"/>
                <text>{{item.name}}</text>
            </div>
        </div>
        <div class="content">
            <Draggable v-model="items" item-key="id">
                <template #item="{ element }">
                    <div class="sort-box">
                        <div class="sort-title">
                            <div>{{ element.name }}</div>
                            <svg-icon class="sort-icon" name="px" />
                        </div>

                        <div class="card-box" :class="element.id == walletStore.id?'active-border':''">
                            <div class="card-box-lf">
                                <van-image class="card-box-lf-icon" round :src="element.img"/>
                                <div class="card-box-lf-text">
                                    <div>{{ element.name }}</div>
                                    <div class="address">
                                    <span>{{ short(element.address) }}</span>
                                    <svg-icon class="im-copy-btn" name="copy" style="width:16px;height:16px;margin-left:2px" :data-clipboard-text="element.address"/>
                                    </div>
                                </div>
                            </div>
                            <svg-icon name="bj" style="width:16px;height:16px;color:#4F4F4F" @click="goToPage(element.id)"/>
                        </div>
                    </div>
                </template>
            </Draggable>
        </div>
    </div>
</template>

<script setup>
import Draggable from 'vuedraggable';
import { useWalletStore } from '@/stores/modules/walletStore';
import { useRouter } from 'vue-router'
import { useCopy } from "@/hooks/use-copy.js";
useCopy();
const walletStore = useWalletStore();
const router = useRouter();

const tabList = [
  { name: 'ACC', img: 'https://wallet.angeltokens.io/storage/images/acc.svg' },
  { name: 'Ethereum', img: 'https://wallet.angeltokens.io/storage/images/eth.svg' },
  { name: 'BNB', img: 'https://wallet.angeltokens.io/storage/images/bsc.svg' }
];
const tabIndex = ref(0);

/* 地址缩写 */
const short = (addr) =>
  addr ? addr.slice(0, 6) + '...' + addr.slice(-6) : '';

/* 核心：带 setter 的 computed */
const items = computed({
  /* getter：根据当前 tab 过滤 */
  get() {
    const currName = tabList[tabIndex.value].name;
    return walletStore.walletList
      .filter(w => w.accountName === currName)
      .map(w => ({
        id: w.id,
        name: w.username,
        img: w.avatar,
        address: w.account,
        _raw: w,            // 保留原始对象引用，更新时用
      }));
  },
  /* setter：拖拽后新顺序 -> 回写 Pinia */
  set(newOrder) {
    const currName = tabList[tabIndex.value].name;

    // 取出其他币种保持原顺序
    const others = walletStore.walletList.filter(
      w => w.accountName !== currName
    );

    // 新顺序的新数组（去掉临时字段 _raw）
    const reordered = newOrder.map(o => o._raw);

    // 合并并回写
    walletStore.walletList = [...others, ...reordered];

    // 有 pinia-plugin-persist 时，这一句可省；否则手动持久化
    walletStore.$persist?.();
  },
});
const goToPage = (id) => {
    router.push({
      path: 'walletDetail',
      query:{
        id
      }
    })
}

</script>

<style scoped lang="less">
.container{
height: 100%;
    display: flex;
    flex-direction: column;
}
.content{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.content::-webkit-scrollbar{
  width: 0;
}
.tab-box{
    margin: 16px 16px 24px;
    display: flex;
    align-items: center;
    .tab-box-text{
        border-radius: 27px;
        border: 1px solid #8D8D8D;
        display: flex;
        align-items: center;
        padding: 6px 8px;
        margin-right: 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #8D8D8D; 
        .tab-box-icon{
            width: 20px; 
            height: 20px;
            margin-right: 4px;
        }
    }
    .active-border{
        border: 1px solid #000000;
        color: #000000;
    }
}
.sort-box{
    padding: 0 16px;
    margin-bottom: 17px;
    cursor: move;
    .sort-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #4F4F4F;
        margin-bottom: 6px;
        .sort-icon{
            width: 16px; 
            height: 16px;
        }
    }
    .card-box{
        background: #F2F2F2;
        border-radius: 8px;
        border: 1px solid #D8D8D8;
        padding: 16px 42px 16px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .card-box-lf{
            display: flex;
            align-items: center;
            .card-box-lf-icon{
                width: 30px; 
                height: 30px;
                margin-right: 8px;
            }
            .card-box-lf-text{
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #000000;
                .address{
                    font-size: 12px;
                    color: #8D8D8D;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
    .active-border{
        border: 1px solid @theme-color1;
    }
}
</style>