diff --git a/src/pages/home/Report.vue b/src/pages/home/Report.vue
index 540778e..f09ba75 100644
--- a/src/pages/home/Report.vue
+++ b/src/pages/home/Report.vue
@@ -3,9 +3,9 @@
     <BaseHeader backMode="light">
       <template v-slot:center>
         <span class="f16">
-          <template v-if="mode === 'video'">视频</template>
-          <template v-if="mode === 'music'">音乐</template>
-          <template v-if="mode === 'chat'">私信</template>举报</span
+          <template v-if="data.mode === 'video'">视频</template>
+          <template v-if="data.mode === 'music'">音乐</template>
+          <template v-if="data.mode === 'chat'">私信</template>举报</span
         >
       </template>
     </BaseHeader>
@@ -13,43 +13,55 @@
       <div class="title">
         <span>内容违规</span>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '色情低俗', mode })">
+      <div class="row" @click="nav('/home/submit-report', { type: '色情低俗', mode: data.mode })">
         <span>色情低俗</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '时政不实信息', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '时政不实信息', mode: data.mode })"
+      >
         <span>时政不实信息</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '违法犯罪', mode })">
+      <div class="row" @click="nav('/home/submit-report', { type: '违法犯罪', mode: data.mode })">
         <span>违法犯罪</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '垃圾广告、售卖假货等', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '垃圾广告、售卖假货等', mode: data.mode })"
+      >
         <span>垃圾广告、售卖假货等</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '造谣传播', mode })">
+      <div class="row" @click="nav('/home/submit-report', { type: '造谣传播', mode: data.mode })">
         <span>造谣传播</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '涉嫌欺诈', mode })">
+      <div class="row" @click="nav('/home/submit-report', { type: '涉嫌欺诈', mode: data.mode })">
         <span>涉嫌欺诈</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '侮辱漫骂', mode })">
+      <div class="row" @click="nav('/home/submit-report', { type: '侮辱漫骂', mode: data.mode })">
         <span>侮辱漫骂</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '危险行为', mode })">
+      <div class="row" @click="nav('/home/submit-report', { type: '危险行为', mode: data.mode })">
         <span>危险行为</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '涉嫌非法集资', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '涉嫌非法集资', mode: data.mode })"
+      >
         <span>涉嫌非法集资</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '价值观导向不良', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '价值观导向不良', mode: data.mode })"
+      >
         <span>价值观导向不良</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
@@ -61,20 +73,26 @@
       <div
         class="row"
         @click="
-          $nav('/home/submit-report', {
+          nav('/home/submit-report', {
             type: '侵犯名誉、隐私、肖像权等',
-            mode
+            mode: data.mode
           })
         "
       >
         <span>侵犯名誉、隐私、肖像权等</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '内容盗用本人作品', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '内容盗用本人作品', mode: data.mode })"
+      >
         <span>内容盗用本人作品</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '内容盗用他人作品', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '内容盗用他人作品', mode: data.mode })"
+      >
         <span>内容盗用他人作品</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
@@ -82,11 +100,17 @@
       <div class="title">
         <span>未成年</span>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '未成年人不当行为', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '未成年人不当行为', mode: data.mode })"
+      >
         <span>未成年人不当行为</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '内容不适合未成年观看', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '内容不适合未成年观看', mode: data.mode })"
+      >
         <span>内容不适合未成年观看</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
@@ -94,41 +118,49 @@
       <div class="title">
         <span>其他</span>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '引人不适', mode })">
+      <div class="row" @click="nav('/home/submit-report', { type: '引人不适', mode: data.mode })">
         <span>引人不适</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '疑似自我伤害', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '疑似自我伤害', mode: data.mode })"
+      >
         <span>疑似自我伤害</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '诱导点赞、分享、关注', mode })">
+      <div
+        class="row"
+        @click="nav('/home/submit-report', { type: '诱导点赞、分享、关注', mode: data.mode })"
+      >
         <span>诱导点赞、分享、关注</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
