From 934796b15e6ec62a3b4ccdfab846da812be4aaa7 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 23 Apr 2024 18:30:03 +0800
Subject: [PATCH 1/3] refactor: optimize the code

---
 package.json                                  |  13 +-
 pnpm-lock.yaml                                |  69 +--------
 src/components/dialog/FromBottomDialog.vue    |   1 -
 .../slide/{SlideAlbum.vue => SlideAlbum.txt}  |   0
 .../slide/SlideVerticalInfinite.vue           |   2 +-
 src/utils/hooks/useSlideListItemRender.jsx    |   7 +-
 src/utils/index.tsx                           | 136 ++++++++----------
 7 files changed, 71 insertions(+), 157 deletions(-)
 rename src/components/slide/{SlideAlbum.vue => SlideAlbum.txt} (100%)

diff --git a/package.json b/package.json
index b34de4d..94c0908 100644
--- a/package.json
+++ b/package.json
@@ -26,17 +26,12 @@
     "axios": "^1.6.8",
     "axios-mock-adapter": "^1.22.0",
     "core-js": "3.21.1",
-    "dayjs": "1.11.0",
-    "gl-matrix": "3.4.3",
-    "jquery": "^3.7.1",
+    "libarchive-wasm": "^1.1.0",
     "mitt": "3.0.0",
-    "mobile-select": "1.1.2",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
     "vue": "3.4.21",
-    "vue-router": "4.3.0",
-    "vue-switches": "2.0.1",
-    "libarchive-wasm": "^1.1.0"
+    "vue-router": "4.3.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.2.1",
@@ -56,6 +51,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.17.0",
+    "git-last-commit": "^1.0.1",
     "husky": "^9.0.11",
     "less": "4.1.3",
     "lint-staged": "^15.2.2",
@@ -66,8 +62,7 @@
     "vite": "^5.1.7",
     "vite-plugin-cdn-import": "0.3.5",
     "vite-plugin-commonjs": "^0.10.1",
-    "vue-tsc": "^2.0.6",
-    "git-last-commit": "^1.0.1"
+    "vue-tsc": "^2.0.6"
   },
   "lint-staged": {
     "*.{js,ts,vue,jsx,tsx}": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b11c9c0..93c88d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,24 +17,12 @@ dependencies:
   core-js:
     specifier: 3.21.1
     version: 3.21.1
-  dayjs:
-    specifier: 1.11.0
-    version: 1.11.0
-  gl-matrix:
-    specifier: 3.4.3
-    version: 3.4.3
-  jquery:
-    specifier: ^3.7.1
-    version: 3.7.1
   libarchive-wasm:
     specifier: ^1.1.0
     version: 1.1.0
   mitt:
     specifier: 3.0.0
     version: 3.0.0
-  mobile-select:
-    specifier: 1.1.2
-    version: 1.1.2
   mockjs:
     specifier: ^1.1.0
     version: 1.1.0
@@ -47,9 +35,6 @@ dependencies:
   vue-router:
     specifier: 4.3.0
     version: 4.3.0(vue@3.4.21)
-  vue-switches:
-    specifier: 2.0.1
-    version: 2.0.1
 
 devDependencies:
   '@commitlint/cli':
@@ -360,6 +345,7 @@ packages:
   /@babel/helper-string-parser@7.23.4:
     resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
     engines: {node: '>=6.9.0'}
+    dev: true
 
   /@babel/helper-validator-identifier@7.22.20:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
@@ -400,14 +386,6 @@ packages:
       picocolors: 1.0.0
     dev: true
 
-  /@babel/parser@7.23.0:
-    resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.24.0
-    dev: false
-
   /@babel/parser@7.24.0:
     resolution: {integrity: sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==}
     engines: {node: '>=6.0.0'}
@@ -525,6 +503,7 @@ packages:
       '@babel/helper-string-parser': 7.23.4
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
+    dev: true
 
   /@commitlint/cli@19.2.1(@types/node@20.12.4)(typescript@5.3.3):
     resolution: {integrity: sha512-cbkYUJsLqRomccNxvoJTyv5yn0bSy05BBizVyIcLACkRbVUqYorC351Diw/XFSWC/GtpwiwT2eOvQgFZa374bg==}
@@ -1505,14 +1484,6 @@ packages:
       '@vue/compiler-core': 3.4.21
       '@vue/shared': 3.4.21
 
-  /@vue/compiler-sfc@2.7.14:
-    resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
-    dependencies:
-      '@babel/parser': 7.23.0
-      postcss: 8.4.35
-      source-map: 0.6.1
-    dev: false
-
   /@vue/compiler-sfc@3.4.21:
     resolution: {integrity: sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==}
     dependencies:
@@ -2055,17 +2026,9 @@ packages:
     hasBin: true
     dev: true
 
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: false
-
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  /dayjs@1.11.0:
-    resolution: {integrity: sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug==}
-    dev: false
-
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -2482,10 +2445,6 @@ packages:
       split2: 4.2.0
     dev: true
 
-  /gl-matrix@3.4.3:
-    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
-    dev: false
-
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -2747,10 +2706,6 @@ packages:
     requiresBuild: true
     dev: true
 
-  /jquery@3.7.1:
-    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
-    dev: false
-
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -3038,10 +2993,6 @@ packages:
       ufo: 1.4.0
     dev: true
 
-  /mobile-select@1.1.2:
-    resolution: {integrity: sha512-FrVAun32DsxLUZziTE1LPlXC72kD13f8N8tqgf7zVWRIOIIJakNxVs8mR2KMzm3QJAYq5+EJ4ji98pHdWJ7ekw==}
-    dev: false
-
   /mockjs@1.1.0:
     resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
     hasBin: true
@@ -3487,6 +3438,8 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
     requiresBuild: true
+    dev: true
+    optional: true
 
   /source-map@0.7.4:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
@@ -3789,12 +3742,6 @@ packages:
       vue: 3.4.21(typescript@5.3.3)
     dev: false
 
-  /vue-switches@2.0.1:
-    resolution: {integrity: sha512-rDqBtK3TKy1pEvyZeWmnSHVeXqAcn+ozch7LiNThBzr1QMjg5rhvqBY7uWeli/baDDslf6CXmBJbHPwASJLqoA==}
-    dependencies:
-      vue: 2.7.14
-    dev: false
-
   /vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
     dependencies:
@@ -3814,14 +3761,6 @@ packages:
       typescript: 5.3.3
     dev: true
 
-  /vue@2.7.14:
-    resolution: {integrity: sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==}
-    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
-    dependencies:
-      '@vue/compiler-sfc': 2.7.14
-      csstype: 3.1.2
-    dev: false
-
   /vue@3.4.21(typescript@5.3.3):
     resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==}
     peerDependencies:
diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index d31f347..ecfba75 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -30,7 +30,6 @@
 <script>
 import Dom, { _css } from '../../utils/dom'
 import bus, { EVENT_KEY } from '@/utils/bus'
