list

src/App.vue

@@ -3,9 +3,12 @@
 </template>
 
 <style lang="less">
-html, body {
+html, body, #app {
+    overflow: hidden;
     margin: 0;
     padding: 0;
+    width: 100%;
+    height: 100%;
     user-select: none;
     font-family: "Segoe UI", Helvetica, Arial, sans-serif;
 }

src/components/header.vue

@@ -48,12 +48,15 @@ const twitterAuth = () => {
             timer.value = setInterval(() => {
                 if (win && win.closed) {
                     clearInterval(timer.value);
-                    removeStorage(storageKey.verifier);
                     twitterLogin(data);
                 }
             }, 500)
         } else {
-            ElMessage({ message: msg })
+            ElMessage({
+                offset: 100,
+                type: 'error',
+                message: msg,
+            })
         }
     })
 }
@@ -75,7 +78,8 @@ const twitterLogin = (data: { authToken: string, consumerKey: string }) => {
             let { code, data } = res;
             if ( code === 0 ) {
                 setStorage(storageKey.userInfo, data);
-                router.push(`/nftList`)
+                removeStorage(storageKey.verifier);
+                router.push(`/nft/list`)
             }
         })
     }

src/pages/close.vue

@@ -1,15 +1,43 @@
+<template>
+    <div class="welcome">
+        <span class="text">授权成功</span>
+    </div>
+</template>
+
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import { setStorage, storageKey } from '../static/utils/storage'
 
+const close = () => {
+    window.close()
+}
+
 onMounted(() => {
     let url = new URL(window.location.href);
     let search = url.search;
     let urlParams  = new URLSearchParams(search);
     let verifier: any = urlParams.get('oauth_verifier');
     // set
-    setStorage(storageKey.verifier, verifier)
-    // close
-    window.close()
+    if (verifier) {
+        setStorage(storageKey.verifier, verifier)
+        // @ts-ignore
+        let time = process.env.NODE_ENV === 'production' ? 500 : 2000;
+        setTimeout(() => {
+            close()
+        }, time)
+    }
 })
-</script>
+</script>
+
+<style lang="less" scoped>
+.welcome {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    .text {
+        font-size: .5rem;
+    }
+}
+</style>

src/pages/nft/add.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="center">
+        <div class="title">Create NFTs</div>
+        <div class="content">
+            <div class="l">
+                <div class="name">Preview</div>
+                <div class="show"></div>
+            </div>
+            <div class="r">
+                <div class="name">Card face</div>
+                <div class="name">Project Name</div>
+                <div class="name">Project Description</div>
+                <div class="name">Collection Size</div>
+                <div class="name">NFTs Price</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.center {
+    padding: 0 50px;
+    max-width: 1100px;
+    margin: 10px auto 0;
+    box-sizing: border-box;
+    height: calc(100% - 10px);
+    background-color: #fff;
+    border-radius: 20px 20px 0 0;
+    .title {
+        padding: 22px 0;
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 24px;
+    }
+    .content {
+        width: 100%;
+        clear: both;
+        display: flex;
+        justify-content: space-between;
+        .name {
+            height: 24px;
+            color: #939393;
+        }
+        .l {
+            width: 400px;
+            .show {
+                height: 400px;
+                border-radius: 5px;
+                background: #F2F2F2;
+                border: 1px solid #F0F0F0;
+            }
+        }
+        .r {
+            width: 520px;
+        }
+    }
+}
+</style>

src/pages/nft/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <router-view></router-view>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getStorage, storageKey } from '../../static/utils/storage'
+
+let router = useRouter()
+
+onMounted(() => {
+    let userInfo = getStorage(storageKey.userInfo);
+    if (!userInfo) router.push({ name: 'home' });
+})
+</script>
+
+
+<style lang="less">
+body {
+    background-color: #F5F5F5;
+}
+</style>