-      <div class="row" @click="$nav('/home/submit-report', { type: '其他', mode })">
+      <div class="row" @click="nav('/home/submit-report', { type: '其他', mode: data.mode })">
         <span>其他</span>
         <dy-back scale=".8" direction="right"></dy-back>
       </div>
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'Report',
-  props: {},
-  data() {
-    return {
-      mode: 'video'
-    }
-  },
-  computed: {},
-  created() {
-    this.mode = this.$route.query.mode
-  },
-  activated() {},
-  methods: {}
-}
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
+
+defineOptions({
+  name: 'Report'
+})
+
+const route = useRoute()
+const nav = useNav()
+const data = reactive({
+  mode: 'video'
+})
+
+onMounted(() => {
+  data.mode = route.query.mode as string
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/home/SearchPage.vue b/src/pages/home/SearchPage.vue
index f8afb49..e776d85 100644
--- a/src/pages/home/SearchPage.vue
+++ b/src/pages/home/SearchPage.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="Search">
     <div class="header">
-      <dy-back mode="light" @click="$back" class="mr1r"></dy-back>
-      <BSearch placeholder="搜索用户名字/抖音号" :isShowRightText="true" @notice="$no"></BSearch>
+      <dy-back mode="light" @click="router.back" class="mr1r"></dy-back>
+      <Search placeholder="搜索用户名字/抖音号" :isShowRightText="true" @notice="_no"></Search>
     </div>
     <div class="content">
       <div class="history">
@@ -11,10 +11,15 @@
             <img src="../../assets/img/icon/home/time-white.png" alt="" />
             <span> {{ item }}</span>
           </div>
-          <dy-back img="close" mode="gray" @click="history.splice(index, 1)" scale=".7"></dy-back>
+          <dy-back
+            img="close"
+            mode="gray"
+            @click="data.history.splice(index, 1)"
+            scale=".7"
+          ></dy-back>
         </div>
-        <div v-if="history.length > 2" class="history-expand" @click="toggle">
-          {{ isExpand ? '清除全部搜索记录' : '展开全部' }}
+        <div v-if="data.history.length > 2" class="history-expand" @click="toggle">
+          {{ data.isExpand ? '清除全部搜索记录' : '展开全部' }}
         </div>
       </div>
       <div class="guess">
@@ -26,7 +31,7 @@
           </div>
         </div>
         <div class="keys">
-          <div class="key" :key="index" v-for="(item, index) in randomGuess">
+          <div class="key" :key="index" v-for="(item, index) in data.randomGuess">
             <span class="desc">{{ item.name }}</span>
             <img
               v-if="item.type === 1"
@@ -39,21 +44,21 @@
       </div>
       <div class="rank-list">
         <div class="indicator">
-          <div class="tab" :class="{ active: slideIndex === 0 }" @click="slideIndex = 0">
+          <div class="tab" :class="{ active: data.slideIndex === 0 }" @click="data.slideIndex = 0">
             抖音热榜
           </div>
-          <div class="tab" :class="{ active: slideIndex === 1 }" @click="slideIndex = 1">
+          <div class="tab" :class="{ active: data.slideIndex === 1 }" @click="data.slideIndex = 1">
             直播榜
           </div>
-          <div class="tab" :class="{ active: slideIndex === 2 }" @click="slideIndex = 2">
+          <div class="tab" :class="{ active: data.slideIndex === 2 }" @click="data.slideIndex = 2">
             音乐榜
           </div>
-          <div class="tab" :class="{ active: slideIndex === 3 }" @click="slideIndex = 3">
+          <div class="tab" :class="{ active: data.slideIndex === 3 }" @click="data.slideIndex = 3">
             品牌榜
           </div>
         </div>
         <!--        TODO 滚动到下面的时候，应该禁止slide-move，因为第个slideitem的高度不一样，高的切到矮的，会闪屏-->
-        <SlideHorizontal v-model:index="slideIndex" :style="slideListHeight">
+        <SlideHorizontal v-model:index="data.slideIndex" :style="slideListHeight">
           <SlideItem>
             <div class="slide0" ref="slide0">
               <div class="l-row">
@@ -66,7 +71,7 @@
                   </div>
                 </div>
               </div>
-              <div class="l-row" :key="index" v-for="(item, index) in hotRankList">
+              <div class="l-row" :key="index" v-for="(item, index) in data.hotRankList">
                 <div class="rank-wrapper">
                   <img
                     v-if="index === 0"
@@ -107,12 +112,12 @@
                   <div class="count">999w</div>
                 </div>
               </div>
-              <div class="more" @click="$no">查看完整热点榜 ></div>
+              <div class="more" @click="_no">查看完整热点榜 ></div>
             </div>
           </SlideItem>
           <SlideItem>
             <div class="slide1" ref="slide1">
-              <div class="l-row" :key="index" v-for="(item, index) in liveRankList">
+              <div class="l-row" :key="index" v-for="(item, index) in data.liveRankList">
                 <div class="rank-wrapper">
                   <div class="rank" :class="{ top: index < 3 }">
                     {{ index + 1 }}
@@ -136,7 +141,7 @@
                   <div class="count">999w人气</div>
                 </div>
               </div>
-              <div class="more" @click="$no">查看完整直播榜 ></div>
+              <div class="more" @click="_no">查看完整直播榜 ></div>
             </div>
           </SlideItem>
           <SlideItem>
@@ -144,8 +149,8 @@
               <div
                 class="l-row"
                 :key="index"
-                v-for="(item, index) in musicRankList"
-                @click="$nav('/home/music-rank-list')"
+                v-for="(item, index) in data.musicRankList"
+                @click="nav('/home/music-rank-list')"
               >
                 <div class="rank-wrapper">
                   <div class="rank" :class="{ top: index < 3 }">
@@ -155,17 +160,17 @@
                 <div class="right">
                   <div class="center">
                     <div class="avatar-wrapper">
-                      <img v-lazy="$imgPreview(item.cover)" alt="" class="avatar" />
+                      <img v-lazy="_checkImgUrl(item.cover)" alt="" class="avatar" />
                     </div>
                     <div class="desc">{{ item.name }}</div>
                   </div>
                   <div class="count">
                     <img src="../../assets/img/icon/home/hot-gray.png" alt="" />
-                    <span>{{ formatNumber(item.use_count) }}</span>
+                    <span>{{ _formatNumber(item.use_count) }}</span>
                   </div>
                 </div>
               </div>
-              <div class="more" @click="$nav('/home/music-rank-list')">查看完整音乐榜 ></div>
+              <div class="more" @click="nav('/home/music-rank-list')">查看完整音乐榜 ></div>
             </div>
           </SlideItem>
           <SlideItem>
@@ -176,8 +181,8 @@
                     class="brand"
                     @click="toggleKey(key)"
                     :key="i"
-                    :class="{ active: key === selectBrandKey }"
-                    v-for="(key, i) in Object.keys(brandRankList)"
+                    :class="{ active: key === data.selectBrandKey }"
+                    v-for="(key, i) in Object.keys(data.brandRankList)"
                   >
                     {{ key }}
                   </div>
@@ -192,18 +197,18 @@
                     <div class="center">
                       <div class="avatar-wrapper" :class="item.living ? 'living' : ''">
                         <div class="avatar-out-line"></div>
-                        <img v-lazy="$imgPreview(item.logo)" alt="" class="avatar" />
+                        <img v-lazy="_checkImgUrl(item.logo)" alt="" class="avatar" />
                         <!--                      <img :src="item.logo" class="avatar">-->
                       </div>
                       <div class="desc">{{ item.name }}</div>
                     </div>
                     <div class="count">
                       <img src="../../assets/img/icon/home/hot-gray.png" alt="" />
-                      <span>{{ formatNumber(item.hot_count) }}</span>
+                      <span>{{ _formatNumber(item.hot_count) }}</span>
                     </div>
                   </div>
                 </div>
-                <div class="more" @click="$no">查看完整品牌榜 ></div>
+                <div class="more" @click="_no">查看完整品牌榜 ></div>
               </div>
 
               <SlideRowList :autoplay="true" indicatorType="bullets">
@@ -239,486 +244,494 @@
     </div>
   </div>
 </template>
-<script>
-import Search from '../../components/Search'
+<script setup lang="ts">
+import Search from '../../components/Search.vue'
 import Dom from '../../utils/dom'
-import { nextTick } from 'vue'
-import { sampleSize } from '@/utils'
+import { computed, nextTick, watch } from 'vue'
+import { _checkImgUrl, _formatNumber, _no, _showSimpleConfirmDialog, sampleSize } from '@/utils'
 
-export default {
-  name: 'SearchPage',
-  components: {
-    BSearch: Search
-  },
-  data() {
-    return {
-      isExpand: false,
-      history: [
-        '历史记录1',
-        '历史记录2',
-        '历史记录3',
-        '历史记录4',
-        '历史记录5',
-        '历史记录6',
-        '历史记录7',
-        '历史记录8',
-        '历史记录9',
-        '历史记录10'
-      ],
-      guess: [
-        { name: '少年透明人', type: -1 },
-        { name: '花呗分批次接入征信', type: -1 },
-        { name: '新娘婚礼上跪求悔婚', type: -1 },
-        { name: '当你想换iPhone13时', type: -1 },
-        { name: 'Ling OS灵犀系统', type: -1 },
-        { name: '桑塔纳2022款', type: -1 },
-        { name: '透明人', type: -1 },
-        { name: '恒大集团凌晨发公告', type: 0 },
-        { name: '2022款日产GT-R', type: 1 },
-        { name: '四川双一流大学名单', type: -1 },
-        { name: '一公司放假通知走红', type: -1 },
-        { name: '成都新全优教育倒闭', type: -1 },
-        { name: '当代女生社交现状', type: -1 },
-        { name: '恒大集团凌晨发公告', type: -1 }
-      ],
-      randomGuess: [],
-      hotRankList: [
-        { name: '国内手机厂商最大的软肋就是 android 系统！', type: 0 },
-        { name: '大家的官网订单现在什么状态', type: -1 },
-        { name: '库克不愧是供应链管理大师， A15 一鱼三吃', type: -1 },
-        { name: '找到了 iOS 被怀疑淘宝窃听的可能原因', type: 1 },
-        { name: 'rebase 还是 merge？', type: -1 },
-        { name: '十一出游西安，西安的大佬们能给些建议吗？', type: 0 },
-        { name: '领克 01，燃油还是 phev？', type: 1 },
-        { name: '为什么要抢购新手机呢？', type: -1 },
-        { name: '拼多多官方处理问题跟京东真的没法比', type: -1 },
-        { name: '百度输入法 VS 搜狗输入法', type: -1 },
-        { name: '关于 ios 上 app 检测代理', type: 0 },
-        { name: 'iPadmini6 到货以后，要不要换路由器', type: 1 },
-        { name: '现在有推荐的同步盘么？', type: -1 },
-        { name: '大哥们， mac 电池鼓包你们都咋修的。。', type: -1 },
-        { name: '发现一个特别赞的同步盘方案 Resilio Sync', type: -1 },
-        { name: '得鼻炎了, 说下症状和应对吧', type: 1 },
-        {
-          name: '打翻了一瓶矿泉水在 MacBook Pro 上，赶紧用鼠标关机了，等多久可以尝试开机？',
-          type: 0
-        },
-        { name: '筋膜枪哪个牌子好啊？', type: -1 },
-        {
-          name: '最近在学理财小白基础知识，然后请教大家办哪个证券账户比较好呀',
-          type: -1
-        },
-        {
-          name: '有没有长期使用 sidecar 功能的 V 友，这个东西长期的稳定性如何？',
-          type: 0
-        },
-        { name: '犹豫是否要年年焕新', type: -1 },
-        { name: '请问如何在国内给 AppStore HK/TW 区充值.', type: 0 },
-        { name: '最近感觉一个妹子不错，不过我比她大 5 岁', type: 1 },
-        {
-          name: '12mini 1 月 20 号购入，现在电池健康 92%，正常现象？',
-          type: -1
-        },
-        { name: '现在新 iphone12/128 啥价格比较合适啊？', type: -1 },
-        { name: 'iOS 15 不改地区就能看到全球所有交通卡', type: -1 },
-        { name: '求推荐拼车/打车软件', type: 1 },
-        { name: '如何比较方便的杀死 nohup 起的进程及其所有子进程?', type: 0 },
-        { name: '换了新工作，好像又掉坑里了。', type: 0 },
-        { name: '有没有这样一款记账软件？', type: 1 }
-      ],
-      liveRankList: [
-        { name: '毛三岁（收女徒弟）', type: 0 },
-        { name: '广州表哥', type: -1 },
-        { name: '一只扬儿', type: -1 },
-        { name: '沈酒', type: -1 },
-        { name: '客家婷子', type: 1 },
-        { name: '三斤.（9237）', type: -1 },
-        { name: '虎哥说车', type: -1 },
-        { name: '爆笑三江锅（永不言败）', type: -1 },
-        { name: '子豪(尊师胜仔）5点扛把子', type: 1 },
-        { name: '琪琪', type: -1 },
-        { name: '战神土牛（征战全网）', type: 0 },
-        { name: '小鲁班下午5点直播', type: -1 },
-        { name: '惠子ssica', type: -1 },
-        { name: '大狼狗郑建鹏&言真夫妇', type: -1 },
-        { name: '一条小团团', type: -1 },
-        { name: '高火火', type: -1 },
-        { name: '郭聪明', type: -1 },
-        { name: '罗永浩', type: 1 },
-        { name: '陈赫', type: 0 },
-        { name: '摩登兄弟', type: -1 },
-        { name: '浪老师', type: -1 },
-        { name: '陈死狗cnh', type: -1 },
-        { name: '杨驴驴y', type: -1 },
-        { name: 'imxiaoxin', type: 0 },
-        { name: '丶才子欧巴', type: -1 },
-        { name: '旭旭宝宝', type: -1 },
-        { name: 'pigff', type: -1 },
-        { name: '正经人令北', type: -1 },
-        { name: '雨神丶', type: -1 },
-        { name: '智勋勋勋勋', type: 0 }
-      ],
-      musicRankList: [
-        {
-          name: '龙卷风',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
-          cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 99,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '爱在西元前',
-          mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
-          cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '蜗牛',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
-          cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '半岛铁盒',
-          mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
-          cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '轨迹',
-          mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
-          cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '七里香',
-          mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
-          cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '发如雪',
-          mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
-          cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '霍元甲',
-          mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
-          cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '千里之外(周杰伦/费玉清)',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
-          cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '菊花台',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
-          cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '不能说的秘密',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
-          cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '牛仔很忙',
-          mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
-          cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '给我一首歌的时间',
-          mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
-          cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '烟花易冷',
-          mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
-          cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '惊叹号',
-          mp3: 'https://m3.8js.net:99/20111103/150.mp3',
-          cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '明明就',
-          mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
-          cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '算什么男人',
-          mp3: 'https://m3.8js.net:99/20150107/429.mp3',
-          cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        },
-        {
-          name: '告白气球',
-          mp3: 'https://m3.8js.net:99/20161016/481.mp3',
-          cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
-          author: '周杰伦',
-          duration: 60,
-          use_count: 37441000,
-          is_collect: false,
-          is_play: false
-        }
-      ],
-      brandRankList: {
-        汽车: [
-          {
-            name: '五菱汽车',
-            logo: 'https://www.wuling.com/favicon.ico',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: '宝马',
-            logo: 'https://www.bmw.com.cn/etc/clientlibs/digitals2/clientlib/media/img/BMW_Grey_Logo.svg',
-            hot_count: 1395,
-            living: true
-          },
-          {
-            name: '吉利汽车',
-            logo: 'http://www.cargc.com/uploads/allimg/200828/1401364511-2.jpg',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: '一汽大众-奥迪',
-            logo: 'https://www.audi.cn/bin/nemo.static.20210916063431/cms4i-nemo/assets/icons/favicon/favicon-v4.ico',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: '一汽-大众',
-            logo: 'https://www.vw.com.cn/favicon.ico',
-            hot_count: 1395,
-            living: false
-          }
-        ],
-        手机: [
-          {
-            name: '华为',
-            logo: 'https://isesglobal.com/wp-content/uploads/2021/01/Huawei.jpg',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: '小米',
-            logo: 'https://s01.mifile.cn/favicon.ico',
-            hot_count: 1395,
-            living: true
-          },
-          {
-            name: 'vivo',
-            logo: 'http://wwwstatic.vivo.com.cn/vivoportal/web/dist/img/common/favicon_ecf768e.ico',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: 'oppo',
-            logo: 'https://code.oppo.com/etc.clientlibs/global-site/clientlibs/clientlib-design/resources/icons/favicon.ico',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: '三星',
-            logo: 'https://www.samsung.com/etc.clientlibs/samsung/clientlibs/consumer/global/clientlib-common/resources/images/Favicon.png',
-            hot_count: 1395,
-            living: false
-          }
-        ],
-        美妆: [
-          {
-            name: '巴黎欧莱雅',
-            logo: 'https://oap-cn-prd-cd.e-loreal.cn/-/media/project/loreal/brand-sites/oap/apac/cn/identity/image-2020-06-19-20-48-00-996.png',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: '花西子',
-            logo: 'https://www.haoyunbb.com/img/allimg/210607/001I43462-0.png',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: '完美日记',
-            logo: 'http://5b0988e595225.cdn.sohucs.com/images/20200412/9c6caafca79e438f98d98d3986ebce4d.png',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: '雅诗兰黛',
-            logo: 'https://vipyidiancom.oss-cn-beijing.aliyuncs.com/vipyidian.com/article/1_150918143107_1.png',
-            hot_count: 1395,
-            living: false
-          },
-          {
-            name: 'COLORKEY珂拉琪',
-            logo: 'https://www.80wzbk.com/uploads/logo/20210129/20210129104015_541.jpg',
-            hot_count: 1395,
-            living: false
-          }
-        ]
+import { useBaseStore } from '@/store/pinia'
+import { onMounted, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
+
+defineOptions({
+  name: 'SearchPage'
+})
+
+const router = useRouter()
+const nav = useNav()
+const store = useBaseStore()
+const data = reactive({
+  isExpand: false,
+  history: [
+    '历史记录1',
+    '历史记录2',
+    '历史记录3',
+    '历史记录4',
+    '历史记录5',
+    '历史记录6',
+    '历史记录7',
+    '历史记录8',
+    '历史记录9',
+    '历史记录10'
+  ],
+  guess: [
+    { name: '少年透明人', type: -1 },
+    { name: '花呗分批次接入征信', type: -1 },
+    { name: '新娘婚礼上跪求悔婚', type: -1 },
+    { name: '当你想换iPhone13时', type: -1 },
+    { name: 'Ling OS灵犀系统', type: -1 },
+    { name: '桑塔纳2022款', type: -1 },
+    { name: '透明人', type: -1 },
+    { name: '恒大集团凌晨发公告', type: 0 },
+    { name: '2022款日产GT-R', type: 1 },
+    { name: '四川双一流大学名单', type: -1 },
+    { name: '一公司放假通知走红', type: -1 },
+    { name: '成都新全优教育倒闭', type: -1 },
+    { name: '当代女生社交现状', type: -1 },
+    { name: '恒大集团凌晨发公告', type: -1 }
+  ],
+  randomGuess: [],
+  hotRankList: [
+    { name: '国内手机厂商最大的软肋就是 android 系统！', type: 0 },
+    { name: '大家的官网订单现在什么状态', type: -1 },
+    { name: '库克不愧是供应链管理大师， A15 一鱼三吃', type: -1 },
+    { name: '找到了 iOS 被怀疑淘宝窃听的可能原因', type: 1 },
+    { name: 'rebase 还是 merge？', type: -1 },
+    { name: '十一出游西安，西安的大佬们能给些建议吗？', type: 0 },
+    { name: '领克 01，燃油还是 phev？', type: 1 },
+    { name: '为什么要抢购新手机呢？', type: -1 },
+    { name: '拼多多官方处理问题跟京东真的没法比', type: -1 },
+    { name: '百度输入法 VS 搜狗输入法', type: -1 },
+    { name: '关于 ios 上 app 检测代理', type: 0 },
+    { name: 'iPadmini6 到货以后，要不要换路由器', type: 1 },
+    { name: '现在有推荐的同步盘么？', type: -1 },
+    { name: '大哥们， mac 电池鼓包你们都咋修的。。', type: -1 },
+    { name: '发现一个特别赞的同步盘方案 Resilio Sync', type: -1 },
+    { name: '得鼻炎了, 说下症状和应对吧', type: 1 },
+    {
+      name: '打翻了一瓶矿泉水在 MacBook Pro 上，赶紧用鼠标关机了，等多久可以尝试开机？',
+      type: 0
+    },
+    { name: '筋膜枪哪个牌子好啊？', type: -1 },
+    {
+      name: '最近在学理财小白基础知识，然后请教大家办哪个证券账户比较好呀',
+      type: -1
+    },
+    {
+      name: '有没有长期使用 sidecar 功能的 V 友，这个东西长期的稳定性如何？',
+      type: 0
+    },
+    { name: '犹豫是否要年年焕新', type: -1 },
+    { name: '请问如何在国内给 AppStore HK/TW 区充值.', type: 0 },
+    { name: '最近感觉一个妹子不错，不过我比她大 5 岁', type: 1 },
+    {
+      name: '12mini 1 月 20 号购入，现在电池健康 92%，正常现象？',
+      type: -1
+    },
+    { name: '现在新 iphone12/128 啥价格比较合适啊？', type: -1 },
+    { name: 'iOS 15 不改地区就能看到全球所有交通卡', type: -1 },
+    { name: '求推荐拼车/打车软件', type: 1 },
+    { name: '如何比较方便的杀死 nohup 起的进程及其所有子进程?', type: 0 },
+    { name: '换了新工作，好像又掉坑里了。', type: 0 },
+    { name: '有没有这样一款记账软件？', type: 1 }
+  ],
+  liveRankList: [
+    { name: '毛三岁（收女徒弟）', type: 0 },
+    { name: '广州表哥', type: -1 },
+    { name: '一只扬儿', type: -1 },
+    { name: '沈酒', type: -1 },
+    { name: '客家婷子', type: 1 },
+    { name: '三斤.（9237）', type: -1 },
+    { name: '虎哥说车', type: -1 },
+    { name: '爆笑三江锅（永不言败）', type: -1 },
+    { name: '子豪(尊师胜仔）5点扛把子', type: 1 },
+    { name: '琪琪', type: -1 },
+    { name: '战神土牛（征战全网）', type: 0 },
+    { name: '小鲁班下午5点直播', type: -1 },
+    { name: '惠子ssica', type: -1 },
+    { name: '大狼狗郑建鹏&言真夫妇', type: -1 },
+    { name: '一条小团团', type: -1 },
+    { name: '高火火', type: -1 },
+    { name: '郭聪明', type: -1 },
+    { name: '罗永浩', type: 1 },
+    { name: '陈赫', type: 0 },
+    { name: '摩登兄弟', type: -1 },
+    { name: '浪老师', type: -1 },
+    { name: '陈死狗cnh', type: -1 },
+    { name: '杨驴驴y', type: -1 },
+    { name: 'imxiaoxin', type: 0 },
+    { name: '丶才子欧巴', type: -1 },
+    { name: '旭旭宝宝', type: -1 },
+    { name: 'pigff', type: -1 },
+    { name: '正经人令北', type: -1 },
+    { name: '雨神丶', type: -1 },
+    { name: '智勋勋勋勋', type: 0 }
+  ],
+  musicRankList: [
+    {
+      name: '龙卷风',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3',
+      cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 99,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '爱在西元前',
+      mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
+      cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '蜗牛',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
+      cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '半岛铁盒',
+      mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
+      cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '轨迹',
+      mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
+      cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '七里香',
+      mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
+      cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '发如雪',
+      mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
+      cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '霍元甲',
+      mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
+      cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '千里之外(周杰伦/费玉清)',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
+      cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '菊花台',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
+      cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '不能说的秘密',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
+      cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '牛仔很忙',
+      mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
+      cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '给我一首歌的时间',
+      mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
+      cover: new URL('../../assets/img/music-cover/13.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '烟花易冷',
+      mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
+      cover: new URL('../../assets/img/music-cover/14.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '惊叹号',
+      mp3: 'https://m3.8js.net:99/20111103/150.mp3',
+      cover: new URL('../../assets/img/music-cover/15.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '明明就',
+      mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
+      cover: new URL('../../assets/img/music-cover/16.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '算什么男人',
+      mp3: 'https://m3.8js.net:99/20150107/429.mp3',
+      cover: new URL('../../assets/img/music-cover/17.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    },
+    {
+      name: '告白气球',
+      mp3: 'https://m3.8js.net:99/20161016/481.mp3',
+      cover: new URL('../../assets/img/music-cover/18.jpg', import.meta.url).href,
+      author: '周杰伦',
+      duration: 60,
+      use_count: 37441000,
+      is_collect: false,
+      is_play: false
+    }
+  ],
+  brandRankList: {
+    汽车: [
+      {
+        name: '五菱汽车',
+        logo: 'https://www.wuling.com/favicon.ico',
+        hot_count: 1395,
+        living: false
       },
-      selectBrandKey: '汽车',
-      selectBrandKeyIndex: 0,
-      slideIndex: 0,
-      timer: null,
-      slideItemHeight: null
-    }
-  },
-  computed: {
-    lHistory() {
-      if (this.isExpand) {
-        if (this.history.length > 10) return this.history.slice(0, 10)
-        return this.history
-      } else {
-        if (this.history.length > 2) return this.history.slice(0, 2)
-        return this.history
+      {
+        name: '宝马',
+        logo: 'https://www.bmw.com.cn/etc/clientlibs/digitals2/clientlib/media/img/BMW_Grey_Logo.svg',
+        hot_count: 1395,
+        living: true
+      },
+      {
+        name: '吉利汽车',
+        logo: 'http://www.cargc.com/uploads/allimg/200828/1401364511-2.jpg',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: '一汽大众-奥迪',
+        logo: 'https://www.audi.cn/bin/nemo.static.20210916063431/cms4i-nemo/assets/icons/favicon/favicon-v4.ico',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: '一汽-大众',
+        logo: 'https://www.vw.com.cn/favicon.ico',
+        hot_count: 1395,
+        living: false
       }
-    },
-    selectBrandList() {
-      return this.brandRankList[this.selectBrandKey]
-    },
-    brandListKeys() {
-      return Object.keys(this.brandRankList)
-    },
-    slideListHeight() {
-      return {
-        height: this.slideItemHeight ? this.slideItemHeight + 'px' : '100%'
+    ],
+    手机: [
+      {
+        name: '华为',
+        logo: 'https://isesglobal.com/wp-content/uploads/2021/01/Huawei.jpg',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: '小米',
+        logo: 'https://s01.mifile.cn/favicon.ico',
+        hot_count: 1395,
+        living: true
+      },
+      {
+        name: 'vivo',
+        logo: 'http://wwwstatic.vivo.com.cn/vivoportal/web/dist/img/common/favicon_ecf768e.ico',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: 'oppo',
+        logo: 'https://code.oppo.com/etc.clientlibs/global-site/clientlibs/clientlib-design/resources/icons/favicon.ico',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: '三星',
+        logo: 'https://www.samsung.com/etc.clientlibs/samsung/clientlibs/consumer/global/clientlib-common/resources/images/Favicon.png',
+        hot_count: 1395,
+        living: false
       }
-    }
+    ],
+    美妆: [
+      {
+        name: '巴黎欧莱雅',
+        logo: 'https://oap-cn-prd-cd.e-loreal.cn/-/media/project/loreal/brand-sites/oap/apac/cn/identity/image-2020-06-19-20-48-00-996.png',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: '花西子',
+        logo: 'https://www.haoyunbb.com/img/allimg/210607/001I43462-0.png',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: '完美日记',
+        logo: 'http://5b0988e595225.cdn.sohucs.com/images/20200412/9c6caafca79e438f98d98d3986ebce4d.png',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: '雅诗兰黛',
+        logo: 'https://vipyidiancom.oss-cn-beijing.aliyuncs.com/vipyidian.com/article/1_150918143107_1.png',
+        hot_count: 1395,
+        living: false
+      },
+      {
+        name: 'COLORKEY珂拉琪',
+        logo: 'https://www.80wzbk.com/uploads/logo/20210129/20210129104015_541.jpg',
+        hot_count: 1395,
+        living: false
+      }
+    ]
   },
-  watch: {
-    slideIndex: {
-      handler(newVal) {
-        nextTick(() => {
-          // console.log(this.$refs[`slide${newVal}`])
-          this.slideItemHeight = new Dom(`.slide${newVal}`).css('height')
-          // console.log(this.slideItemHeight)
-          this.slideItemHeight = parseFloat(this.slideItemHeight) + 50
-        })
-        if (newVal === 3) {
-          this.timer = setInterval(() => {
-            if (this.selectBrandKeyIndex === this.brandListKeys.length - 1) {
-              this.selectBrandKeyIndex = 0
-            } else {
-              this.selectBrandKeyIndex++
-            }
-            this.selectBrandKey = this.brandListKeys[this.selectBrandKeyIndex]
-          }, 3000)
+  selectBrandKey: '汽车',
+  selectBrandKeyIndex: 0,
+  slideIndex: 0,
+  timer: null,
+  slideItemHeight: null
+})
+
+const lHistory = computed(() => {
+  if (data.isExpand) {
+    if (data.history.length > 10) return data.history.slice(0, 10)
+    return data.history
+  } else {
+    if (data.history.length > 2) return data.history.slice(0, 2)
+    return data.history
+  }
+})
+
+const selectBrandList = computed(() => {
+  return data.brandRankList[data.selectBrandKey]
+})
+
+const brandListKeys = computed<string[]>(() => {
+  return Object.keys(data.brandRankList)
+})
+
+const slideListHeight = computed(() => {
+  return {
+    height: data.slideItemHeight ? data.slideItemHeight + 'px' : '100%'
+  }
+})
+
+watch(
+  () => data.slideIndex,
+  (newVal) => {
+    nextTick(() => {
+      // console.log(data.$refs[`slide${newVal}`])
+      data.slideItemHeight = new Dom(`.slide${newVal}`).css('height')
+      // console.log(data.slideItemHeight)
+      data.slideItemHeight = parseFloat(data.slideItemHeight) + 50
+    })
+    if (newVal === 3) {
+      data.timer = setInterval(() => {
+        if (data.selectBrandKeyIndex === brandListKeys.value.length - 1) {
+          data.selectBrandKeyIndex = 0
         } else {
-          clearInterval(this.timer)
+          data.selectBrandKeyIndex++
         }
+        data.selectBrandKey = brandListKeys[data.selectBrandKeyIndex]
+      }, 3000)
+    } else {
+      clearInterval(data.timer)
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  data.history = data.history.reverse()
+  refresh()
+})
+
+function toggleKey(key) {
+  data.selectBrandKey = key
+  clearInterval(data.timer)
+}
+
+function refresh() {
+  data.randomGuess = sampleSize(data.guess, 6)
+}
+
+function toggle() {
+  if (data.isExpand) {
+    _showSimpleConfirmDialog(
+      '是否清空历史记录？',
+      () => {
+        data.history = []
       },
-      immediate: true
-    }
-  },
-  created() {
-    this.history = this.history.reverse()
-    this.refresh()
-  },
-  methods: {
-    toggleKey(key) {
-      this.selectBrandKey = key
-      clearInterval(this.timer)
-    },
-    refresh() {
-      this.randomGuess = sampleSize(this.guess, 6)
-    },
-    toggle() {
-      if (this.isExpand) {
-        this.$showSimpleConfirmDialog(
-          '是否清空历史记录？',
-          () => {
-            this.history = []
-          },
-          null,
-          '确定',
-          '取消'
-        )
-      } else {
-        this.isExpand = true
-      }
-    }
+      null,
+      '确定',
+      '取消'
+    )
+  } else {
+    data.isExpand = true
   }
 }
 </script>
diff --git a/src/pages/home/SubmitReport.vue b/src/pages/home/SubmitReport.vue
index 129a5ac..78f949f 100644
--- a/src/pages/home/SubmitReport.vue
+++ b/src/pages/home/SubmitReport.vue
@@ -3,9 +3,9 @@
     <BaseHeader>
       <template v-slot:center>
         <span class="f16">
-          <template v-if="mode === 'video'">视频</template>
-          <template v-if="mode === 'music'">音乐</template>
-          <template v-if="mode === 'chat'">私信</template>举报</span
+          <template v-if="data.mode === 'video'">视频</template>
+          <template v-if="data.mode === 'music'">音乐</template>
+          <template v-if="data.mode === 'chat'">私信</template>举报</span
         >
       </template>
     </BaseHeader>
@@ -16,7 +16,7 @@
         >
       </div>
       <div class="row">
-        <span> 举报理由：{{ type }} </span>
+        <span> 举报理由：{{ data.type }} </span>
       </div>
       <div class="l-row">
         <div class="notice">举报描述(选填)</div>
@@ -26,59 +26,61 @@
             id=""
             cols="30"
             rows="10"
-            v-model="desc"
+            v-model="data.desc"
             placeholder="详细描述举报理由"
           ></textarea>
         </div>
-        <div class="text-num">{{ desc.length }}/200</div>
+        <div class="text-num">{{ data.desc.length }}/200</div>
       </div>
       <div class="upload-photo">
-        <div class="photo-wrapper" :key="index" v-for="(item, index) in photos">
+        <div class="photo-wrapper" :key="index" v-for="(item, index) in data.photos">
           <img class="photo" :src="item" alt="" />
           <img
             class="close"
             src="../../assets/img/icon/components/light-close.png"
             alt=""
-            @click="photos.pop()"
+            @click="data.photos.pop()"
           />
         </div>
-        <div class="upload" @click="upload" v-if="photos.length !== 4">
+        <div class="upload" @click="upload" v-if="data.photos.length !== 4">
           <img src="../../assets/img/icon/home/camera-gray.png" alt="" />
-          <span>{{ photos.length }}/4</span>
+          <span>{{ data.photos.length }}/4</span>
         </div>
       </div>
 
-      <dy-button type="primary" @click="$no">提交</dy-button>
+      <dy-button type="primary" @click="_no">提交</dy-button>
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'Report',
-  props: {},
-  data() {
-    return {
-      type: '色情低俗',
-      mode: 'video',
-      desc: '',
-      photos: []
-    }
-  },
-  computed: {},
-  created() {
-    this.type = this.$route.query.type
-    this.mode = this.$route.query.mode
-  },
-  methods: {
-    async upload() {
-      this.$showLoading()
-      await this.$sleep(500)
-      this.$hideLoading()
-      this.photos.push(
-        new URL(`../../assets/img/poster/${this.photos.length}.jpg`, import.meta.url).href
-      )
-    }
-  }
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import { _hideLoading, _no, _showLoading, _sleep } from '@/utils'
+
+defineOptions({
+  name: 'SubmitReport'
+})
+
+const route = useRoute()
+const data = reactive({
+  type: '色情低俗',
+  mode: 'video',
+  desc: '',
+  photos: []
+})
+
+onMounted(() => {
+  data.type = route.query.type
+  data.mode = route.query.mode
+})
+
+async function upload() {
+  _showLoading()
+  await _sleep(500)
+  _hideLoading()
+  data.photos.push(
+    new URL(`../../assets/img/poster/${data.photos.length}.jpg`, import.meta.url).href
+  )
 }
 </script>
 
diff --git a/src/pages/login/Help.vue b/src/pages/login/Help.vue
index ab17db7..9c27e7c 100644
--- a/src/pages/login/Help.vue
+++ b/src/pages/login/Help.vue
@@ -13,17 +13,10 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'Help',
-  props: {},
-  data() {
-    return {}
-  },
-  computed: {},
-  created() {},
-  methods: {}
-}
+<script setup lang="ts">
+defineOptions({
+  name: 'Help'
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
index 2733fcd..9d54441 100644
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -2,10 +2,10 @@
   <div class="login">
     <BaseHeader mode="light" backMode="dark" backImg="close">
       <template v-slot:right>
-        <span class="f14" @click="$nav('/login/help')">帮助与设置</span>
+        <span class="f14" @click="nav('/login/help')">帮助与设置</span>
       </template>
     </BaseHeader>
-    <Loading v-if="loading.getPhone" />
+    <Loading v-if="data.loading.getPhone" />
     <div v-else class="content">
       <div class="desc">
         <div class="title">登录看朋友内容</div>
@@ -15,34 +15,34 @@
 
       <dy-button
         type="primary"
-        :loading="loading.login"
+        :loading="data.loading.login"
         :active="false"
         :loadingWithText="true"
         @click="login"
       >
-        {{ loading.login ? '登录中' : '一键登录' }}
+        {{ data.loading.login ? '登录中' : '一键登录' }}
+      </dy-button>
+      <dy-button :active="false" type="white" @click="nav('/login/other')"
+        >其他手机号码登录
       </dy-button>
-      <dy-button :active="false" type="white" @click="$nav('/login/other')"
-        >其他手机号码登录</dy-button
-      >
 
-      <div class="protocol" :class="showAnim ? 'anim-bounce' : ''">
-        <Tooltip style="top: -100%; left: -10rem" v-model="showTooltip" />
+      <div class="protocol" :class="data.showAnim ? 'anim-bounce' : ''">
+        <Tooltip style="top: -100%; left: -10rem" v-model="data.showTooltip" />
         <div class="left">
-          <Check v-model="isAgree" />
+          <Check v-model="data.isAgree" />
         </div>
         <div class="right">
           我已阅读并同意
-          <span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
+          <span class="link" @click="nav('/service-protocol', { type: '“抖音”用户服务协议' })"
             >用户协议</span
           >
           和
-          <span class="link" @click="$nav('/service-protocol', { type: '“抖音”隐私政策' })"
+          <span class="link" @click="nav('/service-protocol', { type: '“抖音”隐私政策' })"
             >隐私政策</span
           >
           <div>
             以及
-            <span class="link" @click="$nav('/service-protocol', { type: '中国移动认证服务协议' })"
+            <span class="link" @click="nav('/service-protocol', { type: '中国移动认证服务协议' })"
               >《中国移动认证服务条款》</span
             >
             ，同时登录并使用抖音火山版（原“火山小视频”）和抖音
@@ -52,74 +52,72 @@
 
       <div class="other-login">
         <transition name="fade">
-          <div v-if="isOtherLogin" class="icons">
-            <img @click="$no" src="../../assets/img/icon/login/toutiao-round.png" alt="" />
-            <img @click="$no" src="../../assets/img/icon/login/qq-round.webp" alt="" />
-            <img @click="$no" src="../../assets/img/icon/login/wechat-round.png" alt="" />
-            <img @click="$no" src="../../assets/img/icon/login/weibo-round.webp" alt="" />
+          <div v-if="data.isOtherLogin" class="icons">
+            <img @click="_no" src="../../assets/img/icon/login/toutiao-round.png" alt="" />
+            <img @click="_no" src="../../assets/img/icon/login/qq-round.webp" alt="" />
+            <img @click="_no" src="../../assets/img/icon/login/wechat-round.png" alt="" />
+            <img @click="_no" src="../../assets/img/icon/login/weibo-round.webp" alt="" />
           </div>
         </transition>
       </div>
       <transition name="fade">
         <span
-          v-if="!isOtherLogin"
+          v-if="!data.isOtherLogin"
           class="other-login-text link"
-          @click="isOtherLogin = !isOtherLogin"
+          @click="data.isOtherLogin = !data.isOtherLogin"
           >其他方式登录</span
         >
       </transition>
     </div>
   </div>
 </template>
-<script>
-import Check from '../../components/Check'
-import Tooltip from './components/Tooltip'
-import Loading from '../../components/Loading'
+<script setup lang="ts">
+import Check from '../../components/Check.vue'
+import Tooltip from './components/Tooltip.vue'
+import Loading from '../../components/Loading.vue'
+import { onMounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav'
+import { _no, _sleep } from '@/utils'
 
-export default {
-  name: 'login',
-  components: {
-    Check,
-    Tooltip,
-    Loading
-  },
-  data() {
-    return {
-      isAgree: false,
-      isOtherLogin: false,
-      showAnim: false,
-      showTooltip: false,
-      loading: {
-        login: false,
-        getPhone: false
-      }
-    }
-  },
-  computed: {},
-  created() {
-    this.getPhone()
-  },
-  methods: {
-    async getPhone() {
-      this.loading.getPhone = true
-      await this.$sleep(1000)
-      this.loading.getPhone = false
-    },
-    login() {
-      if (this.isAgree) {
-        this.loading.login = true
-      } else {
-        if (!this.showAnim && !this.showTooltip) {
-          this.showAnim = true
-          setTimeout(() => {
-            this.showAnim = false
-            this.showTooltip = true
-          }, 500)
-          setTimeout(() => {
-            this.showTooltip = false
-          }, 3000)
-        }
-      }
+defineOptions({
+  name: 'login'
+})
+
+const nav = useNav()
+const data = reactive({
+  isAgree: false,
+  isOtherLogin: false,
+  showAnim: false,
+  showTooltip: false,
+  loading: {
+    login: false,
+    getPhone: false
+  }
+})
+
+onMounted(() => {
+  getPhone()
+})
+
+async function getPhone() {
+  data.loading.getPhone = true
+  await _sleep(1000)
+  data.loading.getPhone = false
+}
+
+function login() {
+  if (data.isAgree) {
+    data.loading.login = true
+  } else {
+    if (!data.showAnim && !data.showTooltip) {
+      data.showAnim = true
+      setTimeout(() => {
+        data.showAnim = false
+        data.showTooltip = true
+      }, 500)
+      setTimeout(() => {
+        data.showTooltip = false
+      }, 3000)
     }
   }
 }
diff --git a/src/pages/login/VerificationCode.vue b/src/pages/login/VerificationCode.vue
index 7ba7d97..d9aed12 100644
--- a/src/pages/login/VerificationCode.vue
+++ b/src/pages/login/VerificationCode.vue
@@ -2,7 +2,7 @@
   <div class="VerificationCode">
     <BaseHeader mode="light" backMode="dark" backImg="back">
       <template v-slot:right>
-        <span class="f14" @click="$nav('/login/help')">帮助与设置</span>
+        <span class="f14" @click="nav('/login/help')">帮助与设置</span>
       </template>
     </BaseHeader>
     <div class="content">
@@ -14,91 +14,93 @@
       <LoginInput
         autofocus
         type="code"
-        v-model="code"
+        v-model="data.code"
         placeholder="请输入验证码"
-        v-model:isSendVerificationCode="isSendVerificationCode"
+        v-model:isSendVerificationCode="data.isSendVerificationCode"
         @send="sendCode"
       />
-      <div class="options" v-if="showVoiceCode">
+      <div class="options" v-if="data.showVoiceCode">
         <span> 收不到短信？<span class="link" @click="getVoiceCode">获取语音验证码</span> </span>
       </div>
 
       <dy-button
         type="primary"
-        :loading="loading"
+        :loading="data.loading"
         :active="false"
-        :disabled="code.length < 4"
+        :disabled="data.code.length < 4"
         @click="login"
       >
-        {{ loading ? '登录中' : '登录' }}
+        {{ data.loading ? '登录中' : '登录' }}
       </dy-button>
     </div>
   </div>
 </template>
-<script>
-import LoginInput from './components/LoginInput'
+<script setup lang="ts">
+import LoginInput from './components/LoginInput.vue'
+import { onMounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav'
+import { _hideLoading, _showConfirmDialog, _showLoading, _showNoticeDialog, _sleep } from '@/utils'
 
-export default {
-  name: 'VerificationCode',
-  components: {
-    LoginInput
-  },
-  data() {
-    return {
-      showAnim: false,
-      showTooltip: false,
-      loading: false,
-      phone: '',
-      password: '',
-      code: '',
-      isSendVerificationCode: true,
-      showVoiceCode: false
-    }
-  },
-  created() {
-    setTimeout(() => {
-      this.showVoiceCode = true
-    }, 3000)
-  },
-  methods: {
-    getVoiceCode() {
-      return this.$showNoticeDialog(
-        '语音验证码',
-        '我们将以电话的方式告知你验证码，请注意接听',
-        '',
-        () => {
-          setTimeout(() => {
-            this.$showConfirmDialog(
-              '',
-              '您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' +
-                '您因为换号无法收到验证码，可以尝试找回账号',
-              '',
-              () => {},
-              null,
-              '找回账号',
-              '返回',
-              ''
-            )
-          }, 2000)
-        },
-        '知道了'
-      )
-    },
-    //TODO loading样式不对
-    async sendCode() {
-      this.$showLoading()
-      await this.$sleep(500)
-      this.$hideLoading()
-      this.isSendVerificationCode = true
-    },
-    login() {
-      this.loading = true
+defineOptions({
+  name: 'VerificationCode'
+})
+
+const nav = useNav()
+const data = reactive({
+  showAnim: false,
+  showTooltip: false,
+  loading: false,
+  phone: '',
+  password: '',
+  code: '',
+  isSendVerificationCode: true,
+  showVoiceCode: false
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    data.showVoiceCode = true
+  }, 3000)
+})
+
+function getVoiceCode() {
+  return _showNoticeDialog(
+    '语音验证码',
+    '我们将以电话的方式告知你验证码，请注意接听',
+    '',
+    () => {
       setTimeout(() => {
-        this.isSendVerificationCode = true
-        this.loading = false
-      }, 1000)
-    }
-  }
+        _showConfirmDialog(
+          '',
+          '您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' +
+            '您因为换号无法收到验证码，可以尝试找回账号',
+          '',
+          () => {},
+          null,
+          '找回账号',
+          '返回',
+          ''
+        )
+      }, 2000)
+    },
+    '知道了'
+  )
+}
+
+//TODO loading样式不对
+async function sendCode() {
+  _showLoading()
+  await _sleep(500)
+  _hideLoading()
+  data.isSendVerificationCode = true
+}
+
+function login() {
+  data.loading = true
+  setTimeout(() => {
+    data.isSendVerificationCode = true
+    data.loading = false
+  }, 1000)
 }
 </script>
 
diff --git a/src/pages/me/MyMusic.vue b/src/pages/me/MyMusic.vue
index 4c2e3c9..d3cd837 100644
--- a/src/pages/me/MyMusic.vue
+++ b/src/pages/me/MyMusic.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="MyMusic">
     <div class="header">
-      <dy-back class="back" mode="light" img="back" @click="$back" />
+      <dy-back class="back" mode="light" img="back" @click="router.back()" />
       <IndicatorLight
         name="myMusicList"
         :tabTexts="['猜你爱听', '我的收藏']"
-        v-model:active-index="slideIndex"
+        v-model:active-index="data.slideIndex"
       >
       </IndicatorLight>
       <dy-back style="opacity: 0" mode="light" img="back" />
     </div>
-    <SlideHorizontal name="myMusicList" v-model:index="slideIndex">
+    <SlideHorizontal name="myMusicList" v-model:index="data.slideIndex">
       <SlideItem>
-        <GuessMusic :list="guessMusic" />
+        <GuessMusic :list="data.guessMusic" />
       </SlideItem>
       <SlideItem style="overflow: auto">
-        <Loading style="left: 150%" v-if="loading" />
+        <Loading style="left: 150%" v-if="data.loading" />
         <div v-else class="my-collect">
           <div class="wrapper">
             <div class="play-all">
@@ -30,25 +30,25 @@
               <div
                 class="item"
                 :key="index"
-                v-for="(item, index) in collectMusic"
+                v-for="(item, index) in data.collectMusic"
                 @click="page2PlayMusic(item)"
               >
                 <div class="left">
                   <div class="cover-wrapper">
-                    <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
+                    <img v-lazy="_checkImgUrl(item.cover)" alt="" class="cover" />
                   </div>
                   <div class="desc">
                     <span class="name">{{ item.name }}</span>
                     <div class="author">{{ item.author }}</div>
                     <div class="desc-bottom">
                       <div class="tag">完整版</div>
-                      <div class="duration">{{ $duration(item.duration) }}</div>
+                      <div class="duration">{{ _duration(item.duration) }}</div>
                     </div>
                   </div>
                 </div>
                 <div class="right">
                   <img
-                    v-if="page2SlideIndex === index"
+                    v-if="data.page2SlideIndex === index"
                     class="playing-icon"
                     src="../../assets/img/icon/me/pinlv.gif"
                   />
@@ -59,32 +59,32 @@
               <span>推荐收藏</span>
               <div class="right">
                 <span class="auto-play">自动播放</span>
-                <switches v-model="isAutoPlay" theme="bootstrap" color="success"></switches>
+                <switches v-model="data.isAutoPlay" theme="bootstrap" color="success"></switches>
               </div>
             </div>
             <div class="recommend-list">
               <div
                 class="item"
                 :key="index"
-                v-for="(item, index) in recommendMusic"
+                v-for="(item, index) in data.recommendMusic"
                 @click="page2PlayMusic(item)"
               >
                 <div class="left">
                   <div class="cover-wrapper">
-                    <img v-lazy="$imgPreview(item.cover)" alt="" class="cover" />
+                    <img v-lazy="_checkImgUrl(item.cover)" alt="" class="cover" />
                   </div>
                   <div class="desc">
                     <span class="name">{{ item.name }}</span>
                     <div class="author">{{ item.author }}</div>
                     <div class="desc-bottom">
                       <div class="tag">完整版</div>
-                      <div class="duration">{{ $duration(item.duration) }}</div>
+                      <div class="duration">{{ _duration(item.duration) }}</div>
                     </div>
                   </div>
                 </div>
                 <div class="right">
                   <img
-                    v-if="page2SlideIndex - collectMusic.length === index"
+                    v-if="data.page2SlideIndex - data.collectMusic.length === index"
                     class="playing-icon"
                     src="../../assets/img/icon/me/pinlv.gif"
                   />
@@ -105,28 +105,32 @@
             </div>
           </div>
           <transition name="float-play">
-            <div v-if="isShowFloatPlay" class="playing" @click="isShowCollectDialog = true">
+            <div
+              v-if="data.isShowFloatPlay"
+              class="playing"
+              @click="data.isShowCollectDialog = true"
+            >
               <div class="playing-wrapper">
                 <div class="cover-wrapper">
-                  <img v-lazy="$imgPreview(currentMusic.cover)" alt="" class="cover" />
+                  <img v-lazy="_checkImgUrl(data.currentMusic.cover)" alt="" class="cover" />
                 </div>
-                <div class="name">{{ currentMusic.name }}</div>
+                <div class="name">{{ data.currentMusic.name }}</div>
                 <img
-                  v-show="page2IsPlay"
+                  v-show="data.page2IsPlay"
                   @click.stop="togglePage2Play"
                   class="option"
                   src="../../assets/img/icon/me/float-pause-one.png"
                   alt=""
                 />
                 <img
-                  v-show="!page2IsPlay"
+                  v-show="!data.page2IsPlay"
                   @click.stop="togglePage2Play"
                   class="option"
                   src="../../assets/img/icon/me/float-play.png"
                   alt=""
                 />
                 <img
-                  @click.stop="$no"
+                  @click.stop="_no"
                   class="menu-list"
                   src="../../assets/img/icon/me/music-list.png"
                   alt=""
@@ -138,104 +142,104 @@
       </SlideItem>
     </SlideHorizontal>
     <transition name="my-collect-dialog">
-      <div class="my-collect-dialog" v-show="isShowCollectDialog">
+      <div class="my-collect-dialog" v-show="data.isShowCollectDialog">
         <div class="dialog-header">
-          <dy-back class="close" mode="light" img="back" @click="isShowCollectDialog = false" />
+          <dy-back
+            class="close"
+            mode="light"
+            img="back"
+            @click="data.isShowCollectDialog = false"
+          />
           <span>我的收藏</span>
           <dy-back style="opacity: 0" mode="light" img="back" />
         </div>
         <CollectMusic
           ref="CollectMusic"
           :list="page2Music"
-          v-model:page2SlideIndex="page2SlideIndex"
+          v-model:page2SlideIndex="data.page2SlideIndex"
         />
       </div>
     </transition>
   </div>
 </template>
-<script>
-import { mapState } from 'pinia'
-import Switches from '../message/components/swtich/switches'
-import IndicatorLight from '../../components/slide/IndicatorLight'
-import GuessMusic from './components/GuessMusic'
-import CollectMusic from './components/CollectMusic'
-import Loading from '../../components/Loading'
+<script setup lang="ts">
+import Switches from '../message/components/swtich/switches.vue'
+import IndicatorLight from '../../components/slide/IndicatorLight.vue'
+import GuessMusic from './components/GuessMusic.vue'
+import Loading from '../../components/Loading.vue'
 import { userCollect } from '@/api/user'
 import { useBaseStore } from '@/store/pinia'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
+import { _checkImgUrl, _duration, _no } from '@/utils'
 
+defineOptions({
+  name: 'MyMusic'
+})
+
+const router = useRouter()
+const CollectMusic = ref()
+const data = reactive({
+  loading: false,
+  slideIndex: 1,
+  currentMusic: {
+    name: '告白气球',
+    mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',
+    cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
+    author: '周杰伦',
+    duration: 60,
+    use_count: 37441000,
+    is_collect: false,
+    is_play: false
+  },
+  collectMusic: [],
+  recommendMusic: [],
+  guessMusic: [],
+
+  isShowCollectDialog: false,
+  isShowFloatPlay: false,
+
+  isAutoPlay: true,
+  isCollect: false,
+
+  page2SlideIndex: -1,
+  page2IsPlay: false
+})
 //TODO 两个page页面的播放冲突未做
-export default {
-  name: 'MyMusic',
-  components: {
-    Switches,
-    IndicatorLight,
-    GuessMusic,
-    CollectMusic,
-    Loading
-  },
-  data() {
-    return {
-      loading: false,
-      slideIndex: 1,
-      currentMusic: {
-        name: '告白气球',
-        mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',
-        cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
-        author: '周杰伦',
-        duration: 60,
-        use_count: 37441000,
-        is_collect: false,
-        is_play: false
-      },
-      collectMusic: [],
-      recommendMusic: [],
-      guessMusic: [],
+onMounted(() => {
+  getCollectMusic()
+})
 
-      isShowCollectDialog: false,
-      isShowFloatPlay: false,
+const page2Music = computed(() => {
+  return data.collectMusic.concat(data.recommendMusic)
+})
 
-      isAutoPlay: true,
-      isCollect: false,
+function togglePage2Play() {
+  data.page2IsPlay = !data.page2IsPlay
+  if (data.page2IsPlay) {
+    CollectMusic.value.play(data.page2SlideIndex)
+  } else {
+    CollectMusic.value.pause()
+  }
+}
 
-      page2SlideIndex: -1,
-      page2IsPlay: false
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['bodyWidth']),
-    page2Music() {
-      return this.collectMusic.concat(this.recommendMusic)
-    }
-  },
-  created() {
-    this.getCollectMusic()
-  },
-  methods: {
-    togglePage2Play() {
-      this.page2IsPlay = !this.page2IsPlay
-      if (this.page2IsPlay) {
-        this.$refs.CollectMusic.play(this.page2SlideIndex)
-      } else {
-        this.$refs.CollectMusic.pause()
-      }
-    },
-    page2PlayMusic(item) {
-      this.currentMusic = item
-      this.isShowFloatPlay = true
-      this.page2IsPlay = true
-      this.page2SlideIndex = this.page2Music.findIndex((v) => v.name === item.name)
-      this.isShowCollectDialog = true
-      this.$refs.CollectMusic.play(this.page2SlideIndex)
-    },
-    async getCollectMusic() {
-      this.loading = true
-      let res = await userCollect()
-      this.loading = false
-      if (res.code === this.SUCCESS) {
-        this.collectMusic = res.data.music.list.slice(0, 2)
-        this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1)
-      }
-    }
+function page2PlayMusic(item) {
+  data.currentMusic = item
+  data.isShowFloatPlay = true
+  data.page2IsPlay = true
+  data.page2SlideIndex = page2Music.value.findIndex((v) => v.name === item.name)
+  data.isShowCollectDialog = true
+  CollectMusic.value.play(data.page2SlideIndex)
+}
+
+async function getCollectMusic() {
+  data.loading = true
+  let res: any = await userCollect()
+  data.loading = false
+  if (res.success) {
+    data.collectMusic = res.data.music.list.slice(0, 2)
+    data.guessMusic = data.recommendMusic = res.data.music.list.slice(2, -1)
   }
 }
 </script>
diff --git a/src/pages/me/MyRequestUpdate.vue b/src/pages/me/MyRequestUpdate.vue
index d0b5c02..f7fa2c9 100644
--- a/src/pages/me/MyRequestUpdate.vue
+++ b/src/pages/me/MyRequestUpdate.vue
@@ -8,34 +8,27 @@
     <div class="content">
       <div class="request">
         <div class="list">
-          <div class="item" :key="i" v-for="(item, i) in friends.all">
+          <div class="item" :key="i" v-for="(item, i) in store.friends.all">
             <div class="left">
-              <img :src="$imgPreview(item.avatar)" />
+              <img :src="_checkImgUrl(item.avatar)" />
               <span class="name">{{ item.name }}</span>
             </div>
-            <span class="time">{{ $dateFormat(item.lastLoginTime, 'D') }}</span>
+            <span class="time">{{ _dateFormat(item.lastLoginTime, 'D') }}</span>
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-<script>
-import { mapState } from 'pinia'
+<script setup lang="ts">
 import { useBaseStore } from '@/store/pinia'
+import { _checkImgUrl, _dateFormat } from '../../utils'
 
-export default {
-  name: 'MyRequestUpdate',
-  components: {},
-  data() {
-    return {}
-  },
-  computed: {
-    ...mapState(useBaseStore, ['friends'])
-  },
-  created() {},
-  methods: {}
-}
+const store = useBaseStore()
+
+defineOptions({
+  name: 'MyRequestUpdate'
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/me/RequestUpdate.vue b/src/pages/me/RequestUpdate.vue
index 4db62f8..1bde7e2 100644
--- a/src/pages/me/RequestUpdate.vue
+++ b/src/pages/me/RequestUpdate.vue
@@ -9,12 +9,12 @@
           <img
             src="../../assets/img/icon/menu-gray.png"
             style="width: 20rem"
-            @click="isShowOption = true"
+            @click="data.isShowOption = true"
           />
         </div>
       </template>
     </BaseHeader>
-    <Loading v-if="loading" />
+    <Loading v-if="data.loading" />
     <div v-else class="content">
       <div class="none" v-if="false">
         <img src="../../assets/img/icon/none-bg1.webp" alt="" />
@@ -26,22 +26,22 @@
         <!--        <div class="subtitle f12">上次发布作品：2020-08-01 上次开播：昨天23:12</div>-->
         <div class="subtitle f12">历史求更新（粉丝送礼后7天未开播则退还礼物）</div>
         <div class="list">
-          <div class="item" :key="i" v-for="(item, i) in friends.all">
+          <div class="item" :key="i" v-for="(item, i) in store.friends.all">
             <div class="left">
-              <img :src="$imgPreview(item.avatar)" />
+              <img :src="_checkImgUrl(item.avatar)" />
               <span class="name">{{ item.name }}</span>
             </div>
-            <span class="time">{{ $dateFormat(item.lastLoginTime, 'D') }}</span>
+            <span class="time">{{ _dateFormat(item.lastLoginTime, 'D') }}</span>
           </div>
         </div>
         <no-more>最多展示100位粉丝的历史求更新记录</no-more>
       </div>
     </div>
     <div class="buttons">
-      <dy-button type="white" :border="false" :active="false" @click="$nav('/publish')"
-        >发布作品</dy-button
-      >
-      <dy-button type="primary" :active="false" @click="$no">去直播</dy-button>
+      <dy-button type="white" :border="false" :active="false" @click="nav('/publish')"
+        >发布作品
+      </dy-button>
+      <dy-button type="primary" :active="false" @click="_no">去直播</dy-button>
     </div>
 
     <from-bottom-dialog
@@ -49,53 +49,53 @@
       height="160rem"
       :show-heng-gang="false"
       mode="white"
-      v-model="isShowOption"
+      v-model="data.isShowOption"
     >
       <div class="l-row" @click="toggleRequestUpdate">
-        {{ openRequestUpdate ? '关闭' : '开启' }}求更新提醒
+        {{ data.openRequestUpdate ? '关闭' : '开启' }}求更新提醒
       </div>
-      <div class="l-row" @click="$nav('/me/my-request-update')">我的求更新提醒</div>
+      <div class="l-row" @click="nav('/me/my-request-update')">我的求更新提醒</div>
       <div class="space"></div>
-      <div class="l-row" @click="isShowOption = false">取消</div>
+      <div class="l-row" @click="data.isShowOption = false">取消</div>
     </from-bottom-dialog>
   </div>
 </template>
-<script>
-import { mapState } from 'pinia'
-import FromBottomDialog from '../../components/dialog/FromBottomDialog'
+<script setup lang="ts">
+import FromBottomDialog from '../../components/dialog/FromBottomDialog.vue'
 import { useBaseStore } from '@/store/pinia'
+import { onMounted, reactive } from 'vue'
+import { useNav } from '@/utils/hooks/useNav'
+import { _checkImgUrl, _dateFormat, _notice, _sleep } from '@/utils'
 
-export default {
-  name: 'RequestUpdate',
-  components: { FromBottomDialog },
-  data() {
-    return {
-      isShowOption: false,
-      loading: false,
-      openRequestUpdate: true
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['friends'])
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    async getData() {
-      this.loading = true
-      await this.$sleep(700)
-      this.loading = false
-    },
-    toggleRequestUpdate() {
-      this.openRequestUpdate = !this.openRequestUpdate
-      this.isShowOption = false
-      if (this.openRequestUpdate) {
-        this.$notice('提醒已开启，再次点击可关闭')
-      } else {
-        this.$notice('提醒已关闭，再次点击可开启')
-      }
-    }
+defineOptions({
+  name: 'RequestUpdate'
+})
+
+const nav = useNav()
+const store = useBaseStore()
+const data = reactive({
+  isShowOption: false,
+  loading: false,
+  openRequestUpdate: true
+})
+
+onMounted(() => {
+  getData()
+})
+
+async function getData() {
+  data.loading = true
+  await _sleep(700)
+  data.loading = false
+}
+
+function toggleRequestUpdate() {
+  data.openRequestUpdate = !data.openRequestUpdate
+  data.isShowOption = false
+  if (data.openRequestUpdate) {
+    _notice('提醒已开启，再次点击可关闭')
+  } else {
+    _notice('提醒已关闭，再次点击可开启')
   }
 }
 </script>
diff --git a/src/pages/message/RedPacketDetail.vue b/src/pages/message/RedPacketDetail.vue
index bec679c..b2156f0 100644
--- a/src/pages/message/RedPacketDetail.vue
+++ b/src/pages/message/RedPacketDetail.vue
@@ -2,48 +2,43 @@
   <div id="RedPacketDetail">
     <BaseHeader mode="light">
       <template v-slot:right>
-        <span @click="$no" class="f14" style="color: rgb(193, 135, 79)">红包记录</span>
+        <span @click="_no" class="f14" style="color: rgb(193, 135, 79)">红包记录</span>
       </template>
     </BaseHeader>
     <div class="content">
       <div class="wrapper">
-        <img :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="avatar" />
-        <span class="belong">{{ userinfo.nickname }}的红包</span>
+        <img :src="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])" alt="" class="avatar" />
+        <span class="belong">{{ store.userinfo.nickname }}的红包</span>
         <div class="password">大吉大利</div>
         <span class="money">0.01元</span>
         <!--        <span class="notice" @click="$nav('/me/money')">已存入我的零钱，可直接使用></span>-->
-        <span class="notice" @click="$no">已存入我的零钱，可直接使用></span>
+        <span class="notice" @click="_no">已存入我的零钱，可直接使用></span>
       </div>
       <img src="../../assets/img/icon/message/chat/money-detail-bg.png" alt="" class="bg" />
     </div>
   </div>
 </template>
-<script>
-import { mapState } from 'pinia'
+<script setup lang="ts">
 import { useBaseStore } from '@/store/pinia'
-import { _checkImgUrl } from '@/utils'
+import { _checkImgUrl, _no } from '@/utils'
+import { useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
 
-export default {
-  name: 'RedPacketDetail',
-  components: {},
-  props: {
-    modelValue: {
-      type: Boolean,
-      default() {
-        return false
-      }
+defineOptions({
+  name: 'RedPacketDetail'
+})
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default() {
+      return false
     }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    ...mapState(useBaseStore, ['userinfo'])
-  },
-  watch: {},
-  created() {},
-  methods: { _checkImgUrl }
-}
+  }
+})
+const router = useRouter()
+const nav = useNav()
+const store = useBaseStore()
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/message/SetRemark.vue b/src/pages/message/SetRemark.vue
index 36548fb..ab390c2 100644
--- a/src/pages/message/SetRemark.vue
+++ b/src/pages/message/SetRemark.vue
@@ -14,52 +14,55 @@
     <div class="content">
       <div class="notice">备注名</div>
       <div class="input-ctn" style="margin-bottom: 1rem">
-        <input type="text" v-model="remark" placeholder="请输入备注名" />
+        <input type="text" v-model="data.remark" placeholder="请输入备注名" />
         <img
-          v-if="remark.length"
+          v-if="data.remark.length"
           class="close"
           src="../../assets/img/icon/close.svg"
           alt=""
-          @click="remark = ''"
+          @click="data.remark = ''"
         />
       </div>
-      <div class="num">{{ remark.length }}/20</div>
+      <div class="num">{{ data.remark.length }}/20</div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'SetRemark',
-  data() {
-    return {
-      remark: '',
-      oldRemark: ''
-    }
-  },
-  computed: {
-    isChanged() {
-      return this.remark !== this.oldRemark
-    }
-  },
-  created() {},
-  methods: {
-    back() {
-      if (this.isChanged) {
-        this.$showSimpleConfirmDialog('是否保存修改', this.save, this.$back)
-      } else {
-        this.$back()
-      }
-    },
-    async save() {
-      if (!this.isChanged) return
-      this.$showLoading()
-      await this.$sleep(500)
-      this.$hideLoading()
-      this.$back()
-    }
+<script setup lang="ts">
+import { computed, onMounted, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { _hideLoading, _showLoading, _showSimpleConfirmDialog, _sleep } from '@/utils'
+
+defineOptions({
+  name: 'SetRemark'
+})
+
+const router = useRouter()
+const data = reactive({
+  remark: '',
+  oldRemark: ''
+})
+
+const isChanged = computed(() => {
+  return data.remark !== data.oldRemark
+})
+onMounted(() => {})
+
+function back() {
+  if (isChanged.value) {
+    _showSimpleConfirmDialog('是否保存修改', save, router.back)
+  } else {
+    router.back()
   }
 }
+
+async function save() {
+  if (!isChanged.value) return
+  _showLoading()
+  await _sleep(500)
+  _hideLoading()
+  router.back()
+}
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/message/Share2Friend.vue b/src/pages/message/Share2Friend.vue
index 282cb93..8549360 100644
--- a/src/pages/message/Share2Friend.vue
+++ b/src/pages/message/Share2Friend.vue
@@ -6,20 +6,20 @@
       </template>
       <template v-slot:bottom>
         <div class="search">
-          <div class="search-select-friends" v-if="selectFriends.length">
+          <div class="search-select-friends" v-if="data.selectFriends.length">
             <div class="wrapper">
               <img
-                :src="$imgPreview(item.avatar)"
+                :src="_checkImgUrl(item.avatar)"
                 :key="i"
-                v-for="(item, i) in selectFriends"
+                v-for="(item, i) in data.selectFriends"
                 @click="toggleSelect(item)"
               />
             </div>
           </div>
           <img v-else class="search-icon" src="../../assets/img/icon/search-gray.png" alt="" />
-          <input type="text" placeholder="搜索" v-model="searchKey" />
+          <input type="text" placeholder="搜索" v-model="data.searchKey" />
           <img
-            v-if="searchKey"
+            v-if="data.searchKey"
             @click="clear"
             class="clear"
             src="../../assets/img/icon/components/gray-close-full.png"
@@ -31,36 +31,38 @@
       class="is-search"
       :style="{
         height:
-          selectFriends.length && searchResult.length
+          data.selectFriends.length && data.searchResult.length
             ? 'calc(100% - 272rem)'
             : 'calc(100% - 112rem)'
       }"
-      v-show="searchKey"
+      v-show="data.searchKey"
     >
-      <div class="list" v-if="searchResult.length">
+      <div class="list" v-if="data.searchResult.length">
         <div
           class="local-row"
           :key="i"
-          v-for="(item, i) of searchResult"
+          v-for="(item, i) of data.searchResult"
           @click="handleClick(item)"
         >
           <Check mode="red" v-model="item.select" />
-          <img :src="$imgPreview(item.avatar)" alt="" />
+          <img :src="_checkImgUrl(item.avatar)" alt="" />
           <div class="desc">
             <span class="name">
-              <span v-if="item.name.indexOf(searchKey) > -1">
-                {{ item.name.substr(0, item.name.indexOf(searchKey))
-                }}<span style="color: #ffd800">{{ searchKey }}</span
-                >{{ item.name.substr(item.name.indexOf(searchKey) + searchKey.length) }}
+              <span v-if="item.name.indexOf(data.searchKey) > -1">
+                {{ item.name.substr(0, item.name.indexOf(data.searchKey))
+                }}<span style="color: #ffd800">{{ data.searchKey }}</span
+                >{{ item.name.substr(item.name.indexOf(data.searchKey) + data.searchKey.length) }}
               </span>
               <span v-else>{{ item.name }}</span>
             </span>
             <span class="account" v-if="item.account">
               抖音号：
-              <span v-if="item.account.indexOf(searchKey) > -1">
-                {{ item.account.substr(0, item.account.indexOf(searchKey))
-                }}<span style="color: #ffd800">{{ searchKey }}</span
-                >{{ item.account.substr(item.account.indexOf(searchKey) + searchKey.length) }}
+              <span v-if="item.account.indexOf(data.searchKey) > -1">
+                {{ item.account.substr(0, item.account.indexOf(data.searchKey))
+                }}<span style="color: #ffd800">{{ data.searchKey }}</span
+                >{{
+                  item.account.substr(item.account.indexOf(data.searchKey) + data.searchKey.length)
+                }}
               </span>
               <span v-else>{{ item.account }}</span>
             </span>
@@ -75,12 +77,12 @@
     </div>
     <div
       ref="list"
-      :style="{ paddingBottom: selectFriends.length ? '160rem' : 0 }"
+      :style="{ paddingBottom: data.selectFriends.length ? '160rem' : 0 }"
       class="content"
       @scroll="scroll"
     >
       <div class="list">
-        <div class="row" @click="$nav('/message/joined-group-chat')">
+        <div class="row" @click="nav('/message/joined-group-chat')">
           <span>已加入的群聊</span>
           <dy-back :scale="0.7" direction="right"></dy-back>
         </div>
@@ -88,48 +90,48 @@
         <div
           class="local-row"
           :key="i"
-          v-for="(item, i) of friends.recent"
+          v-for="(item, i) of data.friends.recent"
           @click="toggleSelect(item)"
         >
           <Check mode="red" v-model="item.select" />
-          <img :src="$imgPreview(item.avatar)" alt="" />
+          <img :src="_checkImgUrl(item.avatar)" alt="" />
           <span>{{ item.name }}</span>
         </div>
         <div class="title">互关好友</div>
         <div
           class="local-row"
           :key="i"
-          v-for="(item, i) of friends.eachOther"
+          v-for="(item, i) of data.friends.eachOther"
           @click="toggleSelect(item)"
         >
           <Check mode="red" v-model="item.select" />
-          <img :src="$imgPreview(item.avatar)" alt="" />
+          <img :src="_checkImgUrl(item.avatar)" alt="" />
           <span>{{ item.name }}</span>
         </div>
         <div class="title">全部</div>
-        <div :key="name" v-for="(value, name) of friendsSort">
+        <div :key="name" v-for="(value, name) of data.friendsSort">
           <div :class="name === '#' ? 'top' : name" class="title">
             <span>{{ name }}</span>
           </div>
           <div class="local-row" :key="i" v-for="(item, i) of value" @click="toggleSelect(item)">
             <Check mode="red" v-model="item.select" />
-            <img :src="$imgPreview(item.avatar)" alt="" />
+            <img :src="_checkImgUrl(item.avatar)" alt="" />
             <span>{{ item.name }}</span>
           </div>
         </div>
       </div>
-      <div class="share2friend" v-if="selectFriends.length && searchResult.length">
+      <div class="share2friend" v-if="data.selectFriends.length && data.searchResult.length">
         <div class="comment">
           <textarea placeholder="有什么想和好友说的..."></textarea>
           <img class="poster" src="../../assets/img/poster/1.jpg" alt="" />
         </div>
         <div class="wrapper">
-          <div class="create-chat" v-if="selectFriends.length > 1">
-            <Check mode="red" v-model="isCreateChat" />
+          <div class="create-chat" v-if="data.selectFriends.length > 1">
+            <Check mode="red" v-model="data.isCreateChat" />
             <span>创建群聊</span>
           </div>
           <dy-button type="primary"
-            >{{ selectFriends.length > 1 ? '分别发送' : '发送' }}
+            >{{ data.selectFriends.length > 1 ? '分别发送' : '发送' }}
           </dy-button>
         </div>
       </div>
@@ -167,198 +169,208 @@
     </div>
     <div
       class="hover"
-      :style="{ top: currentFixedIndicatorTop }"
+      :style="{ top: data.currentFixedIndicatorTop }"
       ref="hover"
-      v-if="currentFixedIndicator"
+      v-if="data.currentFixedIndicator"
     >
       <img src="../../assets/img/icon/components/video/water.png" alt="" />
-      <span>{{ currentFixedIndicator }}</span>
+      <span>{{ data.currentFixedIndicator }}</span>
     </div>
   </div>
 </template>
-<script>
-import Check from '../../components/Check'
+<script setup lang="ts">
+import Check from '../../components/Check.vue'
 import { friends } from '@/api/user'
 
-export default {
-  name: 'Share2Friend',
-  components: { Check },
-  props: {},
-  computed: {
-    // ...mapState(['friends']),
+import { useBaseStore } from '@/store/pinia'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
+import { _checkImgUrl, cloneDeep } from '@/utils'
+
+defineOptions({
+  name: 'Share2Friend'
+})
+
+const router = useRouter()
+const nav = useNav()
+const store = useBaseStore()
+const data = reactive({
+  isCreateChat: false,
+  searchKey: '',
+  indexOffsetTop: {},
+  currentFixedIndicator: '',
+  currentFixedIndicatorTop: '0px',
+  friends: {
+    all: {},
+    recent: [],
+    eachOther: []
   },
-  data() {
-    return {
-      isCreateChat: false,
-      searchKey: '',
-      indexOffsetTop: {},
-      currentFixedIndicator: '',
-      currentFixedIndicatorTop: 0,
-      friends: {
-        all: {},
-        recent: [],
-        eachOther: []
-      },
-      selectFriends: [],
-      friendsSort: {},
-      searchResult: []
-    }
-  },
-  watch: {
-    searchKey(newVal) {
-      let temp = this.$clone(this.friends.all)
-      temp.map((v) => {
-        if (this.selectFriends.find((w) => w.id === v.id)) v.select = true
-      })
-      this.searchResult = temp.filter((v) => {
-        return v.name.includes(newVal) || v.account.includes(newVal)
-      })
-    }
-  },
-  created() {
-    this.getFriends()
-  },
-  mounted() {
-    let indexs = document.querySelectorAll('.index')
-    indexs.forEach((v) => {
-      this.indexOffsetTop[v.children[0].innerText] = v.offsetTop
-    })
-    let items = document.querySelectorAll('.item')
-    let item = document.querySelector(`.item:nth-child(2)`)
-    let itemHeight = item.clientHeight
-    let ul = document.querySelector('.indicator')
-    let ulOffsetTop = ul.offsetTop
-    let resetColor = 'rgb(143, 143, 158)'
-    ul.addEventListener('touchstart', (e) => {
-      let pageY = e.touches[0].pageY - ulOffsetTop
-      let currentIndex = pageY / itemHeight
-      currentIndex = Math.floor(currentIndex)
+  selectFriends: [],
+  friendsSort: {},
+  searchResult: []
+})
+
+onMounted(() => {
+  getFriends()
+  let indexs = document.querySelectorAll('.index')
+  indexs.forEach((v) => {
+    data.indexOffsetTop[v.children[0].innerText] = v.offsetTop
+  })
+  let items = document.querySelectorAll('.item')
+  let item = document.querySelector(`.item:nth-child(2)`)
+  let itemHeight = item.clientHeight
+  let ul = document.querySelector('.indicator')
+  let ulOffsetTop = ul.offsetTop
+  let resetColor = 'rgb(143, 143, 158)'
+  ul.addEventListener('touchstart', (e) => {
+    let pageY = e.touches[0].pageY - ulOffsetTop
+    let currentIndex = pageY / itemHeight
+    currentIndex = Math.floor(currentIndex)
+    render(currentIndex)
+    data.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
+  })
+  ul.addEventListener('touchmove', (e) => {
+    let pageY = e.touches[0].pageY - ulOffsetTop
+    data.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
+
+    let currentIndex = pageY / itemHeight
+    currentIndex = Math.floor(currentIndex)
+    if (currentIndex >= 0 && currentIndex < 27) {
       render(currentIndex)
-      this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
-    })
-    ul.addEventListener('touchmove', (e) => {
-      let pageY = e.touches[0].pageY - ulOffsetTop
-      this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
-
-      let currentIndex = pageY / itemHeight
-      currentIndex = Math.floor(currentIndex)
-      if (currentIndex >= 0 && currentIndex < 27) {
-        render(currentIndex)
-      }
-    })
-    ul.addEventListener('touchend', () => {
-      return (this.currentFixedIndicator = '')
-    })
-    let render = (currentIndex) => {
-      items.forEach((el) => {
-        el.style.color = resetColor
-      })
-      items[currentIndex].style.color = '#fff'
-      this.currentFixedIndicator = items[currentIndex].innerText
-      this.goto(items[currentIndex])
     }
-  },
-  methods: {
-    handleClick(item) {
-      this.toggleSelect(item)
-      this.searchKey = ''
-    },
-    clear() {
-      console.log('clear')
-      this.searchKey = ''
-    },
-    toggleSelect(item) {
-      //减少判断次数，找到了就跳出循环
-      for (let i = 0; i < this.friends.recent.length; i++) {
-        let v = this.friends.recent[i]
-        if (v.name === item.name) {
-          v.select = !v.select
-          break
-        }
-      }
+  })
+  ul.addEventListener('touchend', () => {
+    return (data.currentFixedIndicator = '')
+  })
+  let render = (currentIndex) => {
+    items.forEach((el) => {
+      el.style.color = resetColor
+    })
+    items[currentIndex].style.color = '#fff'
+    data.currentFixedIndicator = items[currentIndex].innerText
+    goto(items[currentIndex])
+  }
+})
 
-      for (let i = 0; i < this.friends.eachOther.length; i++) {
-        let v = this.friends.eachOther[i]
-        if (v.name === item.name) {
-          v.select = !v.select
-          break
-        }
-      }
+watch(
+  () => data.searchKey,
+  (newVal) => {
+    let temp = cloneDeep(data.friends.all)
+    temp.map((v) => {
+      if (data.selectFriends.find((w) => w.id === v.id)) v.select = true
+    })
+    data.searchResult = temp.filter((v) => {
+      return v.name.includes(newVal) || v.account.includes(newVal)
+    })
+  }
+)
 
-      let find = false
-      let keys = Object.keys(this.friendsSort)
-      for (let i = 0; i < keys.length; i++) {
-        let k = keys[i]
-        for (let j = 0; j < this.friendsSort[k].length; j++) {
-          let value = this.friendsSort[k][j]
-          if (value.name === item.name) {
-            value.select = !value.select
-            find = true
-            break
-          }
-        }
-        if (find) break
-      }
+function handleClick(item) {
+  toggleSelect(item)
+  data.searchKey = ''
+}
 
-      let resIndex = this.selectFriends.findIndex((v) => v.name === item.name)
-      if (resIndex !== -1) {
-        item.select = false
-        this.selectFriends.splice(resIndex, 1)
-      } else {
-        item.select = true
-        this.selectFriends.push(item)
-      }
-    },
-    async getFriends() {
-      let res = await friends()
-      console.log('getFriends', res)
-      if (res.code === this.SUCCESS) {
-        this.friends = res.data
-        this.friends.all = this.friends.all.sort((a, b) => {
-          if (a.pinyin < b.pinyin) return -1
-          if (a.pinyin > b.pinyin) return 1
-          return 0
-        })
-        this.friends.all.map((v) => {
-          if (this.friendsSort[v.pinyin]) {
-            this.friendsSort[v.pinyin].push(v)
-          } else {
-            this.friendsSort[v.pinyin] = [v]
-          }
-        })
-      }
-    },
-    goto(el) {
-      let list = this.$refs.list
-      let py
-      if (el.dataset['index']) {
-        py = 'top'
-      } else {
-        py = el.innerText
-      }
-      if (document.querySelector(`.${py}`)) {
-        list.scrollTop = document.querySelector(`.${py}`).offsetTop - 100
-      }
-    },
-    scroll(e) {
-      // let isFixed = document.querySelector(`.fixed`)
-      // console.log(isFixed)
-      // let listScrollTop = e.target.scrollTop + (isFixed ? 110 : 110)
-      let listScrollTop = e.target.scrollTop + 110
-      // console.log('listScrollTop', listScrollTop)
-      let currentKey = null
-      for (const key in this.indexOffsetTop) {
-        // if (currentKey) break
-        let offsetTop = this.indexOffsetTop[key]
-        // console.log('offsetTop',offsetTop)
-        if (offsetTop < listScrollTop) {
-          currentKey = key
-        }
-      }
-      this.currentFixedIndicator = currentKey
-      // console.log('currentKey', currentKey)
+function clear() {
+  console.log('clear')
+  data.searchKey = ''
+}
+
+function toggleSelect(item) {
+  //减少判断次数，找到了就跳出循环
+  for (let i = 0; i < data.friends.recent.length; i++) {
+    let v = data.friends.recent[i]
+    if (v.name === item.name) {
+      v.select = !v.select
+      break
     }
   }
+
+  for (let i = 0; i < data.friends.eachOther.length; i++) {
+    let v = data.friends.eachOther[i]
+    if (v.name === item.name) {
+      v.select = !v.select
+      break
+    }
+  }
+
+  let find = false
+  let keys = Object.keys(data.friendsSort)
+  for (let i = 0; i < keys.length; i++) {
+    let k = keys[i]
+    for (let j = 0; j < data.friendsSort[k].length; j++) {
+      let value = data.friendsSort[k][j]
+      if (value.name === item.name) {
+        value.select = !value.select
+        find = true
+        break
+      }
+    }
+    if (find) break
+  }
+
+  let resIndex = data.selectFriends.findIndex((v) => v.name === item.name)
+  if (resIndex !== -1) {
+    item.select = false
+    data.selectFriends.splice(resIndex, 1)
+  } else {
+    item.select = true
+    data.selectFriends.push(item)
+  }
+}
+
+async function getFriends() {
+  //TODO 这里的数据不对
+  let res = await friends()
+  console.log('getFriends', res)
+  if (res.success) {
+    data.friends = res.data
+    data.friends.all = data.friends.all.sort((a, b) => {
+      if (a.pinyin < b.pinyin) return -1
+      if (a.pinyin > b.pinyin) return 1
+      return 0
+    })
+    data.friends.all.map((v) => {
+      if (data.friendsSort[v.pinyin]) {
+        data.friendsSort[v.pinyin].push(v)
+      } else {
+        data.friendsSort[v.pinyin] = [v]
+      }
+    })
+  }
+}
+
+const list = ref()
+
+function goto(el) {
+  let py
+  if (el.dataset['index']) {
+    py = 'top'
+  } else {
+    py = el.innerText
+  }
+  if (document.querySelector(`.${py}`)) {
+    list.value.scrollTop = document.querySelector(`.${py}`).offsetTop - 100
+  }
+}
+
+function scroll(e) {
+  // let isFixed = document.querySelector(`.fixed`)
+  // console.log(isFixed)
+  // let listScrollTop = e.target.scrollTop + (isFixed ? 110 : 110)
+  let listScrollTop = e.target.scrollTop + 110
+  // console.log('listScrollTop', listScrollTop)
+  let currentKey = null
+  for (const key in data.indexOffsetTop) {
+    // if (currentKey) break
+    let offsetTop = data.indexOffsetTop[key]
+    // console.log('offsetTop',offsetTop)
+    if (offsetTop < listScrollTop) {
+      currentKey = key
+    }
+  }
+  data.currentFixedIndicator = currentKey
+  // console.log('currentKey', currentKey)
 }
 </script>
 
diff --git a/src/pages/message/chat/Chat.vue b/src/pages/message/chat/Chat.vue
index bfa7c10..6906ed7 100644
--- a/src/pages/message/chat/Chat.vue
+++ b/src/pages/message/chat/Chat.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="Chat">
-    <div class="chat-content" @touchstart="tooltipTop = -1">
+    <div class="chat-content" @touchstart="data.tooltipTop = -1">
       <div class="header">
         <div class="left">
-          <dy-back @click="$back"></dy-back>
+          <dy-back @click="router.back"></dy-back>
           <div class="badge">12</div>
           <span>zzzz</span>
         </div>
@@ -13,11 +13,11 @@
             src="../../../assets/img/icon/message/chat/call.png"
             alt=""
           />
-          <img @click="$no" src="../../../assets/img/icon/message/chat/video-white.png" alt="" />
+          <img @click="_no" src="../../../assets/img/icon/message/chat/video-white.png" alt="" />
           <img
             src="../../../assets/img/icon/menu-white.png"
             alt=""
-            @click="$nav('/message/chat/detail')"
+            @click="nav('/message/chat/detail')"
           />
         </div>
       </div>
@@ -27,22 +27,22 @@
           v-longpress="showTooltip"
           :message="item"
           :key="index"
-          v-for="(item, index) in messages"
+          v-for="(item, index) in data.messages"
         ></ChatMessage>
       </div>
       <div class="footer">
-        <div class="toolbar" v-if="!recording">
+        <div class="toolbar" v-if="!data.recording">
           <img src="../../../assets/img/icon/message/camera.png" alt="" class="camera" />
           <input
-            @click="typing = true"
-            @blur="typing = false"
+            @click="data.typing = true"
+            @blur="data.typing = false"
             type="text"
             placeholder="发送信息..."
           />
           <img @click="handleClick" src="../../../assets/img/icon/message/voice-white.png" alt="" />
           <img src="../../../assets/img/icon/message/emoji-white.png" alt="" />
           <img
-            @click="showOption = !showOption"
+            @click="data.showOption = !data.showOption"
             src="../../../assets/img/icon/message/add-white.png"
             alt=""
           />
@@ -50,12 +50,12 @@
         <div class="record" v-else>
           <span>按住 说话</span>
           <img
-            @click="recording = false"
+            @click="data.recording = false"
             src="../../../assets/img/icon/message/keyboard.png"
             alt=""
           />
         </div>
-        <div class="options" v-if="showOption">
+        <div class="options" v-if="data.showOption">
           <div class="option-wrapper">
             <div class="option">
               <img src="../../../assets/img/icon/message/photo.png" alt="" />
@@ -93,7 +93,7 @@
     <!--  长按工具栏  -->
     <transition name="tooltip">
       <!--      TODO 定位也有问题-->
-      <div class="tooltip" :style="{ top: tooltipTop + 'px' }" v-if="tooltipTop !== -1">
+      <div class="tooltip" :style="{ top: data.tooltipTop + 'px' }" v-if="data.tooltipTop !== -1">
         <div class="options">
           <img src="../../../assets/img/icon/message/chat/like.png" alt="" />
           <span>点赞</span>
@@ -128,24 +128,24 @@
         <dy-back mode="light" />
         <img src="../../../assets/img/icon/search-light.png" alt="" />
       </div>
-      <img :src="previewImg" alt="" class="img-src" />
+      <img :src="data.previewImg" alt="" class="img-src" />
       <div class="footer"></div>
     </div>
 
     <!--  红包  -->
     <transition name="scale">
-      <div class="red-packet" v-if="isShowOpenRedPacket">
-        <BaseMask @click="isShowOpenRedPacket = false" />
+      <div class="red-packet" v-if="data.isShowOpenRedPacket">
+        <BaseMask @click="data.isShowOpenRedPacket = false" />
         <div class="content">
-          <template v-if="isOpened">
+          <template v-if="data.isOpened">
             <img src="../../../assets/img/icon/message/chat/bg-open.png" alt="" class="bg" />
             <div class="wrapper">
               <div class="top">
                 <div class="money">0.01元</div>
-                <div class="belong">{{ userinfo.nickname }}的红包</div>
+                <div class="belong">{{ store.userinfo.nickname }}的红包</div>
                 <div class="password">大吉大利</div>
               </div>
-              <div class="notice" @click="$nav('/message/chat/red-packet-detail')">
+              <div class="notice" @click="nav('/message/chat/red-packet-detail')">
                 查看红包详情>
               </div>
             </div>
@@ -154,13 +154,17 @@
             <img src="../../../assets/img/icon/message/chat/bg-close.png" alt="" class="bg" />
             <div class="wrapper">
               <div class="top">
-                <img :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="avatar" />
-                <div class="belong">{{ userinfo.nickname }}的红包</div>
+                <img
+                  :src="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
+                  alt=""
+                  class="avatar"
+                />
+                <div class="belong">{{ store.userinfo.nickname }}的红包</div>
                 <div class="password">大吉大利</div>
               </div>
 
-              <div class="l-button" :class="{ opening }" @click="openRedPacket">
-                <template v-if="opening">
+              <div class="l-button" :class="{ opening: data.opening }" @click="openRedPacket">
+                <template v-if="data.opening">
                   <img src="../../../assets/img/icon/loading-white.png" alt="" />
                   正在打开
                 </template>
@@ -172,23 +176,24 @@
             src="../../../assets/img/icon/message/chat/close.png"
             alt=""
             class="close"
-            @click="isShowOpenRedPacket = false"
+            @click="data.isShowOpenRedPacket = false"
           />
         </div>
       </div>
     </transition>
 
-    <Loading v-if="loading" />
+    <Loading v-if="data.loading" />
   </div>
 </template>
-<script>
-import ChatMessage from '../components/ChatMessage'
-import { inject, nextTick } from 'vue'
-import { mapState } from 'pinia'
-import Loading from '../../../components/Loading'
+<script setup lang="ts">
+import ChatMessage from '../components/ChatMessage.vue'
+import { computed, inject, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
+import Loading from '@/components/Loading.vue'
 import { useBaseStore } from '@/store/pinia'
-import { _checkImgUrl } from '@/utils'
+import { _checkImgUrl, _no, _sleep } from '@/utils'
 import $ from 'jquery'
+import { useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
 
 let CALL_STATE = {
   REJECT: 0,
@@ -224,332 +229,334 @@ let RED_PACKET_MODE = {
   SINGLE: 1,
   MULTIPLE: 2
 }
-export default {
-  name: 'Chat',
-  components: {
-    Loading,
-    ChatMessage
-  },
-  data() {
-    return {
-      previewImg: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href,
-      videoCall: [],
-      MESSAGE_TYPE,
-      messages: [
-        {
-          type: MESSAGE_TYPE.TIME,
-          data: '',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
 
+defineOptions({
+  name: 'Chat'
+})
+
+const mitt = inject('mitt')
+const router = useRouter()
+const nav = useNav()
+const store = useBaseStore()
+const data = reactive({
+  previewImg: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href,
+  videoCall: [],
+  MESSAGE_TYPE,
+  messages: [
+    {
+      type: MESSAGE_TYPE.TIME,
+      data: '',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+
+    {
+      type: MESSAGE_TYPE.MEME,
+      state: AUDIO_STATE.NORMAL,
+      data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      },
+      loved: [
         {
-          type: MESSAGE_TYPE.MEME,
-          state: AUDIO_STATE.NORMAL,
-          data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          },
-          loved: [
-            {
-              id: 2,
-              avatar: '../../assets/img/icon/head-image.jpg'
-            },
-            {
-              id: 2,
-              avatar: '../../assets/img/icon/head-image.jpg'
-            }
-          ]
+          id: 2,
+          avatar: '../../assets/img/icon/head-image.jpg'
         },
         {
-          type: MESSAGE_TYPE.IMAGE,
-          state: AUDIO_STATE.NORMAL,
-          data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
-          time: '2021-01-02 21:21',
-          user: {
-            id: 1,
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.IMAGE,
-          state: AUDIO_STATE.NORMAL,
-          data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          },
-          readState: READ_STATE.ARRIVED
-        },
-        {
-          type: MESSAGE_TYPE.VIDEO_CALL,
-          state: CALL_STATE.REJECT,
-          data: '2021-01-02 21:44',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.VIDEO_CALL,
-          state: CALL_STATE.RESOLVE,
-          data: '2021-01-02 21:44',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.VIDEO_CALL,
-          state: CALL_STATE.NONE,
-          data: '2021-01-02 21:44',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.AUDIO_CALL,
-          state: CALL_STATE.REJECT,
-          data: '2021-01-02 21:44',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.AUDIO_CALL,
-          state: CALL_STATE.RESOLVE,
-          data: '2021-01-02 21:44',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.AUDIO_CALL,
-          state: CALL_STATE.NONE,
-          data: '2021-01-02 21:44',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.AUDIO,
-          state: AUDIO_STATE.NORMAL,
-          data: {
-            duration: 5,
-            src: ''
-          },
-          time: '2021-01-02 21:21',
-          user: {
-            id: '1',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.AUDIO,
-          state: AUDIO_STATE.NORMAL,
-          data: {
-            duration: 10,
-            src: ''
-          },
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.TEXT,
-          data: '又在刷抖音',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.TEXT,
-          data: '我昨天@你那个视频发给我下',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.TEXT,
-          data: '我找不到了',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '1',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.TEXT,
-          data: '我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了',
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.DOUYIN_VIDEO,
-          state: VIDEO_STATE.VALID,
-          data: {
-            poster: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href,
-            author: {
-              name: 'safasdfassafasdfassafasdfassafasdfas',
-              avatar: new URL('../../../assets/img/icon/head-image.jpeg', import.meta.url).href
-            },
-            title: '服了asd'
-          },
-          time: '2021-01-02 21:21',
-          user: {
-            id: '1',
-            avatar: '../../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.VIDEO,
-          state: VIDEO_STATE.VALID,
-          data: {
-            poster: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href
-          },
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.RED_PACKET,
-          state: AUDIO_STATE.NORMAL,
-          mode: RED_PACKET_MODE.MULTIPLE,
-          data: {
-            money: 5.11,
-            title: '大吉大利',
-            state: '未领取'
-          },
-          time: '2021-01-02 21:21',
-          user: {
-            id: '2739632844317827',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.RED_PACKET,
-          state: AUDIO_STATE.NORMAL,
-          mode: RED_PACKET_MODE.SINGLE,
-          data: {
-            money: 5.11,
-            title: '大吉大利',
-            state: '已过期'
-          },
-          time: '2021-01-02 21:21',
-          user: {
-            id: 1,
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
+          id: 2,
+          avatar: '../../assets/img/icon/head-image.jpg'
         }
-      ],
-      typing: false,
-      loading: false,
-      opening: false,
-      isOpened: false,
-      recording: false,
-      showOption: false,
-      isShowOpenRedPacket: false,
-      tooltipTop: -1,
-      tooltipTopLocation: '',
-      mitt: inject('mitt')
+      ]
+    },
+    {
+      type: MESSAGE_TYPE.IMAGE,
+      state: AUDIO_STATE.NORMAL,
+      data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
+      time: '2021-01-02 21:21',
+      user: {
+        id: 1,
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.IMAGE,
+      state: AUDIO_STATE.NORMAL,
+      data: new URL('../../../assets/img/poster/1.jpg', import.meta.url).href,
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      },
+      readState: READ_STATE.ARRIVED
+    },
+    {
+      type: MESSAGE_TYPE.VIDEO_CALL,
+      state: CALL_STATE.REJECT,
+      data: '2021-01-02 21:44',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.VIDEO_CALL,
+      state: CALL_STATE.RESOLVE,
+      data: '2021-01-02 21:44',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.VIDEO_CALL,
+      state: CALL_STATE.NONE,
+      data: '2021-01-02 21:44',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.AUDIO_CALL,
+      state: CALL_STATE.REJECT,
+      data: '2021-01-02 21:44',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.AUDIO_CALL,
+      state: CALL_STATE.RESOLVE,
+      data: '2021-01-02 21:44',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.AUDIO_CALL,
+      state: CALL_STATE.NONE,
+      data: '2021-01-02 21:44',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.AUDIO,
+      state: AUDIO_STATE.NORMAL,
+      data: {
+        duration: 5,
+        src: ''
+      },
+      time: '2021-01-02 21:21',
+      user: {
+        id: '1',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.AUDIO,
+      state: AUDIO_STATE.NORMAL,
+      data: {
+        duration: 10,
+        src: ''
+      },
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.TEXT,
+      data: '又在刷抖音',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.TEXT,
+      data: '我昨天@你那个视频发给我下',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.TEXT,
+      data: '我找不到了',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '1',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.TEXT,
+      data: '我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了',
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.DOUYIN_VIDEO,
+      state: VIDEO_STATE.VALID,
+      data: {
+        poster: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href,
+        author: {
+          name: 'safasdfassafasdfassafasdfassafasdfas',
+          avatar: new URL('../../../assets/img/icon/head-image.jpeg', import.meta.url).href
+        },
+        title: '服了asd'
+      },
+      time: '2021-01-02 21:21',
+      user: {
+        id: '1',
+        avatar: '../../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.VIDEO,
+      state: VIDEO_STATE.VALID,
+      data: {
+        poster: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href
+      },
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.RED_PACKET,
+      state: AUDIO_STATE.NORMAL,
+      mode: RED_PACKET_MODE.MULTIPLE,
+      data: {
+        money: 5.11,
+        title: '大吉大利',
+        state: '未领取'
+      },
+      time: '2021-01-02 21:21',
+      user: {
+        id: '2739632844317827',
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
+    },
+    {
+      type: MESSAGE_TYPE.RED_PACKET,
+      state: AUDIO_STATE.NORMAL,
+      mode: RED_PACKET_MODE.SINGLE,
+      data: {
+        money: 5.11,
+        title: '大吉大利',
+        state: '已过期'
+      },
+      time: '2021-01-02 21:21',
+      user: {
+        id: 1,
+        avatar: '../../assets/img/icon/head-image.jpg'
+      }
     }
-  },
-  computed: {
-    isExpand() {
-      return this.showOption
-    },
-    isTyping() {
-      return this.typing || this.isExpand
-    },
-    ...mapState(useBaseStore, ['userinfo'])
-  },
-  created() {},
-  mounted() {
-    $('img').on('load', this.scrollBottom)
-    this.scrollBottom()
-  },
-  unmounted() {
-    $('img').off('load', this.scrollBottom)
-  },
-  methods: {
-    handleClick() {
-      this.recording = true
-      this.showOption = false
-    },
-    _checkImgUrl,
-    scrollBottom() {
-      nextTick(() => {
-        let wrapper = this.$refs.msgWrapper
-        // console.log('wrapper.clientHeight', wrapper.clientHeight)
-        // console.log('wrapper.scrollHeight', wrapper.scrollHeight)
-        wrapper.scrollTo({ top: wrapper.scrollHeight - wrapper.clientHeight })
-      })
-    },
-    openRedPacket() {
-      this.opening = true
-      setTimeout(() => {
-        this.opening = false
-        this.$nav('/message/chat/red-packet-detail')
-      }, 1000)
-    },
-    async clickItem(e) {
-      if (e.type === this.MESSAGE_TYPE.RED_PACKET) {
-        this.loading = true
-        await this.$sleep(500)
-        this.loading = false
-        this.isOpened = e.data.state === '已过期'
-        this.isShowOpenRedPacket = true
-      }
-    },
-    showTooltip(e) {
-      console.log(e)
-      let wrapper = null
-      e.path.map((v) => {
-        if (v && v.classList) {
-          if (v.classList.value === 'chat-wrapper') {
-            wrapper = v
-          }
-        }
-      })
-      if (wrapper) {
-        // console.log(wrapper.getBoundingClientRect())
-        if (wrapper.getBoundingClientRect().y - 61 > 70) {
-          this.tooltipTopLocation = 'top'
-          this.tooltipTop = wrapper.getBoundingClientRect().y - 70
-        } else {
-          this.tooltipTopLocation = 'bottom'
-          this.tooltipTop =
-            wrapper.getBoundingClientRect().y + wrapper.getBoundingClientRect().height + 10
-        }
+  ],
+  typing: false,
+  loading: false,
+  opening: false,
+  isOpened: false,
+  recording: false,
+  showOption: false,
+  isShowOpenRedPacket: false,
+  tooltipTop: -1,
+  tooltipTopLocation: ''
+})
+
+onMounted(() => {
+  $('img').on('load', scrollBottom)
+  scrollBottom()
+})
+
+onUnmounted(() => {
+  $('img').off('load', scrollBottom)
+})
+
+const isExpand = computed(() => {
+  return data.showOption
+})
+const isTyping = computed(() => {
+  return data.typing || isExpand
+})
+
+function handleClick() {
+  data.recording = true
+  data.showOption = false
+}
+
+const msgWrapper = ref()
+
+function scrollBottom() {
+  nextTick(() => {
+    let wrapper = msgWrapper.value
+    // console.log('wrapper.clientHeight', wrapper.clientHeight)
+    // console.log('wrapper.scrollHeight', wrapper.scrollHeight)
+    wrapper.scrollTo({ top: wrapper.scrollHeight - wrapper.clientHeight })
+  })
+}
+
+function openRedPacket() {
+  data.opening = true
+  setTimeout(() => {
+    data.opening = false
+    nav('/message/chat/red-packet-detail')
+  }, 1000)
+}
+
+async function clickItem(e) {
+  if (e.type === data.MESSAGE_TYPE.RED_PACKET) {
+    data.loading = true
+    await _sleep(500)
+    data.loading = false
+    data.isOpened = e.data.state === '已过期'
+    data.isShowOpenRedPacket = true
+  }
+}
+
+function showTooltip(e) {
+  console.log(e)
+  let wrapper = null
+  e.path.map((v) => {
+    if (v && v.classList) {
+      if (v.classList.value === 'chat-wrapper') {
+        wrapper = v
       }
     }
+  })
+  if (wrapper) {
+    // console.log(wrapper.getBoundingClientRect())
+    if (wrapper.getBoundingClientRect().y - 61 > 70) {
+      data.tooltipTopLocation = 'top'
+      data.tooltipTop = wrapper.getBoundingClientRect().y - 70
+    } else {
+      data.tooltipTopLocation = 'bottom'
+      data.tooltipTop =
+        wrapper.getBoundingClientRect().y + wrapper.getBoundingClientRect().height + 10
+    }
   }
 }
 </script>
diff --git a/src/pages/message/chat/ChatDetail.vue b/src/pages/message/chat/ChatDetail.vue
index cd48281..27689bb 100644
--- a/src/pages/message/chat/ChatDetail.vue
+++ b/src/pages/message/chat/ChatDetail.vue
@@ -12,10 +12,10 @@
           @unfollow="unfollow(index)"
           mode="normal-add-button"
           :key="index"
-          v-for="(item, index) in list"
+          v-for="(item, index) in data.list"
           :people="item"
         />
-        <div class="add-people" @click="$nav('/message/share-to-friend')">
+        <div class="add-people" @click="nav('/message/share-to-friend')">
           <img src="../../../assets/img/icon/message/chat/add.png" alt="" class="head-image" />
           <div class="name">多人聊天</div>
         </div>
@@ -24,28 +24,28 @@
         <div class="row">
           <div class="left">消息免打扰</div>
           <div class="right">
-            <switches v-model="noMessage" theme="bootstrap" color="success"></switches>
+            <switches v-model="data.noMessage" theme="bootstrap" color="success"></switches>
           </div>
         </div>
         <div class="row">
           <div class="left">置顶聊天</div>
           <div class="right">
-            <switches v-model="top" theme="bootstrap" color="success"></switches>
+            <switches v-model="data.top" theme="bootstrap" color="success"></switches>
           </div>
         </div>
-        <div class="row" @click="$nav('/set-remark')">
+        <div class="row" @click="nav('/set-remark')">
           <div class="left">设备备注</div>
           <div class="right">
             <dy-back direction="right" scale=".7"></dy-back>
           </div>
         </div>
-        <div class="row" @click="$nav('/home/report', { mode: 'chat' })">
+        <div class="row" @click="nav('/home/report', { mode: 'chat' })">
           <div class="left">举报</div>
           <div class="right">
             <dy-back direction="right" scale=".7"></dy-back>
           </div>
         </div>
-        <div class="row" @click="blockDialog = true">
+        <div class="row" @click="data.blockDialog = true">
           <div class="left">拉黑</div>
           <div class="right">
             <dy-back direction="right" scale=".7"></dy-back>
@@ -53,76 +53,76 @@
         </div>
       </div>
     </div>
-    <BlockDialog v-model="blockDialog" />
+    <BlockDialog v-model="data.blockDialog" />
   </div>
 </template>
-<script>
-import Switches from '../components/swtich/switches'
-import People from '../../people/components/People'
-import BlockDialog from '../components/BlockDialog'
+<script setup lang="ts">
+import Switches from '../components/swtich/switches.vue'
+import People from '../../people/components/People.vue'
+import BlockDialog from '../components/BlockDialog.vue'
 import CONST_VAR from '../../../utils/const_var'
 
-export default {
-  name: 'ChatDetail',
-  components: {
-    Switches,
-    People,
-    BlockDialog
-  },
-  data() {
-    return {
-      noMessage: false,
-      top: false,
-      blockDialog: false,
-      list: [
-        {
-          id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5',
-          avatar: new URL('../../../assets/img/icon/avatar/1.png', import.meta.url).href,
-          name: '何以为家',
-          sex: '',
-          age: null,
-          idCard: null,
-          phone: '',
-          address: null,
-          wechat: '',
-          password: null,
-          lastLoginTime: '1629993515',
-          createTime: '1630035089',
-          isDelete: 0,
-          account: '234',
-          pinyin: 'M',
-          select: false,
-          type: CONST_VAR.RELATE_ENUM.FOLLOW_EACH_OTHER
-        }
-      ]
-    }
-  },
-  computed: {},
-  created() {},
-  methods: {
-    t() {
-      this.enabled = !this.enabled
-    },
-    follow(index) {
-      if (this.list[index].type === this.RELATE_ENUM.FOLLOW_ME) {
-        this.list[index].type = this.RELATE_ENUM.FOLLOW_EACH_OTHER
-      }
-    },
-    unfollow(index) {
-      this.$showConfirmDialog(
-        '正在与对方相互关注，是否不再关注该用户',
-        null,
-        'gray',
-        () => {
-          this.list[index].type = this.RELATE_ENUM.FOLLOW_ME
-        },
-        () => {},
-        '取消关注',
-        '返回'
-      )
+import { useBaseStore } from '@/store/pinia'
+import { onMounted, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
+import { _showConfirmDialog } from '@/utils'
+
+defineOptions({
+  name: 'ChatDetail'
+})
+
+const router = useRouter()
+const nav = useNav()
+const store = useBaseStore()
+const data = reactive({
+  noMessage: false,
+  top: false,
+  blockDialog: false,
+  list: [
+    {
+      id: '224e9a00-ffa0-4bc1-bb07-c318c7b02fa5',
+      avatar: new URL('../../../assets/img/icon/avatar/1.png', import.meta.url).href,
+      name: '何以为家',
+      sex: '',
+      age: null,
+      idCard: null,
+      phone: '',
+      address: null,
+      wechat: '',
+      password: null,
+      lastLoginTime: '1629993515',
+      createTime: '1630035089',
+      isDelete: 0,
+      account: '234',
+      pinyin: 'M',
+      select: false,
+      type: CONST_VAR.RELATE_ENUM.FOLLOW_EACH_OTHER
     }
+  ]
+})
+
+onMounted(() => {})
+
+function follow(index) {
+  if (data.list[index].type === CONST_VAR.RELATE_ENUM.FOLLOW_ME) {
+    data.list[index].type = CONST_VAR.RELATE_ENUM.FOLLOW_EACH_OTHER
   }
 }
+
+function unfollow(index) {
+  _showConfirmDialog(
+    '正在与对方相互关注，是否不再关注该用户',
+    null,
+    'gray',
+    () => {
+      data.list[index].type = CONST_VAR.RELATE_ENUM.FOLLOW_ME
+    },
+    () => {},
+    '取消关注',
+    '返回'
+  )
+}
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/message/notice/LiveNotice.vue b/src/pages/message/notice/LiveNotice.vue
index a3158f2..3bed7be 100644
--- a/src/pages/message/notice/LiveNotice.vue
+++ b/src/pages/message/notice/LiveNotice.vue
@@ -5,15 +5,15 @@
         <span class="f16">直播通知</span>
       </template>
       <template v-slot:right>
-        <span class="f14" @click="$nav('/message/notice-setting', { type: 'LIVE' })">通知设置</span>
+        <span class="f14" @click="nav('/message/notice-setting', { type: 'LIVE' })">通知设置</span>
       </template>
     </BaseHeader>
-    <Loading v-if="loading" />
+    <Loading v-if="data.loading" />
     <div class="content" v-else>
       <Scroll ref="mainScroll">
         <div class="list">
           <NoMore />
-          <div class="item" :key="i" v-for="(item, i) in list" @click="goDetail(item)">
+          <div class="item" :key="i" v-for="(item, i) in data.list" @click="goDetail(item)">
             <div class="title">{{ item.title }}</div>
             <div class="time">{{ item.time }}</div>
             <div class="content-text">{{ item.content }}</div>
@@ -23,54 +23,50 @@
     </div>
   </div>
 </template>
-<script>
-import { nextTick } from 'vue'
-import Scroll from '../../../components/Scroll'
-import BasePage from '../../BasePage'
+<script setup lang="ts">
+import { nextTick, onMounted, reactive } from 'vue'
+import Scroll from '@/components/Scroll.vue'
+import { useNav } from '@/utils/hooks/useNav'
+import { _no, _sleep } from '@/utils'
 
-export default {
-  extends: BasePage,
-  name: 'LiveNotice',
-  components: {
-    Scroll
-  },
-  data() {
-    return {
-      loading: false,
-      list: [
-        {
-          title: '直播举报反馈',
-          time: '2021-10-12 12:12',
-          content: '你已提交对用户五五开直播内容的举报，我们会在12小时内进行处理，感谢你的监督'
-        },
-        {
-          title: '举报结果通知',
-          time: '2021-10-12 12:12',
-          content:
-            '你举报的【五五开】的直播内容，我们将对主播进行重点观察，并进一步判定，若发现违规立刻处理，感谢你的监督'
-        }
-      ]
-    }
-  },
-  watch: {},
-  computed: {},
-  created() {
-    this.getData()
-  },
-  methods: {
-    async getData() {
-      this.loading = true
-      await this.$sleep(700)
-      this.loading = false
-      await nextTick()
-      this.$refs.mainScroll.scrollBottom()
+defineOptions({
+  name: 'LiveNotice'
+})
+
+const nav = useNav()
+const data = reactive({
+  loading: false,
+  list: [
+    {
+      title: '直播举报反馈',
+      time: '2021-10-12 12:12',
+      content: '你已提交对用户五五开直播内容的举报，我们会在12小时内进行处理，感谢你的监督'
     },
-    goDetail(item) {
-      item.read = true
-      if (item.detail) {
-        this.$no()
-      }
+    {
+      title: '举报结果通知',
+      time: '2021-10-12 12:12',
+      content:
+        '你举报的【五五开】的直播内容，我们将对主播进行重点观察，并进一步判定，若发现违规立刻处理，感谢你的监督'
     }
+  ]
+})
+
+onMounted(() => {
+  getData()
+})
+
+async function getData() {
+  data.loading = true
+  await _sleep(700)
+  data.loading = false
+  await nextTick()
+  // data.$refs.mainScroll.scrollBottom()
+}
+
+function goDetail(item) {
+  item.read = true
+  if (item.detail) {
+    _no()
   }
 }
 </script>
diff --git a/src/pages/message/notice/MoneyNotice.vue b/src/pages/message/notice/MoneyNotice.vue
index 94d360c..6ce024c 100644
--- a/src/pages/message/notice/MoneyNotice.vue
+++ b/src/pages/message/notice/MoneyNotice.vue
@@ -5,21 +5,19 @@
         <span class="f16">钱包通知</span>
       </template>
       <template v-slot:right>
-        <span class="f14" @click="$nav('/message/notice-setting', { type: 'MONEY' })"
-          >通知设置</span
-        >
+        <span class="f14" @click="nav('/message/notice-setting', { type: 'MONEY' })">通知设置</span>
       </template>
     </BaseHeader>
-    <Loading v-if="loading" />
+    <Loading v-if="data.loading" />
     <div class="content" v-else>
       <Scroll ref="mainScroll">
         <div class="list">
           <NoMore />
           <!--TODO 超过3行显示全文-->
-          <div class="item" :key="i" v-for="(item, i) in list" @click="$no">
+          <div class="item" :key="i" v-for="(item, i) in data.list" @click="_no">
             <div class="header">
               <div class="left">
-                <img src="../../../assets/img/icon/msg-icon9.webp" alt="" />
+                <img src="@/assets/img/icon/msg-icon9.webp" alt="" />
               </div>
               <div class="right">
                 <template v-if="item.type === 1">
@@ -29,8 +27,8 @@
                   <span>钱包任务</span>
                 </template>
                 <img
-                  @click.stop="isShowSetting = true"
-                  src="../../../assets/img/icon/menu-gray.png"
+                  @click.stop="data.isShowSetting = true"
+                  src="@/assets/img/icon/menu-gray.png"
                   alt=""
                 />
               </div>
@@ -61,74 +59,73 @@
       mode="white"
       mask-mode="dark"
       :show-heng-gang="false"
-      v-model="isShowSetting"
+      v-model="data.isShowSetting"
       height="160rem"
     >
       <div class="setting-dialog">
         <div class="row disabled">钱包任务</div>
-        <div class="row" @click="handleClick">{{ openNotice ? '关闭' : '开启' }}消息免打扰</div>
+        <div class="row" @click="handleClick">
+          {{ data.openNotice ? '关闭' : '开启' }}消息免打扰
+        </div>
         <div class="space"></div>
-        <div class="row" @click="isShowSetting = false">取消</div>
+        <div class="row" @click="data.isShowSetting = false">取消</div>
       </div>
     </from-bottom-dialog>
   </div>
 </template>
-<script>
-import { nextTick } from 'vue'
-import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
-import Scroll from '../../../components/Scroll'
-import BasePage from '../../BasePage'
+<script setup lang="ts">
+import { nextTick, onMounted, reactive } from 'vue'
+import FromBottomDialog from '@/components/dialog/FromBottomDialog.vue'
+import Scroll from '@/components/Scroll.vue'
+import { useNav } from '@/utils/hooks/useNav'
+import { _sleep } from '@/utils'
 
-export default {
-  extends: BasePage,
-  name: 'MoneyNotice',
-  components: {
-    FromBottomDialog,
-    Scroll
-  },
-  data() {
-    return {
-      loading: false,
-      isShowSetting: false,
-      openNotice: false,
-      list: [
-        {
-          type: 1,
-          toAccountType: '退回银行卡(工商银行3333)',
-          title: '红色退款发起通知',
-          time: '2021-10-12 12:12',
-          money: 0.01,
-          desc: '抖音红包超过24小时未被领取',
-          toAccountTime: '2021-10-15 12:12'
-        },
-        {
-          type: 2,
-          toAccountType: '退回银行卡(工商银行3333)',
-          title: '卡券发放提醒',
-          time: '2021-10-12 12:12',
-          money: 0.01,
-          desc: '尊敬的用户，您获得1张DUO+满赠优惠券 到期时间:2021-08-26 23:23:23',
-          toAccountTime: '2021-10-15 12:12'
-        }
-      ]
-    }
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    handleClick() {
-      this.openNotice = !this.openNotice
-      this.isShowSetting = false
+defineOptions({
+  name: 'MoneyNotice'
+})
+
+const nav = useNav()
+const data = reactive({
+  loading: false,
+  isShowSetting: false,
+  openNotice: false,
+  list: [
+    {
+      type: 1,
+      toAccountType: '退回银行卡(工商银行3333)',
+      title: '红色退款发起通知',
+      time: '2021-10-12 12:12',
+      money: 0.01,
+      desc: '抖音红包超过24小时未被领取',
+      toAccountTime: '2021-10-15 12:12'
     },
-    async getData() {
-      this.loading = true
-      await this.$sleep(700)
-      this.loading = false
-      await nextTick()
-      this.$refs.mainScroll.scrollBottom()
+    {
+      type: 2,
+      toAccountType: '退回银行卡(工商银行3333)',
+      title: '卡券发放提醒',
+      time: '2021-10-12 12:12',
+      money: 0.01,
+      desc: '尊敬的用户，您获得1张DUO+满赠优惠券 到期时间:2021-08-26 23:23:23',
+      toAccountTime: '2021-10-15 12:12'
     }
-  }
+  ]
+})
+
+onMounted(() => {
+  getData()
+})
+
+function handleClick() {
+  data.openNotice = !data.openNotice
+  data.isShowSetting = false
+}
+
+async function getData() {
+  data.loading = true
+  await _sleep(700)
+  data.loading = false
+  await nextTick()
+  // data.$refs.mainScroll.scrollBottom()
 }
 </script>
 
diff --git a/src/pages/message/notice/NoticeSetting.vue b/src/pages/message/notice/NoticeSetting.vue
index 9fa6a86..194880a 100644
--- a/src/pages/message/notice/NoticeSetting.vue
+++ b/src/pages/message/notice/NoticeSetting.vue
@@ -8,110 +8,114 @@
     <div class="content">
       <div class="title">消息免打扰</div>
       <div class="sub-title">开启后，新通知将用黄点展示，不再展示未读数字</div>
-      <template v-if="type === 'SYSTEM'">
+      <template v-if="data.type === 'SYSTEM'">
         <div class="row">
           <div class="left">系统通知</div>
-          <switches v-model="option" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option" theme="bootstrap" color="success"></switches>
         </div>
       </template>
 
-      <template v-if="type === 'TASK'">
+      <template v-if="data.type === 'TASK'">
         <div class="row">
           <div class="left">运营任务</div>
-          <switches v-model="option1" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option1" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">星图(任务)</div>
-          <switches v-model="option2" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option2" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">成长任务</div>
-          <switches v-model="option3" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option3" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">DUO来评审团</div>
-          <switches v-model="option4" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option4" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">任务中心</div>
-          <switches v-model="option5" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option5" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">中视频伙伴任务</div>
-          <switches v-model="option6" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option6" theme="bootstrap" color="success"></switches>
         </div>
       </template>
-      <template v-if="type === 'LIVE'">
+      <template v-if="data.type === 'LIVE'">
         <div class="row">
           <div class="left">直播</div>
-          <switches v-model="option7" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option7" theme="bootstrap" color="success"></switches>
         </div>
       </template>
-      <template v-if="type === 'MONEY'">
+      <template v-if="data.type === 'MONEY'">
         <div class="row">
           <div class="left">钱包服务</div>
-          <switches v-model="option8" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option8" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">收入服务</div>
-          <switches v-model="option9" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option9" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">零钱服务</div>
-          <switches v-model="option10" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option10" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">抖币服务</div>
-          <switches v-model="option11" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option11" theme="bootstrap" color="success"></switches>
         </div>
         <div class="row">
           <div class="left">卡券服务</div>
-          <switches v-model="option12" theme="bootstrap" color="success"></switches>
+          <switches v-model="data.option12" theme="bootstrap" color="success"></switches>
         </div>
       </template>
     </div>
   </div>
 </template>
-<script>
-import Switches from '../components/swtich/switches'
+<script setup lang="ts">
+import Switches from '../components/swtich/switches.vue'
 
-export default {
-  name: 'NoticeSetting',
-  components: { Switches },
-  props: {
-    modelValue: {
-      type: Boolean,
-      default() {
-        return false
-      }
+import { useBaseStore } from '@/store/pinia'
+import { onMounted, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
+
+defineOptions({
+  name: 'NoticeSetting'
+})
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default() {
+      return false
     }
-  },
-  data() {
-    return {
-      option: true,
-      option1: false,
-      option2: false,
-      option3: true,
-      option4: false,
-      option5: false,
-      option6: false,
-      option7: true,
-      option8: true,
-      option9: false,
-      option10: false,
-      option11: false,
-      option12: false,
-      type: 'TASK'
-    }
-  },
-  watch: {},
-  computed: {},
-  created() {
-    this.type = this.$route.query.type
-  },
-  mounted() {},
-  methods: {}
-}
+  }
+})
+const router = useRouter()
+const route = useRoute()
+const nav = useNav()
+const store = useBaseStore()
+const data = reactive({
+  option: true,
+  option1: false,
+  option2: false,
+  option3: true,
+  option4: false,
+  option5: false,
+  option6: false,
+  option7: true,
+  option8: true,
+  option9: false,
+  option10: false,
+  option11: false,
+  option12: false,
+  type: 'TASK'
+})
+
+onMounted(() => {
+  data.type = route.query.type
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/message/notice/TaskNotice.vue b/src/pages/message/notice/TaskNotice.vue
index 763e864..f26d87c 100644
--- a/src/pages/message/notice/TaskNotice.vue
+++ b/src/pages/message/notice/TaskNotice.vue
@@ -5,16 +5,16 @@
         <span class="f16">任务通知</span>
       </template>
       <template v-slot:right>
-        <span class="f14" @click="$nav('/message/notice-setting', { type: 'TASK' })">通知设置</span>
+        <span class="f14" @click="nav('/message/notice-setting', { type: 'TASK' })">通知设置</span>
       </template>
     </BaseHeader>
-    <Loading v-if="loading" />
+    <Loading v-if="data.loading" />
     <div class="content" v-else>
       <Scroll ref="mainScroll">
         <div class="list">
           <NoMore />
           <!--TODO 超过3行显示全文-->
-          <div class="item" :key="i" v-for="(item, i) in list" @click="goDetail(item)">
+          <div class="item" :key="i" v-for="(item, i) in data.list" @click="goDetail(item)">
             <div class="header">
               <div class="left">
                 <img src="../../../assets/img/icon/message/task.webp" alt="" />
@@ -22,7 +22,7 @@
               <div class="right">
                 <span>成长任务</span>
                 <img
-                  @click.stop="isShowSetting = true"
+                  @click.stop="data.isShowSetting = true"
                   src="../../../assets/img/icon/menu-gray.png"
                   alt=""
                 />
@@ -41,7 +41,7 @@
           </div>
         </div>
       </Scroll>
-      <div class="footer" @click="$no">查看更多任务</div>
+      <div class="footer" @click="_no">查看更多任务</div>
     </div>
 
     <from-bottom-dialog
@@ -49,95 +49,89 @@
       mode="white"
       mask-mode="dark"
       :show-heng-gang="false"
-      v-model="isShowSetting"
+      v-model="data.isShowSetting"
       height="160rem"
     >
       <div class="setting-dialog">
         <div class="row disabled">成长任务</div>
-        <div class="row" @click="handleClick">{{ openNotice ? '关闭' : '开启' }}消息免打扰</div>
+        <div class="row" @click="handleClick">
+          {{ data.openNotice ? '关闭' : '开启' }}消息免打扰
+        </div>
         <div class="space"></div>
-        <div class="row" @click="isShowSetting = false">取消</div>
+        <div class="row" @click="data.isShowSetting = false">取消</div>
       </div>
     </from-bottom-dialog>
   </div>
 </template>
-<script>
-import { nextTick } from 'vue'
-import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
-import Scroll from '../../../components/Scroll'
-import BasePage from '../../BasePage'
+<script setup lang="ts">
+import { nextTick, onMounted, reactive } from 'vue'
+import FromBottomDialog from '@/components/dialog/FromBottomDialog.vue'
+import Scroll from '@/components/Scroll.vue'
+import { useNav } from '@/utils/hooks/useNav'
+import { _no, _sleep } from '@/utils'
 
-export default {
-  extends: BasePage,
-  name: 'SystemNotice',
-  components: {
-    FromBottomDialog,
-    Scroll
-  },
-  data() {
-    return {
-      loading: false,
-      isShowSetting: false,
-      openNotice: false,
-      list: [
-        {
-          type: 1,
-          title: '发作品得流量',
-          detail: 'xxx',
-          time: '2021-10-12 12:12',
-          content:
-            '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
-        },
-        {
-          type: 1,
-          title: '发作品得流量',
-          detail: 'xxx',
-          time: '2021-10-12 12:12',
-          content:
-            '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
-        },
-        {
-          type: 1,
-          title: '发作品得流量',
-          detail: 'xxx',
-          time: '2021-10-12 12:12',
-          content:
-            '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
-        },
-        {
-          type: 1,
-          title: '发作品得流量',
-          detail: 'xxx',
-          time: '2021-10-12 12:12',
-          content:
-            '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
-        }
-      ]
-    }
-  },
-  watch: {},
-  computed: {},
-  created() {
-    this.getData()
-  },
-  methods: {
-    handleClick() {
-      this.openNotice = !this.openNotice
-      this.isShowSetting = false
+defineOptions({
+  name: 'TaskNotice'
+})
+
+const nav = useNav()
+const data = reactive({
+  loading: false,
+  isShowSetting: false,
+  openNotice: false,
+  list: [
+    {
+      type: 1,
+      title: '发作品得流量',
+      detail: 'xxx',
+      time: '2021-10-12 12:12',
+      content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
     },
-    async getData() {
-      this.loading = true
-      await this.$sleep(700)
-      this.loading = false
-      await nextTick()
-      this.$refs.mainScroll.scrollBottom()
+    {
+      type: 1,
+      title: '发作品得流量',
+      detail: 'xxx',
+      time: '2021-10-12 12:12',
+      content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
     },
-    goDetail(item) {
-      item.read = true
-      if (item.detail) {
-        this.$no()
-      }
+    {
+      type: 1,
+      title: '发作品得流量',
+      detail: 'xxx',
+      time: '2021-10-12 12:12',
+      content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
+    },
+    {
+      type: 1,
+      title: '发作品得流量',
+      detail: 'xxx',
+      time: '2021-10-12 12:12',
+      content: '4.24-4.28，公开发布1个道具作品，即得50-100的额外流量。快来发布视频，获得更多关注'
     }
+  ]
+})
+
+onMounted(() => {
+  getData()
+})
+
+function handleClick() {
+  data.openNotice = !data.openNotice
+  data.isShowSetting = false
+}
+
+async function getData() {
+  data.loading = true
+  await _sleep(700)
+  data.loading = false
+  await nextTick()
+  // data.$refs.mainScroll.scrollBottom()
+}
+
+function goDetail(item: any) {
+  item.read = true
+  if (item.detail) {
+    _no()
   }
 }
 </script>
diff --git a/src/pages/other/VideoDetail.vue b/src/pages/other/VideoDetail.vue
index dd1da83..1732985 100644
--- a/src/pages/other/VideoDetail.vue
+++ b/src/pages/other/VideoDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="video-detail">
     <div class="search-wrapper">
-      <Icon class="back" icon="icon-park-outline:left" @click="$back" />
+      <Icon class="back" icon="icon-park-outline:left" @click="router.back" />
       <div class="search" @click="nav('/home/search')">
         <div class="left">
           <Icon class="icon" icon="ion:search" />
diff --git a/src/pages/people/AddressList.vue b/src/pages/people/AddressList.vue
index 9de361f..e3e36b6 100644
--- a/src/pages/people/AddressList.vue
+++ b/src/pages/people/AddressList.vue
@@ -11,32 +11,28 @@
           <div class="left">已有20+位朋友加入抖音</div>
         </div>
         <div class="list">
-          <People :key="i" v-for="(item, i) in list" :people="item"></People>
+          <People :key="i" v-for="(item, i) in data.list" :people="item"></People>
         </div>
       </div>
       <div class="footer">为尊重用户选择，仅展示已授权用户</div>
     </div>
   </div>
 </template>
-<script>
-import People from './components/People'
+<script setup lang="ts">
+import People from './components/People.vue'
+import { reactive } from 'vue'
 
-export default {
-  name: 'AddressList',
-  components: {
-    People
-  },
-  data() {
-    return {
-      list: [
-        {
-          type: 5
-        }
-      ]
+defineOptions({
+  name: 'AddressList'
+})
+
+const data = reactive({
+  list: [
+    {
+      type: 5
     }
-  },
-  methods: {}
-}
+  ]
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/people/FaceToFace.vue b/src/pages/people/FaceToFace.vue
index dec8ce1..2c0a9c6 100644
--- a/src/pages/people/FaceToFace.vue
+++ b/src/pages/people/FaceToFace.vue
@@ -2,23 +2,20 @@
   <div class="FaceToFace">
     <BaseHeader style="background: black">
       <template v-slot:right>
-        <span class="f16" @click="$nav('/common-setting')">设置</span>
+        <span class="f16" @click="nav('/common-setting')">设置</span>
       </template>
     </BaseHeader>
     <div class="content"></div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 //TODO 动画效果麻烦
-export default {
-  name: 'FaceToFace',
-  data() {
-    return {}
-  },
-  computed: {},
-  created() {},
-  methods: {}
-}
+import { useNav } from '@/utils/hooks/useNav'
+
+defineOptions({
+  name: 'FaceToFace'
+})
+const nav = useNav()
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index 686323b..8331b36 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -6,41 +6,41 @@
         style="width: 50%"
         tabStyleWidth="40%"
         :tabTexts="['发现朋友', '熟人列表']"
-        v-model:active-index="currentSlideItemIndex"
+        v-model:active-index="data.currentSlideItemIndex"
       >
       </Indicator>
       <img
         src="../../assets/img/icon/menu-gray.png"
         alt=""
         class="option"
-        @click="moreOptionDialog = true"
+        @click="data.moreOptionDialog = true"
       />
     </div>
-    <SlideHorizontal v-model:index="currentSlideItemIndex">
+    <SlideHorizontal v-model:index="data.currentSlideItemIndex">
       <SlideItem class="tab1" style="overflow: auto">
         <div class="mr2r ml2r mt1r">
           <Search
-            v-if="!isShowRightText"
+            v-if="!data.isShowRightText"
             placeholder="搜索用户名字/抖音号"
             :is-show-right-text="false"
-            @click="isShowRightText = true"
+            @click="data.isShowRightText = true"
           >
             <img
               src="../../assets/img/icon/scan-gray.png"
               style="width: 10rem; transform: scale(1.5)"
-              @click.stop="$nav('/scan')"
+              @click.stop="nav('/scan')"
             />
           </Search>
           <Search
             v-else
-            v-model="searchKey"
+            v-model="data.searchKey"
             :is-show-right-text="true"
             @notice="search"
-            @clear="isSearch = false"
+            @clear="data.isSearch = false"
           ></Search>
         </div>
-        <div class="no-search" v-if="!isShowRightText">
-          <div class="look-address-list" @click="findAddressListDialog = true">
+        <div class="no-search" v-if="!data.isShowRightText">
+          <div class="look-address-list" @click="data.findAddressListDialog = true">
             <img class="left" src="../../assets/img/icon/people/address-book.png" alt="" />
             <div class="right">
               <div class="notice">
@@ -60,21 +60,21 @@
           </div>
           <People
             :key="i"
-            v-for="(item, i) in friends.all"
+            v-for="(item, i) in store.friends.all"
             :people="item"
             mode="recommend"
           ></People>
         </div>
         <div class="is-search" v-else>
-          <div class="tooltip" v-if="searchKey && !isSearch">
+          <div class="tooltip" v-if="data.searchKey && !data.isSearch">
             <img src="../../assets/img/icon/close.svg" style="width: 10rem" />
-            搜索用户名字/抖音号：<span class="searchKey">{{ searchKey }}</span>
+            搜索用户名字/抖音号：<span class="searchKey">{{ data.searchKey }}</span>
           </div>
           <!--          TODO -->
-          <template v-if="isSearch">
+          <template v-if="data.isSearch">
             <People
               :key="i"
-              v-for="(item, i) in friends.all"
+              v-for="(item, i) in store.friends.all"
               :people="item"
               mode="recommend"
             ></People>
@@ -83,8 +83,13 @@
       </SlideItem>
       <SlideItem class="tab2" style="overflow: auto">
         <Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
-        <div class="title">{{ friends.all.length }} 位朋友</div>
-        <People :key="i" v-for="(item, i) in friends.all" :people="item" mode="friend"></People>
+        <div class="title">{{ store.friends.all.length }} 位朋友</div>
+        <People
+          :key="i"
+          v-for="(item, i) in store.friends.all"
+          :people="item"
+          mode="friend"
+        ></People>
         <NoMore class="mb5r" />
       </SlideItem>
     </SlideHorizontal>
@@ -95,9 +100,9 @@
 
     <transition name="fade">
       <div
-        v-if="findAddressListDialog"
+        v-if="data.findAddressListDialog"
         class="find-address-list-dialog"
-        @click="findAddressListDialog = false"
+        @click="data.findAddressListDialog = false"
       >
         <div class="body">
           <div>
@@ -106,21 +111,21 @@
           <span class="title">发现通讯录好友</span>
           <span class="desc">
             <span>授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见</span>
-            <span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
+            <span class="link" @click="nav('/service-protocol', { type: '“抖音”用户服务协议' })"
               >《隐私政策》</span
             >
           </span>
         </div>
         <div class="footer">
-          <div @click="findAddressListDialog = false">暂时不要</div>
-          <div @click="$nav('/address-list')">发现好友</div>
+          <div @click="data.findAddressListDialog = false">暂时不要</div>
+          <div @click="nav('/address-list')">发现好友</div>
         </div>
       </div>
     </transition>
 
     <from-bottom-dialog
       page-id="FindAcquaintance"
-      v-model="moreOptionDialog"
+      v-model="data.moreOptionDialog"
       :show-heng-gang="false"
       height="210rem"
       mode="white"
@@ -129,25 +134,25 @@
         <div class="row" @click="handleClick">
           <span>站外好友口令</span>
         </div>
-        <div class="row" @click="$nav('/scan')">
+        <div class="row" @click="nav('/scan')">
           <span>扫一扫加好友</span>
         </div>
-        <div class="row" style="border-bottom: none" @click="$nav('/face-to-face')">
+        <div class="row" style="border-bottom: none" @click="nav('/face-to-face')">
           <span>面对面加好友</span>
         </div>
         <div class="space"></div>
-        <div class="row" @click="moreOptionDialog = false">取消</div>
+        <div class="row" @click="data.moreOptionDialog = false">取消</div>
       </div>
     </from-bottom-dialog>
 
     <transition name="fade">
-      <div class="out-web-img-account-dialog" v-if="outWebImgAccountDialog">
+      <div class="out-web-img-account-dialog" v-if="data.outWebImgAccountDialog">
         <img src="../../assets/img/icon/head-image.jpeg" alt="" class="img-account" />
         <img
           src="../../assets/img/icon/close-white.png"
           alt=""
           class="close"
-          @click="outWebImgAccountDialog = false"
+          @click="data.outWebImgAccountDialog = false"
         />
         <div class="desc">
           <div>这是你的图片口令</div>
@@ -157,11 +162,11 @@
           <img src="../../assets/img/icon/close.svg" alt="" />
           <span>图片口令已保存到相册</span>
         </div>
-        <div class="btn wechat" @click="outWebImgAccountDialog = false">
+        <div class="btn wechat" @click="data.outWebImgAccountDialog = false">
           <img src="../../assets/img/icon/close.svg" alt="" />
           <span>发给微信好友</span>
         </div>
-        <div class="btn qq" @click="outWebImgAccountDialog = false">
+        <div class="btn qq" @click="data.outWebImgAccountDialog = false">
           <img src="../../assets/img/icon/close.svg" alt="" />
           <span>发给QQ好友</span>
         </div>
@@ -169,83 +174,82 @@
     </transition>
   </div>
 </template>
-<script>
-import People from './components/People'
-import Search from '../../components/Search'
-import Indicator from '../../components/slide/Indicator'
-import FromBottomDialog from '../../components/dialog/FromBottomDialog'
-import { mapState } from 'pinia'
+<script setup lang="ts">
+import People from './components/People.vue'
+import Search from '../../components/Search.vue'
+import Indicator from '../../components/slide/Indicator.vue'
+import FromBottomDialog from '../../components/dialog/FromBottomDialog.vue'
 import { useBaseStore } from '@/store/pinia'
+import { computed, onMounted, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
+import { _hideLoading, _showLoading, _sleep } from '@/utils'
 
-export default {
-  name: 'FindAcquaintance',
-  components: {
-    People,
-    Search,
-    Indicator,
-    FromBottomDialog
-  },
-  data() {
-    return {
-      findAddressListDialog: false,
-      moreOptionDialog: false,
-      outWebImgAccountDialog: false,
-      indicatorFixed: false,
-      isShowRightText: false,
-      isSearch: false,
-      searchKey: '',
+defineOptions({
+  name: 'FindAcquaintance'
+})
 
-      currentSlideItemIndex: 0,
-      list: [
-        {
-          type: 1
-        },
-        {
-          type: 2
-        },
-        {
-          type: 3
-        },
-        {
-          type: 4
-        },
-        {
-          type: 5
-        }
-      ]
+const router = useRouter()
+const nav = useNav()
+const store = useBaseStore()
+const data = reactive({
+  findAddressListDialog: false,
+  moreOptionDialog: false,
+  outWebImgAccountDialog: false,
+  indicatorFixed: false,
+  isShowRightText: false,
+  isSearch: false,
+  searchKey: '',
+
+  currentSlideItemIndex: 0,
+  list: [
+    {
+      type: 1
+    },
+    {
+      type: 2
+    },
+    {
+      type: 3
+    },
+    {
+      type: 4
+    },
+    {
+      type: 5
     }
+  ]
+})
+
+onMounted(() => {})
+
+const maskDialog = computed({
+  get() {
+    return data.findAddressListDialog || data.outWebImgAccountDialog
   },
-  computed: {
-    maskDialog: {
-      get() {
-        return this.findAddressListDialog || this.outWebImgAccountDialog
-      },
-      set() {
-        this.findAddressListDialog = this.outWebImgAccountDialog = false
-      }
-    },
-    ...mapState(useBaseStore, ['friends'])
-  },
-  mounted() {},
-  methods: {
-    async search() {
-      this.$showLoading()
-      await this.$sleep(500)
-      this.$hideLoading()
-      this.isSearch = true
-    },
-    back() {
-      if (this.isShowRightText) {
-        this.isShowRightText = false
-      } else {
-        this.$back()
-      }
-    },
-    handleClick() {
-      this.outWebImgAccountDialog = true
-      this.moreOptionDialog = false
-    }
+  set() {
+    data.findAddressListDialog = data.outWebImgAccountDialog = false
   }
+})
+
+async function search() {
+  _showLoading()
+  await _sleep(500)
+  _hideLoading()
+  data.isSearch = true
+}
+
+function back() {
+  if (data.isShowRightText) {
+    data.isShowRightText = false
+  } else {
+    router.back()
+  }
+}
+
+function handleClick() {
+  data.outWebImgAccountDialog = true
+  data.moreOptionDialog = false
 }
 </script>
 
diff --git a/src/pages/people/FollowAndFans.vue b/src/pages/people/FollowAndFans.vue
index 4e72773..c3c6a70 100644
--- a/src/pages/people/FollowAndFans.vue
+++ b/src/pages/people/FollowAndFans.vue
@@ -2,14 +2,14 @@
   <div class="FollowAndFans" id="FollowAndFans">
     <BaseHeader backMode="light">
       <template v-slot:center>
-        <span class="f14">{{ userinfo.nickname }}</span>
+        <span class="f14">{{ store.userinfo.nickname }}</span>
       </template>
       <template v-slot:right>
         <div>
           <img
             src="../../assets/img/icon/people/add-user.png"
             style="width: 2rem"
-            @click="$nav('/people/find-acquaintance')"
+            @click="nav('/people/find-acquaintance')"
           />
         </div>
       </template>
@@ -19,23 +19,23 @@
         <Indicator
           tabStyleWidth="50%"
           :tabTexts="['关注', '粉丝']"
-          v-model:active-index="slideIndex"
+          v-model:active-index="data.slideIndex"
         >
         </Indicator>
       </div>
       <SlideHorizontal
-        v-model:index="slideIndex"
+        v-model:index="data.slideIndex"
         style="height: calc(var(--vh, 1vh) * 100 - 111rem)"
       >
         <SlideItem class="tab1">
           <Search
-            v-model="searchKey"
+            v-model="data.searchKey"
             placeholder="搜索用户备注或名字"
             :is-show-right-text="false"
           />
-          <div class="is-search" v-if="searchKey">
-            <div class="search-result" v-if="searchFriends.length">
-              <People :key="i" v-for="(item, i) in searchFriends" :people="item"></People>
+          <div class="is-search" v-if="data.searchKey">
+            <div class="search-result" v-if="data.searchFriends.length">
+              <People :key="i" v-for="(item, i) in data.searchFriends" :people="item"></People>
             </div>
             <div class="no-result" v-else>
               <img src="../../assets/img/icon/no-result.png" alt="" />
@@ -45,75 +45,60 @@
           </div>
           <div class="no-search" v-else>
             <div class="title">我的关注</div>
-            <People :key="i" v-for="(item, i) in friends.all" :people="item"></People>
+            <People :key="i" v-for="(item, i) in store.friends.all" :people="item"></People>
           </div>
         </SlideItem>
         <SlideItem class="tab2">
-          <People :key="i" v-for="(item, i) in friends.all" :people="item"></People>
+          <People :key="i" v-for="(item, i) in store.friends.all" :people="item"></People>
           <NoMore />
         </SlideItem>
       </SlideHorizontal>
     </div>
   </div>
 </template>
-<script>
-import People from './components/People'
-import Search from '../../components/Search'
-import Indicator from '../../components/slide/Indicator'
-import { mapState } from 'pinia'
+<script setup lang="ts">
+import People from './components/People.vue'
+import Search from '../../components/Search.vue'
+import Indicator from '../../components/slide/Indicator.vue'
 import { useBaseStore } from '@/store/pinia'
+import { onMounted, reactive, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useNav } from '@/utils/hooks/useNav'
 
-export default {
-  name: 'FindAcquaintance',
-  components: {
-    People,
-    Search,
-    Indicator
-  },
-  data() {
-    return {
-      isSearch: false,
-      searchKey: '',
+defineOptions({
+  name: 'FindAcquaintance'
+})
 
-      slideIndex: 0,
-      searchFriends: []
-    }
-  },
-  computed: {
-    ...mapState(useBaseStore, ['friends', 'userinfo'])
-  },
-  watch: {
-    searchKey(newVal) {
-      if (newVal) {
-        //TODO 搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
-        this.searchFriends = this.friends.all.filter((v) => {
-          if (v.name.includes(newVal)) return true
-          return v.account.includes(newVal)
-        })
-      } else {
-        this.searchFriends = []
-      }
-    }
-  },
-  created() {
-    this.slideIndex = ~~this.$route.query.type
-  },
-  methods: {
-    async search() {
-      this.$showLoading()
-      await this.$sleep(500)
-      this.$hideLoading()
-      this.isSearch = true
-    },
-    back() {
-      if (this.isShowRightText) {
-        this.isShowRightText = false
-      } else {
-        this.$back()
-      }
+const router = useRouter()
+const route = useRoute()
+const nav = useNav()
+const store = useBaseStore()
+const data = reactive({
+  isSearch: false,
+  searchKey: '',
+
+  slideIndex: 0,
+  searchFriends: []
+})
+
+onMounted(() => {
+  data.slideIndex = ~~route.query.type
+})
+
+watch(
+  () => data.searchKey,
+  (newVal) => {
+    if (newVal) {
+      //TODO 搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
+      data.searchFriends = store.friends.all.filter((v) => {
+        if (v.name.includes(newVal)) return true
+        return v.account.includes(newVal)
+      })
+    } else {
+      data.searchFriends = []
     }
   }
-}
+)
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/people/Scan.vue b/src/pages/people/Scan.vue
index 462849c..fe38727 100644
--- a/src/pages/people/Scan.vue
+++ b/src/pages/people/Scan.vue
@@ -21,17 +21,12 @@
     <div class="scan-anim"></div>
   </div>
 </template>
-<script>
+<script setup>
 //TODO 那个动画没做，用css画有点麻烦，后面ps p一张图片吧
-export default {
-  name: 'Scan',
-  data() {
-    return {}
-  },
-  computed: {},
-  created() {},
-  methods: {}
-}
+
+defineOptions({
+  name: 'Scan'
+})
 </script>
 
 <style scoped lang="less">
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 98b200f..bcec1b5 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -223,7 +223,6 @@ const routes: RouteRecordRaw[] = [
     path: '/message/share-to-friend',
     component: () => import('@/pages/message/Share2Friend.vue')
   },
-
   {
     path: '/video-detail',
     name: 'video-detail',
diff --git a/src/utils/index.jsx b/src/utils/index.jsx
index 704d2e6..5926d53 100644
--- a/src/utils/index.jsx
+++ b/src/utils/index.jsx
@@ -677,5 +677,5 @@ export function _notice(val) {
 }
 
 export function _no() {
-  this.$notice('未实现')
+  _notice('未实现')
 }