-import Utils from '@/utils'
 
 export default {
   name: 'FromBottomDialog',
diff --git a/src/components/slide/SlideAlbum.vue b/src/components/slide/SlideAlbum.txt
similarity index 100%
rename from src/components/slide/SlideAlbum.vue
rename to src/components/slide/SlideAlbum.txt
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue
index 2bfe522..b51ad81 100644
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@@ -192,7 +192,7 @@ function insertContent(list = props.list) {
   bus.emit(EVENT_KEY.CURRENT_ITEM, list[state.localIndex])
 }
 
-function dislike(item) {
+function dislike() {
   // let currentItem = $(wrapperEl.value).find(`.${itemClassName}[data-index=${state.localIndex}]`)
   // let replaceItem = getInsEl(item, state.localIndex, true)
   // $(replaceItem).css('top', currentItem.css('top'))
diff --git a/src/utils/hooks/useSlideListItemRender.jsx b/src/utils/hooks/useSlideListItemRender.jsx
index 80aa08d..d51357a 100644
--- a/src/utils/hooks/useSlideListItemRender.jsx
+++ b/src/utils/hooks/useSlideListItemRender.jsx
@@ -1,4 +1,3 @@
-import SlideAlbum from '@/components/slide/SlideAlbum.vue'
 import SlideUser from '@/components/slide/SlideUser.vue'
 import BVideo from '@/components/slide/BVideo.vue'
 
@@ -10,9 +9,9 @@ export function useSlideListItemRender(props) {
       case 'img':
         node = <img src={item.src} style="height:100%;" alt={''} />
         break
-      case 'imgs':
-        node = <SlideAlbum isPlay={play} index={index} position={{ uniqueId, index }} {...props} />
-        break
+      // case 'imgs':
+      //   node = <SlideAlbum isPlay={play} index={index} position={{ uniqueId, index }} {...props} />
+      //   break
       case 'user':
         node = <SlideUser {...props} />
         break
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
index 3407671..8e16888 100644
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@@ -5,7 +5,6 @@ import ConfirmDialog from '../components/dialog/ConfirmDialog.vue'
 import Loading from '../components/Loading.vue'
 import Config, { IMG_URL, IS_DEV } from '../config'
 import NoticeDialog from '../components/dialog/NoticeDialog.vue'
-import dayjs from 'dayjs'
 import bus, { EVENT_KEY } from './bus'
 import { ArchiveReader, libarchiveWasm } from 'libarchive-wasm'
 
@@ -280,69 +279,6 @@ const Utils = {
     }
     return defaultValue
   },
-  $storageClear(key, isAll = false) {
-    if (isAll) {
-      localStorage.clear()
-    } else {
-      localStorage.removeItem(key)
-    }
-  },
-  $dateFormat(val, type) {
-    if (!val) return
-    if (typeof val === 'number') {
-      //
-    } else {
-      if (val.length === 10) {
-        val += '000'
-      }
-      if (typeof val === 'string' && (val.length === 10 || val.length === 13)) {
-        val = Number(val)
-      }
-    }
-    switch (type) {
-      case 'Y':
-        return dayjs(val).format('YYYY')
-      case 'M':
-        return dayjs(val).format('YYYY-MM')
-      case 'M_CN':
-        return dayjs(val).format('YYYY年MM月')
-      case 'D':
-        return dayjs(val).format('YYYY-MM-DD')
-      case 'm':
-        return dayjs(val).format('YYYY-MM-DD HH:mm')
-      case 'S':
-        return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
-      default:
-        return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
-    }
-  },
-  $time(time) {
-    if (String(time).length === 10) {
-      time = time * 1000
-    }
-    const date = new dayjs(time)
-    const now = new dayjs()
-    const d = now.valueOf() - date.valueOf()
-    let str = ''
-    if (d < 1000 * 60) {
-      str = '刚刚'
-    } else if (d < 1000 * 60 * 60) {
-      str = `${(d / (1000 * 60)).toFixed()}分钟前`
-    } else if (d < 1000 * 60 * 60 * 24) {
-      str = `${(d / (1000 * 60 * 60)).toFixed()}小时前`
-    } else if (d < 1000 * 60 * 60 * 24 * 2) {
-      str = '1天前'
-    } else if (d < 1000 * 60 * 60 * 24 * 3) {
-      str = '2天前'
-    } else if (d < 1000 * 60 * 60 * 24 * 4) {
-      str = '3天前'
-    } else if (date.isSame(now, 'year')) {
-      str = dayjs(time).format('MM-DD')
-    } else {
-      str = dayjs(time).format('YYYY-MM-DD')
-    }
-    return str
-  },
   $duration(v) {
     if (!v) return '00:00'
     const m = Math.floor(v / 60)
@@ -376,15 +312,6 @@ const Utils = {
       return num
     }
   },
-  getCenter(a, b) {
-    const x = (a.x + b.x) / 2
-    const y = (a.y + b.y) / 2
-    return { x, y }
-  },
-  // 获取坐标之间的举例
-  getDistance(start, stop) {
-    return Math.hypot(stop.x - start.x, stop.y - start.y)
-  },
   updateItem(props, key, val, emit) {
     const old = cloneDeep(props.item)
     old[key] = val
@@ -408,8 +335,39 @@ const Utils = {
 
 export default Utils
 
-export function _dateFormat(val, type) {
-  return Utils.$dateFormat(val, type)
+export function _dateFormat(val, type): string {
+  if (!val) return
+  if (String(val).length === 10) {
+    val = val * 1000
+  }
+  const d = new Date(Number(val))
+  const year = d.getFullYear()
+  const m = d.getMonth() + 1
+  const mStr = m < 10 ? '0' + m : m
+  const day = d.getDate()
+  const dayStr = day < 10 ? '0' + day : day
+  const h = d.getHours()
+  const hStr = h < 10 ? '0' + h : h
+  const min = d.getMinutes()
+  const minStr = min < 10 ? '0' + min : min
+  const sec = d.getSeconds()
+  const secStr = sec < 10 ? '0' + sec : sec
+  switch (type) {
+    case 'Y':
+      return year + ''
+    case 'M':
+      return `${year}-${mStr}`
+    case 'M_D':
+      return `${mStr}-${dayStr}`
+    case 'M_CN':
+      return `${year}年${mStr}月`
+    case 'D':
+      return `${year}-${mStr}-${dayStr}`
+    case 'm':
+      return `${year}-${mStr}-${dayStr} ${hStr}:${minStr}`
+    default:
+      return `${year}-${mStr}-${dayStr} ${hStr}:${minStr}:${secStr}`
+  }
 }
 
 export function $no() {
@@ -420,8 +378,32 @@ export function $notice(val) {
   Utils.$notice(val)
 }
 
-export function _time(val) {
-  return Utils.$time(val)
+export function _time(time) {
+  if (String(time).length === 10) {
+    time = time * 1000
+  }
+  const date = new Date(Number(time))
+  const now = new Date()
+  const d = now.valueOf() - date.valueOf()
+  let str = ''
+  if (d < 1000 * 60) {
+    str = '刚刚'
+  } else if (d < 1000 * 60 * 60) {
+    str = `${(d / (1000 * 60)).toFixed()}分钟前`
+  } else if (d < 1000 * 60 * 60 * 24) {
+    str = `${(d / (1000 * 60 * 60)).toFixed()}小时前`
+  } else if (d < 1000 * 60 * 60 * 24 * 2) {
+    str = '1天前'
+  } else if (d < 1000 * 60 * 60 * 24 * 3) {
+    str = '2天前'
+  } else if (d < 1000 * 60 * 60 * 24 * 4) {
+    str = '3天前'
+  } else if (date.getFullYear() === now.getFullYear()) {
+    str = _dateFormat(time, 'M_D')
+  } else {
+    str = _dateFormat(time, 'D')
+  }
+  return str
 }
 
 export function _checkImgUrl(url) {

From 325057d197bd99d00b7df826d59cb7ca8a7feced Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 23 Apr 2024 18:59:33 +0800
Subject: [PATCH 2/3] refactor: optimize the code

---
 src/components/Comment.vue                 | 14 ++---
 src/components/DouyinCode.vue              | 13 ++--
 src/components/Share.vue                   | 24 ++++----
 src/components/UserPanel.vue               | 16 ++---
 src/components/slide/BVideo.vue            |  2 +-
 src/components/slide/SlideAlbum.txt        |  6 +-
 src/components/slide/SlideUser.vue         | 15 ++---
 src/pages/home/LivePage.vue                | 14 ++---
 src/pages/home/Music.vue                   | 10 +--
 src/pages/home/MusicRankList.vue           |  6 +-
 src/pages/home/SearchPage.vue              | 10 +--
 src/pages/home/components/PlayFeedback.vue |  3 +-
 src/pages/home/components/ShareTo.vue      | 30 ++++-----
 src/pages/home/components/VideoShare.vue   | 22 ++++---
 src/pages/home/index.vue                   | 28 ++++-----
 src/pages/home/slide/Community.vue         | 14 ++---
 src/pages/login/OtherLogin.vue             | 10 +--
 src/pages/me/Me.less                       | 10 +--
 src/pages/me/Me.vue                        | 44 +++++++-------
 src/pages/me/MyCard.vue                    |  6 +-
 src/pages/me/MyMusic.vue                   |  9 +--
 src/pages/me/collect/MusicCollect.vue      |  4 +-
 src/pages/me/components/CollectMusic.vue   |  4 +-
 src/pages/me/components/GuessMusic.vue     |  4 +-
 src/pages/me/userinfo/EditUserInfo.vue     |  4 +-
 src/pages/other/VideoDetail.vue            |  2 +-
 src/pages/people/FindAcquaintance.vue      |  2 +-
 src/pages/people/Scan.vue                  |  2 +-
 src/pages/people/components/Peoples.vue    |  5 +-
 src/pages/shop/Shop.vue                    | 14 ++---
 src/utils/index.tsx                        | 71 ----------------------
 src/utils/request.ts                       | 18 +++---
 32 files changed, 185 insertions(+), 251 deletions(-)

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 5513ac3..472f6eb 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -15,7 +15,7 @@
         <dy-back mode="dark" img="close" direction="right" style="opacity: 0" />
         <div class="num">{{ _formatNumber(comments.length) }}条评论</div>
         <div class="right">
-          <Icon icon="prime:arrow-up-right-and-arrow-down-left-from-center" @click.stop="$no" />
+          <Icon icon="prime:arrow-up-right-and-arrow-down-left-from-center" @click.stop="_no" />
           <Icon icon="ic:round-close" @click.stop="cancel" />
         </div>
       </div>
@@ -157,7 +157,7 @@
             <AutoInput v-model="comment" placeholder="善语结善缘，恶言伤人心"></AutoInput>
             <div class="right">
               <img src="../assets/img/icon/message/call.png" @click="isCall = !isCall" />
-              <img src="../assets/img/icon/message/emoji-black.png" @click="$no" />
+              <img src="../assets/img/icon/message/emoji-black.png" @click="_no" />
             </div>
           </div>
           <img v-if="comment" src="../assets/img/icon/message/up.png" @click="send" />
@@ -178,9 +178,9 @@ import FromBottomDialog from './dialog/FromBottomDialog.vue'
 import Loading from './Loading.vue'
 import Search from './Search.vue'
 import {
-  $no,
   _checkImgUrl,
   _formatNumber,
+  _no,
   _showSelectDialog,
   _sleep,
   _time,
@@ -251,10 +251,10 @@ export default {
   },
   mounted() {},
   methods: {
+    _no,
     _time,
     _formatNumber,
     _checkImgUrl,
-    $no,
     async handShowChildren(item) {
       this.loadChildrenItemCId = item.comment_id
       this.loadChildren = true
@@ -370,7 +370,7 @@ export default {
 
 .comment {
   color: #000;
-  width: 100vw;
+  width: 100%;
   height: v-bind(height);
   background: #fff;
   z-index: 5;
@@ -529,7 +529,7 @@ export default {
     border-radius: 10rem 10rem 0 0;
     background: white;
     position: fixed;
-    width: 100vw;
+    width: 100%;
     bottom: 0;
     z-index: 3;
 
@@ -601,7 +601,7 @@ export default {
         }
 
         .auto-input {
-          width: calc(100vw - 180rem);
+          width: calc(100% - 180rem);
         }
       }
 
diff --git a/src/components/DouyinCode.vue b/src/components/DouyinCode.vue
index e7c4daa..9810985 100644
--- a/src/components/DouyinCode.vue
+++ b/src/components/DouyinCode.vue
@@ -16,23 +16,23 @@
       <div class="toolbar">
         <div class="title">分享到</div>
         <div class="shares">
-          <div class="share-to" @click="$no">
+          <div class="share-to" @click="_no">
             <img src="../assets/img/icon/components/video/toqq.webp" alt="" />
             <span>QQ好友</span>
           </div>
-          <div class="share-to" @click="$no">
+          <div class="share-to" @click="_no">
             <img src="../assets/img/icon/components/video/tozone.webp" alt="" />
             <span>QQ空间</span>
           </div>
-          <div class="share-to" @click="$no">
+          <div class="share-to" @click="_no">
             <img src="../assets/img/icon/components/video/towechatchat.webp" alt="" />
             <span>微信好友</span>
           </div>
-          <div class="share-to" @click="$no">
+          <div class="share-to" @click="_no">
             <img src="../assets/img/icon/components/video/towechat.webp" alt="" />
             <span>朋友圈</span>
           </div>
-          <div class="share-to" @click="$no">
+          <div class="share-to" @click="_no">
             <img src="../assets/img/icon/components/video/todownload.webp" alt="" />
             <span>保存到相册</span>
           </div>
@@ -43,7 +43,7 @@
   </transition>
 </template>
 <script>
-import { _checkImgUrl } from '@/utils'
+import { _checkImgUrl, _no } from '@/utils'
 
 export default {
   name: 'DouyinCode',
@@ -62,6 +62,7 @@ export default {
   computed: {},
   created() {},
   methods: {
+    _no,
     _checkImgUrl,
     cancel() {
       this.$emit('update:modelValue', false)
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 8c9899d..dbac70d 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -54,11 +54,11 @@
             <Icon icon="humbleicons:link" />
             <span>复制链接</span>
           </div>
-          <div class="option" @click.stop="$no">
+          <div class="option" @click.stop="_no">
             <img class="small" src="../assets/img/icon/components/video/comeonplay.png" alt="" />
             <span>合拍</span>
           </div>
-          <div class="option" @click.stop="$no">
+          <div class="option" @click.stop="_no">
             <img class="small" src="../assets/img/icon/components/video/dou.webp" alt="" />
             <span>帮上热门</span>
           </div>
@@ -74,12 +74,12 @@
             <Icon icon="mingcute:download-fill" />
             <span>保存本地</span>
           </div>
-          <div class="option" @click.stop="$no">
+          <div class="option" @click.stop="_no">
             <!--TODO icon不对            -->
             <img class="small" src="../assets/img/icon/components/video/feedback.webp" alt="" />
             <span>建群分享</span>
           </div>
-          <div class="option" @click.stop="$no">
+          <div class="option" @click.stop="_no">
             <img class="small" src="../assets/img/icon/components/video/comeonlook.webp" alt="" />
             <span>一起看视频</span>
           </div>
@@ -91,7 +91,7 @@
             <Icon icon="tabler:photo" />
             <span>生成图片</span>
           </div>
-          <div class="option" @click.stop="$no">
+          <div class="option" @click.stop="_no">
             <img class="small" src="../assets/img/icon/components/video/bizhi.webp" alt="" />
             <span>动态壁纸</span>
           </div>
@@ -111,7 +111,7 @@
           </div>
         </template>
         <template v-if="mode === 'my-music'">
-          <div class="option" @click.stop="$no">
+          <div class="option" @click.stop="_no">
             <img class="small" src="../assets/img/icon/components/video/torichang.png" alt="" />
             <span>转发到日常</span>
           </div>
@@ -128,10 +128,10 @@
           <img class="poster" src="../assets/img/poster/1.jpg" alt="" />
         </div>
         <div class="btns">
-          <dy-button type="dark2" radius="7" v-if="selectFriends.length > 1" @click.stop="$no"
+          <dy-button type="dark2" radius="7" v-if="selectFriends.length > 1" @click.stop="_no"
             >建群并发送
           </dy-button>
-          <dy-button type="primary" radius="7" @click.stop="$no"
+          <dy-button type="primary" radius="7" @click.stop="_no"
             >{{ selectFriends.length > 1 ? '分别发送' : '发送' }}
           </dy-button>
         </div>
@@ -144,7 +144,7 @@
 import { mapState } from 'pinia'
 import FromBottomDialog from './dialog/FromBottomDialog'
 import { useBaseStore } from '@/store/pinia'
-import { $no, _copy } from '@/utils'
+import { _copy, _no, _notice } from '@/utils'
 
 export default {
   name: 'Share',
@@ -196,7 +196,7 @@ export default {
     return {}
   },
   methods: {
-    $no,
+    _no,
     async copyLink() {
       this.closeShare()
       this.$showLoading()
@@ -204,7 +204,7 @@ export default {
       this.$hideLoading()
       _copy(this.item.share_info.share_link_desc + this.item.share_info.share_url)
       //TODO 抖音样式改了
-      this.$notice('复制成功')
+      _notice('复制成功')
     },
 
     toggleCall(item) {
@@ -325,7 +325,7 @@ export default {
     bottom: 0;
     padding: 20rem;
     box-sizing: border-box;
-    width: 100vw;
+    width: 100%;
     height: 180rem;
     background: black;
     display: flex;
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index e64599f..2840690 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -32,7 +32,7 @@
             <span>求更新</span>
           </div>
         </transition>
-        <Icon class="icon" icon="ion:search" @click.stop="$no()" />
+        <Icon class="icon" icon="ion:search" @click.stop="_no" />
         <Icon class="icon" icon="ri:more-line" @click.stop="emit('showFollowSetting')" />
       </div>
     </div>
@@ -234,7 +234,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue'
-import Utils, { $no, _checkImgUrl, _getUserDouyinId } from '@/utils'
+import Utils, { _checkImgUrl, _getUserDouyinId, _no } from '@/utils'
 import { useNav } from '@/utils/hooks/useNav'
 import Posters from '@/components/Posters.vue'
 import { DefaultUser } from '@/utils/const_var'
@@ -424,8 +424,8 @@ function touchEnd() {
     justify-content: center;
 
     .resource {
-      width: 100vw;
-      max-height: 100vw;
+      width: 100%;
+      max-height: 100%;
     }
 
     .download {
@@ -443,7 +443,7 @@ function touchEnd() {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100vw;
+    width: 100%;
     height: calc(var(--vh, 1vh) * 100);
     z-index: 3;
   }
@@ -573,7 +573,7 @@ function touchEnd() {
             .poster {
               border-radius: 4rem;
               width: 100%;
-              height: calc((100vw - 34rem) / 3);
+              height: calc((100% - 34rem) / 3);
               display: block;
             }
 
@@ -593,7 +593,7 @@ function touchEnd() {
       .cover {
         height: 220rem;
         object-fit: cover;
-        width: 100vw;
+        width: 100%;
         //transition: height .3s;
       }
 
@@ -978,7 +978,7 @@ function touchEnd() {
   .float {
     position: fixed;
     box-sizing: border-box;
-    width: 100vw;
+    width: 100%;
     z-index: 2;
     display: flex;
     justify-content: space-between;
diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue
index 84be91b..38a8cb7 100644
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@@ -387,7 +387,7 @@ export default {
   text-align: center;
 
   video {
-    max-width: 100vw;
+    max-width: 100%;
     height: 100%;
     transition:
       height,
diff --git a/src/components/slide/SlideAlbum.txt b/src/components/slide/SlideAlbum.txt
index ff5c1b8..03fbb9b 100644
--- a/src/components/slide/SlideAlbum.txt
+++ b/src/components/slide/SlideAlbum.txt
@@ -70,7 +70,7 @@
           />
         </div>
         <div class="right">
-          <Icon icon="heroicons-outline:menu-alt-1" @click="Utils.$no" />
+          <Icon icon="heroicons-outline:menu-alt-1" @click="Utils._no" />
           <Icon
             icon="fluent:play-28-filled"
             v-if="state.status === SlideItemPlayStatus.Pause"
@@ -78,7 +78,7 @@
             @click="startPlay"
           />
           <Icon icon="bi:pause-fill" v-else class="pause" @click="stopPlay" />
-          <Icon icon="system-uicons:push-down" @click="$notice('已保存到系统相册')" />
+          <Icon icon="system-uicons:push-down" @click="_notice('已保存到系统相册')" />
         </div>
       </div>
     </Teleport>
@@ -88,7 +88,7 @@
 <script setup lang="jsx">
 import enums from '../../utils/enums'
 import Utils from '../../utils'
-import GM, { $notice } from '../../utils'
+import GM, { _notice } from '../../utils'
 import { mat4 } from 'gl-matrix'
 import { Icon } from '@iconify/vue'
 import {
diff --git a/src/components/slide/SlideUser.vue b/src/components/slide/SlideUser.vue
index 652ca54..ae0b84a 100644
--- a/src/components/slide/SlideUser.vue
+++ b/src/components/slide/SlideUser.vue
@@ -20,12 +20,12 @@
           class="poster-item"
           :key="index"
           v-for="(i, index) in modelValue.videos.slice(0, 3)"
-          @click="globalMethods.$no"
+          @click="_no"
         >
-          <img class="poster" :src="globalMethods.$imgPreview(i.cover)" />
+          <img class="poster" :src="_checkImgUrl(i.cover)" />
           <div class="num">
             <img class="love" src="../../assets/img/icon/love.svg" alt="" />
-            <span>{{ globalMethods.formatNumber(i.digg_count) }}</span>
+            <span>{{ _formatNumber(i.digg_count) }}</span>
           </div>
         </div>
       </div>
@@ -37,7 +37,7 @@
   </div>
 </template>
 <script>
-import globalMethods from '../../utils'
+import { _checkImgUrl, _formatNumber, _no } from '../../utils'
 import BaseButton from '../BaseButton'
 
 export default {
@@ -240,17 +240,12 @@ export default {
       }
     }
   },
-  data() {
-    return {
-      globalMethods
-    }
-  },
   computed: {},
   watch: {},
   created() {
     console.log('modelValue', this.modelValue)
   },
-  methods: {}
+  methods: { _formatNumber, _checkImgUrl, _no }
 }
 </script>
 
diff --git a/src/pages/home/LivePage.vue b/src/pages/home/LivePage.vue
index e5ddf3b..f08fbe0 100644
--- a/src/pages/home/LivePage.vue
+++ b/src/pages/home/LivePage.vue
@@ -376,7 +376,7 @@ export default {
 .barrage {
   position: fixed;
   top: 50%;
-  transform: translateX(100vw);
+  transform: translateX(100%);
   display: flex;
   align-items: center;
   font-size: 12rem;
@@ -384,7 +384,7 @@ export default {
 
   @keyframes anim {
     from {
-      transform: translateX(100vw);
+      transform: translateX(100%);
     }
     to {
       transform: translateX(-100%);
@@ -467,14 +467,14 @@ export default {
 @import '../../assets/less/index';
 
 .LivePage {
-  width: 100vw;
+  width: 100%;
   height: calc(var(--vh, 1vh) * 100);
   color: white;
   font-size: 14rem;
   position: relative;
 
   .live-wrapper {
-    width: 100vw;
+    width: 100%;
     height: calc(var(--vh, 1vh) * 100);
     background: black;
     display: flex;
@@ -487,7 +487,7 @@ export default {
     }
 
     img {
-      width: 100vw;
+      width: 100%;
       height: calc(var(--vh, 1vh) * 100);
       color: rgb(229, 229, 229);
     }
@@ -496,7 +496,7 @@ export default {
   .float {
     position: absolute;
     top: 0;
-    width: 100vw;
+    width: 100%;
     height: calc(var(--vh, 1vh) * 100);
 
     @tag-bg: rgba(58, 58, 70, 0.3);
@@ -634,7 +634,7 @@ export default {
     .bottom {
       position: absolute;
       bottom: 0;
-      width: 100vw;
+      width: 100%;
       box-sizing: border-box;
       padding: var(--page-padding);
       padding-bottom: 10rem;
diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue
index fd96b15..c4932f6 100644
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
@@ -75,11 +75,11 @@
       </Scroll>
     </div>
     <div class="options">
-      <div class="l-button white" @click="$no">
+      <div class="l-button white" @click="_no">
         <img src="../../assets/img/icon/home/music3.png" alt="" />
         <span>分享到日常</span>
       </div>
-      <div class="l-button primary" @click="$no">
+      <div class="l-button primary" @click="_no">
         <img src="../../assets/img/icon/home/record.png" alt="" />
         <span>拍同款</span>
       </div>
@@ -130,7 +130,7 @@ import { myVideo } from '@/api/videos'
 import { onDeactivated, onMounted, onUnmounted, reactive, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useNav } from '@/utils/hooks/useNav'
-import { $no, $notice, _checkImgUrl, _formatNumber } from '@/utils'
+import { _checkImgUrl, _formatNumber, _no, _notice } from '@/utils'
 
 const route = useRoute()
 const router = useRouter()
@@ -203,7 +203,7 @@ async function loadData(init = false) {
   if (data.loading) return
   if (!init) {
     if (data.total <= data.videos.length) {
-      return $notice('暂时没有更多了')
+      _notice('暂时没有更多了')
     }
     data.pageNo++
   }
@@ -376,7 +376,7 @@ function stopPlay() {
 
   .options {
     font-size: 14rem;
-    width: 100vw;
+    width: 100%;
     position: fixed;
     bottom: 20rem;
     display: flex;
diff --git a/src/pages/home/MusicRankList.vue b/src/pages/home/MusicRankList.vue
index e10ae16..320982b 100644
--- a/src/pages/home/MusicRankList.vue
+++ b/src/pages/home/MusicRankList.vue
@@ -305,7 +305,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { computed, onDeactivated, onMounted, onUnmounted, reactive } from 'vue'
-import { $notice, _checkImgUrl, _dateFormat, _duration, _formatNumber } from '@/utils/index.jsx'
+import { _checkImgUrl, _dateFormat, _duration, _formatNumber, _notice } from '@/utils/index.jsx'
 import { useNav } from '@/utils/hooks/useNav'
 
 defineOptions({
@@ -523,9 +523,9 @@ function scroll(e) {
 function toggleCollect(item) {
   item.is_collect = !item.is_collect
   if (item.is_collect) {
-    $notice('收藏成功')
+    _notice('收藏成功')
   } else {
-    $notice('取消收藏')
+    _notice('取消收藏')
   }
 }
 
diff --git a/src/pages/home/SearchPage.vue b/src/pages/home/SearchPage.vue
index 16c5ab7..defaa93 100644
--- a/src/pages/home/SearchPage.vue
+++ b/src/pages/home/SearchPage.vue
@@ -776,7 +776,7 @@ function toggle() {
     align-items: center;
     border-bottom: 1px solid var(--line-color);
     position: fixed;
-    width: 100vw;
+    width: 100%;
     box-sizing: border-box;
     top: 0;
 
@@ -912,7 +912,7 @@ function toggle() {
             justify-content: space-between;
 
             .center {
-              width: calc(100vw - 140rem);
+              width: calc(100% - 140rem);
               box-sizing: border-box;
               //padding: 0 1rem;
               //flex: 1;
@@ -980,7 +980,7 @@ function toggle() {
             justify-content: space-between;
 
             .center {
-              width: calc(100vw - 160rem);
+              width: calc(100% - 160rem);
               box-sizing: border-box;
               //padding: 0 1rem;
               //flex: 1;
@@ -1092,7 +1092,7 @@ function toggle() {
             justify-content: space-between;
 
             .center {
-              width: calc(100vw - 150rem);
+              width: calc(100% - 150rem);
               box-sizing: border-box;
               //padding: 0 1rem;
               //flex: 1;
@@ -1197,7 +1197,7 @@ function toggle() {
               justify-content: space-between;
 
               .center {
-                width: calc(100vw - 150rem);
+                width: calc(100% - 150rem);
                 box-sizing: border-box;
                 //padding: 0 1rem;
                 //flex: 1;
diff --git a/src/pages/home/components/PlayFeedback.vue b/src/pages/home/components/PlayFeedback.vue
index fc2c75a..4756d9b 100644
--- a/src/pages/home/components/PlayFeedback.vue
+++ b/src/pages/home/components/PlayFeedback.vue
@@ -161,6 +161,7 @@
 </template>
 <script>
 import Check from '../../../components/Check'
+import { _notice } from '@/utils'
 
 export default {
   name: 'Test',
@@ -225,7 +226,7 @@ export default {
       this.$showLoading()
       await this.$sleep(1000)
       this.$hideLoading()
-      this.$notice('感谢你的反馈，我们会尽快答复！')
+      _notice('感谢你的反馈，我们会尽快答复！')
     }
   }
 }
diff --git a/src/pages/home/components/ShareTo.vue b/src/pages/home/components/ShareTo.vue
index 9247384..56471ad 100644
--- a/src/pages/home/components/ShareTo.vue
+++ b/src/pages/home/components/ShareTo.vue
@@ -15,67 +15,67 @@
         </dy-button>
 
         <template v-if="canDownload">
-          <dy-button type="green" v-if="showShare2WeChatZone" @click="$no">
+          <dy-button type="green" v-if="showShare2WeChatZone" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="" />
             </template>
             发送视频到朋友圈
           </dy-button>
-          <dy-button type="green" v-if="showShare2WeChat" @click="$no">
+          <dy-button type="green" v-if="showShare2WeChat" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="" />
             </template>
             发送视频到微信
           </dy-button>
-          <dy-button type="qqzone" v-if="showShare2QQZone" @click="$no">
+          <dy-button type="qqzone" v-if="showShare2QQZone" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="" />
             </template>
             发送视频到QQ空间
           </dy-button>
-          <dy-button type="qq" v-if="showShare2QQ" @click="$no">
+          <dy-button type="qq" v-if="showShare2QQ" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/qq-white.webp" alt="" />
             </template>
             发送视频到QQ
           </dy-button>
-          <dy-button type="webo" v-if="showShare2Webo" @click="$no">
+          <dy-button type="webo" v-if="showShare2Webo" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/webo-white.webp" alt="" />
             </template>
             发送视频到微博
           </dy-button>
-          <dy-button v-if="!showDownload" class="mt1r" type="white" @click="$no"
+          <dy-button v-if="!showDownload" class="mt1r" type="white" @click="_no"
             >复制口令发给好友
           </dy-button>
         </template>
 
         <template v-else>
-          <dy-button type="green" v-if="showShare2WeChatZone" @click="$no">
+          <dy-button type="green" v-if="showShare2WeChatZone" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="" />
             </template>
             复制口令发给好友
           </dy-button>
-          <dy-button type="green" v-if="showShare2WeChat" @click="$no">
+          <dy-button type="green" v-if="showShare2WeChat" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="" />
             </template>
             复制口令发给好友
           </dy-button>
-          <dy-button type="qqzone" v-if="showShare2QQZone" @click="$no">
+          <dy-button type="qqzone" v-if="showShare2QQZone" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="" />
             </template>
             复制口令发给好友
           </dy-button>
-          <dy-button type="qq" v-if="showShare2QQ" @click="$no">
+          <dy-button type="qq" v-if="showShare2QQ" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/qq-white.webp" alt="" />
             </template>
             复制口令发给好友
           </dy-button>
-          <dy-button type="webo" v-if="showShare2Webo" @click="$no">
+          <dy-button type="webo" v-if="showShare2Webo" @click="_no">
             <template v-slot:prefix>
               <img src="../../../assets/img/icon/components/video/webo-white.webp" alt="" />
             </template>
@@ -84,12 +84,12 @@
         </template>
 
         <template v-if="showDownload">
-          <dy-button type="primary" @click="$no">
+          <dy-button type="primary" @click="_no">
             已保存，请去相册查看
             <dy-back scale="0.7" mode="light" direction="right"></dy-back>
           </dy-button>
 
-          <dy-button class="mt1r" type="white" @click="$no">
+          <dy-button class="mt1r" type="white" @click="_no">
             <img src="../../../assets/img/icon/components/video/wechat.webp" alt="" />
             发送视频到微信
           </dy-button>
@@ -123,6 +123,7 @@
 import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
 import { mapState } from 'pinia'
 import { useBaseStore } from '@/store/pinia'
+import { _no, _notice } from '@/utils'
 /*
  * 分享到各种工具
  * */
@@ -173,6 +174,7 @@ export default {
   },
   created() {},
   methods: {
+    _no,
     async change(newVal) {
       if (newVal === -1) return
       this.showShareDialog = true
@@ -227,7 +229,7 @@ export default {
     },
     share(item) {
       if (item.select) {
-        this.$notice('已分享给朋友')
+        _notice('已分享给朋友')
       }
       item.select = true
     }
diff --git a/src/pages/home/components/VideoShare.vue b/src/pages/home/components/VideoShare.vue
index 3d9b0da..648a845 100644
--- a/src/pages/home/components/VideoShare.vue
+++ b/src/pages/home/components/VideoShare.vue
@@ -41,8 +41,8 @@
         <to-share item-type="report" @click="$nav('/home/report', { mode: this.mode })" />
         <to-share item-type="copyPassword" @click="copyLink" />
         <to-share :item-type="isCollect ? 'collectYellow' : 'collect'" @click="toggleCollect" />
-        <to-share item-type="comeon" @click="$no" />
-        <to-share item-type="dou" @click="$no" />
+        <to-share item-type="comeon" @click="_no" />
+        <to-share item-type="dou" @click="_no" />
         <to-share item-type="copyLink" @click="copyLink" />
         <template v-if="isShowMore">
           <to-share item-type="duoshan" @click="isShowMore = true" />
@@ -50,8 +50,8 @@
         </template>
         <to-share v-else item-type="share" @click="isShowMore = true" />
         <to-share item-type="dislike" @click="isShowMore = true" />
-        <to-share item-type="bizhi" @click="$no" />
-        <to-share item-type="code" @click="$no" />
+        <to-share item-type="bizhi" @click="_no" />
+        <to-share item-type="code" @click="_no" />
       </div>
       <div class="friends">
         <div class="item" :key="i" v-for="(item, i) in friends.all">
@@ -81,6 +81,7 @@ import { mapState } from 'pinia'
 import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
 import LoadingCircle from './LoadingCircle'
 import { useBaseStore } from '@/store/pinia'
+import { _no, _notice } from '@/utils'
 // import DouyinCode from "./DouyinCode";
 
 export default {
@@ -151,7 +152,7 @@ export default {
             if (this.itemType === 'download') {
               this.$stopPropagation(e)
             } else {
-              this.$notice('作者已关闭下载功能')
+              _notice('作者已关闭下载功能')
               this.$emit('copy')
             }
             return
@@ -159,7 +160,7 @@ export default {
           if (this.needDown) this.$stopPropagation(e)
           else return
           if (this.progress === 100) {
-            this.$notice('未实现分享跳转到其他App')
+            _notice('未实现分享跳转到其他App')
           } else {
             this.loading = true
             let interval = setInterval(() => {
@@ -170,7 +171,7 @@ export default {
                 this.loading = false
                 this.$emit('click')
                 this.$emit('click')
-                this.$notice('未实现分享跳转到其他App')
+                _notice('未实现分享跳转到其他App')
               }
             }, 10)
           }
@@ -249,6 +250,7 @@ export default {
     }
   },
   methods: {
+    _no,
     displayText(type) {
       if (this.loading[type]) {
         return this.progress !== 100 ? '下载中' : this.text[type]
@@ -260,14 +262,14 @@ export default {
       this.$showLoading()
       await this.$sleep(500)
       this.$hideLoading()
-      this.$notice('复制成功')
+      _notice('复制成功')
     },
     toggleCollect() {
       this.closeShare()
       if (this.isCollect) {
-        this.$notice('取消收藏成功')
+        _notice('取消收藏成功')
       } else {
-        this.$notice('收藏成功')
+        _notice('收藏成功')
       }
       this.isCollect = !this.isCollect
     },
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 078733b..4c02b57 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -18,7 +18,7 @@
             </div>
           </div>
           <div class="content">
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <img
                 class="xcx"
                 src="https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/tt-icon.png"
@@ -26,7 +26,7 @@
               />
               <span>今日头条</span>
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <img
                 class="xcx"
                 src="https://gd-hbimg.huaban.com/65130a3e6a139530bb03bd118e21a2603af7df4e1303b-OOzcBu_fw658webp"
@@ -46,7 +46,7 @@
             </div>
           </div>
           <div class="content">
-            <div class="item avatar" @click="$no" :key="i" v-for="i in 6">
+            <div class="item avatar" @click="_no" :key="i" v-for="i in 6">
               <img
                 src="https://img.tol.vip/avatar/WEIXIN/3aSuTGYTzjHvcHy0y0tH1eiShKRk9Sgd.jpg?_upt=de4a5c251709635127"
               />
@@ -61,35 +61,35 @@
             <div class="right"></div>
           </div>
           <div class="content">
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="ion:wallet-outline" />
               <span>我的钱包</span>
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="mingcute:coupon-line" />
               <span>券包</span>
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="icon-park-outline:bytedance-applets" />
               <span>小程序</span>
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="solar:history-linear" />
               <span>观看历史</span>
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="fluent:content-settings-24-regular" />
               <span>内容偏好</span>
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="iconoir:cloud-download" />
               <span>离线模式</span>
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="ep:setting" />
               <span>设置</span>
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="icon-park-outline:baggage-delay" />
               <span>稍后再看</span>
             </div>
@@ -223,7 +223,7 @@ import Slide0 from '@/pages/home/slide/Slide0.vue'
 import Slide2 from '@/pages/home/slide/Slide2.vue'
 import Slide4 from '@/pages/home/slide/Slide4.vue'
 import { DefaultUser } from '@/utils/const_var'
-import { $no } from '@/utils'
+import { _no } from '@/utils'
 import LongVideo from '@/pages/home/slide/LongVideo.vue'
 import { useBaseStore } from '@/store/pinia'
 
@@ -333,7 +333,7 @@ function closeComments() {
 function dislike() {
   // listRef.value.dislike(state.list[1])
   // state.list[state.index] = state.list[1]
-  // Utils.$notice('操作成功，将减少此类视频的推荐')
+  // _notice('操作成功，将减少此类视频的推荐')
 }
 </script>
 
@@ -347,7 +347,7 @@ function dislike() {
 
   .sidebar {
     touch-action: pan-y;
-    width: 80vw;
+    width: 80%;
     height: calc(var(--vh, 1vh) * 100);
     overflow: auto;
     background: rgb(22, 22, 22);
diff --git a/src/pages/home/slide/Community.vue b/src/pages/home/slide/Community.vue
index d450872..9c87e2f 100644
--- a/src/pages/home/slide/Community.vue
+++ b/src/pages/home/slide/Community.vue
@@ -4,7 +4,7 @@
       <template v-slot="{ list }">
         <div class="search" @click="nav('/home/search')">
           <div class="left">
-            <Icon class="icon" icon="ion:search" @click.stop="$no()" />
+            <Icon class="icon" icon="ion:search" @click.stop="_no" />
             <span>壁纸</span>
           </div>
           <div class="right">搜索</div>
@@ -47,7 +47,7 @@
 
 <script setup>
 import { reactive, ref, watch } from 'vue'
-import Utils, { $no, _checkImgUrl, cloneDeep } from '@/utils'
+import Utils, { _checkImgUrl, _no, cloneDeep } from '@/utils'
 import { recommendedPost } from '@/api/user'
 import { useNav } from '@/utils/hooks/useNav'
 import { Icon } from '@iconify/vue'
@@ -210,8 +210,8 @@ function showDetail(e, item) {
   @p: 1rem;
 
   .search {
-    margin-left: 2vw;
-    width: 96vw;
+    margin-left: 2%;
+    width: 96%;
     box-sizing: border-box;
     padding: 10rem;
     border: 1px solid #646464;
@@ -235,8 +235,8 @@ function showDetail(e, item) {
   }
 
   .list {
-    margin-left: 2vw;
-    width: 96vw;
+    margin-left: 2%;
+    width: 96%;
   }
 }
 
@@ -299,7 +299,7 @@ function showDetail(e, item) {
   position: absolute;
   left: 0;
   top: -200vh;
-  width: 100vw;
+  width: 100%;
   transition: all 0.3s;
   overflow: hidden;
   z-index: -100;
diff --git a/src/pages/login/OtherLogin.vue b/src/pages/login/OtherLogin.vue
index 957cb96..5976349 100644
--- a/src/pages/login/OtherLogin.vue
+++ b/src/pages/login/OtherLogin.vue
@@ -58,19 +58,19 @@
         mode="white"
       >
         <div class="block-dialog">
-          <div class="item" @click="$no">
+          <div class="item" @click="_no">
             <img src="../../assets/img/icon/login/toutiao-round.png" alt="" />
             <span>今日头条登录</span>
           </div>
-          <div class="item" @click="$no">
+          <div class="item" @click="_no">
             <img src="../../assets/img/icon/login/qq.webp" alt="" />
             <span>QQ登录</span>
           </div>
-          <div class="item" @click="$no">
+          <div class="item" @click="_no">
             <img src="../../assets/img/icon/login/wechat.webp" alt="" />
             <span>微信登录</span>
           </div>
-          <div class="item" @click="$no">
+          <div class="item" @click="_no">
             <img src="../../assets/img/icon/login/weibo.webp" alt="" />
             <span>微博登录</span>
           </div>
@@ -87,6 +87,7 @@ import Tooltip from './components/Tooltip'
 import LoginInput from './components/LoginInput'
 import Base from './Base.js'
 import FromBottomDialog from '../../components/dialog/FromBottomDialog'
+import { _no } from '@/utils'
 
 export default {
   name: 'OtherLogin',
@@ -106,6 +107,7 @@ export default {
   computed: {},
   created() {},
   methods: {
+    _no,
     async getCode() {
       let res = await this.check()
       if (res) {
diff --git a/src/pages/me/Me.less b/src/pages/me/Me.less
index a3c5278..d5bc981 100644
--- a/src/pages/me/Me.less
+++ b/src/pages/me/Me.less
@@ -29,8 +29,8 @@
     justify-content: center;
 
     .resource {
-      width: 100vw;
-      max-height: 100vw;
+      width: 100%;
+      max-height: 100%;
     }
 
     .download {
@@ -48,7 +48,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 100vw;
+    width: 100%;
     height: calc(var(--vh, 1vh) * 100);
     z-index: 3;
   }
@@ -190,7 +190,7 @@
             .poster {
               border-radius: 4rem;
               width: 100%;
-              height: calc((100vw - 34rem) / 3);
+              height: calc((100% - 34rem) / 3);
               display: block;
             }
 
@@ -207,7 +207,7 @@
   .float {
     position: fixed;
     box-sizing: border-box;
-    width: 100vw;
+    width: 100%;
     z-index: 2;
     display: flex;
     justify-content: space-between;
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index c3f6dac..5874e13 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -31,7 +31,7 @@
             >
               <Icon icon="eva:people-outline" />
             </div>
-            <div class="item" @click="$no">
+            <div class="item" @click="_no">
               <Icon icon="ic:round-search" />
             </div>
             <div class="item" @click.stop="baseActiveIndex = 1">
@@ -123,7 +123,7 @@
                 </div>
               </div>
               <div class="other">
-                <div class="item" @click="$no">
+                <div class="item" @click="_no">
                   <Icon icon="iconamoon:shopping-card-light" />
                   <span>抖音商城</span>
                 </div>
@@ -131,11 +131,11 @@
                   <Icon icon="iconamoon:music-2-light" />
                   <span>我的音乐</span>
                 </div>
-                <div class="item" @click="$no">
+                <div class="item" @click="_no">
                   <Icon icon="streamline:chat-two-bubbles-oval" />
                   <span>我的群聊</span>
                 </div>
-                <div class="item" @click="$no">
+                <div class="item" @click="_no">
                   <Icon icon="iconamoon:shopping-card-light" />
                   <span>查看更多</span>
                 </div>
@@ -242,11 +242,11 @@
       <SlideItem style="width: 70vw; overflow: auto">
         <transition name="fade1">
           <div class="ul" v-if="!isMoreFunction">
-            <div class="li" @click="$no">
+            <div class="li" @click="_no">
               <img src="../../assets/img/icon/newicon/left_menu/shopping.png" alt="" />
               <span>我的订单</span>
             </div>
-            <div class="li" @click="$no">
+            <div class="li" @click="_no">
               <img src="../../assets/img/icon/newicon/left_menu/wallet.png" alt="" />
               <span>钱包</span>
             </div>
@@ -260,22 +260,22 @@
               <img src="../../assets/img/icon/newicon/left_menu/time.png" alt="" />
               <span>观看历史</span>
             </div>
-            <div class="li" @click="$no">
+            <div class="li" @click="_no">
               <img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="" />
               <span>时间管理</span>
             </div>
-            <div class="li" @click="$no">
+            <div class="li" @click="_no">
               <img src="../../assets/img/icon/newicon/left_menu/workbench.png" alt="" />
               <span>创作者服务中心</span>
             </div>
 
             <div class="line"></div>
 
-            <div class="li" @click="$no">
+            <div class="li" @click="_no">
               <img src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png" alt="" />
               <span>小程序</span>
             </div>
-            <div class="li" @click="$no">
+            <div class="li" @click="_no">
               <img src="../../assets/img/icon/newicon/left_menu/gongyi.png" alt="" />
               <span>抖音公益</span>
             </div>
@@ -283,7 +283,7 @@
               <img src="../../assets/img/icon/newicon/left_menu/umbrella.png" alt="" />
               <span>未成年保护工具</span>
             </div>
-            <div class="li" @click="$no">
+            <div class="li" @click="_no">
               <img src="../../assets/img/icon/newicon/left_menu/headset.png" alt="" />
               <span>我的客服</span>
             </div>
@@ -295,38 +295,38 @@
           <div v-else class="more-function">
             <div class="title">生活服务</div>
             <div class="functions">
-              <div class="function" @click="$no">
+              <div class="function" @click="_no">
                 <img src="../../assets/img/icon/newicon/left_menu/quan.png" alt="" />
                 <span>卡券</span>
               </div>
-              <div class="function" @click="$no">
+              <div class="function" @click="_no">
                 <img src="../../assets/img/icon/newicon/left_menu/sd-card.png" alt="" />
                 <span>免流量</span>
               </div>
-              <div class="function" @click="$no">
+              <div class="function" @click="_no">
                 <img src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png" alt="" />
                 <span>视频彩铃</span>
               </div>
             </div>
             <div class="title">拓展功能</div>
             <div class="functions">
-              <div class="function" @click="$no">
+              <div class="function" @click="_no">
                 <img src="../../assets/img/icon/newicon/left_menu/sun-one.png" alt="" />
                 <span>我的动态</span>
               </div>
-              <div class="function" @click="$no">
+              <div class="function" @click="_no">
                 <img src="../../assets/img/icon/newicon/left_menu/download.png" alt="" />
                 <span>我的缓存</span>
               </div>
-              <div class="function" @click="$no">
+              <div class="function" @click="_no">
                 <img src="../../assets/img/icon/newicon/left_menu/hot.png" alt="" />
                 <span>上热门</span>
               </div>
-              <div class="function" @click="$no">
+              <div class="function" @click="_no">
                 <img src="../../assets/img/icon/newicon/left_menu/shop.png" alt="" />
                 <span>小店随心推</span>
               </div>
-              <div class="function" @click="$no">
+              <div class="function" @click="_no">
                 <img src="../../assets/img/icon/newicon/left_menu/yuandi.png" alt="" />
                 <span>投教园地</span>
               </div>
@@ -351,7 +351,7 @@
           class="download"
           src="@/assets/img/icon/components/video/download.png"
           alt=""
-          @click.stop="$no"
+          @click.stop="_no"
         />
       </div>
     </transition>
@@ -378,7 +378,7 @@ import { mapState } from 'pinia'
 
 import bus from '../../utils/bus'
 import ConfirmDialog from '../../components/dialog/ConfirmDialog'
-import { $no, _checkImgUrl, _formatNumber, _getUserDouyinId } from '@/utils'
+import { _checkImgUrl, _formatNumber, _getUserDouyinId, _no } from '@/utils'
 import { likeVideo, myVideo, privateVideo } from '@/api/videos'
 import { useBaseStore } from '@/store/pinia'
 import { userCollect } from '@/api/user'
@@ -488,10 +488,10 @@ export default {
     bus.on('baseSlide-end', () => (this.canScroll = true))
   },
   methods: {
+    _no,
     _getUserDouyinId,
     _checkImgUrl,
     _formatNumber,
-    $no,
     setLoadingFalse() {
       this.loadings.loading0 = false
       this.loadings.loading1 = false
diff --git a/src/pages/me/MyCard.vue b/src/pages/me/MyCard.vue
index 8a2a7e3..8adea94 100644
--- a/src/pages/me/MyCard.vue
+++ b/src/pages/me/MyCard.vue
@@ -20,13 +20,13 @@
     </div>
     <div class="footer">
       <!--      <div class="btn" @click="$nav('/scan')">-->
-      <div class="btn" @click="$no">
+      <div class="btn" @click="_no">
         <div class="wrapper">
           <img src="../../assets/img/icon/scan.png" alt="" />
         </div>
         <span>扫一扫</span>
       </div>
-      <div class="btn" @click="$no">
+      <div class="btn" @click="_no">
         <div class="wrapper">
           <img src="../../assets/img/icon/download.png" alt="" />
         </div>
@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import Share from '../../components/Share.vue'
 import { useBaseStore } from '@/store/pinia'
-import { $no, _checkImgUrl } from '@/utils'
+import { _checkImgUrl, _no } from '@/utils'
 import { reactive, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/src/pages/me/MyMusic.vue b/src/pages/me/MyMusic.vue
index 52657e6..9343a6e 100644
--- a/src/pages/me/MyMusic.vue
+++ b/src/pages/me/MyMusic.vue
@@ -258,7 +258,7 @@ async function getCollectMusic() {
   .header {
     z-index: 9;
     position: fixed;
-    width: 100vw;
+    width: 100%;
     top: 0;
     height: 50rem;
     display: flex;
@@ -277,6 +277,7 @@ async function getCollectMusic() {
   }
 
   .my-collect {
+    touch-action: pan-y;
     margin-top: 50rem;
     color: rgba(88, 88, 96);
     position: relative;
@@ -422,7 +423,7 @@ async function getCollectMusic() {
       box-sizing: border-box;
       position: fixed;
       bottom: 0;
-      width: 100vw;
+      width: 100%;
       color: white;
       background: rgba(56, 59, 68);
 
@@ -470,7 +471,7 @@ async function getCollectMusic() {
   .my-collect-dialog {
     position: fixed;
     z-index: 11;
-    width: 100vw;
+    width: 100%;
     height: calc(var(--vh, 1vh) * 100);
     top: 0;
     background: rgb(136, 132, 133);
@@ -480,7 +481,7 @@ async function getCollectMusic() {
       font-size: 16rem;
       position: fixed;
       top: 0;
-      width: 100vw;
+      width: 100%;
       padding: var(--page-padding);
       box-sizing: border-box;
       height: 50rem;
diff --git a/src/pages/me/collect/MusicCollect.vue b/src/pages/me/collect/MusicCollect.vue
index ec9b876..f34667b 100644
--- a/src/pages/me/collect/MusicCollect.vue
+++ b/src/pages/me/collect/MusicCollect.vue
@@ -251,7 +251,7 @@ function stopPlay() {
   .float-play-music {
     position: fixed;
     bottom: 0;
-    width: 100vw;
+    width: 100%;
     background: var(--main-bg);
     display: flex;
     align-items: center;
@@ -267,7 +267,7 @@ function stopPlay() {
     }
 
     .music-wrapper {
-      width: 100vw;
+      width: 100%;
       border-top: 1px solid #414141;
       padding: 10rem 15rem;
       display: flex;
diff --git a/src/pages/me/components/CollectMusic.vue b/src/pages/me/components/CollectMusic.vue
index e47a13a..0c26681 100644
--- a/src/pages/me/components/CollectMusic.vue
+++ b/src/pages/me/components/CollectMusic.vue
@@ -168,7 +168,7 @@ export default {
 </script>
 <style scoped lang="less">
 #CollectMusic {
-  //width: 100vw;
+  //width: 100%;
   //height: calc(var(--vh, 1vh) * 100);
   position: fixed;
   left: 0;
@@ -187,7 +187,7 @@ export default {
 
   .music-list-header {
     position: fixed;
-    width: 100vw;
+    width: 100%;
     background: @bg-color;
     box-sizing: border-box;
     border-bottom: 1px solid #2a2828;
diff --git a/src/pages/me/components/GuessMusic.vue b/src/pages/me/components/GuessMusic.vue
index cf98ad0..aef4e4c 100644
--- a/src/pages/me/components/GuessMusic.vue
+++ b/src/pages/me/components/GuessMusic.vue
@@ -151,7 +151,7 @@ export default {
 </script>
 <style scoped lang="less">
 #GuessMusic {
-  //width: 100vw;
+  //width: 100%;
   //height: calc(var(--vh, 1vh) * 100);
   position: fixed;
   left: 0;
@@ -170,7 +170,7 @@ export default {
 
   .music-list-header {
     position: fixed;
-    width: 100vw;
+    width: 100%;
     background: @bg-color;
     box-sizing: border-box;
     border-bottom: 1px solid #2a2828;
diff --git a/src/pages/me/userinfo/EditUserInfo.vue b/src/pages/me/userinfo/EditUserInfo.vue
index f67777e..d8972ff 100644
--- a/src/pages/me/userinfo/EditUserInfo.vue
+++ b/src/pages/me/userinfo/EditUserInfo.vue
@@ -223,8 +223,8 @@ function showBirthdayDialog() {
   justify-content: center;
 
   .resource {
-    width: 100vw;
-    max-height: 100vw;
+    width: 100%;
+    max-height: %;
   }
 
   .download {
diff --git a/src/pages/other/VideoDetail.vue b/src/pages/other/VideoDetail.vue
index 1732985..ba5fa21 100644
--- a/src/pages/other/VideoDetail.vue
+++ b/src/pages/other/VideoDetail.vue
@@ -222,7 +222,7 @@ function closeComments() {
 function dislike() {
   // listRef.value.dislike(state.list[1])
   // state.list[state.index] = state.list[1]
-  // Utils.$notice('操作成功，将减少此类视频的推荐')
+  // _notice('操作成功，将减少此类视频的推荐')
 }
 </script>
 
diff --git a/src/pages/people/FindAcquaintance.vue b/src/pages/people/FindAcquaintance.vue
index 8331b36..139ebc3 100644
--- a/src/pages/people/FindAcquaintance.vue
+++ b/src/pages/people/FindAcquaintance.vue
@@ -475,7 +475,7 @@ function handleClick() {
     left: 50%;
     top: 50%;
     transform: translate3d(-50%, -50%, 0);
-    width: 80vw;
+    width: 80%;
     color: black;
     background: white;
     box-sizing: border-box;
diff --git a/src/pages/people/Scan.vue b/src/pages/people/Scan.vue
index fe38727..f61a6fb 100644
--- a/src/pages/people/Scan.vue
+++ b/src/pages/people/Scan.vue
@@ -53,7 +53,7 @@ defineOptions({
     bottom: 60rem;
     display: flex;
     justify-content: space-between;
-    width: 80vw;
+    width: 80%;
     left: 10vw;
 
     .option {
diff --git a/src/pages/people/components/Peoples.vue b/src/pages/people/components/Peoples.vue
index 2808134..5132549 100644
--- a/src/pages/people/components/Peoples.vue
+++ b/src/pages/people/components/Peoples.vue
@@ -33,6 +33,7 @@
 <script>
 import People from './People'
 import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
+import { _notice } from '@/utils'
 
 export default {
   name: 'Peoples',
@@ -75,7 +76,7 @@ export default {
   created() {},
   methods: {
     remove(index) {
-      this.$notice('将不会再为你推荐该用户')
+      _notice('将不会再为你推荐该用户')
       this.localList.splice(index, 1)
     },
     follow(index) {
@@ -125,7 +126,7 @@ export default {
         '确认后，将不再为你推荐对方的作品，你可以在对方主页随时恢复。',
         'gray',
         () => {
-          this.$notice('设置成功')
+          _notice('设置成功')
         },
         () => {},
         '不看 TA'
diff --git a/src/pages/shop/Shop.vue b/src/pages/shop/Shop.vue
index 1126e58..abbd7dd 100644
--- a/src/pages/shop/Shop.vue
+++ b/src/pages/shop/Shop.vue
@@ -18,27 +18,27 @@
         <div class="top-card">
           <div class="card">
             <div class="options">
-              <div class="option" @click="$no">
+              <div class="option" @click="_no">
                 <Icon icon="lets-icons:order-light" />
                 <div>我的订单</div>
               </div>
-              <div class="option" @click="$no">
+              <div class="option" @click="_no">
                 <Icon icon="material-symbols-light:charging-station-outline" />
                 <div>手机充值</div>
               </div>
-              <div class="option" @click="$no">
+              <div class="option" @click="_no">
                 <Icon icon="system-uicons:message" />
                 <div>购物消息</div>
               </div>
-              <div class="option" @click="$no">
+              <div class="option" @click="_no">
                 <Icon icon="fluent:location-16-regular" />
                 <div>小时达</div>
               </div>
-              <div class="option" @click="$no">
+              <div class="option" @click="_no">
                 <Icon icon="dashicons:money-alt" />
                 <div>退款/售后</div>
               </div>
-              <div class="option" @click="$no">
+              <div class="option" @click="_no">
                 <Icon icon="icon-park-outline:clothes-turtleneck" />
                 <div>潮流服饰</div>
               </div>
@@ -114,7 +114,7 @@
 
 <script setup lang="tsx">
 import { useNav } from '@/utils/hooks/useNav'
-import { $no, _checkImgUrl } from '@/utils'
+import { _checkImgUrl, _no } from '@/utils'
 import ScrollList from '@/components/ScrollList.vue'
 import { recommendedShop } from '@/api/user'
 import WaterfallList from '@/components/WaterfallList.vue'
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
index 8e16888..0b67653 100644
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@@ -24,66 +24,6 @@ const Utils = {
     const parent = document.querySelector('.dialog-ctn')
     parent.remove()
   },
-  $showSelectDialog(sexList, cb) {
-    const remove = () => {
-      const parent = document.querySelector('.dialog-ctn')
-      parent.classList.replace('fade-in', 'fade-out')
-      setTimeout(() => {
-        parent.remove()
-      }, 300)
-    }
-    const tempCb = (e) => {
-      remove()
-      cb(e)
-    }
-    const app = Vue.createApp({
-      render() {
-        return <SelectDialog onCancel={remove} list={sexList} onOk={tempCb} />
-      }
-    })
-    const parent = document.createElement('div')
-    parent.classList.add(...['dialog-ctn', 'fade-in'])
-    document.body.append(parent)
-    app.mount(parent)
-  },
-  $showSimpleConfirmDialog(title, okCb, cancelCb, okText, cancelText) {
-    if (!cancelCb) {
-      cancelCb = () => {}
-    }
-    const remove = () => {
-      const parent = document.querySelector('.dialog-ctn')
-      parent.classList.replace('fade-in', 'fade-out')
-      setTimeout(() => {
-        parent.remove()
-      }, 300)
-    }
-    const tempOkCb = (e) => {
-      remove()
-      okCb(e)
-    }
-    const tempCancelCb = (e) => {
-      remove()
-      cancelCb(e)
-    }
-    const app = Vue.createApp({
-      render() {
-        return (
-          <SimpleConfirmDialog
-            onCancel={tempCancelCb}
-            onDismiss={remove}
-            title={title}
-            okText={okText}
-            cancelText={cancelText}
-            onOk={tempOkCb}
-          />
-        )
-      }
-    })
-    const parent = document.createElement('div')
-    parent.classList.add(...['dialog-ctn', 'fade-in'])
-    document.body.append(parent)
-    app.mount(parent)
-  },
   $showConfirmDialog(
     title,
     subtitle,
@@ -171,9 +111,6 @@ const Utils = {
       document.body.removeChild(div)
     }, 1000)
   },
-  $no() {
-    this.$notice('未实现')
-  },
   $back() {
     this.$router.back()
     // window.history.back()
@@ -370,14 +307,6 @@ export function _dateFormat(val, type): string {
   }
 }
 
-export function $no() {
-  Utils.$no()
-}
-
-export function $notice(val) {
-  Utils.$notice(val)
-}
-
 export function _time(time) {
   if (String(time).length === 10) {
     time = time * 1000
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 26afe3d..3f0d888 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,6 +1,6 @@
 import axios, { type AxiosError, type AxiosRequestConfig, type AxiosResponse } from 'axios'
 import config from '@/config'
-import globalMethods from './index'
+import { _notice } from './index'
 
 export const axiosInstance = axios.create({
   baseURL: config.baseUrl,
@@ -34,7 +34,7 @@ axiosInstance.interceptors.response.use(
     const { data } = response
     // console.log(response)
     if (data === undefined || data === null || data === '') {
-      globalMethods.$notice('请求失败，请稍后重试！')
+      _notice('请求失败，请稍后重试！')
       return { success: false, code: 500, data: [] }
     } else if (typeof data === 'string') {
       return { success: true, code: 200, data }
@@ -55,7 +55,7 @@ axiosInstance.interceptors.response.use(
           data.success = true
         }
         if (resCode !== 200) {
-          globalMethods.$notice(response.data.message || '请求失败，请稍后重试！')
+          _notice(response.data.message || '请求失败，请稍后重试！')
         } else {
           data.success = true
         }
@@ -71,19 +71,19 @@ axiosInstance.interceptors.response.use(
     // console.log(error.response)
     // console.log(error.response.status)
     if (error.response === undefined) {
-      globalMethods.$notice('服务器响应超时')
+      _notice('服务器响应超时')
       return { success: false, code: 500, msg: '服务器响应超时', data: [] }
     }
     if (error.response.status >= 500) {
-      globalMethods.$notice('服务器出现错误')
+      _notice('服务器出现错误')
       return { success: false, code: 500, msg: '服务器出现错误', data: [] }
     }
     if (error.response.status === 404) {
-      globalMethods.$notice('接口不存在')
+      _notice('接口不存在')
       return { success: false, code: 404, msg: '接口不存在', data: [] }
     }
     if (error.response.status === 400) {
-      globalMethods.$notice('接口报错')
+      _notice('接口报错')
       return { success: false, code: 400, msg: '接口报错', data: [] }
     }
     if (error.response.status === 401) {
@@ -91,7 +91,7 @@ axiosInstance.interceptors.response.use(
     } else {
       const data: any = error.response.data
       if (data === null || data === undefined) {
-        globalMethods.$notice('请求失败，请稍后重试！')
+        _notice('请求失败，请稍后重试！')
         return { success: true, code: 200, data: [] }
       } else {
         const resCode = data.code
@@ -99,7 +99,7 @@ axiosInstance.interceptors.response.use(
           data.data = { ...data }
         }
         if (resCode && typeof resCode == 'number' && resCode !== 200) {
-          globalMethods.$notice('请求失败，请稍后重试！')
+          _notice('请求失败，请稍后重试！')
         } else {
           data.code = 200
           data.success = true

From 85a5fefdf2bf36ecb55ab82fcf21996b942c7b98 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 23 Apr 2024 23:46:18 +0800
Subject: [PATCH 3/3] refactor: optimize the code

---
 src/assets/data/posts6.json                   | 136 ++-----
 src/components/Back.vue                       |   4 +-
 src/components/BaseFooter.vue                 |   3 +
 src/components/Share.vue                      |  11 +-
 src/components/UserPanel.vue                  |  23 +-
 src/components/dialog/FromBottomDialog.vue    |   5 +-
 src/components/slide/BVideo.vue               |  35 +-
 src/components/slide/Indicator.vue            |  19 +-
 src/components/slide/IndicatorLight.vue       |  21 +-
 src/components/slide/ItemToolbar.vue          |  16 +-
 src/components/slide/SlideHorizontal.vue      |  12 +-
 src/components/slide/SlideRowList.vue         |  41 ++-
 src/components/slide/SlideVertical.vue        |   6 +-
 .../slide/SlideVerticalInfinite.vue           |   4 +-
 src/pages/home/LivePage.vue                   |   6 +-
 src/pages/home/components/IndicatorHome.vue   |  23 +-
 src/pages/home/components/PlayFeedback.vue    |   8 +-
 src/pages/home/components/ShareTo.vue         |  13 +-
 src/pages/home/components/ShareToFriend.vue   |  12 +-
 src/pages/home/components/VideoShare.vue      |  23 +-
 src/pages/home/slide/Community.vue            |   4 +-
 src/pages/home/slide/LongVideo.vue            |   4 +-
 src/pages/home/slide/Slide0.vue               |   6 +-
 src/pages/home/slide/Slide2.vue               |  12 +-
 src/pages/home/slide/SlideList.vue            |   4 +-
 src/pages/login/OtherLogin.vue                |   2 +-
 src/pages/login/RetrievePassword.vue          |  11 +-
 src/pages/me/Me.less                          |   3 +-
 src/pages/me/Me.vue                           |  11 +-
 src/pages/me/components/SlideItemMusic.vue    |  11 +-
 src/pages/other/AlbumDetail.vue               |   4 +-
 src/pages/people/Scan.vue                     |   5 +-
 src/pages/people/components/People.vue        |   6 +-
 src/pages/people/components/Peoples.vue       |   4 +-
 src/utils/dom.ts                              |   6 +-
 src/utils/index.tsx                           | 346 ++++--------------
 src/utils/mixin.ts                            |   4 -
 src/utils/slide.ts                            |   9 +-
 38 files changed, 316 insertions(+), 557 deletions(-)

diff --git a/src/assets/data/posts6.json b/src/assets/data/posts6.json
index b50c3d8..e72a490 100644
--- a/src/assets/data/posts6.json
+++ b/src/assets/data/posts6.json
@@ -54,9 +54,7 @@
       },
       "cover": {
         "uri": "tos-cn-i-0813/oYVDeaFZyENAAAAKXCYfxD6hI4zADNAURgtySl",
-        "url_list": [
-          "jwWCPZVTIA4IKM-8WipLF.png"
-        ],
+        "url_list": ["jwWCPZVTIA4IKM-8WipLF.png"],
         "width": 720,
         "height": 720
       },
@@ -227,15 +225,11 @@
       "cover_url": [
         {
           "uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5",
-          "url_list": [
-            "AiIEMkIA7Cb3s5c4e7e6g.png"
-          ]
+          "url_list": ["AiIEMkIA7Cb3s5c4e7e6g.png"]
         },
         {
           "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "aHzLr77vcdBMUil15rXBa.png"
-          ]
+          "url_list": ["aHzLr77vcdBMUil15rXBa.png"]
         }
       ],
       "district": "",
@@ -258,9 +252,7 @@
         "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
         "share_image_url": {
           "uri": "tos-cn-p-0015/oge0HBDnlBbbZHjeDc4WtAI7AA0xb88gd9Ipjc",
-          "url_list": [
-            "5jTb5yW0_50o6UaLR5hvo.png"
-          ]
+          "url_list": ["5jTb5yW0_50o6UaLR5hvo.png"]
         },
         "share_qrcode_url": {
           "uri": "216a001823018b74cedd",
@@ -283,15 +275,11 @@
       "white_cover_url": [
         {
           "uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5",
-          "url_list": [
-            "N_SVO2HXIpaY04hgsXYDI.png"
-          ]
+          "url_list": ["N_SVO2HXIpaY04hgsXYDI.png"]
         },
         {
           "uri": "318f1000413827e122102",
-          "url_list": [
-            "Sfz4PgDDqyNYHkFyXub5g.png"
-          ]
+          "url_list": ["Sfz4PgDDqyNYHkFyXub5g.png"]
         }
       ]
     }
@@ -351,9 +339,7 @@
       },
       "cover": {
         "uri": "tos-cn-p-0015/254cc2f4142c490697a3cedd195283ab_1659776667",
-        "url_list": [
-          "FL8H8KGmqTyGhOAFLQp14.png"
-        ],
+        "url_list": ["FL8H8KGmqTyGhOAFLQp14.png"],
         "width": 720,
         "height": 720
       },
@@ -577,15 +563,11 @@
       "cover_url": [
         {
           "uri": "douyin-user-image-file/cfea7d18adf05c6d1990071756b7445d",
-          "url_list": [
-            "aTnyHICCi-NMudWfVELeO.png"
-          ]
+          "url_list": ["aTnyHICCi-NMudWfVELeO.png"]
         },
         {
           "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "IKCeBwXjtHdGf9WP9hfAc.png"
-          ]
+          "url_list": ["IKCeBwXjtHdGf9WP9hfAc.png"]
         }
       ],
       "district": null,
@@ -608,9 +590,7 @@
         "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
         "share_image_url": {
           "uri": "tos-cn-p-0015/oQf8CQFQnkRsZBmxgDb0AWAlQeb99lAAmEu9Kx",
-          "url_list": [
-            "7A-WGbNrabkqe51pdxTc6.png"
-          ]
+          "url_list": ["7A-WGbNrabkqe51pdxTc6.png"]
         },
         "share_qrcode_url": {
           "uri": "2e4fa00064dccedc33dae",
@@ -633,15 +613,11 @@
       "white_cover_url": [
         {
           "uri": "douyin-user-image-file/cfea7d18adf05c6d1990071756b7445d",
-          "url_list": [
-            "h7oEIs5JYXJ48lTJCPWTH.png"
-          ]
+          "url_list": ["h7oEIs5JYXJ48lTJCPWTH.png"]
         },
         {
           "uri": "318f1000413827e122102",
-          "url_list": [
-            "TX0D9ExiN7FRaAzaiBeu7.png"
-          ]
+          "url_list": ["TX0D9ExiN7FRaAzaiBeu7.png"]
         }
       ]
     }
@@ -701,9 +677,7 @@
       },
       "cover": {
         "uri": "tos-cn-p-0015/o4zA2HNYFFXyyfbAnEDBAkNQhmIATEAgetYaSq",
-        "url_list": [
-          "sZtkmLJnK30efnC-WgFMn.png"
-        ],
+        "url_list": ["sZtkmLJnK30efnC-WgFMn.png"],
         "width": 720,
         "height": 720
       },
@@ -824,15 +798,11 @@
       "cover_url": [
         {
           "uri": "douyin-user-image-file/aff26fd8f33d7f743513e8f269e924cb",
-          "url_list": [
-            "T1II_ZahdXvCzRrth6Csg.png"
-          ]
+          "url_list": ["T1II_ZahdXvCzRrth6Csg.png"]
         },
         {
           "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "jAGv0q0ZTObOtfdCP9FcU.png"
-          ]
+          "url_list": ["jAGv0q0ZTObOtfdCP9FcU.png"]
         }
       ],
       "district": "",
@@ -855,9 +825,7 @@
         "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
         "share_image_url": {
           "uri": "tos-cn-p-0015/owr8DIVInO9quB6lgDbqAlBVeenTnlAAITj9Ey",
-          "url_list": [
-            "fV_NMEobSXS4XFzzWrGjJ.png"
-          ]
+          "url_list": ["fV_NMEobSXS4XFzzWrGjJ.png"]
         },
         "share_qrcode_url": {
           "uri": "53070029f462e2e70d94",
@@ -880,15 +848,11 @@
       "white_cover_url": [
         {
           "uri": "douyin-user-image-file/aff26fd8f33d7f743513e8f269e924cb",
-          "url_list": [
-            "BGNqXhXX9rB0RZe2-Gh3g.png"
-          ]
+          "url_list": ["BGNqXhXX9rB0RZe2-Gh3g.png"]
         },
         {
           "uri": "318f1000413827e122102",
-          "url_list": [
-            "8bHhp2JU-9tMF9irmzEZj.png"
-          ]
+          "url_list": ["8bHhp2JU-9tMF9irmzEZj.png"]
         }
       ]
     }
@@ -948,9 +912,7 @@
       },
       "cover": {
         "uri": "tos-cn-p-0015/9975a3ff7baf4c4391da36112920574a",
-        "url_list": [
-          "zE-I6gDNlO7OyVRN1Rl7T.png"
-        ],
+        "url_list": ["zE-I6gDNlO7OyVRN1Rl7T.png"],
         "width": 720,
         "height": 720
       },
@@ -1086,15 +1048,11 @@
       "cover_url": [
         {
           "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
-          "url_list": [
-            "2eFwyUS9yN8r7wJCXHUvb.png"
-          ]
+          "url_list": ["2eFwyUS9yN8r7wJCXHUvb.png"]
         },
         {
           "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "0yrHnPaNjbwpkaPNo7s4x.png"
-          ]
+          "url_list": ["0yrHnPaNjbwpkaPNo7s4x.png"]
         }
       ],
       "district": "",
@@ -1117,9 +1075,7 @@
         "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
         "share_image_url": {
           "uri": "tos-cn-p-0015/oceLdA0zALBI8CoyKiCfhU69IBlNq4RsbgzSAu",
-          "url_list": [
-            "qnOWDz5lUek2B1I5MPHa-.png"
-          ]
+          "url_list": ["qnOWDz5lUek2B1I5MPHa-.png"]
         },
         "share_qrcode_url": {
           "uri": "216a0023aa35c71d4381",
@@ -1142,15 +1098,11 @@
       "white_cover_url": [
         {
           "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
-          "url_list": [
-            "ejF34o5i413UeROTNoYFI.png"
-          ]
+          "url_list": ["ejF34o5i413UeROTNoYFI.png"]
         },
         {
           "uri": "318f1000413827e122102",
-          "url_list": [
-            "x9tjnPkC-OscQ480dZZAR.png"
-          ]
+          "url_list": ["x9tjnPkC-OscQ480dZZAR.png"]
         }
       ]
     }
@@ -1210,9 +1162,7 @@
       },
       "cover": {
         "uri": "tos-cn-i-0813/dec79ae450c643f59e7ac007bffac735",
-        "url_list": [
-          "B6zqJFdOWWsbZqYtqCxbM.png"
-        ],
+        "url_list": ["B6zqJFdOWWsbZqYtqCxbM.png"],
         "width": 720,
         "height": 720
       },
@@ -1369,9 +1319,7 @@
       "cover_url": [
         {
           "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "2uHX3U05JE9hy7W6loPDK.png"
-          ]
+          "url_list": ["2uHX3U05JE9hy7W6loPDK.png"]
         }
       ],
       "district": null,
@@ -1393,9 +1341,7 @@
         "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
         "share_image_url": {
           "uri": "tos-cn-p-0015/b01c417ab84c48a18151df6f4874c517_1651306670",
-          "url_list": [
-            "noPw6HHZHlcIQTKhc-Sr4.png"
-          ]
+          "url_list": ["noPw6HHZHlcIQTKhc-Sr4.png"]
         },
         "share_qrcode_url": {
           "uri": "330b002fd4ab5b64f36e",
@@ -1418,9 +1364,7 @@
       "white_cover_url": [
         {
           "uri": "318f1000413827e122102",
-          "url_list": [
-            "wqKmvIFifx1re2KR2VAXF.png"
-          ]
+          "url_list": ["wqKmvIFifx1re2KR2VAXF.png"]
         }
       ]
     }
@@ -1480,9 +1424,7 @@
       },
       "cover": {
         "uri": "tos-cn-p-0015/9c5820418cbb49a9afac60b51bf63ee5_1667300317",
-        "url_list": [
-          "VYvXAcOWFGKsZg9TCDqlW.png"
-        ],
+        "url_list": ["VYvXAcOWFGKsZg9TCDqlW.png"],
         "width": 720,
         "height": 720
       },
@@ -1634,15 +1576,11 @@
       "cover_url": [
         {
           "uri": "douyin-user-image-file/215a5e084e4ef0fac70d54b5b6794760",
-          "url_list": [
-            "ugFWsFLtl37YDmOhdWVPP.png"
-          ]
+          "url_list": ["ugFWsFLtl37YDmOhdWVPP.png"]
         },
         {
           "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "6BjX7F0tH7NR_Ivj97YH_.png"
-          ]
+          "url_list": ["6BjX7F0tH7NR_Ivj97YH_.png"]
         }
       ],
       "district": "",
@@ -1665,9 +1603,7 @@
         "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
         "share_image_url": {
           "uri": "tos-cn-p-0015/oMinDrDQQBALaq2bjjeaY3Pv4efApBAInCI7BR",
-          "url_list": [
-            "KjoYiM7SWjrqov4pC-xMm.png"
-          ]
+          "url_list": ["KjoYiM7SWjrqov4pC-xMm.png"]
         },
         "share_qrcode_url": {
           "uri": "f9be000540dadbec288f",
@@ -1690,15 +1626,11 @@
       "white_cover_url": [
         {
           "uri": "douyin-user-image-file/215a5e084e4ef0fac70d54b5b6794760",
-          "url_list": [
-            "dGAmnrwmsaQBEpOli1dGm.png"
-          ]
+          "url_list": ["dGAmnrwmsaQBEpOli1dGm.png"]
         },
         {
           "uri": "318f1000413827e122102",
-          "url_list": [
-            "Nuc00o5h98o_IqhHv6uL0.png"
-          ]
+          "url_list": ["Nuc00o5h98o_IqhHv6uL0.png"]
         }
       ]
     }
diff --git a/src/components/Back.vue b/src/components/Back.vue
index dc755da..3a6975f 100644
--- a/src/components/Back.vue
+++ b/src/components/Back.vue
@@ -2,6 +2,8 @@
   <img class="close" ref="img" :src="src" />
 </template>
 <script>
+import { _css } from '@/utils/dom'
+
 export default {
   name: 'Back',
   props: {
@@ -32,7 +34,7 @@ export default {
     }
   },
   mounted() {
-    this.$setCss(
+    _css(
       this.$refs.img,
       'transform',
       `rotate(${this.direction === 'left' ? '0' : '180'}deg) scale(${this.scale})`
diff --git a/src/components/BaseFooter.vue b/src/components/BaseFooter.vue
index 50fce22..bd2f0b2 100644
--- a/src/components/BaseFooter.vue
+++ b/src/components/BaseFooter.vue
@@ -47,6 +47,9 @@ export default {
     bus.off(EVENT_KEY.EXIT_FULLSCREEN)
   },
   methods: {
+    $nav(path) {
+      this.$router.push(path)
+    },
     tab(index) {
       switch (index) {
         case 1:
diff --git a/src/components/Share.vue b/src/components/Share.vue
index dbac70d..4023878 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -25,7 +25,7 @@
           <img
             :style="item.select ? 'opacity: .5;' : ''"
             class="avatar"
-            :src="$imgPreview(item.avatar)"
+            :src="_checkImgUrl(item.avatar)"
             alt=""
           />
           <span>{{ item.name }}</span>
@@ -144,7 +144,7 @@
 import { mapState } from 'pinia'
 import FromBottomDialog from './dialog/FromBottomDialog'
 import { useBaseStore } from '@/store/pinia'
-import { _copy, _no, _notice } from '@/utils'
+import { _checkImgUrl, _copy, _hideLoading, _no, _notice, _showLoading, _sleep } from '@/utils'
 
 export default {
   name: 'Share',
@@ -196,12 +196,13 @@ export default {
     return {}
   },
   methods: {
+    _checkImgUrl,
     _no,
     async copyLink() {
       this.closeShare()
-      this.$showLoading()
-      await this.$sleep(500)
-      this.$hideLoading()
+      _showLoading()
+      await _sleep(500)
+      _hideLoading()
       _copy(this.item.share_info.share_link_desc + this.item.share_info.share_url)
       //TODO 抖音样式改了
       _notice('复制成功')
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 2840690..3a694df 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="UserPanel" @scroll="scroll" @dragstart="(e) => Utils.$stopPropagation(e)" ref="page">
+  <div id="UserPanel" @scroll="scroll" @dragstart="(e) => _stopPropagation(e)" ref="page">
     <div ref="float" class="float" :class="state.floatFixed ? 'fixed' : ''">
       <div class="left">
         <Icon @click="emit('back')" class="icon" icon="eva:arrow-ios-back-fill" />
@@ -76,7 +76,7 @@
               <img
                 src="@/assets/img/icon/me/copy.png"
                 alt=""
-                @click.stop="Utils.copy(_getUserDouyinId(props.currentItem))"
+                @click.stop="_copy(_getUserDouyinId(props.currentItem))"
               />
             </div>
           </div>
@@ -85,20 +85,16 @@
       <div class="info">
         <div class="heat">
           <div class="text">
-            <span class="num">{{
-              Utils.formatNumber(props.currentItem.author.total_favorited)
-            }}</span>
+            <span class="num">{{ _formatNumber(props.currentItem.author.total_favorited) }}</span>
             <span>获赞</span>
           </div>
           <div class="text">
-            <span class="num">{{
-              Utils.formatNumber(props.currentItem.author.following_count)
-            }}</span>
+            <span class="num">{{ _formatNumber(props.currentItem.author.following_count) }}</span>
             <span>关注</span>
           </div>
           <div class="text">
             <span class="num">{{
-              Utils.formatNumber(props.currentItem.author.mplatform_followers_count)
+              _formatNumber(props.currentItem.author.mplatform_followers_count)
             }}</span>
             <span>粉丝</span>
           </div>
@@ -234,7 +230,14 @@
 
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue'
-import Utils, { _checkImgUrl, _getUserDouyinId, _no } from '@/utils'
+import {
+  _checkImgUrl,
+  _copy,
+  _formatNumber,
+  _getUserDouyinId,
+  _no,
+  _stopPropagation
+} from '@/utils'
 import { useNav } from '@/utils/hooks/useNav'
 import Posters from '@/components/Posters.vue'
 import { DefaultUser } from '@/utils/const_var'
diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index ecfba75..42da25c 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -30,6 +30,7 @@
 <script>
 import Dom, { _css } from '../../utils/dom'
 import bus, { EVENT_KEY } from '@/utils/bus'
+import { _stopPropagation } from '@/utils'
 
 export default {
   name: 'FromBottomDialog',
@@ -73,6 +74,7 @@ export default {
   watch: {
     modelValue(newVal) {
       let page = document.getElementById(this.pageId)
+      if (!page) return
       if (newVal) {
         this.pagePosition = _css(page, 'position')
         page.style.position = 'absolute'
@@ -83,12 +85,11 @@ export default {
         let maskTemplate = `<div class="Mask fade-in ${this.maskMode}"></div>`
         let mask = new Dom().create(maskTemplate)
         mask.on('click', (e) => {
-          this.$stopPropagation(e)
+          _stopPropagation(e)
           this.hide(false)
         })
         page.appendChild(mask.els[0])
       } else {
-        let page = document.getElementById(this.pageId)
         page.style.position = this.pagePosition || 'fixed'
         document.body.style.position = 'static'
         document.documentElement.scrollTop = this.scroll
diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue
index 38a8cb7..3b991a6 100644
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@@ -62,8 +62,8 @@
           @touchend="touchend"
         >
           <div class="time" v-if="isMove">
-            <span class="currentTime">{{ LUtils.$duration(currentTime) }}</span>
-            <span class="duration"> / {{ LUtils.$duration(duration) }}</span>
+            <span class="currentTime">{{ _duration(currentTime) }}</span>
+            <span class="duration"> / {{ _duration(duration) }}</span>
           </div>
           <template v-if="duration > 15 || isMove || !isPlaying">
             <div class="bg"></div>
@@ -77,7 +77,7 @@
 </template>
 
 <script>
-import Utils, { _checkImgUrl } from '../../utils'
+import { _checkImgUrl, _duration, _stopPropagation } from '@/utils'
 import Loading from '../Loading'
 import ItemToolbar from './ItemToolbar'
 import ItemDesc from './ItemDesc'
@@ -85,6 +85,7 @@ import bus, { EVENT_KEY } from '../../utils/bus'
 import { SlideItemPlayStatus } from '@/utils/const_var'
 import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
+import { _css } from '@/utils/dom'
 
 export default {
   name: 'BVideo',
@@ -173,8 +174,7 @@ export default {
       localItem: this.item,
       progressBarRect: {},
       videoScreenHeight: 0,
-      commentVisible: false,
-      LUtils: Utils
+      commentVisible: false
     }
   },
   mounted() {
@@ -258,6 +258,7 @@ export default {
     bus.off(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType)
   },
   methods: {
+    _duration,
     _checkImgUrl,
     onOpenSubType() {
       this.commentVisible = true
@@ -267,33 +268,33 @@ export default {
     },
     onDialogMove({ tag, e }) {
       if (this.commentVisible && tag === 'comment') {
-        Utils.$setCss(this.$refs.video, 'transition-duration', `0ms`)
-        Utils.$setCss(this.$refs.video, 'height', `calc(var(--vh, 1vh) * 30 + ${e}px)`)
+        _css(this.$refs.video, 'transition-duration', `0ms`)
+        _css(this.$refs.video, 'height', `calc(var(--vh, 1vh) * 30 + ${e}px)`)
       }
     },
     onDialogEnd({ tag, isClose }) {
       if (this.commentVisible && tag === 'comment') {
         console.log('isClose', isClose)
-        Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
+        _css(this.$refs.video, 'transition-duration', `300ms`)
         if (isClose) {
           this.commentVisible = false
-          Utils.$setCss(this.$refs.video, 'height', '100%')
+          _css(this.$refs.video, 'height', '100%')
         } else {
-          Utils.$setCss(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
+          _css(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
         }
       }
     },
     onOpenComments(id) {
       if (id === this.item.id) {
-        Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
-        Utils.$setCss(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
+        _css(this.$refs.video, 'transition-duration', `300ms`)
+        _css(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
         this.commentVisible = true
       }
     },
     onCloseComments() {
       if (this.commentVisible) {
-        Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
-        Utils.$setCss(this.$refs.video, 'height', '100%')
+        _css(this.$refs.video, 'transition-duration', `300ms`)
+        _css(this.$refs.video, 'height', '100%')
         this.commentVisible = false
       }
     },
@@ -340,14 +341,14 @@ export default {
       this.$refs.video.pause()
     },
     touchstart(e) {
-      Utils.$stopPropagation(e)
+      _stopPropagation(e)
       this.start.x = e.touches[0].pageX
       this.last.x = this.playX
       this.last.time = this.currentTime
     },
     touchmove(e) {
       // console.log('move',e)
-      Utils.$stopPropagation(e)
+      _stopPropagation(e)
       this.isMove = true
       this.pause()
       let dx = e.touches[0].pageX - this.start.x
@@ -358,7 +359,7 @@ export default {
     },
     touchend(e) {
       // console.log('end', e)
-      Utils.$stopPropagation(e)
+      _stopPropagation(e)
       if (this.isPlaying) return
       setTimeout(() => (this.isMove = false), 1000)
       this.$refs.video.currentTime = this.currentTime
diff --git a/src/components/slide/Indicator.vue b/src/components/slide/Indicator.vue
index c91c21b..8855276 100644
--- a/src/components/slide/Indicator.vue
+++ b/src/components/slide/Indicator.vue
@@ -1,6 +1,7 @@
 <script lang="jsx">
 import bus from '../../utils/bus'
 import { useBaseStore } from '@/store/pinia'
+import { _css } from '@/utils/dom'
 
 export default {
   name: 'Indicator',
@@ -91,8 +92,8 @@ export default {
       this.currentSlideItemIndex = index
       this.$attrs['onUpdate:activeIndex'] &&
         this.$emit('update:active-index', this.currentSlideItemIndex)
-      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-      this.$setCss(
+      _css(this.indicatorRef, 'transition-duration', `300ms`)
+      _css(
         this.indicatorRef,
         'left',
         this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
@@ -103,7 +104,7 @@ export default {
       this.indicatorRef = this.$refs.indicator
       for (let i = 0; i < tabs.children.length; i++) {
         let item = tabs.children[i]
-        this.tabWidth = this.$getCss(item, 'width')
+        this.tabWidth = _css(item, 'width')
         this.tabIndicatorRelationActiveIndexLefts.push(
           item.getBoundingClientRect().x -
             tabs.children[0].getBoundingClientRect().x +
@@ -112,15 +113,15 @@ export default {
       }
       this.indicatorSpace =
         this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
-      this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
-      this.$setCss(
+      _css(this.indicatorRef, 'transition-duration', `0ms`)
+      _css(
         this.indicatorRef,
         'left',
         this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
       )
     },
     move(e) {
-      this.$setCss(
+      _css(
         this.indicatorRef,
         'left',
         this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
@@ -131,14 +132,14 @@ export default {
     end(index) {
       // console.log(index)
       this.currentSlideItemIndex = index
-      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-      this.$setCss(
+      _css(this.indicatorRef, 'transition-duration', `300ms`)
+      _css(
         this.indicatorRef,
         'left',
         this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
       )
       setTimeout(() => {
-        this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
+        _css(this.indicatorRef, 'transition-duration', `0ms`)
       }, 300)
     }
   }
diff --git a/src/components/slide/IndicatorLight.vue b/src/components/slide/IndicatorLight.vue
index f8133cd..e718528 100644
--- a/src/components/slide/IndicatorLight.vue
+++ b/src/components/slide/IndicatorLight.vue
@@ -1,6 +1,7 @@
 <script lang="jsx">
 import bus from '../../utils/bus'
 import { useBaseStore } from '@/store/pinia'
+import { _css } from '@/utils/dom'
 
 export default {
   name: 'IndicatorLight',
@@ -85,8 +86,8 @@ export default {
       this.currentSlideItemIndex = index
       this.$attrs['onUpdate:activeIndex'] &&
         this.$emit('update:active-index', this.currentSlideItemIndex)
-      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-      this.$setCss(
+      _css(this.indicatorRef, 'transition-duration', `300ms`)
+      _css(
         this.indicatorRef,
         'left',
         this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
@@ -95,10 +96,10 @@ export default {
     initTabs() {
       let tabs = this.$refs.tabs
       this.indicatorRef = this.$refs.indicator
-      let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
+      let indicatorWidth = _css(this.indicatorRef, 'width')
       for (let i = 0; i < tabs.children.length; i++) {
         let item = tabs.children[i]
-        this.tabWidth = this.$getCss(item, 'width')
+        this.tabWidth = _css(item, 'width')
         this.tabIndicatorRelationActiveIndexLefts.push(
           item.getBoundingClientRect().x -
             tabs.children[0].getBoundingClientRect().x +
@@ -108,15 +109,15 @@ export default {
 
       this.indicatorSpace =
         this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
-      this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
-      this.$setCss(
+      _css(this.indicatorRef, 'transition-duration', `0ms`)
+      _css(
         this.indicatorRef,
         'left',
         this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
       )
     },
     move(e) {
-      this.$setCss(
+      _css(
         this.indicatorRef,
         'left',
         this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
@@ -127,14 +128,14 @@ export default {
     end(index) {
       // console.log(index)
       this.currentSlideItemIndex = index
-      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-      this.$setCss(
+      _css(this.indicatorRef, 'transition-duration', `300ms`)
+      _css(
         this.indicatorRef,
         'left',
         this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
       )
       setTimeout(() => {
-        this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
+        _css(this.indicatorRef, 'transition-duration', `0ms`)
       }, 300)
     }
   }
diff --git a/src/components/slide/ItemToolbar.vue b/src/components/slide/ItemToolbar.vue
index 7ed054f..28113af 100644
--- a/src/components/slide/ItemToolbar.vue
+++ b/src/components/slide/ItemToolbar.vue
@@ -1,6 +1,6 @@
 <script setup>
 import BaseMusic from '../BaseMusic'
-import Utils from '../../utils'
+import { _formatNumber, _updateItem } from '@/utils'
 import bus, { EVENT_KEY } from '@/utils/bus'
 import { Icon } from '@iconify/vue'
 
@@ -27,13 +27,13 @@ const props = defineProps({
 const emit = defineEmits(['update:item', 'goUserInfo', 'showComments', 'showShare', 'goMusic'])
 
 function loved() {
-  Utils.updateItem(props, 'isLoved', !props.item.isLoved, emit)
+  _updateItem(props, 'isLoved', !props.item.isLoved, emit)
 }
 
 function attention(e) {
   e.currentTarget.classList.add('attention')
   setTimeout(() => {
-    Utils.updateItem(props, 'isAttention', true, emit)
+    _updateItem(props, 'isAttention', true, emit)
   }, 1000)
 }
 
@@ -64,24 +64,24 @@ function showComments() {
         <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!props.item.isLoved" />
         <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="props.item.isLoved" />
       </div>
-      <span>{{ Utils.formatNumber(props.item.statistics.digg_count) }}</span>
+      <span>{{ _formatNumber(props.item.statistics.digg_count) }}</span>
     </div>
     <div class="message mb2r" @click.stop="showComments">
       <Icon icon="mage:message-dots-round-fill" class="icon" style="color: white" />
-      <span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span>
+      <span>{{ _formatNumber(props.item.statistics.comment_count) }}</span>
     </div>
     <!--TODO     -->
     <div
       class="message mb2r"
-      @click.stop="Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)"
+      @click.stop="_updateItem(props, 'isCollect', !props.item.isCollect, emit)"
     >
       <Icon v-if="props.item.isCollect" icon="ic:round-star" class="icon" style="color: yellow" />
       <Icon v-else icon="ic:round-star" class="icon" style="color: white" />
-      <span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span>
+      <span>{{ _formatNumber(props.item.statistics.comment_count) }}</span>
     </div>
     <div v-if="!props.isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
       <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image" />
-      <span>{{ Utils.formatNumber(props.item.statistics.share_count) }}</span>
+      <span>{{ _formatNumber(props.item.statistics.share_count) }}</span>
     </div>
     <div v-else class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
       <img src="../../assets/img/icon/menu-white.png" alt="" class="share-image" />
diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue
index f0e8310..f0671a2 100644
--- a/src/components/slide/SlideHorizontal.vue
+++ b/src/components/slide/SlideHorizontal.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
-import GM from '../../utils'
 import {
   getSlideOffset,
   slideInit,
-  slideTouchStart,
-  slideTouchMove,
   slideReset,
-  slideTouchEnd
+  slideTouchEnd,
+  slideTouchMove,
+  slideTouchStart
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
+import { _css } from '@/utils/dom'
 
 const props = defineProps({
   index: {
@@ -67,9 +67,9 @@ watch(
     if (state.localIndex !== newVal) {
       state.localIndex = newVal
       if (props.changeActiveIndexUseAnim) {
-        GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
+        _css(wrapperEl.value, 'transition-duration', `300ms`)
       }
-      GM.$setCss(
+      _css(
         wrapperEl.value,
         'transform',
         `translate3d(${getSlideOffset(state, wrapperEl.value)}px, 0, 0)`
diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue
index 27bd148..432c4ad 100644
--- a/src/components/slide/SlideRowList.vue
+++ b/src/components/slide/SlideRowList.vue
@@ -25,6 +25,8 @@
 <script>
 import bus from '../../utils/bus'
 import { useBaseStore } from '@/store/pinia'
+import { _css } from '@/utils/dom'
+import { _stopPropagation } from '@/utils'
 
 export default {
   name: 'BaseSlideList',
@@ -157,14 +159,14 @@ export default {
   methods: {
     changeIndex(init = false, index = null) {
       this.currentSlideItemIndex = index !== null ? index : this.activeIndex
-      !init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
-      this.$setCss(
+      !init && _css(this.slideList, 'transition-duration', `300ms`)
+      _css(
         this.slideList,
         'transform',
         `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`
       )
       if (this.isHome) {
-        this.$setCss(
+        _css(
           this.indicatorRef,
           'left',
           this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
@@ -178,7 +180,7 @@ export default {
       this.indicatorRef = this.$refs.indicator
       for (let i = 0; i < tabs.children.length; i++) {
         let item = tabs.children[i]
-        this.tabWidth = this.$getCss(item, 'width')
+        this.tabWidth = _css(item, 'width')
         //TODO 这里算得不对，两个字时正常，字一多就会出问题，修改参考IndicatorLight.vue
         this.tabIndicatorRelationActiveIndexLefts.push(
           item.getBoundingClientRect().x -
@@ -190,8 +192,8 @@ export default {
       this.indicatorSpace =
         this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
       if (this.isHome) {
-        this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-        this.$setCss(
+        _css(this.indicatorRef, 'transition-duration', `300ms`)
+        _css(
           this.indicatorRef,
           'left',
           this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
@@ -201,16 +203,16 @@ export default {
     async checkChildren() {
       this.slideList = this.$refs.slideList
       this.slideItems = this.slideList.children
-      this.wrapperWidth = this.$getCss(this.slideList, 'width')
-      this.wrapperHeight = this.$getCss(this.slideList, 'height')
+      this.wrapperWidth = _css(this.slideList, 'width')
+      this.wrapperHeight = _css(this.slideList, 'height')
       for (let i = 0; i < this.slideItems.length; i++) {
         let el = this.slideItems[i]
-        this.slideItemsWidths.push(this.$getCss(el, 'width'))
+        this.slideItemsWidths.push(_css(el, 'width'))
       }
     },
     touchStart(e) {
-      this.$setCss(this.slideList, 'transition-duration', `0ms`)
-      this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
+      _css(this.slideList, 'transition-duration', `0ms`)
+      this.isHome && _css(this.indicatorRef, 'transition-duration', `0ms`)
       this.toolbarStyleTransitionDuration = 0
 
       this.startLocationX = e.touches[0].pageX
@@ -218,7 +220,6 @@ export default {
       this.startTime = Date.now()
     },
     touchMove(e) {
-      //  this.$stopPropagation(e)
       if (!this.canMove) return
       this.moveXDistance = e.touches[0].pageX - this.startLocationX
       this.moveYDistance = e.touches[0].pageY - this.startLocationY
@@ -244,8 +245,8 @@ export default {
           x: { distance: this.moveXDistance, isDrawRight: this.isDrawRight }
         })
 
-        this.$stopPropagation(e)
-        this.$setCss(
+        _stopPropagation(e)
+        _css(
           this.slideList,
           'transform',
           `translate3d(${
@@ -256,7 +257,7 @@ export default {
         )
 
         this.isHome &&
-          this.$setCss(
+          _css(
             this.indicatorRef,
             'left',
             this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
@@ -278,8 +279,8 @@ export default {
         if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
         if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
 
-        this.$setCss(this.slideList, 'transition-duration', `300ms`)
-        this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
+        _css(this.slideList, 'transition-duration', `300ms`)
+        this.isHome && _css(this.indicatorRef, 'transition-duration', `300ms`)
         let endTime = Date.now()
         let gapTime = endTime - this.startTime
 
@@ -287,7 +288,7 @@ export default {
         // this.$stopPropagation(e)//todo 如果是嵌套竖状的slide，会出问题,会到moveYDistance停下，不会移到
         //this.getWidth(this.currentSlideItemIndex)位置，但是不禁示冒泡的话，又会出现划动过快，把父级也会移动。
         if (this.moveXDistance !== 0) {
-          this.$stopPropagation(e)
+          _stopPropagation(e)
         }
         if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
         if (Math.abs(this.moveXDistance) > this.wrapperWidth / 3) gapTime = 100
@@ -298,13 +299,13 @@ export default {
             this.currentSlideItemIndex -= 1
           }
         }
-        this.$setCss(
+        _css(
           this.slideList,
           'transform',
           `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`
         )
         if (this.isHome) {
-          this.$setCss(
+          _css(
             this.indicatorRef,
             'left',
             this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
diff --git a/src/components/slide/SlideVertical.vue b/src/components/slide/SlideVertical.vue
index acfef10..868765c 100644
--- a/src/components/slide/SlideVertical.vue
+++ b/src/components/slide/SlideVertical.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { onMounted, reactive, ref, watch } from 'vue'
-import GM from '../../utils'
 import {
   getSlideOffset,
   slideInit,
@@ -10,6 +9,7 @@ import {
   slideTouchStart
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
+import { _css } from '@/utils/dom'
 
 const props = defineProps({
   index: {
@@ -58,9 +58,9 @@ watch(
     if (state.localIndex !== newVal) {
       state.localIndex = newVal
       if (props.changeActiveIndexUseAnim) {
-        GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
+        _css(wrapperEl.value, 'transition-duration', `300ms`)
       }
-      GM.$setCss(
+      _css(
         wrapperEl.value,
         'transform',
         `translate3d(0,${getSlideOffset(state, wrapperEl.value)}px, 0)`
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue
index b51ad81..26ef929 100644
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@@ -1,6 +1,5 @@
 <script setup lang="tsx">
 import { createApp, onMounted, reactive, ref, render as vueRender, watch } from 'vue'
-import GM from '../../utils'
 import {
   getSlideOffset,
   slideInit,
@@ -171,7 +170,7 @@ function insertContent(list = props.list) {
     let el = getInsEl(item, start + index, start + index === state.localIndex)
     wrapperEl.value.appendChild(el)
   })
-  GM.$setCss(
+  _css(
     wrapperEl.value,
     'transform',
     `translate3d(0px,${getSlideOffset(state, wrapperEl.value)}px,  0px)`
@@ -281,7 +280,6 @@ function touchEnd(e) {
           wrapperEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {
             let index = Number(item.getAttribute('data-index'))
             if (index < state.localIndex - 2) {
-              console.log(2, appInsMap.get(Number(index)))
               appInsMap.get(index).unmount()
             }
             _css(item, 'top', (state.localIndex - 2) * state.wrapper.height)
diff --git a/src/pages/home/LivePage.vue b/src/pages/home/LivePage.vue
index f08fbe0..cfc8a9b 100644
--- a/src/pages/home/LivePage.vue
+++ b/src/pages/home/LivePage.vue
@@ -49,7 +49,7 @@
             <img src="../../assets/img/icon/avatar/2.png" alt="" class="round" />
             <img src="../../assets/img/icon/avatar/3.png" alt="" class="round" />
             <div class="round count">107</div>
-            <dy-back class="round close" img="close" mode="light" @click="$back" />
+            <dy-back class="round close" img="close" mode="light" @click="$router.back()" />
           </div>
           <div class="more">
             <div class="wrapper">
@@ -117,7 +117,7 @@ import Dom from '../../utils/dom'
 import { nextTick } from 'vue'
 import { mapState } from 'pinia'
 import { useBaseStore } from '@/store/pinia'
-import { _checkImgUrl, random } from '@/utils'
+import { _checkImgUrl, _sleep, random } from '@/utils'
 import Mock from 'mockjs'
 
 export default {
@@ -205,7 +205,7 @@ export default {
     this.page = this.$refs.page
     this.timer1 = setInterval(async () => {
       this.sendGift()
-      await this.$sleep(300)
+      await _sleep(300)
       this.sendGift()
       this.joinUser()
     }, 1000)
diff --git a/src/pages/home/components/IndicatorHome.vue b/src/pages/home/components/IndicatorHome.vue
index 52deb58..d4a52f5 100644
--- a/src/pages/home/components/IndicatorHome.vue
+++ b/src/pages/home/components/IndicatorHome.vue
@@ -56,6 +56,7 @@ import Loading from '../../../components/Loading.vue'
 import bus from '../../../utils/bus'
 import { mapState } from 'pinia'
 import { useBaseStore } from '@/store/pinia'
+import { _css } from '@/utils/dom'
 
 export default {
   name: 'IndicatorHome',
@@ -179,16 +180,16 @@ export default {
         this.open = false
       }
       this.$emit('update:index', index)
-      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-      this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
+      _css(this.indicatorRef, 'transition-duration', `300ms`)
+      _css(this.indicatorRef, 'left', this.lefts[index] + 'px')
     },
     initTabs() {
       let tabs = this.$refs.tabs
       this.indicatorRef = this.$refs.indicator
-      let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
+      let indicatorWidth = _css(this.indicatorRef, 'width')
       for (let i = 0; i < tabs.children.length; i++) {
         let item = tabs.children[i]
-        let tabWidth = this.$getCss(item, 'width')
+        let tabWidth = _css(item, 'width')
         this.lefts.push(
           item.getBoundingClientRect().x -
             tabs.children[0].getBoundingClientRect().x +
@@ -196,12 +197,12 @@ export default {
         )
       }
       this.indicatorSpace = this.lefts[1] - this.lefts[0]
-      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-      this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
+      _css(this.indicatorRef, 'transition-duration', `300ms`)
+      _css(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
     },
     move(e) {
-      this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
-      this.$setCss(
+      _css(this.indicatorRef, 'transition-duration', `0ms`)
+      _css(
         this.indicatorRef,
         'left',
         this.lefts[this.index] - e / (this.baseStore.bodyWidth / this.indicatorSpace) + 'px'
@@ -209,10 +210,10 @@ export default {
     },
     end(index) {
       this.moveY = 0
-      this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
-      this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
+      _css(this.indicatorRef, 'transition-duration', `300ms`)
+      _css(this.indicatorRef, 'left', this.lefts[index] + 'px')
       setTimeout(() => {
-        this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
+        _css(this.indicatorRef, 'transition-duration', `0ms`)
       }, 300)
     }
   }
diff --git a/src/pages/home/components/PlayFeedback.vue b/src/pages/home/components/PlayFeedback.vue
index 4756d9b..02f7fa9 100644
--- a/src/pages/home/components/PlayFeedback.vue
+++ b/src/pages/home/components/PlayFeedback.vue
@@ -161,7 +161,7 @@
 </template>
 <script>
 import Check from '../../../components/Check'
-import { _notice } from '@/utils'
+import { _hideLoading, _notice, _showLoading, _sleep } from '@/utils'
 
 export default {
   name: 'Test',
@@ -223,9 +223,9 @@ export default {
     },
     async submit() {
       this.cancel()
-      this.$showLoading()
-      await this.$sleep(1000)
-      this.$hideLoading()
+      _showLoading()
+      await _sleep(1000)
+      _hideLoading()
       _notice('感谢你的反馈，我们会尽快答复！')
     }
   }
diff --git a/src/pages/home/components/ShareTo.vue b/src/pages/home/components/ShareTo.vue
index 56471ad..0cfea04 100644
--- a/src/pages/home/components/ShareTo.vue
+++ b/src/pages/home/components/ShareTo.vue
@@ -102,7 +102,7 @@
           v-for="(item, i) in localFriends.all"
           @click="share(item)"
         >
-          <img :src="$imgPreview(item.avatar)" alt="" />
+          <img :src="_checkImgUrl(item.avatar)" alt="" />
           <div class="right">
             <span>{{ item.name }}</span>
             <div class="share-btn" v-if="!item.select">分享</div>
@@ -123,7 +123,7 @@
 import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
 import { mapState } from 'pinia'
 import { useBaseStore } from '@/store/pinia'
-import { _no, _notice } from '@/utils'
+import { _checkImgUrl, _no, _notice, _storageGet, _storageSet, cloneDeep } from '@/utils'
 /*
  * 分享到各种工具
  * */
@@ -151,7 +151,7 @@ export default {
       this.change(newVal)
     },
     showShareDialog() {
-      this.localFriends = this.$clone(this.friends)
+      this.localFriends = cloneDeep(this.friends)
     }
   },
   data() {
@@ -174,12 +174,13 @@ export default {
   },
   created() {},
   methods: {
+    _checkImgUrl,
     _no,
     async change(newVal) {
       if (newVal === -1) return
       this.showShareDialog = true
       if (this.canDownload) {
-        let downloadedVideo = this.$storageGet('downloadedVideo', [])
+        let downloadedVideo = _storageGet('downloadedVideo', [])
         if (!downloadedVideo.find((v) => v === this.videoId) && !this.downloading) {
           await this.downloadVideo()
         }
@@ -215,9 +216,9 @@ export default {
         this.downloading = true
         let time = setInterval(() => {
           if (this.progress >= 100) {
-            let downloadedVideo = this.$storageGet('downloadedVideo', [])
+            let downloadedVideo = _storageGet('downloadedVideo', [])
             downloadedVideo.push(this.videoId)
-            this.$storageSet('downloadedVideo', downloadedVideo)
+            _storageSet('downloadedVideo', downloadedVideo)
             clearInterval(time)
             this.downloading = false
             resolve()
diff --git a/src/pages/home/components/ShareToFriend.vue b/src/pages/home/components/ShareToFriend.vue
index 1d0c18a..2b51c87 100644
--- a/src/pages/home/components/ShareToFriend.vue
+++ b/src/pages/home/components/ShareToFriend.vue
@@ -26,7 +26,7 @@
               v-for="(item, i) in searchResult"
               @click="handleClick2(item)"
             >
-              <img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
+              <img class="left" v-lazy="_checkImgUrl(item.avatar)" alt="" />
               <div class="right">
                 <div class="info">
                   <span class="name">
@@ -60,7 +60,7 @@
           <div class="friend-list">
             <div class="index">所有朋友</div>
             <div class="friend-item" :key="i" v-for="(item, i) in localFriends">
-              <img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
+              <img class="left" v-lazy="_checkImgUrl(item.avatar)" alt="" />
               <div class="right">
                 <span>{{ item.name }}</span>
                 <dy-button :type="item.shared ? 'dark' : 'primary'" @click="item.shared = true">
@@ -80,7 +80,7 @@
 
         <div class="chat-list">
           <div class="chat-item" :key="i" v-for="(item, i) in localFriends">
-            <img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
+            <img class="left" v-lazy="_checkImgUrl(item.avatar)" alt="" />
             <div class="right">
               <div class="title">
                 <div class="name">{{ text }}</div>
@@ -101,6 +101,7 @@ import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
 import { mapState } from 'pinia'
 import Search from '../../../components/Search'
 import { useBaseStore } from '@/store/pinia'
+import { _checkImgUrl, cloneDeep } from '@/utils'
 /*
 分享给朋友
 * */
@@ -136,7 +137,7 @@ export default {
   watch: {
     searchKey(newVal) {
       if (newVal) {
-        let temp = this.$clone(this.localFriends)
+        let temp = cloneDeep(this.localFriends)
         this.searchResult = temp.filter((v) => {
           // return v.name.includes(newVal) || v.account.includes(newVal);
           return v.name.includes(newVal)
@@ -147,7 +148,7 @@ export default {
     },
     modelValue(newVal) {
       if (newVal) {
-        this.localFriends = this.$clone(this.friends.all)
+        this.localFriends = cloneDeep(this.friends.all)
         this.localFriends.map((v) => (v.shared = false))
       } else {
         this.searchKey = ''
@@ -165,6 +166,7 @@ export default {
   },
   created() {},
   methods: {
+    _checkImgUrl,
     handleClick() {
       this.isShowRightText = true
       this.height = 'calc(var(--vh, 1vh) * 100)'
diff --git a/src/pages/home/components/VideoShare.vue b/src/pages/home/components/VideoShare.vue
index 648a845..2c77f66 100644
--- a/src/pages/home/components/VideoShare.vue
+++ b/src/pages/home/components/VideoShare.vue
@@ -55,7 +55,7 @@
       </div>
       <div class="friends">
         <div class="item" :key="i" v-for="(item, i) in friends.all">
-          <img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
+          <img class="left" v-lazy="_checkImgUrl(item.avatar)" alt="" />
           <div class="right">
             <span>{{ item.name }}</span>
             <dy-button
@@ -81,7 +81,15 @@ import { mapState } from 'pinia'
 import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
 import LoadingCircle from './LoadingCircle'
 import { useBaseStore } from '@/store/pinia'
-import { _no, _notice } from '@/utils'
+import {
+  _checkImgUrl,
+  _hideLoading,
+  _no,
+  _notice,
+  _showLoading,
+  _sleep,
+  _stopPropagation
+} from '@/utils'
 // import DouyinCode from "./DouyinCode";
 
 export default {
@@ -150,14 +158,14 @@ export default {
         click(e) {
           if (!this.canDownload) {
             if (this.itemType === 'download') {
-              this.$stopPropagation(e)
+              _stopPropagation(e)
             } else {
               _notice('作者已关闭下载功能')
               this.$emit('copy')
             }
             return
           }
-          if (this.needDown) this.$stopPropagation(e)
+          if (this.needDown) _stopPropagation(e)
           else return
           if (this.progress === 100) {
             _notice('未实现分享跳转到其他App')
@@ -250,6 +258,7 @@ export default {
     }
   },
   methods: {
+    _checkImgUrl,
     _no,
     displayText(type) {
       if (this.loading[type]) {
@@ -259,9 +268,9 @@ export default {
     },
     async copyLink() {
       this.closeShare()
-      this.$showLoading()
-      await this.$sleep(500)
-      this.$hideLoading()
+      _showLoading()
+      await _sleep(500)
+      _hideLoading()
       _notice('复制成功')
     },
     toggleCollect() {
diff --git a/src/pages/home/slide/Community.vue b/src/pages/home/slide/Community.vue
index 9c87e2f..7a0b5ca 100644
--- a/src/pages/home/slide/Community.vue
+++ b/src/pages/home/slide/Community.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="Community" @dragstart="(e) => Utils.$stopPropagation(e)">
+  <div id="Community" @dragstart="(e) => _stopPropagation(e)">
     <ScrollList class="Scroll" v-if="state.show" :api="recommendedPost">
       <template v-slot="{ list }">
         <div class="search" @click="nav('/home/search')">
@@ -47,7 +47,7 @@
 
 <script setup>
 import { reactive, ref, watch } from 'vue'
-import Utils, { _checkImgUrl, _no, cloneDeep } from '@/utils'
+import { _checkImgUrl, _no, _stopPropagation, cloneDeep } from '@/utils'
 import { recommendedPost } from '@/api/user'
 import { useNav } from '@/utils/hooks/useNav'
 import { Icon } from '@iconify/vue'
diff --git a/src/pages/home/slide/LongVideo.vue b/src/pages/home/slide/LongVideo.vue
index 9675c97..a5063df 100644
--- a/src/pages/home/slide/LongVideo.vue
+++ b/src/pages/home/slide/LongVideo.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { reactive, ref, watch } from 'vue'
-import Utils, { _checkImgUrl, _duration, _formatNumber } from '@/utils'
+import { _checkImgUrl, _duration, _formatNumber, _stopPropagation } from '@/utils'
 import { recommendedVideo } from '@/api/videos'
 import ScrollList from '@/components/ScrollList.vue'
 import { useNav } from '@/utils/hooks/useNav'
@@ -78,7 +78,7 @@ const nav = useNav()
 </script>
 
 <template>
-  <div class="long-video" @dragstart="(e) => Utils.$stopPropagation(e)">
+  <div class="long-video" @dragstart="(e) => _stopPropagation(e)">
     <ScrollList class="Scroll" v-if="state.show" :api="recommendedVideo">
       <template v-slot="{ list }">
         <div class="list">
diff --git a/src/pages/home/slide/Slide0.vue b/src/pages/home/slide/Slide0.vue
index 82afb19..84e5147 100644
--- a/src/pages/home/slide/Slide0.vue
+++ b/src/pages/home/slide/Slide0.vue
@@ -62,7 +62,7 @@
 import SlideItem from '@/components/slide/SlideItem.vue'
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import bus, { EVENT_KEY } from '@/utils/bus'
-import Utils from '@/utils'
+import { _stopPropagation } from '@/utils'
 import SlideList from './SlideList.vue'
 import { recommendedVideo } from '@/api/videos'
 
@@ -94,7 +94,7 @@ const state = reactive({
 })
 
 function showSubType(e) {
-  Utils.$stopPropagation(e)
+  _stopPropagation(e)
   console.log('subTypeRef')
   state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
   state.subTypeVisible = true
@@ -107,7 +107,7 @@ function pageClick(e) {
   if (state.subTypeVisible) {
     state.subTypeIsTop = state.subTypeVisible = false
     bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
-    Utils.$stopPropagation(e)
+    _stopPropagation(e)
   }
 }
 
diff --git a/src/pages/home/slide/Slide2.vue b/src/pages/home/slide/Slide2.vue
index f828764..0e78377 100644
--- a/src/pages/home/slide/Slide2.vue
+++ b/src/pages/home/slide/Slide2.vue
@@ -1,7 +1,7 @@
 <template>
   <SlideItem class="slide-item-class">
     <div class="sub-type" :class="state.subTypeIsTop ? 'top' : ''" ref="subTypeRef">
-      <div class="card" @touchmove.capture="stop">
+      <div class="card" @touchmove="_stop">
         <div class="nav-item" @click="goLive(i)" :key="j" v-for="(i, j) in store.users">
           <img :src="_checkImgUrl(i.avatar_168x168.url_list[0])" alt="" />
           <span>{{ i.nickname }}</span>
@@ -33,7 +33,7 @@
 import SlideItem from '@/components/slide/SlideItem.vue'
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import bus, { EVENT_KEY } from '@/utils/bus'
-import Utils, { _checkImgUrl } from '@/utils'
+import { _checkImgUrl, _stop, _stopPropagation } from '@/utils'
 import SlideList from './SlideList.vue'
 import { recommendedVideo } from '@/api/videos'
 import { useBaseStore } from '@/store/pinia'
@@ -46,10 +46,6 @@ const props = defineProps({
   }
 })
 
-function stop(e) {
-  e.stopPropagation()
-}
-
 const subTypeRef = ref(null)
 const state = reactive({
   index: 0,
@@ -61,7 +57,7 @@ const state = reactive({
 })
 
 function showSubType(e) {
-  Utils.$stopPropagation(e)
+  _stopPropagation(e)
   console.log('subTypeRef')
   state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
   state.subTypeVisible = true
@@ -74,7 +70,7 @@ function pageClick(e) {
   if (state.subTypeVisible) {
     state.subTypeIsTop = state.subTypeVisible = false
     bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
-    Utils.$stopPropagation(e)
+    _stopPropagation(e)
   }
 }
 
diff --git a/src/pages/home/slide/SlideList.vue b/src/pages/home/slide/SlideList.vue
index f200c22..45a3393 100644
--- a/src/pages/home/slide/SlideList.vue
+++ b/src/pages/home/slide/SlideList.vue
@@ -103,11 +103,11 @@ async function getData(refresh = false) {
 // function dislike() {
 //   listRef.value.dislike(state.list[1])
 //   state.list[state.index] = state.list[1]
-//   $notice('操作成功，将减少此类视频的推荐')
+//   _notice('操作成功，将减少此类视频的推荐')
 // }
 
 // function end() {
-//   // this.$notice('暂时没有更多了')
+//   // _notice('暂时没有更多了')
 // }
 
 function click(uniqueId) {
diff --git a/src/pages/login/OtherLogin.vue b/src/pages/login/OtherLogin.vue
index 5976349..7e36605 100644
--- a/src/pages/login/OtherLogin.vue
+++ b/src/pages/login/OtherLogin.vue
@@ -113,7 +113,7 @@ export default {
       if (res) {
         this.loading = true
         setTimeout(() => {
-          this.$nav('/login/verification-code')
+          this.$router.push('/login/verification-code')
         }, 2000)
       }
     },
diff --git a/src/pages/login/RetrievePassword.vue b/src/pages/login/RetrievePassword.vue
index 6738c40..03d814d 100644
--- a/src/pages/login/RetrievePassword.vue
+++ b/src/pages/login/RetrievePassword.vue
@@ -69,6 +69,7 @@ import Check from '../../components/Check'
 import LoginInput from './components/LoginInput'
 import Tooltip from './components/Tooltip'
 import Base from './Base'
+import { _hideLoading, _showConfirmDialog, _showLoading, _showNoticeDialog, _sleep } from '@/utils'
 
 export default {
   name: 'RetrievePassword',
@@ -100,13 +101,13 @@ export default {
   },
   methods: {
     getVoiceCode() {
-      return this.$showNoticeDialog(
+      return _showNoticeDialog(
         '语音验证码',
         '我们将以电话的方式告知你验证码，请注意接听',
         '',
         () => {
           setTimeout(() => {
-            this.$showConfirmDialog(
+            _showConfirmDialog(
               '',
               '您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' +
                 '您因为换号无法收到验证码，可以尝试找回账号',
@@ -124,9 +125,9 @@ export default {
     },
     //TODO loading样式不对
     async sendCode() {
-      this.$showLoading()
-      await this.$sleep(500)
-      this.$hideLoading()
+      _showLoading()
+      await _sleep(500)
+      _hideLoading()
       this.isSendVerificationCode = true
     },
     async login() {
diff --git a/src/pages/me/Me.less b/src/pages/me/Me.less
index d5bc981..d63255c 100644
--- a/src/pages/me/Me.less
+++ b/src/pages/me/Me.less
@@ -190,7 +190,8 @@
             .poster {
               border-radius: 4rem;
               width: 100%;
-              height: calc((100% - 34rem) / 3);
+              height: 130rem;
+              max-height: calc((100vw - 34rem) / 3);
               display: block;
             }
 
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 5874e13..4486795 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -223,7 +223,7 @@
                       :key="j"
                       v-for="(i, j) in videos.collect.music.list.slice(0, 3)"
                     >
-                      <img class="poster" :src="$imgPreview(i.cover)" alt="" />
+                      <img class="poster" :src="_checkImgUrl(i.cover)" alt="" />
                       <div class="title">{{ i.name }}</div>
                     </div>
                   </div>
@@ -378,7 +378,7 @@ import { mapState } from 'pinia'
 
 import bus from '../../utils/bus'
 import ConfirmDialog from '../../components/dialog/ConfirmDialog'
-import { _checkImgUrl, _formatNumber, _getUserDouyinId, _no } from '@/utils'
+import { _checkImgUrl, _formatNumber, _getUserDouyinId, _no, _stopPropagation } from '@/utils'
 import { likeVideo, myVideo, privateVideo } from '@/api/videos'
 import { useBaseStore } from '@/store/pinia'
 import { userCollect } from '@/api/user'
@@ -502,7 +502,7 @@ export default {
       if (this.baseActiveIndex === 0) return
       if (this.baseActiveIndex === 1) {
         this.baseActiveIndex = 0
-        this.$stopPropagation(e)
+        _stopPropagation(e)
       }
     },
     async getScrollAreaHeight(index = this.contentIndex) {
@@ -790,10 +790,9 @@ export default {
                 } else {
                   //transformY === 0说明，本来就在顶部，然后猛的一划,这里要判断下
                   if (transformY !== 0) {
-                    if (this.$getCss(this.refs.header, 'height') < 400) {
+                    if (_css(this.refs.header, 'height') < 400) {
                       this.refs.header.style.transition = 'none'
-                      this.refs.header.style.height =
-                        this.$getCss(this.refs.header, 'height') + 10 + 'px'
+                      this.refs.header.style.height = _css(this.refs.header, 'height') + 10 + 'px'
                       timer = requestAnimationFrame(fn)
                     } else {
                       this.refs.header.style.transition = 'all .6s'
diff --git a/src/pages/me/components/SlideItemMusic.vue b/src/pages/me/components/SlideItemMusic.vue
index f37d280..67a23e8 100644
--- a/src/pages/me/components/SlideItemMusic.vue
+++ b/src/pages/me/components/SlideItemMusic.vue
@@ -2,7 +2,7 @@
   <div class="SlideItemMusic">
     <div v-show="!isFullLyrics">
       <div class="cover">
-        <img v-lazy="$imgPreview(modelValue.cover)" alt="" />
+        <img v-lazy="_checkImgUrl(modelValue.cover)" alt="" />
       </div>
       <div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true">
         <div class="container">
@@ -96,7 +96,7 @@
 </template>
 <script>
 import { nextTick } from 'vue'
-import globalMethods from '../../../utils'
+import { _checkImgUrl, _duration, _stopPropagation } from '@/utils'
 import gaobaiqiqiu from '../../../assets/data/lyrics/gaobaiqiqiu.lrc?raw'
 import { userCollect } from '@/api/user'
 
@@ -193,6 +193,7 @@ export default {
     })
   },
   methods: {
+    _checkImgUrl,
     slide(state) {
       this.togglePlay(false)
       this.$emit(state)
@@ -291,7 +292,7 @@ export default {
       if (this.pageX < 0) this.pageX = 0
       if (this.pageX > this.slideBarWidth) this.pageX = this.slideBarWidth - 5
       this.currentTime = Math.ceil(this.pageX / this.step)
-      globalMethods.$stopPropagation(e)
+      _stopPropagation(e)
     },
     end(e) {
       this.lastPageX = this.pageX
@@ -299,12 +300,12 @@ export default {
       this.audio.currentTime = this.currentTime
       this.audio.play()
       this.isMove = false
-      globalMethods.$stopPropagation(e)
+      _stopPropagation(e)
     },
     $durationTime(time) {
       if (time === 0) return '00:00'
       else {
-        return this.$duration(time)
+        return _duration(time)
       }
     },
     durationStyle(type) {
diff --git a/src/pages/other/AlbumDetail.vue b/src/pages/other/AlbumDetail.vue
index 3d6747a..1dafe6d 100644
--- a/src/pages/other/AlbumDetail.vue
+++ b/src/pages/other/AlbumDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="goods-detail" @dragstart="(e) => Utils.$stopPropagation(e)">
+  <div class="goods-detail" @dragstart="(e) => _stopPropagation(e)">
     <header>
       <Icon @click="close" icon="material-symbols-light:arrow-back-ios-new" />
       <div class="option" @click="nav('/home/search')">
@@ -99,7 +99,7 @@ import SlideItem from '@/components/slide/SlideItem.vue'
 import { reactive, ref } from 'vue'
 import { useNav } from '@/utils/hooks/useNav'
 import { Icon } from '@iconify/vue'
-import Utils, { _checkImgUrl } from '@/utils'
+import { _checkImgUrl, _stopPropagation } from '@/utils'
 
 const nav = useNav()
 
diff --git a/src/pages/people/Scan.vue b/src/pages/people/Scan.vue
index f61a6fb..b875f5e 100644
--- a/src/pages/people/Scan.vue
+++ b/src/pages/people/Scan.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="Scan">
-    <img src="../../assets/img/icon/components/gray-back.png" @click="$back" class="back" />
+    <img src="../../assets/img/icon/components/gray-back.png" @click="router.back()" class="back" />
     <div class="video-ctn">
       <video src="http://qy9rc9xff.hn-bkt.clouddn.com/0.mp4"></video>
     </div>
@@ -24,6 +24,9 @@
 <script setup>
 //TODO 那个动画没做，用css画有点麻烦，后面ps p一张图片吧
 
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 defineOptions({
   name: 'Scan'
 })
diff --git a/src/pages/people/components/People.vue b/src/pages/people/components/People.vue
index b8cc89e..22fb453 100644
--- a/src/pages/people/components/People.vue
+++ b/src/pages/people/components/People.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="People">
-    <img :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left" />
+    <img :src="_checkImgUrl(people.avatar)" alt="" class="head-image pull-left" />
     <div class="content">
       <template v-if="mode === 'normal'">
         <div class="left">
@@ -161,6 +161,8 @@
   </div>
 </template>
 <script>
+import { _checkImgUrl } from '@/utils'
+
 export default {
   name: 'People',
   props: {
@@ -186,7 +188,7 @@ export default {
   },
   computed: {},
   created() {},
-  methods: {}
+  methods: { _checkImgUrl }
 }
 </script>
 
diff --git a/src/pages/people/components/Peoples.vue b/src/pages/people/components/Peoples.vue
index 5132549..58ddff7 100644
--- a/src/pages/people/components/Peoples.vue
+++ b/src/pages/people/components/Peoples.vue
@@ -33,7 +33,7 @@
 <script>
 import People from './People'
 import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
-import { _notice } from '@/utils'
+import { _notice, _showConfirmDialog } from '@/utils'
 
 export default {
   name: 'Peoples',
@@ -121,7 +121,7 @@ export default {
     },
     noLook() {
       this.isShowUnfollow = false
-      this.$showConfirmDialog(
+      _showConfirmDialog(
         '确认不看 TA?',
         '确认后，将不再为你推荐对方的作品，你可以在对方主页随时恢复。',
         'gray',
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index b80756f..9305ae4 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -142,7 +142,7 @@ export default class Dom {
 }
 
 export function _css(el, key, value?) {
-  const reg = /^\d+(px|pt|em|rem|vw|vh|%|rpx)$/i
+  const reg = /^\d+.?\d*(px|pt|em|rem|vw|vh|%|rpx|ms)$/i
   if (value === undefined) {
     let val = null
     if ('getComputedStyle' in window) {
@@ -167,7 +167,9 @@ export function _css(el, key, value?) {
       ].includes(key)
     ) {
       if (!reg.test(value)) {
-        value += 'px'
+        if (!String(value).includes('calc')) {
+          value += 'px'
+        }
       }
     }
     // console.log(value)
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
index 0b67653..dfd0486 100644
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@@ -3,274 +3,64 @@ import SelectDialog from '../components/dialog/SelectDialog.vue'
 import SimpleConfirmDialog from '../components/dialog/SimpleConfirmDialog.vue'
 import ConfirmDialog from '../components/dialog/ConfirmDialog.vue'
 import Loading from '../components/Loading.vue'
-import Config, { IMG_URL, IS_DEV } from '../config'
+import { IMG_URL, IS_DEV } from '@/config'
 import NoticeDialog from '../components/dialog/NoticeDialog.vue'
 import bus, { EVENT_KEY } from './bus'
 import { ArchiveReader, libarchiveWasm } from 'libarchive-wasm'
 
-const Utils = {
-  $showLoading() {
-    const app = Vue.createApp({
-      render() {
-        return <Loading />
-      }
-    })
-    const parent = document.createElement('div')
-    parent.classList.add(...['dialog-ctn'])
-    document.body.append(parent)
-    app.mount(parent)
-  },
-  $hideLoading() {
-    const parent = document.querySelector('.dialog-ctn')
-    parent.remove()
-  },
-  $showConfirmDialog(
-    title,
-    subtitle,
-    subtitleColor,
-    okCb,
-    cancelCb,
-    okText,
-    cancelText,
-    cancelTextColor
-  ) {
-    const remove = () => {
-      const parent = document.querySelector('.dialog-ctn')
-      parent.classList.replace('fade-in', 'fade-out')
-      setTimeout(() => {
-        parent.remove()
-      }, 300)
-    }
-    const tempOkCb = (e) => {
-      remove()
-      okCb && okCb(e)
-    }
-    const tempCancelCb = (e) => {
-      remove()
-      cancelCb && cancelCb(e)
-    }
-    const app = Vue.createApp({
-      render() {
-        return (
-          <ConfirmDialog
-            onCancel={tempCancelCb}
-            onDismiss={remove}
-            title={title}
-            subtitle={subtitle}
-            subtitleColor={subtitleColor}
-            cancelTextColor={cancelTextColor}
-            okText={okText}
-            cancelText={cancelText}
-            onOk={tempOkCb}
-          />
-        )
-      }
-    })
-    const parent = document.createElement('div')
-    parent.classList.add(...['dialog-ctn', 'fade-in'])
-    document.body.append(parent)
-    app.mount(parent)
-  },
-  $showNoticeDialog(title, subtitle, subtitleColor, cancelCb, cancelText) {
-    const remove = () => {
-      const parent = document.querySelector('.dialog-ctn')
-      parent.classList.replace('fade-in', 'fade-out')
-      setTimeout(() => {
-        parent.remove()
-      }, 300)
-    }
-    const tempCancelCb = (e) => {
-      remove()
-      cancelCb(e)
-    }
-    const app = Vue.createApp({
-      render() {
-        return (
-          <NoticeDialog
-            onCancel={tempCancelCb}
-            onDismiss={remove}
-            title={title}
-            subtitleColor={subtitleColor}
-            cancelText={cancelText}
-            subtitle={subtitle}
-          />
-        )
-      }
-    })
-    const parent = document.createElement('div')
-    parent.classList.add(...['dialog-ctn', 'fade-in'])
-    document.body.append(parent)
-    app.mount(parent)
-  },
-  $notice(val) {
-    const div = document.createElement('div')
-    div.classList.add('global-notice')
-    div.textContent = val
-    document.body.append(div)
-    setTimeout(() => {
-      document.body.removeChild(div)
-    }, 1000)
-  },
-  $back() {
-    this.$router.back()
-    // window.history.back()
-  },
-  $stopPropagation(e) {
-    e.stopImmediatePropagation()
-    e.stopPropagation()
-    e.preventDefault()
-  },
-  $getCss(curEle, attr) {
-    let val = null,
-      reg = null
-    if ('getComputedStyle' in window) {
-      val = window.getComputedStyle(curEle, null)[attr]
-    } else {
-      //ie6~8不支持上面属性
-      //不兼容
-      if (attr === 'opacity') {
-        val = curEle.currentStyle['filter'] //'alpha(opacity=12,345)'
-        reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i
-        val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
-      } else {
-        val = curEle.currentStyle[attr]
-      }
-    }
-    // reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
-    // return reg.test(val) ? parseFloat(val) : val
-    return parseFloat(val)
-  },
-  $setCss(el, key, value) {
-    // console.log(value)
-    if (key === 'transform') {
-      //直接设置不生效
-      el.style.webkitTransform =
-        el.style.MsTransform =
-        el.style.msTransform =
-        el.style.MozTransform =
-        el.style.OTransform =
-        el.style.transform =
-          value
-    } else {
-      el.style[key] = value
-    }
-  },
-  $nav(path, query = {}) {
-    this.$router.push({ path, query })
-  },
-  $clone(v) {
-    return JSON.parse(JSON.stringify(v))
-  },
-  $sleep(duration) {
-    return new Promise((resolve) => {
-      setTimeout(resolve, duration)
-    })
-  },
-  $parseURL(url) {
-    const a = document.createElement('a')
-    a.href = url
-    return {
-      host: a.hostname,
-      port: a.port,
-      query: a.search,
-      params: (function () {
-        const ret = {}
-        const seg = a.search.replace(/^\?/, '').split('&')
-        const len = seg.length
-        let i = 0
-        let s
-        for (; i < len; i++) {
-          if (!seg[i]) {
-            continue
-          }
-          s = seg[i].split('=')
-          ret[s[0]] = s[1]
-        }
-        return ret
-      })(),
-      hash: a.hash.replace('#', '')
-    }
-  },
-  $imgPreview(url) {
-    // console.log(url)
-    if (!url) return
-    //本地图片
-    if (
-      url.includes('assets/img') ||
-      url.includes('file://') ||
-      url.includes('data:image') ||
-      url.includes('http') ||
-      url.includes('https')
-    ) {
-      return url
-    }
-    return Config.filePreview + url
-  },
-  $storageSet(key, value) {
-    localStorage.setItem(key, JSON.stringify(value))
-  },
-  $storageGet(key, defaultValue = '') {
-    const res = localStorage.getItem(key)
-    if (res) {
-      return JSON.parse(res)
-    }
-    return defaultValue
-  },
-  $duration(v) {
-    if (!v) return '00:00'
-    const m = Math.floor(v / 60)
-    // let s = v % 60
-    const s = Math.round(v % 60)
-    let str: string = ''
-    if (m === 0) {
-      str = '00'
-    } else if (m > 0 && m < 10) {
-      str = '0' + m
-    } else {
-      str = m + ''
-    }
-    str += ':'
-    if (s === 0) {
-      str += '00'
-    } else if (s > 0 && s < 10) {
-      str += '0' + s
-    } else {
-      str += s
-    }
-    return str
-  },
-  formatNumber(num) {
-    if (!num) return
-    if (num > 100000000) {
-      return (num / 100000000).toFixed(1) + '亿'
-    } else if (num > 10000) {
-      return (num / 10000).toFixed(1) + '万'
-    } else {
-      return num
-    }
-  },
-  updateItem(props, key, val, emit) {
-    const old = cloneDeep(props.item)
-    old[key] = val
-    emit('update:item', old)
-    bus.emit(EVENT_KEY.UPDATE_ITEM, { position: props.position, item: old })
-  },
-  copy(val) {
-    const textarea = document.createElement('textarea')
-    document.body.appendChild(textarea)
-    textarea.style.position = 'absolute'
-    textarea.style.clip = 'rect(0 0 0 0)'
-    textarea.value = val
-    textarea.select()
-    if (document.execCommand) {
-      document.execCommand('copy', true)
-      this.$notice('已复制')
-    }
-    document.body.removeChild(textarea)
-  }
+export function _updateItem(props, key, val, emit) {
+  const old = cloneDeep(props.item)
+  old[key] = val
+  emit('update:item', old)
+  bus.emit(EVENT_KEY.UPDATE_ITEM, { position: props.position, item: old })
 }
 
-export default Utils
+export function _storageSet(key, value) {
+  localStorage.setItem(key, JSON.stringify(value))
+}
+
+export function _storageGet(key, defaultValue = '') {
+  const res = localStorage.getItem(key)
+  if (res) {
+    return JSON.parse(res)
+  }
+  return defaultValue
+}
+
+export function _stopPropagation(e: Event) {
+  e.stopImmediatePropagation()
+  e.stopPropagation()
+  e.preventDefault()
+}
+
+export function _stop(e: Event) {
+  e.stopPropagation()
+}
+
+export function _copy(val) {
+  const textarea = document.createElement('textarea')
+  document.body.appendChild(textarea)
+  textarea.style.position = 'absolute'
+  textarea.style.clip = 'rect(0 0 0 0)'
+  textarea.value = val
+  textarea.select()
+  if (document.execCommand) {
+    document.execCommand('copy', true)
+    _notice('已复制')
+  }
+  document.body.removeChild(textarea)
+}
+
+export function _formatNumber(num) {
+  if (!num) return
+  if (num > 100000000) {
+    return (num / 100000000).toFixed(1) + '亿'
+  } else if (num > 10000) {
+    return (num / 10000).toFixed(1) + '万'
+  } else {
+    return num
+  }
+}
 
 export function _dateFormat(val, type): string {
   if (!val) return
@@ -351,12 +141,28 @@ export function _checkImgUrl(url) {
   return IMG_URL + url
 }
 
-export function _duration(num) {
-  return Utils.$duration(num)
-}
-
-export function _formatNumber(num) {
-  return Utils.formatNumber(num)
+export function _duration(v) {
+  if (!v) return '00:00'
+  const m = Math.floor(v / 60)
+  // let s = v % 60
+  const s = Math.round(v % 60)
+  let str: string = ''
+  if (m === 0) {
+    str = '00'
+  } else if (m > 0 && m < 10) {
+    str = '0' + m
+  } else {
+    str = m + ''
+  }
+  str += ':'
+  if (s === 0) {
+    str += '00'
+  } else if (s > 0 && s < 10) {
+    str += '0' + s
+  } else {
+    str += s
+  }
+  return str
 }
 
 export function _getUserDouyinId(item) {
@@ -372,10 +178,6 @@ export function _sleep(duration) {
   })
 }
 
-export function _copy(val) {
-  return Utils.copy(val)
-}
-
 export function cloneDeep(val) {
   return JSON.parse(JSON.stringify(val))
 }
diff --git a/src/utils/mixin.ts b/src/utils/mixin.ts
index ac82397..1265ff3 100644
--- a/src/utils/mixin.ts
+++ b/src/utils/mixin.ts
@@ -1,4 +1,3 @@
-import globalMethods from './index'
 import BaseHeader from '../components/BaseHeader.vue'
 import SlideItem from '../components/slide/SlideItem.vue'
 import Indicator from '../components/slide/Indicator.vue'
@@ -35,9 +34,6 @@ export default {
       RELATE_ENUM: CONST_VAR.RELATE_ENUM
     }
   },
-  methods: {
-    ...globalMethods
-  },
   directives: {
     longpress: {
       beforeMount: function (el, binding, vNode) {
diff --git a/src/utils/slide.ts b/src/utils/slide.ts
index ef3169e..a17a385 100644
--- a/src/utils/slide.ts
+++ b/src/utils/slide.ts
@@ -1,6 +1,5 @@
 import bus from '@/utils/bus'
-import Utils from '@/utils/index'
-import GM from '@/utils/index'
+import { _stopPropagation } from '@/utils/index'
 import { SlideType } from '@/utils/const_var'
 import { nextTick } from 'vue'
 import { _css } from '@/utils/dom'
@@ -22,8 +21,8 @@ function checkEvent(e) {
 
 //初始化信息，获取slide dom的长宽、子元素数量，用于move事件判断能否滑动
 export function slideInit(el, state) {
-  state.wrapper.width = GM.$getCss(el, 'width')
-  state.wrapper.height = GM.$getCss(el, 'height')
+  state.wrapper.width = _css(el, 'width')
+  state.wrapper.height = _css(el, 'height')
   nextTick(() => {
     state.wrapper.childrenLength = el.children.length
   })
@@ -138,7 +137,7 @@ export function slideTouchMove(
     if (canNextCb(state, isNext)) {
       window.isMoved = true
       //能滑动，那就把事件捕获，不能给父组件处理
-      Utils.$stopPropagation(e)
+      _stopPropagation(e)
       if (state.type === SlideType.HORIZONTAL) {
         bus.emit(state.name + '-moveX', state.move.x)
       }