src/pages/nft/list.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="center">
+        <div class="project">
+            <div class="title">
+                <div class="info">
+                    <img :src="userInfo.avatarUrl" alt="" />
+                    <span class="name">{{ userInfo.nickName }}</span>
+                </div>
+                <div class="logout" @click="logout">Sign out</div>
+            </div>
+            <div class="list">
+                <div class="item">
+                    <div class="logo">
+                        <img src="" alt="" />
+                    </div>
+                    <div class="desc">
+                        <div class="name">LegalDAO Members</div>
+                        <div class="font">Sell <span>175/1000</span></div>
+                        <div class="font">Earnings <span>107.5 USDT</span></div>
+                    </div>
+                    <div class="opt">
+                        <el-button link type="danger">Delete</el-button>
+                        <el-button link type="primary">Publish</el-button>
+                    </div>
+                </div>
+                <!-- <el-empty description="description" /> -->
+            </div>
+            <div class="add" @click="add">
+                <img src="../../static/img/header-add.svg" alt="">
+                <span>Add New NFT Collection</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from  'vue-router'
+import { getStorage, storageKey, removeStorage } from '../../static/utils/storage'
+
+const userInfo: any = ref({});
+
+const router = useRouter()
+
+const logout = () => {
+    removeStorage(storageKey.userInfo)
+    router.push({ name: 'home' })
+}
+
+const add = () => {
+    router.push({ name: 'nft-add' })
+}
+
+onMounted(() => {
+    userInfo.value = getStorage(storageKey.userInfo);
+})
+</script>
+
+<style lang="less" scoped>
+.center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    --el-font-size-base: 16px;
+}
+.project {
+    width: 800px;
+    border-radius: 20px;
+    background: #FFFFFF;
+    .title {
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-shadow: inset 0px -1px 0px #EDEDED;
+        .info {
+            display: flex;
+            align-items: center;
+            img {
+                width: 24px;
+                height: 24px;
+                overflow: hidden;
+                border-radius: 50%;
+                margin: 0 8px 0 20px;
+            }
+            .name {
+                color: #919191;
+                font-size: 14px;
+            }
+        }
+        .logout {
+            color: #FF0000;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            margin-right: 20px;
+        }
+    }
+    .list {
+        margin: 20px;
+        height: 360px;
+        overflow-y: auto;
+        .item {
+            display: flex;
+            align-items: center;
+            height: 104px;
+            margin-bottom: 20px;
+            border-radius: 10px;
+            border: 1px solid #EDEDED;
+            &:last-child  {
+                margin-bottom: unset;
+            }
+            .logo {
+                width: 70px;
+                height: 70px;
+                margin: 0 24px;
+                border-radius: 50%;
+                background-color: #f5f5f5;
+            }
+            .desc {
+                flex: 1;
+                line-height: 20px;
+                .name {
+                    color: #000;
+                    font-size: 16px;
+                    font-weight: 500;
+                    margin-bottom: 4px;
+                }
+                .font {
+                    color: #666;
+                    font-size: 12px;
+                    span {
+                        color: #EDA00A;
+                    }
+                }
+            }
+            .opt {
+                margin-right: 30px;
+            }
+        }
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+    .add {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 60px;
+        cursor: pointer;
+        margin: 0 20px 20px 20px;
+        border-radius: 75px;
+        background: #F7F9FB;
+        img {
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+        span {
+            color: #1D9BF0;
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: -4px;
+        }
+    }
+}
+</style>

src/router.ts

@@ -17,6 +17,20 @@ export function createRouter() {
             name: 'close',
             path: '/close',
             component: () => import('./pages/close.vue')
+        }, {
+            name: 'nft',
+            path: '/nft',
+            redirect: { name: 'nft-list' },
+            component: () => import('./pages/nft/index.vue'),
+            children: [{
+                name: 'nft-list',
+                path: 'list',
+                component: () => import('./pages/nft/list.vue')
+            }, {
+                name: 'nft-add',
+                path: 'add',
+                component: () => import('./pages/nft/add.vue')
+            }]
         }]
     })
 }

src/static/img/icon-empty.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.9531 9.89062H18.0566L6.37695 52.6836L6.25 90.1055H93.75V53.6406L81.9531 9.89062V9.89062ZM23.623 17.1855H76.3867L86.3281 53.6406H66.2793L58.9844 64.5781H41.0156L33.7207 53.6406H13.6816L23.623 17.1855Z" fill="#F1F1F1"/>
+</svg>

src/static/utils/storage.ts

@@ -1,11 +1,12 @@
 // 获取storage
 export const getStorage = (name: string) => {
-    return localStorage.getItem(name)
+    // @ts-ignore
+    return JSON.parse(localStorage.getItem(name))
 }
 
 // 设置storage
 export const setStorage = (name: string, val: any) => {
-    localStorage.setItem(name, val)
+    localStorage.setItem(name, JSON.stringify(val))
 }
 
 // 删除storage
@@ -13,7 +14,8 @@ export const removeStorage = (name: string) => {
     localStorage.removeItem(name)
 }
 
+// storageKey
 export const storageKey = {
     verifier: 'verifierKey',
-    userInfo: 'userInfoKey',
+    userInfo: 'userInfo',
 }